feat: add environment hooks about compiler

e2e/cases/plugin-api/plugin-hooks/environments.test.ts

@@ -0,0 +1,192 @@
+import { getRandomPort, gotoPage, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+import { type RsbuildPlugin, createRsbuild } from '@rsbuild/core';
+
+const createPlugin = () => {
+  const names: string[] = [];
+
+  const plugin: RsbuildPlugin = {
+    name: 'test-plugin',
+    setup(api) {
+      api.modifyRspackConfig((_config, { environment }) => {
+        names.push(`ModifyBundlerConfig ${environment.name}`);
+      });
+      api.modifyWebpackChain((_config, { environment }) => {
+        names.push(`ModifyBundlerConfig ${environment.name}`);
+      });
+      api.modifyRsbuildConfig(() => {
+        names.push('ModifyRsbuildConfig');
+      });
+      api.modifyEnvironmentConfig((_config, { name }) => {
+        names.push(`ModifyEnvironmentConfig ${name}`);
+      });
+      api.modifyBundlerChain((_chain, { environment }) => {
+        names.push(`ModifyBundlerChain ${environment.name}`);
+      });
+      api.modifyHTMLTags((tags, { environment }) => {
+        names.push(`ModifyHTMLTags ${environment.name}`);
+        return tags;
+      });
+      api.onBeforeStartDevServer(() => {
+        names.push('BeforeStartDevServer');
+      });
+      api.onAfterStartDevServer(() => {
+        names.push('AfterStartDevServer');
+      });
+      api.onBeforeCreateCompiler(() => {
+        names.push('BeforeCreateCompiler');
+      });
+      api.onAfterCreateCompiler(() => {
+        names.push('AfterCreateCompiler');
+      });
+      api.onBeforeBuild(() => {
+        names.push('BeforeBuild');
+      });
+      api.onAfterBuild(() => {
+        names.push('AfterBuild');
+      });
+      api.onBeforeEnvironmentCompile(({ environment }) => {
+        names.push(`BeforeEnvironmentCompile ${environment.name}`);
+      });
+      api.onAfterEnvironmentCompile(({ stats, environment }) => {
+        expect(stats?.compilation.name).toBe(environment.name);
+        names.push(`AfterEnvironmentCompile ${environment.name}`);
+      });
+      api.onBeforeStartProdServer(() => {
+        names.push('BeforeStartProdServer');
+      });
+      api.onCloseDevServer(() => {
+        names.push('OnCloseDevServer');
+      });
+      api.onAfterStartProdServer(() => {
+        names.push('AfterStartProdServer');
+      });
+      api.onDevCompileDone(() => {
+        names.push('OnDevCompileDone');
+      });
+    },
+  };
+
+  return { plugin, names };
+};
+
+rspackOnlyTest(
+  'should run plugin hooks correctly when running build with multiple environments',
+  async () => {
+    const { plugin, names } = createPlugin();
+    const rsbuild = await createRsbuild({
+      cwd: __dirname,
+      rsbuildConfig: {
+        plugins: [plugin],
+        environments: {
+          web: {},
+          node: {},
+        },
+      },
+    });
+
+    await rsbuild.build();
+
+    // Test environment hook is always called twice
+    expect(names.filter((name) => name.includes(' web')).length).toBe(
+      names.filter((name) => name.includes(' node')).length,
+    );
+
+    // The execution order between different Environments of the same hook is not fixed
+    // Therefore, we only test the execution order of a single Environment
+    expect(names.filter((name) => !name.includes(' node'))).toEqual([
+      'ModifyRsbuildConfig',
+      'ModifyEnvironmentConfig web',
+      'ModifyBundlerChain web',
+      'ModifyBundlerConfig web',
+      'BeforeCreateCompiler',
+      'AfterCreateCompiler',
+      'BeforeEnvironmentCompile web',
+      'BeforeBuild',
+      'ModifyHTMLTags web',
+      'AfterEnvironmentCompile web',
+      'AfterBuild',
+    ]);
+
+    expect(names.filter((name) => !name.includes(' web'))).toEqual([
+      'ModifyRsbuildConfig',
+      'ModifyEnvironmentConfig node',
+      'ModifyBundlerChain node',
+      'ModifyBundlerConfig node',
+      'BeforeCreateCompiler',
+      'AfterCreateCompiler',
+      'BeforeEnvironmentCompile node',
+      'BeforeBuild',
+      'ModifyHTMLTags node',
+      'AfterEnvironmentCompile node',
+      'AfterBuild',
+    ]);
+  },
+);
+
+rspackOnlyTest(
+  'should run plugin hooks correctly when running startDevServer with multiple environments',
+  async ({ page }) => {
+    process.env.NODE_ENV = 'development';
+    const port = await getRandomPort();
+
+    const { plugin, names } = createPlugin();
+    const rsbuild = await createRsbuild({
+      cwd: __dirname,
+      rsbuildConfig: {
+        plugins: [plugin],
+        server: {
+          port,
+        },
+        environments: {
+          web: {},
+          node: {},
+        },
+      },
+    });
+
+    const result = await rsbuild.startDevServer();
+
+    await gotoPage(page, result);
+
+    await result.server.close();
+
+    expect(names.filter((name) => name.includes(' web')).length).toBe(
+      names.filter((name) => name.includes(' node')).length,
+    );
+
+    expect(names.filter((name) => !name.includes(' node'))).toEqual([
+      'ModifyRsbuildConfig',
+      'ModifyEnvironmentConfig web',
+      'BeforeStartDevServer',
+      'ModifyBundlerChain web',
+      'ModifyBundlerConfig web',
+      'BeforeCreateCompiler',
+      'AfterCreateCompiler',
+      'BeforeEnvironmentCompile web',
+      'AfterStartDevServer',
+      'ModifyHTMLTags web',
+      'AfterEnvironmentCompile web',
+      'OnDevCompileDone',
+      'OnCloseDevServer',
+    ]);
+
+    expect(names.filter((name) => !name.includes(' web'))).toEqual([
+      'ModifyRsbuildConfig',
+      'ModifyEnvironmentConfig node',
+      'BeforeStartDevServer',
+      'ModifyBundlerChain node',
+      'ModifyBundlerConfig node',
+      'BeforeCreateCompiler',
+      'AfterCreateCompiler',
+      'BeforeEnvironmentCompile node',
+      'AfterStartDevServer',
+      'ModifyHTMLTags node',
+      'AfterEnvironmentCompile node',
+      'OnDevCompileDone',
+      'OnCloseDevServer',
+    ]);
+
+    process.env.NODE_ENV = 'test';
+  },
+);

e2e/cases/plugin-api/plugin-hooks/index.test.ts

@@ -1,4 +1,4 @@
-import { gotoPage, rspackOnlyTest } from '@e2e/helper';
+import { getRandomPort, gotoPage, rspackOnlyTest } from '@e2e/helper';
 import { expect } from '@playwright/test';
 import { type RsbuildPlugin, createRsbuild } from '@rsbuild/core';
 
@@ -45,6 +45,12 @@ const createPlugin = () => {
       api.onAfterBuild(() => {
         names.push('AfterBuild');
       });
+      api.onBeforeEnvironmentCompile(() => {
+        names.push('BeforeEnvironmentCompile');
+      });
+      api.onAfterEnvironmentCompile(() => {
+        names.push('AfterEnvironmentCompile');
+      });
       api.onBeforeStartProdServer(() => {
         names.push('BeforeStartProdServer');
       });
@@ -83,8 +89,10 @@ rspackOnlyTest(
       'ModifyBundlerConfig',
       'BeforeCreateCompiler',
       'AfterCreateCompiler',
+      'BeforeEnvironmentCompile',
       'BeforeBuild',
       'ModifyHTMLTags',
+      'AfterEnvironmentCompile',
       'AfterBuild',
     ]);
   },
