feat: support split page chunk in cjs format (#6843)

* feat: support spilt page chunk in cjs format

* fix: escape route path

* fix: multipile entry for server compile

* chore: changelog

.changeset/spotty-dodos-drop.md

@@ -0,0 +1,5 @@
+---
+'@ice/app': patch
+---
+
+feat: support spilt page chunk in cjs format

packages/ice/src/bundler/config/plugins.ts

@@ -2,6 +2,8 @@ import ServerRunnerPlugin from '../../webpack/ServerRunnerPlugin.js';
 import { IMPORT_META_RENDERER, IMPORT_META_TARGET, WEB } from '../../constant.js';
 import getServerCompilerPlugin from '../../utils/getServerCompilerPlugin.js';
 import ReCompilePlugin from '../../webpack/ReCompilePlugin.js';
+import getEntryPoints from '../../utils/getEntryPoints.js';
+import { multipleServerEntry } from '../../utils/multipleEntry.js';
 import type ServerRunner from '../../service/ServerRunner';
 import type ServerCompileTask from '../../utils/ServerCompileTask.js';
 import type { ServerCompiler, UserConfig } from '../../types';
@@ -28,6 +30,8 @@ interface ServerPluginOptions {
   serverEntry?: string;
   ensureRoutesConfig: () => Promise<void>;
   userConfig?: UserConfig;
+  getFlattenRoutes?: () => string[];
+  command?: string;
 }
 export const getServerPlugin = ({
   serverRunner,
@@ -39,6 +43,8 @@ export const getServerPlugin = ({
   outputDir,
   serverCompileTask,
   userConfig,
+  getFlattenRoutes,
+  command,
 }: ServerPluginOptions) => {
   if (serverRunner) {
     return new ServerRunnerPlugin(serverRunner, ensureRoutesConfig);
@@ -51,6 +57,8 @@ export const getServerPlugin = ({
       serverCompileTask,
       userConfig,
       ensureRoutesConfig,
+      entryPoints: multipleServerEntry(userConfig, command)
+        ? getEntryPoints(rootDir, getFlattenRoutes(), serverEntry) : undefined,
       runtimeDefineVars: {
         [IMPORT_META_TARGET]: JSON.stringify(target),
         [IMPORT_META_RENDERER]: JSON.stringify('server'),

packages/ice/src/bundler/rspack/getConfig.ts

@@ -35,9 +35,11 @@ const getConfig: GetConfig = async (context, options, rspack) => {
   const {
     rootDir,
     userConfig,
+    command,
     extendsPluginAPI: {
       serverCompileTask,
       getRoutesFile,
+      getFlattenRoutes,
     },
   } = context;
   const { reCompile, ensureRoutesConfig } = getRouteExportConfig(rootDir);
@@ -57,6 +59,8 @@ const getConfig: GetConfig = async (context, options, rspack) => {
         outputDir,
         serverCompileTask,
         userConfig,
+        getFlattenRoutes,
+        command,
       }),
       // Add ReCompile plugin when routes config changed.
       getReCompilePlugin(reCompile, routeManifest),

packages/ice/src/bundler/webpack/getWebpackConfig.ts

@@ -59,6 +59,7 @@ const getWebpackConfig: GetWebpackConfig = async (context, options) => {
     configFilePath,
     extendsPluginAPI: {
       serverCompileTask,
+      getFlattenRoutes,
       getRoutesFile,
       generator,
     },
@@ -96,6 +97,8 @@ const getWebpackConfig: GetWebpackConfig = async (context, options) => {
       outputDir,
       serverCompileTask,
       userConfig,
+      command,
+      getFlattenRoutes,
     });
     if (serverCompilerPlugin) {
       webpackConfig.plugins.push(serverCompilerPlugin);

packages/ice/src/createService.ts

@@ -38,6 +38,7 @@ import addPolyfills from './utils/runtimePolyfill.js';
 import webpackBundler from './bundler/webpack/index.js';
 import rspackBundler from './bundler/rspack/index.js';
 import getDefaultTaskConfig from './plugins/task.js';
+import { multipleServerEntry, renderMultiEntry } from './utils/multipleEntry.js';
 import hasDocument from './utils/hasDocument.js';
 
 const require = createRequire(import.meta.url);
@@ -248,7 +249,10 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
   const iceRuntimePath = '@ice/runtime';
   // Only when code splitting use the default strategy or set to `router`, the router will be lazy loaded.
   const lazy = [true, 'chunks', 'page', 'page-vendors'].includes(userConfig.codeSplitting);
-  const { routeImports, routeDefinition } = getRoutesDefinition(routesInfo.routes, lazy);
+  const { routeImports, routeDefinition } = getRoutesDefinition({
+    manifest: routesInfo.routes,
+    lazy,
+  });
   const loaderExports = hasExportAppData || Boolean(routesInfo.loaders);
   const hasDataLoader = Boolean(userConfig.dataLoader) && loaderExports;
   // add render data
@@ -272,6 +276,7 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
     hasDataLoader,
     routeImports,
     routeDefinition,
+    routesFile: './routes',
   });
   dataCache.set('routes', JSON.stringify(routesInfo));
   dataCache.set('hasExportAppData', hasExportAppData ? 'true' : '');
@@ -309,6 +314,15 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
     });
   }
 
+  if (multipleServerEntry(userConfig, command)) {
+    renderMultiEntry({
+      generator,
+      renderRoutes: routeManifest.getFlattenRoute(),
+      routesManifest: routesInfo.routes,
+      lazy,
+    });
+  }
+
   // render template before webpack compile
   const renderStart = new Date().getTime();
   generator.render();

packages/ice/src/getWatchEvents.ts

@@ -30,7 +30,10 @@ const getWatchEvents = (options: Options): WatchEvent[] => {
     async (eventName: string) => {
       if (eventName === 'add' || eventName === 'unlink' || eventName === 'change') {
         const routesRenderData = await generateRoutesInfo(rootDir, routesConfig);
-        const { routeImports, routeDefinition } = getRoutesDefinition(routesRenderData.routes, lazyRoutes);
+        const { routeImports, routeDefinition } = getRoutesDefinition({
+          manifest: routesRenderData.routes,
+          lazy: lazyRoutes,
+        });
         const stringifiedData = JSON.stringify(routesRenderData);
         if (cache.get('routes') !== stringifiedData) {
           cache.set('routes', stringifiedData);

packages/ice/src/routes.ts

@@ -64,9 +64,20 @@ function getFilePath(file: string) {
   return formatPath(path.isAbsolute(file) ? file : `@/pages/${file}`.replace(new RegExp(`${path.extname(file)}$`), ''));
 }
 
-export function getRoutesDefinition(nestRouteManifest: NestedRouteManifest[], lazy = false, depth = 0) {
+interface GetDefinationOptions {
+  manifest: NestedRouteManifest[];
+  lazy?: boolean;
+  depth?: number;
+  matchRoute?: (route: NestedRouteManifest) => boolean;
+}
+
+export function getRoutesDefinition(options: GetDefinationOptions) {
+  const { manifest, lazy = false, depth = 0, matchRoute = () => true } = options;
   const routeImports: string[] = [];
-  const routeDefinition = nestRouteManifest.reduce((prev, route) => {
+  const routeDefinition = manifest.reduce((prev, route) => {
+    if (!matchRoute(route)) {
+      return prev;
+    }
     const { children, path: routePath, index, componentName, file, id, layout, exports } = route;
     const componentPath = id.startsWith('__') ? file : getFilePath(file);
 
@@ -112,7 +123,12 @@ export function getRoutesDefinition(nestRouteManifest: NestedRouteManifest[], la
       routeProperties.push('layout: true,');
     }
     if (children) {
-      const res = getRoutesDefinition(children, lazy, depth + 1);
+      const res = getRoutesDefinition({
+        manifest: children,
+        lazy,
+        depth: depth + 1,
+        matchRoute,
+      });
       routeImports.push(...res.routeImports);
       routeProperties.push(`children: [${res.routeDefinition}]`);
     }

packages/ice/src/types/userConfig.ts

@@ -220,7 +220,7 @@ export interface UserConfig {
     /**
      * bundle server code as a single file
      */
-    bundle?: boolean;
+    bundle?: boolean | 'page';
     /**
      * ignore file when bundle server code, module return empty when match
      */

packages/ice/src/utils/generateEntry.ts

@@ -67,9 +67,13 @@ const writeFile = async (file: string, content: string) => {
   await fse.writeFile(file, content);
 };
 
-function formatFilePath(routePath: string, type: 'js' | 'html' | 'js.map'): string {
+export function escapeRoutePath(str: string) {
   // Win32 do not support file name start with ':' and '*'.
-  return routePath === '/' ? `index.${type}` : `${routePath.replace(/\/(:|\*)/g, '/$')}.${type}`;
+  return str.replace(/\/(:|\*)/g, '/$');
+}
+
+function formatFilePath(routePath: string, type: 'js' | 'html' | 'js.map'): string {
+  return routePath === '/' ? `index.${type}` : `${escapeRoutePath(routePath)}.${type}`;
 }
 
 async function generateFilePath(

packages/ice/src/utils/getEntryPoints.ts

@@ -0,0 +1,17 @@
+import * as path from 'path';
+import { RUNTIME_TMP_DIR } from '../constant.js';
+import getServerEntry from './getServerEntry.js';
+import { formatServerEntry } from './multipleEntry.js';
+
+function getEntryPoints(rootDir: string, routes: string[], mainEntry: string) {
+  const serverEntry: Record<string, string> = {};
+  routes.forEach((route) => {
+    serverEntry[`pages${route === '/' ? '/index' : route}`] =
+      path.join(rootDir, RUNTIME_TMP_DIR, formatServerEntry(route));
+  });
+  serverEntry.index = getServerEntry(rootDir, mainEntry);
+
+  return serverEntry;
+}
+
+export default getEntryPoints;

packages/ice/src/utils/getServerCompilerPlugin.ts

@@ -13,6 +13,7 @@ interface Options {
   serverCompileTask: ExtendsPluginAPI['serverCompileTask'];
   ensureRoutesConfig: () => Promise<void>;
   runtimeDefineVars: Record<string, string>;
+  entryPoints?: Record<string, string>;
 }
 
 function getServerCompilerPlugin(serverCompiler: ServerCompiler, options: Options) {
@@ -24,15 +25,16 @@ function getServerCompilerPlugin(serverCompiler: ServerCompiler, options: Option
     serverCompileTask,
     ensureRoutesConfig,
     runtimeDefineVars,
+    entryPoints,
   } = options;
-  const entryPoint = getServerEntry(rootDir, serverEntry);
   const { ssg, ssr, server: { format } } = userConfig;
   const isEsm = userConfig?.server?.format === 'esm';
+
   return new ServerCompilerPlugin(
     serverCompiler,
     [
       {
-        entryPoints: { index: entryPoint },
+        entryPoints: entryPoints || { index: getServerEntry(rootDir, serverEntry) },
         outdir: path.join(outputDir, SERVER_OUTPUT_DIR),
         splitting: isEsm,
         format,

packages/ice/src/utils/multipleEntry.ts

@@ -0,0 +1,56 @@
+import matchRoutes from '@ice/runtime/matchRoutes';
+import type { NestedRouteManifest } from '@ice/route-manifest';
+import type { CommandName } from 'build-scripts';
+import { getRoutesDefinition } from '../routes.js';
+import type Generator from '../service/runtimeGenerator.js';
+import type { UserConfig } from '../types/userConfig.js';
+import { escapeRoutePath } from './generateEntry.js';
+
+interface Options {
+  renderRoutes: string[];
+  routesManifest: NestedRouteManifest[];
+  generator: Generator;
+  lazy: boolean;
+}
+
+export const multipleServerEntry = (userConfig: UserConfig, command: CommandName): boolean => {
+  return userConfig?.server?.bundle === 'page' &&
+    userConfig.server.format === 'cjs' &&
+    command === 'build';
+};
+
+export const formatRoutePath = (route: string) => {
+  return escapeRoutePath(route)
+    .replace(/^\//, '').replace(/\//g, '_');
+};
+
+export const formatServerEntry = (route: string) => {
+  return `server.entry.${formatRoutePath(route) || 'index'}.ts`;
+};
+
+export function renderMultiEntry(options: Options) {
+  const { renderRoutes, routesManifest, generator, lazy } = options;
+  renderRoutes.forEach((route) => {
+    const routeId = formatRoutePath(route);
+    generator.addRenderFile(
+      'core/entry.server.ts.ejs',
+      formatServerEntry(route),
+      {
+        routesFile: `./routes.${routeId}`,
+      },
+    );
+    // Generate route file for each route.
+    const matches = matchRoutes(routesManifest, route);
+    const { routeImports, routeDefinition } = getRoutesDefinition({
+      manifest: routesManifest,
+      lazy,
+      matchRoute: (routeItem) => {
+        return matches.some((match) => match.route.id === routeItem.id);
+      },
+    });
+    generator.addRenderFile('core/routes.tsx.ejs', `routes.${routeId}.tsx`, {
+      routeImports,
+      routeDefinition,
+    });
+  });
+}

packages/ice/templates/core/entry.server.ts.ejs

@@ -15,7 +15,7 @@ import type { RenderToPipeableStreamOptions } from 'react-dom/server';
 // @ts-ignore
 import assetsManifest from 'virtual:assets-manifest.json';
 <% if (hydrate) {-%>
-import createRoutes from './routes';
+import createRoutes from '<%- routesFile %>';
 <% } else { -%>
 import routesManifest from './route-manifest.json';
 <% } -%>