Add --harmony option to live JSX compiler page

Author: sophiebits

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;
   }

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')
 );

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();
     }
   },