{"files":[{"path":"docs\/_css\/react.scss","status":"M"},{"path":"docs\/_js\/examples\/timer.js","status":"M"},{"path":"docs\/_js\/live_editor.js","status":"M"},{"path":"docs\/_layouts\/default.html","status":"M"}],"patch":"diff --git a\/docs\/_css\/react.scss b\/docs\/_css\/react.scss\nindex d130086fc9..daa000270a 100644\n--- a\/docs\/_css\/react.scss\n+++ b\/docs\/_css\/react.scss\n@@ -580,6 +580,11 @@ div.CodeMirror-linenumber:after {\n border: none;\n }\n \n+\/* hide the cursor. Mostly used when code's in plain JS *\/\n+.CodeMirror-readonly div.CodeMirror-cursor {\n+ visibility: hidden;\n+}\n+\n small code,\n li code,\n p code {\n@@ -596,23 +601,28 @@ p code {\n @include clearfix;\n }\n \n-.playground::before {\n+.playground-tab {\n border-bottom: none !important;\n border-radius: 3px 3px 0 0;\n- padding: 3px 7px;\n+ padding: 6px 8px;\n font-size: 12px;\n font-weight: bold;\n color: #c2c0bc;\n background-color: #f1ede4;\n- content: 'Live editor';\n+ display: inline-block;\n+ cursor: pointer;\n }\n \n-.playground::before,\n .playgroundCode,\n+.playground-tab,\n .playgroundPreview {\n border: 1px solid rgba(16,16,16,0.1);\n }\n \n+.playground-tab-active {\n+ color: $darkestColor;\n+}\n+\n .playgroundCode {\n border-radius: 0 3px 3px 3px;\n float: left;\ndiff --git a\/docs\/_js\/examples\/timer.js b\/docs\/_js\/examples\/timer.js\nindex 685e57e705..00e60f9591 100644\n--- a\/docs\/_js\/examples\/timer.js\n+++ b\/docs\/_js\/examples\/timer.js\n@@ -3,6 +3,7 @@\n *\/\n \n var TIMER_COMPONENT = \"\\\n+\/** @jsx React.DOM *\/\\n\\\n var Timer = React.createClass({\\n\\\n getInitialState: function() {\\n\\\n return {secondsElapsed: 0};\\n\\\n@@ -17,13 +18,13 @@ var Timer = React.createClass({\\n\\\n clearInterval(this.interval);\\n\\\n },\\n\\\n render: function() {\\n\\\n- return React.DOM.div({},\\n\\\n- 'Seconds Elapsed: ', this.state.secondsElapsed\\n\\\n+ return (\\n\\\n+

Seconds Elapsed: {this.state.secondsElapsed}<\/div>\\n\\\n );\\n\\\n }\\n\\\n });\\n\\\n \\n\\\n-React.renderComponent(Timer({}), mountNode);\\\n+React.renderComponent(, mountNode);\\\n \";\n \n React.renderComponent(\ndiff --git a\/docs\/_js\/live_editor.js b\/docs\/_js\/live_editor.js\nindex e51bfabfb7..5f582b400a 100644\n--- a\/docs\/_js\/live_editor.js\n+++ b\/docs\/_js\/live_editor.js\n@@ -14,10 +14,9 @@ var IS_MOBILE = (\n );\n \n var CodeMirrorEditor = React.createClass({\n- componentDidMount: function(root) {\n- if (IS_MOBILE) {\n- return;\n- }\n+ componentDidMount: function() {\n+ if (IS_MOBILE) return;\n+\n this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {\n mode: 'javascript',\n lineNumbers: false,\n@@ -26,15 +25,21 @@ var CodeMirrorEditor = React.createClass({\n theme: 'solarized-light',\n readOnly: this.props.readOnly\n });\n- this.editor.on('change', this.onChange);\n- this.onChange();\n+ this.editor.on('change', this.handleChange);\n+ },\n+\n+ componentDidUpdate: function() {\n+ if (this.props.readOnly) {\n+ this.editor.setValue(this.props.codeText);\n+ }\n },\n- onChange: function() {\n- if (this.props.onChange) {\n- var content = this.editor.getValue();\n- this.props.onChange(content);\n+\n+ handleChange: function() {\n+ if (!this.props.readOnly) {\n+ this.props.onChange && this.props.onChange(this.editor.getValue());\n }\n },\n+\n render: function() {\n \/\/ wrap in a div to fully contain CodeMirror\n var editor;\n@@ -46,7 +51,7 @@ var CodeMirrorEditor = React.createClass({\n }\n \n return (\n-

