Add --harmony option to live JSX compiler page
Ben Alpert committed
Jun 28, 2014 at 17:29 UTC
ba67bf1b0dc2dd91cd6a57cdbc811d5adc8d1ef0
3 files changed
+39
-10
docs/_css/react.scss
+5
@@ -455,6 +455,11 @@ section.black content {
455
padding-top: 20px;
456
width: 1220px;
457
458
+ label.compiler-option {
459
+ display: block;
460
+ margin-top: 5px;
461
+ }
462
+
463
#jsxCompiler {
464
margin-top: 20px;
465
}
docs/_js/jsx-compiler.js
+31
-8
@@ -13,15 +13,38 @@ var HelloMessage = React.createClass({\n\
13
React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
14
";
15
16
-var transformer = function(code) {
17
- return JSXTransformer.transform(code).code;
16
+function transformer(harmony, code) {
17
+ return JSXTransformer.transform(code, {harmony: harmony}).code;
18
}
19
+
20
+var CompilerPlayground = React.createClass({
21
+ getInitialState: function() {
22
+ return {harmony: false};
23
+ },
24
+ handleHarmonyChange: function(e) {
25
+ this.setState({harmony: e.target.checked});
26
+ },
27
+ render: function() {
28
+ return (
29
+ <div>
30
+ <ReactPlayground
31
+ codeText={HELLO_COMPONENT}
32
+ renderCode={true}
33
+ transformer={transformer.bind(null, this.state.harmony)}
34
+ showCompiledJSTab={false}
35
+ />
36
+ <label className="compiler-option">
37
+ <input
38
+ type="checkbox"
39
+ onChange={this.handleHarmonyChange}
40
+ checked={this.state.harmony} />{' '}
41
+ Enable ES6 transforms (<code>--harmony</code>)
42
+ </label>
43
+ </div>
44
+ );
45
+ },
46
+});
47
React.renderComponent(
20
- <ReactPlayground
21
- codeText={HELLO_COMPONENT}
22
- renderCode={true}
23
- transformer={transformer}
24
- showCompiledJSTab={false}
25
- />,
48
+ <CompilerPlayground />,
49
document.getElementById('jsxCompiler')
50
);
docs/_js/live_editor.js
+3
-2
@@ -173,10 +173,11 @@ var ReactPlayground = React.createClass({
173
this.executeCode();
174
},
175
176
- componentWillUpdate: function(nextProps, nextState) {
176
+ componentDidUpdate: function(prevProps, prevState) {
177
// execute code only when the state's not being updated by switching tab
178
// this avoids re-displaying the error, which comes after a certain delay
179
- if (this.state.code !== nextState.code) {
179
+ if (this.props.transformer !== prevProps.transformer ||
180
+ this.state.code !== prevState.code) {
181
this.executeCode();
182
}
183
},