web-infra-dev · chenjiahan · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
diff --git a/e2e/cases/environments/vue-react-plugins/index.test.ts b/e2e/cases/environments/vue-react-plugins/index.test.ts
@@ -0,0 +1,24 @@
+import { build, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest('should build basic Vue jsx correctly', async ({ page }) => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    runServer: true,
+  });
+
+  const reactUrl = new URL(`http://localhost:${rsbuild.port}/react`);
+
+  await page.goto(reactUrl.href);
+
+  await expect(page.locator('#test')).toHaveText('Hello Rsbuild!');
+
+  const vueUrl = new URL(`http://localhost:${rsbuild.port}/vue`);
+
+  await page.goto(vueUrl.href);
+
+  const button1 = page.locator('#button1');
+  await expect(button1).toHaveText('A: 0');
+
+  await rsbuild.close();
+});
diff --git a/e2e/cases/environments/vue-react-plugins/rsbuild.config.ts b/e2e/cases/environments/vue-react-plugins/rsbuild.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginVue } from '@rsbuild/plugin-vue';
+import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx';
+
+export default defineConfig({
+  environments: {
+    react: {
+      plugins: [pluginReact()],
+      source: {
+        entry: {
+          react: './src/react/index.ts',
+        },
+      },
+    },
+    vue: {
+      plugins: [
+        pluginVue(),
+        pluginVueJsx(),
+        pluginBabel({
+          include: /\.(?:jsx|tsx)$/,
+        }),
+      ],
+      source: {
+        entry: {
+          vue: './src/vue/index.js',
+        },
+      },
+    },
+  },
+});
diff --git a/e2e/cases/environments/vue-react-plugins/src/react/App.tsx b/e2e/cases/environments/vue-react-plugins/src/react/App.tsx
@@ -0,0 +1,3 @@
+const App = () => <div id="test">Hello Rsbuild!</div>;
+
+export default App;
diff --git a/e2e/cases/environments/vue-react-plugins/src/react/index.ts b/e2e/cases/environments/vue-react-plugins/src/react/index.ts
@@ -0,0 +1,9 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(React.createElement(App));
+}
diff --git a/e2e/cases/environments/vue-react-plugins/src/vue/A.jsx b/e2e/cases/environments/vue-react-plugins/src/vue/A.jsx
@@ -0,0 +1,14 @@
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'Test',
+
+  setup() {
+    const count = ref(0);
+    return () => (
+      <button id="button1" type="button" onClick={() => count.value++}>
+        A: {count.value}
+      </button>
+    );
+  },
+});
diff --git a/e2e/cases/environments/vue-react-plugins/src/vue/index.js b/e2e/cases/environments/vue-react-plugins/src/vue/index.js
@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import A from './A';
+
+console.log(A);
+
+createApp(A).mount('#root');
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -48,6 +48,7 @@ export type {
   DevConfig,
   DistPathConfig,
   EnvironmentContext,
+  EnvironmentConfig,
   FilenameConfig,
   HtmlConfig,
   HtmlRspackPlugin,

diff --git a/packages/plugin-preact/src/index.ts b/packages/plugin-preact/src/index.ts
@@ -1,4 +1,4 @@
-import type { RsbuildConfig, RsbuildPlugin, Rspack } from '@rsbuild/core';
+import type { EnvironmentConfig, RsbuildPlugin, Rspack } from '@rsbuild/core';
 
 export type PluginPreactOptions = {
   /**
@@ -18,14 +18,14 @@ export const pluginPreact = (
   setup(api) {
     const { reactAliasesEnabled = true } = options;
 
-    api.modifyRsbuildConfig((userConfig, { mergeRsbuildConfig }) => {
+    api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig }) => {
       const reactOptions: Rspack.SwcLoaderTransformConfig['react'] = {
         development: process.env.NODE_ENV === 'development',
         runtime: 'automatic',
         importSource: 'preact',
       };
 
-      const extraConfig: RsbuildConfig = {
+      const extraConfig: EnvironmentConfig = {
         tools: {
           swc: {
             jsc: {
@@ -52,7 +52,7 @@ export const pluginPreact = (
         };
       }
 
-      return mergeRsbuildConfig(extraConfig, userConfig);
+      return mergeEnvironmentConfig(extraConfig, userConfig);
     });
   },
 });
diff --git a/packages/plugin-rem/src/index.ts b/packages/plugin-rem/src/index.ts
@@ -61,9 +61,9 @@ export const pluginRem = (
       });
     };
 
-    api.modifyRsbuildConfig(async (config, { mergeRsbuildConfig }) => {
+    api.modifyEnvironmentConfig(async (config, { mergeEnvironmentConfig }) => {
       const remPlugin = await getPostCSSPlugin();
-      return mergeRsbuildConfig(config, {
+      return mergeEnvironmentConfig(config, {
         tools: {
           postcss(_, { addPlugins }) {
             addPlugins(remPlugin);

diff --git a/packages/plugin-source-build/src/plugin.ts b/packages/plugin-source-build/src/plugin.ts
@@ -58,15 +58,17 @@ export function pluginSourceBuild(
     setup(api) {
       const projectRootPath = api.context.rootPath;
 
-      let projects: Project[] = [];
-
-      api.modifyRsbuildConfig(async (config) => {
-        projects = await getDependentProjects(projectName || projectRootPath, {
-          cwd: projectRootPath,
-          recursive: true,
-          filter: filterByField(sourceField, true),
-          extraMonorepoStrategies,
-        });
+      let projects: Project[] | undefined;
+
+      api.modifyEnvironmentConfig(async (config) => {
+        projects =
+          projects ||
+          (await getDependentProjects(projectName || projectRootPath, {
+            cwd: projectRootPath,
+            recursive: true,
+            filter: filterByField(sourceField, true),
+            extraMonorepoStrategies,
+          }));
 
         const includes = await getSourceInclude({
           projects,
@@ -105,7 +107,7 @@ export function pluginSourceBuild(
 
         const references = new Set<string>();
 
-        for (const project of projects) {
+        for (const project of projects || []) {
           const filePath = path.join(project.dir, 'tsconfig.json');
           if (fs.existsSync(filePath)) {
             references.add(filePath);

diff --git a/packages/plugin-styled-components/src/index.ts b/packages/plugin-styled-components/src/index.ts
@@ -57,39 +57,40 @@ export const pluginStyledComponents = (
       });
     };
 
-    api.modifyRsbuildConfig({
-      order: 'post',
-      handler: (userConfig, { mergeRsbuildConfig }) => {
-        const targets = userConfig.environments
-          ? Object.values(userConfig.environments).map(
-              (e) => e.output?.target || userConfig.output?.target || 'web',
-            )
-          : [userConfig.output?.target || 'web'];
-        const useSSR = isServerTarget(targets);
-        const mergedOptions = getMergedOptions(useSSR);
-        if (!mergedOptions) {
-          return userConfig;
-        }
+    api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig }) => {
+      const rsbuildConfig = api.getRsbuildConfig();
 
-        const extraConfig: RsbuildConfig = {
-          tools: {
-            swc: {
-              jsc: {
-                experimental: {
-                  plugins: [
-                    [
-                      require.resolve('@swc/plugin-styled-components'),
-                      mergedOptions,
-                    ],
+      const targets = rsbuildConfig.environments
+        ? Object.values(rsbuildConfig.environments).map(
+            (e) => e.output?.target || userConfig.output?.target || 'web',
+          )
+        : [userConfig.output?.target || 'web'];
+
+      const useSSR = isServerTarget(targets);
+
+      const mergedOptions = getMergedOptions(useSSR);
+      if (!mergedOptions) {
+        return userConfig;
+      }
+
+      const extraConfig: RsbuildConfig = {
+        tools: {
+          swc: {
+            jsc: {
+              experimental: {
+                plugins: [
+                  [
+                    require.resolve('@swc/plugin-styled-components'),
+                    mergedOptions,
                   ],
-                },
+                ],
               },
             },
           },
-        };
+        },
+      };
 
-        return mergeRsbuildConfig(extraConfig, userConfig);
-      },
+      return mergeEnvironmentConfig(extraConfig, userConfig);
     });
   },
 });
diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
@@ -1,4 +1,4 @@
-import type { RsbuildConfig, RsbuildPlugin } from '@rsbuild/core';
+import type { EnvironmentConfig, RsbuildPlugin } from '@rsbuild/core';
 import { type VueLoaderOptions, VueLoaderPlugin } from 'vue-loader';
 import { applySplitChunksRule } from './splitChunks';
 
@@ -37,8 +37,8 @@ export function pluginVue(options: PluginVueOptions = {}): RsbuildPlugin {
       const VUE_REGEXP = /\.vue$/;
       const CSS_MODULES_REGEX = /\.modules?\.\w+$/i;
 
-      api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
-        const extraConfig: RsbuildConfig = {
+      api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig }) => {
+        const extraConfig: EnvironmentConfig = {
           source: {
             define: {
               // https://link.vuejs.org/feature-flags
@@ -49,10 +49,7 @@ export function pluginVue(options: PluginVueOptions = {}): RsbuildPlugin {
           },
         };
 
-        const merged = mergeRsbuildConfig(extraConfig, config);
-
-        merged.output ||= {};
-        merged.output.cssModules ||= {};
+        const merged = mergeEnvironmentConfig(extraConfig, config);
 
         // Support `<style module>` in Vue SFC
         if (merged.output.cssModules.auto === true) {

diff --git a/packages/plugin-vue2/src/index.ts b/packages/plugin-vue2/src/index.ts
@@ -38,10 +38,7 @@ export function pluginVue2(options: PluginVueOptions = {}): RsbuildPlugin {
       const VUE_REGEXP = /\.vue$/;
       const CSS_MODULES_REGEX = /\.modules?\.\w+$/i;
 
-      api.modifyRsbuildConfig((config) => {
-        config.output ||= {};
-        config.output.cssModules ||= {};
-
+      api.modifyEnvironmentConfig((config) => {
         // Support `<style module>` in Vue SFC
         if (config.output.cssModules.auto === true) {
           config.output.cssModules.auto = (path, query) => {

diff --git a/website/docs/en/plugins/dev/hooks.mdx b/website/docs/en/plugins/dev/hooks.mdx
@@ -141,6 +141,10 @@ rsbuild.addPlugins([plugin1, plugin2]);
 
 Modify the config passed to the Rsbuild, you can directly modify the config object, or return a new object to replace the previous object.
 
+:::warning
+`modifyRsbuildConfig` is a global hook. To add support for your plugin as an [environment-specific plugin](/guide/advanced/environments#add-plugins-for-specified-environment), you should use [modifyEnvironmentConfig](/plugins/dev/hooks#modifyenvironmentconfig) instead of `modifyRsbuildConfig`.
+:::
+
 - **Type:**
 
 ```ts

diff --git a/website/docs/zh/plugins/dev/hooks.mdx b/website/docs/zh/plugins/dev/hooks.mdx
@@ -141,6 +141,10 @@ rsbuild.addPlugins([plugin1, plugin2]);
 
 修改传递给 Rsbuild 的配置项，你可以直接修改传入的 config 对象，也可以返回一个新的对象来替换传入的对象。
 
+:::warning
+`modifyRsbuildConfig` 为全局 hook。如果你希望你开发的插件支持[仅在特定的 environment 下生效](/guide/advanced/environments#为指定环境添加插件)，应避免使用 `modifyRsbuildConfig`，可使用 [modifyEnvironmentConfig](/plugins/dev/hooks#modifyenvironmentconfig) 代替。
+:::
+
 - **类型：**
 
 ```ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const App = () => <div id="test">Hello Rsbuild!</div>;

		export default App;