feat: upgrade rspack to 0.4.4 (#352)

* feat: upgrade rspack

* fix less

* disableTransformByDefault

* update

* enable disableTransformByDefault

* fix

* rebase

* fix

* fix

* clean

* fix

package.json

@@ -27,20 +27,21 @@
     "@nx/cypress": "17.0.1",
     "@nx/detox": "17.0.1",
     "@nx/devkit": "17.0.1",
+    "@nx/eslint": "17.0.1",
     "@nx/eslint-plugin": "17.0.1",
     "@nx/jest": "17.0.1",
     "@nx/js": "17.0.1",
     "@nx/node": "17.0.1",
     "@nx/plugin": "17.0.1",
     "@nx/react": "17.0.1",
+    "@nx/storybook": "17.0.1",
     "@nx/vite": "17.0.1",
     "@nx/workspace": "17.0.1",
-    "@nx/storybook": "17.0.1",
     "@phenomnomnominal/tsquery": "^5.0.1",
-    "@rspack/core": "^0.1.12",
-    "@rspack/dev-server": "^0.1.12",
-    "@rspack/less-loader": "^0.0.22",
-    "@rspack/plugin-minify": "^0.1.12",
+    "@rspack/core": "^0.4.4",
+    "@rspack/dev-server": "^0.4.4",
+    "@rspack/plugin-minify": "^0.4.4",
+    "@rspack/plugin-react-refresh": "^0.4.4",
     "@swc-node/register": "1.6.8",
     "@types/fs-extra": "^11.0.1",
     "@types/jest": "29.4.0",
@@ -69,7 +70,6 @@
     "ts-node": "10.9.1",
     "tslib": "^2.3.0",
     "typescript": "5.1.3",
-    "verdaccio": "^5.0.4",
-    "@nx/eslint": "17.0.1"
+    "verdaccio": "^5.0.4"
   }
 }

packages/rspack/src/executors/dev-server/dev-server.impl.ts

@@ -6,7 +6,7 @@ import {
 import { createAsyncIterable } from '@nx/devkit/src/utils/async-iterable';
 import { Configuration } from '@rspack/core';
 import { RspackDevServer } from '@rspack/dev-server';
-import { createCompiler } from '../../utils/create-compiler';
+import { createCompiler, isMultiCompiler } from '../../utils/create-compiler';
 import { isMode } from '../../utils/mode-utils';
 import { DevServerExecutorSchema } from './schema';
 type DevServer = Configuration['devServer'];
@@ -25,32 +25,27 @@ export default async function* runExecutor(
     context.projectGraph
   );
 
-  // If I don't typecast, it throws an error
-  // that port does not exist on type DevServer
-  // however, it does exist, since DevServer extends
-  // WebpackDevServer.Configuration which has port
   let devServerConfig: DevServer = {
     port: options.port ?? 4200,
     hot: true,
-  } as DevServer;
+  };
 
   const buildOptions = readTargetOptions<any>(buildTarget, context);
   const compiler = await createCompiler(
     { ...buildOptions, devServer: devServerConfig, mode: options.mode },
     context
   );
 
+  // Use the first one if it's MultiCompiler
+  // https://webpack.js.org/configuration/dev-server/#root:~:text=Be%20aware%20that%20when%20exporting%20multiple%20configurations%20only%20the%20devServer%20options%20for%20the%20first%20configuration%20will%20be%20taken%20into%20account%20and%20used%20for%20all%20the%20configurations%20in%20the%20array.
+  const firstCompiler = isMultiCompiler(compiler) ? compiler.compilers[0] : compiler;
   devServerConfig = {
     ...devServerConfig,
-    ...compiler.options.devServer,
+    ...firstCompiler.options.devServer,
   };
 
   yield* createAsyncIterable(({ next }) => {
     const server: any = new RspackDevServer(
-      // If I don't typecast, it throws an error
-      // that onListening does not exist on type DevServer
-      // however, it does exist, since DevServer extends
-      // WebpackDevServer.Configuration which has onListening
       {
         ...devServerConfig,
         onListening: (server: any) => {
@@ -59,7 +54,7 @@ export default async function* runExecutor(
             baseUrl: `http://localhost:${options.port ?? 4200}`,
           });
         },
-      } as DevServer,
+      },
 
       compiler
     );

