feat: support the rspack multi plugin

feat: support the rspack multi plugin

.changeset/spotty-walls-dress.md

@@ -0,0 +1,8 @@
+---
+'@rsdoctor/webpack-plugin': patch
+'@rsdoctor/rspack-plugin': patch
+'@rsdoctor/core': patch
+'@rsdoctor/sdk': patch
+---
+
+feat(rspack): support the rspack multi plugin

examples/rspack-minimal/build.ts

@@ -0,0 +1,88 @@
+import rspack from '@rspack/core';
+import { resolve } from 'path';
+const config = require('./rspack.config.js');
+const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { RsdoctorRspackMultiplePlugin } = require('@rsdoctor/rspack-plugin');
+
+// console.log(config)
+
+function rspackBuild(config: rspack.Configuration) {
+  return new Promise<void>((resolve) => {
+    rspack.rspack(config, (err, stats) => {
+      if (err) {
+        throw err;
+      }
+
+      console.log();
+
+      if (stats) {
+        console.log(
+          stats.toString({
+            chunks: false,
+            chunkModules: false,
+            colors: true,
+            modules: false,
+            children: false,
+          }),
+        );
+      }
+
+      resolve();
+    });
+  });
+}
+
+async function build() {
+  await Promise.all([
+    rspackBuild({
+      ...config,
+      name: 'Builder 1',
+      target: 'web',
+      plugins: [
+        new ReactRefreshPlugin(),
+        new RsdoctorRspackMultiplePlugin({
+          stage: 0,
+          disableClientServer: false,
+          features: ['bundle', 'plugins', 'loader'],
+        }),
+        new rspack.HtmlRspackPlugin({
+          template: './index.html',
+        }),
+        new rspack.CopyRspackPlugin({
+          patterns: [
+            {
+              from: 'public',
+            },
+          ],
+        }),
+      ],
+    }),
+    rspackBuild({
+      ...config,
+      entry: './src/index.ts',
+      mode: 'none',
+      name: 'Builder 2',
+      target: 'node',
+      output: {
+        path: resolve(__dirname, 'dist/node'),
+        filename: 'index.js',
+      },
+      plugins: [
+        new RsdoctorRspackMultiplePlugin({
+          stage: 1,
+          disableClientServer: false,
+          features: ['bundle', 'plugins', 'loader'],
+        }),
+        new rspack.CopyRspackPlugin({
+          patterns: [
+            {
+              from: 'public',
+            },
+          ],
+        }),
+      ],
+    }),
+  ]);
+}
+
+build();

examples/rspack-minimal/package.json

@@ -4,8 +4,10 @@
   "private": true,
   "scripts": {
     "dev": "ENABLE_CLIENT_SERVER=true NODE_ENV=development rspack serve",
-    "build": "ENABLE_CLIENT_SERVER=false NODE_ENV=production rspack build",
-    "build:analysis": "ENABLE_CLIENT_SERVER=true NODE_ENV=production rspack build"
+    "build:s": "ENABLE_CLIENT_SERVER=false NODE_ENV=production rspack build -c ./rspack.config.js",
+    "build:analysis": "ENABLE_CLIENT_SERVER=true NODE_ENV=production rspack build",
+    "build:m": "ENABLE_CLIENT_SERVER=false NODE_ENV=production node -r tsm build.ts",
+    "build": "npm run build:s && npm run build:m"
   },
   "dependencies": {
     "@arco-design/web-react": "^2.58.3",
@@ -18,6 +20,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "tsm": "2.3.0",
     "@rsdoctor/rspack-plugin": "workspace:*",
     "@rspack/cli": "0.5.1",
     "@rspack/core": "0.5.1",

examples/rspack-minimal/src/App.tsx

@@ -1,28 +1,17 @@
 import React from 'react';
-import logo from './logo.svg';
-import Footer from './Footer';
-import './App.css';
+import { Button } from '@arco-design/web-react';
+import '@arco-design/web-react/dist/css/arco.css';
+import styles from './index.module.less';
 
-function App() {
+export function App({ name }: any) {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-      <Footer />
-    </div>
+    <>
+      Hello <i>{name}</i>. Welcome!
+      <>
+        <h1 className={styles.header}>标题{name}</h1>
+        <p className="worker">内容</p>
+        <Button type="primary">Hello Arco</Button>,
+      </>
+    </>
   );
 }
-
-export default App;

examples/rspack-minimal/src/app1.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button } from '@arco-design/web-react';
+import '@arco-design/web-react/dist/css/arco.css';
+import styles from './index.module.less';
+
+export function App({ name }: any) {
+  return (
+    <>
+      Hello <i>{name}</i>. Welcome!
+      <>
+        <h1 className={styles.header}>标题{name}</h1>
+        <p className="worker">内容</p>
+        <Button type="primary">Hello Arco</Button>,
+      </>
+    </>
+  );
+}

