Merge e5edb831a4 into bb60ab5a04

* feat: support externals field in assets-manifest (#7116)

* chore: version

* chore: update version

.changeset/fresh-roses-poke.md

@@ -0,0 +1,5 @@
+---
+'@ice/app': patch
+---
+
+fix: optimize the route code generate by framework

.changeset/gentle-turtles-fry.md

@@ -0,0 +1,7 @@
+---
+'@ice/webpack-config': patch
+'@ice/rspack-config': patch
+'@ice/shared-config': patch
+---
+
+fix: support remove the manifest info from bundle

packages/ice/src/plugins/task.ts

@@ -28,7 +28,9 @@ const getDefaultTaskConfig = ({ rootDir, command }): Config => {
       'universal-env': envReplacement,
       '@uni/env': envReplacement,
     },
-    assetsManifest: true,
+    assetsManifest: {
+      inject: true,
+    },
     fastRefresh: command === 'start',
     logging: process.env.WEBPACK_LOGGING || defaultLogging,
     minify: command === 'build',

packages/ice/src/routes.ts

@@ -89,39 +89,10 @@ export function getRoutesDefinition(options: GetDefinationOptions) {
       routeImports.push(`import * as ${routeSpecifier} from '${formatPath(componentPath)}';`);
       loadStatement = routeSpecifier;
     }
-    const component = `Component: () => WrapRouteComponent({
-          routeId: '${id}',
-          isLayout: ${layout},
-          routeExports: ${lazy ? 'componentModule' : loadStatement},
-        })`;
-    const loader = `loader: createRouteLoader({
-          routeId: '${id}',
-          requestContext,
-          renderMode,
-          module: ${lazy ? 'componentModule' : loadStatement},
-        })`;
-    const routeProperties: string[] = [
-      `path: '${formatPath(routePath || '')}',`,
-      `async lazy() {
-      ${lazy ? `const componentModule = await ${loadStatement}` : ''};
-      return {
-        ${lazy ? '...componentModule' : `...${loadStatement}`},
-        ${component},
-        ${loader},
-      };
-    },`,
-      // Empty errorElement to avoid default ui provided by react-router.
-      'errorElement: <RouteErrorComponent />,',
-      `componentName: '${componentName}',`,
-      `index: ${index},`,
-      `id: '${id}',`,
-      'exact: true,',
-      `exports: ${JSON.stringify(exports)},`,
-    ].filter(Boolean);
-
-    if (layout) {
-      routeProperties.push('layout: true,');
-    }
+    // Keep the string in a single line for the code style.
+    const lazyStatment = `lazyLoadComponent(${lazy ? 'componentModule' : loadStatement}, { routeId: '${id}', ${layout ? `layout: ${layout}, ` : ''}renderMode, requestContext })`;
+    const routeProperties: string[] = [`...getRouteProps({ path: '${formatPath(routePath || '')}', componentName: '${componentName}', ${index ? `index: ${index}, ` : ''}id: '${id}',${layout ? `layout: ${layout}, ` : ''}exports: ${JSON.stringify(exports)} }),`];
+    routeProperties.push(`async lazy() {${lazy ? `const componentModule = await ${loadStatement}` : ''}; return ${lazyStatment};},`);
     if (children) {
       const res = getRoutesDefinition({
         manifest: children,

packages/ice/templates/core/routes.tsx.ejs

@@ -1,5 +1,53 @@
+import * as React from 'react';
 import { createRouteLoader, WrapRouteComponent, RouteErrorComponent } from '@ice/runtime';
 import type { CreateRoutes } from '@ice/runtime';
+import type { ComponentModule, RenderMode, RequestContext } from '@ice/runtime/types';
+
+interface RouteOptions {
+  routeId: string;
+  layout?: boolean;
+  renderMode: RenderMode;
+  requestContext?: RequestContext;
+}
+function lazyLoadComponent(componentModule: ComponentModule, options: RouteOptions) {
+  const { routeId, layout, renderMode, requestContext } = options;
+  return {
+    ...componentModule,
+    Component: () => WrapRouteComponent({
+      routeId: routeId,
+      isLayout: Boolean(layout),
+      routeExports: componentModule,
+    }),
+    loader: createRouteLoader({
+      routeId: options.routeId,
+      requestContext,
+      renderMode,
+      module: componentModule,
+    }),
+  };
+}
+interface GetRoutePropsOptions {
+  path: string;
+  componentName: string;
+  index?: any;
+  id: string;
+  exports: string[];
+  layout?: boolean;
+}
+function getRouteProps(options: GetRoutePropsOptions) {
+  const { path, componentName, index, id, exports, layout } = options;
+  return {
+    path,
+    componentName,
+    errorElement: <RouteErrorComponent />,
+    index,
+    id,
+    exports,
+    layout: Boolean(layout),
+    exact: true,
+  };
+}
+
 <%- routeImports.length ? routeImports.join('\n') + '\n\n' : ''; -%>
 const createRoutes: CreateRoutes = ({
   requestContext,

packages/plugin-externals/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ice/plugin-externals
 
+## 1.0.1
+
+### Patch Changes
+
+- 4569200ca: fix: support externals field in assets-manifest
+
 ## 1.0.0
 
 - Initial release

packages/plugin-externals/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/plugin-externals",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "plugin to make externals much easier in ice.js",
   "files": [
     "esm",

packages/plugin-externals/src/webpack-plugin.ts

@@ -26,7 +26,9 @@ export default class InjectExternalScriptsWebpackPlugin {
           if (assetsManifest) {
             const json = JSON.parse(assetsManifest.source().toString());
             delete compilation.assets[ASSET_MANIFEST_JSON_NAME];
-            json.entries.main.unshift(...this.options.externals);
+            // Ensure externals array exists and add new externals at the beginning.
+            json.externals ||= [];
+            json.externals.unshift(...this.options.externals);
             compilation.emitAsset(
               ASSET_MANIFEST_JSON_NAME,
               new webpack.sources.RawSource(JSON.stringify(json)),

packages/plugin-i18n/package.json

@@ -56,7 +56,7 @@
     "webpack-dev-server": "4.15.0"
   },
   "peerDependencies": {
-    "@ice/app": "^3.6.4",
+    "@ice/app": "^3.6.3",
     "@ice/runtime": "^1.5.4"
   },
   "publishConfig": {

packages/plugin-miniapp/package.json

@@ -50,7 +50,7 @@
     "sax": "^1.2.4"
   },
   "devDependencies": {
-    "@ice/app": "^3.6.4",
+    "@ice/app": "^3.6.3",
     "@ice/runtime": "^1.5.4",
     "webpack": "^5.88.0"
   },

packages/plugin-stream-error/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @ice/plugin-stream-error
 
+## 1.0.3
+
+- feat: empty root element when stream error
+
 ## 1.0.0
 
 ### Major Changes

packages/plugin-stream-error/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/plugin-stream-error",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "license": "MIT",
   "type": "module",

packages/plugin-stream-error/src/index.tsx

@@ -2,13 +2,16 @@ import type { Plugin } from '@ice/app/types';
 
 interface PluginOptions {
   activeInDev?: boolean;
+  rootId?: string;
 }
 
 const PLUGIN_NAME = '@ice/plugin-stream-error';
-const plugin: Plugin<PluginOptions> = (options = {}) => ({
+const plugin: Plugin<PluginOptions> = (options = {
+  rootId: 'root',
+}) => ({
   name: PLUGIN_NAME,
   setup: ({ generator, context }) => {
-    const { activeInDev } = options;
+    const { activeInDev, rootId } = options;
     const { userConfig } = context;
     if (userConfig.ssr) {
       generator.addEntryCode((originalCode) => {
@@ -18,6 +21,11 @@ if (import.meta.renderer === 'client') {
     // _$ServerTimePoints will returned at the end of last stream,
     // if the value is undefined, try to re-render app with CSR.
     if (${activeInDev ? '' : 'process.env.NODE_ENV === \'production\' && '}!window._$ServerTimePoints && window.__ICE_APP_CONTEXT__.renderMode === 'SSR') {
+      const root = document.getElementById('${rootId}');
+      if (root) {
+        root.innerHTML = '';
+      }
+      window.__ICE_APP_CONTEXT__.renderMode = 'CSR';
       render({ hydrate: false });
     }
   });

packages/rspack-config/src/index.ts

@@ -149,7 +149,7 @@ const getConfig: GetConfig = async (options) => {
     module: true,
   }, minimizerOptions);
   const builtinFeatures: BuiltinFeatures = {
-    assetsManifest,
+    assetsManifest: Boolean(assetsManifest),
   };
   let splitChunksStrategy = null;
   // Use builtin splitChunks strategy by default.

packages/runtime/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ice/runtime
 
+## 1.5.5
+
+### Patch Changes
+
+- 4569200ca: fix: support externals field in assets-manifest
+
 ## 1.5.4
 
 ### Patch Changes

packages/runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/runtime",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "Runtime module for ice.js",
   "type": "module",
   "types": "./esm/index.d.ts",

packages/runtime/src/Document.tsx

@@ -129,6 +129,9 @@ export const Scripts: ScriptsType = (props: ScriptsProps) => {
   return (
     <>
       <Data ScriptElement={ScriptElement} />
+      {assetsManifest.externals?.map(external => (
+        <ScriptElement key={external} src={external} {...rest} data-external-script />
+      ))}
       {
         routeScripts.map(routeScriptProps => {
           return <ScriptElement key={routeScriptProps.src} {...rest} {...routeScriptProps} data-route-script />;

packages/runtime/src/types.ts

@@ -205,6 +205,7 @@ export interface RouteModules {
 }
 
 export interface AssetsManifest {
+  externals?: string[];
   dataLoader?: string;
   publicPath: string;
   entries: {

packages/shared-config/src/types.ts

@@ -179,7 +179,7 @@ export interface Config {
 
   performance?: Performance;
 
-  assetsManifest?: boolean;
+  assetsManifest?: boolean | { inject: boolean };
 
   concatenateModules?: boolean;
 

packages/webpack-config/src/index.ts

@@ -298,6 +298,7 @@ export function getWebpackConfig(options: GetWebpackConfigOptions): Configuratio
       assetsManifest && new AssetsManifestPlugin({
         fileName: 'assets-manifest.json',
         outputDir: path.join(rootDir, runtimeTmpDir),
+        inject: typeof assetsManifest === 'boolean' ? false : assetsManifest?.inject,
       }),
       analyzer && new BundleAnalyzerPlugin(),
       tsCheckerOptions && new ForkTsCheckerPlugin(tsCheckerOptions),

packages/webpack-config/src/webpackPlugins/AssetsManifestPlugin.ts

@@ -21,13 +21,22 @@ function filterAssets(assets: Assets): string[] {
   );
 }
 
+interface PluginOptions {
+  fileName?: string;
+  outputDir?: string;
+  // Inject assets manifest to entry file.
+  inject?: boolean;
+}
+
 export default class AssetsManifestPlugin {
   private fileName: string;
   private outputDir: string;
+  private inject: boolean;
 
-  public constructor(options) {
+  public constructor(options: PluginOptions) {
     this.fileName = options.fileName || 'assets-manifest.json';
     this.outputDir = options.outputDir || './';
+    this.inject = options.inject;
   }
 
   public createAssets(compilation: Compilation) {
@@ -77,12 +86,14 @@ export default class AssetsManifestPlugin {
     // Emit asset manifest for server compile.
     compilation.emitAsset(this.fileName, new webpack.sources.RawSource(output));
     // Inject assets manifest to entry file.
-    entryFiles.forEach((entryFile) => {
-      compilation.assets[entryFile] = new webpack.sources.ConcatSource(
-        new webpack.sources.RawSource(String(`window.__ICE_ASSETS_MANIFEST__=${output};\n`)),
-        compilation.assets[entryFile],
-      );
-    });
+    if (this.inject) {
+      entryFiles.forEach((entryFile) => {
+        compilation.assets[entryFile] = new webpack.sources.ConcatSource(
+          new webpack.sources.RawSource(String(`window.__ICE_ASSETS_MANIFEST__=${output};\n`)),
+          compilation.assets[entryFile],
+        );
+      });
+    }
   }
 
   public apply(compiler: Compiler) {

pnpm-lock.yaml

@@ -2157,7 +2157,7 @@ importers:
         version: 1.2.4
     devDependencies:
       '@ice/app':
-        specifier: ^3.6.4
+        specifier: ^3.6.3
         version: link:../ice
       '@ice/runtime':
         specifier: ^1.5.4