Hey there — Thanks for creating this compiler. I'm blown away with how it just works seamlessly and gives me the best from both CoffeeScript and React.js. One feature is missing though:

The official JSX syntax sets the displayName property automatically. This behavior isn't carried over to coffee-react which makes debugging with the react debug tools harder because you manually have to set this property on every single component.

See this ticket on the official react.js repo for more info: facebook/react#2447

As per CoffeeScript's default behavior of evaluating statements, I was surprised to find that the following statements within a spread operator result in the CJSX error: SyntaxError: Unexpected end of input: unclosed CJSX_EL

render: ->
  foo = "bar"
  <SomeComponent {...{foo}}/>

render: ->
  foo = "bar"
  <SomeComponent {...({foo})}/>

render: ->
  foo = "bar"
  <SomeComponent {...(do -> {foo})}/>

Expected output is for a structured assignment of { foo: foo } and passing that result to the spread method.

Error: Cannot find module 'mkdirp' after installing cjsx on osx and node 0.11.4. Worked fine after installing mkdirp but maybe this should be included in the package.json

foo.cjsx:

require './bar'

bar.litcoffee:

Won't work:

    console.log "Hello world"

Run cjsx foo.cjsx

Error:

TypeError: Cannot read property '0' of null
  at Parser.module.exports.Parser.csString (/PATH/node_modules/coffee-react-transform/lib/parser.js:108:44)
  at Parser.module.exports.Parser.parse (/PATH/node_modules/coffee-react-transform/lib/parser.js:49:141)
  at module.exports.transform (/PATH/node_modules/coffee-react-transform/lib/transformer.js:9:33)
  at Object.CoffeeScript.compile (/PATH/node_modules/coffee-react/lib/coffee-react-script.js:21:13)
  at Object.CoffeeScript._compileFile (/PATH/node_modules/coffee-react/lib/coffee-react-script.js:32:29)
  at Object.loadFile (/PATH/node_modules/coffee-react/lib/register.js:14:25)
  at Module.load (/PATH/node_modules/coffee-react/lib/register.js:44:34)
  at Function.Module._load (module.js:310:12)
  at Module.require (module.js:365:17)
  at require (module.js:384:17)
  at Object.<anonymous> (/PATH/foo.cjsx:1:1)
  at Object.<anonymous> (/PATH/foo.cjsx:1:1)
  at Module._compile (module.js:460:26)

Remove the single quote and it works:

bar.litcoffee:

Will work:

    console.log "Hello world"

This project is deprecated. Try https://github.com/askucher/lsxc
We actively develop it and it uses indented pug syntax instead of ugly <tag></tag>

jashkenas/coffeescript@1.11.0...1.11.1

Given unclosed.cjsx:

1 <div>
2  <div>
3 </div>

Running

$ cjsx unclosed.cjsx

Yields

SyntaxError: Unexpected end of input: unclosed CJSX_EL

With no line numbers.

For comparison, the latest Babel-powered jsx yields:

Unterminated JSX contents (3:6)
  1 | <div>
  2 |   <div>
> 3 | </div>
    |       ^

Probably related to #28

sample.coffee

class Button
  render: =>
    super <paper-button className="rui-button rui-form-control" onClick={@buttonClicked}>{text}</paper-button>

is translated to sample.js

// Generated by CoffeeScript 1.8.0
var Button,
  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

Button = (function() {
  function Button() {
    this.render = __bind(this.render, this);
  }

  Button.prototype.render = function() {
    return Button.__super__.render.call(this, React.createElement(paper - button, {
      "className": "rui-button rui-form-control",
      "onClick": this.buttonClicked
    }, text));
  };

  return Button;

})();

Note that the React.createElement doesn't give the right output.

Can i use comments in html part of cjsx?
Thanks!

Coffee-React look awesome but it has only 92 stars
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

can i use it in my next project?

Running this from the command line I can pass the -m flag and it will produce a source map. e.g. cjsx -cm will produce both the .js file and the source map file.

However; running this in a node (in fact Jest) context I want to do:

const coffeereact = require('coffee-react');
var compiled = coffeereact.compile(src, {bare: true, map: true});

And have complied have both the compiled JS code and the source map. I want to do this so I can write the source map to the file system for later use.

At the moment putting the map: true option in this context seems to have no effect.

I'm not sure if this is possible? Or if not - perhaps this is a feature request?

How difficult would it be to support https://github.com/gradus/coffeecup?

Im use "qwest" library (github.com/pyrsmk/qwest) for load data from server.
Before (not coffee script) I wrote:

qwest.get("/api/getData")
    .then(function(response){
        this.setState({data: response})
    }.bind(this))

And this will work.

In coffeeScript I wrote:

qwest.get("/api/getData")
    .then (response) -> 
          this.setState({data: response})
    .bind(this)

And this dont work

I'm sure problem in .bind(this), because after compile i will get this js:

qwest.get("/api/getData")
     .then(function(response) {
              return this.setState({
                conf: response
              });
          }).bind(this);

