@modern-js/main-doc 2.54.6 → 2.55.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.
Files changed (41) hide show
  1. package/docs/en/apis/app/hooks/src/entry.mdx +42 -0
  2. package/docs/en/apis/app/hooks/src/entry.server.mdx +52 -0
  3. package/docs/en/apis/app/hooks/src/index_.mdx +4 -0
  4. package/docs/en/apis/app/runtime/core/bootstrap.mdx +4 -0
  5. package/docs/en/apis/app/runtime/core/create-app.mdx +5 -1
  6. package/docs/en/apis/app/runtime/core/create-root.mdx +22 -0
  7. package/docs/en/apis/app/runtime/core/render.mdx +42 -0
  8. package/docs/en/apis/app/runtime/ssr/renderStreaming.mdx +69 -0
  9. package/docs/en/apis/app/runtime/ssr/renderString.mdx +62 -0
  10. package/docs/en/apis/app/runtime/ssr/requestHandler.mdx +47 -0
  11. package/docs/en/components/debug-app.mdx +3 -3
  12. package/docs/en/configure/app/output/ssg.mdx +4 -0
  13. package/docs/en/configure/app/source/enable-async-entry.mdx +4 -4
  14. package/docs/en/configure/app/source/enable-custom-entry.mdx +41 -0
  15. package/docs/en/guides/advanced-features/ssr/cache.mdx +7 -2
  16. package/docs/en/guides/concept/entries.mdx +50 -36
  17. package/docs/en/guides/get-started/quick-start.mdx +24 -8
  18. package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +30 -177
  19. package/docs/zh/apis/app/hooks/src/entry.mdx +42 -0
  20. package/docs/zh/apis/app/hooks/src/entry.server.mdx +52 -0
  21. package/docs/zh/apis/app/hooks/src/index_.mdx +4 -0
  22. package/docs/zh/apis/app/runtime/core/bootstrap.mdx +4 -0
  23. package/docs/zh/apis/app/runtime/core/create-app.mdx +5 -1
  24. package/docs/zh/apis/app/runtime/core/create-root.mdx +22 -0
  25. package/docs/zh/apis/app/runtime/core/render.mdx +43 -0
  26. package/docs/zh/apis/app/runtime/ssr/renderStreaming.mdx +69 -0
  27. package/docs/zh/apis/app/runtime/ssr/renderString.mdx +62 -0
  28. package/docs/zh/apis/app/runtime/ssr/requestHandler.mdx +47 -0
  29. package/docs/zh/components/debug-app.mdx +3 -2
  30. package/docs/zh/configure/app/dev/client.mdx +1 -1
  31. package/docs/zh/configure/app/output/ssg.mdx +4 -0
  32. package/docs/zh/configure/app/source/enable-async-entry.mdx +4 -4
  33. package/docs/zh/configure/app/source/enable-custom-entry.mdx +41 -0
  34. package/docs/zh/guides/advanced-features/ssr/cache.mdx +6 -2
  35. package/docs/zh/guides/concept/entries.mdx +54 -41
  36. package/docs/zh/guides/get-started/quick-start.mdx +26 -10
  37. package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +29 -174
  38. package/package.json +5 -5
  39. package/docs/en/apis/app/hooks/src/pages.mdx +0 -186
  40. package/docs/zh/apis/app/hooks/src/pages.mdx +0 -187
  41. package/docs/zh/apis/monorepo/commands/deploy.mdx +0 -38
@@ -9,6 +9,10 @@ sidebar_label: ssg
9
9
 
10
10
  开启**自控式路由**或**约定式路由** SSG 功能的配置。
11
11
 
12
+ :::info 开启 SSG 功能
13
+ 此配置需要在开启 SSG 功能情况下才会生效。请阅读 [静态站点生成](/guides/advanced-features/ssg) 文档了解如何开启 SSG 功能。
14
+ :::
15
+
12
16
  :::info 客户端路由
13
17
  相关内容可以查看[路由方案](/guides/basic-features/routes)。
14
18
 
