@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,15 +5,19 @@ sidebar_position: 8
5
5
 
6
6
  # Hook 列表
7
7
 
8
- Modern.js 中暴露了三类插件:CLI、Runtime、Server。下面列举下各类中的 Hook:
8
+ Modern.js 工程体系中包含三类插件:CLI、Runtime、Server,每一类插件可以使用不同的 Hooks。
9
9
 
10
- ## CLI
10
+ 在本章节中,罗列了所有可用的 Hooks,你可以根据自己的需求来使用对应的 Hook。
11
+
12
+ ## CLI Common Hooks
13
+
14
+ 以下是通用的 CLI Hooks,可以在 Modern.js Framework 以及 Modern.js Module 中使用。
11
15
 
12
16
  ### `beforeConfig`
13
17
 
14
18
  - 功能:运行收集配置前的任务
15
19
  - 执行阶段:收集配置前
16
- - Hook 模型:AsyncWorkflow
20
+ - Hook 模型:`AsyncWorkflow`
17
21
  - 类型:`AsyncWorkflow<void, void>`
18
22
  - 使用示例:
19
23
 
@@ -35,7 +39,7 @@ export const myPlugin = (): CliPlugin => ({
35
39
 
36
40
  - 功能:收集配置
37
41
  - 执行阶段:解析完 `modern.config.ts` 中的配置之后
38
- - Hook 模型:ParallelWorkflow
42
+ - Hook 模型:`ParallelWorkflow`
39
43
  - 类型:`ParallelWorkflow<void, unknown>`
40
44
  - 使用示例:
41
45
 
@@ -55,13 +59,37 @@ export const myPlugin = (): CliPlugin => ({
55
59
  });
56
60
  ```
57
61
 
58
- 这里返回的配置信息,会被收集和统一处理合并。
62
+ 如果你需要设置 Modern.js Framework 的配置,请使用 `@modern-js/app-tools` 导出的 `CliPlugin<AppTools>` 类型:
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
+ 插件在 `config` hook 中返回的配置信息,会被 Modern.js 统一收集与合并,最终生成一份 `NormalizedConfig`。在进行配置合并时,优先级由高到低依次为:
83
+
84
+ 1. 用户在 `modern.config.*` 文件里定义的配置
85
+ 2. 插件通过 `config` hook 定义的配置
86
+ 3. Modern.js 默认配置。
59
87
 
60
88
  ### `validateSchema`
61
89
 
62
90
  - 功能:收集各个插件中配置的用来校验用户配置的 [JSON Schema](https://json-schema.org/)
63
- - 执行阶段:`config` Hook 运行完之后。
64
- - Hook 模型:ParallelWorkflow
91
+ - 执行阶段:`config` Hook 运行完成之后。
92
+ - Hook 模型:`ParallelWorkflow`
65
93
  - 类型:`ParallelWorkflow<void, unknown>`
66
94
  - 使用示例:
67
95
 
@@ -116,7 +144,7 @@ export const myPlugin = defineConfig({
116
144
 
117
145
  就会报错:
118
146
 
119
- ```sh
147
+ ```
120
148
  $ modern dev
121
149
  1 | {
122
150
  > 2 | "foo": {},
@@ -127,7 +155,7 @@ $ modern dev
127
155
 
128
156
  - 功能:运行主流程的前置准备流程
129
157
  - 执行阶段:校验完配置之后
130
- - Hook 模型:AsyncWorkflow
158
+ - Hook 模型:`AsyncWorkflow`
131
159
  - 类型:`AsyncWorkflow<void, void>`
132
160
  - 使用示例:
133
161
 
@@ -149,7 +177,7 @@ export const myPlugin = (): CliPlugin => ({
149
177
 
150
178
  - 功能:运行前置准备流程的之后的任务
151
179
  - 执行阶段:前置准备流程之后
152
- - Hook 模型:AsyncWorkflow
180
+ - Hook 模型:`AsyncWorkflow`
153
181
  - 类型:`AsyncWorkflow<void, void>`
154
182
  - 使用示例:
155
183
 
@@ -169,9 +197,9 @@ export const myPlugin = (): CliPlugin => ({
169
197
 
170
198
  ### `commands`
171
199
 
172
- - 功能:为 command 添加新的命令
173
- - 执行阶段:`prepare` Hook 运行完之后
174
- - Hook 模型:AsyncWorkflow
200
+ - 功能:为 commander 添加新的 CLI 命令
201
+ - 执行阶段:`prepare` Hook 运行完成之后
202
+ - Hook 模型:`AsyncWorkflow`
175
203
  - 类型:`AsyncWorkflow<{ program: Command; }, void>`
176
204
  - 使用示例:
177
205
 
@@ -213,7 +241,7 @@ foo
213
241
 
214
242
  - 功能:在退出进程前,重置一些文件状态
215
243
  - 执行阶段:进程退出之前
216
- - Hook 模型:Workflow
244
+ - Hook 模型:`Workflow`
217
245
  - 类型:`Workflow<void, void>`
218
246
  - 使用示例:
219
247
 
@@ -235,18 +263,24 @@ export const myPlugin = (): CliPlugin => ({
235
263
  由于 Node.js 中退出进程时的回调函数是同步的,所以 `beforeExit` Hook 的类型是 `Workflow`,不能执行异步操作。
236
264
  :::
237
265
 
266
+ ## CLI Framework Hooks
267
+
268
+ 以下是框架的 CLI Hooks,只能在 Modern.js Framework 中使用,不能在 Modern.js Module 中使用。
269
+
270
+ 你需要从 `@modern-js/app-tools` 中导入 `CliPlugin` 和 `AppTools` 类型,以获得准确的 Hooks 类型提示。
271
+
238
272
  ### `beforeDev`
239
273
 
240
274
  - 功能:运行 dev 主流程的之前的任务
241
275
  - 执行阶段:`dev` 命令运行时,项目开始启动前执行
242
- - Hook 模型:AsyncWorkflow
276
+ - Hook 模型:`AsyncWorkflow`
243
277
  - 类型:`AsyncWorkflow<void, unknown>`
244
278
  - 使用示例:
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: () => {
@@ -261,14 +295,14 @@ export const myPlugin = (): CliPlugin => ({
261
295
 
262
296
  - 功能:运行 dev 主流程的之后的任务
263
297
  - 执行阶段:运行 `dev` 命令时,每一次编译完成后执行
264
- - Hook 模型:AsyncWorkflow
298
+ - Hook 模型:`AsyncWorkflow`
265
299
  - 类型:`AsyncWorkflow<{ isFirstCompile: boolean }, unknown>`
266
300
  - 使用示例:
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` 会在每一次编译完成后执行,你可以通过 `isFirstCompile` 参数来判断是否为首次编译:
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`
335
+
336
+ - 功能:在执行生产环境构建前触发的回调函数,你可以通过 `bundlerConfigs` 参数获取到底层打包工具的最终配置数组。
337
+ - 如果当前打包工具为 webpack,则获取到的是 webpack 配置数组。
338
+ - 如果当前打包工具为 Rspack,则获取到的是 Rspack 配置数组。
339
+ - 配置数组中可能包含一份或多份配置,这取决于你是否开启了 SSR 等功能。
340
+ - 执行阶段:运行 `build` 命令后,在开始构建前执行
341
+ - Hook 模型:`AsyncWorkflow`
342
+ - 类型:
343
+
344
+ ```ts
345
+ type BeforeBuild = AsyncWorkflow<{
346
+ bundlerConfigs: WebpackConfig[] | RspackConfig[];
347
+ }>;
348
+ ```
301
349
 
302
- - 功能:在中间件函数中可以拿到创建 Webpack Compiler 的 Webpack 配置
303
- - 执行阶段:创建 Webpack Compiler 之前执行
304
- - Hook 模型:AsyncWorkflow
305
- - 类型:`AsyncWorkflow<{ webpackConfigs: Configuration[];}, unknown>`
306
350
  - 使用示例:
307
351
 
308
352
  ```ts
309
- import type { CliPlugin } from '@modern-js/core';
353
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
310
354
 
311
- export const myPlugin = (): CliPlugin => ({
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`
368
+
369
+ - 功能:在执行生产环境构建后触发的回调函数,你可以通过 `stats` 参数获取到构建结果信息。
370
+ - 如果当前打包工具为 webpack,则获取到的是 webpack Stats。
371
+ - 如果当前打包工具为 Rspack,则获取到的是 Rspack Stats。
372
+ - 执行阶段:运行 `build` 命令运行后,在项目构建完成之后执行
373
+ - Hook 模型:`AsyncWorkflow`
374
+ - 类型:
375
+
376
+ ```ts
377
+ type AfterBuild = AsyncWorkflow<{
378
+ stats?: Stats | MultiStats;
379
+ }>;
380
+ ```
323
381
 
324
- - 功能:在中间件函数中可以拿到创建的 Webpack Compiler
325
- - 执行阶段:创建 Webpack Compiler 之后执行
326
- - Hook 模型:AsyncWorkflow
327
- - 类型:`AsyncWorkflow<{ compiler: Compiler | MultiCompiler | undefined; }, unknown>`
328
382
  - 使用示例:
329
383
 
330
384
  ```ts
331
- import type { CliPlugin } from '@modern-js/core';
385
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
332
386
 
333
- export const myPlugin = (): CliPlugin => ({
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`
400
+
401
+ - 功能:在创建底层 Compiler 实例前触发的回调函数,并且你可以通过 `bundlerConfigs` 参数获取到底层打包工具的最终配置数组:
402
+ - 如果当前打包工具为 webpack,则获取到的是 webpack 配置数组。
403
+ - 如果当前打包工具为 Rspack,则获取到的是 Rspack 配置数组。
404
+ - 配置数组中可能包含一份或多份配置,这取决于你是否开启了 SSR 等功能。
405
+ - 执行阶段:在执行 dev 或 build 命令时,创建 Compiler 实例之前执行
406
+ - Hook 模型:`AsyncWorkflow`
407
+ - 类型:
408
+
409
+ ```ts
410
+ type BeforeCreateCompiler = AsyncWorkflow<
411
+ { bundlerConfigs: Configuration[] },
412
+ unknown
413
+ >;
414
+ ```
345
415
 
346
- - 功能:在中间件函数中可以拿到即将打印的日志信息,并对其进行修改
347
- - 执行阶段:打印日志信息之前执行
348
- - Hook 模型:AsyncWaterfall
349
- - 类型:`AsyncWaterfall<{ instructions: string }>`
350
416
  - 使用示例:
351
417
 
352
418
  ```ts
353
- import type { CliPlugin } from '@modern-js/core';
419
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
354
420
 
355
- export const myPlugin = (): CliPlugin => ({
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`
434
+
435
+ - 功能:在创建 Compiler 实例后、执行构建前触发的回调函数,并且你可以通过 `compiler` 参数获取到 Compiler 实例对象:
436
+ - 如果当前打包工具为 webpack,则获取到的是 webpack Compiler 对象。
437
+ - 如果当前打包工具为 Rspack,则获取到的是 Rspack Compiler 对象。
438
+ - 执行阶段:创建 Compiler 对象之后执行
439
+ - Hook 模型:`AsyncWorkflow`
440
+ - 类型:
441
+
442
+ ```ts
443
+ type AfterCreateCompiler = AsyncWorkflow<
444
+ { compiler: Compiler | MultiCompiler | undefined },
445
+ unknown
446
+ >;
447
+ ```
370
448
 
371
- - 功能:运行 build 主流程的之前的任务,可以拿到构建的 Webpack 配置
372
- - 执行阶段:`build` 命令运行时,项目构建启动前执行
373
- - Hook 模型:AsyncWorkflow
374
- - 类型:`AsyncWorkflow<{ webpackConfigs: Configuration[]; }>`
375
449
  - 使用示例:
376
450
 
377
451
  ```ts
378
- import type { CliPlugin } from '@modern-js/core';
452
+ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
379
453
 
380
- export const myPlugin = (): CliPlugin => ({
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
- - 功能:运行 build 主流程的之后的任务
394
- - 执行阶段:`build` 命令运行时,项目构建完成之后执行
395
- - Hook 模型:AsyncWorkflow
396
- - 类型:`AsyncWorkflow<void, unknown>`
468
+ - 功能:在中间件函数中可以拿到即将打印的日志信息,并对其进行修改
469
+ - 执行阶段:打印日志信息之前执行
470
+ - Hook 模型:`AsyncWaterfall`
471
+ - 类型:`AsyncWaterfall<{ instructions: string }>`
397
472
  - 使用示例:
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
  },
@@ -414,14 +492,14 @@ export const myPlugin = (): CliPlugin => ({
414
492
 
415
493
  - 功能:用于修改、添加生成入口文件中的 `import` 语句
416
494
  - 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
417
- - Hook 模型:AsyncWaterfall
495
+ - Hook 模型:`AsyncWaterfall`
418
496
  - 类型:`AsyncWaterfall<{ imports: ImportStatement[]; entrypoint: Entrypoint; }>`
419
497
  - 使用示例:
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 }) {
@@ -446,14 +524,14 @@ export const myPlugin = (): CliPlugin => ({
446
524
 
447
525
  - 功能:用于修改生成入口文件中的 `export` 语句
448
526
  - 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
449
- - Hook 模型:AsyncWaterfall
527
+ - Hook 模型:`AsyncWaterfall`
450
528
  - 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; exportStatement: string; }>`
451
529
  - 使用示例:
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 }) {
@@ -473,14 +551,14 @@ export const myPlugin = (): CliPlugin => ({
473
551
 
474
552
  - 功能:用于添加、修改生成入口文件中的 [Runtime 插件](#Runtime)
475
553
  - 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
476
- - Hook 模型:AsyncWaterfall
554
+ - Hook 模型:`AsyncWaterfall`
477
555
  - 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; plugins: RuntimePlugin[]; }>`
478
556
  - 使用示例:
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 }) {
@@ -508,14 +586,14 @@ export const myPlugin = (): CliPlugin => ({
508
586
 
509
587
  - 功能:用于修改生成入口文件中 `render` 函数
510
588
  - 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
511
- - Hook 模型:AsyncWaterfall
589
+ - Hook 模型:`AsyncWaterfall`
512
590
  - 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; code: string; }>`
513
591
  - 使用示例:
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 }) {
@@ -534,14 +612,14 @@ export const myPlugin = (): CliPlugin => ({
534
612
 
535
613
  - 功能:用于修改生成前端页面路由文件中的内容,内容都是需要可序列化的
536
614
  - 执行阶段:生成前端路由文件之前,[`prepare`](#prepare) 阶段触发
537
- - Hook 模型:AsyncWaterfall
615
+ - Hook 模型:`AsyncWaterfall`
538
616
  - 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; routes: Route[]; }>`
539
617
  - 使用示例:
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 }) {
@@ -568,14 +646,14 @@ export const myPlugin = (): CliPlugin => ({
568
646
 
569
647
  - 功能:用于修改生成服务器路由中的内容
570
648
  - 执行阶段:生成 Server 路由文件之前,[`prepare`](#prepare) 阶段触发
571
- - Hook 模型:AsyncWaterfall
649
+ - Hook 模型:`AsyncWaterfall`
572
650
  - 类型:`AsyncWaterfall<{ routes: ServerRoute[]; }>`
573
651
  - 使用示例:
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 }) {
@@ -601,14 +679,14 @@ export const myPlugin = (): CliPlugin => ({
601
679
 
602
680
  - 功能:用于修改包裹入口文件的异步模块,参见 [source.enableAsyncEntry](/configure/app/source/enable-async-entry)
603
681
  - 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
604
- - Hook 模型:AsyncWaterfall
682
+ - Hook 模型:`AsyncWaterfall`
605
683
  - 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; code: string; }>`
606
684
  - 使用示例:
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 }) {
@@ -627,14 +705,14 @@ export const myPlugin = (): CliPlugin => ({
627
705
 
628
706
  - 功能:用于定制生成的 HTML 页面模版
629
707
  - 执行阶段:[`prepare`](#prepare) 阶段触发
630
- - Hook 模型:AsyncWaterfall
708
+ - Hook 模型:`AsyncWaterfall`
631
709
  - 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; partials: HtmlPartials; }>`
632
710
  - 使用示例:
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 }) {
@@ -664,7 +742,7 @@ export const myPlugin = (): CliPlugin => ({
664
742
 
665
743
  - 功能:在中间件函数中会拿到 Server 初始化用到的指标测量工具配置 `measureOptions` 和日志工具配置 `loggerOptions`,并返回自定义的指标测量工具 `measure` 和日志工具配置 `logger`
666
744
  - 执行阶段:Server 初始化
667
- - Hook 模型:AsyncPipeline
745
+ - Hook 模型:`AsyncPipeline`
668
746
  - 类型:`AsyncPipeline<ServerInitInput, InitExtension>`
669
747
  - 使用示例:
670
748
 
@@ -686,7 +764,7 @@ export const myPlugin = (): ServerPlugin => ({
686
764
 
687
765
  - 功能:设置 Web 路由的处理函数,在中间件函数中可以拿到 Web Server 的前置中间件
688
766
  - 执行阶段:在请求到达的时候
689
- - Hook 模型:AsyncPipeline
767
+ - Hook 模型:`AsyncPipeline`
690
768
  - 类型:`AsyncPipeline<WebServerStartInput, Adapter>`
691
769
  - 使用示例:
692
770
 
@@ -712,7 +790,7 @@ export const myPlugin = (): ServerPlugin => ({
712
790
 
713
791
  - 功能:设置 API 路由的处理函数,在中间件函数中可以拿到 API Server 的前置中间件
714
792
  - 执行阶段:请求到达并且 match bff basename 之后执行
715
- - Hook 模型:AsyncPipeline
793
+ - Hook 模型:`AsyncPipeline`
716
794
  - 类型:`AsyncPipeline<APIServerStartInput, Adapter>`
717
795
  - 使用示例:
718
796
 
@@ -747,7 +825,7 @@ Runtime 插件主要用于开发者修改需要渲染的组件。
747
825
 
748
826
  - 功能:执行 `App.init`
749
827
  - 执行阶段:渲染(SSR/CSR)
750
- - Hook 模型:AsyncPipeline
828
+ - Hook 模型:`AsyncPipeline`
751
829
  - 类型:`AsyncPipeline<{ context: RuntimeContext; }, unknown>`
752
830
  - 使用示例:
753
831
 
@@ -770,7 +848,7 @@ export const myPlugin = (): Plugin => ({
770
848
 
771
849
  - 功能:修改需要渲染的组件
772
850
  - 执行阶段:渲染(SSR/CSR)
773
- - Hook 模型:Pipeline
851
+ - Hook 模型:`Pipeline`
774
852
  - 类型:`Pipeline<{ App: React.ComponentType<any>; }, React.ComponentType<any>>`
775
853
  - 使用示例:
776
854
 
@@ -808,7 +886,7 @@ export const myPlugin = (): Plugin => ({
808
886
 
809
887
  - 功能:修改需要渲染的 Element
810
888
  - 执行阶段:渲染(SSR/CSR)
811
- - Hook 模型:Pipeline
889
+ - Hook 模型:`Pipeline`
812
890
  - 类型:`Pipeline<{ element: JSX.Element; props: AppProps; context: RuntimeContext }, JSX.Element>`
813
891
  - 使用示例:
814
892
 
@@ -831,7 +909,7 @@ export const myPlugin = (): Plugin => ({
831
909
 
832
910
  - 功能:定制客户端渲染流程
833
911
  - 执行阶段:在浏览器客户端渲染
834
- - Hook 模型:AsyncPipeline
912
+ - Hook 模型:`AsyncPipeline`
835
913
  - 类型:`AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; rootElement: HTMLElement; }, void>`
836
914
  - 使用示例:
837
915
 
@@ -857,7 +935,7 @@ export const myPlugin = (): Plugin => ({
857
935
 
858
936
  - 功能:定制服务器端渲染流程
859
937
  - 执行阶段:SSR
860
- - Hook 模型:AsyncPipeline
938
+ - Hook 模型:`AsyncPipeline`
861
939
  - 类型:`AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; }, string>`
862
940
  - 使用示例:
863
941
 
package/package.json CHANGED
@@ -15,14 +15,14 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "2.25.2",
18
+ "version": "2.27.0",
19
19
  "publishConfig": {
20
20
  "registry": "https://registry.npmjs.org/",
21
21
  "access": "public",
22
22
  "provenance": true
23
23
  },
24
24
  "peerDependencies": {
25
- "@modern-js/builder-doc": "^2.25.2"
25
+ "@modern-js/builder-doc": "^2.27.0"
26
26
  },
27
27
  "devDependencies": {
28
28
  "classnames": "^2",
@@ -34,9 +34,9 @@
34
34
  "fs-extra": "^10",
35
35
  "@types/node": "^16",
36
36
  "@types/fs-extra": "^9",
37
- "@modern-js/builder-doc": "2.25.2",
38
- "@modern-js/doc-plugin-auto-sidebar": "2.25.2",
39
- "@modern-js/doc-tools": "2.25.2"
37
+ "@modern-js/builder-doc": "2.27.0",
38
+ "@modern-js/doc-tools": "2.27.0",
39
+ "@modern-js/doc-plugin-auto-sidebar": "2.27.0"
40
40
  },
41
41
  "scripts": {
42
42
  "dev": "modern dev",