coffee-react-transform

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.

Status

This project is seeking maintainers. If you are interested in becoming a maintainer create an issue. Pull requests will be reviewed and merged (time permitting), but this project is not currently under active development.

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 an inline 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

• 4.x - React >=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

Spread attributes

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'
React.createElement("div", Object.assign({"color": "blue"},  extraProps)

If you use this syntax in your code, be sure to include a shim for Object.assign for browsers/environments which don't yet support it. object.assign, core-js and es6-shim are some possible choices.

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>

Tests

npm test or cake test or cake watch:test

Changelog

See CHANGELOG.md.

Changelog

[4.0.0]

• Replace React.__spread with Object.assign (DawidJanczak)
• Allow spaces in spread attributes (rechtar)