Package Exports

coffee-react-transform
coffee-react-transform/package.json

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (coffee-react-transform) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Coffeescript React Transformer

Provides support for an equivalent of JSX syntax in Coffeescript (called CSX) so you can write your Facebook React components with the full awesomeness of Coffeescript.

Example

car-component.csx

# @csx React.DOM 
Car = React.createClass
  render: ->
    <Vehicle doors=4 stars={getSafetyRating()*5}  data-top-down="yep" checked>
      <FrontSeat />
      <BackSeat />
      <p>Which seat can I take? {@props.seat}</p>
    </Vehicle>

React.renderComponent <Car seat="front, obvs" />,
  document.getElementById 'container'

transform

csx-transform car-component.csx

output

# @csx React.DOM 
Car = React.createClass
  render: ->
    Vehicle({"doors": "4", "stars": (getSafetyRating()*5), "data-top-down": "yep", "checked": true}, FrontSeat(null), BackSeat(null), React.DOM.p(null, """Which seat can I take?""", (@props.seat)))

React.renderComponent Car({"seat": "front, obvs"}),
  document.getElementById 'container'

Installation

npm install -g coffee-react-transform

Usage

csx-transform [input file]

Outputs Coffeescript code to stdout. Redirect it to a file or straight to the Coffeescript compiler, eg.

csx-transform examples/car.csx | coffee -cs > car.js

Tests

cake test or cake watch:test

Known issues/caveats

At this stage regex literals are not properly 'escaped' so any html tags inside a regex literal will be transformed as well. This will be fixed.
The @csx React.DOM pragma is ignored, and it's assumed that you want all known html tags to be transformed to React.DOM elements. This will be fixed to match the behaviour of the JSX transformer.