Merge pull request #6749 from alibaba/release/next

Release 3.4.2

examples/with-antd5/ice.config.mts

@@ -2,4 +2,7 @@ import { defineConfig } from '@ice/app';
 
 export default defineConfig(() => ({
   ssg: false,
+  optimization: {
+    optimizePackageImport: true,
+  }
 }));

package.json

@@ -71,7 +71,6 @@
   "packageManager": "[email protected]",
   "pnpm": {
     "patchedDependencies": {
-      "[email protected]": "patches/[email protected]",
       "@rspack/[email protected]": "patches/@[email protected]"
     }
   }

packages/bundles/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.2.2
+
+### Patch Changes
+
+- f7dd9fc5: fix: bump unplugin verison to 1.6.0
+- 45c61db8: fix: update binding version for optimize imports
+
 ## 0.2.1
 
 ### Patch Changes

packages/bundles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/bundles",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "author": "ICE",
   "description": "Basic dependencies for ice.",
@@ -45,7 +45,7 @@
     "zod": "^3.22.3",
     "zod-validation-error": "1.2.0",
     "terminal-link": "^2.1.1",
-    "@ice/pack-binding": "0.0.6",
+    "@ice/pack-binding": "0.0.8",
     "mime-types": "2.1.35"
   },
   "devDependencies": {
@@ -85,7 +85,7 @@
     "webpack": "5.88.2",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-dev-server": "4.15.0",
-    "unplugin": "1.5.1",
+    "unplugin": "1.6.0",
     "bonjour-service": "^1.0.13",
     "colorette": "^2.0.10",
     "compression": "^1.7.4",

packages/ice/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 3.4.2
+
+### Patch Changes
+
+- 45c61db8: feat: support optimize package import
+- c06cb978: fix: on demand server cache
+- 41be253a: fix: resolve path of regenerator-runtime/runtime.js
+- Updated dependencies [167c8fec]
+- Updated dependencies [45c61db8]
+- Updated dependencies [f7dd9fc5]
+- Updated dependencies [3727f80d]
+- Updated dependencies [45c61db8]
+  - @ice/shared-config@1.2.2
+  - @ice/rspack-config@1.1.2
+  - @ice/bundles@0.2.2
+  - @ice/runtime@1.3.6
+  - @ice/webpack-config@1.1.9
+
 ## 3.4.1
 
 ### Patch Changes

packages/ice/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/app",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "description": "provide scripts and configuration used by web framework ice",
   "type": "module",
   "main": "./esm/index.js",
@@ -47,12 +47,12 @@
   "bugs": "https://github.com/alibaba/ice/issues",
   "homepage": "https://v3.ice.work",
   "dependencies": {
-    "@ice/bundles": "0.2.1",
+    "@ice/bundles": "0.2.2",
     "@ice/route-manifest": "1.2.2",
-    "@ice/runtime": "^1.3.4",
-    "@ice/shared-config": "1.2.1",
-    "@ice/webpack-config": "1.1.8",
-    "@ice/rspack-config": "1.1.1",
+    "@ice/runtime": "^1.3.6",
+    "@ice/shared-config": "1.2.2",
+    "@ice/webpack-config": "1.1.9",
+    "@ice/rspack-config": "1.1.2",
     "@swc/helpers": "0.5.1",
     "@types/express": "^4.17.14",
     "address": "^1.1.2",
@@ -95,7 +95,7 @@
     "react": "^18.2.0",
     "react-router": "6.14.2",
     "sass": "^1.50.0",
-    "unplugin": "^1.5.1",
+    "unplugin": "^1.6.0",
     "webpack": "^5.88.0",
     "webpack-dev-server": "4.15.0",
     "@rspack/core": "0.4.5",

packages/ice/src/config.ts

@@ -352,6 +352,83 @@ const userConfig = [
   {
     name: 'optimization',
     validation: 'object',
+    setConfig: (config: Config, optimization: UserConfig['optimization'], context: UserConfigContext) => {
+      const { commandArgs } = context;
+      if (optimization?.optimizePackageImport) {
+        if (commandArgs.speedup) {
+          config.optimizePackageImports = [
+            ...new Set([
+              ...(Array.isArray(optimization?.optimizePackageImport) ? optimization?.optimizePackageImport : []),
+              // Buit-in packages is modified based on
+              // https://github.com/vercel/next.js/blob/7b73f1137b21c7b1fb1612c3389caaaadd18da65/packages/next/src/server/config.ts#L827
+              '@alifd/next',
+              '@ali/uni-api',
+              'lucide-react',
+              'date-fns',
+              'lodash-es',
+              'ramda',
+              'antd',
+              'react-bootstrap',
+              'ahooks',
+              '@ant-design/icons',
+              '@headlessui/react',
+              '@headlessui-float/react',
+              '@heroicons/react/20/solid',
+              '@heroicons/react/24/solid',
+              '@heroicons/react/24/outline',
+              '@visx/visx',
+              '@tremor/react',
+              'rxjs',
+              '@mui/material',
+              '@mui/icons-material',
+              'recharts',
+              'react-use',
+              '@material-ui/core',
+              '@material-ui/icons',
+              '@tabler/icons-react',
+              'mui-core',
+              'react-icons/ai',
+              'react-icons/bi',
+              'react-icons/bs',
+              'react-icons/cg',
+              'react-icons/ci',
+              'react-icons/di',
+              'react-icons/fa',
+              'react-icons/fa6',
+              'react-icons/fc',
+              'react-icons/fi',
+              'react-icons/gi',
+              'react-icons/go',
+              'react-icons/gr',
+              'react-icons/hi',
+              'react-icons/hi2',
+              'react-icons/im',
+              'react-icons/io',
+              'react-icons/io5',
+              'react-icons/lia',
+              'react-icons/lib',
+              'react-icons/lu',
+              'react-icons/md',
+              'react-icons/pi',
+              'react-icons/ri',
+              'react-icons/rx',
+              'react-icons/si',
+              'react-icons/sl',
+              'react-icons/tb',
+              'react-icons/tfi',
+              'react-icons/ti',
+              'react-icons/vsc',
+              'react-icons/wi',
+            ]),
+          ];
+        } else {
+          logger.warn(`
+            optimizePackageImport only works in speedup mode,
+            try to run \`npm ${commandArgs.command === 'start' ? 'start' : 'run build'} -- --speedup\``,
+          );
+        }
+      }
+    },
   },
   {
     name: 'mock',

packages/ice/src/createService.ts

@@ -167,8 +167,6 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
     generatorAPI.addExport(exports);
   });
   const routeManifest = new RouteManifest();
-  // Merge task config with default config, so developer should not care about the config built-in of framework.
-  const defaultTaskConfig = getDefaultTaskConfig({ rootDir, command });
   const ctx = new Context<Config, ExtendsPluginAPI>({
     rootDir,
     command,
@@ -194,6 +192,8 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
       createLogger,
       // Override registerTask to merge default config.
       registerTask: (target: string, config: Partial<Config>) => {
+        // Merge task config with default config, so developer should not care about the config built-in of framework.
+        const defaultTaskConfig = getDefaultTaskConfig({ rootDir, command });
         return ctx.registerTask(target, mergeConfig(defaultTaskConfig, config));
       },
     },
@@ -332,7 +332,8 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
       getRoutesFile: () => routeManifest.getRoutesFile(),
     });
     addWatchEvent([
-      /src\/?[\w*-:.$]+$/,
+      // Files in .ice directory will update when routes changed.
+      /(src|.ice)\/?[\w*-:.$]+$/,
       async (eventName: string, filePath: string) => {
         if (eventName === 'change' || eventName === 'add') {
           serverRunner.fileChanged(filePath);

packages/ice/src/plugins/task.ts

@@ -9,6 +9,7 @@ const getDefaultTaskConfig = ({ rootDir, command }): Config => {
   const defaultLogging = command === 'start' ? 'summary' : 'summary assets';
 
   const envReplacement = path.join(rootDir, RUNTIME_TMP_DIR, 'env.ts');
+  const regeneratorRuntimePath = require.resolve('regenerator-runtime');
   return {
     mode: command === 'start' ? 'development' : 'production',
     sourceMap: command === 'start' ? 'cheap-module-source-map' : false,
@@ -21,7 +22,8 @@ const getDefaultTaskConfig = ({ rootDir, command }): Config => {
       'webpack/hot': '@ice/bundles/compiled/webpack/hot',
       // Get absolute path of `regenerator-runtime`, `@swc/helpers`
       // so it's unnecessary to add it to project dependencies.
-      'regenerator-runtime': require.resolve('regenerator-runtime'),
+      'regenerator-runtime/runtime.js': regeneratorRuntimePath,
+      'regenerator-runtime': regeneratorRuntimePath,
       '@swc/helpers': path.dirname(require.resolve('@swc/helpers/package.json')),
       'universal-env': envReplacement,
       '@uni/env': envReplacement,

packages/ice/src/service/Runner.ts

@@ -81,6 +81,9 @@ class Runner {
 
   async run(id: string) {
     const filePath = path.isAbsolute(id) ? id : path.join(this.rootDir, id);
+    // Nevery cache the entry, otherwise it will always return the same exports,
+    // even if the file imported has been changed.
+    this.moduleCache.delete(filePath);
     return await this.cachedRequest(filePath, []);
   }
 

packages/ice/src/types/userConfig.ts

@@ -22,6 +22,12 @@ interface Optimization {
    * Remove react-router dependencies by force, even if route count is greater than 1.
    */
   disableRouter?: boolean;
+  /**
+   * Automatically the apply modularize imports optimization,
+   * it will remove unused code of package when it is a barrel file.
+   * Note: It is only supported in speedup mode.
+   */
+  optimizePackageImport?: string[] | boolean;
 }
 
 interface MinifyOptions {

packages/ice/tests/defineJestConfig.test.ts

@@ -11,6 +11,7 @@ describe('defineJestConfig', () => {
     '^ice/types',
     '^@/(.*)',
     '^webpack/hot',
+    '^regenerator-runtime/runtime.js',
     '^regenerator-runtime',
     '^@swc/helpers/(.*)',
     '^universal-env',

packages/ice/tests/defineVitestConfig.test.ts

@@ -11,6 +11,7 @@ describe('defineVitestConfig', () => {
     'ice/types',
     '@',
     'webpack/hot',
+    'regenerator-runtime/runtime.js',
     'regenerator-runtime',
     '@swc/helpers',
     'universal-env',

packages/plugin-i18n/package.json

@@ -56,8 +56,8 @@
     "webpack-dev-server": "4.15.0"
   },
   "peerDependencies": {
-    "@ice/app": "^3.4.1",
-    "@ice/runtime": "^1.3.4"
+    "@ice/app": "^3.4.2",
+    "@ice/runtime": "^1.3.6"
   },
   "publishConfig": {
     "access": "public"

packages/plugin-rax-compat/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.3.0
+
+### Minor Changes
+
+- 15e8200a: Refactor plugin and fix some issues:
+
+  - The inlineStyleFilter doesnot work for server-side style process.
+  - The inlineStyleFilter doesnot work for style file except vanilla css.
+  - Supports sass-loader now.
+  - Supports array type style in createElement.
+
+### Patch Changes
+
+- Updated dependencies [f7dd9fc5]
+- Updated dependencies [15e8200a]
+- Updated dependencies [45c61db8]
+  - @ice/bundles@0.2.2
+  - [email protected]
+
 ## 0.2.10
 
 ### Patch Changes

packages/plugin-rax-compat/README.md

@@ -17,7 +17,60 @@ export default defineConfig(() => ({
 
 ## Options
 
-- `inlineStyle`: 
-  - default to `false`.
-  - Enable stylesheet loader to import CSS files.
-
+### `inlineStyle`
+
+- Default: `false`.
+- Enable stylesheet loader to import CSS files.
+
+### `cssModule`
+
+- Default: `true`
+- When `inlineStyle` enabled and `cssModule` disabled, process CSS Module files to inline included styles(not recommended).
+
+### `legacy`
+
+- Default: `false`
+- Enable legacy way to import rax as namespace, like `v0.6`:
+
+```typescript
+import Rax from 'rax';
+
+Rax.createContext();
+```
+
+## 说明
+
+这个插件将会处理这些兼容逻辑：
+
+- 类型定义，Rax 中的类型定义来自于 React 16.8 前，与 React 18 的类型定义存在一些差异。
+  - 这个插件会新增一个对 Rax namespace 进行声明的 .d.ts 文件，内部使用 React 类型定义来进行声明。
+
+- 别名，将组成 rax 核心逻辑的 rax- 包，如 rax-children 等，映射到 rax-compat 的内部实现。
+
+  - 同时，在启用 legacy 模式时，会将 rax 映射到 rax-compat-legacy-exports.ts，此文件支持了 Rax.createContext 这样的使用方式（Rax v0.6.x）。
+
+- JSX，插件内部将基于源码类型来调整 swc 的编译配置。
+
+  - 在源码中使用了 `@jsx createElement` annotation 时，将设置 jsx runtime 为 classic。
+  - 在源码导入了 rax 包时，将设置 importSource 为 rax-compat/runtime（与 React 18 保持一致）。
+
+- 样式，在启用 inlineStyle 时，插件内部将额外处理行内样式逻辑。
+
+  - 首先，JSXClassNameTransformer 会将源码中的 `<div className="header" />` 的写法转换为 `<div style={styleSheet.header} />`。
+        - 注意，只有项目源码内的代码才会被转换。
+
+        - 注意，`<div className={'xxx'} />` 这样的写法不会被转换。
+            
+        - 注意，`import './x.module.css'` 这样的写法不会被转换。
+
+  - 接着，在 ClientSide，插件会覆盖原本的 Webpack Ruleset：
+
+    - 对于命中了 inlineStyle 的资源文件，会使用 stylesheet-loader 进行处理为 styleSheet 对象（非 css 文件还会先交由预处理器编译）。其它文件会保持原本的处理逻辑，即处理到额外的 CSS 文件中。
+    - 注意，目前在 --speedup 下此逻辑无法生效。
+    - 注意，如果禁用了 cssModule ，那么 .module.css(less/...) 文件也会被交由 stylesheet-loader 处理。
+
+- 在 ServerSide，对命中了 inlineStyle 的资源文件，会使用 esbuild 进行处理为 styleSheet 对象(文件的类型会被改变为 JS 文件)。
+
+关于行内样式的额外说明：
+
+- 只有项目源码中使用了 `className="xxx"` 的写法，才会被转换为 `style={styleSheet.xxx}` 的写法，因此 CSS Module 使用的 `className={styles.xxx}` 这种写法也不会被转换。另外，来自 node_modules 的代码不会被转换。