cib

cjsx-in-browser

Compiles embedded coffee-react (cjsx) files in the browser.

Showing:

Popularity

Downloads/wk

1

GitHub Stars

17

Maintenance

Last Commit

7yrs ago

Contributors

0

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

CJSX In Browser

Try it out on CodePen

Let's say you just want to try out CoffeeScript. You can send some coffeescript files to the browser, include coffee-script.js and they magically compile and run.

What if you just want to try CJSX? Now you can:

<script type="text/cjsx">
MyApp = React.createClass
  getInitialState: ->
    woo: 'nah'

  doSomething: ->
    @setState woo: 'yeah'

  render: ->
    <div>
      <h3>Hello, world!</h3>
      <div>Woo {@state.woo}</div>
      <button onClick={@doSomething}>Do something awesome</button>
    </div>

React.renderComponent <MyApp />, document.documentElement
</script>
<script type="text/javascript" src="http://fb.me/react-0.11.1.js"></script>
<script type="text/javascript" src="cjsx-in-browser.js"></script>

Magical Chrome source maps

  • Source maps: When something pops up in your console, just click the line number and you'll see the original line of CJSX you wrote. You won't need to wade through the mess of double compiled code. Magic.

  • All compiler outputs: let's say you're debugging, and you want to see what your CJSX actually got compiled into. In the Chrome inspector 'Resources' tab, hit Cmd-P and you can open all the sources you need:

    • Original source: hit Cmd-P and type cjsx0 (0 gets the first embedded script on your page, 1 gets the next, etc)
    • Coffee-React transformer output: open cjsx0_transformed
    • Fully compiled output: open cjsx0_compiled

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100