Update compile-time error overlay to use react-error-overlay components

 * Refactor react-error-overlay components to container and presentational components.

 * Make the compile-time error overlay a part of react-error-overlay package.

 * Use react-error-overlay as dependency in react-dev-utils to show compile-time errors.

Author: tharakawj

packages/react-dev-utils/package.json

@@ -47,6 +47,7 @@
     "inquirer": "3.1.1",
     "is-root": "1.0.0",
     "opn": "5.1.0",
+    "react-error-overlay": "^1.0.9",
     "recursive-readdir": "2.2.1",
     "shell-quote": "1.6.1",
     "sockjs-client": "1.1.4",

packages/react-dev-utils/webpackHotDevClient.js

@@ -22,143 +22,10 @@ var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
 var formatWebpackMessages = require('./formatWebpackMessages');
-var Entities = require('html-entities').AllHtmlEntities;
-var ansiHTML = require('./ansiHTML');
-var entities = new Entities();
-
-function createOverlayIframe(onIframeLoad) {
-  var iframe = document.createElement('iframe');
-  iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
-  iframe.src = 'about:blank';
-  iframe.style.position = 'fixed';
-  iframe.style.left = 0;
-  iframe.style.top = 0;
-  iframe.style.right = 0;
-  iframe.style.bottom = 0;
-  iframe.style.width = '100vw';
-  iframe.style.height = '100vh';
-  iframe.style.border = 'none';
-  iframe.style.zIndex = 2147483647;
-  iframe.onload = onIframeLoad;
-  return iframe;
-}
-
-function addOverlayDivTo(iframe) {
-  // TODO: unify these styles with react-error-overlay
-  iframe.contentDocument.body.style.margin = 0;
-  iframe.contentDocument.body.style.maxWidth = '100vw';
-
-  var outerDiv = iframe.contentDocument.createElement('div');
-  outerDiv.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
-  outerDiv.style.width = '100%';
-  outerDiv.style.height = '100%';
-  outerDiv.style.boxSizing = 'border-box';
-  outerDiv.style.textAlign = 'center';
-  outerDiv.style.backgroundColor = 'rgb(255, 255, 255)';
-
-  var div = iframe.contentDocument.createElement('div');
-  div.style.position = 'relative';
-  div.style.display = 'inline-flex';
-  div.style.flexDirection = 'column';
-  div.style.height = '100%';
-  div.style.width = '1024px';
-  div.style.maxWidth = '100%';
-  div.style.overflowX = 'hidden';
-  div.style.overflowY = 'auto';
-  div.style.padding = '0.5rem';
-  div.style.boxSizing = 'border-box';
-  div.style.textAlign = 'left';
-  div.style.fontFamily = 'Consolas, Menlo, monospace';
-  div.style.fontSize = '11px';
-  div.style.whiteSpace = 'pre-wrap';
-  div.style.wordBreak = 'break-word';
-  div.style.lineHeight = '1.5';
-  div.style.color = 'rgb(41, 50, 56)';
-
-  outerDiv.appendChild(div);
-  iframe.contentDocument.body.appendChild(outerDiv);
-  return div;
-}
-
-function overlayHeaderStyle() {
-  return (
-    'font-size: 2em;' +
-    'font-family: sans-serif;' +
-    'color: rgb(206, 17, 38);' +
-    'white-space: pre-wrap;' +
-    'margin: 0 2rem 0.75rem 0px;' +
-    'flex: 0 0 auto;' +
-    'max-height: 35%;' +
-    'overflow: auto;'
-  );
-}
-
-var overlayIframe = null;
-var overlayDiv = null;
-var lastOnOverlayDivReady = null;
-
-function ensureOverlayDivExists(onOverlayDivReady) {
-  if (overlayDiv) {
-    // Everything is ready, call the callback right away.
-    onOverlayDivReady(overlayDiv);
-    return;
-  }
-
-  // Creating an iframe may be asynchronous so we'll schedule the callback.
-  // In case of multiple calls, last callback wins.
-  lastOnOverlayDivReady = onOverlayDivReady;
-
-  if (overlayIframe) {
-    // We're already creating it.
-    return;
-  }
+var showCompileErrorOverlay = require('react-error-overlay')
+  .showCompileErrorOverlay;
 
-  // Create iframe and, when it is ready, a div inside it.
-  overlayIframe = createOverlayIframe(function onIframeLoad() {
-    overlayDiv = addOverlayDivTo(overlayIframe);
-    // Now we can talk!
-    lastOnOverlayDivReady(overlayDiv);
-  });
-
-  // Zalgo alert: onIframeLoad() will be called either synchronously
-  // or asynchronously depending on the browser.
-  // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
-  document.body.appendChild(overlayIframe);
-}
-
-function showErrorOverlay(message) {
-  ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
-    // TODO: unify this with our runtime overlay
-    overlayDiv.innerHTML =
-      '<div style="' +
-      overlayHeaderStyle() +
-      '">Failed to compile</div>' +
-      '<pre style="' +
-      'display: block; padding: 0.5em; margin-top: 0; ' +
-      'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
-      'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
-      '<code style="font-family: Consolas, Menlo, monospace;">' +
-      ansiHTML(entities.encode(message)) +
-      '</code></pre>' +
-      '<div style="' +
-      'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' +
-      'flex: 0 0 auto">' +
-      'This error occurred during the build time and cannot be dismissed.</div>';
-  });
-}
-
-function destroyErrorOverlay() {
-  if (!overlayDiv) {
-    // It is not there in the first place.
-    return;
-  }
-
-  // Clean up and reset internal state.
-  document.body.removeChild(overlayIframe);
-  overlayDiv = null;
-  overlayIframe = null;
-  lastOnOverlayDivReady = null;
-}
+var destroyOverlay = null;
 
 // Connect to WebpackDevServer via a socket.
 var connection = new SockJS(
@@ -209,7 +76,9 @@ function handleSuccess() {
     tryApplyUpdates(function onHotUpdateSuccess() {
       // Only destroy it when we're sure it's a hot update.
       // Otherwise it would flicker right before the reload.
-      destroyErrorOverlay();
+      if (destroyOverlay) {
+        destroyOverlay();
+      }
     });
   }
 }
