feat: hmr plugin move to dev server

Author: keepview

packages/server/server/src/createDevServer.ts

@@ -8,36 +8,45 @@ import { logger } from '@modern-js/utils';
 import { devPlugin, manager } from './dev';
 import { getDevAssetPrefix, getDevOptions } from './helpers';
 import { ResourceType } from './helpers/utils';
+import serverHmrPlugin from './plugins/serverHmr';
 import type { ApplyPlugins, ModernDevServerOptions } from './types';
 
-export async function createDevServer(
+async function createServerOptions(
   options: ModernDevServerOptions,
-  applyPlugins: ApplyPlugins,
+  serverConfigPath: string,
+  distDir: string,
 ) {
-  const { config, pwd, serverConfigPath, builder } = options;
-  const dev = getDevOptions(options.dev);
-
-  const distDir = path.resolve(pwd, config.output.distPath?.root || 'dist');
-
   const serverConfig = (await loadServerRuntimeConfig(serverConfigPath)) || {};
 
-  const prodServerOptions = {
+  return {
     ...options,
-    pwd: distDir, // server base pwd must distDir,
+    pwd: distDir,
     serverConfig: {
       ...serverConfig,
       ...options.serverConfig,
     },
-    /**
-     * 1. server plugins from modern.server.ts
-     * 2. server plugins register by cli use _internalServerPlugins
-     * Merge plugins, the plugins from modern.server.ts will run first
-     */
     plugins: [...(serverConfig.plugins || []), ...(options.plugins || [])],
   };
+}
+
+export async function createDevServer(
+  options: ModernDevServerOptions,
+  applyPlugins: ApplyPlugins,
+) {
+  const { config, pwd, serverConfigPath, builder } = options;
+  const dev = getDevOptions(options.dev);
+
+  const distDir = path.resolve(pwd, config.output.distPath?.root || 'dist');
+
+  const prodServerOptions = await createServerOptions(
+    options,
+    serverConfigPath,
+    distDir,
+  );
 
   const server = createServerBase(prodServerOptions);
   let currentServer = server;
+  let isReloading = false;
 
   const devHttpsOption = typeof dev === 'object' && dev.https;
   const isHttp2 = !!devHttpsOption;
@@ -62,69 +71,64 @@ export async function createDevServer(
     compiler: options.compiler,
   });
 
-  server.addPlugins([
-    devPlugin({
-      ...options,
-      builderDevServer,
-    }),
-  ]);
-
-  // run after createDevServer, we can get assetPrefix from builder
-  const assetPrefix = await promise;
-  if (assetPrefix) {
-    prodServerOptions.config.output.assetPrefix = assetPrefix;
-  }
-
-  await applyPlugins(server, prodServerOptions, nodeServer);
-
-  await server.init();
-
-  const afterListen = async () => {
-    await builderDevServer?.afterListen();
-  };
-
   const reload = async () => {
+    if (isReloading) {
+      return;
+    }
     try {
-      const updatedServerConfig =
-        (await loadServerRuntimeConfig(serverConfigPath)) || {};
-
-      const updatedProdServerOptions = {
-        ...options,
-        pwd: distDir,
-        serverConfig: {
-          ...updatedServerConfig,
-          ...options.serverConfig,
-        },
-        plugins: [
-          ...(updatedServerConfig.plugins || []),
-          ...(options.plugins || []),
-        ],
-      };
+      isReloading = true;
 
+      const updatedProdServerOptions = await createServerOptions(
+        options,
+        serverConfigPath,
+        distDir,
+      );
       const newServer = createServerBase(updatedProdServerOptions);
 
       await manager.close(ResourceType.Watcher);
 
       newServer.addPlugins([
+        serverHmrPlugin(reload),
         devPlugin({
           ...options,
         }),
       ]);
-
       await applyPlugins(newServer, updatedProdServerOptions, nodeServer);
-
       await newServer.init();
 
       currentServer = newServer;
       logger.info(`Custom Web Server HMR succeeded`);
     } catch (e) {
       logger.error('[Custom Web Server HMR failed]:', e);
+    } finally {
+      isReloading = false;
     }
   };
 
+  server.addPlugins([
+    serverHmrPlugin(reload),
+    devPlugin({
+      ...options,
+      builderDevServer,
+    }),
+  ]);
+
+  // run after createDevServer, we can get assetPrefix from builder
+  const assetPrefix = await promise;
+  if (assetPrefix) {
+    prodServerOptions.config.output.assetPrefix = assetPrefix;
+  }
+
+  await applyPlugins(server, prodServerOptions, nodeServer);
+
+  await server.init();
+
+  const afterListen = async () => {
+    await builderDevServer?.afterListen();
+  };
+
   return {
     server: nodeServer,
     afterListen,
-    reload,
   };
 }

packages/solutions/app-tools/src/plugins/serverHmr.ts renamed to packages/server/server/src/plugins/serverHmr.ts

@@ -1,24 +1,7 @@
 import path from 'path';
 import type { ServerPlugin } from '@modern-js/server-core';
-import { reloadServer } from '../utils/createServer';
 
-import type { AppTools, CliPlugin } from '../types';
-
-export const serverHmrPlugin = (): CliPlugin<AppTools> => ({
-  name: '@modern-js/server-hmr-plugin',
-  setup(api) {
-    api._internalServerPlugins(({ plugins }) => {
-      if (process.env.NODE_ENV === 'development') {
-        plugins.push({
-          name: '@modern-js/app-tools/server/hmr',
-        });
-      }
-      return { plugins };
-    });
-  },
-});
-
-export default (): ServerPlugin => ({
+export default (reload: () => Promise<void>): ServerPlugin => ({
   name: '@modern-js/server-hmr-plugin',
   setup: api => {
     api.onReset(async ({ event }) => {
@@ -31,7 +14,7 @@ export default (): ServerPlugin => ({
             filename.startsWith(serverPath) && !filename.startsWith(indexPath),
         );
         if (isServerFileChanged) {
-          await reloadServer?.();
+          await reload();
         }
       }
     });