From 65c258a7b7cb3879b232b1f94fd5c457fc7fd4e7 Mon Sep 17 00:00:00 2001 From: remixz Date: Tue, 13 May 2014 22:07:02 -0700 Subject: [PATCH 1/2] 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. --- examples/basic-jsx-harmony/index.html | 51 +++++++++++++++++++++++++++ vendor/browser-transforms.js | 25 ++++++++----- 2 files changed, 67 insertions(+), 9 deletions(-) create mode 100644 examples/basic-jsx-harmony/index.html diff --git a/examples/basic-jsx-harmony/index.html b/examples/basic-jsx-harmony/index.html new file mode 100644 index 000000000000..e07a028bb8a4 --- /dev/null +++ b/examples/basic-jsx-harmony/index.html @@ -0,0 +1,51 @@ + + + + + Basic Example with JSX with Harmony + + + +

Basic Example with JSX with Harmony

+
+

+ To install React, follow the instructions on + GitHub. +

+

+ If you can see this, React is not working right. + If you checked out the source from GitHub make sure to run grunt. +

+
+

Example Details

+

This is written with JSX with Harmony (ES6) syntax and transformed in the browser.

+

+ Learn more about React at + facebook.github.io/react. +

+ + + + + diff --git a/vendor/browser-transforms.js b/vendor/browser-transforms.js index 00401537d169..0a0c1636b28a 100644 --- a/vendor/browser-transforms.js +++ b/vendor/browser-transforms.js @@ -89,12 +89,12 @@ var createSourceCodeErrorMessage = function(code, e) { return message; }; -var transformCode = function(code, source) { +var transformCode = function(code, source, options) { var jsx = docblock.parseAsObject(docblock.extract(code)).jsx; if (jsx) { try { - var transformed = transformReact(code); + var transformed = transformReact(code, options); } catch(e) { e.message += '\n at '; if (source) { @@ -137,13 +137,13 @@ var transformCode = function(code, source) { } }; -var run = exports.run = function(code, source) { +var run = exports.run = function(code, source, options) { var scriptEl = document.createElement('script'); - scriptEl.text = transformCode(code, source); + scriptEl.text = transformCode(code, source, options); headEl.appendChild(scriptEl); }; -var load = exports.load = function(url, callback) { +var load = exports.load = function(url, callback, options) { var xhr; xhr = window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest(); @@ -157,7 +157,7 @@ var load = exports.load = function(url, callback) { xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 0 || xhr.status === 200) { - run(xhr.responseText, url); + run(xhr.responseText, url, options); } else { throw new Error("Could not load " + url); } @@ -175,7 +175,7 @@ runScripts = function() { // Array.prototype.slice cannot be used on NodeList on IE8 var jsxScripts = []; for (var i = 0; i < scripts.length; i++) { - if (scripts.item(i).type === 'text/jsx') { + if (scripts.item(i).type.indexOf('text/jsx') !== -1) { jsxScripts.push(scripts.item(i)); } } @@ -183,10 +183,17 @@ runScripts = function() { 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"); jsxScripts.forEach(function(script) { + var options; + if (script.type.indexOf('harmony') !== -1) { + options = { + harmony: true + }; + } + if (script.src) { - load(script.src); + load(script.src, null, options); } else { - run(script.innerHTML, null); + run(script.innerHTML, null, options); } }); }; From 3f31ec463f26a5786bc7262e8b87f61c53169380 Mon Sep 17 00:00:00 2001 From: remixz Date: Wed, 14 May 2014 15:50:35 -0700 Subject: [PATCH 2/2] Change harmony option to "harmony=true" --- examples/basic-jsx-harmony/index.html | 2 +- vendor/browser-transforms.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/basic-jsx-harmony/index.html b/examples/basic-jsx-harmony/index.html index e07a028bb8a4..a9976430982a 100644 --- a/examples/basic-jsx-harmony/index.html +++ b/examples/basic-jsx-harmony/index.html @@ -25,7 +25,7 @@

Example Details

-