@modern-js/main-doc 2.25.2 → 2.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,17 +5,21 @@ sidebar_position: 8
5
5
 
6
6
  # Hook List
7
7
 
8
- Modern.js exposes three types of plugins: CLI, Runtime, and Server.
8
+ In the Modern.js engineering system, there are three types of plugins: CLI, Runtime, and Server. Each type of plugin can utilize different Hooks.
9
9
 
10
- ## CLI
10
+ In this chapter, all available Hooks are listed, and you can use the corresponding Hook based on your needs.
11
+
12
+ ## CLI Common Hooks
13
+
14
+ The following are the common CLI Hooks that can be used in both Modern.js Framework and Modern.js Module.
11
15
 
12
16
  ### `beforeConfig`
13
17
 
14
18
  - Functionality: Running tasks before the config process
15
19
  - Execution phase: Before the config process
16
- - Hook model: AsyncWorkflow
20
+ - Hook model: `AsyncWorkflow`
17
21
  - Type: `AsyncWorkflow<void, void>`
18
- - Example usage:
22
+ - Example:
19
23
 
20
24
  ```ts
21
25
  import type { CliPlugin } from '@modern-js/core';
@@ -35,9 +39,9 @@ export const myPlugin = (): CliPlugin => ({
35
39
 
36
40
  - Functionality: Collect configuration
37
41
  - Execution phase: After parsing the configuration in `modern.config.ts`
38
- - Hook model: ParallelWorkflow
42
+ - Hook model: `ParallelWorkflow`
39
43
  - Type: `ParallelWorkflow<void, unknown>`
40
- - Example usage:
44
+ - Example:
41
45
 
42
46
  ```ts
43
47
  import type { CliPlugin } from '@modern-js/core';
@@ -55,15 +59,39 @@ export const myPlugin = (): CliPlugin => ({
55
59
  });
56
60
  ```
57
61
 
58
- The collected configuration information will be collected and processed uniformly.
62
+ If you need to set the configuration of the Modern.js Framework, please use the `CliPlugin<AppTools>` type exported by `@modern-js/app-tools`:
63
+
64
+ ```ts
65
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
66
+
67
+ export const myPlugin = (): CliPlugin => ({
68
+ setup(api) {
69
+ return {
70
+ config: () => {
71
+ return {
72
+ output: {
73
+ polyfill: 'usage',
74
+ },
75
+ };
76
+ },
77
+ };
78
+ },
79
+ });
80
+ ```
81
+
82
+ The configuration returned by the `config` hook will be collected and merged by Modern.js, resulting in a `NormalizedConfig`. When merging configurations, the priority is as follows, from high to low:
83
+
84
+ 1. Configuration defined by the user in the `modern.config.*` file.
85
+ 2. Configuration defined by the plugin through the `config` hook.
86
+ 3. Default configuration of Modern.js.
59
87
 
60
88
  ### `validateSchema`
61
89
 
62
90
  - Functionality: Collect the JSON schema used to validate user configurations in various plugins.
63
91
  - Execution phase: After the `config` Hook has run.
64
- - Hook model: ParallelWorkflow
92
+ - Hook model: `ParallelWorkflow`
65
93
  - Type: `ParallelWorkflow<void, unknown>`
66
- - Example usage:
94
+ - Example:
67
95
 
68
96
  ```ts
69
97
  import type { CliPlugin } from '@modern-js/core';