packages/rspack/src/executors/rspack/rspack.impl.ts

@@ -1,9 +1,9 @@
 import { ExecutorContext, logger } from '@nx/devkit';
 import { createAsyncIterable } from '@nx/devkit/src/utils/async-iterable';
-import { Stats } from '@rspack/core';
+import { Compiler, MultiCompiler, MultiStats, Stats } from '@rspack/core';
 import { rmSync } from 'fs';
 import * as path from 'path';
-import { createCompiler } from '../../utils/create-compiler';
+import { createCompiler, isMultiCompiler } from '../../utils/create-compiler';
 import { isMode } from '../../utils/mode-utils';
 import { RspackExecutorSchema } from './schema';
 import { printDiagnostics, runTypeCheck } from '@nx/js';
@@ -35,9 +35,9 @@ export default async function* runExecutor(
     outfile?: string;
   }>(async ({ next, done }) => {
     if (options.watch) {
-      const watcher= compiler.watch(
+      const watcher = compiler.watch(
         {},
-        async (err, stats: Stats) => {
+        async (err, stats: Stats | MultiStats) => {
           if (err) {
             logger.error(err);
             next({ success: false });
@@ -49,9 +49,7 @@ export default async function* runExecutor(
             return;
           }
 
-          const statsOptions = compiler.options
-            ? compiler.options.stats
-            : undefined;
+					const statsOptions = getStatsOptions(compiler);
           const printedStats = stats.toString(statsOptions);
           // Avoid extra empty line when `stats: 'none'`
           if (printedStats) {
@@ -70,7 +68,7 @@ export default async function* runExecutor(
         });
       });
     } else {
-      compiler.run(async (err, stats: Stats) => {
+      compiler.run(async (err, stats: Stats | MultiStats) => {
         compiler.close(() => {
           if (err) {
             logger.error(err);
@@ -83,9 +81,7 @@ export default async function* runExecutor(
             return;
           }
 
-          const statsOptions = compiler.options
-            ? compiler.options.stats
-            : undefined;
+          const statsOptions = getStatsOptions(compiler);
           const printedStats = stats.toString(statsOptions);
           // Avoid extra empty line when `stats: 'none'`
           if (printedStats) {
@@ -136,4 +132,14 @@ async function executeTypeCheck(
   if (result.errors.length > 0) {
     throw new Error('Found type errors. See above.');
   }
+}
+
+function getStatsOptions(compiler: Compiler | MultiCompiler) {
+  return isMultiCompiler(compiler)
+  ? {
+      children: compiler.compilers.map(compiler => compiler.options ? compiler.options.stats : undefined)
+    }
+  : compiler.options
+  ? compiler.options.stats
+  : undefined;
 }

packages/rspack/src/generators/init/init.ts

@@ -9,8 +9,9 @@ import { initGenerator } from '@nx/js';
 import {
   rspackCoreVersion,
   rspackDevServerVersion,
-  rspackLessLoaderVersion,
   rspackPluginMinifyVersion,
+  lessLoaderVersion,
+  rspackPluginReactRefreshVersion,
 } from '../../utils/versions';
 import { InitGeneratorSchema } from './schema';
 
@@ -30,6 +31,7 @@ export async function rspackInitGenerator(
   const devDependencies = {
     '@rspack/core': rspackCoreVersion,
     '@rspack/plugin-minify': rspackPluginMinifyVersion,
+    '@rspack/plugin-react-refresh': rspackPluginReactRefreshVersion,
   };
 
   // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -40,7 +42,7 @@ export async function rspackInitGenerator(
   }
 
   if (schema.style === 'less') {
-    devDependencies['@rspack/less-loader'] = rspackLessLoaderVersion;
+    devDependencies['less-loader'] = lessLoaderVersion;
   }
 
   if (schema.framework !== 'none' || schema.devServer) {

packages/rspack/src/utils/create-compiler.ts

@@ -1,12 +1,12 @@
 import { ExecutorContext } from '@nx/devkit';
-import { Compiler, createCompiler as _createCompiler } from '@rspack/core';
+import { Compiler, MultiCompiler, rspack } from '@rspack/core';
 import * as path from 'path';
 import { RspackExecutorSchema } from '../executors/rspack/schema';
 
 export async function createCompiler(
   options: RspackExecutorSchema,
   context: ExecutorContext
-): Promise<Compiler> {
+): Promise<Compiler | MultiCompiler> {
   let userDefinedConfig = await import(
     path.join(context.root, options.rspackConfig)
   ).then((x) => x.default || x);
@@ -17,5 +17,9 @@ export async function createCompiler(
 
   const config = await userDefinedConfig({}, { options, context });
 
-  return _createCompiler(config);
+  return rspack(config);
+}
+
+export function isMultiCompiler(compiler: Compiler | MultiCompiler): compiler is MultiCompiler {
+  return 'compilers' in compiler
 }

packages/rspack/src/utils/versions.ts

@@ -1,8 +1,9 @@
-export const rspackCoreVersion = '~0.1.12';
-export const rspackDevServerVersion = '~0.1.12';
+export const rspackCoreVersion = '~0.4.4';
+export const rspackDevServerVersion = '~0.4.4';
 
-export const rspackPluginMinifyVersion = '~0.1.12';
-export const rspackLessLoaderVersion = '^0.0.22';
+export const rspackPluginMinifyVersion = '~0.4.4';
+export const rspackPluginReactRefreshVersion = '~0.4.4';
+export const lessLoaderVersion = '~11.1.3';
 
 export const reactVersion = '~18.2.0';
 export const reactDomVersion = '~18.2.0';

packages/rspack/src/utils/with-nx.ts

@@ -3,6 +3,7 @@ import {
   ExternalItem,
   ResolveAlias,
   RspackPluginInstance,
+  rspack,
 } from '@rspack/core';
 import { LicenseWebpackPlugin } from 'license-webpack-plugin';
 import * as path from 'path';
@@ -58,6 +59,13 @@ export function withNx(_opts = {}) {
       );
     }
 
+    plugins.push(new rspack.CopyRspackPlugin({
+      patterns: getCopyPatterns(
+        normalizeAssets(options.assets, context.root, sourceRoot)
+      ),
+    }));
+    plugins.push(new rspack.ProgressPlugin())
+
     options.fileReplacements.forEach((item) => {
       alias[item.replace] = item.with;
     });
@@ -121,7 +129,43 @@ export function withNx(_opts = {}) {
         port: 4200,
         hot: true,
       } as any,
-      module: {},
+      module: {
+        rules: [
+          {
+            test: /\.js$/,
+            loader: 'builtin:swc-loader',
+            exclude: /node_modules/,
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'ecmascript',
+                },
+                externalHelpers: true,
+              },
+            },
+            type: 'javascript/auto',
+          },
+          {
+            test: /\.ts$/,
+            loader: 'builtin:swc-loader',
+            exclude: /node_modules/,
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  decorators: true
+                },
+                transform: {
+                  legacyDecorator: true,
+                  decoratorMetadata: true
+                },
+                externalHelpers: true,
+              },
+            },
+            type: 'javascript/auto',
+          },
+        ]
+      },
       plugins: plugins,
       resolve: {
         // There are some issues resolving workspace libs in a monorepo.
@@ -133,14 +177,6 @@ export function withNx(_opts = {}) {
       infrastructureLogging: {
         debug: false,
       },
-      builtins: {
-        copy: {
-          patterns: getCopyPatterns(
-            normalizeAssets(options.assets, context.root, sourceRoot)
-          ),
-        },
-        progress: {},
-      },
       externals,
       externalsType,
       stats: {
@@ -149,13 +185,6 @@ export function withNx(_opts = {}) {
       },
     };
 
-    if (options.optimization) {
-      updated.optimization = {
-        ...config.optimization,
-        minimize: true,
-      };
-    }
-
     return updated;
   };
 }