feat: support rsbuild modify config hook (#6840)

Author: caohuilin

.changeset/strange-rings-thank.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/app-tools': minor
+---
+
+feat: support rsbuild modify config hook
+
+feat: 支持 rsbuild 修改配置的 Hook 函数

packages/solutions/app-tools/src/builder/generator/index.ts

@@ -59,12 +59,14 @@ async function applyBuilderPlugins<B extends Bundler>(
     builderPluginAdapterBasic,
     builderPluginAdapterHtml,
     builderPluginAdapterSSR,
+    builderPluginAdapterHooks,
   } = await import('../shared/builderPlugins/index.js');
 
   builder.addPlugins([
     builderPluginAdapterBasic(),
     builderPluginAdapterSSR(options),
     builderPluginAdapterHtml(options),
+    builderPluginAdapterHooks(options),
   ]);
 
   builder.addPlugins([builderPluginAdapterCopy(options)], {

packages/solutions/app-tools/src/builder/shared/builderPlugins/builderHooks.ts

@@ -0,0 +1,28 @@
+import type { RsbuildPlugin } from '@rsbuild/core';
+import type { Bundler } from '../../../types';
+import type { BuilderOptions } from '../types';
+
+export const builderPluginAdapterHooks = <B extends Bundler>(
+  options: BuilderOptions<B>,
+): RsbuildPlugin => ({
+  name: 'builder-plugin-support-modern-hooks',
+  setup(api) {
+    const _internalContext = options.appContext._internalContext;
+    const hooks = _internalContext.pluginAPI?.getHooks();
+    api.modifyBundlerChain(async (chain, utils) => {
+      await hooks?.modifyBundlerChain.call(chain, utils);
+    });
+    api.modifyRsbuildConfig(async (config, utils) => {
+      await hooks?.modifyRsbuildConfig.call(config, utils);
+    });
+    api.modifyRspackConfig(async (config, utils) => {
+      await hooks?.modifyRspackConfig.call(config, utils);
+    });
+    api.modifyWebpackChain(async (chain, utils) => {
+      await hooks?.modifyWebpackChain.call(chain, utils);
+    });
+    api.modifyWebpackConfig(async (config, utils) => {
+      await hooks?.modifyWebpackConfig.call(config, utils);
+    });
+  },
+});

packages/solutions/app-tools/src/builder/shared/builderPlugins/index.ts

@@ -1,3 +1,4 @@
 export * from './adapterBasic';
 export * from './adapterHtml';
 export * from './adapterSSR';
+export * from './builderHooks';

pnpm-lock.yaml

@@ -0,0 +1,56 @@
+import {
+  type AppTools,
+  type CliPluginFuture,
+  appTools,
+  defineConfig,
+} from '@modern-js/app-tools';
+
+const MyPlugin = (): CliPluginFuture<AppTools> => ({
+  name: 'test',
+  setup(api) {
+    api.config(() => {
+      return {
+        tools: {
+          webpack: () => {
+            console.log('tools.webpack');
+          },
+          rspack: () => {
+            console.log('tools.rspack');
+          },
+          bundlerChain: () => {
+            console.log('tools.bundlerChain');
+          },
+          webpackChain: () => {
+            console.log('tools.webpackChain');
+          },
+        },
+      };
+    });
+    api.modifyBundlerChain(async (chain, utils) => {
+      console.log('modifyBundlerChain');
+    });
+    api.modifyRsbuildConfig(async (config, utils) => {
+      console.log('modifyRsbuildConfig');
+    });
+    api.modifyRspackConfig(async (config, utils) => {
+      console.log('modifyRspackConfig');
+    });
+    api.modifyWebpackChain(async (chain, utils) => {
+      console.log('modifyWebpackChain');
+    });
+    api.modifyWebpackConfig(async (config, utils) => {
+      console.log('modifyWebpackConfig');
+    });
+  },
+});
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: process.env.BUNDLER === 'webpack' ? 'webpack' : 'rspack',
+    }),
+    MyPlugin(),
+  ],
+});

