breaking: Drop browser helpers from cli-tools, simplify middleware (#2588)

Author: huntie

packages/cli-server-api/package.json

@@ -8,10 +8,12 @@
   },
   "dependencies": {
     "@react-native-community/cli-tools": "16.0.2",
+    "body-parser": "^1.20.3",
     "compression": "^1.7.1",
     "connect": "^3.6.5",
     "errorhandler": "^1.5.1",
     "nocache": "^3.0.1",
+    "open": "^6.2.0",
     "pretty-format": "^26.6.2",
     "serve-static": "^1.13.1",
     "ws": "^6.2.3"

packages/cli-server-api/src/index.ts

@@ -7,7 +7,7 @@ import nocache from 'nocache';
 import serveStatic from 'serve-static';
 
 import indexPageMiddleware from './indexPageMiddleware';
-import openStackFrameInEditorMiddleware from './openStackFrameInEditorMiddleware';
+import openStackFrameMiddleware from './openStackFrameMiddleware';
 import openURLMiddleware from './openURLMiddleware';
 import rawBodyMiddleware from './rawBodyMiddleware';
 import securityHeadersMiddleware from './securityHeadersMiddleware';
@@ -35,9 +35,10 @@ export function createDevServerMiddleware(options: MiddlewareOptions) {
     .use(compression())
     .use(nocache())
     .use('/', indexPageMiddleware)
-    .use('/open-stack-frame', openStackFrameInEditorMiddleware(options))
+    .use('/open-stack-frame', openStackFrameMiddleware(options))
     .use('/open-url', openURLMiddleware)
     .use('/status', statusPageMiddleware)
+    // TODO: Remove. Requires standardized JSON body parsing support in Metro.
     .use('/symbolicate', rawBodyMiddleware)
     // @ts-ignore mismatch
     .use('/systrace', systraceProfileMiddleware)

packages/cli-server-api/src/openStackFrameInEditorMiddleware.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {IncomingMessage, ServerResponse} from 'http';
+
+import {json} from 'body-parser';
+import connect from 'connect';
+import {launchEditor} from '@react-native-community/cli-tools';
+
+type Options = {
+  watchFolders: ReadonlyArray<string>;
+};
+
+/**
+ * Open a stack frame in the user's text editor.
+ */
+export default function openStackFrameMiddleware(_: Options) {
+  const handler = (
+    req: IncomingMessage & {
+      // Populated by body-parser
+      body?: Object;
+    },
+    res: ServerResponse,
+    next: (err?: Error) => void,
+  ) => {
+    if (req.method === 'POST') {
+      if (req.body == null) {
+        res.writeHead(400);
+        res.end('Missing request body');
+        return;
+      }
+
+      const frame = req.body as {
+        file: string;
+        lineNumber: number;
+      };
+
+      launchEditor(frame.file, frame.lineNumber);
+
+      res.writeHead(200);
+      res.end();
+    }
+
+    next();
+  };
+
+  return connect().use(json()).use(handler);
+}

packages/cli-server-api/src/openStackFrameMiddleware.ts

@@ -4,26 +4,40 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import http from 'http';
-import {launchDefaultBrowser, logger} from '@react-native-community/cli-tools';
+
+import type {IncomingMessage, ServerResponse} from 'http';
+
+import {json} from 'body-parser';
 import connect from 'connect';
-import rawBodyMiddleware from './rawBodyMiddleware';
+import open from 'open';
 
 /**
- * Handle request from JS to open an arbitrary URL in Chrome
+ * Open a URL in the system browser.
  */
-function openURLMiddleware(
-  req: http.IncomingMessage & {rawBody?: string},
-  res: http.ServerResponse,
-  next: (err?: any) => void,
+async function openURLMiddleware(
+  req: IncomingMessage & {
+    // Populated by body-parser
+    body?: Object;
+  },
+  res: ServerResponse,
+  next: (err?: Error) => void,
 ) {
-  if (!req.rawBody) {
-    return next(new Error('missing request body'));
+  if (req.method === 'POST') {
+    if (req.body == null) {
+      res.writeHead(400);
+      res.end('Missing request body');
+      return;
+    }
+
+    const {url} = req.body as {url: string};
+
+    await open(url);
+
+    res.writeHead(200);
+    res.end();
   }
-  const {url} = JSON.parse(req.rawBody);
-  logger.info(`Opening ${url}...`);
-  launchDefaultBrowser(url);
-  res.end('OK');
+
+  next();
 }
 
-export default connect().use(rawBodyMiddleware).use(openURLMiddleware);
+export default connect().use(json()).use(openURLMiddleware);

packages/cli-server-api/src/openURLMiddleware.ts

@@ -14,7 +14,6 @@
     "find-up": "^5.0.0",
     "launch-editor": "^2.9.1",
     "mime": "^2.4.1",
-    "open": "^6.2.0",
     "ora": "^5.4.1",
     "prompts": "^2.4.2",
     "semver": "^7.5.2"

packages/cli-tools/package.json

@@ -2,8 +2,6 @@ export {default as logger} from './logger';
 export {default as isPackagerRunning} from './isPackagerRunning';
 export {default as getDefaultUserTerminal} from './getDefaultUserTerminal';
 export {fetch, fetchToTemp} from './fetch';
-export {default as launchDefaultBrowser} from './launchDefaultBrowser';
-export {default as launchDebugger} from './launchDebugger';
 export {default as launchEditor} from './launchEditor';
 export * as version from './releaseChecker';
 export {default as resolveNodeModuleDir} from './resolveNodeModuleDir';

packages/cli-tools/src/index.ts

@@ -12,7 +12,7 @@ import launchEditorImpl from 'launch-editor';
 export default function launchEditor(
   fileName: string,
   lineNumber: number,
-  _watchFolders: ReadonlyArray<string>,
+  _watchFolders?: ReadonlyArray<string>,
 ): void {
   launchEditorImpl(`${fileName}:${lineNumber}`, process.env.REACT_EDITOR);
 }