Coffeescript React JSX Transformer
Provides support for an equivalent of JSX syntax in Coffeescript (called CJSX) so you can write your Facebook React components with the full awesomeness of Coffeescript. Try it out.
Example
car-component.coffee
Car = React.createClass
render: ->
<Vehicle doors={4} locked={isLocked()} data-colour="red" on>
<Parts.FrontSeat />
<Parts.BackSeat />
<p className="seat">Which seat can I take? {@props?.seat or 'none'}</p>
{# also, this is a comment }
</Vehicle>
transform
cjsx-transform car-component.coffee
output
Car = React.createClass
render: ->
React.createElement(Vehicle, {"doors": (4), "locked": (isLocked()), "data-colour": "red", "on": true},
React.createElement(Parts.FrontSeat, null),
React.createElement(Parts.BackSeat, null),
React.createElement("p", {"className": "seat"}, "Which seat can I take? ", (@props?.seat or 'none'))
)
Getting Started
coffee-react-transform
simply handles preprocessing Coffeescript with JSX-style markup into valid Coffeescript. Instead of using it directly, you may want to make use of one of these more high-level tools:
- coffee-react: a drop-in replacement for the
coffee
executable, for compiling CJSX. - node-cjsx:
require
CJSX files on the server (also possible with coffee-react/register). - coffee-reactify: bundle CJSX files via browserify, see also cjsxify.
- cjsx-loader: loader module for Webpack.
- react-coffee-quickstart: equivalent to react-quickstart.
- coffee-react-quickstart: Quickstart for building React single page apps using Coffeescript, Gulp, Webpack, and React-Router
- sprockets preprocessor: use CJSX with Rails/Sprockets
- ruby coffee-react gem for general ruby integration
- vim plugin for syntax highlighting
- sublime text package for syntax highlighting
- mimosa plugin for the mimosa build tool
- karma preprocessor for karma test runner
- broccoli plugin for the broccoli build tool
CLI
cjsx-transform [input file]
Outputs Coffeescript code to stdout. Redirect it to a file or straight to the Coffeescript compiler, eg.
cjsx-transform examples/car.coffee | coffee -cs > car.js
API
transform = require 'coffee-react-transform'
transformed = transform('...some CJSX code...')
Installation
From npm:
npm install -g coffee-react-transform
Version compatibility
- 3.x - React 0.13.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
UMD bundle for the browser
If you want to use coffee-react-transform in the browser or under ExecJS or some other environment that doesn't support CommonJS modules, you can use this build provided by BrowserifyCDN, which will work as an AMD module or just a plain old script tag:
http://wzrd.in/standalone/coffee-react-transform
<script src="http://wzrd.in/standalone/coffee-react-transform"></script>
<script>
coffeeReactTransform('-> <a />');
// returns '-> React.createElement("a", null)'
</script>
Spread attributes
A semi-recent addition to JSX (and CJSX) is 'spread attributes' which allow merging an object of props into a component, eg:
extraProps = color: 'red', speed: 'fast'
<div color="blue" {... extraProps} />
which is transformed to:
extraProps = color: 'red', speed: 'fast'
React.createElement("div", React.__spread({"color": "blue"}, extraProps)
Tests
npm test
or cake test
or cake watch:test
Changelog
3.1.0
- Fix literate CoffeeScript/CJSX with single apostrophes in Markdown (benjie)
3.0.1
- Fixed some bugs relating to self-closing tags with spread attributes
3.0.0
- Added CJSX single line comment syntax:
{# comment goes here}
(ConradIrwin) - All lower case tags now output component names as strings (eg. DOM or custom elements), and custom element names must contain a hyphen (AsaAyers)
2.4.1
- Made spread attribute output not create unnecessary objects
- Output legacy JSX pragma when legacy CJSX pragma used
2.2.0
- Use
React.__spread
instead ofObject.assign
Breaking Changes in 1.0
React 0.12 will introduce 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
. In preparation for this, coffee-react-transform 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.