tests/integration/rsbuild-hook/modern.config.ts

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "name": "app-rsbuild-hooks",
+  "version": "2.64.3",
+  "scripts": {
+    "dev": "modern dev"
+  },
+  "dependencies": {
+    "@modern-js/app-tools": "workspace:*",
+    "@modern-js/runtime": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

tests/integration/rsbuild-hook/package.json

@@ -0,0 +1,28 @@
+import { RuntimeReactContext } from '@modern-js/runtime';
+import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
+import { useContext } from 'react';
+
+const App = () => {
+  const context = useContext(RuntimeReactContext);
+  const { initialData } = context;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route index element={<div>index</div>} />
+        <Route
+          path="about"
+          element={<div>about {initialData?.data as string}</div>}
+        />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+App.init = () => {
+  console.log('init');
+  return {
+    data: 'init data',
+  };
+};
+
+export default App;

tests/integration/rsbuild-hook/src/App.tsx

@@ -0,0 +1,2 @@
+/// <reference types='@modern-js/app-tools/types' />
+/// <reference types='@modern-js/runtime/types' />

tests/integration/rsbuild-hook/src/modern-app-env.d.ts

@@ -0,0 +1,5 @@
+import { defineRuntimeConfig } from '@modern-js/runtime';
+
+export default defineRuntimeConfig({
+  plugins: [],
+});

tests/integration/rsbuild-hook/src/modern.runtime.ts

@@ -0,0 +1,74 @@
+import path from 'path';
+import { modernBuild } from '../../../utils/modernTestUtils';
+
+const appDir = path.resolve(__dirname, '../');
+
+function processStdout(stdout: string) {
+  const cleaned = stdout.replace(
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: <explanation>
+    /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g,
+    '',
+  );
+  return cleaned.replace(/\r\n/g, '\n').trim();
+}
+
+function verifyOrder(output: string, expectedOrder: string[]): boolean {
+  let currentIndex = 0;
+  const lines = output.split('\n');
+
+  for (const line of lines) {
+    if (line.includes(expectedOrder[currentIndex])) {
+      currentIndex++;
+    }
+    if (currentIndex === expectedOrder.length) {
+      return true;
+    }
+  }
+
+  return false;
+}
+describe('build with rspack', () => {
+  test('rspack hooks', async () => {
+    const buildResult = await modernBuild(appDir, [], {
+      env: {
+        BUNDLER: 'rspack',
+      },
+    });
+
+    expect(buildResult.code).toEqual(0);
+
+    const cleanOutput = processStdout(buildResult.stdout);
+    const expectedOrder = [
+      'modifyBundlerChain',
+      'tools.bundlerChain',
+      'modifyRspackConfig',
+      'tools.rspack',
+    ];
+
+    expect(verifyOrder(cleanOutput, expectedOrder)).toBeTruthy();
+  });
+});
+
+describe('build with webpack', () => {
+  test('webpack hooks', async () => {
+    const buildResult = await modernBuild(appDir, [], {
+      env: {
+        BUNDLER: 'webpack',
+      },
+    });
+
+    expect(buildResult.code).toEqual(0);
+
+    const cleanOutput = processStdout(buildResult.stdout);
+    const expectedOrder = [
+      'modifyBundlerChain',
+      'tools.bundlerChain',
+      'modifyWebpackChain',
+      'tools.webpackChain',
+      'modifyWebpackConfig',
+      'tools.webpack',
+    ];
+
+    expect(verifyOrder(cleanOutput, expectedOrder)).toBeTruthy();
+  });
+});

tests/integration/rsbuild-hook/tests/index.test.ts

@@ -0,0 +1,14 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "outDir": "dist",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["./shared/*"]
+    }
+  },
+  "include": ["src", "tests", "modern.config.ts"]
+}