@@ -35,15 +35,15 @@ export default defineConfig({
35
35
  node_modules
36
36
  └─ .modern-js
37
37
  └─ main
38
- ├─ bootstrap.jsx # 真正的入口代码
39
- ├─ index.js # 异步入口文件(asynchronous boundary)
38
+ ├─ bootstrap.jsx # 异步入口文件(asynchronous boundary)
39
+ ├─ index.js # 真正的入口代码
40
40
  └─ index.html
41
41
  ```
42
42
 
43
- 其中 `index.js` 的内容如下:
43
+ 其中 `bootstrap.js` 的内容如下:
44
44
 
45
45
  ```js
46
- import('./bootstrap.jsx');
46
+ import('./index.jsx');
47
47
  ```
48
48
 
49
49
  此时,就可以在当前页面中消费任意的远程模块了。
@@ -0,0 +1,41 @@
1
+ ---
2
+ sidebar_label: enableCustomEntry
3
+ ---
4
+
5
+ # source.enableCustomEntry
6
+
7
+ - **类型:** `boolean`
8
+ - **默认值:** `false`
9
+
10
+ 该选项用于使用 Modern.js 自定义入口场景。
11
+
12
+ 开启此选项后,Modern.js 将使用 `src/entry.[jt]sx` 文件作为项目的入口, 具体使用姿势可参考[页面入口](/guides/concept/entries.html)。
13
+
14
+ ## 示例
15
+
16
+ 首先,在配置文件中开启此选项:
17
+
18
+ ```ts title="modern.config.ts"
19
+ export default defineConfig({
20
+ source: {
21
+ enableCustomEntry: true,
22
+ },
23
+ });
24
+ ```
25
+
26
+ 创建 `src/entry.tsx` 文件:
27
+
28
+ ```tsx
29
+ import { createRoot } from '@modern-js/runtime/react';
30
+ import { render } from '@modern-js/runtime/browser';
31
+
32
+ const ModernRoot = createRoot();
33
+
34
+ async function beforeRender() {
35
+ // todo
36
+ }
37
+
38
+ beforeRender().then(() => {
39
+ render(<ModernRoot />);
40
+ });
41
+ ```
@@ -55,10 +55,10 @@ export interface CacheControl {
55
55
  ```ts
56
56
  export type CacheOptionProvider = (
57
57
  req: IncomingMessage,
58
- ) => Promise<CacheControl> | CacheControl;
58
+ ) => Promise<CacheControl | false> | CacheControl | false;
59
59
  ```
60
60
 
61
- 有时开发者需要通过 req 来自定义缓存 key,可以配置为函数的形式进行处理, 例如以下代码:
61
+ 有时开发者需要通过 req 来自定义缓存 key,或者特定 url 时缓存不生效,可以配置为函数的形式进行处理, 例如以下代码:
62
62
 
63
63
  ```ts title="server/cache.ts"
64
64
 
@@ -69,6 +69,10 @@ const provider: CacheOptionProvider = (req) => {
69
69
 
70
70
  const key = computedKey(url, headers, ...);
71
71
 
72
+ if(url.includes('no-cache=1')) {
73
+ return false;
74
+ }
75
+
72
76
  return {
73
77
  maxAge: 500, // ms
74
78
  staleWhileRevalidate: 1000, // ms
@@ -81,12 +81,14 @@ import EntryMode from '@site-docs/components/entry-mode.mdx';
81
81
 
82
82
  :::
83
83
 
84
- 并非 `src/` 下所有的一级目录都会成为项目入口, 入口所在目录必须满足以下四个条件之一:
84
+ 并非 `src/` 下所有的一级目录都会成为项目入口, 入口所在目录必须满足以下五个条件之一:
85
85
 
86
86
  1. 具有 `routes/` 目录。
87
87
  2. 具有 `App.[jt]sx?` 文件。
88
- 3. 具有 `index.[jt]sx?` 文件。
89
- 4. 具有 `pages/` 目录(兼容 Modern.js 1.0)。
88
+ 3. 具有 `entry.[jt]sx?` 文件 (需要开启 `source.enableCustomEntry` 使用)。
89
+ 4. 具有 `index.[jt]sx?` 文件(即将废弃)。
90
+ 5. 具有 `pages/` 目录(兼容 Modern.js 1.0)(即将废弃)。
91
+
90
92
 
91
93
  当 `src/` 目录满足入口特征时,Modern.js 会认为当前项目为单入口应用。
92
94
 
@@ -138,8 +140,47 @@ export default () => {
138
140
 
139
141
  详细内容可以参考[路由方案](/guides/basic-features/routes#自控式路由)。
140
142
 
143
+ #### 自定义入口
144
+
145
+ 如果入口中存在 `entry.[jt]sx` 文件,需要开发者在 `entry.[jt]sx` 文件中调用 `createRoot` 和 `render` 函数,完成项目入口逻辑。
146
+
147
+ :::info
148
+ 使用该文件需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
149
+ :::
150
+
151
+ ```tsx
152
+ import { createRoot } from '@modern-js/runtime/react';
153
+ import { render } from '@modern-js/runtime/browser';
154
+
155
+ const ModernRoot = createRoot();
156
+
157
+ render(<ModernRoot />);
158
+
159
+ ```
160
+
161
+ 比如在 render 执行前,需要做一些其他操作,可以这样实现:
162
+
163
+ ```tsx
164
+ import { createRoot } from '@modern-js/runtime/react';
165
+ import { render } from '@modern-js/runtime/browser';
166
+
167
+ const ModernRoot = createRoot();
168
+
169
+ async function beforeRender() {
170
+ // todo
171
+ }
172
+
173
+ beforeRender().then(() => {
174
+ render(<ModernRoot />);
175
+ });
176
+ ```
177
+
141
178
  #### 自定义 Bootstrap
142
179
 
180
+ :::warning
181
+ 即将废弃,推荐使用自定义入口
182
+ :::
183
+
143
184
  如果入口中存在 `index.[jt]sx` 文件,并且当文件默认导出函数时,Modern.js 会将默认的 `bootstrap` 函数作为入参传入,并用导出的函数替代默认的 `bootstrap`,这样开发者可以自定义将组件挂载到 DOM 节点上,或在挂载前添加自定义行为。例如:
144
185
 
145
186
  ```tsx
@@ -151,47 +192,19 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
151
192
  };
152
193
  ```
153
194
 
154
- 此时,Modern.js 生成的文件内容如下:
155
-
156
- ```js
157
- import React from 'react';
158
- import ReactDOM from 'react-dom/client';
159
- import customBootstrap from '@_modern_js_src/index.tsx';
160
- import App from '@_modern_js_src/App';
161
- import { router, state } from '@modern-js/runtime/plugins';
162
-
163
- const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
164
- const MOUNT_ID = 'root';
165
-
166
- let AppWrapper = null;
167
- let root = null;
168
-
169
- function render() {
170
- AppWrapper = createApp({
171
- // runtime 的插件参数...
172
- })(App);
173
- if (IS_BROWSER) {
174
- customBootstrap(AppWrapper, () =>
175
- bootstrap(AppWrapper, MOUNT_ID, root, ReactDOM),
176
- );
177
- }
178
- return AppWrapper;
179
- }
180
-
181
- AppWrapper = render();
182
-
183
- export default AppWrapper;
184
- ```
185
-
186
195
  ### 构建模式入口
187
196
 
188
- 构建模式指的是不使用 Modern.js 自动生成的入口,而是完全由开发者自行定义页面的入口。
197
+ 构建模式指的是不使用 Modern.js 提供的 Runtime 能力,而是完全由开发者自行定义页面的入口。
198
+
199
+ 当入口目录中存在 `index.[jt]sx`(即将废弃) 并且没有通过 `export default` 导出函数或者入口目录存在 `entry.[jt]sx` 并且未安装 `@modern-js/runtime` 依赖时,对应文件就会被识别为 webpack 或 Rspack 的 entry 模块。
189
200
 
190
- 当入口目录中存在 `index.[jt]sx`,并且没有通过 `export default` 导出函数时,这类文件就会被识别为 webpack 或 Rspack 的 entry 模块。
201
+ :::info
202
+ 使用 `entry.[jt]sx` 文件需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
203
+ :::
191
204
 
192
205
  此时 Modern.js 不会自动生成入口代码,因此需要你自行将组件挂载到 DOM 节点上,例如:
193
206
 
194
- ```js title=src/index.jsx
207
+ ```js title=src/entry.tsx
195
208
  import React from 'react';
196
209
  import ReactDOM from 'react-dom';
197
210
  import App from './App';
@@ -199,9 +212,9 @@ import App from './App';
199
212
  ReactDOM.render(<App />, document.getElementById('root'));
200
213
  ```
201
214
 
202
- 这种方式等价于开启 Modern.js 的 [source.entries.disableMount](/configure/app/source/entries) 选项。当你使用这种方式时,**将无法使用 Modern.js 框架的运行时能力**,比如 modern.config.js 文件中的 `runtime` 配置将不会再生效。
215
+ 这种方式等价于开启 Modern.js 的 [source.entries.disableMount](/configure/app/source/entries) 选项。当你使用这种方式时,**将无法使用 Modern.js 框架的运行时能力**,比如 `modern.config.js` 文件中的 `runtime` 配置将不会再生效。
203
216
 
204
- ## 自定义入口
217
+ ## 自定义入口配置
205
218
 
206
219
  在某些情况下,你可能需要自定义入口配置,而不是使用 Modern.js 提供的入口约定。
207
220
 
@@ -234,4 +247,4 @@ export default defineConfig({
234
247
  });
235
248
  ```
236
249
 
237
- 注意,当你开启 `disableMount` 时,**将无法使用 Modern.js 框架的运行时能力**,比如 modern.config.ts 文件中的 `runtime` 配置将不会再生效。
250
+ 注意,当你开启 `disableMount` 时,**将无法使用 Modern.js 框架的运行时能力**,比如 `modern.config.ts` 文件中的 `runtime` 配置将不会再生效。
@@ -56,7 +56,11 @@ export default defineConfig({
56
56
  server: {
57
57
  ssr: true,
58
58
  },
59
- plugins: [appTools()],
59
+ plugins: [
60
+ appTools({
61
+ bundler: 'webpack', // Set to 'experimental-rspack' to enable rspack ⚡️🦀
62
+ }),
63
+ ],
60
64
  });
61
65
  ```
62
66
 
@@ -91,15 +95,27 @@ $ pnpm run build
91
95
 
92
96
  > modern build
93
97
 
94
- info Staring production build...
95
- ready Client compiled in 50 ms
98
+ Modern.js Framework v2.55.0
99
+
100
+ info Starting production build...
101
+ info Type checker is enabled. It may take some time.
102
+ ready Client compiled in 6.19 s
96
103
  info Production file sizes:
97
104
 
98
- File Size Gzipped
99
- dist/static/js/lib-react.09721b5c.js 152.6 kB 49.0 kB
100
- dist/html/main/index.html 5.8 kB 2.5 kB
101
- dist/static/js/main.3568a38e.js 3.5 kB 1.4 kB
102
- dist/static/css/main.03221f72.css 1.4 kB 741 B
105
+ File Size Gzipped
106
+ dist/routes-manifest.json 0.74 kB 0.28 kB
107
+ dist/static/css/async/page.d7915515.css 1.4 kB 0.69 kB
108
+ dist/static/js/main.5ae469e7.js 3.0 kB 1.3 kB
109
+ dist/html/main/index.html 6.0 kB 2.6 kB
110
+ dist/static/js/async/page.ddc8a4c1.js 19.2 kB 6.7 kB
111
+ dist/static/js/34.171fffdb.js 21.3 kB 7.1 kB
112
+ dist/static/js/lib-router.8995a55e.js 55.3 kB 18.1 kB
113
+ dist/static/js/lib-lodash.53ec3384.js 71.4 kB 24.8 kB
114
+ dist/static/js/lib-react.b5856db9.js 140.0 kB 45.2 kB
115
+ dist/static/js/lib-polyfill.86c452b3.js 213.3 kB 69.9 kB
116
+
117
+ Total size: 531.8 kB
118
+ Gzipped size: 176.7 kB
103
119
  ```
104
120
 
105
121
  构建产物默认生成到 `dist/`,目录结构如下:
@@ -125,9 +141,9 @@ dist
125
141
  ```bash
126
142
  $ pnpm run serve
127
143
 
128
- > modern serve
144
+ Modern.js Framework v2.55.0
129
145
 
130
- Starting production server...
146
+ info Starting production server...
131
147
 
132
148
  > Local: http://localhost:8080/
133
149
  > Network: http://192.168.0.1:8080/
@@ -421,12 +421,13 @@ export const myPlugin = (): CliPlugin<AppTools> => ({
421
421
  });
422
422
  ```
423
423
 
424
- ### `modifyEntryImports`
424
+ {/*
425
+ ### `checkEntryPoint`
425
426
 
426
- - 功能:用于修改、添加生成入口文件中的 `import` 语句
427
+ - 功能:增加入口类型
427
428
  - 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
428
429
  - Hook 模型:`AsyncWaterfall`
429
- - 类型:`AsyncWaterfall<{ imports: ImportStatement[]; entrypoint: Entrypoint; }>`
430
+ - 类型:`AsyncWaterfall<{ path: string; entry: false | string; }>`
430
431
  - 使用示例:
431
432
 
432
433
  ```ts
@@ -435,57 +436,20 @@ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
435
436
  export const myPlugin = (): CliPlugin<AppTools> => ({
436
437
  setup(api) {
437
438
  return {
438
- modifyEntryImports({ entrypoint, imports }) {
439
- // 添加 `import React from 'React'`
440
- imports.push({
441
- value: 'react',
442
- specifiers: [
443
- {
444
- imported: 'unmountComponentAtNode',
445
- },
446
- ],
447
- });
448
-
449
- return { entrypoint, imports };
450
- },
451
- };
452
- },
453
- });
454
- ```
455
-
456
- ### `modifyEntryExport`
457
-
458
- - 功能:用于修改生成入口文件中的 `export` 语句
459
- - 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
460
- - Hook 模型:`AsyncWaterfall`
461
- - 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; exportStatement: string; }>`
462
- - 使用示例:
463
-
464
- ```ts
465
- import type { CliPlugin, AppTools } from '@modern-js/app-tools';
466
-
467
- export const myPlugin = (): CliPlugin<AppTools> => ({
468
- setup(api) {
469
- return {
470
- modifyEntryExport({ entrypoint, exportStatement }) {
471
- return {
472
- entrypoint,
473
- exportStatement: [`export const foo = 'test'`, exportStatement].join(
474
- '\n',
475
- ),
476
- };
439
+ checkEntryPoint({ path, entry }) {
440
+ return { path, entry: entry || isNewEntry(path) };
477
441
  },
478
442
  };
479
443
  },
480
444
  });
481
445
  ```
482
446
 
483
- ### `modifyEntryRuntimePlugins`
447
+ ### `modifyEntrypoints`
484
448
 
485
- - 功能:用于添加、修改生成入口文件中的 [Runtime 插件](#Runtime)
449
+ - 功能:用于修改入口信息,针对于插件新增的入口,可以通过该钩子修改对应的 entrypoint 信息
486
450
  - 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
487
451
  - Hook 模型:`AsyncWaterfall`
488
- - 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; plugins: RuntimePlugin[]; }>`
452
+ - 类型:`AsyncWaterfall<{ entrypoints: Entrypoint[]; }>`
489
453
  - 使用示例:
490
454
 
491
455
  ```ts
@@ -494,33 +458,23 @@ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
494
458
  export const myPlugin = (): CliPlugin<AppTools> => ({
495
459
  setup(api) {
496
460
  return {
497
- modifyEntryRuntimePlugins({ entrypoint, plugins }) {
498
- const name = 'customPlugin';
499
- const options = {
500
- /** 可序列化的内容 */
501
- };
502
-
503
- return {
504
- plugins: [
505
- ...plugins,
506
- {
507
- name,
508
- options: JSON.stringify(options),
509
- },
510
- ],
511
- };
461
+ async modifyEntrypoints({ entrypoints }) {
462
+ const newEntryPoints = entrypoints.map(entrypoint => {
463
+ ...
464
+ });
465
+ return { entrypoints: newEntryPoints };
512
466
  },
513
467
  };
514
468
  },
515
469
  });
516
470
  ```
517
471
 
518
- ### `modifyEntryRenderFunction`
472
+ ### `generateEntryCode`
519
473
 
520
- - 功能:用于修改生成入口文件中 `render` 函数
521
- - 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
474
+ - 功能:用于修改生成的入口文件
475
+ - 执行阶段:生成入口文件之后,创建 builder 之前
522
476
  - Hook 模型:`AsyncWaterfall`
523
- - 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; code: string; }>`
477
+ - 类型:`AsyncWorkflow<{ entrypoints: Entrypoint[] }, void>`
524
478
  - 使用示例:
525
479
 
526
480
  ```ts
@@ -529,18 +483,18 @@ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
529
483
  export const myPlugin = (): CliPlugin<AppTools> => ({
530
484
  setup(api) {
531
485
  return {
532
- modifyEntryRenderFunction({ entrypoint, code }) {
533
- const customRender = `/** render function body */`;
534
- return {
535
- entrypoint,
536
- code: customRender,
537
- };
486
+ async generateEntryCode({ entrypoints }) {
487
+ await Promise.all(
488
+ entrypoints.map(async entrypoint => {
489
+ ...
490
+ })
491
+ );
538
492
  },
539
493
  };
540
494
  },
541
495
  });
542
496
  ```
543
-
497
+ */}
544
498
  ### `modifyFileSystemRoutes`
