jsdf / coffee-react-transform

DEPRECATED – Provides React JSX support for Coffeescript

jsdf

github pages

coffee-react-transform's Issues

Allow backticks escaping

Hello, thank you for the good work.
I'm running into an issue with my IDE (webstorm)

This works properly

RouteCore.map ->
    @route '/', (ctx) -> <HomePage />

This does not:

RouteCore.map ->
    @route '/', (ctx) -> `<HomePage />`

Simply put, the first works well, but completely breaks the IDE, the second fails to build, but does not break the IDE:

   router.cjsx:12:20: Unexpected token <

I'm using https://atmospherejs.com/jhartma/cjsx which reportedly uses this package. I wonder if there is any workaround I can use or if it's feasible to allow backtick escaping of any kind.

ReferenceError: HEREGEX is not defined

Using this via cjsxify I get an error about HEREGEX. Looking at the source installed from npm (v0.1.5), I see HEREGEX and REGEX are referenced on line 297 of the JS, but not defined anywhere, as if it’s halfway through adding the regex support.

Implement spread attributes

As specified in facebook/react@e6134c3

extract displayName like JSX-Transformer does

See for how facebook did it: https://github.com/facebook/react/blob/master/vendor/fbtransform/transforms/reactDisplayName.js

The example of the Readme.md should look like:

car-component.coffee

# @cjsx React.DOM
Car = React.createClass
  render: ->
    <Vehicle doors={4} locked={isLocked()}  data-colour="red" on>
      <Parts.FrontSeat />
      <Parts.BackSeat />
      <p className="kickin">Which seat can I take? {@props?.seat or 'none'}</p>
    </Vehicle>

output

Car = React.createClass
  displayName: 'Car'
  render: ->
    Vehicle({"doors": (4), "locked": (isLocked()), "data-colour": "red", "on": true},
      Parts.FrontSeat(null),
      Parts.BackSeat(null),
      React.DOM.p({className: "kickin"}, "Which seat can I take? ", (@props?.seat or 'none'))
    )

Supporting other virtual doms.

Currently it's pretty easy to use something like https://github.com/dekujs/deku using coffee-react since you can do:

# @cjsx deku
Car = React.createClass
  render: ->
    <Vehicle {[e-mail]}>
      <Parts.FrontSeat />
      <Parts.BackSeat />
      <p>Which seat can I take? {@props.seat or 'none'}</p>
    </Vehicle>

Which becomes:

`/** @jsx deku */`
Car = React.createClass
  render: ->
    deku.createElement(Vehicle, React.__spread({},  @props.parts),
      deku.createElement(Parts.FrontSeat, null),
      deku.createElement(Parts.BackSeat, null),
      deku.createElement("p", null, "Which seat can I take? ", (@props.seat or 'none'))
    )

However you will notice "React.__spread" which is obviously not compatible.
Is it possible to have @jsx also modify React.__spread?

please support react 0.12

As 0.12 updated, DOM components don't make use of React.DOM, instead we pass the tag name directly.

becomes React.createElement('div'), please see http://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

Deprecation notice - any good alternatives?

We're using this compiler in our app and leaving coffee-script for the semicolon-braces hell looks like a very unappealing option. Does anyone know any good forks/alternatives? Or maybe there are people who are willing to maintain it?

Ommit closing tags.

Is there an option to ommit closing tags and use indentation for this ?

render ->
  <div>
    <h1>
      Header
    </h1>
  </div>

render ->
  <div>
    <h1>
      Header

Support newer react element factories

Getting this warning:

 Warning: Do not pass React.DOM.label to JSX or createFactory. Use the string "label" instead.

CJSX Coffeelint Rule

This is not a bug, but rather a plea to the community that we build a coffeelint rule to allow for CJSX. I hate the little red underlines in Sublime. :)

By writing this here, I'm by no means saying I expect other people to do my dirty work for me, but if anyone has already started on this and they'd like my assistance, it'd be awesome to know about it. I've done some extensive searching and haven't found anything.

