fix(builder): update Rspack and fix upgrade error (#3709)

fix(builder): update Rspack and fix upgrade error

Author: 9aoy

.changeset/little-lions-exercise.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/builder-rspack-provider': patch
+---
+
+hotfix(rspack-provider): update Rspack and fix upgrade error
+
+hotfix(rspack-provider): 升级 Rspack 并处理升级问题

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

@@ -56,11 +56,11 @@
     "@modern-js/types": "workspace:*",
     "@modern-js/utils": "workspace:*",
     "@babel/preset-typescript": "^7.17.12",
-    "@rspack/core": "0.1.11",
-    "@rspack/dev-client": "0.1.11",
-    "@rspack/dev-middleware": "0.1.11",
-    "@rspack/plugin-html": "0.1.11",
-    "@rspack/postcss-loader": "0.1.11",
+    "@rspack/core": "0.0.0-canary-22b006c-20230517164249",
+    "@rspack/dev-client": "0.0.0-canary-22b006c-20230517164249",
+    "@rspack/dev-middleware": "0.0.0-canary-22b006c-20230517164249",
+    "@rspack/plugin-html": "0.0.0-canary-22b006c-20230517164249",
+    "@rspack/postcss-loader": "0.0.0-canary-22b006c-20230517164249",
     "caniuse-lite": "^1.0.30001451",
     "core-js": "~3.30.0",
     "rspack-plugin-virtual-module": "0.1.0"

packages/builder/builder-rspack-provider/src/core/formatConfig.ts

@@ -145,6 +145,15 @@ export const formatSplitChunks = (
     throw new Error(`name not support function`);
   }
 
+  const fallbackCacheGroup = (
+    data: NonNullable<typeof splitChunks.fallbackCacheGroup>,
+  ) => ({
+    maxSize: formatSplitSize(data.maxSize, 'maxSize'),
+    maxAsyncSize: formatSplitSize(data.maxSize, 'maxAsyncSize'),
+    maxInitialSize: formatSplitSize(data.maxSize, 'maxInitialSize'),
+    minSize: formatSplitSize(data.minSize, 'minSize'),
+  });
+
   return {
     ...rest,
 
@@ -154,14 +163,18 @@ export const formatSplitChunks = (
       splitChunks.minRemainingSize,
       'minRemainingSize',
     ),
-    // todo: not support in rspack
-    // maxSize: formatSplitSize(splitChunks.maxSize, 'maxSize'),
+    maxSize: formatSplitSize(splitChunks.maxSize, 'maxSize'),
+    maxAsyncSize: formatSplitSize(splitChunks.maxSize, 'maxAsyncSize'),
+    maxInitialSize: formatSplitSize(splitChunks.maxSize, 'maxInitialSize'),
     minSize: formatSplitSize(splitChunks.minSize, 'minSize'),
     enforceSizeThreshold: formatSplitSize(
       splitChunks.enforceSizeThreshold,
       'enforceSizeThreshold',
     ),
     chunks: splitChunks.chunks,
     cacheGroups: formatCacheGroups(splitChunks.cacheGroups),
+    fallbackCacheGroup: splitChunks.fallbackCacheGroup
+      ? fallbackCacheGroup(splitChunks.fallbackCacheGroup)
+      : undefined,
   };
 };

packages/builder/builder-rspack-provider/tests/plugins/__snapshots__/default.test.ts.snap

@@ -630,6 +630,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
       },
       "chunks": "all",
       "enforceSizeThreshold": 50000,
+      "fallbackCacheGroup": undefined,
+      "maxAsyncSize": undefined,
+      "maxInitialSize": undefined,
+      "maxSize": undefined,
       "minRemainingSize": undefined,
       "minSize": undefined,
       "name": undefined,
@@ -1302,6 +1306,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
       },
       "chunks": "all",
       "enforceSizeThreshold": 50000,
+      "fallbackCacheGroup": undefined,
+      "maxAsyncSize": undefined,
+      "maxInitialSize": undefined,
+      "maxSize": undefined,
       "minRemainingSize": undefined,
       "minSize": undefined,
       "name": undefined,
@@ -2392,6 +2400,10 @@ exports[`tools.rspack > should match snapshot 1`] = `
       },
       "chunks": "all",
       "enforceSizeThreshold": 50000,
+      "fallbackCacheGroup": undefined,
+      "maxAsyncSize": undefined,
+      "maxInitialSize": undefined,
+      "maxSize": undefined,
       "minRemainingSize": undefined,
       "minSize": undefined,
       "name": undefined,

pnpm-lock.yaml

@@ -19,7 +19,7 @@ test('should compile CSS modules correctly', async () => {
 
   if (builder.providerType === 'rspack') {
     expect(content).toEqual(
-      '.the-a-class{color:red}.l00wA{color:blue}.WV9bl{color:yellow}.the-d-class{color:green}',
+      '.the-a-class{color:red}.LtKZ0{color:blue}._8nrJ{color:yellow}.the-d-class{color:green}',
     );
   } else {
     expect(content).toEqual(
@@ -46,7 +46,7 @@ test('should treat normal CSS as CSS modules when disableCssModuleExtension is t
 
   if (builder.providerType === 'rspack') {
     expect(content).toEqual(
-      '.hX0jA{color:red}.l00wA{color:blue}.WV9bl{color:yellow}.the-d-class{color:green}',
+      '.T6GiI{color:red}.LtKZ0{color:blue}._8nrJ{color:yellow}.the-d-class{color:green}',
     );
   } else {
     expect(content).toEqual(

tests/e2e/builder/cases/css/css-modules/cssModules.test.ts

@@ -25,7 +25,7 @@ allProviderTest('should compile stylus and rem correctly', async () => {
 
   if (builder.providerType === 'rspack') {
     expect(content).toEqual(
-      'body{color:#f00;font:.28rem Arial,sans-serif}.KPtXW{font-size:.28rem}',
+      'body{color:#f00;font:.28rem Arial,sans-serif}.KsRAA{font-size:.28rem}',
     );
   } else {
     expect(content).toEqual(

tests/e2e/builder/cases/stylus-rem/index.test.ts

@@ -18,7 +18,7 @@ allProviderTest('should compile stylus correctly', async () => {
 
   if (builder.providerType === 'rspack') {
     expect(content).toEqual(
-      'body{color:#f00;font:14px Arial,sans-serif}.KPtXW{font-size:14px}',
+      'body{color:#f00;font:14px Arial,sans-serif}.KsRAA{font-size:14px}',
     );
   } else {
     expect(content).toEqual(