The library for web and native user interfaces.
Improve JSXTransformer
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).
Paul O’Shannessy committed
Jun 17, 2013 at 10:52 UTC
c79a59b5998d16b245fd970b7356c217c9c6e937
1 file changed
+25
-41
vendor/browser-transforms.js
+25
-41
@@ -24,22 +24,22 @@ var visitors = require('./fbtransform/visitors').transformVisitors;
24
var transform = transform.bind(null, visitors.react);
25
var docblock = require('./fbtransform/lib/docblock');
26
27
+var headEl = document.getElementsByTagName('head')[0];
28
+
29
exports.transform = transform;
30
+
31
exports.exec = function(code) {
32
return eval(transform(code));
33
};
34
+
35
var run = exports.run = function(code) {
32
- var moduleName =
33
- docblock.parseAsObject(docblock.extract(code)).providesModule;
34
- var jsx =
35
- docblock.parseAsObject(docblock.extract(code)).jsx;
36
+ var jsx = docblock.parseAsObject(docblock.extract(code)).jsx;
37
37
- window.moduleLoads = (window.moduleLoads || []).concat(moduleName);
38
- window.startTime = Date.now();
38
var functionBody = jsx ? transform(code).code : code;
40
- Function('require', 'module', 'exports', functionBody)(require, module, exports);
41
- window.endTime = Date.now();
42
- require[moduleName] = module.exports;
39
+ var scriptEl = document.createElement('script');
40
+
41
+ scriptEl.innerHTML = functionBody;
42
+ headEl.appendChild(scriptEl);
43
};
44
45
if (typeof window === "undefined" || window === null) {
@@ -48,15 +48,17 @@ if (typeof window === "undefined" || window === null) {
48
49
var load = exports.load = function(url, callback) {
50
var xhr;
51
- xhr = window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
51
+ xhr = window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP')
52
+ : new XMLHttpRequest();
53
+ // Disable async since we need to execute scripts in the order they are in the
54
+ // DOM to mirror normal script loading.
55
xhr.open('GET', url, false);
56
if ('overrideMimeType' in xhr) {
57
xhr.overrideMimeType('text/plain');
58
}
59
xhr.onreadystatechange = function() {
57
- var _ref;
60
if (xhr.readyState === 4) {
59
- if ((_ref = xhr.status) === 0 || _ref === 200) {
61
+ if (xhr.status === 0 || xhr.status === 200) {
62
run(xhr.responseText);
63
} else {
64
throw new Error("Could not load " + url);
@@ -70,37 +72,19 @@ var load = exports.load = function(url, callback) {
72
};
73
74
runScripts = function() {
73
- var jsxes, execute, index, length, s, scripts;
74
- scripts = document.getElementsByTagName('script');
75
- jsxes = (function() {
76
- var _i, _len, _results;
77
- _results = [];
78
- for (_i = 0, _len = scripts.length; _i < _len; _i++) {
79
- s = scripts[_i];
80
- if (s.type === 'text/jsx') {
81
- _results.push(s);
82
- }
83
- }
84
- return _results;
85
- })();
86
- index = 0;
87
- length = jsxes.length;
88
- (execute = function(j) {
89
- var script;
90
- script = jsxes[j];
91
- if ((script != null ? script.type : void 0) === 'text/jsx') {
92
- if (script.src) {
93
- return load(script.src, execute);
94
- } else {
95
- run(script.innerHTML);
96
- return execute();
97
- }
75
+ var scripts = document.getElementsByTagName('script');
76
+ scripts = Array.prototype.slice.call(scripts);
77
+ var jsxScripts = scripts.filter(function(script) {
78
+ return script.type === 'text/jsx';
79
+ });
80
+
81
+ jsxScripts.forEach(function(script) {
82
+ if (script.src) {
83
+ load(script.src);
84
+ } else {
85
+ run(script.innerHTML);
86
}
87
});
100
- for (var i = 0; i < jsxes.length; i++) {
101
- execute(i);
102
- }
103
- return null;
88
};
89
90
if (window.addEventListener) {