@@ -94,12 +102,16 @@ rspackOnlyTest(
   'should run plugin hooks correctly when running startDevServer',
   async ({ page }) => {
     process.env.NODE_ENV = 'development';
+    const port = await getRandomPort();
 
     const { plugin, names } = createPlugin();
     const rsbuild = await createRsbuild({
       cwd: __dirname,
       rsbuildConfig: {
         plugins: [plugin],
+        server: {
+          port,
+        },
       },
     });
 
@@ -117,8 +129,10 @@ rspackOnlyTest(
       'ModifyBundlerConfig',
       'BeforeCreateCompiler',
       'AfterCreateCompiler',
+      'BeforeEnvironmentCompile',
       'AfterStartDevServer',
       'ModifyHTMLTags',
+      'AfterEnvironmentCompile',
       'OnDevCompileDone',
       'OnCloseDevServer',
     ]);

packages/compat/webpack/src/build.ts

@@ -4,7 +4,7 @@ import type { Configuration as WebpackConfig } from 'webpack';
 import WebpackMultiStats from 'webpack/lib/MultiStats.js';
 import { createCompiler } from './createCompiler';
 import { type InitConfigsOptions, initConfigs } from './initConfigs';
-import { onBeforeBuild, onCompileDone } from './shared';
+import { registerBuildHook } from './shared';
 
 export const build = async (
   initOptions: InitConfigsOptions,
@@ -34,29 +34,13 @@ export const build = async (
     bundlerConfigs = webpackConfigs;
   }
 
-  let isFirstCompile = true;
-  const beforeBuild = async () =>
-    await context.hooks.onBeforeBuild.call({
-      bundlerConfigs: bundlerConfigs as Rspack.Configuration[],
-      environments: context.environments,
-      isWatch: Boolean(watch),
-      isFirstCompile,
-    });
-
-  const onDone = async (stats: Rspack.Stats | Rspack.MultiStats) => {
-    const p = context.hooks.onAfterBuild.call({
-      isFirstCompile,
-      stats,
-      environments: context.environments,
-      isWatch: Boolean(watch),
-    });
-    isFirstCompile = false;
-    await p;
-  };
-
-  onBeforeBuild(compiler, beforeBuild, watch);
-
-  onCompileDone(compiler, onDone, WebpackMultiStats);
+  registerBuildHook({
+    context,
+    bundlerConfigs: bundlerConfigs as any,
+    compiler,
+    isWatch: Boolean(watch),
+    MultiStatsCtor: WebpackMultiStats,
+  });
 
   if (watch) {
     const watching = compiler.watch({}, (err) => {

packages/compat/webpack/src/createCompiler.ts

@@ -6,8 +6,8 @@ import {
   formatStats,
   getDevMiddleware,
   getStatsOptions,
+  registerDevHook,
 } from './shared';
-import { onCompileDone } from './shared';
 import type { WebpackConfig } from './types';
 
 export async function createCompiler({
@@ -31,7 +31,7 @@ export async function createCompiler({
     | Rspack.Compiler
     | Rspack.MultiCompiler;
 
-  const done = async (stats: unknown) => {
+  const done = (stats: unknown) => {
     const { message, level } = formatStats(
       stats as Rspack.Stats,
       getStatsOptions(compiler),
@@ -43,21 +43,20 @@ export async function createCompiler({
     if (level === 'warning') {
       logger.warn(message);
     }
-
-    if (process.env.NODE_ENV === 'development') {
-      await context.hooks.onDevCompileDone.call({
-        isFirstCompile,
-        stats: stats as Rspack.Stats,
-        environments: context.environments,
-      });
-    }
-
-    isFirstCompile = false;
   };
 
-  let isFirstCompile = true;
+  compiler.hooks.done.tap('rsbuild:done', (stats: unknown) => {
+    done(stats);
+  });
 
-  onCompileDone(compiler, done, WebpackMultiStats);
+  if (process.env.NODE_ENV === 'development') {
+    registerDevHook({
+      compiler,
+      context,
+      bundlerConfigs: webpackConfigs as any,
+      MultiStatsCtor: WebpackMultiStats,
+    });
+  }
 
   await context.hooks.onAfterCreateCompiler.call({
     compiler,

packages/compat/webpack/src/shared.ts

@@ -12,8 +12,8 @@ const {
   getRsbuildInspectConfig,
   chainToConfig,
   modifyBundlerChain,
-  onBeforeBuild,
-  onCompileDone,
+  registerDevHook,
+  registerBuildHook,
   prettyTime,
 } = __internalHelper;
 
@@ -28,8 +28,8 @@ export {
   outputInspectConfigFiles,
   chainToConfig,
   modifyBundlerChain,
-  onCompileDone,
-  onBeforeBuild,
+  registerDevHook,
+  registerBuildHook,
   prettyTime,
   getRsbuildInspectConfig,
 };