Convert react-error-overlay to React

packages/react-dev-utils/package.json

@@ -48,6 +48,7 @@
     "inquirer": "3.2.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,141 +22,10 @@ var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
 var formatWebpackMessages = require('./formatWebpackMessages');
-var ansiHTML = require('./ansiHTML');
-
-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(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(
@@ -207,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();
+      }
     });
   }
 }
@@ -249,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.
@@ -271,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,7 +34,10 @@
     "anser": "1.4.1",
     "babel-code-frame": "6.22.0",
     "babel-runtime": "6.23.0",
+    "html-entities": "^1.2.1",
+    "react": "^15.5.4",
     "react-dev-utils": "^3.1.0",
+    "react-dom": "^15.5.4",
     "settle-promise": "1.0.0",
     "source-map": "0.5.6"
   },

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/CloseButton.js

@@ -0,0 +1,38 @@
+/**
+ * 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 { black } from '../styles';
+
+const closeButtonStyle = {
+  color: black,
+  lineHeight: '1rem',
+  fontSize: '1.5rem',
+  padding: '1rem',
+  cursor: 'pointer',
+  position: 'absolute',
+  right: 0,
+  top: 0,
+};
+
+type CloseCallback = () => void;
+function CloseButton({ close }: { close: CloseCallback }) {
+  return (
+    <span
+      title="Click or press Escape to dismiss."
+      onClick={close}
+      style={closeButtonStyle}
+    >
+      ×
+    </span>
+  );
+}
+
+export default CloseButton;

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

@@ -0,0 +1,54 @@
+/**
+ * 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 { redTransparent, yellowTransparent } from '../styles';
+
+const _preStyle = {
+  display: 'block',
+  padding: '0.5em',
+  marginTop: '0.5em',
+  marginBottom: '0.5em',
+  overflowX: 'auto',
+  whiteSpace: 'pre-wrap',
+  borderRadius: '0.25rem',
+};
+
+const primaryPreStyle = {
+  ..._preStyle,
+  backgroundColor: redTransparent,
+};
+
+const secondaryPreStyle = {
+  ..._preStyle,
+  backgroundColor: yellowTransparent,
+};
+
+const codeStyle = {
+  fontFamily: 'Consolas, Menlo, monospace',
+};
+
+type CodeBlockPropsType = {
+  main: boolean,
+  codeHTML: string,
+};
+
+function CodeBlock(props: CodeBlockPropsType) {
+  const preStyle = props.main ? primaryPreStyle : secondaryPreStyle;
+  const codeBlock = { __html: props.codeHTML };
+
+  return (
+    <pre style={preStyle}>
+      <code style={codeStyle} dangerouslySetInnerHTML={codeBlock} />
+    </pre>
+  );
+}
+
+export default CodeBlock;