Skip to content

KyleAMathews/coffee-react-transform

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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>
    </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:

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

  • 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 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)

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.

Tests

cake test or cake watch:test

About

Provides React JSX support for Coffeescript

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CoffeeScript 78.5%
  • JavaScript 21.5%