Hydration DOM Fixture (#13521)

* Add home component. Async load fixtures.

This commit adds a homepage to the DOM fixtures that includes browser
testing information and asynchronously loads fixtures.

This should make it easier to find DOM testing information and keep
the payload size in check as we add more components to the fixtures.

* Adds experimental hydration fixture

This commit adds a first pass at a fixture that makes it easier to
debug the process of hydrating static markup. This is not complete:

1. It needs to be verified across multiple browsers
2. It needs to render with the current version of react

Still, it at least demonstrates the idea. A fixture like this will
also be helpful for debugging change events for hydrated inputs, which
presently do not fire if the user changes an input's text before
hydration.

* Tweak select width

* Manually join extra attributes in warning

This prevents a bug where Chrome reports `Array(n)` where `n` is the
size of the array.

* Transform with buble

* Eliminate dependencies

* Pull in react-live for better editing

* Handle encoding errors, pass react version

* Load the correct version of React

* Tweaks

* Revert style change

* Revert warning update

* Properly handle script errors. Fix dom-server CDN loading

* Fix 15.x releases

* Use postMessage to reduce latency, support older browsers

This commit makes a few tweaks to support older browsers and updates
the code transition process to use window.postMessage. This avoids
loading React on every single change.

* Fix fixture renamespacing bug

* Gracefully fallback to textarea in React 14

* Replace buble with babel, react-live with codemirror

* Simplify layout to resolve production code-mirror issues

* Tweak height rules for code-mirror

* Update theme to paraiso

* Format Code.js

* Adjust viewport to fix CodeMirror resize issue in production build

* Eliminate react-code-mirror

* Improve error state. Make full stack collapsable

* Add link to license in codemirror stylesheet

* Make code example more concise

* Replace "Hydrate" with "Auto-hydrate" for clarity

* Remove border below hydration header

* Rename query function in render.js

* Use Function(code) to evaluate hydration fixture

For clarity, and so that the Fixture component does not need to be
assigned to the window, this commit changes the way code is executed
such that it evaluates using a Function constructor.

* Extend hydration fixture to fill width. Design adjustments

This commit extends the hydration fixture such that it takes up the
full screen view. To accomplish this, the container that wraps all
fixtures has been moved to the FixtureSet component, utilized by all
other fixtures.

* Improve error scroll state

* Lazy load CodeMirror together before executing

This commit fixes an issue where CodeMirror wouldn't layout correctly
in production builds because the editor executes before the stylesheet
loaded. CodeMirror needs layout information, and was rendering
off-screen without correct CSS layout measurements.

* Fix indentation on error message

* Do not highlight errors from Babel. Add setPrototypeOf polyfill

This commit fixes an error in Safari 7.1 where Chalk highlighted Babel
errors caused a crash when setPrototypeOf was called within the
library.

This is also an issue on IE9, however this fix does not resolve issues
in that browser.

* Increase resilience to bad errors in Hydration fixture

- Reverts highlighting change. Polyfilling Safari 7.1 is sufficient
- Do not render a details tag in IE9

Author: nhunzaker

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

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"

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>

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);
+})();

fixtures/dom/src/components/App.js

@@ -8,9 +8,7 @@ function App() {
   return (
     <div>
       <Header />
-      <div className="container">
-        <Fixtures />
-      </div>
+      <Fixtures />
     </div>
   );
 }

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>}
 

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>

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

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

@@ -0,0 +1,85 @@
+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}
+      />
+    );
+  }
+}
+
+/**
+ * Prevent IE9 from raising an error on an unrecognized element:
+ * See https://github.com/facebook/react/issues/13610
+ */
+const supportsDetails = !(
+  document.createElement('details') instanceof HTMLUnknownElement
+);
+
+export class CodeError extends React.Component {
+  render() {
+    const {error, className} = this.props;
+
+    if (!error) {
+      return null;
+    }
+
+    if (supportsDetails) {
+      const [summary, ...body] = error.message.split(/\n+/g);
+
+      return (
+        <details className={className}>
+          <summary>{summary}</summary>
+          {body.join('\n')}
+        </details>
+      );
+    }
+
+    return <div className={className}>{error.message}</div>;
+  }
+}

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

@@ -0,0 +1,18 @@
+/**
+ * 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 'core-js/modules/es6.object.set-prototype-of';
+
+import {transform} from '@babel/standalone';
+
+const presets = ['es2015', 'stage-3', 'react'];
+
+export function compile(raw) {
+  return transform(raw, {presets}).code;
+}