feat: metro dev server

徐远翔 · 徐远翔 · commit bf32fda2e2c5 · 2020-04-23T20:25:12.000+08:00
diff --git a/README.md b/README.md
@@ -12,14 +12,12 @@
 - [ ] umi-plugin-react-native-bundler-metro: developing
 - [ ] umi-plugin-react-native-bundler-haul
 
-## 必备条件
+## 必备
 
 - RN 工程（已有，或使用`react-native init`新建）；
 - [RN 开发环境](https://reactnative.dev/docs/environment-setup)。
 
-## 使用步骤
-
-### 安装
+## 安装
 
 选用官方[metro](https://facebook.github.io/metro/)打包：
 
@@ -33,36 +31,15 @@ yarn add umi-plugin-react-native umi-plugin-react-native-bundler-metro  --dev
 yarn add umi-plugin-react-native umi-plugin-react-native-bundler-haul  --dev
 ```
 
-### 配置
-
-```javascript
-// .umirc.js
-export default {
-  history: {
-    type: 'memory',
-  },
-  'react-native': {
-    appKey: 'RNExample',
-  },
-  plugins: ['umi-plugin-react-native', 'umi-plugin-react-native-bundler-metro'],
-  // plugins: ['umi-plugin-react-native', 'umi-plugin-react-native-bundler-haul'],
-};
-```
+### 注意
 
-**注意：**
+`umi-plugin-react-native-bundler-metro` 和 `umi-plugin-react-native-bundler-haul` 只能二选一，同时安装会导致 umi 报错（`dev-rn`和`build-rn`命令行工具冲突）。
 
-- `history`: **必须**设置为`"memory"`，因为 RN 中没有 DOM，使用<s>"browser"</s>或者<s>"hash"</s>时会报错。
-- `react-native`：`umi-plugin-react-native`配置项。
-  - `appKey`: 选填，缺省值：RN 工程 app.json 文件中的 "name" 字段。
-    - 在 RN JS 代码域中命名为：`appKey`，即`AppRegistry.registerComponent(appKey, componentProvider);`的第一个参数；
-    - 在 iOS/Android 代码域中命名为：`moduleName`，是原生层加载 js bundle 文件的必填参数。
-- `plugins`:
-  - `umi-plugin-react-native`：**必须**;
-  - `umi-plugin-react-native-bundler-metro` 和 `umi-plugin-react-native-bundler-haul`： 二选一，同时添加时会导致 umi 报错（`dev-rn`和`dev-build`命令行工具冲突）。
+## 使用
 
 ### 开发
 
-可以修改`package.json`文件，使用`umi`取代原本的`react-native`：
+修改`package.json`文件，使用`umi`取代原本的`react-native`：
 
 ```diff
 {
diff --git a/packages/bundler-metro/src/index.ts b/packages/bundler-metro/src/index.ts
@@ -1,73 +1,172 @@
 import { IApi } from '@umijs/types';
 import { join } from 'path';
 import { existsSync } from 'fs';
+import { constants } from 'os';
+import http, { Server as HttpServer } from 'http';
+import { Server as HttpsServer } from 'https';
+import assert from 'assert';
 import generateFiles from '@umijs/preset-built-in/lib/plugins/commands/generateFiles';
 import { cleanTmpPathExceptCache } from '@umijs/preset-built-in/lib/plugins/commands/buildDevUtils';
 import { watchPkg } from '@umijs/preset-built-in/lib/plugins/commands/dev/watchPkg';
 import loadMetroConfig from '@react-native-community/cli/build/tools/loadMetroConfig';
 import loadConfig from '@react-native-community/cli/build/tools/config';
+import eventsSocketModule from '@react-native-community/cli/build/commands/server/eventsSocket';
+import messageSocket from '@react-native-community/cli/build/commands/server/messageSocket';
+import webSocketProxy from '@react-native-community/cli/build/commands/server/webSocketProxy';
+import MiddlewareManager from '@react-native-community/cli/build/commands/server/middleware/MiddlewareManager';
+import releaseChecker from '@react-native-community/cli/build/tools/releaseChecker';
+import enableWatchMode from '@react-native-community/cli/build/commands/server/watchMode';
 import getIPAddress from './getIPAddress';
 
 export default (api: IApi) => {
   const {
     logger,
-    env,
     paths,
     utils: { chalk, portfinder },
   } = api;
-  const METRO_PATH = join(api.paths.absNodeModulesPath || process.cwd(), 'metro');
+  const METRO_PATH = join(paths.absNodeModulesPath || '', 'metro');
+  const METRO_CORE_PATH = join(paths.absNodeModulesPath || '', 'metro-core');
 
-  if (!existsSync(METRO_PATH)) {
-    throw new TypeError('未找到 "metro"，请执行 `yarn install` 安装所有依赖。');
-  }
+  assert(existsSync(METRO_PATH), '未找到 "metro"，请执行 `yarn install` 安装所有依赖。');
+  assert(existsSync(METRO_CORE_PATH), '未找到 "metro-core"，请执行 `yarn install` 安装所有依赖。');
 
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const MetroServer = require(join(METRO_PATH, 'src', 'Server.js'));
   let port: number;
   let hostname: string;
-  let server: typeof MetroServer;
+  let server: HttpServer | HttpsServer;
   const unwatchs: (() => void)[] = [];
 
-  function destroy() {
-    for (const unwatch of unwatchs) {
-      unwatch();
-    }
+  function destroy(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      for (const unwatch of unwatchs) {
+        try {
+          unwatch();
+        } catch (ignored) {}
+      }
+      if (server) {
+        server.close((err) => (err ? reject(err) : resolve()));
+      } else {
+        resolve();
+      }
+    });
   }
 
   api.registerCommand({
     name: 'dev-rn',
     description: 'starts react-native dev webserver',
     fn: async ({ args }) => {
-      logger.info('rn-dev:', args);
       const defaultPort = process.env.PORT || args?.port || api.config.devServer?.port;
       port = await portfinder.getPortPromise({
         port: defaultPort ? parseInt(String(defaultPort), 10) : 8081,
       });
       hostname = process.env.HOST || api.config.devServer?.host || getIPAddress();
-      console.log(chalk.cyan('Starting the development server...'));
-      // eslint-disable-next-line no-unused-expressions
-      process.send?.({ type: 'UPDATE_PORT', port });
+
+      logger.info('rn-dev:', args, 'hostname=', hostname, 'port=', port);
 
       cleanTmpPathExceptCache({
         absTmpPath: paths.absTmpPath!,
       });
       const watch = process.env.WATCH !== 'none';
 
-      async function runMetroServer(): Promise<void> {
-        const ctx = loadConfig(api.paths.cwd);
+      async function startMetroServer(): Promise<void> {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const Metro = require(METRO_PATH);
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const { Terminal } = require(METRO_CORE_PATH);
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const TerminalReporter = require(join(METRO_PATH, 'src', 'lib', 'TerminalReporter'));
+        const terminal = new Terminal(process.stdout);
+        const terminalReporter = new TerminalReporter(terminal);
+        // eslint-disable-next-line
+        let eventsSocket: ReturnType<typeof eventsSocketModule.attachToServer> | undefined;
+
+        const reporter = {
+          update(event: any) {
+            terminalReporter.update(event);
+            if (eventsSocket) {
+              eventsSocket.reportEvent(event);
+            }
+          },
+        };
+        const ctx = loadConfig(paths.cwd);
+        logger.info('ctx:', ctx);
         const metroConfig = await loadMetroConfig(ctx, {
           ...args,
-          watchFolders: [api.paths.absTmpPath || ''],
-          projectRoot: api.paths.cwd,
-          // reporter,
+          config: join(paths.cwd || '', 'metro.config.js'),
+          projectRoot: paths.absTmpPath,
+          reporter,
         });
-      }
+        if (Array.isArray(args.assetPlugins)) {
+          metroConfig.transformer.assetPlugins = args.assetPlugins.map((plugin) => require.resolve(plugin));
+        }
+
+        const middlewareManager = new MiddlewareManager({
+          host: hostname,
+          port: metroConfig.server.port || port,
+          watchFolders: metroConfig.watchFolders,
+        });
+
+        metroConfig.watchFolders.forEach(middlewareManager.serveStatic.bind(middlewareManager));
+
+        const customEnhanceMiddleware = metroConfig.server.enhanceMiddleware;
 
-      function restartMetroServer(): void {
-        if (server && typeof server.close === 'function') {
-          server.close(() => {
-            runMetroServer().then();
+        metroConfig.server.enhanceMiddleware = (middleware: any, server: unknown) => {
+          if (customEnhanceMiddleware) {
+            middleware = customEnhanceMiddleware(middleware, server);
+          }
+
+          return middlewareManager.getConnectInstance().use(middleware);
+        };
+
+        logger.info('metroConfig:', metroConfig);
+        server = await Metro.runServer(metroConfig, {
+          host: args.host,
+          secure: args.https,
+          secureCert: args.cert,
+          secureKey: args.key,
+          hmrEnabled: true,
+        });
+
+        const wsProxy = webSocketProxy.attachToServer(server, '/debugger-proxy');
+        const ms = messageSocket.attachToServer(server, '/message');
+        eventsSocket = eventsSocketModule.attachToServer(server, '/events', ms);
+
+        middlewareManager.attachDevToolsSocket(wsProxy);
+        middlewareManager.attachDevToolsSocket(ms);
+
+        if (args.interactive) {
+          enableWatchMode(ms);
+        }
+
+        middlewareManager
+          .getConnectInstance()
+          .use('/reload', (_req: http.IncomingMessage, res: http.ServerResponse) => {
+            ms.broadcast('reload');
+            res.end('OK');
           });
+
+        // In Node 8, the default keep-alive for an HTTP connection is 5 seconds. In
+        // early versions of Node 8, this was implemented in a buggy way which caused
+        // some HTTP responses (like those containing large JS bundles) to be
+        // terminated early.
+        //
+        // As a workaround, arbitrarily increase the keep-alive from 5 to 30 seconds,
+        // which should be enough to send even the largest of JS bundles.
+        //
+        // For more info: https://github.com/nodejs/node/issues/13391
+        //
+        server.keepAliveTimeout = 30000;
+
+        await releaseChecker(ctx.root);
+      }
+
+      async function restartServer(): Promise<void> {
+        console.log(chalk.gray(`Try to restart dev server...`));
+        try {
+          await destroy();
+          await startMetroServer();
+        } catch (err) {
+          console.log(chalk.red('Dev server restarting failed'), err);
+          process.exit(constants.signals.SIGHUP);
         }
       }
 
@@ -81,19 +180,19 @@ export default (api: IApi) => {
           onChange() {
             console.log();
             api.logger.info(`Plugins in package.json changed.`);
-            api.restartServer();
+            restartServer();
           },
         });
         unwatchs.push(unwatchPkg);
 
         // watch config change
         const unwatchConfig = api.service.configInstance.watch({
           userConfig: api.service.userConfig,
-          onChange: async ({ pluginChanged, userConfig, valueChanged }) => {
+          onChange: async ({ pluginChanged, valueChanged }) => {
             if (pluginChanged.length) {
               console.log();
               api.logger.info(`Plugins of ${pluginChanged.map((p) => p.key).join(', ')} changed.`);
-              api.restartServer();
+              restartServer();
             }
             if (valueChanged.length) {
               let reload = false;
@@ -117,7 +216,7 @@ export default (api: IApi) => {
               if (reload) {
                 console.log();
                 api.logger.info(`Config ${reloadConfigs.join(', ')} changed.`);
-                api.restartServer();
+                restartServer();
               } else {
                 api.service.userConfig = api.service.configInstance.getUserConfig();
 
@@ -147,6 +246,8 @@ export default (api: IApi) => {
         });
         unwatchs.push(unwatchConfig);
       }
+
+      await startMetroServer();
     },
   });
 
@@ -155,7 +256,7 @@ export default (api: IApi) => {
     description: 'builds react-native javascript bundle for offline use',
     fn: async ({ args: { platform } }) => {
       logger.info('rn-build:', platform);
-      // await generateFiles({ api, watch: false });
+      await generateFiles({ api });
     },
   });
 };
diff --git a/packages/bundler-metro/tsconfig.json b/packages/bundler-metro/tsconfig.json
@@ -2,7 +2,8 @@
   "extends": "../../tsconfig",
   "compilerOptions": {
     "rootDir": "src",
-    "outDir": "lib"
+    "outDir": "lib",
+    "skipLibCheck": true
   },
   "include": ["src", "../../types"]
 }
diff --git a/packages/plugin/src/entryFileTpl.ts b/packages/plugin/src/entryFileTpl.ts
@@ -25,13 +25,11 @@ const getClientRender = (args: { hot?: boolean } = {}) => plugin.applyPlugins({
 const clientRender = getClientRender();
 export default clientRender();
 
-{{{ entryCode }}}
-
 // hot module replacement
 // @ts-ignore
 if (module.hot) {
   // @ts-ignore
-  module.hot.accept('./core/routes', () => {
+  module.hot.accept(() => {
     getClientRender({ hot: true })();
   });
 }
diff --git a/packages/renderer/src/renderClient/renderClient.tsx b/packages/renderer/src/renderClient/renderClient.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, ReactElement } from 'react';
 import { AppRegistry } from 'react-native';
 import { ApplyPluginsType, Plugin } from '@umijs/runtime';
 import { IRoute, renderRoutes } from '@umijs/renderer-react';
@@ -18,7 +18,7 @@ interface IOpts extends IRouterComponentProps {
   appKey: string;
 }
 
-function RouterComponent(props: IRouterComponentProps) {
+function RouterComponent(props: IRouterComponentProps): JSX.Element {
   const { history, ...renderRoutesProps } = props;
 
   useEffect(() => {
@@ -44,17 +44,17 @@ function RouterComponent(props: IRouterComponentProps) {
   return <Router history={history}>{renderRoutes(renderRoutesProps)}</Router>;
 }
 
-export default function renderClient(opts: IOpts) {
-  const rootContainer = opts.plugin.applyPlugins({
+export default function renderClient({ plugin, appKey, history, routes }: IOpts) {
+  const rootContainer = plugin.applyPlugins({
     type: ApplyPluginsType.modify,
     key: 'rootContainer',
-    initialValue: <RouterComponent history={opts.history} routes={opts.routes} plugin={opts.plugin} />,
+    initialValue: <RouterComponent history={history} routes={routes} plugin={plugin} />,
     args: {
-      history: opts.history,
-      routes: opts.routes,
-      plugin: opts.plugin,
+      history,
+      routes,
+      plugin,
     },
-  });
-  AppRegistry.registerComponent(opts.appKey, rootContainer);
+  }) as ReactElement;
+  AppRegistry.registerComponent(appKey, () => () => rootContainer);
   return rootContainer;
 }
