Jade?

[Charuru]

All my DOM code is written in jade. Any easy way to use jade in react?

[chenglou]

@Charuru Jade parses strings like most other templating engines. React doesn't, since under the hood the HTML-like tags are desugared into function calls. So I don't think these two work together.

[Charuru]

@chenglou Thanks I'm aware that it wouldn't be possible out of the box but what about some kind of preprocessing? Do you think it's feasible or pointless to think about?

[zpao]

If you would like to write a parser that allows you to write Jade in JS and desugars to plain JS, be my guest. I think it will likely prove difficult. One advantage we have with JSX right now is that we've added some simple semantics on top of an existing JS parser (esprima) and use that to convert to vanilla JS. You could probably make that work, though I'm not personally convinced it's worth the effort. Regardless, we won't be adding support for that but feel free to explore it yourself!

[yanivtal]

For the record: React with coffeescript and jade (or haml) like syntax would be heaven. You guys don't know what you're missing.

[yocontra]

Just to be clear: There is no way to turn an HTML string into a React DOM object?

[sophiebits]

@contra Correct, unless you count <div dangerouslySetInnerHTML={{__html: ... }} /> which sidesteps almost all of React.

[petehunt]

Not correct anymore! You can use this to do it: http://facebook.github.io/react/html-jsx.html

However I certainly would not recommend using this at runtime.

[Charuru]

Anyone working on a compiler?

[yocontra]

@Charuru I worked on a project that lets you hook into the jade compiler and modify the way everything works. I had written a plugin previously that compiled it to rivets data bindings so theoretically you could do the same for React https://github.com/wearefractal/jaded

Rivets plugin:

https://github.com/wearefractal/jaded/blob/master/lib/processors.coffee
https://github.com/wearefractal/jaded/blob/master/lib/main.coffee#L21

[kevbook]

I am converting my project to use React. I dont want to change my workflow for front end engineers.
So they write Jade -> JSX -> Reactified (used in front end). I'll code it up if it doesnt exist.

[duncanbeevers]

I sketched out a custom Jade compiler for generating React code. https://github.com/duncanbeevers/jade-react

It turns this

.container-fluid.readme
  .row
    h1= this.storeName
    ul
    each product in this.products
      li
        | Product
        = product.title

Into this

function () {
  function map (obj, fn) {
    if ('number' === typeof obj.length) return obj.map(fn);
    var result = [], key, hasProp = {}.hasOwnProperty;
    for (key in obj) hasProp.call(obj, key) && result.push(fn(key, obj[key]));
    return result;
  }

  return React.DOM.div({
    "className": "container-fluid readme"
  },
    React.DOM.div({
      "className": "row"
    },
      React.DOM.h1(null,
        this.storeName
      ),
      React.DOM.ul(null),
        map(this.products, function (product, $index) {
          return React.DOM.li(null,
            "Product",
            product.title
          );
        }
      )
    )
  );
}

[syranide]

@duncanbeevers + doesn't seem quite right though.

[duncanbeevers]

@syranide Yeah, it was a rough first pass. I'm working on it in the the context of a green-field hobby project so there are number of tooling questions around it that are currently unanswered.

I'm also making a sister tool, duncanbeevers/gulp-jade-react for integrating this into Gulp workflows along with gulp-wrap to capture and expose the expressions as functions.

I'll no longer be commenting on this thread, but work in jade-react will be on-going.

[syrusakbary]

@Charuru I'm working on a Reactive version of Jade, I will write here again once is ready 😺