JS support

[funkytek]

how do you feel about adding jade-style JS support with dash i.e.

- var foo = "bar";

my goal is to be able to bring in components (custom tags):

- var Component = require('components/myComponent');
div: Component

[duncanbeevers]

I'd love to support all of jade's functionality. I just haven't needed most of it for my projects yet. I have some stuff in the pipeline for supporting jade conditionals that will dovetail with this.

[funkytek]

Ok, can I help or are you interested in a PR? I don't want to duplicate efforts or step on your inbound changes though

[duncanbeevers]

Feel free to dig in wherever you like. I'd love to see what approach you take.

[mikepb]

I've been hacking away at a Jade to React compiler to support JavaScript:
https://github.com/mikepb/jade-react-compiler

It works well enough for what I need it to do. It would be great to merge projects and pool resources :)

The algorithm is a bit involved:

• Use Jade to parse the input to Jade AST.
• Compile the AST to an intermediate JavaScript format.
• Parse the intermediate JavaScript to SpiderMonkey AST using esprima.
• Rectify the SpiderMonkey AST to produce a JavaScript render() function for use with React.
• Use UglifyJS to clean up the AST and produce sensible JavaScript.

Basic functionality is supported, including JavaScript code, but case, mixins, and other things are not working. Most of the Jade tests are included, as appropriate, but not all tests pass because of the missing functionality and edge cases.

There is a special case for require that will hoist the declaration to the top of the generated CommonJS module:

Jade:

- const MyComponent = require('components/my-component')
div
  if MyComponent
    MyComponent This is a custom component.
  else
    | No component!

Generated JavaScript:

var MyComponent = require("components/my-component");

module.exports = function() {
  return React.DOM.div(null, MyComponent ? MyComponent(null, "This is a custom component.") : "No component!");
};

Example using the command line tool:

$ ./bin/jade-react-compiler.js -cP <<EOL
> - const MyComponent = require('components/my-component')
> div
>   if MyComponent
>     MyComponent This is a custom component.
>   else
>     | No component!
> EOL
var MyComponent = require("components/my-component");

module.exports = function() {
  return React.DOM.div(null, MyComponent ? MyComponent(null, "This is a custom component.") : "No component!");
};

[Lendar]

@mikepb, awesome job! I've switched to your compiler.

By the way, there is also https://github.com/ForbesLindesay/react-jade