Move error overlay middleware (#2216)

Author: gaearon

packages/react-dev-utils/README.md

@@ -236,6 +236,10 @@ var getProcessForPort = require('react-dev-utils/getProcessForPort');
 getProcessForPort(3000);
 ```
 
+#### `launchEditor(fileName: string, lineNumber: number): void`
+
+On macOS, tries to find a known running editor process and opens the file in it. It can also be explicitly configured by `REACT_EDITOR`, `VISUAL`, or `EDITOR` environment variables. For example, you can put `REACT_EDITOR=atom` in your `.env.local` file, and Create React App will respect that.
+
 #### `openBrowser(url: string): boolean`
 
 Attempts to open the browser with a given URL.<br>

packages/react-error-overlay/middleware.js

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+'use strict';
+
+const launchEditor = require('react-dev-utils/launchEditor');
+
+module.exports = function createLaunchEditorMiddleware() {
+  return function launchEditorMiddleware(req, res, next) {
+    // Keep this in sync with react-error-overlay
+    if (req.url.startsWith('/__open-stack-frame-in-editor')) {
+      launchEditor(req.query.fileName, req.query.lineNumber);
+      res.end();
+    } else {
+      next();
+    }
+  };
+};

packages/react-error-overlay/package.json

@@ -27,7 +27,8 @@
   ],
   "author": "Joe Haddad <timer150@gmail.com>",
   "files": [
-    "lib/"
+    "lib/",
+    "middleware.js"
   ],
   "dependencies": {
     "anser": "1.2.5",

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

@@ -277,6 +277,7 @@ function createFrame(
       .indexOf(' ') !== -1;
     if (!isInternalWebpackBootstrapCode) {
       onSourceClick = () => {
+        // Keep this in sync with react-error-overlay/middleware.js
         fetch(
           '/__open-stack-frame-in-editor?fileName=' +
             window.encodeURIComponent(sourceFileName) +

packages/react-scripts/config/webpackDevServer.config.js

@@ -10,7 +10,7 @@
 // @remove-on-eject-end
 'use strict';
 
-const launchEditor = require('react-dev-utils/launchEditor');
+const errorOverlayMiddleware = require('react-error-overlay/middleware');
 const config = require('./webpack.config.dev');
 const paths = require('./paths');
 
@@ -70,15 +70,8 @@ module.exports = function(proxy, allowedHost) {
     public: allowedHost,
     proxy,
     setup(app) {
-      // This lets us open files from the crash overlay.
-      app.use(function launchEditorMiddleware(req, res, next) {
-        if (req.url.startsWith('/__open-stack-frame-in-editor')) {
-          launchEditor(req.query.fileName, req.query.lineNumber);
-          res.end();
-        } else {
-          next();
-        }
-      });
+      // This lets us open files from the runtime error overlay.
+      app.use(errorOverlayMiddleware());
     },
   };
 };