༼ つ ◕_◕ ༽つ stack-frame-overlay

packages/react-scripts/config/webpack.config.dev.js

@@ -55,7 +55,7 @@ module.exports = {
     // We ship a few polyfills by default:
     require.resolve('./polyfills'),
     // Errors should be considered fatal in development
-    require.resolve('react-dev-utils/crashOverlay'),
+    require.resolve('stack-frame-overlay'),
     // Finally, this is your app's code:
     paths.appIndexJs,
     // We include the app code last so that if there is a runtime error during

packages/react-scripts/package.json

@@ -52,6 +52,7 @@
     "postcss-loader": "1.3.3",
     "promise": "7.1.1",
     "react-dev-utils": "^0.5.2",
+    "stack-frame-overlay": "^0.4.0",
     "style-loader": "0.16.1",
     "url-loader": "0.5.8",
     "webpack": "2.4.1",

packages/stack-frame-overlay/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-app"]
+}

packages/stack-frame-overlay/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "react-app"
+}

packages/stack-frame-overlay/.flowconfig

@@ -0,0 +1,8 @@
+[ignore]
+
+[include]
+src/**/*.js
+
+[libs]
+
+[options]

packages/stack-frame-overlay/.gitignore

@@ -0,0 +1,2 @@
+lib/
+coverage/

packages/stack-frame-overlay/.npmignore

@@ -0,0 +1,3 @@
+__tests__
+*.test.js
+*.spec.js

packages/stack-frame-overlay/README.md

@@ -0,0 +1,7 @@
+# `stack-frame-overlay`
+
+An overlay for displaying stack frames.
+
+# API
+
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

packages/stack-frame-overlay/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "stack-frame-overlay",
+  "version": "0.4.0",
+  "description": "An overlay for displaying stack frames.",
+  "main": "lib/index.js",
+  "scripts": {
+    "prepublishOnly": "npm run build:prod && npm test",
+    "start": "cross-env NODE_ENV=development npm run build -- --watch",
+    "test": "flow && jest",
+    "build": "babel src/ -d lib/",
+    "build:prod": "cross-env NODE_ENV=production babel src/ -d lib/"
+  },
+  "repository": "facebookincubator/create-react-app",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/facebookincubator/create-react-app/issues"
+  },
+  "keywords": [
+    "overlay",
+    "syntax",
+    "error",
+    "red",
+    "box",
+    "redbox",
+    "crash",
+    "warning"
+  ],
+  "author": "Joe Haddad <timer150@gmail.com>",
+  "files": [
+    "lib/"
+  ],
+  "dependencies": {
+    "anser": "^1.2.5",
+    "babel-code-frame": "^6.22.0",
+    "babel-runtime": "^6.23.0",
+    "react-dev-utils": "^0.5.2",
+    "settle-promise": "^1.0.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-eslint": "7.x",
+    "babel-preset-react-app": "^2.2.0",
+    "cross-env": "^4.0.0",
+    "eslint": "^3.16.1",
+    "eslint-config-react-app": "^0.6.2",
+    "eslint-plugin-flowtype": "^2.21.0",
+    "eslint-plugin-import": "^2.0.1",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.4.1",
+    "flow-bin": "^0.46.0",
+    "jest": "19.x"
+  },
+  "jest": {
+    "setupFiles": [
+      "./src/__tests__/setupJest.js"
+    ],
+    "collectCoverage": true,
+    "coverageReporters": [
+      "json"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.js?(x)",
+      "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/fixtures/",
+      "setupJest.js"
+    ]
+  }
+}

packages/stack-frame-overlay/src/components/additional.js

