feat(uni-builder): integrate modern server

.changeset/serious-fans-poke.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/uni-builder': patch
+---
+
+feat(uni-builder): integrate modern server into startDevServer
+
+feat(uni-builder): 将 modern server 集成到 startDevServer 中

packages/builder/uni-builder/package.json

@@ -30,6 +30,8 @@
     "@babel/core": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
     "@babel/types": "^7.23.0",
+    "@modern-js/server": "workspace:*",
+    "@modern-js/prod-server": "workspace:*",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
     "@rsbuild/babel-preset": "0.2.4",
     "@rsbuild/core": "0.2.4",

packages/builder/uni-builder/src/index.ts

@@ -9,7 +9,8 @@ export async function createUniBuilder(options: CreateUniBuilderOptions) {
 }
 
 export type { CreateUniBuilderOptions };
-export type { BundlerChain } from '@rsbuild/shared';
+export type { BundlerChain, RsbuildPlugin } from '@rsbuild/shared';
 export type { BuilderConfig } from './types';
+export type { StartDevServerOptions } from './shared/devServer';
 
 export { RUNTIME_CHUNK_NAME } from './shared/constants';

packages/builder/uni-builder/src/rspack/index.ts

@@ -4,13 +4,14 @@ import type {
   RsbuildPlugin,
   RsbuildInstance,
 } from '@rsbuild/core';
-import type { RsbuildProvider } from '@rsbuild/shared';
+import type { RsbuildProvider, StartServerResult } from '@rsbuild/shared';
 import type {
   UniBuilderRspackConfig,
   CreateRspackBuilderOptions,
   CreateBuilderCommonOptions,
 } from '../types';
 import { parseCommonConfig } from '../shared/parseCommonConfig';
+import type { StartDevServerOptions } from '../shared/devServer';
 
 export async function parseConfig(
   uniBuilderConfig: UniBuilderRspackConfig,
@@ -53,9 +54,23 @@ export async function parseConfig(
   };
 }
 