545
499
 
546
500
  - 功能:用于修改生成前端页面路由文件中的内容,内容都是需要可序列化的
@@ -608,32 +562,6 @@ export const myPlugin = (): CliPlugin<AppTools> => ({
608
562
  });
609
563
  ```
610
564
 
611
- ### `modifyAsyncEntry`
612
-
613
- - 功能:用于修改包裹入口文件的异步模块,参见 [source.enableAsyncEntry](/configure/app/source/enable-async-entry)
614
- - 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
615
- - Hook 模型:`AsyncWaterfall`
616
- - 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; code: string; }>`
617
- - 使用示例:
618
-
619
- ```ts
620
- import type { CliPlugin, AppTools } from '@modern-js/app-tools';
621
-
622
- export const myPlugin = (): CliPlugin<AppTools> => ({
623
- setup(api) {
624
- return {
625
- modifyAsyncEntry({ entrypoint, code }) {
626
- const customCode = `console.log('hello');`;
627
- return {
628
- entrypoint,
629
- code: `${customCode}${code}`,
630
- };
631
- },
632
- };
633
- },
634
- });
635
- ```
636
-
637
565
  ### `htmlPartials`
638
566
 
639
567
  - 功能:用于定制生成的 HTML 页面模版
@@ -782,7 +710,7 @@ export const myPlugin = (): Plugin => ({
782
710
  - 功能:修改需要渲染的组件
783
711
  - 执行阶段:渲染(SSR/CSR)
784
712
  - Hook 模型:`Pipeline`
785
- - 类型:`Pipeline<{ App: React.ComponentType<any>; }, React.ComponentType<any>>`
713
+ - 类型:`Pipeline<{ App: React.ComponentType<any>;config: Record<string, any>; },React.ComponentType<any>>`
786
714
  - 使用示例:
787
715
 
788
716
  :::note
@@ -792,13 +720,12 @@ export const myPlugin = (): Plugin => ({
792
720
  ```ts
793
721
  import { createContext } from 'react';
794
722
  import type { Plugin } from '@modern-js/runtime';
795
- import hoistNonReactStatics from 'hoist-non-react-statics';
796
723
 
797
724
  export const myPlugin = (): Plugin => ({
798
725
  setup(api) {
799
726
  const FooContext = createContext('');
800
727
  return {
801
- hoc({ App }, next) {
728
+ hoc({ App, config }, next) {
802
729
  const AppWrapper = (props: any) => {
803
730
  return (
804
731
  <FooContext.Provider store={'test'}>
@@ -807,7 +734,8 @@ export const myPlugin = (): Plugin => ({
807
734
  );
808
735
  };
809
736
  return next({
810
- App: hoistNonReactStatics(AppWrapper, App),
737
+ App: AppWrapper,
738
+ config
811
739
  });
812
740
  },
813
741
  };
@@ -815,76 +743,3 @@ export const myPlugin = (): Plugin => ({
815
743
  });
816
744
  ```
817
745
 
818
- {/* ### `provide`
819
-
820
- - 功能:修改需要渲染的 Element
821
- - 执行阶段:渲染(SSR/CSR)
822
- - Hook 模型:`Pipeline`
823
- - 类型:`Pipeline<{ element: JSX.Element; props: AppProps; context: RuntimeContext }, JSX.Element>`
824
- - 使用示例:
825
-
826
- ```ts
827
- import { createContext } from 'react';
828
- import type { Plugin } from '@modern-js/runtime';
829
-
830
- export const myPlugin = (): Plugin => ({
831
- setup(api) {
832
- const FooContext = createContext('');
833
-
834
- return {
835
- provide: ({ element }) => <div>{element}</div>,
836
- };
837
- },
838
- });
839
- ```
840
-
841
- ### `client`
842
-
843
- - 功能:定制客户端渲染流程
844
- - 执行阶段:在浏览器客户端渲染
845
- - Hook 模型:`AsyncPipeline`
846
- - 类型:`AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; rootElement: HTMLElement; }, void>`
847
- - 使用示例:
848
-
849
- ```ts
850
- import ReactDOM from 'react-dom';
851
- import type { Plugin } from '@modern-js/runtime';
852
-
853
- export const myPlugin = (): Plugin => ({
854
- setup(api) {
855
- return {
856
- client: async ({ App, rootElement }) => {
857
- ReactDOM.render(
858
- React.createElement(App, { context: { foo: 'test' } }),
859
- rootElement,
860
- );
861
- },
862
- };
863
- },
864
- });
865
- ```
866
-
867
- ### `server`
868
-
869
- - 功能:定制服务器端渲染流程
870
- - 执行阶段:SSR
871
- - Hook 模型:`AsyncPipeline`
872
- - 类型:`AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; }, string>`
873
- - 使用示例:
874
-
875
- ```ts
876
- import ReactDomServer from 'react-dom/server';
877
- import type { Plugin } from '@modern-js/runtime';
878
-
879
- export const myPlugin = (): Plugin => ({
880
- setup(api) {
881
- return {
882
- server({ App, context }) {
883
- return ReactDomServer.renderToString(
884
- React.createElement(App, { context: { foo: 'test' } }),
885
- );
886
- },
887
- };
888
- },
889
- });
890
- ```*/}
package/package.json CHANGED
@@ -15,17 +15,17 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "2.54.6",
18
+ "version": "2.55.0",
19
19
  "publishConfig": {
20
20
  "registry": "https://registry.npmjs.org/",
21
21
  "access": "public",
22
22
  "provenance": true
23
23
  },
24
24
  "dependencies": {
25
- "@modern-js/sandpack-react": "2.54.6"
25
+ "@modern-js/sandpack-react": "2.55.0"
26
26
  },
27
27
  "peerDependencies": {
28
- "@modern-js/builder-doc": "^2.54.6"
28
+ "@modern-js/builder-doc": "^2.55.0"
29
29
  },
30
30
  "devDependencies": {
31
31
  "classnames": "^2",
@@ -39,8 +39,8 @@
39
39
  "@rspress/shared": "1.18.2",
40
40
  "@types/node": "^16",
41
41
  "@types/fs-extra": "9.0.13",
42
- "@modern-js/builder-doc": "2.54.6",
43
- "@modern-js/doc-plugin-auto-sidebar": "2.54.6"
42
+ "@modern-js/doc-plugin-auto-sidebar": "2.55.0",
43
+ "@modern-js/builder-doc": "2.55.0"
44
44
  },
45
45
  "scripts": {
46
46
  "dev": "rspress dev",