Gracefully fallback to textarea in React 14

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

@@ -0,0 +1,50 @@
+/**
+ * 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 semver from 'semver';
+import {LiveProvider, LiveEditor, LiveError} from 'react-live';
+
+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>;
+  }
+}
+
+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)} />
+    );
+  }
+}
+
+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/hydration.css

@@ -36,6 +36,22 @@
   height: calc(100vh - 150px);
   min-height: 350px;
   overflow: auto;
+  position: relative;
+  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%;
 }
 

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

@@ -1,6 +1,6 @@
 import './hydration.css';
 import {SAMPLE_CODE} from './data';
-import {LiveProvider, LiveEditor, LiveError} from 'react-live';
+import {CodeProvider, CodeEditor, CodeError} from './Code';
 import * as buble from 'buble';
 import {reactPaths} from '../../../react-loader';
 import qs from 'query-string';
@@ -9,6 +9,7 @@ const React = window.React;
 
 class Hydration extends React.Component {
   state = {
+    error: null,
     code: SAMPLE_CODE,
     hydrate: true,
   };
@@ -24,10 +25,15 @@ class Hydration extends React.Component {
   }
 
   injectCode = () => {
-    this.send({
-      type: 'code',
-      payload: buble.transform(this.state.code).code,
-    });
+    try {
+      this.send({
+        type: 'code',
+        payload: buble.transform(this.state.code).code,
+      });
+      this.setState({error: null});
+    } catch (error) {
+      this.setState({error});
+    }
   };
 
   setFrame = frame => {
@@ -63,11 +69,11 @@ class Hydration extends React.Component {
   };
 
   render() {
-    const {code, hydrate} = this.state;
+    const {code, error, hydrate} = this.state;
     const src = '/renderer.html?' + qs.stringify({hydrate, ...reactPaths()});
 
     return (
-      <LiveProvider code={code}>
+      <CodeProvider code={code}>
         <div className="hydration">
           <section className="hydration-editor">
             <header className="hydration-options">
@@ -84,7 +90,7 @@ class Hydration extends React.Component {
             </header>
 
             <div className="hydration-code">
-              <LiveEditor onChange={this.setCode} />
+              <CodeEditor code={code} onChange={this.setCode} />
             </div>
           </section>
           <iframe
@@ -93,9 +99,9 @@ class Hydration extends React.Component {
             title="Hydration Preview"
             src={src}
           />
-          <LiveError className="hydration-code-error" />
+          <CodeError error={error} className="hydration-code-error" />
         </div>
-      </LiveProvider>
+      </CodeProvider>
     );
   }
 }