Rename openInEditor to editorHandler

 -  Remove indirection of openInEditorListener
 -  Check editorHandler for null before styling error clickable

Author: tharakawj

packages/react-dev-utils/webpackHotDevClient.js

@@ -23,7 +23,7 @@ var launchEditorEndpoint = require('./launchEditorEndpoint');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var ErrorOverlay = require('react-error-overlay');
 
-ErrorOverlay.listenToOpenInEditor(function OpenInEditor(errorLocation) {
+ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
   // Keep this sync with errorOverlayMiddleware.js
   fetch(
     `${launchEditorEndpoint}?fileName=` +

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

@@ -21,19 +21,20 @@ const codeAnchorStyle = {
 
 type Props = {|
   error: string,
-  openInEditor: (errorLoc: ErrorLocation) => void,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 class CompileErrorContainer extends PureComponent<Props, void> {
   render() {
-    const { error, openInEditor } = this.props;
+    const { error, editorHandler } = this.props;
     const errLoc: ?ErrorLocation = parseCompileError(error);
+    const canOpenInEditor = errLoc !== null && editorHandler !== null;
     return (
       <ErrorOverlay>
         <Header headerText="Failed to compile" />
         <a
-          onClick={errLoc ? () => openInEditor(errLoc) : null}
-          style={errLoc ? codeAnchorStyle : null}
+          onClick={canOpenInEditor ? () => editorHandler(errLoc) : null}
+          style={canOpenInEditor ? codeAnchorStyle : null}
         >
           <CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
         </a>

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

@@ -27,10 +27,10 @@ export type ErrorRecord = {|
 
 type Props = {|
   errorRecord: ErrorRecord,
-  openInEditor: (errorLoc: ErrorLocation) => void,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
-function RuntimeError({ errorRecord, openInEditor }: Props) {
+function RuntimeError({ errorRecord, editorHandler }: Props) {
   const { error, unhandledRejection, contextSize, stackFrames } = errorRecord;
   const errorName = unhandledRejection
     ? 'Unhandled Rejection (' + error.name + ')'
@@ -59,7 +59,7 @@ function RuntimeError({ errorRecord, openInEditor }: Props) {
         stackFrames={stackFrames}
         errorName={errorName}
         contextSize={contextSize}
-        openInEditor={openInEditor}
+        editorHandler={editorHandler}
       />
     </div>
   );

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

@@ -19,7 +19,7 @@ import type { ErrorLocation } from '../utils/parseCompileError';
 type Props = {|
   errorRecords: ErrorRecord[],
   close: () => void,
-  openInEditor: (errorLoc: ErrorLocation) => void,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 type State = {|
@@ -75,7 +75,7 @@ class RuntimeErrorContainer extends PureComponent<Props, State> {
         )}
         <RuntimeError
           errorRecord={errorRecords[this.state.currentIndex]}
-          openInEditor={this.props.openInEditor}
+          editorHandler={this.props.editorHandler}
         />
         <Footer
           line1="This screen is visible only in development. It will not appear if the app crashes in production."

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

@@ -49,7 +49,7 @@ type Props = {|
   contextSize: number,
   critical: boolean,
   showCode: boolean,
-  openInEditor: (errorLoc: ErrorLocation) => void,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 type State = {|
@@ -85,17 +85,17 @@ class StackFrame extends Component<Props, State> {
     return { fileName, lineNumber: lineNumber || 1 };
   }
 
-  openInEditor = () => {
+  editorHandler = () => {
     const errorLoc = this.getErrorLocation();
     if (!errorLoc) {
       return;
     }
-    this.props.openInEditor(errorLoc);
+    this.props.editorHandler(errorLoc);
   };
 
   onKeyDown = (e: SyntheticKeyboardEvent<>) => {
     if (e.key === 'Enter') {
-      this.openInEditor();
+      this.editorHandler();
     }
   };
 
@@ -155,14 +155,15 @@ class StackFrame extends Component<Props, State> {
       }
     }
 
-    const canOpenInEditor = this.getErrorLocation() !== null;
+    const canOpenInEditor =
+      this.getErrorLocation() !== null && this.props.editorHandler !== null;
     return (
       <div>
         <div>{functionName}</div>
         <div style={linkStyle}>
           <a
             style={canOpenInEditor ? anchorStyle : null}
-            onClick={canOpenInEditor ? this.openInEditor : null}
+            onClick={canOpenInEditor ? this.editorHandler : null}
             onKeyDown={canOpenInEditor ? this.onKeyDown : null}
             tabIndex={canOpenInEditor ? '0' : null}
           >
@@ -172,7 +173,7 @@ class StackFrame extends Component<Props, State> {
         {codeBlockProps && (
           <span>
             <a
-              onClick={canOpenInEditor ? this.openInEditor : null}
+              onClick={canOpenInEditor ? this.editorHandler : null}
               style={canOpenInEditor ? codeAnchorStyle : null}
             >
               <CodeBlock {...codeBlockProps} />

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

@@ -26,12 +26,12 @@ type Props = {|
   stackFrames: StackFrameType[],
   errorName: string,
   contextSize: number,
-  openInEditor: (errorLoc: ErrorLocation) => void,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 class StackTrace extends Component<Props> {
   renderFrames() {
-    const { stackFrames, errorName, contextSize, openInEditor } = this.props;
+    const { stackFrames, errorName, contextSize, editorHandler } = this.props;
     const renderedFrames = [];
     let hasReachedAppCode = false,
       currentBundle = [],
@@ -55,7 +55,7 @@ class StackTrace extends Component<Props> {
           contextSize={contextSize}
           critical={index === 0}
           showCode={!shouldCollapse}
-          openInEditor={openInEditor}
+          editorHandler={editorHandler}
         />
       );
       const lastElement = index === stackFrames.length - 1;

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

@@ -19,13 +19,13 @@ function render({
   currentBuildError,
   currentRuntimeErrorRecords,
   dismissRuntimeErrors,
-  openInEditor,
+  editorHandler,
 }) {
   if (currentBuildError) {
     return (
       <CompileErrorContainer
         error={currentBuildError}
-        openInEditor={openInEditor}
+        editorHandler={editorHandler}
       />
     );
   }
@@ -34,7 +34,7 @@ function render({
       <RuntimeErrorContainer
         errorRecords={currentRuntimeErrorRecords}
         close={dismissRuntimeErrors}
-        openInEditor={openInEditor}
+        editorHandler={editorHandler}
       />
     );
   }

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

@@ -23,25 +23,22 @@ type RuntimeReportingOptions = {|
   filename?: string,
 |};
 
-type OpenInEditorListener = (errorLoc: ErrorLocation) => void;
+type EditorHandler = (errorLoc: ErrorLocation) => void;
 
 let iframe: null | HTMLIFrameElement = null;
 let isLoadingIframe: boolean = false;
 var isIframeReady: boolean = false;
 
-let openInEditorListener: null | OpenInEditorListener = null;
+let editorHandler: null | OpenInEditorListener = null;
 let currentBuildError: null | string = null;
 let currentRuntimeErrorRecords: Array<ErrorRecord> = [];
 let currentRuntimeErrorOptions: null | RuntimeReportingOptions = null;
 let stopListeningToRuntimeErrors: null | (() => void) = null;
 
-export function listenToOpenInEditor(listener: OpenInEditorListener) {
-  openInEditorListener = listener;
-}
-
-function openInEditor(errorLoc: ErrorLocation) {
-  if (typeof openInEditorListener === 'function') {
-    openInEditorListener(errorLoc);
+export function setEditorHandler(handler: EditorHandler | null) {
+  editorHandler = handler;
+  if (iframe) {
+    update();
   }
 }
 
@@ -153,7 +150,7 @@ function updateIframeContent() {
     currentBuildError,
     currentRuntimeErrorRecords,
     dismissRuntimeErrors,
-    openInEditor,
+    editorHandler,
   });
 
   if (!isRendered) {