.bind() is not in front of a square bracket

Hey James,

We're not on your latest version, so this could be already fixed. Just wanted to give you a heads up of this bug we just worked around today. See screenshots.

I don’t expect a “yes” answer, but just in case… is it all possible to have a React component render its own CJSX source? Something like {this.props._cjsx}?

When using tabs for indentation, code like this

<Text style={styles.welcome}>
    Welcome to React Native!
</Text>

compiles to

React.createElement(Text, {
      "style": styles.welcome
    }, "\t\t\t\tWelcome to React Native!")

which messes up the layout

Hi,

I just ran into unexpected indentation errors while aligning tag attributes vertically within a cjsx file.

React = require "react"

Example = React.createClass
  render: ->
    <div
      foo="bar"
      >
      <div
        bar="foo"
        >
      </div>
    </div>

React.render <Example />, document.getElementById "app"

gives me the following error:

unexpected indentation while parsing file: /path/to/js/app.cjsx

This is while using it through coffee-reactify. Using the cjsx command line tool, however, shows an error too:

/path/to/js/app.cjsx:11:7: error: unexpected indentation
      )
      ^

Trying a by-hand-conversion of the example online with the [https://facebook.github.io/react/jsx-compiler.html](live react compiler):

var React = require("react");

var Example = React.createClass({
  render: function () {
    <div
      foo="bar"
      >
      <div
        bar="foo"
        >
      </div>
    </div>
  }
});

React.render(<Example />, document.getElementById("app"));

does not reveal any errors so I guess it is not an error within jsx but within cjsx..

Version information:

$ ./node_modules/coffee-reactify/node_modules/.bin/cjsx -v
coffee-react version 3.0.1
coffee-react-transform version 3.0.1
coffee-script version 1.9.1

It'd be great to be able to do:

cjsx -c --output build app.cjsx app2.cjsx

with:
.
+-- builds
| + app.js
| + app2.js

as the output. At least personally I have two different root files and would like to be able to compile them both off the same command. Right now I have to use gulp to compile them separately.

My cjsx for React 0.12 breaks and really needs jsdf/coffee-react-transform@8153d77

Could someone with a bit more experience than myself generate a grunt-contrib-coffee-react similar to https://github.com/gruntjs/grunt-contrib-coffee.

The script does not support watch on directories, which is a shame.

Looks like Facebook deprecated JSTransform and react-tools in June. It's being replaced by Babel, which is probably for the better.

https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

Hi there,

I was googling for "react coffeescript" and this is what I got.

So I'm wondering what the difference is between using coffeescript to write React components and classes and using this package?

When using CJSX with React 15, a warning is issued:

Warning: React.__spread is deprecated and should not be used.

I use 'coffee-react' compile my *.cjsx files , and the compiled .js files are ok. But , in the complied .js files, ReactClass does not have the displayName property. Then in chrome dev tools with FaceBook React Developer Tools, I can't see the components name.

It seems like React has something built in for the spread attributes - seems like using that instead of Object.assign and a polyfill would be a little easier.

In order to fix jsdf/coffee-react-transform#66, we should be able to just update the coffee-script dependency. The feature to allow interpolations in object keys was added in this commit: jashkenas/coffeescript@76c076d. If I created a PR, how soon could you merge it in and cut a new release? Are there other blockers to updating CS that I'm overlooking?

The following code:
<div {...f(x, b)}></div>
generates an error at compile time.
It compiles fine using babel, and <div {...f(x)}></div> compiles just fine.

As another (less minimal) example:

<div
  label={t 'audience'}
  {...@bindState('name', @_updateName)}
/>

compiles but then produces

// Generated by CoffeeScript 1.9.3
(function() {
  React.createElement("div", {
    "label": t('audience'),
    "bindState": true,
    "State": true,
    "name": true,
    "me": true,
    "_updateName": true,
    "e": true
  });

}).call(this);

which makes no sense.

style={color: 0xfff} seems pretty natural as js allows 0xfff. I like that notation better than using a string '#fff'. There wouldn't be a time when you'd give color a single pixel value (ie color: 4095px would never happen, so it should be safe)

Actually to use this notation of passing a number as a color, you'd have to enforce always using 6 digits, as you wouldn't know the difference between 0xfff and 0x000fff.

As coffee-script, browsers use /extras/coffee-script.js with tag <script src="text/coffeescript> to write or reference to coffeescript directly in a browser. Can coffee-react do the same currently?

I am willing to 'maintain' it, I'm a student and so I don't have much time, but right now, we need some little fixes.

The coffee-react-jstransform package is not even public at all, by a little 'reverse engineering' on dist/js-syntax-transform.js it seems like it embedded an ESPrima compiler with JSX syntax enabled and some unknown wrapper located at the bottom of the script.

CoffeeScript is not dead. The contributors are doing very hard to keep the pace of CoffeeScript up to date. Hopefully, we can also keep CJSX alive, even it was abandoned, we should have picked up the ashes, such good infrastructure should not be made to waste.