fix: support transform plugin in speedup mode (#6615)

* fix: support tranform plugin in speedup mode

* chore: lint

* chore: remove log

.changeset/silent-monkeys-check.md

@@ -0,0 +1,8 @@
+---
+'@ice/rspack-config': patch
+'@ice/shared-config': patch
+'@ice/bundles': patch
+'@ice/app': patch
+---
+
+fix: support custom transform plugins in speedup mode

packages/bundles/package.json

@@ -71,7 +71,7 @@
     "webpack": "5.88.2",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-dev-server": "4.15.0",
-    "unplugin": "0.9.5",
+    "unplugin": "1.5.0",
     "bonjour-service": "^1.0.13",
     "colorette": "^2.0.10",
     "compression": "^1.7.4",

packages/bundles/scripts/tasks.ts

@@ -86,6 +86,22 @@ const tasks = [
     file: 'node_modules/unplugin/dist/webpack/loaders/load.js',
     bundleName: 'webpack/loaders/load.js',
   },
+  {
+    pkgName: 'unplugin',
+    declaration: false,
+    emptyDir: false,
+    externals: taskExternals,
+    file: 'node_modules/unplugin/dist/rspack/loaders/transform.js',
+    bundleName: 'rspack/loaders/transform.js',
+  },
+  {
+    pkgName: 'unplugin',
+    declaration: false,
+    emptyDir: false,
+    externals: taskExternals,
+    file: 'node_modules/unplugin/dist/rspack/loaders/load.js',
+    bundleName: 'rspack/loaders/load.js',
+  },
   {
     // pack main package
     pkgName: 'fork-ts-checker-webpack-plugin',

packages/ice/package.json

@@ -98,7 +98,7 @@
     "react": "^18.2.0",
     "react-router": "6.14.2",
     "sass": "^1.50.0",
-    "unplugin": "^0.9.0",
+    "unplugin": "^1.5.0",
     "webpack": "^5.88.0",
     "webpack-dev-server": "^4.7.4",
     "@rspack/core": "0.3.0",
@@ -111,4 +111,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/ice/src/bundler/config/defaultServerConfig.ts

@@ -1,9 +1,13 @@
 import detectPort from 'detect-port';
 import type { CommandArgs } from 'build-scripts';
 import type { Configuration } from 'webpack-dev-server';
+import type { Configuration as DevServerConfiguration } from '@rspack/dev-server';
 import { DEFAULT_HOST, DEFAULT_PORT } from '../../constant.js';
 
-async function getDefaultServerConfig(devServerConfig: Configuration, commandArgs: CommandArgs) {
+async function getDefaultServerConfig(
+  devServerConfig: Configuration | DevServerConfiguration,
+  commandArgs: CommandArgs,
+) {
   // Get the value of the host and port from the command line, environment variables, and webpack config.
   // Value priority: process.env.PORT > commandArgs > webpackConfig > DEFAULT.
   const host = process.env.HOST ||

packages/ice/src/bundler/config/getUrls.ts

@@ -2,13 +2,15 @@ import type { TaskConfig } from 'build-scripts';
 import type { Config } from '@ice/shared-config/types';
 import type { AppConfig } from '@ice/runtime/types';
 import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
+import type { Configuration as RSPackDevServerConfiguration } from '@rspack/dev-server';
+
 import prepareURLs from '../../utils/prepareURLs.js';
 import getRouterBasename from '../../utils/getRouterBasename.js';
 
 interface Options {
   taskConfig: TaskConfig<Config>;
   appConfig: AppConfig;
-  devServerConfig: DevServerConfiguration;
+  devServerConfig: DevServerConfiguration | RSPackDevServerConfiguration;
 }
 
 const getUrls = ({

packages/rspack-config/src/index.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
 import { createRequire } from 'module';
-import { compilationPlugin, compileExcludes, getDefineVars } from '@ice/shared-config';
+import { compilationPlugin, compileExcludes, getDefineVars, getCompilerPlugins } from '@ice/shared-config';
 import type { Config, ModifyWebpackConfig } from '@ice/shared-config/types';
 import type { Configuration } from '@rspack/core';
 import type { rspack as Rspack } from '@ice/bundles/esm/rspack.js';
@@ -76,6 +76,8 @@ const getConfig: GetConfig = (options) => {
     getRoutesFile,
   });
   const cssFilename = `css/${hashKey ? `[name]-[${hashKey}].css` : '[name].css'}`;
+  // get compile plugins
+  const compilerWebpackPlugins = getCompilerPlugins(rootDir, taskConfig || {}, 'rspack', { isServer: false });
   const config: Configuration = {
     entry: {
       main: [path.join(rootDir, runtimeTmpDir, 'entry.client.tsx')],
@@ -127,11 +129,13 @@ const getConfig: GetConfig = (options) => {
     },
     // @ts-expect-error plugin instance defined by default in not compatible with rspack.
     plugins: [
+      ...plugins,
+      // Unplugin should be compatible with rspack.
+      ...compilerWebpackPlugins,
       new AssetManifest({
         fileName: 'assets-manifest.json',
         outputDir: path.join(rootDir, runtimeTmpDir),
       }),
-      ...plugins,
     ].filter(Boolean),
     builtins: {
       define: getDefineVars(define, runtimeDefineVars, getExpandedEnvs),

packages/shared-config/src/getCompilerPlugins.ts

@@ -6,7 +6,7 @@ import compilationPlugin from './unPlugins/compilation.js';
 import redirectImportPlugin from './unPlugins/redirectImport.js';
 import compileExcludes from './compileExcludes.js';
 
-type Compiler = 'webpack' | 'esbuild';
+type Compiler = 'webpack' | 'esbuild' | 'rspack';
 interface TransformOptions {
   isServer: boolean;
 }
@@ -31,6 +31,7 @@ function transformInclude(id: string) {
   return !!id.match(/\.(js|jsx|ts|tsx|mjs|mts|css|less|scss)$/);
 }
 
+function getCompilerPlugins(rootDir: string, config: Config, compiler: 'rspack', transformOptions: TransformOptions): Config['plugins'];
 function getCompilerPlugins(rootDir: string, config: Config, compiler: 'webpack', transformOptions: TransformOptions): Config['plugins'];
 function getCompilerPlugins(rootDir: string, config: Config, compiler: 'esbuild', transformOptions: TransformOptions): BuildOptions['plugins'];
 function getCompilerPlugins(rootDir: string, config: Config, compiler: Compiler, transformOptions: TransformOptions) {
@@ -55,10 +56,10 @@ function getCompilerPlugins(rootDir: string, config: Config, compiler: Compiler,
     ...(transformPlugins.filter(({ enforce }) => !enforce || enforce === 'pre') || []),
     ...transforms.map((transform, index) => ({ name: `transform_${index}`, transform, transformInclude })),
   );
-
+  const clientBundlers = ['webpack', 'rspack'];
   // Use webpack loader instead of webpack plugin to do the compilation.
   // Reason: https://github.com/unjs/unplugin/issues/154
-  if (swcOptions && compiler !== 'webpack') {
+  if (swcOptions && !clientBundlers.includes(compiler)) {
     compilerPlugins.push(compilationPlugin({
       rootDir,
       cacheDir,
@@ -85,13 +86,14 @@ function getCompilerPlugins(rootDir: string, config: Config, compiler: Compiler,
       exportData: redirectImports,
     }));
   }
-
-  return compiler === 'webpack'
-    // Plugins will be transformed as webpack loader, the execute order of webpack loader is reversed.
-    ? compilerPlugins
-        .reverse()
-        .map((plugin) => createUnplugin(() => getPluginTransform(plugin, transformOptions)).webpack()) as Config['plugins']
-    : compilerPlugins.map(plugin => getPluginTransform(plugin, transformOptions));
+  if (clientBundlers.includes(compiler)) {
+    return compilerPlugins
+      // Plugins will be transformed as webpack loader, the execute order of webpack loader is reversed.
+      .reverse()
+      .map((plugin) => createUnplugin(() => getPluginTransform(plugin, transformOptions))[compiler]()) as Config['plugins'];
+  } else {
+    return compilerPlugins.map(plugin => getPluginTransform(plugin, transformOptions));
+  }
 }
 
 export default getCompilerPlugins;