If not, well, then I plan to start on it as soon as I get a free moment. I feel like this transformer has already done much (if not all) of the dirty work, and we just need to repurpose the parser to work with Coffeelint. Even the ability to just not lint the CJSX parts of the coffeescript file, and not worry about actually linting the CJSX areas, would be a great start.

Thanks,
-Adam

'Unexpected token' Error with Coffeescript Object Destructuring

the following snippet, which is valid coffee script, does not compile using the browserify transform

{ Dispatcher } = require 'flux'

Can't interpolate object attribute names

This style of object creation appears to break with coffee-react-transform:
http://goo.gl/KY6t8C

Noted this while using cjsx-loader, who's author delegated this issue here.

Warning: Do not pass React.DOM.a to JSX or createFactory. Use the string "a" instead.

React v0.12.2 spews out a bunch of warnings like this
Warning: Do not pass React.DOM.a to JSX or createFactory. Use the string "a" instead.

React.createElement now expects a tagname as a string rather than React.DOM.

e.g.

React.createElement(React.DOM.a)
# becomes
React.createElement('a')

Add standalone JS transformer to the distribution package

It would be nice if the standalone transformer (https://wzrd.in/standalone/coffee-react-transform) was added to the distribution zip.

Getting unexpected indentation errors while nesting tags and aligning tag attributes

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

And given the fact that all the grunt work of coffee-react is done by coffee-react-transform I presume this belongs here.

Aligning tag attributes like this makes the whole thing easier to read if things get more complicated (extra callbacks, several custom props a.s.o) and it would be great if this could be fixed!

Best regards,
Rico Moorman

Version information:

coffee-react version 3.0.1
coffee-react-transform version 3.0.1
coffee-script version 1.9.1

CJSX -> JSX

Is it possible to compile CJSX to JSX? The reason is when I'm showing React to non-CoffeeScripters, I'd like to make it easier see for them to see which weird code is CS and which weird code is JSX. 😃

Link to gulp/browserify example?

I couldn't find one, so I ported the es6 browserify example: https://github.com/aaronjensen/coffee-react-browserify-gulp

Please feel free to include a link if you want to. Thanks!

Also, thank you much for this project, I'm not sure I'd want to learn react w/o my coffeescript... :)

Add support for <@props.propName />

Since JSX now supports namespaces it would be nice if the @ symbol participated as well. Right now this will not work:

    ...
    render: ->
      <@props.activeRouteHandler />
    ...

Instead I have to do this which works without a problem:

    ...
    render: ->
      <this.props.activeRouteHandler />
    ...

This would be ideal for using with react-router

How to do inline comments?

Stuff like this doesn't work.

<div>
  {
    # A comment
  }
</div>

Unexpected indentation with newline delimited attributes

Try Coffee-React link

If I have JSX that looks like:

<Foo
  className="Foo">

  <Bar
    className="Bar">

    {expr}
  </Bar>
</Foo>

This gets compiled to:

React.createElement(Foo, { \
  "className": "Foo"},

  React.createElement(Bar, { \
    "className": "Bar"},

    (expr)
  )
)

CoffeeScript chokes on this input, claiming unexpected indentation. Strangely, if I remove either of the backslashes (or put the attributes on the same line, which makes the transform produce equivalent code), it works without a problem.

HTML text in regex literals interpreted as DOM

Regex literals are not properly 'escaped' so any html tags inside a regex literal will be transformed as well.

output lines should correspond 1-to-1 with to input lines

Output should preserve code whitespace so line numbers don't change. Will assist source maps to work correctly. JSX transformer includes this behaviour.

Parser uses undefined method `@error`

From parser.coffee:

@error "missing #{ stack.pop() }, starting"

I can't find a reference to this.error anywhere else in the codebase - is this intentional? the blame dates back to may 2014, and I can't find references around there either

Tags nested within other tags' attributes sometimes not transformed

Coffeescript expression attributes can be expanded too greedily sometimes, resulting in tags nested within other tags' attributes not being rewritten properly, eg.

<Component1>
  <Component2 attr2={<Component3 attr3={ 1 + 1 } />} />
</Component1>

@cjsx pragma not used

The @cjsx React.DOM pragma is ignored, and it's assumed that you want all known html tags to be transformed to React.DOM elements.