examples/rspack-minimal/src/declaration.d.ts

@@ -0,0 +1,27 @@
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}
+
+declare module '*.less' {
+  const classes: { [className: string]: string };
+  export default classes;
+}
+
+declare module '*/settings.json' {
+  const value: {
+    colorWeek: boolean;
+    navbar: boolean;
+    menu: boolean;
+    footer: boolean;
+    themeColor: string;
+    menuWidth: number;
+  };
+
+  export default value;
+}
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}

examples/rspack-minimal/src/index.module.less

@@ -0,0 +1,4 @@
+.header {
+  background: var(--color-bg-2);
+  padding: 20px;
+}

examples/rspack-minimal/src/index.ts

@@ -0,0 +1,9 @@
+import { render } from 'react-dom';
+import { createElement } from 'react';
+
+import { App } from './app1';
+
+render(
+  createElement(App, { name: 'Taylor' }),
+  document.getElementById('root')!,
+);

packages/core/src/inner-plugins/utils/loader.ts

@@ -197,7 +197,8 @@ export async function reportLoader(
 
   // sdk exists means in the same process
   const sdk = getSDK();
-  if (sdk?.reportLoader) {
+
+  if (sdk?.reportLoader && !('parent' in sdk && sdk.parent)) {
     sdk.reportLoader(loaderData);
     sdk.reportSourceMap(sourceMapData);
     return loaderData;

packages/core/src/inner-plugins/utils/sdk.ts

@@ -1,11 +1,18 @@
-import { RsdoctorWebpackSDK } from '@rsdoctor/sdk';
+import { RsdoctorSlaveSDK, RsdoctorWebpackSDK } from '@rsdoctor/sdk';
 
 let sdk: RsdoctorWebpackSDK;
 
 export function setSDK(t: RsdoctorWebpackSDK) {
   sdk = t;
 }
 
-export function getSDK(): RsdoctorWebpackSDK {
+export function getSDK(builderName?: string) {
+  if (sdk && builderName && 'parent' in sdk) {
+    const _sdk = sdk as unknown as RsdoctorSlaveSDK;
+    const slaveSDK = _sdk.parent.slaves.find(
+      (_sdk: { name: string }) => _sdk.name === builderName,
+    );
+    return slaveSDK || sdk;
+  }
   return sdk;
 }

packages/core/src/types/plugin.ts

@@ -60,7 +60,7 @@ export interface RsdoctorWebpackPluginOptions<
   innerClientPath?: string;
 }
 
-export interface RsdoctorWebpackMultiplePluginOptions<
+export interface RsdoctorMultiplePluginOptions<
   Rules extends LinterType.ExtendRuleData[] = LinterType.ExtendRuleData[],
 > extends Omit<RsdoctorWebpackPluginOptions<Rules>, 'sdkInstance'>,
     Pick<ConstructorParameters<typeof RsdoctorSlaveSDK>[0], 'stage'> {

packages/rspack-plugin/src/builtinLoaderPlugin.ts

@@ -21,13 +21,23 @@ export class BuiltinLoaderPlugin {
               typeof _builtinRule.options === 'string'
                 ? {}
                 : { ..._builtinRule };
+
             rule.use.splice(index, 0, {
               loader: path.join(__dirname, './probeLoader.js'),
-              options: { ..._options, type: 'end' },
+              options: {
+                ..._options,
+                type: 'end',
+                builderName: compiler.options.name,
+              },
             });
+
             rule.use.splice(index + 2, 0, {
               loader: path.join(__dirname, './probeLoader.js'),
-              options: { ..._options, type: 'start' },
+              options: {
+                ..._options,
+                type: 'start',
+                builderName: compiler.options.name,
+              },
             });
           }
           return rule;

packages/rspack-plugin/src/index.ts

@@ -1 +1,2 @@
 export * from './plugin';
+export * from './multiple';

packages/rspack-plugin/src/multiple.ts

@@ -0,0 +1,38 @@
+import { RsdoctorSDKController } from '@rsdoctor/sdk';
+import type { Linter } from '@rsdoctor/types';
+import type { RsdoctorMultiplePluginOptions } from '@rsdoctor/core';
+
+import { RsdoctorRspackPlugin } from './plugin';
+
+let globalController: RsdoctorSDKController | undefined;
+
+export class RsdoctorRspackMultiplePlugin<
+  Rules extends Linter.ExtendRuleData[],
+> extends RsdoctorRspackPlugin<Rules> {
+  // @ts-expect-error
+  private controller: RsdoctorSDKController;
+
+  constructor(options: RsdoctorMultiplePluginOptions<Rules> = {}) {
+    const controller = (() => {
+      if (globalController) {
+        return globalController;
+      }
+      const controller = new RsdoctorSDKController();
+      globalController = controller;
+      return controller;
+    })();
+
+    const instance = controller.createSlave({
+      name: options.name || 'Builder',
+      stage: options.stage,
+      extraConfig: { disableTOSUpload: options.disableTOSUpload || false },
+    });
+
+    super({
+      ...options,
+      sdkInstance: instance,
+    });
+
+    this.controller = controller;
+  }
+}

packages/rspack-plugin/src/plugin.ts

@@ -1,6 +1,6 @@
 import type { Compiler, Configuration, RuleSetRule } from '@rspack/core';
 import { ModuleGraph } from '@rsdoctor/graph';
-import { RsdoctorWebpackSDK } from '@rsdoctor/sdk';
+import { RsdoctorSlaveSDK, RsdoctorWebpackSDK } from '@rsdoctor/sdk';
 import {
   InternalLoaderPlugin,
   InternalPluginsPlugin,
@@ -35,7 +35,7 @@ export class RsdoctorRspackPlugin<Rules extends Linter.ExtendRuleData[]>
 {
   public readonly name = pluginTapName;
 
-  public readonly sdk: RsdoctorWebpackSDK;
+  public readonly sdk: RsdoctorWebpackSDK | RsdoctorSlaveSDK;
 
   public _bootstrapTask!: Promise<unknown>;
 
@@ -47,13 +47,15 @@ export class RsdoctorRspackPlugin<Rules extends Linter.ExtendRuleData[]>
 
   constructor(options?: RsdoctorRspackPluginOptions<Rules>) {
     this.options = normalizeUserConfig<Rules>(options);
-    this.sdk = new RsdoctorWebpackSDK({
-      name: pluginTapName,
-      root: process.cwd(),
-      type: SDK.ToDataType.Normal,
-      config: { disableTOSUpload: this.options.disableTOSUpload },
-      innerClientPath: this.options.innerClientPath,
-    });
+    this.sdk =
+      this.options.sdkInstance ??
+      new RsdoctorWebpackSDK({
+        name: pluginTapName,
+        root: process.cwd(),
+        type: SDK.ToDataType.Normal,
+        config: { disableTOSUpload: this.options.disableTOSUpload },
+        innerClientPath: this.options.innerClientPath,
+      });
     this.modulesGraph = new ModuleGraph();
   }
 
@@ -67,6 +69,10 @@ export class RsdoctorRspackPlugin<Rules extends Linter.ExtendRuleData[]>
       this._bootstrapTask = this.sdk.bootstrap();
     }
 
+    if (compiler.options.name) {
+      this.sdk.setName(compiler.options.name);
+    }
+
     setSDK(this.sdk);
 
     compiler.hooks.done.tapPromise(
@@ -164,9 +170,5 @@ export class RsdoctorRspackPlugin<Rules extends Linter.ExtendRuleData[]>
     this.sdk.setOutputDir(
       path.resolve(compiler.outputPath, `./${Constants.RsdoctorOutputFolder}`),
     );
-
-    if (configuration.name) {
-      this.sdk.setName(configuration.name);
-    }
   }
 }