coffee-react

by jsdf

DEPRECATED – Unfancy JavaScript with React JSX markup

419 Stars 27 Forks Last release: Not found MIT License 95 Commits 80 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Coffee-React

CoffeeScript 2 has JSX built in. You should use that instead

STATUS: DEPRECATED

This tool is no longer maintained. If you need to transition your codebase from it, a codemod is available to do so: cjsx-codemod. You can also use CoffeeScript 2, which has JSX built in.

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.

Try it out.

Included is the

cjsx
executable, which is wrapper for
coffee
, using coffee-react-transform and coffee-script to transform CJSX to Javascript. You can also
require()
CJSX components under node for server-side rendering.

Example

neat-component.cjsx

coffee
NeatComponent = React.createClass
  render: ->
    
{

A Component is I

if @props.showTitle}
{

This line has been printed {n} times

for n in [1..5]}

compile it

bash
$ cjsx -cb neat-component.cjsx

neat-component.js ```js // Generated by CoffeeScript 1.9.1 var NeatComponent;

NeatComponent = React.createClass({displayName: "NeatComponent", render: function() { var n; return React.createElement("div", { "className": "neat-component" }, (this.props.showTitle ? React.createElement("h1", null, "A Component is I") : void 0), React.createElement("hr", null), (function() { var i, results; results = []; for (n = i = 1; i <= 5; n = ++i) { results.push(React.createElement("p", { "key": n }, "This line has been printed ", n, " times")); } return results; })()); } }); ```

Installation

npm install -g coffee-react

Version compatibility

  • 5.x - React 0.13.x - 0.15.x
  • 4.x - React 0.13.x - 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

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:

bash
$ 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: ```coffee require('coffee-react/register')

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

### Spread attributes
JSX/CJSX 'spread attributes' allow merging in an object of props when creating an element, eg:
```coffee
extraProps = color: 'red', speed: 'fast'

which is transformed to:

coffee
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.

React.createElement

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
React.createDescriptor
.

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
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.

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.

Related projects

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.