coffee-react-transform

by jsdf

DEPRECATED – Provides React JSX support for Coffeescript

436 Stars 59 Forks Last release: Not found MIT License 190 Commits 19 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:

Coffeescript React JSX Transformer

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:

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

Example

car-component.coffee

Car = React.createClass
  render: ->
    
      
      
      

Which seat can I take? {@props?.seat or 'none'}

{# also, this is an inline comment}

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: - 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. - cjsx-loader: loader module for Webpack. - react-coffee-quickstart: equivalent to react-quickstart. - coffee-react-quickstart: Quickstart for building React single page apps using Coffeescript, Gulp, Webpack, and React-Router - 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 - broccoli plugin for the broccoli build tool

CLI

cjsx-transform [input file]

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

bash
cjsx-transform examples/car.coffee | coffee -cs > car.js

API

transform = require 'coffee-react-transform'

transformed = transform('...some CJSX code...')

Installation

From npm:

bash
npm install -g coffee-react-transform

Version compatibility

  • 4.x - React >=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

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.

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


Tests

npm test
or
cake test
or
cake watch:test

Changelog

See CHANGELOG.md.

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.