Replace buble with babel, react-live with codemirror

fixtures/dom/package.json

@@ -6,14 +6,14 @@
     "react-scripts": "^1.0.11"
   },
   "dependencies": {
-    "buble": "^0.19.3",
+    "@babel/standalone": "^7.0.0",
     "classnames": "^2.2.5",
     "core-js": "^2.4.1",
     "prop-types": "^15.6.0",
     "query-string": "^4.2.3",
     "react": "^15.4.1",
+    "react-codemirror": "^1.0.0",
     "react-dom": "^15.4.1",
-    "react-live": "^1.11.0",
     "semver": "^5.5.0"
   },
   "scripts": {

fixtures/dom/public/renderer.html

@@ -79,6 +79,7 @@
 
     <div id="output"></div>
 
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
     <script src="renderer.js"></script>
   </body>
 </html>

fixtures/dom/public/renderer.js

@@ -125,16 +125,20 @@
       }
 
       window.addEventListener('message', function(event) {
-        switch (event.data.type) {
+        var data = JSON.parse(event.data);
+
+        switch (data.type) {
           case 'code':
-            reloadFixture(event.data.payload);
+            reloadFixture(data.payload);
             break;
           default:
-            throw new Error('Unrecognized message: ' + event.data.type);
+            throw new Error(
+              'Renderer Error: Unrecognized message "' + data.type + '"'
+            );
         }
       });
 
-      window.parent.postMessage({type: 'ready'}, '*');
+      window.parent.postMessage(JSON.stringify({type: 'ready'}), '*');
     })
     .catch(handleError);
 })();

fixtures/dom/src/components/fixtures/hydration/Code.js

@@ -1,50 +1,27 @@
-/**
- * react-live does not support React 14. For this version, just return
- * a textarea.
- *
- * TODO: Could we just get rid of react-live? It only adds syntax highlighting
- */
+import 'codemirror/lib/codemirror.css';
+import './codemirror-gruvbox-dark.css';
+import 'codemirror/mode/jsx/jsx';
 
-import semver from 'semver';
-import {LiveProvider, LiveEditor, LiveError} from 'react-live';
+import CodeMirror from 'react-codemirror';
 
 const React = window.React;
-const supportsReactLive = semver(React.version).major > 1; // React 15 or higher
 
-export class CodeProvider extends React.Component {
-  render() {
-    const {code, children} = this.props;
-
-    if (supportsReactLive) {
-      return <LiveProvider code={code} children={children} />;
-    }
-
-    return <div>{children}</div>;
-  }
-}
+const options = {
+  lineNumbers: true,
+  mode: 'jsx',
+  theme: 'gruvbox-dark',
+};
 
 export class CodeEditor extends React.Component {
   render() {
     const {code, onChange} = this.props;
-
-    if (supportsReactLive) {
-      return <LiveEditor onChange={onChange} />;
-    }
-
-    return (
-      <textarea value={code} onChange={event => onChange(event.target.value)} />
-    );
+    return <CodeMirror value={code} options={options} onChange={onChange} />;
   }
 }
 
 export class CodeError extends React.Component {
   render() {
     let {error, className} = this.props;
-
-    if (supportsReactLive) {
-      return <LiveError className={className} />;
-    }
-
     return error ? <div className={className}>{error.message}</div> : null;
   }
 }

fixtures/dom/src/components/fixtures/hydration/code-transformer.js

@@ -0,0 +1,17 @@
+/**
+ * Babel works across all browsers, however it requires many polyfills.
+ */
+
+import 'core-js/es6/weak-map';
+import 'core-js/es6/weak-set';
+import 'core-js/es6/number';
+import 'core-js/es6/string';
+import 'core-js/es6/array';
+
+import {transform} from '@babel/standalone';
+
+const presets = ['es2015', 'stage-3', 'react'];
+
+export function compile(raw) {
+  return transform(raw, {presets}).code;
+}

fixtures/dom/src/components/fixtures/hydration/codemirror-gruvbox-dark.css

