From 527f50371f54e02291e68bc27f0af1723540884e Mon Sep 17 00:00:00 2001
From: Admir Sabanovic <admir_sabanovic@live.com>
Date: Thu, 12 Oct 2017 00:50:42 +0200
Subject: [PATCH 1/4] add non-jsx view to to interactive code samples

---
 src/components/CodeEditor/CodeEditor.js | 49 ++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index cfe881355df..652284e5159 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -11,13 +11,20 @@ import ReactDOM from 'react-dom';
 import Remarkable from 'remarkable';
 // TODO: switch back to the upstream version of react-live
 // once https://github.com/FormidableLabs/react-live/issues/37 is fixed.
-import {LiveProvider, LiveEditor} from '@gaearon/react-live';
+import {LiveEditor, LiveProvider} from '@gaearon/react-live';
 import {colors, media} from 'theme';
 import MetaTitle from 'templates/components/MetaTitle';
+import {highlight, languages} from 'prismjs/components/prism-core'
+import 'prismjs/components/prism-javascript'
 
 const compile = code =>
   Babel.transform(code, {presets: ['es2015', 'react']}).code; // eslint-disable-line no-undef
 
+const compileJsxToJS = code =>
+  Babel.transform(code, {presets: ['react']}).code; // eslint-disable-line no-undef
+
+const prism = code => highlight(code, languages.javascript);
+
 class CodeEditor extends Component {
   constructor(props, context) {
     super(props, context);
@@ -38,8 +45,8 @@ class CodeEditor extends Component {
   }
 
   render() {
-    const {children, code} = this.props;
-    const {error} = this.state;
+    const {children} = this.props;
+    const {error, code, showCompiledJsx, compiledJsx} = this.state;
 
     return (
       <LiveProvider code={code} mountStylesheet={false}>
@@ -112,7 +119,17 @@ class CodeEditor extends Component {
                   background: colors.darker,
                   color: colors.white,
                 }}>
-                <MetaTitle onDark={true}>Live JSX Editor</MetaTitle>
+                <MetaTitle onDark={true}>Live JSX Editor
+                  {!showCompiledJsx && (
+                    <a css={{cursor: 'pointer'}} onClick={this._showCompiledJsxPreview.bind(this)}>
+                      View Compiled JSX</a>
+                  )}
+                  {showCompiledJsx && (
+                    <a css={{cursor: 'pointer'}} onClick={this._hideCompiledJsxPreview.bind(this)}>
+                      Back to JSX Editor
+                    </a>
+                  )}
+                </MetaTitle>
               </div>
               <div
                 css={{
@@ -139,7 +156,13 @@ class CodeEditor extends Component {
                   },
                 }}
                 className="gatsby-highlight">
-                <LiveEditor onChange={this._onChange} />
+                {!showCompiledJsx && (
+                  <LiveEditor onChange={this._onChange} />
+                )}
+                {showCompiledJsx && (
+                  <pre className="prism-code" spellCheck="false" dangerouslySetInnerHTML={{__html: prism(compiledJsx)}}>
+                  </pre>
+                )}
               </div>
             </div>
             {error && (
@@ -269,6 +292,8 @@ class CodeEditor extends Component {
     try {
       return {
         compiled: compile(code),
+        compiledJsx: compileJsxToJS(code),
+        code: code,
         error: null,
       };
     } catch (error) {
@@ -284,6 +309,20 @@ class CodeEditor extends Component {
   _onChange = code => {
     this.setState(this._updateState(code));
   };
+
+  _showCompiledJsxPreview = () => {
+    this.setState({
+      ...this.state,
+      showCompiledJsx: true,
+    });
+  };
+
+  _hideCompiledJsxPreview = () => {
+    this.setState({
+      ...this.state,
+      showCompiledJsx: false,
+    });
+  };
 }
 
 export default CodeEditor;

From 6bd11c16364e393c10578363b4c6c45a6e9f8f57 Mon Sep 17 00:00:00 2001
From: Admir Sabanovic <admir_sabanovic@live.com>
Date: Thu, 12 Oct 2017 01:08:01 +0200
Subject: [PATCH 2/4] 99 fix prettier, lint and flow

---
 src/components/CodeEditor/CodeEditor.js | 36 ++++++++++++++++---------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 652284e5159..b7018d7cd08 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -14,14 +14,13 @@ import Remarkable from 'remarkable';
 import {LiveEditor, LiveProvider} from '@gaearon/react-live';
 import {colors, media} from 'theme';
 import MetaTitle from 'templates/components/MetaTitle';
-import {highlight, languages} from 'prismjs/components/prism-core'
-import 'prismjs/components/prism-javascript'
+import {highlight, languages} from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-javascript';
 
 const compile = code =>
   Babel.transform(code, {presets: ['es2015', 'react']}).code; // eslint-disable-line no-undef
 
-const compileJsxToJS = code =>
-  Babel.transform(code, {presets: ['react']}).code; // eslint-disable-line no-undef
+const compileJsxToJS = code => Babel.transform(code, {presets: ['react']}).code; // eslint-disable-line no-undef
 
 const prism = code => highlight(code, languages.javascript);
 
@@ -119,13 +118,23 @@ class CodeEditor extends Component {
                   background: colors.darker,
                   color: colors.white,
                 }}>
-                <MetaTitle onDark={true}>Live JSX Editor
+                <MetaTitle onDark={true}>
+                  Live JSX Editor
                   {!showCompiledJsx && (
-                    <a css={{cursor: 'pointer'}} onClick={this._showCompiledJsxPreview.bind(this)}>
-                      View Compiled JSX</a>
+                    <a
+                      role="button"
+                      tabIndex="0"
+                      css={{cursor: 'pointer'}}
+                      onClick={this._showCompiledJsxPreview.bind(this)}>
+                      View Compiled JSX
+                    </a>
                   )}
                   {showCompiledJsx && (
-                    <a css={{cursor: 'pointer'}} onClick={this._hideCompiledJsxPreview.bind(this)}>
+                    <a
+                      css={{cursor: 'pointer'}}
+                      role="button"
+                      tabIndex="0"
+                      onClick={this._hideCompiledJsxPreview.bind(this)}>
                       Back to JSX Editor
                     </a>
                   )}
@@ -156,12 +165,13 @@ class CodeEditor extends Component {
                   },
                 }}
                 className="gatsby-highlight">
-                {!showCompiledJsx && (
-                  <LiveEditor onChange={this._onChange} />
-                )}
+                {!showCompiledJsx && <LiveEditor onChange={this._onChange} />}
                 {showCompiledJsx && (
-                  <pre className="prism-code" spellCheck="false" dangerouslySetInnerHTML={{__html: prism(compiledJsx)}}>
-                  </pre>
+                  <pre
+                    className="prism-code"
+                    spellCheck="false"
+                    dangerouslySetInnerHTML={{__html: prism(compiledJsx)}}
+                  />
                 )}
               </div>
             </div>

From 9876647f268385d5b0e4f1c6c0bc2b05611c28aa Mon Sep 17 00:00:00 2001
From: Admir Sabanovic <admir_sabanovic@live.com>
Date: Thu, 12 Oct 2017 22:58:39 +0200
Subject: [PATCH 3/4] 99 replace button with checkbox and apply proposed
 changes

---
 src/components/CodeEditor/CodeEditor.js | 91 ++++++++++---------------
 1 file changed, 36 insertions(+), 55 deletions(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index b7018d7cd08..05a8745e0e0 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -14,21 +14,20 @@ import Remarkable from 'remarkable';
 import {LiveEditor, LiveProvider} from '@gaearon/react-live';
 import {colors, media} from 'theme';
 import MetaTitle from 'templates/components/MetaTitle';
-import {highlight, languages} from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-javascript';
 
-const compile = code =>
-  Babel.transform(code, {presets: ['es2015', 'react']}).code; // eslint-disable-line no-undef
+const compileES5 = (
+  code, // eslint-disable-next-line no-undef
+) => Babel.transform(code, {presets: ['es2015', 'react']}).code;
 
-const compileJsxToJS = code => Babel.transform(code, {presets: ['react']}).code; // eslint-disable-line no-undef
-
-const prism = code => highlight(code, languages.javascript);
+// eslint-disable-next-line no-undef
+const compileES6 = code => Babel.transform(code, {presets: ['react']}).code;
 
 class CodeEditor extends Component {
   constructor(props, context) {
     super(props, context);
 
     this.state = this._updateState(props.code);
+    this.state.showJSX = true;
   }
 
   componentDidMount() {
@@ -45,10 +44,10 @@ class CodeEditor extends Component {
 
   render() {
     const {children} = this.props;
-    const {error, code, showCompiledJsx, compiledJsx} = this.state;
+    const {compiledES6, code, error, showJSX} = this.state;
 
     return (
-      <LiveProvider code={code} mountStylesheet={false}>
+      <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
         <div
           css={{
             [media.greaterThan('xlarge')]: {
@@ -120,24 +119,20 @@ class CodeEditor extends Component {
                 }}>
                 <MetaTitle onDark={true}>
                   Live JSX Editor
-                  {!showCompiledJsx && (
-                    <a
-                      role="button"
-                      tabIndex="0"
-                      css={{cursor: 'pointer'}}
-                      onClick={this._showCompiledJsxPreview.bind(this)}>
-                      View Compiled JSX
-                    </a>
-                  )}
-                  {showCompiledJsx && (
-                    <a
-                      css={{cursor: 'pointer'}}
-                      role="button"
-                      tabIndex="0"
-                      onClick={this._hideCompiledJsxPreview.bind(this)}>
-                      Back to JSX Editor
-                    </a>
-                  )}
+                  <label
+                    css={{
+                      fontSize: 14,
+                      float: 'right',
+                      cursor: 'pointer',
+                    }}>
+                    <input
+                      checked={this.state.showJSX}
+                      onChange={event =>
+                        this.setState({showJSX: event.target.checked})}
+                      type="checkbox"
+                    />{' '}
+                    JSX?
+                  </label>
                 </MetaTitle>
               </div>
               <div
@@ -165,14 +160,7 @@ class CodeEditor extends Component {
                   },
                 }}
                 className="gatsby-highlight">
-                {!showCompiledJsx && <LiveEditor onChange={this._onChange} />}
-                {showCompiledJsx && (
-                  <pre
-                    className="prism-code"
-                    spellCheck="false"
-                    dangerouslySetInnerHTML={{__html: prism(compiledJsx)}}
-                  />
-                )}
+                <LiveEditor onChange={this._onChange} />
               </div>
             </div>
             {error && (
@@ -298,14 +286,21 @@ class CodeEditor extends Component {
     this._mountNode = ref;
   };
 
-  _updateState(code) {
+  _updateState(code, showJSX = true) {
     try {
-      return {
-        compiled: compile(code),
-        compiledJsx: compileJsxToJS(code),
-        code: code,
+      let newState = {
+        compiled: compileES5(code),
         error: null,
       };
+
+      if (showJSX) {
+        newState.code = code;
+        newState.compiledES6 = compileES6(code);
+      } else {
+        newState.compiledES6 = code;
+      }
+
+      return newState;
     } catch (error) {
       console.error(error);
 
@@ -317,21 +312,7 @@ class CodeEditor extends Component {
   }
 
   _onChange = code => {
-    this.setState(this._updateState(code));
-  };
-
-  _showCompiledJsxPreview = () => {
-    this.setState({
-      ...this.state,
-      showCompiledJsx: true,
-    });
-  };
-
-  _hideCompiledJsxPreview = () => {
-    this.setState({
-      ...this.state,
-      showCompiledJsx: false,
-    });
+    this.setState(this._updateState(code, this.state.showJSX));
   };
 }
 

From 8a0eda3b6e2835128dd7c2b53b75d05342769124 Mon Sep 17 00:00:00 2001
From: Admir Sabanovic <admir_sabanovic@live.com>
Date: Mon, 16 Oct 2017 21:20:00 +0200
Subject: [PATCH 4/4] use callback for setState

---
 src/components/CodeEditor/CodeEditor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 05a8745e0e0..837458a670c 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -312,7 +312,7 @@ class CodeEditor extends Component {
   }
 
   _onChange = code => {
-    this.setState(this._updateState(code, this.state.showJSX));
+    this.setState(state => this._updateState(code, state.showJSX));
   };
 }