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.

Example

car-component.coffee

# @cjsx React.DOM
Car = React.createClass
  render: ->
    <Vehicle doors={4} locked={isLocked()}  data-colour="red" on>
      <Parts.FrontSeat />
      <Parts.BackSeat />
      <p>Which seat can I take? {@props?.seat or 'none'}</p>
    </Vehicle>

transform

cjsx-transform car-component.coffee

output

Car = React.createClass
  render: ->
    Vehicle({"doors": (4), "locked": (isLocked()), "data-colour": "red", "on": true},
      Parts.FrontSeat(null),
      Parts.BackSeat(null),
      React.DOM.p(null, "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.
react-coffee-quickstart: equivalent to react-quickstart.
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

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

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>console.log(coffeeReactTransform('-> <a />'))</script>

which should output the CoffeeScript: -> React.DOM.a(null)

Tests

cake test or cake watch:test

Note about the .cjsx file extension

The custom file extension recently changed from .csx to .cjsx to avoid conflicting with an existing C# related file extension, so be sure to update your files accordingly (including changing the pragma to @cjsx). You can also just use .coffee as the file extension. Backwards compatibility will be maintained until the next major version.

alanhogan / coffee-react-transform