Permalink
Browse files

Add React compiling support, -r initialization flag

  • Loading branch information...
alecperkins committed Sep 27, 2014
1 parent e0c5288 commit ec2dd1f482d63d08326f816ec7e3f9e4d3803458
Showing with 43 additions and 7 deletions.
  1. +3 −1 README.md
  2. +1 −0 bin/proto
  3. +4 −3 package.json
  4. +29 −2 src/proto.coffee
  5. +6 −1 src/renderer.coffee
View
@@ -2,7 +2,7 @@
*v1.3.2*
[Proto](https://github.com/droptype/proto) is a front-end web prototyping tool, combining markup ([Jade](http://jade-lang.com/)), script ([CoffeeScript](http://coffeescript.org)), and style ([Stylus](http://learnboost.github.com/stylus/)) into a single page. It creates a set of files each representing one of those three facets of the page, plus files for notes and settings, and serves up their rendered form. Every time the page is loaded, those files are compiled on-the-fly. It's helpful for creating prototypes using CoffeeScript, Jade, and Stylus, without having to set up a build process and environment.
[Proto](https://github.com/marquee/proto) is a front-end web prototyping tool, combining markup ([Jade](http://jade-lang.com/)), script ([CoffeeScript](http://coffeescript.org)), and style ([Stylus](http://learnboost.github.com/stylus/)) into a single page. It creates a set of files each representing one of those three facets of the page, plus files for notes and settings, and serves up their rendered form. Every time the page is loaded, those files are compiled on-the-fly. It's helpful for creating prototypes using CoffeeScript, Jade, and Stylus, without having to set up a build process and environment. [CJSX](https://github.com/jsdf/coffee-react-transform) is supported, and Proto is particularly handy for prototyping [React](http://facebook.github.io/react/) components.
* [Repository](https://github.com/droptype/proto)
* [Issues](https://github.com/droptype/proto/issues)
@@ -54,6 +54,8 @@ Omitting the project name will result in a name following the format `proto-YYYY
You can also load a Gisted project (see below for how to create one). `proto -ig <gist_id_or_url> [<name>]` will initialize a Proto project using the specified gist as the template, with the name specified in its `settings.json` or the optional specified name.
To initialize a React project, which has a CDN-hosted copy of React library and some basic boilerplate instead of the usual libraries, use the `-r` flag when initializing: `proto -ir react_component`.
### Work on a project
View
@@ -19,6 +19,7 @@ cli.parse({
init : ['i', 'Initialize project'],
port : ['p', 'Serve on port', 'number', 5000],
gist : ['g', 'Send to gist or load from gist', 'string'],
react : ['r', 'Initialize with React'],
migrate : ['m', 'Migrate a project to Proto version', 'string'],
urls : ['u', 'Display urls for project', 'string'],
version : ['v', 'Display Proto version'],
View
@@ -8,10 +8,11 @@
},
"engines": {
"node": "0.10.x",
"npm": "1.2.x"
"npm": "1.2.x"
},
"dependencies": {
"cli": "~0.4.5",
"coffee-react-transform": "^1.0.2",
"coffee-script": "~1.7.1",
"gitjs": "~0.0.5",
"jade": "~1.3.0",
@@ -30,8 +31,8 @@
},
"author": "Alec Perkins <alec@marquee.by>",
"license": {
"type": "Unlicense",
"url": "https://raw.github.com/marquee/proto/master/LICENSE"
"type": "Unlicense",
"url": "https://raw.github.com/marquee/proto/master/LICENSE"
},
"contributors": [
{
View
@@ -58,7 +58,7 @@ getGist = (url, callback) ->
# Initialize a project using the specified project name and the default
# template. Optionally, use the specified Gist URL/ID to load a gist and use
# that as the template.
initializeProject = (project_name, gist_url=null, cli_args) ->
initializeProject = (project_name, gist_url=null, react=false, cli_args) ->
# No name was specified, so use a generated on in the format
# proto-YYYYMMDD-N, where N is an incremental counter to avoid conflicts.
@@ -116,6 +116,33 @@ initializeProject = (project_name, gist_url=null, cli_args) ->
doInit(templates)
else if react
# Do the init with the default template.
doInit
'script.coffee' : """
Component = React.createClass
displayName: 'Component'
render: ->
<div className='Component'>
Component! {@props.time}
</div>
React.renderComponent(Component(time=new Date()), document.getElementById('app'))
"""
'markup.jade' : '#app\n'
'style.styl' : '@import \'nib\'\n\nh1\n font-weight 300\n font-family Helvetica\n\n\n'
'notes.md' : "# #{ project_name }\n\n\n"
'settings.json' : """{
"name": "#{ project_name }",
"proto_version": "#{ VERSION }",
"script_libraries": [
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js",
"https://cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.js"
],
"style_libraries": [
],
"extra_head_markup": "<meta name='viewport' content='width=device-width'>"
}"""
else
# Do the init with the default template.
doInit
@@ -441,7 +468,7 @@ exports.run = (args, options) ->
downloadLibs(options.download_libs)
else if options.init
project_name = args[0] or ''
initializeProject(project_name, options.gist, args)
initializeProject(project_name, options.gist, options.react, args)
else
project_name = args[0]
if not project_name
View
@@ -1,4 +1,5 @@
CoffeeScript = require 'coffee-script'
cjsxTransform = require 'coffee-react-transform'
Jade = require 'jade'
Nib = require 'nib'
Stylus = require 'stylus'
@@ -10,7 +11,11 @@ VERSION = require './VERSION'
compileScriptFile = (script_source) ->
return CoffeeScript.compile(script_source.toString())
return CoffeeScript.compile(
cjsxTransform(
script_source.toString()
)
)
compileMarkupFile = (markup_source) ->
template = Jade.compile(markup_source.toString())

0 comments on commit ec2dd1f

Please sign in to comment.