Updated react-error-overlay to latest Flow (0.54.0)

Author: duvet86

packages/react-error-overlay/package.json

@@ -51,7 +51,7 @@
     "eslint-plugin-import": "2.7.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-react": "7.1.0",
-    "flow-bin": "0.52.0",
+    "flow-bin": "^0.54.0",
     "jest": "20.0.4",
     "jest-fetch-mock": "1.2.1"
   },

packages/react-error-overlay/src/__tests__/__snapshots__/unmapper.js.snap

@@ -46,37 +46,44 @@ Array [
     ],
     "_scriptCode": Array [
       ScriptLine {
-        "content": "        },",
+        "content": "        },
+",
         "highlight": false,
         "lineNumber": 41463,
       },
       ScriptLine {
-        "content": "        [1, 2].map(function (v) {",
+        "content": "        [1, 2].map(function (v) {
+",
         "highlight": false,
         "lineNumber": 41464,
       },
       ScriptLine {
-        "content": "          return _react2.default.createElement(",
+        "content": "          return _react2.default.createElement(
+",
         "highlight": false,
         "lineNumber": 41465,
       },
       ScriptLine {
-        "content": "            'div',",
+        "content": "            'div',
+",
         "highlight": true,
         "lineNumber": 41466,
       },
       ScriptLine {
-        "content": "            {",
+        "content": "            {
+",
         "highlight": false,
         "lineNumber": 41467,
       },
       ScriptLine {
-        "content": "              __source: {",
+        "content": "              __source: {
+",
         "highlight": false,
         "lineNumber": 41468,
       },
       ScriptLine {
-        "content": "                fileName: _jsxFileName,",
+        "content": "                fileName: _jsxFileName,
+",
         "highlight": false,
         "lineNumber": 41469,
       },

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

@@ -9,6 +9,7 @@
 
 /* @flow */
 import React, { Component } from 'react';
+import type { Element } from 'react';
 import { black } from '../styles';
 
 const _collapsibleStyle = {
@@ -35,7 +36,15 @@ const collapsibleExpandedStyle = {
   marginBottom: '0.6em',
 };
 
-class Collapsible extends Component {
+type Props = {|
+  children: Element<any>[]
+|};
+
+type State = {|
+  collapsed: boolean
+|};
+
+class Collapsible extends Component<Props, State> {
   state = {
     collapsed: true,
   };

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

@@ -9,6 +9,7 @@
 
 /* @flow */
 import React, { Component } from 'react';
+import type { Node } from 'react';
 import { black } from '../styles';
 
 const overlayStyle = {
@@ -31,10 +32,19 @@ const overlayStyle = {
   color: black,
 };
 
-class ErrorOverlay extends Component {
+type Props = {|
+  children: Node,
+  shortcutHandler?: (eventKey: string) => void 
+|};
+
+type State = {|
+  collapsed: boolean
+|};
+
+class ErrorOverlay extends Component<Props, State> {
   iframeWindow: window = null;
 
-  getIframeWindow = (element: HTMLDivElement) => {
+  getIframeWindow = (element: ?HTMLDivElement) => {
     if (element) {
       const document = element.ownerDocument;
       this.iframeWindow = document.defaultView;

packages/react-error-overlay/src/containers/CompileErrorContainer.js

@@ -15,7 +15,11 @@ import Header from '../components/Header';
 import CodeBlock from '../components/CodeBlock';
 import generateAnsiHTML from '../utils/generateAnsiHTML';
 
-class CompileErrorContainer extends PureComponent {
+type Props = {|
+  error: string
+|};
+
+class CompileErrorContainer extends PureComponent<Props, void> {
   render() {
     const { error } = this.props;
     return (

packages/react-error-overlay/src/containers/RuntimeError.js

@@ -65,4 +65,5 @@ function RuntimeError({ errorRecord, launchEditorEndpoint }: Props) {
   );
 }
 
+export type { ErrorRecord };
 export default RuntimeError;

packages/react-error-overlay/src/containers/RuntimeErrorContainer.js

@@ -14,8 +14,19 @@ import CloseButton from '../components/CloseButton';
 import NavigationBar from '../components/NavigationBar';
 import RuntimeError from './RuntimeError';
 import Footer from '../components/Footer';
+import type { ErrorRecord } from './RuntimeError';
 
-class RuntimeErrorContainer extends PureComponent {
+type Props = {|
+  errorRecords: ErrorRecord[],
+  close: () => void,
+  launchEditorEndpoint: ?string
+|};
+
+type State = {|
+  currentIndex: number
+|};
+
+class RuntimeErrorContainer extends PureComponent<Props, State> {
   state = {
     currentIndex: 0,
   };

packages/react-error-overlay/src/containers/StackFrame.js

@@ -12,6 +12,7 @@ import React, { Component } from 'react';
 import CodeBlock from './StackFrameCodeBlock';
 import { getPrettyURL } from '../utils/getPrettyURL';
 import { darkGray } from '../styles';
+import type { StackFrame as StackFrameType } from '../utils/stack-frame';
 
 const linkStyle = {
   fontSize: '0.9em',
@@ -43,7 +44,19 @@ const toggleStyle = {
   lineHeight: '1.5',
 };
 
-class StackFrame extends Component {
+type Props = {|
+  frame: StackFrameType,
+  launchEditorEndpoint: ?string,
+  contextSize: number,
+  critical: boolean,
+  showCode: boolean
+|};
+
+type State = {|
+  compiled: boolean
+|};
+
+class StackFrame extends Component<Props, State> {
   state = {
     compiled: false,
   };
@@ -74,7 +87,7 @@ class StackFrame extends Component {
   }
 
   openInEditor = () => {
-    if (!this.canOpenInEditor()) {
+    if (!this.props.launchEditorEndpoint) {
       return;
     }
     const {
@@ -90,7 +103,7 @@ class StackFrame extends Component {
     ).then(() => {}, () => {});
   };
 
-  onKeyDown = (e: SyntheticKeyboardEvent) => {
+  onKeyDown = (e: SyntheticKeyboardEvent<>) => {
     if (e.key === 'Enter') {
       this.openInEditor();
     }

packages/react-error-overlay/src/containers/StackFrameCodeBlock.js

@@ -21,12 +21,16 @@ import codeFrame from 'babel-code-frame';
 type StackFrameCodeBlockPropsType = {|
   lines: ScriptLine[],
   lineNum: number,
-  columnNum: number,
+  columnNum: ?number,
   contextSize: number,
   main: boolean,
 |};
 
-function StackFrameCodeBlock(props: StackFrameCodeBlockPropsType) {
+// Exact type workaround for spread operator.
+// See: https://github.com/facebook/flow/issues/2405
+type Exact<T> = $Shape<T>;
+
+function StackFrameCodeBlock(props: Exact<StackFrameCodeBlockPropsType>) {
   const { lines, lineNum, columnNum, contextSize, main } = props;
   const sourceCode = [];
   let whiteSpace = Infinity;

packages/react-error-overlay/src/containers/StackTrace.js

@@ -13,6 +13,7 @@ import StackFrame from './StackFrame';
 import Collapsible from '../components/Collapsible';
 import { isInternalFile } from '../utils/isInternalFile';
 import { isBultinErrorName } from '../utils/isBultinErrorName';
+import type { StackFrame as StackFrameType } from '../utils/stack-frame';
 
 const traceStyle = {
   fontSize: '1em',
@@ -21,7 +22,14 @@ const traceStyle = {
   overflow: 'auto',
 };
 
-class StackTrace extends Component {
+type Props = {|
+  stackFrames: StackFrameType[],
+  errorName: string,
+  contextSize: number,
+  launchEditorEndpoint: ?string,
+|};
+
+class StackTrace extends Component<Props> {
   renderFrames() {
     const {
       stackFrames,

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

@@ -9,6 +9,7 @@
 
 /* @flow */
 import React from 'react';
+import type { Element } from 'react';
 import ReactDOM from 'react-dom';
 import CompileErrorContainer from './containers/CompileErrorContainer';
 import RuntimeErrorContainer from './containers/RuntimeErrorContainer';
@@ -21,13 +22,12 @@ import type { ErrorRecord } from './listenToRuntimeErrors';
 type RuntimeReportingOptions = {|
   onError: () => void,
   launchEditorEndpoint: string,
-  filename?: string,
 |};
 
 let iframe: null | HTMLIFrameElement = null;
 let isLoadingIframe: boolean = false;
 
-let renderedElement: null | React.Element<any> = null;
+let renderedElement: null | Element<any> = null;
 let currentBuildError: null | string = null;
 let currentRuntimeErrorRecords: Array<ErrorRecord> = [];
 let currentRuntimeErrorOptions: null | RuntimeReportingOptions = null;
@@ -56,7 +56,7 @@ export function startReportingRuntimeErrors(options: RuntimeReportingOptions) {
     } finally {
       handleRuntimeError(errorRecord);
     }
-  }, options.filename);
+  });
 }
 
 function handleRuntimeError(errorRecord) {

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

@@ -39,10 +39,7 @@ export type ErrorRecord = {|
   stackFrames: StackFrame[],
 |};
 
-export function listenToRuntimeErrors(
-  crash: ErrorRecord => void,
-  filename: string = '/static/js/bundle.js'
-) {
+export function listenToRuntimeErrors(crash: ErrorRecord => void) {
   function crashWithFrames(error: Error, unhandledRejection = false) {
     getStackFrames(error, unhandledRejection, CONTEXT_SIZE)
       .then(stackFrames => {
@@ -71,7 +68,7 @@ export function listenToRuntimeErrors(
       {
         message: data.message,
         stack: data.stack,
-        __unmap_source: filename,
+        __unmap_source: '/static/js/bundle.js',
       },
       false
     );

packages/react-error-overlay/src/utils/getSourceMap.js

@@ -77,7 +77,7 @@ class SourceMap {
   }
 }
 
-function extractSourceMapUrl(fileUri: string, fileContents: string) {
+function extractSourceMapUrl(fileUri: string, fileContents: string) : Promise<string> {
   const regex = /\/\/[#@] ?sourceMappingURL=([^\s'"]+)\s*$/gm;
   let match = null;
   for (;;) {