How to return multiple components on the same level in render()?

I often have this problem:

  render: ->
    <Row>
      <Col xs = 12 >
        <Input
          {...@props}
          ...
        />
      </Col>
    </Row>
    <Row>
      <Col xs = 12 >
        <Input
          {...@props}
          ...
        />
      </Col>
    </Row>

which will only return the last element due to the CoffeeScript nature.

To fix this, I have to wrap everything inside a <div> element but then, this is breaking the Bootstrap Grid and other CSS selectors.

Is there no other way around?

Missing support of "tspan" tag

Namespaced component "b.Foo" is converted to string literal, rather than remaining as a variable dereference.

I'd expect it to behave like the docs: https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced-components

Spread attributes break when used w/ function called with more than 1 arg

Example: http://jsdf.github.io/coffee-react-transform/?code=IyBAY2pzeCBSZWFjdC5ET00KCkNhciA9IFJlYWN0LmNyZWF0ZUNsYXNzCiAgcmVuZGVyOiAtPiAoCiAgCTxkaXYgYT1iIHsuLi5wYW5lUHJvcHMoYSwgYil9PkRhc2hib2FyZDwvZGl2PgoJKQ%3D%3D

Remove the , b and the right side becomes valid coffeescript.

How to use with mup or mupx

is there a meteor package that wraps this functionality to add to the meteor builds automatically?

Have to escape double quotes

I included double-quotes inside an <h2> and things didn't work until I escaped them e.g. <h2>Streaming tweets matching \"{@state.following}\"</h2>

This is the error that browserify spit out:

following = React.DOM.h2(null, "Streaming tweets matching "", (@state.following), """)
                                                                 ^^^^^^^^^^^^^^^^^^^^^^^^
ParseError: unexpected ", (@state.following), "

Is there a “Try Coffee-React” page like on coffeescript.org?

One of the trickiest things about writing CoffeeScript is that sometimes its syntax doesn’t compile into exactly the JS one thought it might. For this reason, the coffeescript.org “Try CoffeeScript” widget is invaluable.

I would want to be able to use the same sort of tool, one that enables paste-and-check, with whatever .cjsx I write. Is there such a page or tool already?

Can I use this with ES6 modules?

I really want to use coffeescript again but I am using the modules beta dev of Meteor.

This means I can import pacakges and such.

But I am not sure if it will work with coffeescript.

Any idea?

JSX with Factories

In recent React.JS versions calling components as a function will be deprecated. See: https://gist.github.com/sebmarkbage/ae327f2eda03bf165261
Please fix transformer with this changes.

Spread operator doesn't evaluate internals

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: ->
  <SomeComponent {...{foo: "bar"}}/>

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.

Not obvious what has changed in v3

How about a Changelog?

Anti-Request: Maintain ICS Support

It turns out coffee-react-transform supports Iced CoffeeScript out of the box. This is rather convenient. I am posting this issue to request that maintaining compatibility with ICS (provided it does not make any drastic syntax changes in the future) down the line.

It doesn't seem like it should get in the way at all. It's just one primitive.

And there's nothing to do to make it a reality! 😄

Cannot use standalone transformer in Java ScriptEngine

This groovy script reproduces the issue

new URL('https://wzrd.in/standalone/coffee-react-transform').withReader {
  def engine = new javax.script.ScriptEngineManager().getEngineByMimeType('text/javascript')
  engine.eval(it)
}

I get

javax.script.ScriptException: TypeError: Cannot set property "coffeeReactTransform" of undefined in <eval> at line number 1
    at jdk.nashorn.api.scripting.NashornScriptEngine.throwAsScriptException(NashornScriptEngine.java:467)
    at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:451)
    at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:403)
    at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:399)
    at jdk.nashorn.api.scripting.NashornScriptEngine.eval(NashornScriptEngine.java:150)
    at test$_run_closure1.doCall(test.groovy:3)
    at test.run(test.groovy:1)
