chore(builder): update rspack to 0.3.10 and fix deprecate warning (#4908

)
web-infra-dev · Nov 6, 2023 · f5f7526 · f5f7526
1 parent 8128486
commit f5f7526
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 236 deletions.
diff --git a/.changeset/late-cows-judge.md b/.changeset/late-cows-judge.md
@@ -0,0 +1,7 @@
+---
+'@modern-js/builder-rspack-provider': patch
+---
+
+chore(builder): update rspack to 0.3.10 and fix deprecate warning
+
+chore(builder): 升级 rspack 到 0.3.10 并修复 deprecate warning
diff --git a/packages/builder/builder-rspack-provider/package.json b/packages/builder/builder-rspack-provider/package.json
@@ -56,9 +56,9 @@
     "@modern-js/types": "workspace:*",
     "@modern-js/utils": "workspace:*",
     "@babel/preset-typescript": "^7.22.15",
-    "@rspack/core": "0.3.8",
-    "@rspack/dev-client": "0.3.8",
-    "@rspack/plugin-html": "0.3.8",
+    "@rspack/core": "0.3.10",
+    "@rspack/dev-client": "0.3.10",
+    "@rspack/plugin-html": "0.3.10",
     "@swc/helpers": "0.5.1",
     "rspack-manifest-plugin": "5.0.0-alpha0",
     "caniuse-lite": "^1.0.30001520",

diff --git a/packages/builder/builder-rspack-provider/src/core/rspackConfig.ts b/packages/builder/builder-rspack-provider/src/core/rspackConfig.ts
@@ -124,13 +124,16 @@ export async function generateRspackConfig({
   context: Context;
 }) {
   const chainUtils = await getChainUtils(target);
-  const { BannerPlugin, DefinePlugin } = await import('@rspack/core');
+  const { BannerPlugin, DefinePlugin, ProvidePlugin } = await import(
+    '@rspack/core'
+  );
 
   const chain = await modifyBundlerChain(context, {
     ...chainUtils,
     bundler: {
       BannerPlugin,
       DefinePlugin,
+      ProvidePlugin,
     },
   });
 

diff --git a/packages/builder/builder-rspack-provider/src/plugins/react.ts b/packages/builder/builder-rspack-provider/src/plugins/react.ts
@@ -16,13 +16,24 @@ export const builderPluginReact = (): BuilderPlugin => ({
         // https://swc.rs/docs/configuration/compilation#jsctransformreactruntime
         runtime: 'automatic',
       });
+    });
 
-      setConfig(rspackConfig, 'builtins.provide', {
-        ...(rspackConfig.builtins?.provide || {}),
-        $ReactRefreshRuntime$: [
-          require.resolve('@rspack/dev-client/react-refresh'),
-        ],
-      });
+    api.modifyBundlerChain(async (chain, utils) => {
+      const config = api.getNormalizedConfig();
+
+      const usingHMR = isUsingHMR(config, utils);
+
+      const { bundler } = utils;
+
+      if (usingHMR) {
+        chain.plugin('ReactRefreshRuntime').use(bundler.ProvidePlugin, [
+          {
+            $ReactRefreshRuntime$: [
+              require.resolve('@rspack/dev-client/react-refresh'),
+            ],
+          },
+        ]);
+      }
     });
   },
 });
diff --git a/packages/builder/builder-rspack-provider/tests/plugins/__snapshots__/default.test.ts.snap b/packages/builder/builder-rspack-provider/tests/plugins/__snapshots__/default.test.ts.snap
@@ -41,11 +41,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
         "not op_mini all",
       ],
     },
-    "provide": {
-      "$ReactRefreshRuntime$": [
-        "<WORKSPACE>/node_modules/<PNPM_INNER>/@rspack/dev-client/src/reactRefresh.js",
-      ],
-    },
     "react": {
       "development": true,
       "refresh": true,
@@ -702,6 +697,14 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
       },
       "name": "ProgressPlugin",
     },
+    Plugin {
+      "_options": {
+        "$ReactRefreshRuntime$": [
+          "<WORKSPACE>/node_modules/<PNPM_INNER>/@rspack/dev-client/src/reactRefresh.js",
+        ],
+      },
+      "name": "ProvidePlugin",
+    },
   ],
   "resolve": {
     "alias": {
@@ -765,11 +768,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
         "not op_mini all",
       ],
     },
-    "provide": {
-      "$ReactRefreshRuntime$": [
-        "<WORKSPACE>/node_modules/<PNPM_INNER>/@rspack/dev-client/src/reactRefresh.js",
-      ],
-    },
     "react": {
       "development": false,
       "refresh": false,
@@ -1541,11 +1539,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctyly when targ
         "node >= 14",
       ],
     },
