feat(app-tools): add isFirstCompile param to afterDev hook (#3748)

Author: chenjiahan

.changeset/loud-pears-argue.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/app-tools': patch
+---
+
+feat(app-tools): add isFirstCompile param to afterDev hook
+
+feat(app-tools): 为 afterDev 钩子增加 isFirstCompile 参数

packages/document/main-doc/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -260,9 +260,9 @@ export default (): CliPlugin => ({
 ### `afterDev`
 
 - Function: Tasks to be executed after the main process of `dev` command
-- Execution Stage: Executed after the project is started when running the `dev` command
+- Execution Stage: It is executed after each compilation is completed when running the `dev` command
 - Hook Model: AsyncWorkflow
-- Type: `AsyncWorkflow<void, unknown>`
+- Type: `AsyncWorkflow<{ isFirstCompile: boolean }, unknown>`
 - Usage Example:
 
 ```ts
@@ -279,6 +279,24 @@ export default (): CliPlugin => ({
 });
 ```
 
+`afterDev` will be executed after each compilation is completed, you can use the `isFirstCompile` param to determine whether it is the first compilation:
+
+```ts
+import type { CliPlugin } from '@modern-js/core';
+
+export default (): CliPlugin => ({
+  setup(api) {
+    return {
+      afterDev: ({ isFirstCompile }) => {
+        if (isFirstCompile) {
+          // do something
+        }
+      },
+    };
+  },
+});
+```
+
 ### `beforeCreateCompiler`
 
 - Function: Provides access to the Webpack configuration used to create the Webpack Compiler within middleware functions.
@@ -776,7 +794,7 @@ export default (): Plugin => ({
           );
         };
         return next({
-          App: hoistNonReactStatics(AppWrapper, App)
+          App: hoistNonReactStatics(AppWrapper, App),
         });
       },
     };

packages/document/main-doc/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -2,6 +2,7 @@
 title: Hook 列表
 sidebar_position: 8
 ---
+
 # Hook 列表
 
 在 Modern.js 中暴露了三类插件：CLI、Runtime、Server。下面列举下各类中的 Hook：
@@ -166,7 +167,6 @@ export default (): CliPlugin => ({
 });
 ```
 
-
 ### `commands`
 
 - 功能：为 command 添加新的命令
@@ -260,9 +260,9 @@ export default (): CliPlugin => ({
 ### `afterDev`
 
 - 功能：运行 dev 主流程的之后的任务
-- 执行阶段：`dev` 命令运行时，项目启动完成之后执行
+- 执行阶段：运行 `dev` 命令时，每一次编译完成后执行
 - Hook 模型：AsyncWorkflow
-- 类型：`AsyncWorkflow<void, unknown>`
+- 类型：`AsyncWorkflow<{ isFirstCompile: boolean }, unknown>`
 - 使用示例：
 
 ```ts
@@ -279,6 +279,24 @@ export default (): CliPlugin => ({
 });
 ```
 
+`afterDev` 会在每一次编译完成后执行，你可以通过 `isFirstCompile` 参数来判断是否为首次编译：
+
+```ts
+import type { CliPlugin } from '@modern-js/core';
+
+export default (): CliPlugin => ({
+  setup(api) {
+    return {
+      afterDev: ({ isFirstCompile }) => {
+        if (isFirstCompile) {
+          // do something
+        }
+      },
+    };
+  },
+});
+```
+
 ### `beforeCreateCompiler`
 
 - 功能：在中间件函数中可以拿到创建 Webpack Compiler 的 Webpack 配置
@@ -778,7 +796,7 @@ export default (): Plugin => ({
           );
         };
         return next({
-          App: hoistNonReactStatics(AppWrapper, App)
+          App: hoistNonReactStatics(AppWrapper, App),
         });
       },
     };

packages/solutions/app-tools/src/analyze/index.ts

@@ -179,7 +179,7 @@ export default ({
             async onDevCompileDone({ isFirstCompile }) {
               const hookRunners = api.useHookRunners();
               if (process.stdout.isTTY || isFirstCompile) {
-                hookRunners.afterDev();
+                hookRunners.afterDev({ isFirstCompile });
 
                 if (isFirstCompile) {
                   printInstructions(hookRunners, appContext, normalizedConfig);

packages/solutions/app-tools/src/types/hooks.ts

@@ -76,7 +76,7 @@ export type AppToolsHooks<B extends Bundler = 'webpack'> = {
 
   // beforeCreateBuilder
   beforeDev: AsyncWorkflow<void, unknown>;
-  afterDev: AsyncWorkflow<void, unknown>;
+  afterDev: AsyncWorkflow<{ isFirstCompile: boolean }, unknown>;
   beforeCreateCompiler: AsyncWorkflow<
     {
       bundlerConfigs?: B extends 'rspack'