Merge pull request #6079 from alibaba/release/next

Release 3.1.4

examples/with-request/src/pages/layout.tsx

@@ -1,6 +1,9 @@
-import { Outlet, defineDataLoader } from 'ice';
+import { Outlet, defineDataLoader, useData, request } from 'ice';
 
 export default () => {
+  const data = useData();
+  console.log(data);
+
   return (
     <div>
       <h1>ICE 3.0 Layout</h1>
@@ -21,12 +24,12 @@ export function pageConfig() {
   };
 }
 
-export const dataLoader = defineDataLoader(() => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve({
-        layout: true,
-      });
-    }, 1 * 100);
-  });
+export const dataLoader = defineDataLoader(async () => {
+  try {
+    const data = await request('/data');
+    return data;
+  } catch (e) {
+    console.error(e);
+    return {};
+  }
 });

packages/ice/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 3.1.4
+
+### Patch Changes
+
+- 4a73cb2a: fix: redirect request for data loader
+- 1ef827b1: fix: external node builtin modules
+- 4671cbe7: fix: resource should not run document render
+- Updated dependencies [4a73cb2a]
+  - @ice/webpack-config@1.0.10
+
 ## 3.1.3
 
 ### Patch Changes

packages/ice/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/app",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "provide scripts and configuration used by web framework ice",
   "type": "module",
   "main": "./esm/index.js",
@@ -41,7 +41,7 @@
     "@ice/bundles": "0.1.6",
     "@ice/route-manifest": "1.1.0",
     "@ice/runtime": "^1.1.4",
-    "@ice/webpack-config": "1.0.9",
+    "@ice/webpack-config": "1.0.10",
     "@swc/helpers": "0.4.14",
     "@types/express": "^4.17.14",
     "address": "^1.1.2",

packages/ice/src/commands/start.ts

@@ -15,8 +15,8 @@ import { IMPORT_META_RENDERER, IMPORT_META_TARGET, RUNTIME_TMP_DIR, WEB, DEFAULT
 import webpackCompiler from '../service/webpackCompiler.js';
 import formatWebpackMessages from '../utils/formatWebpackMessages.js';
 import prepareURLs from '../utils/prepareURLs.js';
-import createRenderMiddleware from '../middlewares/ssr/renderMiddleware.js';
-import createOnDemandMiddleware from '../middlewares/ssr/renderOnDemand.js';
+import createRenderMiddleware from '../middlewares/renderMiddleware.js';
+import createOnDemandMiddleware from '../middlewares/renderOnDemand.js';
 import createMockMiddleware from '../middlewares/mock/createMiddleware.js';
 import getRouterBasename from '../utils/getRouterBasename.js';
 import { getExpandedEnvs } from '../utils/runtimeEnv.js';

packages/ice/src/createService.ts

@@ -109,6 +109,9 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
         declarationType: DeclarationType.NORMAL,
       });
     },
+    getExportList: (registerKey: string) => {
+      return generator.getExportList(registerKey);
+    },
     render: generator.render,
   };
 

packages/ice/src/esbuild/externalNodeBuiltin.ts

@@ -0,0 +1,18 @@
+import { isNodeBuiltin } from 'mlly';
+import type { Plugin, PluginBuild } from 'esbuild';
+
+const externalBuiltinPlugin = (): Plugin => {
+  return {
+    name: 'esbuild-external-node-builtin',
+    setup(build: PluginBuild) {
+      build.onResolve({ filter: /.*/ }, (args) => {
+        const id = args.path;
+        if (isNodeBuiltin(id)) {
+          return { path: id, external: true };
+        }
+      });
+    },
+  };
+};
+
+export default externalBuiltinPlugin;

packages/ice/src/middlewares/ssr/renderMiddleware.ts → packages/ice/src/middlewares/renderMiddleware.ts

@@ -5,13 +5,13 @@ import type { ServerContext, RenderMode } from '@ice/runtime';
 import matchRoutes from '@ice/runtime/matchRoutes';
 import type { TaskConfig } from 'build-scripts';
 import type { Config } from '@ice/webpack-config/types';