@@ -116,7 +144,7 @@ export const myPlugin = defineConfig({
116
144
 
117
145
  then throw error:
118
146
 
119
- ```sh
147
+ ```
120
148
  $ modern dev
121
149
  1 | {
122
150
  > 2 | "foo": {},
@@ -127,9 +155,9 @@ $ modern dev
127
155
 
128
156
  - Functionality: Preparatory process for running the main process.
129
157
  - Execution phase: After configuration validation.
130
- - Hook model: AsyncWorkflow
158
+ - Hook model: `AsyncWorkflow`
131
159
  - Type: `AsyncWorkflow<void, void>`
132
- - Example usage:
160
+ - Example:
133
161
 
134
162
  ```ts
135
163
  import type { CliPlugin } from '@modern-js/core';
@@ -149,7 +177,7 @@ export const myPlugin = (): CliPlugin => ({
149
177
 
150
178
  - function: Running tasks after the prepare process
151
179
  - Execution Phase: After the prepare process
152
- - Hook model: AsyncWorkflow
180
+ - Hook model: `AsyncWorkflow`
153
181
  - type: `AsyncWorkflow<void, void>`
154
182
  - Usage:
155
183
 
@@ -169,11 +197,11 @@ export const myPlugin = (): CliPlugin => ({
169
197
 
170
198
  ### `commands`
171
199
 
172
- - Functionality: Add new commands for the command.
200
+ - Functionality: Add new CLI commands for the commander.
173
201
  - Execution phase: After the `prepare` Hook has run.
174
- - Hook model: AsyncWorkflow
202
+ - Hook model: `AsyncWorkflow`
175
203
  - Type: `AsyncWorkflow<{ program: Command; }, void>`
176
- - Example usage:
204
+ - Example:
177
205
 
178
206
  ```ts
179
207
  import type { CliPlugin } from '@modern-js/core';
@@ -213,9 +241,9 @@ foo
213
241
 
214
242
  - Functionality: Reset some file states before exiting the process.
215
243
  - Execution phase: Before the process exits.
216
- - Hook model: Workflow
244
+ - Hook model: `Workflow`
217
245
  - Type: `Workflow<void, void>`
218
- - Example usage:
246
+ - Example:
219
247
 
220
248
  ```ts
221
249
  import type { CliPlugin } from '@modern-js/core';
@@ -235,18 +263,24 @@ export const myPlugin = (): CliPlugin => ({
235
263
  Since the callback function when exiting the process in Node.js is synchronous, the type of `beforeExit` Hook is `Workflow` and cannot perform asynchronous operations.
236
264
  :::
237
265
 
266
+ ## CLI Framework Hooks
267
+
268
+ The following are the CLI Hooks of the framework, which can only be used in Modern.js Framework and cannot be used in Modern.js Module.
269
+
270
+ You need to import the `CliPlugin` and `AppTools` types from `@modern-js/app-tools` to get accurate type hints for Hooks.
271
+
238
272
  ### `beforeDev`
239
273
 
240
274
  - Functionality: Tasks before running the main dev process.
241
275
  - Execution phase: Before the project starts when the `dev` command is run.
242
- - Hook model: AsyncWorkflow
276
+ - Hook model: `AsyncWorkflow`
243
277
  - Type: `AsyncWorkflow<void, unknown>`
244
- - Example usage:
278
+ - Example:
245
279
 
246
280
  ```ts
247
- import type { CliPlugin } from '@modern-js/core';
281
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
248
282
 
249
- export const myPlugin = (): CliPlugin => ({
283
+ export const myPlugin = (): CliPlugin<AppTools> => ({
250
284
  setup(api) {
251
285
  return {
252
286
  beforeDev: () => {
@@ -260,15 +294,15 @@ export const myPlugin = (): CliPlugin => ({
260
294
  ### `afterDev`
261
295
 
262
296
  - Function: Tasks to be executed after the main process of `dev` command
263
- - Execution Stage: It is executed after each compilation is completed when running the `dev` command
264
- - Hook Model: AsyncWorkflow
297
+ - Execution stage: It is executed after each compilation is completed when running the `dev` command
298
+ - Hook model: `AsyncWorkflow`
265
299
  - Type: `AsyncWorkflow<{ isFirstCompile: boolean }, unknown>`
266
- - Usage Example:
300
+ - Example:
267
301
 
268
302
  ```ts
269
- import type { CliPlugin } from '@modern-js/core';
303
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
270
304
 
271
- export const myPlugin = (): CliPlugin => ({
305
+ export const myPlugin = (): CliPlugin<AppTools> => ({
272
306
  setup(api) {
273
307
  return {
274
308
  afterDev: () => {
@@ -282,9 +316,9 @@ export const myPlugin = (): CliPlugin => ({
282
316
  `afterDev` will be executed after each compilation is completed, you can use the `isFirstCompile` param to determine whether it is the first compilation:
283
317
 
284
318
  ```ts
285
- import type { CliPlugin } from '@modern-js/core';
319
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
286
320
 
287
- export const myPlugin = (): CliPlugin => ({
321
+ export const myPlugin = (): CliPlugin<AppTools> => ({
288
322
  setup(api) {
289
323
  return {
290
324
  afterDev: ({ isFirstCompile }) => {
@@ -297,113 +331,157 @@ export const myPlugin = (): CliPlugin => ({
297
331
  });
298
332
  ```
299
333
 
300
- ### `beforeCreateCompiler`
334
+ ### `beforeBuild`
301
335
 
302
- - Function: Provides access to the Webpack configuration used to create the Webpack Compiler within middleware functions.
303
- - Execution Stage: Executed before creating the Webpack Compiler.
304
- - Hook Model: AsyncWorkflow.
305
- - Type: `AsyncWorkflow<{ webpackConfigs: Configuration[];}, unknown>`.
306
- - Usage Example:
336
+ - Function: A callback function triggered before executing production environment builds. You can access the final configuration array of the underlying bundler through the `bundlerConfigs` parameter.
337
+ - If the current bundler is webpack, you will get the webpack Compiler object.
338
+ - If the current bundler is Rspack, you will get the Rspack Compiler object.
339
+ - The configuration array may contain one or multiple configurations, depending on whether you have enabled features such as SSR.
340
+ - Execution stage: Executed after running the `build` command and before the actual build process begins.
341
+ - Hook model: `AsyncWorkflow`.
342
+ - Type:
307
343
 
308
344
  ```ts
309
- import type { CliPlugin } from '@modern-js/core';
345
+ type BeforeBuild = AsyncWorkflow<{
346
+ bundlerConfigs: WebpackConfig[] | RspackConfig[];
347
+ }>;
348
+ ```
310
349
 
311
- export const myPlugin = (): CliPlugin => ({
350
+ - Example:
351
+
352
+ ```ts
353
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
354
+
355
+ export const myPlugin = (): CliPlugin<AppTools> => ({
312
356
  setup(api) {
313
357
  return {
314
- beforeCreateCompiler: ({ webpackConfigs }) => {
315
- // do something
358
+ beforeBuild: ({ bundlerConfigs }) => {
359
+ console.log('Before build.');
360
+ console.log(bundlerConfigs);
316
361
  },
317
362
  };
318
363
  },
319
364
  });
320
365
  ```
321
366
 
322
- ### `afterCreateCompiler`
367
+ ### `afterBuild`
323
368
 
324
- - Function: Provides access to the created Webpack Compiler within middleware functions.
325
- - Execution Stage: Executed after creating the Webpack Compiler.
326
- - Hook Model: AsyncWorkflow.
327
- - Type: `AsyncWorkflow<{ compiler: Compiler | MultiCompiler | undefined; }, unknown>`.
328
- - Usage Example:
369
+ - Function: A callback function triggered after running the production build. You can access the build result information through the `stats` parameter.
370
+ - If the current bundler is webpack, you will get webpack Stats.
371
+ - If the current bundler is Rspack, you will get Rspack Stats.
372
+ - Execution stage: It is executed after running the `build` command and completing the build.
373
+ - Hook model: `AsyncWorkflow`.
374
+ - Type:
329
375
 
330
376
  ```ts
331
- import type { CliPlugin } from '@modern-js/core';
377
+ type AfterBuild = AsyncWorkflow<{
378
+ stats?: Stats | MultiStats;
379
+ }>;
380
+ ```
332
381
 
333
- export const myPlugin = (): CliPlugin => ({
382
+ - Example:
383
+
384
+ ```ts
385
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
386
+
387
+ export const myPlugin = (): CliPlugin<AppTools> => ({
334
388
  setup(api) {
335
389
  return {
336
- afterCreateCompiler: ({ compiler }) => {
337
- // do something
390
+ afterBuild: ({ stats }) => {
391
+ console.log('After build.');
392
+ console.log(stats);
338
393
  },
339
394
  };
340
395
  },
341
396
  });
342
397
  ```
343
398
 
344
- ### `beforePrintInstructions`
399
+ ### `beforeCreateCompiler`
345
400
 
346
- - Function: Provides access to the log information that will be printed within middleware functions and allows modification of the log information.
347
- - Execution Stage: Executed before printing the log information.
348
- - Hook Model: AsyncWaterfall.
349
- - Type: `AsyncWaterfall<{ instructions: string }>`
350
- - Usage Example:
401
+ - Function: A callback function triggered before creating the underlying Compiler instance, and you can get the final configuration array of the underlying bundler through the `bundlerConfigs` parameter:
402
+ - If the current bundler is webpack, you will get the webpack Compiler object.
403
+ - If the current bundler is Rspack, you will get the Rspack Compiler object.
404
+ - The configuration array may contain one or multiple configurations, depending on whether you have enabled features such as SSR.
405
+ - Execution stage: Executed before creating the Compiler instance when running the `dev` or `build` command.
406
+ - Hook model: `AsyncWorkflow`.
407
+ - Type:
351
408
 
352
409
  ```ts
353
- import type { CliPlugin } from '@modern-js/core';
410
+ type BeforeCreateCompiler = AsyncWorkflow<
411
+ { bundlerConfigs: Configuration[] },
412
+ unknown
413
+ >;
414
+ ```
354
415
 
355
- export const myPlugin = (): CliPlugin => ({
416
+ - Example:
417
+
418
+ ```ts
419
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
420
+
421
+ export const myPlugin = (): CliPlugin<AppTools> => ({
356
422
  setup(api) {
357
423
  return {
358
- beforePrintInstructions: ({ instructions }) => {
359
- // do something
360
- return {
361
- instructions: [...instructions, 'some new message'],
362
- };
424
+ beforeCreateCompiler: ({ bundlerConfigs }) => {
425
+ console.log('Before create compiler.');
426
+ console.log(bundlerConfigs);
363
427
  },
364
428
  };
365
429
  },
366
430
  });
367
431
  ```
368
432
 
369
- ### `beforeBuild`
433
+ ### `afterCreateCompiler`
370
434
 
371
- - Function: Tasks to be executed before the main process of the `build` command, provides access to the Webpack configuration used for building.
372
- - Execution Stage: Executed before starting the project build when running the `build` command.
373
- - Hook Model: AsyncWorkflow.
374
- - Type: `AsyncWorkflow<{ webpackConfigs: Configuration[]; }>`.
375
- - Usage Example:
435
+ - Function: A callback function triggered after creating a Compiler instance and before executing the build. You can access the Compiler instance object through the `compiler` parameter:
436
+ - If the current bundler is webpack, you will get the webpack Compiler object.
437
+ - If the current bundler is Rspack, you will get the Rspack Compiler object.
438
+ - Execution stage: Executed after creating the Compiler object.
439
+ - Hook model: `AsyncWorkflow`.
440
+ - Type:
376
441
 
377
442
  ```ts
378
- import type { CliPlugin } from '@modern-js/core';
443
+ type AfterCreateCompiler = AsyncWorkflow<
444
+ { compiler: Compiler | MultiCompiler | undefined },
445
+ unknown
446
+ >;
447
+ ```
379
448
 
380
- export const myPlugin = (): CliPlugin => ({
449
+ - Example:
450
+
451
+ ```ts
452
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
453
+
454
+ export const myPlugin = (): CliPlugin<AppTools> => ({
381
455
  setup(api) {
382
456
  return {
383
- beforeBuild: () => {
384
- // do something
457
+ afterCreateCompiler: ({ compiler }) => {
458
+ console.log('After create compiler.');
459
+ console.log(compiler);
385
460
  },
386
461
  };
387
462
  },
388
463
  });
389
464
  ```
390
465
 
391
- ### `afterBuild`
466
+ ### `beforePrintInstructions`
392
467
 
393
- - Function: Tasks to be executed after the main process of the `build` command.
394
- - Execution Stage: Executed after the project build is completed when running the `build` command.
395
- - Hook Model: AsyncWorkflow.
396
- - Type: `AsyncWorkflow<void, unknown>`.
397
- - Usage Example:
468
+ - Function: Provides access to the log information that will be printed within middleware functions and allows modification of the log information.
469
+ - Execution stage: Executed before printing the log information.
470
+ - Hook model: `AsyncWaterfall`
471
+ - Type: `AsyncWaterfall<{ instructions: string }>`
472
+ - Example:
398
473
 
399
474
  ```ts
400
- import type { CliPlugin } from '@modern-js/core';
475
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
401
476
 
402
- export const myPlugin = (): CliPlugin => ({
477
+ export const myPlugin = (): CliPlugin<AppTools> => ({
403
478
  setup(api) {
404
479
  return {
405
- afterBuild: () => {
480
+ beforePrintInstructions: ({ instructions }) => {
406
481
  // do something
482
+ return {
483
+ instructions: [...instructions, 'some new message'],
484
+ };
407
485
  },
408
486
  };
409
487
  },
@@ -413,15 +491,15 @@ export const myPlugin = (): CliPlugin => ({
413
491
  ### `modifyEntryImports`
414
492
 
415
493
  - Function: Used for modifying or adding `import` statements in the generated entry files.
416
- - Execution Stage: Executed before generating the entry files, triggered during the [`prepare`](#prepare) stage.
417
- - Hook Model: AsyncWaterfall.
494
+ - Execution stage: Executed before generating the entry files, triggered during the [`prepare`](#prepare) stage.
495
+ - Hook model: `AsyncWaterfall`
418
496
  - Type: `AsyncWaterfall<{ imports: ImportStatement[]; entrypoint: Entrypoint; }>`
419
- - Usage Example:
497
+ - Example:
420
498
 
421
499
  ```ts
422
- import type { CliPlugin } from '@modern-js/core';
500
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
423
501
 
424
- export const myPlugin = (): CliPlugin => ({
502
+ export const myPlugin = (): CliPlugin<AppTools> => ({
425
503
  setup(api) {
426
504
  return {
427
505
  modifyEntryImports({ entrypoint, imports }) {
@@ -445,15 +523,15 @@ export const myPlugin = (): CliPlugin => ({
445
523
  ### `modifyEntryExport`
446
524
 
447
525
  - Function: used to modify the `export` statement in the generated entry file
448
- - Execution Stage: Before the entry file is generated, the [`prepare`](#prepare) phase triggers
449
- - Hook Model: AsyncWaterfall
526
+ - Execution stage: Before the entry file is generated, the [`prepare`](#prepare) phase triggers
527
+ - Hook model: `AsyncWaterfall`
450
528
  - Type: `AsyncWaterfall<{ entrypoint: Entrypoint; exportStatement: string; }>`
451
- - Example of use:
529
+ - Example:
452
530
 
453
531
  ```ts
454
- import type { CliPlugin } from '@modern-js/core';
532
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
455
533
 
456
- export const myPlugin = (): CliPlugin => ({
534
+ export const myPlugin = (): CliPlugin<AppTools> => ({
457
535
  setup(api) {
458
536
  return {
459
537
  modifyEntryExport({ entrypoint, exportStatement }) {
@@ -472,15 +550,15 @@ export const myPlugin = (): CliPlugin => ({
472
550
  ### `modifyEntryRuntimePlugins`
473
551
 
474
552
  - Function: Used for adding or modifying [Runtime plugins](#Runtime) in the generated entry files.
475
- - Execution Stage: Executed before generating the entry files, triggered during the [`prepare`](#prepare) stage.
476
- - Hook Model: AsyncWaterfall.
553
+ - Execution stage: Executed before generating the entry files, triggered during the [`prepare`](#prepare) stage.
554
+ - Hook model: `AsyncWaterfall`
477
555
  - Type: `AsyncWaterfall<{ entrypoint: Entrypoint; plugins: RuntimePlugin[]; }>`
478
- - Usage Example:
556
+ - Example:
479
557
 
480
558
  ```ts
481
- import type { CliPlugin } from '@modern-js/core';
559
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
482
560
 
483
- export const myPlugin = (): CliPlugin => ({
561
+ export const myPlugin = (): CliPlugin<AppTools> => ({
484
562
  setup(api) {
485
563
  return {
486
564
  modifyEntryRuntimePlugins({ entrypoint, plugins }) {
@@ -507,15 +585,15 @@ export const myPlugin = (): CliPlugin => ({
507
585
  ### `modifyEntryRenderFunction`
508
586
 
509
587
  - Function: Used for modifying the `render` function in the generated entry files.
510
- - Execution Stage: Executed before generating the entry files, triggered during the [`prepare`](#prepare) stage.
511
- - Hook Model: AsyncWaterfall.
588
+ - Execution stage: Executed before generating the entry files, triggered during the [`prepare`](#prepare) stage.
589
+ - Hook model: `AsyncWaterfall`
512
590
  - Type: `AsyncWaterfall<{ entrypoint: Entrypoint; code: string; }>`
513
- - Usage Example:
591
+ - Example:
514
592
 
515
593
  ```ts
516
- import type { CliPlugin } from '@modern-js/core';
594
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
517
595
 
518
- export const myPlugin = (): CliPlugin => ({
596
+ export const myPlugin = (): CliPlugin<AppTools> => ({
519
597
  setup(api) {
520
598
  return {
521
599
  modifyEntryRenderFunction({ entrypoint, code }) {
@@ -533,15 +611,15 @@ export const myPlugin = (): CliPlugin => ({
533
611
  ### `modifyFileSystemRoutes`
534
612
 
535
613
  - Function: Used for modifying the content of the generated front-end page routing files, which must be serializable.
536
- - Execution Stage: Executed before generating the front-end routing files, triggered during the [`prepare`](#prepare) stage.
537
- - Hook Model: AsyncWaterfall.
614
+ - Execution stage: Executed before generating the front-end routing files, triggered during the [`prepare`](#prepare) stage.
615
+ - Hook model: `AsyncWaterfall`
538
616
  - Type: `AsyncWaterfall<{ entrypoint: Entrypoint; routes: Route[]; }>`
539
- - Usage Example:
617
+ - Example:
540
618
 
541
619
  ```tsx
542
- import type { CliPlugin } from '@modern-js/core';
620
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
543
621
 
544
- export const myPlugin = (): CliPlugin => ({
622
+ export const myPlugin = (): CliPlugin<AppTools> => ({
545
623
  setup(api) {
546
624
  return {
547
625
  modifyFileSystemRoutes({ entrypoint, routes }) {
@@ -567,15 +645,15 @@ This adds a new page route for the front-end.
567
645
  ### `modifyServerRoutes`
568
646
 
569
647
  - Function: Used for modifying the content of the generated server routes.
570
- - Execution Stage: Executed before generating the server routing files, triggered during the [`prepare`](#prepare) stage.
571
- - Hook Model: AsyncWaterfall.
648
+ - Execution stage: Executed before generating the server routing files, triggered during the [`prepare`](#prepare) stage.
649
+ - Hook model: `AsyncWaterfall`
572
650
  - Type: `AsyncWaterfall<{ routes: ServerRoute[]; }>`
573
- - Usage Example:
651
+ - Example:
574
652
 
575
653
  ```ts
576
- import type { CliPlugin } from '@modern-js/core';
654
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
577
655
 
578
- export const myPlugin = (): CliPlugin => ({
656
+ export const myPlugin = (): CliPlugin<AppTools> => ({
579
657
  setup(api) {
580
658
  return {
581
659
  modifyServerRoutes({ routes }) {
@@ -600,15 +678,15 @@ export const myPlugin = (): CliPlugin => ({
600
678
  ### `modifyAsyncEntry`
601
679
 
602
680
  - Function: Used for modifying the asynchronous module that wraps the entry file, see [source.enableAsyncEntry](/configure/app/source/enable-async-entry).
603
- - Execution Stage: Executed before generating the entry files, triggered during the [`prepare`](#prepare) stage.
604
- - Hook Model: AsyncWaterfall.
681
+ - Execution stage: Executed before generating the entry files, triggered during the [`prepare`](#prepare) stage.
682
+ - Hook model: `AsyncWaterfall`
605
683
  - Type: `AsyncWaterfall<{ entrypoint: Entrypoint; code: string; }>`
606
- - Usage Example:
684
+ - Example:
607
685
 
608
686
  ```ts
609
- import type { CliPlugin } from '@modern-js/core';
687
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
610
688
 
611
- export const myPlugin = (): CliPlugin => ({
689
+ export const myPlugin = (): CliPlugin<AppTools> => ({
612
690
  setup(api) {
613
691
  return {
614
692
  modifyAsyncEntry({ entrypoint, code }) {
@@ -626,15 +704,15 @@ export const myPlugin = (): CliPlugin => ({
626
704
  ### `htmlPartials`
627
705
 
628
706
  - Function: Used for customizing the generated HTML page template.
629
- - Execution Stage: Triggered during the [`prepare`](#prepare) stage.
630
- - Hook Model: AsyncWaterfall.
707
+ - Execution stage: Triggered during the [`prepare`](#prepare) stage.
708
+ - Hook model: `AsyncWaterfall`
631
709
  - Type: `AsyncWaterfall<{ entrypoint: Entrypoint; partials: HtmlPartials; }>`
632
- - Usage Example:
710
+ - Example:
633
711
 
634
712
  ```ts
635
- import type { CliPlugin } from '@modern-js/core';
713
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
636
714
 
637
- export const myPlugin = (): CliPlugin => ({
715
+ export const myPlugin = (): CliPlugin<AppTools> => ({
638
716
  setup(api) {
639
717
  return {
640
718
  async htmlPartials({ entrypoint, partials }) {
@@ -662,10 +740,10 @@ Plugins are also supported in the Server section of the application project. The
662
740
  ### `create`
663
741
 
664
742
  - Function: In the middleware function, you will get the measurement tool configuration `measureOptions` and log tool configuration `loggerOptions` used for Server initialization, and return a custom measurement tool `measure` and log tool configuration `logger`.
665
- - Execution Stage: Server initialization.
666
- - Hook Model: AsyncPipeline.
743
+ - Execution stage: Server initialization.
744
+ - Hook model: `AsyncPipeline`
667
745
  - Type: `AsyncPipeline<ServerInitInput, InitExtension>`
668
- - Usage Example:
746
+ - Example:
669
747
 
670
748
  ```ts
671
749
  import type { ServerPlugin } from '@modern-js/server-core';
@@ -684,10 +762,10 @@ export const myPlugin = (): ServerPlugin => ({
684
762
  ### `prepareWebServer`
685
763
 
686
764
  - Function: Sets the handling function for the Web route. In the middleware function, you can get the front-end middleware of the Web server.
687
- - Execution Stage: When the request arrives.
688
- - Hook Model: AsyncPipeline.
765
+ - Execution stage: When the request arrives.
766
+ - Hook model: `AsyncPipeline`
689
767
  - Type: `AsyncPipeline<WebServerStartInput, Adapter>`
690
- - Usage Example:
768
+ - Example:
691
769
 
692
770
  ```ts
693
771
  import type { ServerPlugin } from '@modern-js/server-core';
@@ -710,10 +788,10 @@ export const myPlugin = (): ServerPlugin => ({
710
788
  ### `prepareApiServer`
711
789
 
712
790
  - Function: Sets the handling function for the API route. In the middleware function, you can get the front-end middleware of the API server.
713
- - Execution Stage: When the request arrives and matches the BFF basename.
714
- - Hook Model: AsyncPipeline.
791
+ - Execution stage: When the request arrives and matches the BFF basename.
792
+ - Hook model: `AsyncPipeline`
715
793
  - Type: `AsyncPipeline<APIServerStartInput, Adapter>`
716
- - Usage Example:
794
+ - Example:
717
795
 
718
796
  ```ts
719
797
  import type { ServerPlugin } from '@modern-js/server-core';
@@ -744,10 +822,10 @@ The Runtime plugin is mainly used for developers to modify the component that ne
744
822
  ### `init`
745
823
 
746
824
  - Function: Executes `App.init`.
747
- - Execution Stage: Rendering (SSR/CSR).
748
- - Hook Model: AsyncPipeline.
825
+ - Execution stage: Rendering (SSR/CSR).
826
+ - Hook model: `AsyncPipeline`
749
827
  - Type: `AsyncPipeline<{ context: RuntimeContext; }, unknown>`
750
- - Usage Example:
828
+ - Example:
751
829
 
752
830
  ```ts
753
831
  import type { Plugin } from '@modern-js/runtime';
@@ -767,10 +845,10 @@ export const myPlugin = (): Plugin => ({
767
845
  ### `hoc`
768
846
 
769
847
  - Function: Modifies the components that need to be rendered.
770
- - Execution Stage: Rendering (SSR/CSR).
771
- - Hook Model: Pipeline.
848
+ - Execution stage: Rendering (SSR/CSR).
849
+ - Hook model: `Pipeline`
772
850
  - Type: `Pipeline<{ App: React.ComponentType<any>; }, React.ComponentType<any>>`
773
- - Usage Example:
851
+ - Example:
774
852
 
775
853
  :::note
776
854
  When using the hoc hook, you need to copy the static properties of the original App component to the new component and pass through the props.
@@ -805,10 +883,10 @@ export const myPlugin = (): Plugin => ({
805
883
  {/* ### `provide`
806
884
 
807
885
  - Function: Modifies the Elements that need to be rendered.
808
- - Execution Stage: Rendering (SSR/CSR).
809
- - Hook Model: Pipeline.
886
+ - Execution stage: Rendering (SSR/CSR).
887
+ - Hook model: `Pipeline`
810
888
  - Type: `Pipeline<{ element: JSX.Element; props: AppProps; context: RuntimeContext }, JSX.Element>`
811
- - Usage Example:
889
+ - Example:
812
890
 
813
891
  ```ts
814
892
  import { createContext } from 'react';
@@ -828,10 +906,10 @@ export const myPlugin = (): Plugin => ({
828
906
  ### `client`
829
907
 
830
908
  - Function: Customizes the client-side rendering process.
831
- - Execution Stage: Client-side rendering in the browser.
832
- - Hook Model: AsyncPipeline.
909
+ - Execution stage: Client-side rendering in the browser.
910
+ - Hook model: `AsyncPipeline`
833
911
  - Type: `AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; rootElement: HTMLElement; }, void>`
834
- - Usage Example:
912
+ - Example:
835
913
 
836
914
  ```ts
837
915
  import ReactDOM from 'react-dom';
@@ -855,9 +933,9 @@ export const myPlugin = (): Plugin => ({
855
933
 
856
934
  - Function: Customize the server-side rendering process.
857
935
  - Execution Phase: SSR
858
- - Hook Model: AsyncPipeline
936
+ - Hook model: `AsyncPipeline`
859
937
  - Type: `AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; }, string>`
860
- - Usage Example:
938
+ - Example:
861
939
 
862
940
  ```ts
863
941
  import ReactDomServer from 'react-dom/server';