From ba67bf1b0dc2dd91cd6a57cdbc811d5adc8d1ef0 Mon Sep 17 00:00:00 2001
From: Ben Alpert <spicyjalapeno@gmail.com>
Date: Sat, 28 Jun 2014 17:29:30 -0700
Subject: [PATCH] Add --harmony option to live JSX compiler page

---
 docs/_css/react.scss     |  5 +++++
 docs/_js/jsx-compiler.js | 39 +++++++++++++++++++++++++++++++--------
 docs/_js/live_editor.js  |  5 +++--
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/docs/_css/react.scss b/docs/_css/react.scss
index a315ee9ad9..95798311e8 100644
--- a/docs/_css/react.scss
+++ b/docs/_css/react.scss
@@ -455,6 +455,11 @@ section.black content {
   padding-top: 20px;
   width: 1220px;
 
+  label.compiler-option {
+    display: block;
+    margin-top: 5px;
+  }
+
   #jsxCompiler {
     margin-top: 20px;
   }
diff --git a/docs/_js/jsx-compiler.js b/docs/_js/jsx-compiler.js
index cbc1a3cf4b..99cf318ce7 100644
--- a/docs/_js/jsx-compiler.js
+++ b/docs/_js/jsx-compiler.js
@@ -13,15 +13,38 @@ var HelloMessage = React.createClass({\n\
 React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
 ";
 
-var transformer = function(code) {
-  return JSXTransformer.transform(code).code;
+function transformer(harmony, code) {
+  return JSXTransformer.transform(code, {harmony: harmony}).code;
 }
+
+var CompilerPlayground = React.createClass({
+  getInitialState: function() {
+    return {harmony: false};
+  },
+  handleHarmonyChange: function(e) {
+    this.setState({harmony: e.target.checked});
+  },
+  render: function() {
+    return (
+      <div>
+        <ReactPlayground
+          codeText={HELLO_COMPONENT}
+          renderCode={true}
+          transformer={transformer.bind(null, this.state.harmony)}
+          showCompiledJSTab={false}
+        />
+        <label className="compiler-option">
+          <input
+            type="checkbox"
+            onChange={this.handleHarmonyChange}
+            checked={this.state.harmony} />{' '}
+          Enable ES6 transforms (<code>--harmony</code>)
+        </label>
+      </div>
+    );
+  },
+});
 React.renderComponent(
-  <ReactPlayground
-    codeText={HELLO_COMPONENT}
-    renderCode={true}
-    transformer={transformer}
-    showCompiledJSTab={false}
-  />,
+  <CompilerPlayground />,
   document.getElementById('jsxCompiler')
 );
diff --git a/docs/_js/live_editor.js b/docs/_js/live_editor.js
index 1af8fa2294..477db9c856 100644
--- a/docs/_js/live_editor.js
+++ b/docs/_js/live_editor.js
@@ -173,10 +173,11 @@ var ReactPlayground = React.createClass({
     this.executeCode();
   },
 
-  componentWillUpdate: function(nextProps, nextState) {
+  componentDidUpdate: function(prevProps, prevState) {
     // execute code only when the state's not being updated by switching tab
     // this avoids re-displaying the error, which comes after a certain delay
-    if (this.state.code !== nextState.code) {
+    if (this.props.transformer !== prevProps.transformer ||
+        this.state.code !== prevState.code) {
       this.executeCode();
     }
   },