Add harmony transform support in browser (Fixes GH-1420)
I implemented this by checking for `type="text/jsx;harmony"`, since this has a bit of a cleaner implementation rather than parsing a JSON object out of a data attribute. If in the future there are other options to pass, it would make sense to move to a system like that. Along with adding support, there is also a new example added that's the basic-jsx example with Harmony syntax.
remixz committed
May 13, 2014 at 22:07 UTC
65c258a7b7cb3879b232b1f94fd5c457fc7fd4e7
2 files changed
+67
-9
examples/basic-jsx-harmony/index.html
new
+51
@@ -0,0 +1,51 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5
+ <title>Basic Example with JSX with Harmony</title>
6
+ <link rel="stylesheet" href="../shared/css/base.css" />
7
+ </head>
8
+ <body>
9
+ <h1>Basic Example with JSX with Harmony</h1>
10
+ <div id="container">
11
+ <p>
12
+ To install React, follow the instructions on
13
+ <a href="http://www.github.com/facebook/react/">GitHub</a>.
14
+ </p>
15
+ <p>
16
+ If you can see this, React is not working right.
17
+ If you checked out the source from GitHub make sure to run <code>grunt</code>.
18
+ </p>
19
+ </div>
20
+ <h4>Example Details</h4>
21
+ <p>This is written with JSX with Harmony (ES6) syntax and transformed in the browser.<p>
22
+ <p>
23
+ Learn more about React at
24
+ <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
+ </p>
26
+ <script src="../../build/react.js"></script>
27
+ <script src="../../build/JSXTransformer.js"></script>
28
+ <script type="text/jsx;harmony">
29
+ /**
30
+ * @jsx React.DOM
31
+ */
32
+ var ExampleApplication = React.createClass({
33
+ render() {
34
+ var elapsed = Math.round(this.props.elapsed / 100);
35
+ var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
36
+ var message =
37
+ `React has been successfully running for ${seconds} seconds.`;
38
+
39
+ return <p>{message}</p>;
40
+ }
41
+ });
42
+ var start = new Date().getTime();
43
+ setInterval(() => {
44
+ React.renderComponent(
45
+ <ExampleApplication elapsed={new Date().getTime() - start} />,
46
+ document.getElementById('container')
47
+ );
48
+ }, 50);
49
+ </script>
50
+ </body>
51
+</html>
vendor/browser-transforms.js
+16
-9
@@ -89,12 +89,12 @@ var createSourceCodeErrorMessage = function(code, e) {
89
return message;
90
};
91
92
-var transformCode = function(code, source) {
92
+var transformCode = function(code, source, options) {
93
var jsx = docblock.parseAsObject(docblock.extract(code)).jsx;
94
95
if (jsx) {
96
try {
97
- var transformed = transformReact(code);
97
+ var transformed = transformReact(code, options);
98
} catch(e) {
99
e.message += '\n at ';
100
if (source) {
@@ -137,13 +137,13 @@ var transformCode = function(code, source) {
137
}
138
};
139
140
-var run = exports.run = function(code, source) {
140
+var run = exports.run = function(code, source, options) {
141
var scriptEl = document.createElement('script');
142
- scriptEl.text = transformCode(code, source);
142
+ scriptEl.text = transformCode(code, source, options);
143
headEl.appendChild(scriptEl);
144
};
145
146
-var load = exports.load = function(url, callback) {
146
+var load = exports.load = function(url, callback, options) {
147
var xhr;
148
xhr = window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP')
149
: new XMLHttpRequest();
@@ -157,7 +157,7 @@ var load = exports.load = function(url, callback) {
157
xhr.onreadystatechange = function() {
158
if (xhr.readyState === 4) {
159
if (xhr.status === 0 || xhr.status === 200) {
160
- run(xhr.responseText, url);
160
+ run(xhr.responseText, url, options);
161
} else {
162
throw new Error("Could not load " + url);
163
}
@@ -175,7 +175,7 @@ runScripts = function() {
175
// Array.prototype.slice cannot be used on NodeList on IE8
176
var jsxScripts = [];
177
for (var i = 0; i < scripts.length; i++) {
178
- if (scripts.item(i).type === 'text/jsx') {
178
+ if (scripts.item(i).type.indexOf('text/jsx') !== -1) {
179
jsxScripts.push(scripts.item(i));
180
}
181
}
@@ -183,10 +183,17 @@ runScripts = function() {
183
console.warn("You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx");
184
185
jsxScripts.forEach(function(script) {
186
+ var options;
187
+ if (script.type.indexOf('harmony') !== -1) {
188
+ options = {
189
+ harmony: true
190
+ };
191
+ }
192
+
193
if (script.src) {
187
- load(script.src);
194
+ load(script.src, null, options);
195
} else {
189
- run(script.innerHTML, null);
196
+ run(script.innerHTML, null, options);
197
}
198
});
199
};