@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.
- package/CHANGELOG.md +16 -0
- package/docs/en/components/prerequisites.mdx +1 -1
- package/docs/en/configure/app/experiments/source-build.mdx +13 -0
- package/docs/en/configure/app/server/ssr.mdx +6 -5
- package/docs/en/configure/app/source/alias-strategy.mdx +13 -0
- package/docs/en/configure/app/tools/swc.mdx +3 -1
- package/docs/en/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/en/guides/get-started/quick-start.mdx +23 -3
- package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +222 -144
- package/docs/en/guides/topic-detail/generator/plugin/api/onForged.md +1 -1
- package/docs/en/tutorials/first-app/c03-css.mdx +3 -2
- package/docs/zh/components/prerequisites.mdx +1 -1
- package/docs/zh/configure/app/deploy/microFrontend.mdx +1 -1
- package/docs/zh/configure/app/experiments/source-build.mdx +13 -0
- package/docs/zh/configure/app/server/ssr.mdx +6 -5
- package/docs/zh/configure/app/source/alias-strategy.mdx +13 -0
- package/docs/zh/configure/app/tools/swc.mdx +3 -1
- package/docs/zh/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/zh/guides/advanced-features/using-storybook.mdx +1 -1
- package/docs/zh/guides/get-started/quick-start.mdx +28 -7
- package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +179 -101
- package/package.json +5 -5
@@ -5,17 +5,21 @@ sidebar_position: 8
|
|
5
5
|
|
6
6
|
# Hook List
|
7
7
|
|
8
|
-
Modern.js
|
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
|
-
|
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
|
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
|
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
|
-
|
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
|
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
|
-
```
|
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
|
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
|
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
|
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
|
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
|
278
|
+
- Example:
|
245
279
|
|
246
280
|
```ts
|
247
|
-
import type { CliPlugin } from '@modern-js/
|
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
|
264
|
-
- Hook
|
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
|
-
-
|
300
|
+
- Example:
|
267
301
|
|
268
302
|
```ts
|
269
|
-
import type { CliPlugin } from '@modern-js/
|
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/
|
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
|
-
### `
|
334
|
+
### `beforeBuild`
|
301
335
|
|
302
|
-
- Function:
|
303
|
-
-
|
304
|
-
-
|
305
|
-
-
|
306
|
-
-
|
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
|
-
|
345
|
+
type BeforeBuild = AsyncWorkflow<{
|
346
|
+
bundlerConfigs: WebpackConfig[] | RspackConfig[];
|
347
|
+
}>;
|
348
|
+
```
|
310
349
|
|
311
|
-
|
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
|
-
|
315
|
-
|
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
|
-
### `
|
367
|
+
### `afterBuild`
|
323
368
|
|
324
|
-
- Function:
|
325
|
-
-
|
326
|
-
-
|
327
|
-
-
|
328
|
-
-
|
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
|
-
|
377
|
+
type AfterBuild = AsyncWorkflow<{
|
378
|
+
stats?: Stats | MultiStats;
|
379
|
+
}>;
|
380
|
+
```
|
332
381
|
|
333
|
-
|
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
|
-
|
337
|
-
|
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
|
-
### `
|
399
|
+
### `beforeCreateCompiler`
|
345
400
|
|
346
|
-
- Function:
|
347
|
-
-
|
348
|
-
-
|
349
|
-
-
|
350
|
-
-
|
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
|
-
|
410
|
+
type BeforeCreateCompiler = AsyncWorkflow<
|
411
|
+
{ bundlerConfigs: Configuration[] },
|
412
|
+
unknown
|
413
|
+
>;
|
414
|
+
```
|
354
415
|
|
355
|
-
|
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
|
-
|
359
|
-
|
360
|
-
|
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
|
-
### `
|
433
|
+
### `afterCreateCompiler`
|
370
434
|
|
371
|
-
- Function:
|
372
|
-
-
|
373
|
-
-
|
374
|
-
-
|
375
|
-
-
|
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
|
-
|
443
|
+
type AfterCreateCompiler = AsyncWorkflow<
|
444
|
+
{ compiler: Compiler | MultiCompiler | undefined },
|
445
|
+
unknown
|
446
|
+
>;
|
447
|
+
```
|
379
448
|
|
380
|
-
|
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
|
-
|
384
|
-
|
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
|
-
### `
|
466
|
+
### `beforePrintInstructions`
|
392
467
|
|
393
|
-
- Function:
|
394
|
-
- Execution
|
395
|
-
- Hook
|
396
|
-
- Type: `
|
397
|
-
-
|
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/
|
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
|
-
|
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
|
417
|
-
- Hook
|
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
|
-
-
|
497
|
+
- Example:
|
420
498
|
|
421
499
|
```ts
|
422
|
-
import type { CliPlugin } from '@modern-js/
|
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
|
449
|
-
- Hook
|
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
|
529
|
+
- Example:
|
452
530
|
|
453
531
|
```ts
|
454
|
-
import type { CliPlugin } from '@modern-js/
|
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
|
476
|
-
- Hook
|
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
|
-
-
|
556
|
+
- Example:
|
479
557
|
|
480
558
|
```ts
|
481
|
-
import type { CliPlugin } from '@modern-js/
|
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
|
511
|
-
- Hook
|
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
|
-
-
|
591
|
+
- Example:
|
514
592
|
|
515
593
|
```ts
|
516
|
-
import type { CliPlugin } from '@modern-js/
|
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
|
537
|
-
- Hook
|
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
|
-
-
|
617
|
+
- Example:
|
540
618
|
|
541
619
|
```tsx
|
542
|
-
import type { CliPlugin } from '@modern-js/
|
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
|
571
|
-
- Hook
|
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
|
-
-
|
651
|
+
- Example:
|
574
652
|
|
575
653
|
```ts
|
576
|
-
import type { CliPlugin } from '@modern-js/
|
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
|
604
|
-
- Hook
|
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
|
-
-
|
684
|
+
- Example:
|
607
685
|
|
608
686
|
```ts
|
609
|
-
import type { CliPlugin } from '@modern-js/
|
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
|
630
|
-
- Hook
|
707
|
+
- Execution stage: Triggered during the [`prepare`](#prepare) stage.
|
708
|
+
- Hook model: `AsyncWaterfall`
|
631
709
|
- Type: `AsyncWaterfall<{ entrypoint: Entrypoint; partials: HtmlPartials; }>`
|
632
|
-
-
|
710
|
+
- Example:
|
633
711
|
|
634
712
|
```ts
|
635
|
-
import type { CliPlugin } from '@modern-js/
|
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
|
666
|
-
- Hook
|
743
|
+
- Execution stage: Server initialization.
|
744
|
+
- Hook model: `AsyncPipeline`
|
667
745
|
- Type: `AsyncPipeline<ServerInitInput, InitExtension>`
|
668
|
-
-
|
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
|
688
|
-
- Hook
|
765
|
+
- Execution stage: When the request arrives.
|
766
|
+
- Hook model: `AsyncPipeline`
|
689
767
|
- Type: `AsyncPipeline<WebServerStartInput, Adapter>`
|
690
|
-
-
|
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
|
714
|
-
- Hook
|
791
|
+
- Execution stage: When the request arrives and matches the BFF basename.
|
792
|
+
- Hook model: `AsyncPipeline`
|
715
793
|
- Type: `AsyncPipeline<APIServerStartInput, Adapter>`
|
716
|
-
-
|
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
|
748
|
-
- Hook
|
825
|
+
- Execution stage: Rendering (SSR/CSR).
|
826
|
+
- Hook model: `AsyncPipeline`
|
749
827
|
- Type: `AsyncPipeline<{ context: RuntimeContext; }, unknown>`
|
750
|
-
-
|
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
|
771
|
-
- Hook
|
848
|
+
- Execution stage: Rendering (SSR/CSR).
|
849
|
+
- Hook model: `Pipeline`
|
772
850
|
- Type: `Pipeline<{ App: React.ComponentType<any>; }, React.ComponentType<any>>`
|
773
|
-
-
|
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
|
809
|
-
- Hook
|
886
|
+
- Execution stage: Rendering (SSR/CSR).
|
887
|
+
- Hook model: `Pipeline`
|
810
888
|
- Type: `Pipeline<{ element: JSX.Element; props: AppProps; context: RuntimeContext }, JSX.Element>`
|
811
|
-
-
|
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
|
832
|
-
- Hook
|
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
|
-
-
|
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
|
936
|
+
- Hook model: `AsyncPipeline`
|
859
937
|
- Type: `AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; }, string>`
|
860
|
-
-
|
938
|
+
- Example:
|
861
939
|
|
862
940
|
```ts
|
863
941
|
import ReactDomServer from 'react-dom/server';
|