dojo JSX Transform

README.md

JSX Loader for Dojo

place the JSXTranformer.js from the react package next to the jsxTransform.js file.

sample

/** @jsx React.DOM */
// filename: Comment.jsx
define([
	'react/react'
], function(
	React
) {
	return React.createClass({
	  render: function() {
		  return (
  		  <div className="commentBox">
  			Hello, world! I am a CommentBox.
  		  </div>
  		);
	  }
	});
});

require([
    'react/react',
    'react/jsxTransform!./Comment.jsx'
], function(
    React,
    Comment
) {
    return React.renderComponent(Comment(),
        document.body
    );
});

jsxTransform.js

define([
    'dojo/_base/xhr',
    './JSXTransformer'
], function (
    xhr,
    jsxTransformer
) {
    var cache = {};

    return {
        load: function(id, require, callback) {
            var url = require.toUrl(id);
            if (url in cache) {
                callback(cache[url]);
            } else {
                xhr.get({
                    url: url,
                    load: function(text) {
                        var transformed = jsxTransformer.transform(text);

                        var define = function(moduleName, requiredModules, defineFn) {
                            if (typeof moduleName !== 'string') {
                                defineFn = requiredModules;
                                requiredModules = moduleName;
                            }
                            if (typeof requiredModules === 'function') {
                                defineFn = requiredModules;
                                requiredModules = [];
                            }

                            require(requiredModules, function() {
                                cache[url] = defineFn.apply(null, arguments);
                                callback(cache[url]);
                            });
                        };
                        
                        eval(transformed.code);
                    }
                });
            }
        }
    };
});