@@ -251,7 +120,9 @@ function handleWarnings(warnings) {
       printWarnings();
       // Only destroy it when we're sure it's a hot update.
       // Otherwise it would flicker right before the reload.
-      destroyErrorOverlay();
+      if (destroyOverlay) {
+        destroyOverlay();
+      }
     });
   } else {
     // Print initial warnings immediately.
@@ -273,7 +144,7 @@ function handleErrors(errors) {
   });
 
   // Only show the first error.
-  showErrorOverlay(formatted.errors[0]);
+  destroyOverlay = showCompileErrorOverlay(formatted.errors[0]);
 
   // Also log them to the console.
   if (typeof console !== 'undefined' && typeof console.error === 'function') {

packages/react-error-overlay/.flowconfig

@@ -1,4 +1,5 @@
 [ignore]
+.*/node_modules/eslint-plugin-jsx-a11y/.*
 
 [include]
 src/**/*.js

packages/react-error-overlay/package.json

@@ -34,6 +34,7 @@
     "anser": "1.2.5",
     "babel-code-frame": "6.22.0",
     "babel-runtime": "6.23.0",
+    "html-entities": "^1.2.1",
     "react": "^15.5.4",
     "react-dev-utils": "^3.0.2",
     "react-dom": "^15.5.4",

packages/react-error-overlay/src/compileErrorOverlay.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+/* @flow */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import CompileErrorContainer from './containers/CompileErrorContainer';
+import { mountOverlayIframe } from './utils/dom/mountOverlayIframe';
+
+let container: HTMLDivElement | null = null;
+let iframeReference: HTMLIFrameElement | null = null;
+
+function mount(callback) {
+  iframeReference = mountOverlayIframe(containerDiv => {
+    container = containerDiv;
+    callback();
+  });
+}
+
+function unmount() {
+  if (iframeReference === null) {
+    return;
+  }
+  ReactDOM.unmountComponentAtNode(container);
+  window.document.body.removeChild(iframeReference);
+  iframeReference = null;
+  container = null;
+}
+
+function render(error: string) {
+  ReactDOM.render(<CompileErrorContainer error={error} />, container);
+}
+
+function showCompileErrorOverlay(error: string) {
+  if (container == null) {
+    mount(() => render(error));
+  } else {
+    render(error);
+  }
+  return unmount;
+}
+
+export { showCompileErrorOverlay };

packages/react-error-overlay/src/components/CodeBlock.js

@@ -9,19 +9,7 @@
 
 /* @flow */
 import React from 'react';
-import { applyStyles } from '../utils/dom/css';
-import { absolutifyCaret } from '../utils/dom/absolutifyCaret';
-import type { ScriptLine } from '../utils/stack-frame';
-import {
-  primaryErrorStyle,
-  secondaryErrorStyle,
-  redTransparent,
-  yellowTransparent,
-} from '../styles';
-
-import generateAnsiHtml from 'react-dev-utils/ansiHTML';
-
-import codeFrame from 'babel-code-frame';
+import { redTransparent, yellowTransparent } from '../styles';
 
 const _preStyle = {
   display: 'block',
@@ -48,76 +36,14 @@ const codeStyle = {
 };
 
 type CodeBlockPropsType = {
-  lines: ScriptLine[],
-  lineNum: number,
-  columnNum: number,
-  contextSize: number,
   main: boolean,
+  codeHTML: string,
 };
 
 function CodeBlock(props: CodeBlockPropsType) {
-  const { lines, lineNum, columnNum, contextSize, main } = props;
-  const sourceCode = [];
-  let whiteSpace = Infinity;
-  lines.forEach(function(e) {
-    const { content: text } = e;
-    const m = text.match(/^\s*/);
-    if (text === '') {
-      return;
-    }
-    if (m && m[0]) {
-      whiteSpace = Math.min(whiteSpace, m[0].length);
-    } else {
-      whiteSpace = 0;
-    }
-  });
-  lines.forEach(function(e) {
-    let { content: text } = e;
-    const { lineNumber: line } = e;
-
-    if (isFinite(whiteSpace)) {
-      text = text.substring(whiteSpace);
-    }
-    sourceCode[line - 1] = text;
-  });
-  const ansiHighlight = codeFrame(
-    sourceCode.join('\n'),
-    lineNum,
-    columnNum == null ? 0 : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
-    {
-      forceColor: true,
-      linesAbove: contextSize,
-      linesBelow: contextSize,
-    }
-  );
-  const htmlHighlight = generateAnsiHtml(ansiHighlight);
-  const code = document.createElement('code');
-  code.innerHTML = htmlHighlight;
-  absolutifyCaret(code);
-
-  const ccn = code.childNodes;
-  // eslint-disable-next-line
-  oLoop: for (let index = 0; index < ccn.length; ++index) {
-    const node = ccn[index];
-    const ccn2 = node.childNodes;
-    for (let index2 = 0; index2 < ccn2.length; ++index2) {
-      const lineNode = ccn2[index2];
-      const text = lineNode.innerText;
-      if (text == null) {
-        continue;
-      }
-      if (text.indexOf(' ' + lineNum + ' |') === -1) {
-        continue;
-      }
-      // $FlowFixMe
-      applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle);
-      // eslint-disable-next-line
-      break oLoop;
-    }
-  }
+  const preStyle = props.main ? primaryPreStyle : secondaryPreStyle;
+  const codeBlock = { __html: props.codeHTML };
 
-  const preStyle = main ? primaryPreStyle : secondaryPreStyle;
-  const codeBlock = { __html: code.innerHTML };
   return (
     <pre style={preStyle}>
       <code style={codeStyle} dangerouslySetInnerHTML={codeBlock} />

packages/react-error-overlay/src/components/Collapsible.js

@@ -57,11 +57,9 @@ class Collapsible extends Component {
             collapsed ? collapsibleCollapsedStyle : collapsibleExpandedStyle
           }
         >
-          {
-            (collapsed ? '▶' : '▼') +
-              ` ${count} stack frames were ` +
-              (collapsed ? 'collapsed.' : 'expanded.')
-          }
+          {(collapsed ? '▶' : '▼') +
+            ` ${count} stack frames were ` +
+            (collapsed ? 'collapsed.' : 'expanded.')}
         </button>
         <div style={{ display: collapsed ? 'none' : 'block' }}>
           {this.props.children}