\n+

\n {editor}\n <\/div>\n );\n@@ -67,7 +72,7 @@ var selfCleaningTimeout = {\n var ReactPlayground = React.createClass({\n mixins: [selfCleaningTimeout],\n \n- MODES: {XJS: 'XJS', JS: 'JS'}, \/\/keyMirror({XJS: true, JS: true}),\n+ MODES: {JSX: 'JSX', JS: 'JS'}, \/\/keyMirror({JSX: true, JS: true}),\n \n propTypes: {\n codeText: React.PropTypes.string.isRequired,\n@@ -84,15 +89,19 @@ var ReactPlayground = React.createClass({\n },\n \n getInitialState: function() {\n- return {mode: this.MODES.XJS, code: this.props.codeText};\n+ return {\n+ mode: this.MODES.JSX,\n+ code: this.props.codeText,\n+ };\n },\n \n- bindState: function(name) {\n- return function(value) {\n- var newState = {};\n- newState[name] = value;\n- this.setState(newState);\n- }.bind(this);\n+ handleCodeChange: function(value) {\n+ this.setState({code: value});\n+ this.executeCode();\n+ },\n+\n+ handleCodeModeSwitch: function(mode) {\n+ this.setState({mode: mode});\n },\n \n compileCode: function() {\n@@ -100,25 +109,53 @@ var ReactPlayground = React.createClass({\n },\n \n render: function() {\n- var content;\n- if (this.state.mode === this.MODES.XJS) {\n- content =\n- ;\n- } else if (this.state.mode === this.MODES.JS) {\n- content =\n-

\n- {this.compileCode()}\n- <\/div>;\n- }\n+ var isJS = this.state.mode === this.MODES.JS;\n+ var compiledCode = '';\n+ try {\n+ compiledCode = this.compileCode();\n+ } catch (err) {}\n+\n+ \/\/ we're creating both versions, to avoid the flicker when switching from\n+ \/\/ one view to another when CodeMirror recompiles\n+ var jsContent =\n+ ;\n+\n+ var jsxContent =\n+ ;\n+\n+ var JSXTabClassName =\n+ 'playground-tab' + (isJS ? '' : ' playground-tab-active');\n+ var JSTabClassName =\n+ 'playground-tab' + (isJS ? ' playground-tab-active' : '');\n \n return (\n

\n+

\n+ \n+ Live JSX Editor\n+ <\/div>\n+ \n+ Compiled JS\n+ <\/div>\n+ <\/div>\n

\n- {content}\n+ {jsxContent}\n+ {jsContent}\n <\/div>\n

\n@@ -126,12 +163,19 @@ var ReactPlayground = React.createClass({\n <\/div>\n );\n },\n+\n componentDidMount: function() {\n this.executeCode();\n },\n- componentDidUpdate: function() {\n- this.executeCode();\n+\n+ componentWillUpdate: function(nextProps, nextState) {\n+ \/\/ execute code only when the state's not being updated by switching tab\n+ \/\/ this avoids re-displaying the error, which comes after a certain delay\n+ if (this.state.mode === nextState.mode) {\n+ this.executeCode();\n+ };\n },\n+\n executeCode: function() {\n var mountNode = this.refs.mount.getDOMNode();\n \n@@ -149,10 +193,10 @@ var ReactPlayground = React.createClass({\n } else {\n eval(compiledCode);\n }\n- } catch (e) {\n+ } catch (err) {\n this.setTimeout(function() {\n React.renderComponent(\n-

{e.toString()}<\/div>,\n+

{err.toString()}<\/div>,\n mountNode\n );\n }, 500);\ndiff --git a\/docs\/_layouts\/default.html b\/docs\/_layouts\/default.html\nindex 15177f3862..9cc8bef4c8 100644\n--- a\/docs\/_layouts\/default.html\n+++ b\/docs\/_layouts\/default.html\n@@ -16,9 +16,9 @@\n \n \n \n- \n \n \n+ \n \n

dillon1000/react

Files changed