+type UniBuilderInstance = Omit<
+  RsbuildInstance<RsbuildProvider>,
+  'startDevServer'
+> & {
+  /**
+   * should be used in conjunction with the upper-layer framework:
+   *
+   * missing route.json (required in modern server)
+   */
+  startDevServer: (
+    options: StartDevServerOptions,
+  ) => Promise<StartServerResult>;
+};
+
 export async function createRspackBuilder(
   options: CreateRspackBuilderOptions,
-): Promise<RsbuildInstance<RsbuildProvider>> {
+): Promise<UniBuilderInstance> {
   const { cwd = process.cwd(), config, ...rest } = options;
 
   const { rsbuildConfig, rsbuildPlugins } = await parseConfig(config, {
@@ -70,5 +85,12 @@ export async function createRspackBuilder(
 
   rsbuild.addPlugins(rsbuildPlugins);
 
-  return rsbuild;
+  return {
+    ...rsbuild,
+    startDevServer: async (options: StartDevServerOptions = {}) => {
+      const { startDevServer } = await import('../shared/devServer');
+
+      return startDevServer(rsbuild, options, config);
+    },
+  };
 }

packages/builder/uni-builder/src/shared/devServer.ts

@@ -0,0 +1,173 @@
+import {
+  StartDevServerOptions as RsbuildStartDevServerOptions,
+  getAddressUrls,
+  debug,
+  StartServerResult,
+  RsbuildInstance,
+  deepmerge,
+  mergeChainedOptions,
+} from '@rsbuild/shared';
+import type { ModernDevServerOptionsNew } from '@modern-js/server';
+import { type ModernServerOptions } from '@modern-js/prod-server';
+import { BuilderConfig } from '../types';
+
+type ServerOptions = Partial<Omit<ModernDevServerOptionsNew, 'config'>> & {
+  config?: Partial<ModernDevServerOptionsNew['config']>;
+};
+
+const getServerOptions = (
+  builderConfig: BuilderConfig,
+): ModernServerOptions['config'] => {
+  return {
+    output: {
+      path: builderConfig.output?.distPath?.root,
+      assetPrefix: builderConfig.output?.assetPrefix,
+      distPath: builderConfig.output?.distPath,
+    },
+    source: {
+      alias: {},
+    },
+    html: {},
+    tools: {
+      babel: {},
+    },
+    server: {},
+    runtime: {},
+    bff: {},
+  };
+};
+
+const getDevServerOptions = async ({
+  builderConfig,
+  serverOptions,
+  port,
+}: {
+  builderConfig: BuilderConfig;
+  serverOptions: ServerOptions;
+  port: number;
+}): Promise<{
+  config: ModernDevServerOptionsNew['config'];
+  devConfig: ModernDevServerOptionsNew['dev'];
+}> => {
+  const defaultDevConfig = deepmerge(
+    {
+      hot: builderConfig.dev?.hmr ?? true,
+      watch: true,
+      client: {
+        port: port.toString(),
+      },
+      port,
+      liveReload: builderConfig.dev?.hmr ?? true,
+      https: builderConfig.dev?.https,
+    },
+    // merge devServerOptions from serverOptions
+    serverOptions.dev || {},
+  );
+
+  const devConfig = mergeChainedOptions({
+    defaults: defaultDevConfig,
+    options: builderConfig.tools?.devServer,
+    mergeFn: deepmerge,
+  });
+
+  const defaultConfig = getServerOptions(builderConfig);
+  const config = serverOptions.config
+    ? deepmerge(defaultConfig, serverOptions.config)
+    : defaultConfig;
+
+  return { config, devConfig };
+};
+
+export type StartDevServerOptions = Omit<
+  RsbuildStartDevServerOptions,
+  // printURLs is not used in modern.js
+  'printURLs'
+> & {
+  apiOnly?: boolean;
+  defaultPort?: number;
+  serverOptions?: ServerOptions;
+};
+
+export async function startDevServer(
+  rsbuild: RsbuildInstance,
+  options: StartDevServerOptions = {},
+  builderConfig: BuilderConfig,
+) {
+  debug('create dev server');
+
+  const { ServerForRsbuild } = await import('@modern-js/server');
+
+  const rsbuildServer = await rsbuild.getServerAPIs(options);
+
+  const { serverOptions = {} } = options;
+
+  const { config, devConfig } = await getDevServerOptions({
+    builderConfig,
+    serverOptions,
+    port: rsbuildServer.config.port,
+  });
+
+  const compileMiddlewareAPI = options.apiOnly
+    ? undefined
+    : await rsbuildServer.startCompile();
+
+  const server = new ServerForRsbuild({
+    pwd: rsbuild.context.rootPath,
+    ...serverOptions,
+    rsbuild,
+    getMiddlewares: config =>
+      rsbuildServer.getMiddlewares({
+        compileMiddlewareAPI,
+        overrides: config,
+      }),
+    dev: devConfig,
+    config,
+  });
+
+  const {
+    config: { port, host },
+  } = rsbuildServer;
+
+  debug('create dev server done');
+
+  await rsbuildServer.beforeStart();
+
+  const protocol = devConfig.https ? 'https' : 'http';
+  const urls = getAddressUrls(protocol, port, host);
+
+  debug('listen dev server');
+
+  await server.init();
+
+  return new Promise<StartServerResult>(resolve => {
+    server.listen(
+      {
+        host,
+        port,
+      },
+      async (err?: Error) => {
+        if (err) {
+          throw err;
+        }
+
+        debug('listen dev server done');
+
+        await rsbuildServer.afterStart({
+          port,
+          routes: [
+            {
+              route: '/',
+              name: 'index',
+            },
+          ],
+        });
+
+        resolve({
+          port,
+          urls: urls.map(item => item.url),
+          server,
+        });
+      },
+    );
+  });
+}

packages/builder/uni-builder/src/shared/parseCommonConfig.ts

@@ -1,13 +1,10 @@
-/* eslint-disable max-lines */
 /* eslint-disable complexity */
 import {
   deepmerge,
   NODE_MODULES_REGEX,
   CSS_MODULES_REGEX,
   isProd,
   ServerConfig,
-  logger,
-  color,
   RsbuildTarget,
   OverrideBrowserslist,
   getBrowserslist,
@@ -18,10 +15,9 @@ import {
   type RsbuildConfig,
 } from '@rsbuild/core';
 import type {
+  CreateBuilderCommonOptions,
   UniBuilderRspackConfig,
   UniBuilderWebpackConfig,
-  DevServerHttpsOptions,
-  CreateBuilderCommonOptions,
 } from '../types';
 import { pluginRem } from '@rsbuild/plugin-rem';
 import { pluginPug } from '@rsbuild/plugin-pug';
@@ -51,40 +47,6 @@ export const isLooseCssModules = (path: string) => {
   return !GLOBAL_CSS_REGEX.test(path);
 };
 
-const genHttpsOptions = async (
-  userOptions: DevServerHttpsOptions,
-  cwd: string,
-): Promise<{
-  key: string;
-  cert: string;
-}> => {
-  const httpsOptions: { key?: string; cert?: string } =
-    typeof userOptions === 'boolean' ? {} : userOptions;
-
-  if (!httpsOptions.key || !httpsOptions.cert) {
-    let devcertPath: string;
-
-    try {
-      devcertPath = require.resolve('devcert', { paths: [cwd, __dirname] });
-    } catch (err) {
-      const command = color.bold(color.yellow(`npm add devcert@1.2.2 -D`));
-      logger.error(
-        `You have enabled "dev.https" option, but the "devcert" package is not installed.`,
-      );
-      logger.error(
-        `Please run ${command} to install manually, otherwise the https can not work.`,
-      );
-      throw new Error('[https] "devcert" is not found.');
-    }
-
-    const devcert = require(devcertPath);
-    const selfsign = await devcert.certificateFor(['localhost']);
-    return selfsign;
-  }
-
-  return httpsOptions as { key: string; cert: string };
-};
-
 function removeUndefinedKey(obj: { [key: string]: any }) {
   Object.keys(obj).forEach(key => {
     if (obj[key] === undefined) {
@@ -144,11 +106,6 @@ export async function parseCommonConfig<B = 'rspack' | 'webpack'>(
   const rsbuildConfig = deepmerge({}, uniBuilderConfig);
   const { dev = {}, html = {}, output = {}, tools = {} } = rsbuildConfig;
 
-  // enable progress bar by default
-  if (dev.progressBar === undefined) {
-    dev.progressBar = true;
-  }
-
   if (output.cssModuleLocalIdentName) {
     output.cssModules ||= {};
     output.cssModules.localIdentName = output.cssModuleLocalIdentName;
@@ -242,48 +199,22 @@ export async function parseCommonConfig<B = 'rspack' | 'webpack'>(
     delete html.templateParametersByEntries;
   }
 
+  // more dev & server config will compat in modern-js/server
+
+  // enable progress bar by default
+  if (dev.progressBar === undefined) {
+    dev.progressBar = true;
+  }
+
+  dev.writeToDisk ??= (file: string) => !file.includes('.hot-update.');
+
   const server: ServerConfig = isProd()
-    ? {
-        publicDir: false,
-      }
+    ? {}
     : {
-        https:
-          tools.devServer?.https || dev.https
-            ? await genHttpsOptions(
-                (tools.devServer?.https || dev.https)!,
-                cwd!,
-              )
-            : undefined,
         port: dev.port,
         host: dev.host,
-        compress: tools.devServer?.compress,
-        headers: tools.devServer?.headers,
-        historyApiFallback: tools.devServer?.historyApiFallback,
-        proxy: tools.devServer?.proxy,
-        publicDir: false,
       };
 
-  dev.client = tools.devServer?.client;
-  dev.writeToDisk = tools.devServer?.devMiddleware?.writeToDisk ?? true;
-
-  if (tools.devServer?.hot === false) {
-    dev.hmr = false;
-  }
-
-  if (tools.devServer?.before?.length || tools.devServer?.after?.length) {
-    dev.setupMiddlewares = [
-      ...(tools.devServer?.setupMiddlewares || []),
-      middlewares => {
-        // the order: devServer.before => setupMiddlewares.unshift => internal middlewares => setupMiddlewares.push => devServer.after.
-        middlewares.unshift(...(tools.devServer?.before || []));
-
-        middlewares.push(...(tools.devServer?.after || []));
-      },
-    ];
-  } else if (tools.devServer?.setupMiddlewares) {
-    dev.setupMiddlewares = tools.devServer?.setupMiddlewares;
-  }
-
   delete tools.devServer;
   delete dev.https;
   delete dev.port;