-import type { ExtendsPluginAPI } from '../../types/plugin.js';
-import getRouterBasename from '../../utils/getRouterBasename.js';
-import dynamicImport from '../../utils/dynamicImport.js';
-import warnOnHashRouterEnabled from '../../utils/warnOnHashRouterEnabled.js';
-import type { UserConfig } from '../../types/userConfig.js';
-import { logger } from '../../utils/logger.js';
-import type RouteManifest from '../../utils/routeManifest.js';
+import type { ExtendsPluginAPI } from '../types/plugin.js';
+import getRouterBasename from '../utils/getRouterBasename.js';
+import dynamicImport from '../utils/dynamicImport.js';
+import warnOnHashRouterEnabled from '../utils/warnOnHashRouterEnabled.js';
+import type { UserConfig } from '../types/userConfig.js';
+import { logger } from '../utils/logger.js';
+import type RouteManifest from '../utils/routeManifest.js';
 
 const require = createRequire(import.meta.url);
 
@@ -43,8 +43,9 @@ export default function createRenderMiddleware(options: Options): Middleware {
     }
     const basename = getRouterBasename(taskConfig, appConfig);
     const matches = matchRoutes(routes, req.path, basename);
+    const isStaticResources = /\.(js|mjs|map|json|png|jpg|jpeg|gif|svg|eot|woff2|ttf)$/;
     // When documentOnly is true, it means that the app is CSR and it should return the html.
