facebook · nhunzaker · Sep 10, 2018 · Aug 13, 2018 · Aug 11, 2018 · Aug 11, 2018
diff --git a/fixtures/dom/.gitignore b/fixtures/dom/.gitignore
@@ -10,6 +10,7 @@ coverage
 build
 public/react.development.js
 public/react-dom.development.js
+public/react-dom-server.browser.development.js
 
 # misc
 .DS_Store

diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
@@ -6,7 +6,9 @@
     "react-scripts": "^1.0.11"
   },
   "dependencies": {
+    "@babel/standalone": "^7.0.0",
     "classnames": "^2.2.5",
+    "codemirror": "^5.40.0",
     "core-js": "^2.4.1",
     "prop-types": "^15.6.0",
     "query-string": "^4.2.3",
@@ -16,7 +18,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "prestart": "cp ../../build/dist/react.development.js public/ && cp ../../build/dist/react-dom.development.js public/",
+    "prestart": "cp ../../build/dist/react.development.js ../../build/dist/react-dom.development.js ../../build/dist/react-dom-server.browser.development.js public/",
     "build": "react-scripts build && cp build/index.html build/200.html",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

diff --git a/fixtures/dom/public/renderer.html b/fixtures/dom/public/renderer.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Renderer</title>
+    <style>
+      *,
+      *:before,
+      *:after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        font-family: sans-serif;
+        margin: 0;
+        height: 100%;
+      }
+
+      body {
+        padding-top: 32px;
+      }
+
+      #status {
+        font-size: 12px;
+        left: 8px;
+        letter-spacing: 0.05em;
+        line-height: 16px;
+        margin: -8px 0 0;
+        max-width: 50%;
+        overflow: hidden;
+        position: absolute;
+        text-align: left;
+        text-overflow: ellipsis;
+        top: 50%;
+        white-space: nowrap;
+        width: 100%;
+      }
+
+      #output {
+        margin: 16px;
+      }
+
+      .header {
+        background: white;
+        border-bottom: 1px solid #d9d9d9;
+        padding: 4px;
+        top: 0;
+        left: 0;
+        position: fixed;
+        width: 100%;
+        text-align: right;
+      }
+
+      .controls {
+        display: inline-block;
+        margin: 0;
+      }
+
+      .button {
+        background: #eee;
+        border-radius: 2px;
+        border: 1px solid #aaa;
+        font-size: 11px;
+        padding: 4px 6px;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <header class="header">
+      <p id="status">Loading</p>
+
+      <menu class="controls">
+        <button class="button" id="hydrate">Hydrate</button>
+        <button class="button" id="reload">Reload</button>
+      </menu>
+    </header>
+
+    <div id="output"></div>
+
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+    <script src="renderer.js"></script>
+  </body>
+</html>
diff --git a/fixtures/dom/public/renderer.js b/fixtures/dom/public/renderer.js
@@ -0,0 +1,141 @@
+/**
+ * Supports render.html, a piece of the hydration fixture. See /hydration
+ */
+
+'use strict';
+
+(function() {
+  var Fixture = null;
+  var output = document.getElementById('output');
+  var status = document.getElementById('status');
+  var hydrate = document.getElementById('hydrate');
+  var reload = document.getElementById('reload');
+  var renders = 0;
+  var failed = false;
+
+  function getQueryParam(key) {
+    var pattern = new RegExp(key + '=([^&]+)(&|$)');
+    var matches = window.location.search.match(pattern);
+
+    if (matches) {
+      return decodeURIComponent(matches[1]);
+    }
+
+    handleError(new Error('No key found for' + key));
+  }
+
+  function getBooleanQueryParam(key) {
+    return getQueryParam(key) === 'true';
+  }
+
+  function setStatus(label) {
+    status.innerHTML = label;
+  }
+
+  function prerender() {
+    setStatus('Generating markup');
+
+    output.innerHTML = ReactDOMServer.renderToString(
+      React.createElement(Fixture)
+    );
+
+    setStatus('Markup only (No React)');
+  }
+
+  function render() {
+    setStatus('Hydrating');
+
+    if (ReactDOM.hydrate) {
+      ReactDOM.hydrate(React.createElement(Fixture), output);
+    } else {
+      ReactDOM.render(React.createElement(Fixture), output);
+    }
+
+    setStatus(renders > 0 ? 'Re-rendered (' + renders + 'x)' : 'Hydrated');
+    renders += 1;
+    hydrate.innerHTML = 'Re-render';
+  }
+
+  function handleError(error) {
+    console.log(error);
+    failed = true;
+    setStatus('Javascript Error');
+    output.innerHTML = error;
+  }
+
+  function loadScript(src) {
+    return new Promise(function(resolve, reject) {
+      var script = document.createElement('script');
+      script.async = true;
+      script.src = src;
+
+      script.onload = resolve;
+      script.onerror = function(error) {
+        reject(new Error('Unable to load ' + src));
+      };
+
+      document.body.appendChild(script);
+    });
+  }
+
+  function injectFixture(src) {
+    Fixture = new Function(src + '\nreturn Fixture;')();
+
+    if (typeof Fixture === 'undefined') {
+      setStatus('Failed');
+      output.innerHTML = 'Please name your root component "Fixture"';
+    } else {
+      prerender();
+
+      if (getBooleanQueryParam('hydrate')) {
+        render();
+      }
+    }
+  }
+
+  function reloadFixture(code) {
+    renders = 0;
+    ReactDOM.unmountComponentAtNode(output);
+    injectFixture(code);
+  }
+
+  window.onerror = handleError;
+
+  reload.onclick = function() {
+    window.location.reload();
+  };
+
+  hydrate.onclick = render;
+
+  loadScript(getQueryParam('reactPath'))
+    .then(function() {
+      return getBooleanQueryParam('needsReactDOM')
+        ? loadScript(getQueryParam('reactDOMPath'))
+        : null;
+    })
+    .then(function() {
+      return loadScript(getQueryParam('reactDOMServerPath'));
+    })
+    .then(function() {
+      if (failed) {
+        return;
+      }
+
+      window.addEventListener('message', function(event) {
+        var data = JSON.parse(event.data);
+
+        switch (data.type) {
+          case 'code':
+            reloadFixture(data.payload);
+            break;
+          default:
+            throw new Error(
+              'Renderer Error: Unrecognized message "' + data.type + '"'
+            );
+        }
+      });
+
+      window.parent.postMessage(JSON.stringify({type: 'ready'}), '*');
+    })
+    .catch(handleError);
+})();
diff --git a/fixtures/dom/src/components/App.js b/fixtures/dom/src/components/App.js
@@ -8,9 +8,7 @@ function App() {
   return (
     <div>
       <Header />
-      <div className="container">
-        <Fixtures />
-      </div>
+      <Fixtures />
     </div>
   );
 }

diff --git a/fixtures/dom/src/components/FixtureSet.js b/fixtures/dom/src/components/FixtureSet.js
@@ -11,7 +11,7 @@ class FixtureSet extends React.Component {
     const {title, description, children} = this.props;
 
     return (
-      <div>
+      <div className="container">
         <h1>{title}</h1>
         {description && <p>{description}</p>}
 

diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
@@ -48,7 +48,8 @@ class Header extends React.Component {
               <select
                 value={window.location.pathname}
                 onChange={this.handleFixtureChange}>
-                <option value="/">Select a Fixture</option>
+                <option value="/">Home</option>
+                <option value="/hydration">Hydration</option>
                 <option value="/range-inputs">Range Inputs</option>
                 <option value="/text-inputs">Text Inputs</option>
                 <option value="/number-inputs">Number Input</option>

diff --git a/fixtures/dom/src/components/fixtures/home.js b/fixtures/dom/src/components/fixtures/home.js
@@ -2,7 +2,7 @@ const React = window.React;
 
 export default function Home() {
   return (
-    <main>
+    <main className="container">
       <h1>DOM Test Fixtures</h1>
       <p>
         Use this site to test browser quirks and other behavior that can not be

diff --git a/fixtures/dom/src/components/fixtures/hydration/Code.js b/fixtures/dom/src/components/fixtures/hydration/Code.js
@@ -0,0 +1,73 @@
+const React = window.React;
+
+export class CodeEditor extends React.Component {
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  componentDidMount() {
+    // Important: CodeMirror incorrectly lays out the editor
+    // if it executes before CSS has loaded
+    // https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
+    Promise.all([
+      import('codemirror'),
+      import('codemirror/mode/jsx/jsx'),
+      import('codemirror/lib/codemirror.css'),
+      import('./codemirror-paraiso-dark.css'),
+    ]).then(([CodeMirror]) => this.install(CodeMirror));
+  }
+
+  install(CodeMirror) {
+    if (!this.textarea) {
+      return;
+    }
+
+    const {onChange} = this.props;
+
+    this.editor = CodeMirror.fromTextArea(this.textarea, {
+      mode: 'jsx',
+      theme: 'paraiso-dark',
+      lineNumbers: true,
+    });
+
+    this.editor.on('change', function(doc) {
+      onChange(doc.getValue());
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.editor) {
+      this.editor.toTextArea();
+    }
+  }
+
+  render() {
+    return (
+      <textarea
+        ref={ref => (this.textarea = ref)}
+        defaultValue={this.props.code}
+        autoComplete="off"
+        hidden={true}
+      />
+    );
+  }
+}
+
+export class CodeError extends React.Component {
+  render() {
+    const {error, className} = this.props;
+
+    if (!error) {
+      return null;
+    }
+
+    const [summary, ...body] = error.message.split('\n');
+
+    return (
+      <details className={className}>
+        <summary>{summary}</summary>
+        <p>{body.join('\n').trim()}</p>
+      </details>
+    );
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/hydration/code-transformer.js b/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;
+}