coffee-react

Coffee-React

Provides the cjsx executable, a wrapper for the Coffeescript compiler using coffee-react-transform so you can build React components in Coffeescript with JSX-like markup.

Example

neat-component.cjsx

# @cjsx React.DOM 

NeatComponent = React.createClass
  render: ->
    {showTitle, neat} = @props

    <div className="neat-component">
      {<h1>A Component is I</h1> if showTitle}
      Coffeescript really saves a lot of typing...
      {<p>is this component neat?<br />{neat}x{times}</p> for times in [1..10]}
    </div>

compile it

$ cjsx -cb neat-component.cjsx

neat-component.js

// Generated by CoffeeScript 1.7.1
var NeatComponent;

NeatComponent = React.createClass({
  render: function() {
    var neat, showTitle, times, _ref;
    _ref = this.props, showTitle = _ref.showTitle, neat = _ref.neat;
    return React.DOM.div({
      "className": "neat-component"
    }, (showTitle ? React.DOM.h1(null, "A Component is I") : void 0), "Coffeescript really saves a lot of typing...", (function() {
      var _i, _results;
      _results = [];
      for (times = _i = 1; _i <= 10; times = ++_i) {
        _results.push(React.DOM.p(null, "is this component neat?", React.DOM.br(null), neat, "x", times));
      }
      return _results;
    })());
  }
});

Installation

npm install -g coffee-react

Usage

$ cjsx -h 

Usage: cjsx [options] path/to/script.cjsx -- [args]

If called without options, `cjsx` 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:

$ cjsx -c my-component.cjsx

Require .cjsx files under node

As with the coffee-script module, you need to register .cjsx with the module loader:

require('coffee-react').register()

Component = require('./component.cjsx')

If you just want to transform CJSX markup into valid Coffeescript code as part of your existing build process see coffee-react-transform, which is the main parser/transformer package.