feat: rebase main

Author: keepview

.changeset/six-carpets-hope.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/app-tools': patch
+'@modern-js/server': patch
+---
+
+feat: server config hot reload
+feat: 支持自定义 web server 热更新

packages/server/server/src/createDevServer.ts

@@ -4,8 +4,10 @@ import {
   createNodeServer,
   loadServerRuntimeConfig,
 } from '@modern-js/server-core/node';
-import { devPlugin } from './dev';
+import { logger } from '@modern-js/utils';
+import { devPlugin, manager } from './dev';
 import { getDevAssetPrefix, getDevOptions } from './helpers';
+import { ResourceType } from './helpers/utils';
 import type { ApplyPlugins, ModernDevServerOptions } from './types';
 
 export async function createDevServer(
@@ -35,6 +37,7 @@ export async function createDevServer(
   };
 
   const server = createServerBase(prodServerOptions);
+  let currentServer = server;
 
   const devHttpsOption = typeof dev === 'object' && dev.https;
   const isHttp2 = !!devHttpsOption;
@@ -43,12 +46,14 @@ export async function createDevServer(
     const { genHttpsOptions } = await import('./dev-tools/https');
     const httpsOptions = await genHttpsOptions(devHttpsOption, pwd);
     nodeServer = await createNodeServer(
-      server.handle.bind(server),
+      (req, res) => currentServer.handle(req, res),
       httpsOptions,
       isHttp2,
     );
   } else {
-    nodeServer = await createNodeServer(server.handle.bind(server));
+    nodeServer = await createNodeServer((req, res) =>
+      currentServer.handle(req, res),
+    );
   }
 
   const promise = getDevAssetPrefix(builder);
@@ -78,8 +83,48 @@ export async function createDevServer(
     await builderDevServer?.afterListen();
   };
 
+  const reload = async () => {
+    try {
+      const updatedServerConfig =
+        (await loadServerRuntimeConfig(serverConfigPath)) || {};
+
+      const updatedProdServerOptions = {
+        ...options,
+        pwd: distDir,
+        serverConfig: {
+          ...updatedServerConfig,
+          ...options.serverConfig,
+        },
+        plugins: [
+          ...(updatedServerConfig.plugins || []),
+          ...(options.plugins || []),
+        ],
+      };
+
+      const newServer = createServerBase(updatedProdServerOptions);
+
+      await manager.close(ResourceType.Watcher);
+
+      newServer.addPlugins([
+        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);
+    }
+  };
+
   return {
     server: nodeServer,
     afterListen,
+    reload,
   };
 }

packages/server/server/src/dev.ts

@@ -10,6 +10,7 @@ import {
   onRepack,
   startWatcher,
 } from './helpers';
+import { ResourceManager, ResourceType } from './helpers/utils';
 import type { ModernDevServerOptions } from './types';
 
 type BuilderDevServer = Awaited<ReturnType<BuilderInstance['createDevServer']>>;
@@ -18,14 +19,14 @@ export type DevPluginOptions = ModernDevServerOptions<ServerBaseOptions> & {
   builderDevServer?: BuilderDevServer;
 };
 
+export const manager = new ResourceManager();
+
 export const devPlugin = (options: DevPluginOptions): ServerPlugin => ({
   name: '@modern-js/plugin-dev',
 
   setup(api) {
     const { config, pwd, builder, builderDevServer } = options;
 
-    const closeCb: Array<(...args: []) => any> = [];
-
     const dev = getDevOptions(options.dev);
 
     api.onPrepare(async () => {
@@ -36,7 +37,9 @@ export const devPlugin = (options: DevPluginOptions): ServerPlugin => ({
         connectWebSocket,
       } = builderDevServer || {};
 
-      close && closeCb.push(close);
+      if (close) {
+        manager.register(ResourceType.Builder, close);
+      }
 
       const {
         middlewares,
@@ -53,14 +56,12 @@ export const devPlugin = (options: DevPluginOptions): ServerPlugin => ({
       // TODO: remove any
       const hooks = (api as any).getHooks();
 
-      // Handle webpack rebuild
       builder?.onDevCompileDone(({ stats }) => {
         if (stats.toJson({ all: false }).name !== 'server') {
           onRepack(distDirectory!, hooks);
         }
       });
 
-      // Handle watch
       const { watchOptions } = config.server;
       const watcher = startWatcher({
         pwd,
@@ -70,13 +71,11 @@ export const devPlugin = (options: DevPluginOptions): ServerPlugin => ({
         watchOptions,
         server: serverBase!,
       });
-      closeCb.push(watcher.close.bind(watcher));
-      closeCb.length > 0 &&
-        nodeServer?.on('close', () => {
-          closeCb.forEach(cb => {
-            cb();
-          });
-        });
+      manager.register(ResourceType.Watcher, watcher.close.bind(watcher));
+
+      nodeServer?.on('close', () => {
+        manager.closeAll();
+      });
 
       // Handle setupMiddlewares
       const before: RequestHandler[] = [];

packages/server/server/src/helpers/utils.ts

@@ -1,3 +1,33 @@
 import { createDebugger } from '@modern-js/utils';
 
 export const debug = createDebugger('server');
+
+export enum ResourceType {
+  Builder = 'builder',
+  Watcher = 'watcher',
+}
+
+export class ResourceManager {
+  private resources: Record<ResourceType, (() => Promise<void>) | null> = {
+    [ResourceType.Builder]: null,
+    [ResourceType.Watcher]: null,
+  };
+
+  register(type: ResourceType, cb: () => Promise<void>) {
+    this.resources[type] = cb;
+  }
+
+  async close(type: ResourceType) {
+    await this.resources[type]?.();
+    this.resources[type] = null;
+  }
+
+  async closeAll() {
+    await Promise.allSettled([
+      this.resources[ResourceType.Builder]?.() || Promise.resolve(),
+      this.resources[ResourceType.Watcher]?.() || Promise.resolve(),
+    ]);
+    this.resources[ResourceType.Builder] = null;
+    this.resources[ResourceType.Watcher] = null;
+  }
+}

packages/solutions/app-tools/package.json

@@ -53,6 +53,11 @@
       "types": "./dist/types/exports/server.d.ts",
       "jsnext:source": "./src/exports/server.ts",
       "default": "./dist/cjs/exports/server.js"
+    },
+    "./server/hmr": {
+      "types": "./dist/types/plugins/serverHmr.d.ts",
+      "jsnext:source": "./src/plugins/serverHmr.ts",
+      "default": "./dist/cjs/plugins/serverHmr.js"
     }
   },
   "engines": {

packages/solutions/app-tools/src/commands/dev.ts

@@ -16,7 +16,7 @@ import {
 import type { ConfigChain } from '@rsbuild/core';
 import type { AppNormalizedConfig, AppTools } from '../types';
 import { buildServerConfig } from '../utils/config';
-import { setServer } from '../utils/createServer';
+import { createServer, setServer } from '../utils/createServer';
 import { loadServerPlugins } from '../utils/loadPlugins';
 import { printInstructions } from '../utils/printInstructions';
 import { registerCompiler } from '../utils/register';
@@ -103,7 +103,7 @@ export const dev = async (
   const host = normalizedConfig.dev?.host || DEFAULT_DEV_HOST;
 
   if (apiOnly) {
-    const { server } = await createDevServer(
+    const { server } = await createServer(
       {
         ...serverOptions,
         runCompile: false,
@@ -126,7 +126,7 @@ export const dev = async (
     );
     setServer(server);
   } else {
-    const { server, afterListen } = await createDevServer(
+    const { server, afterListen } = await createServer(
       {
         ...serverOptions,
         builder: appContext.builder,

packages/solutions/app-tools/src/index.ts

@@ -25,6 +25,7 @@ import analyzePlugin from './plugins/analyze';
 import deployPlugin from './plugins/deploy';
 import initializePlugin from './plugins/initialize';
 import serverBuildPlugin from './plugins/serverBuild';
+import { serverHmrPlugin } from './plugins/serverHmr';
 import serverRuntimePlugin from './plugins/serverRuntime';
 import type { AppTools, CliPlugin } from './types';
 import type {
@@ -53,6 +54,7 @@ export const appTools = (): CliPlugin<AppTools> => ({
     analyzePlugin(),
     serverBuildPlugin(),
     deployPlugin(),
+    serverHmrPlugin(),
   ],
   post: [
     '@modern-js/plugin-initialize',

packages/solutions/app-tools/src/plugins/serverHmr.ts

@@ -0,0 +1,39 @@
+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 => ({
+  name: '@modern-js/server-hmr-plugin',
+  setup: api => {
+    api.onReset(async ({ event }) => {
+      if (event.type === 'file-change') {
+        const { appDirectory } = api.getServerContext();
+        const serverPath = path.join(appDirectory, 'server');
+        const indexPath = path.join(serverPath, 'index');
+        const isServerFileChanged = event.payload.some(
+          ({ filename }) =>
+            filename.startsWith(serverPath) && !filename.startsWith(indexPath),
+        );
+        if (isServerFileChanged) {
+          await reloadServer?.();
+        }
+      }
+    });
+  },
+});

packages/solutions/app-tools/src/utils/createServer.ts

@@ -1,7 +1,14 @@
 import type { Server } from 'node:http';
 import type { Http2SecureServer } from 'node:http2';
+import { applyPlugins } from '@modern-js/prod-server';
+import {
+  type ApplyPlugins,
+  type ModernDevServerOptions,
+  createDevServer,
+} from '@modern-js/server';
 
 let server: Server | Http2SecureServer | null = null;
+export let reloadServer: (() => Promise<void>) | null = null;
 
 export const getServer = () => server;
 
@@ -15,3 +22,24 @@ export const closeServer = async () => {
     server = null;
   }
 };
+
+export const createServer = async (
+  options: ModernDevServerOptions,
+  applyPluginsFn?: ApplyPlugins,
+): Promise<{
+  server: Server | Http2SecureServer;
+  afterListen: () => Promise<void>;
+}> => {
+  if (server) {
+    server.close();
+  }
+  const {
+    server: newServer,
+    afterListen,
+    reload: reloadDevServer,
+  } = await createDevServer(options, applyPluginsFn || applyPlugins);
+
+  reloadServer = reloadDevServer;
+  setServer(newServer);
+  return { server: newServer, afterListen };
+};

packages/solutions/app-tools/tests/utils.test.ts

@@ -4,6 +4,7 @@ import {
   closeServer,
   createServer,
   getServer,
+  reloadServer,
 } from '../src/utils/createServer';
 import { getSelectedEntries } from '../src/utils/getSelectedEntries';
 
@@ -58,4 +59,36 @@ describe('test app-tools utils', () => {
       resolve();
     });
   });
+
+  it('should create and close server correctly', async () => {
+    const app = await createServer({
+      pwd: __dirname,
+      config: {
+        html: {},
+        output: {
+          distPath: {
+            root: 'dist',
+          },
+        },
+        source: {},
+        tools: {},
+        server: {},
+        runtime: {},
+        bff: {},
+        dev: {},
+        security: {},
+      },
+      appContext: {},
+      dev: {},
+    });
+
+    expect(app.server instanceof Server).toBe(true);
+    expect(getServer()).toBe(app.server);
+
+    await reloadServer?.();
+    expect(getServer()).toBe(app.server);
+
+    await closeServer();
+    expect(getServer()).toBeNull();
+  });
 });