@@ -0,0 +1,34 @@
+/*
+
+    Name:       gruvbox-dark
+    Author:     kRkk (https://github.com/krkk)
+
+    Original gruvbox color scheme by Pavel Pertsev (https://github.com/morhetz/gruvbox)
+
+*/
+
+.cm-s-gruvbox-dark.CodeMirror, .cm-s-gruvbox-dark .CodeMirror-gutters { background-color: #282828; color: #bdae93; }
+.cm-s-gruvbox-dark .CodeMirror-gutters {background: #282828; border-right: 0px;}
+.cm-s-gruvbox-dark .CodeMirror-linenumber {color: #7c6f64;}
+.cm-s-gruvbox-dark .CodeMirror-cursor { border-left: 1px solid #ebdbb2; }
+.cm-s-gruvbox-dark div.CodeMirror-selected { background: #928374; }
+.cm-s-gruvbox-dark span.cm-meta { color: #808000; }
+
+.cm-s-gruvbox-dark span.cm-comment { color: #928374; }
+.cm-s-gruvbox-dark span.cm-number, span.cm-atom { color: #d3869b; }
+.cm-s-gruvbox-dark span.cm-keyword { color: #f84934; }
+
+.cm-s-gruvbox-dark span.cm-variable { color: #ebdbb2; }
+.cm-s-gruvbox-dark span.cm-variable-2 { color: #ebdbb2; }
+.cm-s-gruvbox-dark span.cm-variable-3, .cm-s-gruvbox-dark span.cm-type { color: black; }
+.cm-s-gruvbox-dark span.cm-operator { color: #ebdbb2; }
+.cm-s-gruvbox-dark span.cm-def { color: #ebdbb2; }
+.cm-s-gruvbox-dark span.cm-string { color: #b8bb26; }
+.cm-s-gruvbox-dark span.cm-string-2 { color: #8ec07c; }
+.cm-s-gruvbox-dark span.cm-qualifier { color: #555; }
+.cm-s-gruvbox-dark span.cm-attribute { color: #8ec07c; }
+
+.cm-s-gruvbox-dark .CodeMirror-activeline-background { background: #3c3836; }
+.cm-s-gruvbox-dark .CodeMirror-matchingbracket { background: #928374; color:#282828 !important; }
+
+.cm-s-gruvbox-dark span.cm-builtin { color: #fe8019; }

fixtures/dom/src/components/fixtures/hydration/hydration.css

@@ -40,19 +40,13 @@
   width: 100%;
 }
 
-.hydration-code textarea {
-  background: transparent;
-  border: 0;
-  bottom: 0;
-  color: #efefef;
-  font-family: monospace;
-  font-size: 12px;
-  left: 0;
-  line-height: 1.5;
-  padding: 16px;
-  position: absolute;
-  top: 0;
-  width: 100%;
+.hydration-code .ReactCodeMirror {
+  height: 100%;
+  position: relative;
+}
+
+.hydration-code .CodeMirror {
+  height: 100%;
 }
 
 .hydration-frame {

fixtures/dom/src/components/fixtures/hydration/index.js

@@ -1,7 +1,7 @@
 import './hydration.css';
 import {SAMPLE_CODE} from './data';
-import {CodeProvider, CodeEditor, CodeError} from './Code';
-import * as buble from 'buble';
+import {CodeEditor, CodeError} from './Code';
+import {compile} from './code-transformer';
 import {reactPaths} from '../../../react-loader';
 import qs from 'query-string';
 
@@ -24,40 +24,44 @@ class Hydration extends React.Component {
     window.removeEventListener('message', this.handleMessage);
   }
 
+  handleMessage = event => {
+    var data = JSON.parse(event.data);
+
+    switch (data.type) {
+      case 'ready':
+        this.ready = true;
+        this.injectCode();
+        break;
+      default:
+        throw new Error(
+          'Editor Error: Unrecognized message "' + data.type + '"'
+        );
+    }
+  };
+
   injectCode = () => {
     try {
       this.send({
         type: 'code',
-        payload: buble.transform(this.state.code).code,
+        payload: compile(this.state.code),
       });
+
       this.setState({error: null});
     } catch (error) {
       this.setState({error});
     }
   };
 
-  setFrame = frame => {
-    this.frame = frame;
-  };
-
-  handleMessage = event => {
-    switch (event.data.type) {
-      case 'ready':
-        this.ready = true;
-        this.injectCode();
-        break;
-      default:
-        throw new Error('Unrecognized message: ' + event.data.type);
-      // do nothing
-    }
-  };
-
   send = message => {
     if (this.ready) {
-      this.frame.contentWindow.postMessage(message, '*');
+      this.frame.contentWindow.postMessage(JSON.stringify(message), '*');
     }
   };
 
+  setFrame = frame => {
+    this.frame = frame;
+  };
+
   setCode = code => {
     this.setState({code}, this.injectCode);
   };
@@ -73,35 +77,33 @@ class Hydration extends React.Component {
     const src = '/renderer.html?' + qs.stringify({hydrate, ...reactPaths()});
 
     return (
-      <CodeProvider code={code}>
-        <div className="hydration">
-          <section className="hydration-editor">
-            <header className="hydration-options">
-              <label htmlFor="hydrate">
-                <input
-                  id="hydrate"
-                  name="hydrate"
-                  type="checkbox"
-                  checked={hydrate}
-                  onChange={this.setCheckbox}
-                />
-                Hydrate
-              </label>
-            </header>
-
-            <div className="hydration-code">
-              <CodeEditor code={code} onChange={this.setCode} />
-            </div>
-          </section>
-          <iframe
-            ref={this.setFrame}
-            className="hydration-frame"
-            title="Hydration Preview"
-            src={src}
-          />
-          <CodeError error={error} className="hydration-code-error" />
-        </div>
-      </CodeProvider>
+      <div className="hydration">
+        <section className="hydration-editor">
+          <header className="hydration-options">
+            <label htmlFor="hydrate">
+              <input
+                id="hydrate"
+                name="hydrate"
+                type="checkbox"
+                checked={hydrate}
+                onChange={this.setCheckbox}
+              />
+              Hydrate
+            </label>
+          </header>
+
+          <div className="hydration-code">
+            <CodeEditor code={code} onChange={this.setCode} />
+          </div>
+        </section>
+        <iframe
+          ref={this.setFrame}
+          className="hydration-frame"
+          title="Hydration Preview"
+          src={src}
+        />
+        <CodeError error={error} className="hydration-code-error" />
+      </div>
     );
   }
 }

fixtures/dom/src/polyfills.js

@@ -1,3 +1,4 @@
+import 'core-js/es6/symbol';
 import 'core-js/es6/promise';
 import 'core-js/es6/set';
 import 'core-js/es6/map';