Coffeescript compiler wrapper adding coffee-react-transform CJSX support
npm install coffee-react-voidCoffee-React provides a JSX-like syntax for building React components with the full awesomeness of CoffeeScript.
Included is the cjsx executable, which is wrapper for coffee, using
coffee-react-transform and
coffee-script to transform CJSX to Javascript.
You can also require() CJSX components under node for server-side rendering.
neat-component.cjsx This line has been printed {n} times
``coffee`
NeatComponent = React.createClass
render: ->
{A Component is I
if @props.showTitle}
{
compile it
`bash`
$ cjsx -cb neat-component.cjsx
neat-component.js
`js
// Generated by CoffeeScript 1.9.1
var NeatComponent;
NeatComponent = React.createClass({displayName: "NeatComponent",
render: function() {
var n;
return React.createElement("div", {
"className": "neat-component"
}, (this.props.showTitle ? React.createElement("h1", null, "A Component is I") : void 0), React.createElement("hr", null), (function() {
var i, results;
results = [];
for (n = i = 1; i <= 5; n = ++i) {
results.push(React.createElement("p", {
"key": n
}, "This line has been printed ", n, " times"));
}
return results;
})());
}
});
`
bash
npm install -g coffee-react
`#### Version compatibility
- 5.x - React 0.13.x - 0.15.x
- 4.x - React 0.13.x - 0.14.x
- 3.x - React 0.13.x - 0.14.x
- 2.1.x - React 0.12.1
- 2.x - React 0.12
- 1.x - React 0.11.2
- 0.x - React 0.11 and below
$3
$ cjsx -hUsage: cjsx [options] path/to/script.cjsx -- [args]
If called without options,
will run your script. -b, --bare compile without a top-level function wrapper
-c, --compile compile to JavaScript and save as .js files
-e, --eval pass a string from the command line as input
-h, --help display this help message
-j, --join concatenate the source CoffeeScript before compiling
-m, --map generate source map and save as .map files
-n, --nodes print out the parse tree that the parser produces
--nodejs pass options directly to the "node" binary
--no-header suppress the "Generated by" header
-o, --output set the output directory for compiled JavaScript
-p, --print print out the compiled JavaScript
-s, --stdio listen for and compile scripts over stdio
-l, --literate treat stdio as literate style coffee-script
-t, --tokens print out the tokens that the lexer/rewriter produce
-v, --version display the version number
-w, --watch watch scripts for changes and rerun commands
`Output compiled JS to a file of the same name:
bash
$ cjsx -c my-component.cjsx
`#### Require .cjsx files under node
As with the
module, you need to register .cjsx with the module loader:
`coffee
require('coffee-react/register')Component = require('./component.cjsx')
`$3
JSX/CJSX 'spread attributes' allow merging in an object of props when creating an element, eg:
coffee
extraProps = color: 'red', speed: 'fast'
`
which is transformed to:
coffee
extraProps = color: 'red', speed: 'fast'
React.createElement("div", Object.assign({"color": "blue"}, extraProps)
`If you use this syntax in your code, be sure to include a shim for
for browsers/environments which don't yet support it. object.assign, core-js and
es6-shim are some possible choices.$3
React 0.12 introduced changes to the way component descriptors are constructed, where the return value of
React.createClass is not a descriptor factory but simply the component class itself, and descriptors must be created manually using React.createElement or by wrapping the component class with React.createDescriptor.coffee-react-transform (and as a result, coffee-react) now outputs calls to
React.createElement to construct element descriptors from component classes for you, so you won't need to wrap your classes using React.createFactory. However, for this to work you will need to be using at least React 0.11.2, which adds React.createElement.If you want the older style JSX output (which just desugars into function calls) then you need to use the 0.x branch, eg. 0.5.1.
Additionally, as of 1.0.0, all input files will be CJSX transformed, even if they don't have a
.cjsx extension or # @cjsx pragma.$3
- coffee-react-transform, the underlying parser/transformer package.
- node-cjsx: require` CJSX files on the server (also possible with coffee-react/register).