-    "provide": {
-      "$ReactRefreshRuntime$": [
-        "<WORKSPACE>/node_modules/<PNPM_INNER>/@rspack/dev-client/src/reactRefresh.js",
-      ],
-    },
     "react": {
       "development": true,
       "refresh": false,
@@ -2011,11 +2004,6 @@ exports[`tools.rspack > should match snapshot 1`] = `
         "not op_mini all",
       ],
     },
-    "provide": {
-      "$ReactRefreshRuntime$": [
-        "<WORKSPACE>/node_modules/<PNPM_INNER>/@rspack/dev-client/src/reactRefresh.js",
-      ],
-    },
     "react": {
       "development": true,
       "refresh": true,
@@ -2683,6 +2671,14 @@ exports[`tools.rspack > should match snapshot 1`] = `
       },
       "name": "ProgressPlugin",
     },
+    Plugin {
+      "_options": {
+        "$ReactRefreshRuntime$": [
+          "<WORKSPACE>/node_modules/<PNPM_INNER>/@rspack/dev-client/src/reactRefresh.js",
+        ],
+      },
+      "name": "ProvidePlugin",
+    },
   ],
   "resolve": {
     "alias": {

diff --git a/packages/builder/builder-shared/src/apply/hmr.ts b/packages/builder/builder-shared/src/apply/hmr.ts
@@ -2,7 +2,7 @@ import { ModifyChainUtils, SharedNormalizedConfig } from '../types';
 
 export function isUsingHMR(
   config: SharedNormalizedConfig,
-  { isProd, target }: ModifyChainUtils,
+  { isProd, target }: Pick<ModifyChainUtils, 'isProd' | 'target'>,
 ) {
   return (
     !isProd &&

diff --git a/packages/builder/builder-shared/src/types/hooks.ts b/packages/builder/builder-shared/src/types/hooks.ts
@@ -65,6 +65,7 @@ export type ModifyBundlerChainUtils = ModifyChainUtils & {
   bundler: {
     BannerPlugin: WebpackPluginInstance;
     DefinePlugin: WebpackPluginInstance;
+    ProvidePlugin: WebpackPluginInstance;
   };
 };
 

diff --git a/packages/builder/builder-webpack-provider/src/core/webpackConfig.ts b/packages/builder/builder-webpack-provider/src/core/webpackConfig.ts
@@ -155,13 +155,14 @@ export async function generateWebpackConfig({
   context: Context;
 }) {
   const chainUtils = await getChainUtils(target);
-  const { BannerPlugin, DefinePlugin } = await import('webpack');
+  const { BannerPlugin, DefinePlugin, ProvidePlugin } = await import('webpack');
 
   const bundlerChain = await modifyBundlerChain(context, {
     ...chainUtils,
     bundler: {
       BannerPlugin,
       DefinePlugin,
+      ProvidePlugin,
     },
   });
 

diff --git a/packages/builder/plugin-node-polyfill/src/index.ts b/packages/builder/plugin-node-polyfill/src/index.ts
@@ -1,4 +1,3 @@
-import { setConfig } from '@modern-js/builder-shared';
 import type { BuilderPlugin } from '@modern-js/builder';
 import type { BuilderPluginAPI as WebpackBuilderPluginAPI } from '@modern-js/builder-webpack-provider';
 import type { BuilderPluginAPI as RspackBuilderPluginAPI } from '@modern-js/builder-rspack-provider';
@@ -41,7 +40,7 @@ export function builderPluginNodePolyfill(): BuilderPlugin<
     name: 'builder-plugin-node-polyfill',
 
     async setup(api) {
-      api.modifyBundlerChain(async (chain, { isServer }) => {
+      api.modifyBundlerChain(async (chain, { CHAIN_ID, isServer, bundler }) => {
         // it had not need `node polyfill`, if the target is 'node'(server runtime).
         if (isServer) {
           return;
@@ -54,32 +53,11 @@ export function builderPluginNodePolyfill(): BuilderPlugin<
 
         // module polyfill
         chain.resolve.fallback.merge(getResolveFallback(nodeLibs));
-      });
 
-      if (api.context.bundlerType === 'rspack') {
-        (api as RspackBuilderPluginAPI).modifyRspackConfig(
-          async (config, { isServer }) => {
-            if (isServer) {
-              return;
-            }
-            setConfig(config, 'builtins.provide', {
-              ...(config.builtins?.provide ?? {}),
-              ...(await getProvideLibs()),
-            });
-          },
-        );
-      } else {
-        (api as WebpackBuilderPluginAPI).modifyWebpackChain(
-          async (chain, { CHAIN_ID, isServer, webpack }) => {
-            if (isServer) {
-              return;
-            }
-            chain
-              .plugin(CHAIN_ID.PLUGIN.NODE_POLYFILL_PROVIDE)
-              .use(webpack.ProvidePlugin, [await getProvideLibs()]);
-          },
-        );
-      }
+        chain
+          .plugin(CHAIN_ID.PLUGIN.NODE_POLYFILL_PROVIDE)
+          .use(bundler.ProvidePlugin, [await getProvideLibs()]);
+      });
     },
   };
 }