Improve JSXTransformer

zpao · zpao · commit e105cb56e7e7 · 2013-06-19T17:29:05.000-07:00
The biggest improvement is that we'll now insert each parsed JSX script back into a `<script>` tag with the body set. This allows the browser to execute these scripts normally. Using `Function(functionBody)` or `eval(functionBody)` both execute in window scope, but `var` assignments don't actually get set on window (unlike everywhere else). I also did some cleanup to make the code a little bit more readable. In my minimal test cases this didn't break anything (scripts loaded in the right order). (cherry picked from commit c79a59b)
diff --git a/vendor/browser-transforms.js b/vendor/browser-transforms.js
@@ -24,22 +24,22 @@ var visitors = require('./fbtransform/visitors').transformVisitors;
 var transform = transform.bind(null, visitors.react);
 var docblock = require('./fbtransform/lib/docblock');
 
+var headEl = document.getElementsByTagName('head')[0];
+
 exports.transform = transform;
+
 exports.exec = function(code) {
   return eval(transform(code));
 };
+
 var run = exports.run = function(code) {
-  var moduleName =
-    docblock.parseAsObject(docblock.extract(code)).providesModule;
-  var jsx =
-    docblock.parseAsObject(docblock.extract(code)).jsx;
+  var jsx = docblock.parseAsObject(docblock.extract(code)).jsx;
 
-  window.moduleLoads = (window.moduleLoads || []).concat(moduleName);
-  window.startTime = Date.now();
   var functionBody = jsx ? transform(code).code : code;
-  Function('require', 'module', 'exports', functionBody)(require, module, exports);
-  window.endTime = Date.now();
-  require[moduleName] = module.exports;
+  var scriptEl = document.createElement('script');
+
+  scriptEl.innerHTML = functionBody;
+  headEl.appendChild(scriptEl);
 };
 
 if (typeof window === "undefined" || window === null) {
@@ -48,15 +48,17 @@ if (typeof window === "undefined" || window === null) {
 
 var load = exports.load = function(url, callback) {
   var xhr;
-  xhr = window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
+  xhr = window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP')
+                             : new XMLHttpRequest();
+  // Disable async since we need to execute scripts in the order they are in the
+  // DOM to mirror normal script loading.
   xhr.open('GET', url, false);
   if ('overrideMimeType' in xhr) {
     xhr.overrideMimeType('text/plain');
   }
   xhr.onreadystatechange = function() {
-    var _ref;
     if (xhr.readyState === 4) {
-      if ((_ref = xhr.status) === 0 || _ref === 200) {
+      if (xhr.status === 0 || xhr.status === 200) {
         run(xhr.responseText);
       } else {
         throw new Error("Could not load " + url);
@@ -70,37 +72,19 @@ var load = exports.load = function(url, callback) {
 };
 
 runScripts = function() {
-  var jsxes, execute, index, length, s, scripts;
-  scripts = document.getElementsByTagName('script');
-  jsxes = (function() {
-    var _i, _len, _results;
-    _results = [];
-    for (_i = 0, _len = scripts.length; _i < _len; _i++) {
-      s = scripts[_i];
-      if (s.type === 'text/jsx') {
-        _results.push(s);
-      }
-    }
-    return _results;
-  })();
-  index = 0;
-  length = jsxes.length;
-  (execute = function(j) {
-    var script;
-    script = jsxes[j];
-    if ((script != null ? script.type : void 0) === 'text/jsx') {
-      if (script.src) {
-         return load(script.src, execute);
-      } else {
-        run(script.innerHTML);
-        return execute();
-      }
+  var scripts = document.getElementsByTagName('script');
+  scripts = Array.prototype.slice.call(scripts);
+  var jsxScripts = scripts.filter(function(script) {
+    return script.type === 'text/jsx';
+  });
+
+  jsxScripts.forEach(function(script) {
+    if (script.src) {
+      load(script.src);
+    } else {
+      run(script.innerHTML);
     }
   });
-  for (var i = 0; i < jsxes.length; i++) {
-    execute(i);
-  }
-  return null;
 };
 
 if (window.addEventListener) {