Caused by: <eval>:1 TypeError: Cannot set property "coffeeReactTransform" of undefined
    at jdk.nashorn.internal.runtime.ECMAErrors.error(ECMAErrors.java:57)
    at jdk.nashorn.internal.runtime.ECMAErrors.typeError(ECMAErrors.java:213)
    at jdk.nashorn.internal.runtime.ECMAErrors.typeError(ECMAErrors.java:185)
    at jdk.nashorn.internal.runtime.ECMAErrors.typeError(ECMAErrors.java:172)
    at jdk.nashorn.internal.runtime.Undefined.set(Undefined.java:157)
    at jdk.nashorn.internal.scripts.Script$Recompilation$1$12A$\^eval\_.L:1(<eval>:1)
    at jdk.nashorn.internal.scripts.Script$\^eval\_.:program(<eval>:1)
    at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:640)
    at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:228)
    at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:393)
    at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:446)
    ... 5 more

The CJSX Name

If JSX means JavaScript XML then it seems to me that the name for Coffee React should be CSX for CoffeeScript XML not CJSX that stands for CoffeeScript JavaScript XML.

comments cause SyntaxError: Unexpected end of input: unclosed CJSX_ESC

Without the comment, the following compiles and renders fine:

  x.IndexView = React.createClass
    displayName: "views.user.IndexView"

    render: () ->
      return (
        <div className="user-indexview">
          <h1>Say Hello to React.js</h1>
          <R.Collection collectionClass={App.models.user.Users} fetch={true}>
              {# this is a comment }
              <div className="test">
                <R.CollectionStats/>
              </div>
          </R.Collection>
        </div>
      )

With the comment, I get a "SyntaxError: Unexpected end of input: unclosed CJSX_ESC"

I've also seen this error show up on the outermost component if one of the inner components has an unmatched tag.

Function calls in spread attributes

Try Coffee-React Link

This compiles properly:

<div {[email protected](a,b)} />

This does not (note the offending space between the a, and b):

<div {[email protected](a, b)} />

React v15 removed React.__spread

React v15 removed React.__spread and this change breaks everyone using csx-loader (see KyleAMathews/react-spinkit#28 for an example). It seems it will be added back temporarily but given the deprecation warning, it does not look like a good long-term solution.

spreads break if closing > on new line

This works:

      <Hero
        url="something.jpg"
        slogan="yo"
        {...@props} />

But this doesn't

      <Hero
        url="something.jpg"
        slogan="yo"
        {...@props}
      />

Class won't compile if code is wrapped in curly braces

When I'm writing a custom component, I simply cannot use curly braces/brackets to evaluate an expression.

The following code won't compile/transform:

App = React.createClass
  render: ->
    {@props.children}

CoffeeLint and CJSX itself throw the following error:

[stdin]:6:12: error: unexpected . at line 6 col 5

Missing "unclosed tag" error on child nodes.

<div><b></div>

outputs:

React.createElement("div", null, "\x3Cb\x3E")

rather than throwing an error that <b> is unclosed. The JSX transformer throws an error:

Expected corresponding JSX closing tag for <b>

Handle dynamic component names

e.g. right now this doesn't work <{require './a-component'} />

Can't build

First of all, this is exactly what I was looking for and great job!

We want to use React, but we need to be able to write HTML-like “templates“ that we will pass to render methods. One solution is Lisp-style trees, but my colleagues don't like that at all so it's out of discussion. Other solution is using backticks to embed JavaScript, but we would much rather use CoffeeScript. This look exactly like something we need.

The problem is that I can't build this — cake build returns:

File not found: src/csx-transformer.coffee

I tried to fix it and eventually got some files in lib/ directory, but now how could I run them against .csx file?

Third thing I would love to see is this package on NPM.

tl;dr

1. You are awesome for trying to solve the same problem we have,
2. How can I build this?
3. How can I run this?
4. You should put this on NPM.

Multiple tags in the same line results in 'unexpected identifier' error

This code produces the aforementioned error:

  ...
  render: ->
    <span>foo</span><span>bar</span>

while this works:

  ...
  render: ->
    <span>foo</span>
    <span>bar</span>

Is this expected? Thanks.

New version?

I saw that b414d92 was merged, is it possible to release a new version with this fix and also update coffee-react?

Source Maps

Is coffee-react-transform creating source maps?