feat(deps): upgrade Rsbuild v0.4.0

packages/builder/builder-webpack-provider/package.json

@@ -96,7 +96,7 @@
     "@modern-js/types": "workspace:*",
     "@modern-js/utils": "workspace:*",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
-    "@rsbuild/babel-preset": "0.3.7",
+    "@rsbuild/babel-preset": "0.4.0",
     "@swc/helpers": "0.5.3",
     "babel-plugin-import": "1.13.5",
     "babel-plugin-styled-components": "1.13.3",

packages/builder/builder/package.json

@@ -62,7 +62,7 @@
   "dependencies": {
     "@modern-js/builder-shared": "workspace:*",
     "@modern-js/utils": "workspace:*",
-    "@rsbuild/monorepo-utils": "0.3.7",
+    "@rsbuild/monorepo-utils": "0.4.0",
     "@svgr/webpack": "8.1.0",
     "@swc/helpers": "0.5.3",
     "deepmerge": "^4.3.1",

packages/builder/uni-builder/package.json

@@ -35,23 +35,23 @@
     "@modern-js/server": "workspace:*",
     "@modern-js/prod-server": "workspace:*",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
-    "@rsbuild/babel-preset": "0.3.7",
-    "@rsbuild/core": "0.3.7",
-    "@rsbuild/plugin-assets-retry": "0.3.7",
-    "@rsbuild/plugin-babel": "0.3.7",
-    "@rsbuild/plugin-check-syntax": "0.3.7",
-    "@rsbuild/plugin-css-minimizer": "0.3.7",
-    "@rsbuild/plugin-pug": "0.3.7",
-    "@rsbuild/plugin-react": "0.3.7",
-    "@rsbuild/plugin-rem": "0.3.7",
-    "@rsbuild/plugin-source-build": "0.3.7",
-    "@rsbuild/plugin-styled-components": "0.3.7",
-    "@rsbuild/plugin-svgr": "0.3.7",
-    "@rsbuild/plugin-type-check": "0.3.7",
-    "@rsbuild/plugin-toml": "0.3.7",
-    "@rsbuild/plugin-yaml": "0.3.7",
-    "@rsbuild/shared": "0.3.7",
-    "@rsbuild/webpack": "0.3.7",
+    "@rsbuild/babel-preset": "0.4.0",
+    "@rsbuild/core": "0.4.0",
+    "@rsbuild/plugin-assets-retry": "0.4.0",
+    "@rsbuild/plugin-babel": "0.4.0",
+    "@rsbuild/plugin-check-syntax": "0.4.0",
+    "@rsbuild/plugin-css-minimizer": "0.4.0",
+    "@rsbuild/plugin-pug": "0.4.0",
+    "@rsbuild/plugin-react": "0.4.0",
+    "@rsbuild/plugin-rem": "0.4.0",
+    "@rsbuild/plugin-source-build": "0.4.0",
+    "@rsbuild/plugin-styled-components": "0.4.0",
+    "@rsbuild/plugin-svgr": "0.4.0",
+    "@rsbuild/plugin-type-check": "0.4.0",
+    "@rsbuild/plugin-toml": "0.4.0",
+    "@rsbuild/plugin-yaml": "0.4.0",
+    "@rsbuild/shared": "0.4.0",
+    "@rsbuild/webpack": "0.4.0",
     "@swc/helpers": "0.5.3",
     "babel-loader": "9.1.3",
     "babel-plugin-import": "1.13.5",
@@ -62,6 +62,7 @@
     "html-webpack-plugin": "5.5.3",
     "lodash": "^4.17.21",
     "postcss-custom-properties": "13.1.5",
+    "postcss-flexbugs-fixes": "5.0.2",
     "postcss-font-variant": "5.0.0",
     "postcss-initial": "4.0.1",
     "postcss-media-minmax": "5.0.0",
@@ -76,7 +77,7 @@
   },
   "devDependencies": {
     "@modern-js/builder-plugin-node-polyfill": "workspace:*",
-    "@rsbuild/plugin-swc": "0.3.7",
+    "@rsbuild/plugin-swc": "0.4.0",
     "@scripts/build": "workspace:*",
     "@scripts/vitest-config": "workspace:*",
     "@types/lodash": "^4.14.202",

packages/builder/uni-builder/src/rspack/plugins/babel-post.ts

@@ -17,10 +17,14 @@ export const pluginBabelPost = (): RsbuildPlugin => ({
           .rule(CHAIN_ID.RULE.JS)
           .use(CHAIN_ID.USE.BABEL)
           .get('options');
+        const config = api.getNormalizedConfig();
 
         if (
           babelLoaderOptions &&
-          lodash.isEqual(getDefaultBabelOptions(), babelLoaderOptions)
+          lodash.isEqual(
+            getDefaultBabelOptions(config.source.decorators),
+            babelLoaderOptions,
+          )
         ) {
           chain.module.rule(CHAIN_ID.RULE.JS).uses.delete(CHAIN_ID.USE.BABEL);
         }

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

@@ -33,6 +33,8 @@ import { pluginCssMinimizer } from '@rsbuild/plugin-css-minimizer';
 import { pluginPostcssLegacy } from './plugins/postcssLegacy';
 import { pluginDevtool } from './plugins/devtools';
 import { pluginEmitRouteFile } from './plugins/emitRouteFile';
+import { pluginAntd } from './plugins/antd';
+import { pluginArco } from './plugins/arco';
 
 const GLOBAL_CSS_REGEX = /\.global\.\w+$/;
 
@@ -117,6 +119,8 @@ export async function parseCommonConfig(
     plugins: [...plugins] = [],
     performance: { ...performanceConfig } = {},
     output: {
+      disableFilenameHash,
+      enableLatestDecorators,
       cssModuleLocalIdentName,
       enableInlineScripts,
       disableCssExtract,
@@ -167,7 +171,13 @@ export async function parseCommonConfig(
     security: securityConfig,
   };
 
-  const { dev = {}, html = {}, output = {} } = rsbuildConfig;
+  const { dev = {}, html = {}, output = {}, source = {} } = rsbuildConfig;
+
+  if (enableLatestDecorators) {
+    source.decorators = {
+      version: '2022-03',
+    };
+  }
 
   if (cssModuleLocalIdentName) {
     output.cssModules ||= {};
@@ -219,6 +229,10 @@ export async function parseCommonConfig(
     output.inlineStyles = enableInlineStyles;
   }
 
+  if (disableFilenameHash !== undefined) {
+    output.filenameHash = !disableFilenameHash;
+  }
+
   const extraConfig: RsbuildConfig = {};
   extraConfig.html ||= {};
 
@@ -330,6 +344,8 @@ export async function parseCommonConfig(
     pluginEmitRouteFile(),
     pluginToml(),
     pluginYaml(),
+    pluginAntd(),
+    pluginArco(),
   ];
 
   if (checkSyntax) {

packages/builder/uni-builder/src/shared/plugins/antd.ts

@@ -0,0 +1,48 @@
+import { isServerTarget, type RsbuildPlugin } from '@rsbuild/shared';
+
+const getAntdMajorVersion = (appDirectory: string) => {
+  try {
+    const pkgJsonPath = require.resolve('antd/package.json', {
+      paths: [appDirectory],
+    });
+    const { version } = require(pkgJsonPath);
+    return Number(version.split('.')[0]);
+  } catch (err) {
+    return null;
+  }
+};
+
+export const pluginAntd = (): RsbuildPlugin => ({
+  name: 'uni-builder:antd',
+  setup(api) {
+    api.modifyRsbuildConfig(rsbuildConfig => {
+      rsbuildConfig.source ??= {};
+
+      if (
+        rsbuildConfig.source.transformImport === false ||
+        rsbuildConfig.source.transformImport?.some(
+          item => item.libraryName === 'antd',
+        )
+      ) {
+        return;
+      }
+
+      const antdMajorVersion = getAntdMajorVersion(api.context.rootPath);
+      // antd >= v5 no longer need babel-plugin-import
+      // see: https://ant.design/docs/react/migration-v5#remove-babel-plugin-import
+      if (antdMajorVersion && antdMajorVersion < 5) {
+        rsbuildConfig.source ??= {};
+        rsbuildConfig.source.transformImport = [
+          ...(rsbuildConfig.source.transformImport || []),
+          {
+            libraryName: 'antd',
+            libraryDirectory: isServerTarget(api.context.targets)
+              ? 'lib'
+              : 'es',
+            style: true,
+          },
+        ];
+      }
+    });
+  },
+});

packages/builder/uni-builder/src/shared/plugins/arco.ts

@@ -0,0 +1,44 @@
+import { isServerTarget, type RsbuildPlugin } from '@rsbuild/shared';
+import { isPackageInstalled } from '@modern-js/utils';
+
+export const pluginArco = (): RsbuildPlugin => ({
+  name: 'uni-builder:arco',
+
+  setup(api) {
+    const ARCO_NAME = '@arco-design/web-react';
+    const ARCO_ICON = `${ARCO_NAME}/icon`;
+
+    api.modifyRsbuildConfig(rsbuildConfig => {
+      const { transformImport = [] } = rsbuildConfig.source || {};
+
+      if (
+        transformImport === false ||
+        !isPackageInstalled(ARCO_NAME, api.context.rootPath)
+      ) {
+        return;
+      }
+
+      const isUseSSR = isServerTarget(api.context.targets);
+
+      if (!transformImport?.some(item => item.libraryName === ARCO_NAME)) {
+        transformImport.push({
+          libraryName: ARCO_NAME,
+          libraryDirectory: isUseSSR ? 'lib' : 'es',
+          camelToDashComponentName: false,
+          style: true,
+        });
+      }
+
+      if (!transformImport?.some(item => item.libraryName === ARCO_ICON)) {
+        transformImport.push({
+          libraryName: ARCO_ICON,
+          libraryDirectory: isUseSSR ? 'react-icon-cjs' : 'react-icon',
+          camelToDashComponentName: false,
+        });
+      }
+
+      rsbuildConfig.source ||= {};
+      rsbuildConfig.source.transformImport = transformImport;
+    });
+  },
+});

packages/builder/uni-builder/src/shared/plugins/postcssLegacy.ts

@@ -19,6 +19,7 @@ export const pluginPostcssLegacy = (
       const enableCssMinify = !enableExtractCSS && isProd;
 
       const plugins = [
+        require('postcss-flexbugs-fixes'),
         !cssSupport.customProperties && require('postcss-custom-properties'),
         !cssSupport.initial && require('postcss-initial'),
         !cssSupport.pageBreak && require('postcss-page-break'),

packages/builder/uni-builder/src/shared/plugins/splitChunk.ts

@@ -1,9 +1,5 @@
-import {
-  isPlainObject,
-  isPackageInstalled,
-  createCacheGroups,
-  type SplitChunks,
-} from '@rsbuild/shared';
+import { createCacheGroups, type SplitChunks } from '@rsbuild/shared';
+import { isPlainObject, isPackageInstalled } from '@modern-js/utils';
 import type { RsbuildPlugin } from '@rsbuild/core';
 
 export const pluginSplitChunks = (): RsbuildPlugin => ({

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

@@ -151,6 +151,14 @@ export type UniBuilderExtraConfig = {
     resolveExtensionPrefix?: string | Partial<Record<RsbuildTarget, string>>;
   };
   output?: {
+    /**
+     * @deprecated use `output.filenameHash` instead
+     */
+    disableFilenameHash?: boolean;
+    /**
+     * @deprecated use `source.decorators` instead
+     */
+    enableLatestDecorators?: boolean;
     /**
      * @deprecated use `output.cssModules.localIdentName` instead
      */

packages/builder/uni-builder/src/webpack/plugins/babel.ts

@@ -18,6 +18,11 @@ import {
   type PluginBabelOptions,
 } from '@rsbuild/plugin-babel';
 
+/**
+ * Plugin order:
+ * rspack mode: rsbuild:swc -> rsbuild:babel
+ * webpack mode: uni-builder:babel -> uni-builder:ts-loader -> rsbuild-webpack:swc
+ */
 export const getPresetReact = (rootPath: string, isProd: boolean) => {
   const isNewJsx = isBeyondReact17(rootPath);
 
@@ -34,9 +39,18 @@ export const getPresetReact = (rootPath: string, isProd: boolean) => {
 
 export const pluginBabel = (options?: PluginBabelOptions): RsbuildPlugin => ({
   name: 'uni-builder:babel',
+
+  post: [
+    // will replace the babel rule
+    'rsbuild-webpack:swc',
+    // will replace the babel rule
+    'rsbuild-webpack:esbuild',
+  ],
+
   setup(api) {
-    api.modifyBundlerChain(
-      async (
+    api.modifyBundlerChain({
+      order: 'pre',
+      handler: async (
         chain,
         { CHAIN_ID, target, isProd, isServer, isServiceWorker },
       ) => {
@@ -69,11 +83,7 @@ export const pluginBabel = (options?: PluginBabelOptions): RsbuildPlugin => ({
             },
           };
 
-          const decoratorConfig = {
-            version: config.output.enableLatestDecorators
-              ? '2018-09'
-              : 'legacy',
-          } as const;
+          const decoratorConfig = config.source.decorators;
 
           const baseBabelConfig =
             isServer || isServiceWorker
@@ -166,12 +176,16 @@ export const pluginBabel = (options?: PluginBabelOptions): RsbuildPlugin => ({
           .mimetype({
             or: ['text/javascript', 'application/javascript'],
           })
+          // compatible with legacy packages with type="module"
+          // https://github.com/webpack/webpack/issues/11467
+          .resolve.set('fullySpecified', false)
+          .end()
           .use(CHAIN_ID.USE.BABEL)
           .loader(require.resolve('babel-loader'))
           // Using cloned options to keep options separate from each other
           .options(lodash.cloneDeep(babelOptions));
       },
-    );
+    });
   },
 });