@@ -0,0 +1,52 @@
+/* @flow */
+import { applyStyles } from '../utils/dom/css';
+import { groupStyle, groupElemLeft, groupElemRight } from '../styles';
+import { consumeEvent } from '../utils/dom/consumeEvent';
+import { enableTabClick } from '../utils/dom/enableTabClick';
+
+type SwitchCallback = (offset: number) => void;
+function updateAdditional(
+  document: Document,
+  additionalReference: HTMLDivElement,
+  currentError: number,
+  totalErrors: number,
+  switchCallback: SwitchCallback
+) {
+  if (additionalReference.lastChild) {
+    additionalReference.removeChild(additionalReference.lastChild);
+  }
+
+  let text = ' ';
+  if (totalErrors <= 1) {
+    additionalReference.appendChild(document.createTextNode(text));
+    return;
+  }
+  text = `Errors ${currentError} of ${totalErrors}`;
+  const span = document.createElement('span');
+  span.appendChild(document.createTextNode(text));
+  const group = document.createElement('span');
+  applyStyles(group, groupStyle);
+  const left = document.createElement('button');
+  applyStyles(left, groupElemLeft);
+  left.addEventListener('click', function(e: MouseEvent) {
+    consumeEvent(e);
+    switchCallback(-1);
+  });
+  left.appendChild(document.createTextNode('←'));
+  enableTabClick(left);
+  const right = document.createElement('button');
+  applyStyles(right, groupElemRight);
+  right.addEventListener('click', function(e: MouseEvent) {
+    consumeEvent(e);
+    switchCallback(1);
+  });
+  right.appendChild(document.createTextNode('→'));
+  enableTabClick(right);
+  group.appendChild(left);
+  group.appendChild(right);
+  span.appendChild(group);
+  additionalReference.appendChild(span);
+}
+
+export type { SwitchCallback };
+export { updateAdditional };

packages/stack-frame-overlay/src/components/close.js

@@ -0,0 +1,25 @@
+/* @flow */
+import { applyStyles } from '../utils/dom/css';
+import { hintsStyle, hintStyle, closeButtonStyle } from '../styles';
+
+function createHint(document: Document, hint: string) {
+  const span = document.createElement('span');
+  span.appendChild(document.createTextNode(hint));
+  applyStyles(span, hintStyle);
+  return span;
+}
+
+type CloseCallback = () => void;
+function createClose(document: Document, callback: CloseCallback) {
+  const hints = document.createElement('div');
+  applyStyles(hints, hintsStyle);
+
+  const close = createHint(document, '×');
+  close.addEventListener('click', () => callback());
+  applyStyles(close, closeButtonStyle);
+  hints.appendChild(close);
+  return hints;
+}
+
+export type { CloseCallback };
+export { createClose };

packages/stack-frame-overlay/src/components/code.js

@@ -0,0 +1,89 @@
+/* @flow */
+import type { ScriptLine } from '../utils/stack-frame';
+import { applyStyles } from '../utils/dom/css';
+import { absolutifyCaret } from '../utils/dom/absolutifyCaret';
+import {
+  preStyle,
+  codeStyle,
+  primaryErrorStyle,
+  secondaryErrorStyle,
+} from '../styles';
+
+import generateAnsiHtml from 'react-dev-utils/ansiHTML';
+
+import codeFrame from 'babel-code-frame';
+
+function createCode(
+  document: Document,
+  sourceLines: ScriptLine[],
+  lineNum: number,
+  columnNum: number | null,
+  contextSize: number,
+  main: boolean = false
+) {
+  const sourceCode = [];
+  let whiteSpace = Infinity;
+  sourceLines.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;
+    }
+  });
+  sourceLines.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);
+  applyStyles(code, codeStyle);
+
+  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 pre = document.createElement('pre');
+  applyStyles(pre, preStyle);
+  pre.appendChild(code);
+  return pre;
+}
+
+export { createCode };

packages/stack-frame-overlay/src/components/footer.js

@@ -0,0 +1,22 @@
+/* @flow */
+import { applyStyles } from '../utils/dom/css';
+import { footerStyle } from '../styles';
+
+function createFooter(document: Document) {
+  const div = document.createElement('div');
+  applyStyles(div, footerStyle);
+  div.appendChild(
+    document.createTextNode(
+      'This screen is visible only in development. It will not appear when the app crashes in production.'
+    )
+  );
+  div.appendChild(document.createElement('br'));
+  div.appendChild(
+    document.createTextNode(
+      'Open your browser’s developer console to further inspect this error.'
+    )
+  );
+  return div;
+}
+
+export { createFooter };