Coffeescript compiler wrapper adding coffee-react-transform CJSX support
This tool is no longer maintained. If you need to transition your codebase from it, a codemod is available to do so: cjsx-codemod
This project started as a way for me to explore how JSX could fit into Coffeescript syntax, as a quickly hacked together prototype. While I never really promoted it, it quickly took on a life of its own, and before long people were asking for it to support all kinds of different use cases. On top of that I had no experience writing parsers, so the result is something with insurmountable limitations.
As I eventually stopped using Coffeescript I ended up neglecting this project, but as people were using it I didn't want to kill it. I really should have, however, because it meant that people were using a crappy, ill-conceived, unmaintained tool. Now, long overdue, I'm putting it out to pasture.
Original readme follows:
Coffee-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
You can also
require() CJSX components under node for server-side rendering.
NeatComponent = ReactcreateClass: -><div className="neat-component"><h1>A Component is I</h1> if @propsshowTitle<hr /><p key=n>This line has been printed n times</p> for n in 1..5</div>
$ cjsx -cb neat-component.cjsx
// Generated by CoffeeScript 1.9.1var NeatComponent;NeatComponent = React;
npm install -g coffee-react
Output compiled JS to a file of the same name:
$ cjsx -c my-component.cjsx
As with the
coffee-script module, you need to register
.cjsx with the module loader:
require'coffee-react/register'Component = require'./component.cjsx'
JSX/CJSX 'spread attributes' allow merging in an object of props when creating an element, eg:
extraProps = color: 'red'speed: 'fast'<div color="blue" ...extraProps />
which is transformed to:
extraProps = color: 'red'speed: 'fast'ReactcreateElement"div"Objectassign"color": "blue"extraProps
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
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
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.
requireCJSX files on the server (also possible with coffee-react/register).