Add source map support to browser transformer
Ben Alpert committed
Dec 31, 2013 at 12:00 UTC
7675611e5f8b89e5e304acceaa645879b45111e1
1 file changed
+44
-17
vendor/browser-transforms.js
+44
-17
@@ -20,30 +20,53 @@
20
var runScripts;
21
var headEl;
22
23
+var buffer = require('buffer');
24
var transform = require('jstransform').transform;
25
var visitors = require('./fbtransform/visitors').transformVisitors;
25
-var transform = transform.bind(null, visitors.react);
26
var docblock = require('jstransform/src/docblock');
27
28
+function transformReact(source) {
29
+ return transform(visitors.react, source, {sourceMap: true});
30
+}
31
29
-exports.transform = transform;
32
+exports.transform = transformReact;
33
34
exports.exec = function(code) {
32
- return eval(transform(code).code);
35
+ return eval(transformReact(code).code);
36
};
37
35
-if (typeof window === "undefined" || window === null) {
36
- return;
37
-}
38
-headEl = document.getElementsByTagName('head')[0];
38
+var inlineScriptCount = 0;
39
40
-var run = exports.run = function(code) {
40
+var transformCode = function(code, source) {
41
var jsx = docblock.parseAsObject(docblock.extract(code)).jsx;
42
43
- var functionBody = jsx ? transform(code).code : code;
44
- var scriptEl = document.createElement('script');
43
+ if (jsx) {
44
+ var transformed = transformReact(code);
45
+
46
+ var map = transformed.sourceMap.toJSON();
47
+ if (source == null) {
48
+ source = "Inline JSX script";
49
+ inlineScriptCount++;
50
+ if (inlineScriptCount > 1) {
51
+ source += ' (' + inlineScriptCount + ')';
52
+ }
53
+ }
54
+ map.sources = [source];
55
+ map.sourcesContent = [code];
56
46
- scriptEl.text = functionBody;
57
+ return (
58
+ transformed.code +
59
+ '//# sourceMappingURL=data:application/json;base64,' +
60
+ buffer.Buffer(JSON.stringify(map)).toString('base64')
61
+ );
62
+ } else {
63
+ return code;
64
+ }
65
+};
66
+
67
+var run = exports.run = function(code, source) {
68
+ var scriptEl = document.createElement('script');
69
+ scriptEl.text = transformCode(code, source);
70
headEl.appendChild(scriptEl);
71
};
72
@@ -61,7 +84,7 @@ var load = exports.load = function(url, callback) {
84
xhr.onreadystatechange = function() {
85
if (xhr.readyState === 4) {
86
if (xhr.status === 0 || xhr.status === 200) {
64
- run(xhr.responseText);
87
+ run(xhr.responseText, url);
88
} else {
89
throw new Error("Could not load " + url);
90
}
@@ -90,13 +113,17 @@ runScripts = function() {
113
if (script.src) {
114
load(script.src);
115
} else {
93
- run(script.innerHTML);
116
+ run(script.innerHTML, null);
117
}
118
});
119
};
120
98
-if (window.addEventListener) {
99
- window.addEventListener('DOMContentLoaded', runScripts, false);
100
-} else {
101
- window.attachEvent('onload', runScripts);
121
+if (typeof window !== "undefined" && window !== null) {
122
+ headEl = document.getElementsByTagName('head')[0];
123
+
124
+ if (window.addEventListener) {
125
+ window.addEventListener('DOMContentLoaded', runScripts, false);
126
+ } else {
127
+ window.attachEvent('onload', runScripts);
128
+ }
129
}