I’ve been struggling to get the JSX transpiler playing nicely with the traceur compiler, specifically the flags hidden behind --experimental.

The problem is that the since both the JSX transpiler and the traceur compiler are actually parsing the full javascript AST, they would have to mutually agree on the syntax extensions you use: traceur can’t parse the faux-xml syntax JSX adds, and JSX can’t parse the async or await keywords, for example, or generator functions.

This proof-of-concept is a potential solution: instead of using an external JSX transpiler, we’ll parse the faux-xml ourselves, using an ES6 feature called quasi-literals.

Example

define(function(require) {

    var React   = require('react');
    var jsx     = require('lib/jsxquasi');

    var EchoComponent = React.createClass({
        getInitialState: function() {
            return { value: '' };
        },

        handleChange: function() {
            this.setState({ value: this.refs.input.getDOMNode().value });
        },

        render: function() {
            return jsx`
                <div>
                    <input
                        ref='input'
                        onChange='${this.handleChange}'
                        defaultValue='${this.state.value}' />
                    ${this.state.value}
                </div>
            `;
        }
    })

    return function() {
        var comp = jsx`<${EchoComponent} />`;
        React.renderComponent(comp, document.body);
    };
});

A couple of things to notice:

This is valid javascript! Or harmony or es6 or whatever, but importantly, it’s not happening outside the js environment. This also allows us to use our standard tooling: the traceur compiler knows how to turn jsx`<div>Hello</div>`; into the equivalent browser compatible es3, and hence we can use anything the traceur compile accepts!
This is not exactly the same as JSX according to the spec: it includes quotes around the attributes, etc. This is because this parser is based on DOMParser, and hence needs to be valid XML. It would be straighforward though to change it so it matched exactly, or to remove the browser dependency (so it could run on the server, eg.)