-    if (matches.length || documentOnly) {
+    if (matches.length || documentOnly || !isStaticResources) {
       // Wait for the server compilation to finish
       const { serverEntry, error } = await serverCompileTask.get();
       if (error) {

packages/ice/src/middlewares/ssr/renderOnDemand.ts → packages/ice/src/middlewares/renderOnDemand.ts

@@ -4,12 +4,12 @@ import type { ServerContext, RenderMode } from '@ice/runtime';
 import matchRoutes from '@ice/runtime/matchRoutes';
 import type { TaskConfig } from 'build-scripts';
 import type { Config } from '@ice/webpack-config/types';
-import getRouterBasename from '../../utils/getRouterBasename.js';
-import warnOnHashRouterEnabled from '../../utils/warnOnHashRouterEnabled.js';
-import type { UserConfig } from '../../types/userConfig.js';
-import { logger } from '../../utils/logger.js';
-import type ServerRunner from '../../service/ServerRunner.js';
-import type RouteManifest from '../../utils/routeManifest.js';
+import getRouterBasename from '../utils/getRouterBasename.js';
+import warnOnHashRouterEnabled from '../utils/warnOnHashRouterEnabled.js';
+import type { UserConfig } from '../types/userConfig.js';
+import { logger } from '../utils/logger.js';
+import type ServerRunner from '../service/ServerRunner.js';
+import type RouteManifest from '../utils/routeManifest.js';
 
 interface Options {
   routeManifest: RouteManifest;

packages/ice/src/service/config.ts

@@ -8,6 +8,7 @@ import dynamicImport from '../utils/dynamicImport.js';
 import formatPath from '../utils/formatPath.js';
 import { RUNTIME_TMP_DIR, CACHE_DIR } from '../constant.js';
 import { createLogger } from '../utils/logger.js';
+import externalBuiltinPlugin from '../esbuild/externalNodeBuiltin.js';
 
 type GetOutfile = (entry: string, exportNames: string[]) => string;
 
@@ -45,11 +46,12 @@ class Config {
       const { error } = await serverCompiler({
         entryPoints: [entry],
         format: 'esm',
-        platform: 'node',
-        // Don't add banner for config file, it will cause name conflict when bundled by server entry.
-        banner: undefined,
         outfile,
-        plugins: [removeTopLevelCode(keepExports, transformInclude)],
+        plugins: [
+          removeTopLevelCode(keepExports, transformInclude),
+          // External node builtin modules, such as `fs`, it will be imported by weex document.
+          externalBuiltinPlugin(),
+        ],
         sourcemap: false,
         logLevel: 'silent', // The main server compiler process will log it.
       }, {});

packages/ice/src/service/runtimeGenerator.ts

@@ -231,6 +231,18 @@ export default class Generator {
     this.contentRegistration[registerKey].push(...content);
   };
 
+  public getExportList = (registerKey: string, target?: string) => {
+    const exportList = this.contentRegistration[registerKey] || [];
+
+    if (target) {
+      return exportList.filter(exports => {
+        return !(exports.target && exports.target !== target);
+      });
+    } else {
+      return exportList;
+    }
+  };
+
   private getDeclarations: GetDeclarations = (registerKey, dataKeys) => {
     const exportList = this.contentRegistration[registerKey] || [];
     const {

packages/ice/src/service/webpackCompiler.ts

@@ -46,7 +46,7 @@ async function webpackCompiler(options: {
   // `commandArgs` doesn't guarantee target exists.
   const { target = WEB } = commandArgs;
   const { serverCompiler, serverRunner } = hooksAPI;
-  const { serverCompileTask, dataCache, watch } = context.extendsPluginAPI;
+  const { serverCompileTask, dataCache, watch, generator } = context.extendsPluginAPI;
 
   await applyHook(`before.${command}.run`, {
     urls,
@@ -121,7 +121,16 @@ async function webpackCompiler(options: {
 
     // Add webpack plugin of data-loader.
     if (useDataLoader) {
-      webpackConfig.plugins.push(new DataLoaderPlugin({ serverCompiler, target, rootDir, dataCache, getAllPlugin }));
+      const frameworkExports = generator.getExportList('framework', target);
+
+      webpackConfig.plugins.push(new DataLoaderPlugin({
+        serverCompiler,
+        target,
+        rootDir,
+        dataCache,
+        getAllPlugin,
+        frameworkExports,
+      }));
     }
   }
 

packages/ice/src/types/plugin.ts

@@ -16,6 +16,7 @@ type AddTargetExport = (exportData: TargetDeclarationData) => void;
 type AddEntryCode = (callback: (code: string) => string) => void;
 type RemoveExport = (removeSource: string | string[]) => void;
 type EventName = 'add' | 'addDir' | 'change' | 'unlink' | 'unlinkDir';
+type GetExportList = (key: string, target?: string) => (DeclarationData | TargetDeclarationData)[];
 
 type ServerCompilerBuildOptions = Pick<
   esbuild.BuildOptions,
@@ -142,6 +143,7 @@ export interface ExtendsPluginAPI {
     render: Render;
     addDataLoaderImport: AddDataLoaderImport;
     addEntryCode: AddEntryCode;
+    getExportList: GetExportList;
   };
   watch: {
     addEvent?: (watchEvent: WatchEvent) => void;

packages/ice/src/webpack/DataLoaderPlugin.ts

@@ -4,7 +4,8 @@ import type { Compiler } from 'webpack';
 import webpack from '@ice/bundles/compiled/webpack/index.js';
 import type { Context } from 'build-scripts';
 import type { ServerCompiler, PluginData } from '../types/plugin.js';
-import { IMPORT_META_RENDERER, IMPORT_META_TARGET, RUNTIME_TMP_DIR, RUNTIME_EXPORTS } from '../constant.js';
+import type { DeclarationData } from '../types/generator.js';
+import { IMPORT_META_RENDERER, IMPORT_META_TARGET, RUNTIME_TMP_DIR } from '../constant.js';
 import { getRoutePathsFromCache } from '../utils/getRoutePaths.js';
 
 const pluginName = 'DataLoaderPlugin';
@@ -16,20 +17,23 @@ export default class DataLoaderPlugin {
   private target: string;
   private dataCache: Map<string, string>;
   private getAllPlugin: Context['getAllPlugin'];
+  private frameworkExports: DeclarationData[];
 
   public constructor(options: {
     serverCompiler: ServerCompiler;
     rootDir: string;
     target: string;
     dataCache: Map<string, string>;
     getAllPlugin?: Context['getAllPlugin'];
+    frameworkExports: DeclarationData[];
   }) {
-    const { serverCompiler, rootDir, dataCache, getAllPlugin, target } = options;
+    const { serverCompiler, rootDir, dataCache, getAllPlugin, target, frameworkExports } = options;
     this.serverCompiler = serverCompiler;
     this.rootDir = rootDir;
     this.dataCache = dataCache;
     this.getAllPlugin = getAllPlugin;
     this.target = target;
+    this.frameworkExports = frameworkExports;
   }
 
   public apply(compiler: Compiler) {
@@ -74,7 +78,7 @@ export default class DataLoaderPlugin {
               transformEnv: false,
               enableEnv: true,
               // Redirect imports to @ice/runtime to avoid build plugin side effect code.
-              redirectImports: RUNTIME_EXPORTS,
+              redirectImports: this.frameworkExports,
               isServer: false,
             },
           );

packages/webpack-config/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0.10
+
+### Patch Changes
+
+- 4a73cb2a: fix: redirect named import
+
 ## 1.0.9
 
 ### Patch Changes

packages/webpack-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/webpack-config",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "repository": "alibaba/ice",
   "bugs": "https://github.com/alibaba/ice/issues",
   "homepage": "https://v3.ice.work",

packages/webpack-config/src/unPlugins/redirectImport.ts

@@ -63,13 +63,13 @@ export function parseRedirectData(data: DeclarationData[]): RedirectData {
 }
 
 export function generateImport(matchedImports: MatchedImports): string {
-  let defaultImport = '';
-  let namedImports = [];
   function parseLocalIdentifier(identifier: string, alias: Record<string, string>): string {
     return alias[identifier] ? `${alias[identifier]} as ${identifier}` : identifier;
   }
   const importStatements = Object.keys(matchedImports).map((source) => {
     const importStatements = matchedImports[source];
+    let defaultImport = '';
+    const namedImports = [];
     importStatements.forEach(({ isDefault, identifier, alias }) => {
       if (isDefault) {
         defaultImport = parseLocalIdentifier(identifier, alias);

packages/webpack-config/tests/fixtures/redirectImport/multiple.js

@@ -1 +1 @@
-import { request, store } from 'ice';
+import { request, store, test } from 'ice';

packages/webpack-config/tests/redirectImport.test.ts

@@ -20,7 +20,7 @@ describe('redirect import', () => {
     specifier: 'store',
     source: '@ice/store',
   }, {
-    specifier: 'request',
+    specifier: ['request', 'test'],
     source: 'axios',
   }];
 
@@ -52,7 +52,7 @@ describe('redirect import', () => {
   it('multiple transform', async () => {
     const code = fs.readFileSync(path.join(__dirname, './fixtures/redirectImport/multiple.js'), 'utf-8');
     const transformed = await redirectImport(code, { exportData, targetSource: 'ice' });
-    expect(transformed).toBe('import request from \'axios\';\nimport store from \'@ice/store\';');
+    expect(transformed).toBe('import { request, test } from \'axios\';\nimport store from \'@ice/store\';');
   });
   it('matched transform', async () => {
     const code = fs.readFileSync(path.join(__dirname, './fixtures/redirectImport/matched.js'), 'utf-8');
@@ -64,4 +64,4 @@ describe('redirect import', () => {
     const transformed = await redirectImport(code, { exportData, targetSource: 'ice' });
     expect(transformed).toBe('import { defineDataLoader } from \'ice\';');
   });
-});
+});

tests/integration/with-request.test.ts

@@ -0,0 +1,17 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { expect, test, describe } from 'vitest';
+import { buildFixture } from '../utils/build';
+
+// @ts-ignore
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const example = 'with-request';
+
+describe(`build ${example}`, () => {
+  test('data-loader build file', async () => {
+    await buildFixture(example);
+    const content = fs.readFileSync(path.join(__dirname, `../../examples/${example}/build/js/data-loader.js`), 'utf-8');
+    expect(content.includes('react.element')).toBe(false);
+  });
+});