@modern-js/main-doc 2.65.3 → 2.65.5

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.
@@ -78,6 +78,7 @@ Usage: modern build [options]
78
78
  Options:
79
79
  -c --config <config> specify the configuration file, which can be a relative or absolute path
80
80
  -h, --help show command help
81
+ -w --watch turn on watch mode, watch for changes and rebuild
81
82
  --analyze analyze the bundle and view size of each module
82
83
  ```
83
84
 
@@ -0,0 +1 @@
1
+ ["html", "favicon", "icon", "mock", "public", "upload"]
@@ -0,0 +1,29 @@
1
+ ---
2
+ title: favicon.*
3
+ sidebar_position: 3
4
+ ---
5
+
6
+ # Favicon
7
+
8
+ When there is a `favicon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) configuration option for generating the favicon icon on the page:
9
+
10
+ ```
11
+ ./config
12
+ └── favicon.ico
13
+ ```
14
+
15
+ After the build is completed, you can see the following tags automatically generated in HTML:
16
+
17
+ ```html
18
+ <link rel="icon" href="/favicon.ico" />
19
+ ```
20
+
21
+ ## Order
22
+
23
+ When setting up the favicon, Modern.js looks for files in the following order:
24
+
25
+ - `favicon.png`
26
+ - `favicon.jpg`
27
+ - `favicon.jpeg`
28
+ - `favicon.svg`
29
+ - `favicon.ico`
@@ -1,36 +1,9 @@
1
1
  ---
2
- title: icon/
2
+ title: icon.*
3
3
  sidebar_position: 2
4
4
  ---
5
5
 
6
- # icon/
7
-
8
- ## Favicon
9
-
10
- When there is a `favicon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) configuration option for generating the favicon icon on the page:
11
-
12
- ```
13
- ./config
14
- └── favicon.ico
15
- ```
16
-
17
- After the build is completed, you can see the following tags automatically generated in HTML:
18
-
19
- ```html
20
- <link rel="icon" href="/favicon.ico" />
21
- ```
22
-
23
- ### Order
24
-
25
- When setting up the favicon, Modern.js looks for files in the following order:
26
-
27
- - `favicon.png`
28
- - `favicon.jpg`
29
- - `favicon.jpeg`
30
- - `favicon.svg`
31
- - `favicon.ico`
32
-
33
- ## Apple Touch Icon
6
+ # Apple Touch Icon
34
7
 
35
8
  When there is an `icon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.appIcon](/configure/app/html/app-icon) configuration option for generating the Apple Touch Icon icon under the iOS system.
36
9
 
@@ -45,7 +18,7 @@ After the build is completed, you can see the following tags automatically gener
45
18
  <link rel="apple-touch-icon" sizes="180x180" href="/static/image/icon.png" />
46
19
  ```
47
20
 
48
- ### Order
21
+ ## Order
49
22
 
50
23
  When setting up the app icon, Modern.js looks for files in the following order:
51
24
 
@@ -24,10 +24,14 @@ For example, consider the following directory structure:
24
24
  └── modern-app-env.d.ts
25
25
  ```
26
26
 
27
- `entry-a` will use the `Docoument.[jt]sx` file under the current entry as the template. If there is no `Document.[jt]sx` file under the current entry, like `entry-b`, it will look for the `Document.[jt]sx` file under the root directory.
27
+ `entry-a` will use the `Document.[jt]sx` file under the current entry as the template. If there is no `Document.[jt]sx` file under the current entry, like `entry-b`, it will look for the `Document.[jt]sx` file under the root directory.
28
28
 
29
29
  If not found, default template will be used.
30
30
 
31
+ :::tip
32
+ The `Document.[jt]sx` module will be compiled by esbuild and rendered to a string as the HTML template content, similar to [Static Site Generation](/guides/basic-features/render/ssg.html). The HTML template module will not be compiled by the Bundler. The React Hooks in the component also will not be executed at browser runtime, and JavaScript resources such as images cannot be resolved and imported.
33
+ :::
34
+
31
35
  ### HTML Components
32
36
 
33
37
  Modern.js provides some components for rendering pages to help developers generate templates. These components can be used from `@modern-js/runtime/document`:
@@ -530,7 +530,11 @@ This feature is very useful when applications require pre-rendered data, custom
530
530
  ```ts title="src/routes/layout.tsx"
531
531
  import { RuntimeContext } from '@modern-js/runtime';
532
532
 
533
- export const init = (context: RuntimeContext) => {
533
+ type InitialData = {
534
+ message: string;
535
+ }
536
+
537
+ export const init = (context: RuntimeContext): InitialData => {
534
538
  return {
535
539
  message: 'Hello World',
536
540
  };
@@ -542,7 +546,7 @@ import { useRuntimeContext } from '@modern-js/runtime;
542
546
 
543
547
  export default () => {
544
548
  const context = useRuntimeContext();
545
- const { message } = context.initialData;
549
+ const { message } = context.initialData as InitialData;
546
550
 
547
551
  return <div>{message}</div>;
548
552
  };
@@ -551,9 +555,9 @@ export default () => {
551
555
  With SSR, the browser can obtain the data returned by `init` during SSR. Developers can decide whether to re-fetch the data on the browser side to override the SSR data. For example:
552
556
 
553
557
  ```tsx title="src/routes/layout.tsx"
554
- import { RuntimeContext } from '@modern-js/runtime;
558
+ import type { RuntimeContext } from '@modern-js/runtime;
555
559
 
556
- export const init = (context: RuntimeContext) => {
560
+ export const init = (runtimeContext: RuntimeContext) => {
557
561
  if (process.env.MODERN_TARGET === 'node') {
558
562
  return {
559
563
  message: 'Hello World By Server',
@@ -46,7 +46,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
46
46
 
47
47
  export default createModuleFederationConfig({
48
48
  name: 'remote',
49
- filename: 'remoteEntry.js',
49
+ manifest: {
50
+ filePath:'static',
51
+ },
52
+ filename: 'static/remoteEntry.js',
50
53
  exposes: {
51
54
  './app': './src/export-App.tsx',
52
55
  },
@@ -109,4 +112,4 @@ You can refer to the example here: [Modern.js & Module Federation Application-Le
109
112
 
110
113
  ## Related Documentation
111
114
 
112
- - [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
115
+ - [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
@@ -54,7 +54,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
54
54
 
55
55
  export default createModuleFederationConfig({
56
56
  name: 'remote',
57
- filename: 'remoteEntry.js',
57
+ manifest: {
58
+ filePath: 'static',
59
+ },
60
+ filename: 'static/remoteEntry.js',
58
61
  exposes: {
59
62
  './Button': './src/components/Button.tsx',
60
63
  },
@@ -65,6 +68,10 @@ export default createModuleFederationConfig({
65
68
  });
66
69
  ```
67
70
 
71
+ :::tip
72
+ In the above code block, we have prefixed both the manifest and remoteEntry.js exported by Module Federation with `static`. This is because Modern.js requires all resources that need to be exposed to be placed in the `static/` directory, and Modern.js's server will only host the `static/` directory in production environments.
73
+ :::
74
+
68
75
  Additionally, modify `modern.config.ts` to provide a development environment port for the producer, allowing the consumer to access the producer's resources through this port:
69
76
 
70
77
  ```ts title="modern.config.ts"
@@ -99,7 +106,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
99
106
  export default createModuleFederationConfig({
100
107
  name: 'host',
101
108
  remotes: {
102
- remote: 'remote@http://localhost:3051/mf-manifest.json',
109
+ remote: 'remote@http://localhost:3051/static/mf-manifest.json',
103
110
  },
104
111
  shared: {
105
112
  react: { singleton: true },
@@ -173,8 +180,45 @@ After modifying the producer's code, the consumer will automatically fetch the p
173
180
 
174
181
  Access `http://localhost:8080/remote`, and you will see that the page includes the `Button` component from the producer's remote module.
175
182
 
183
+ We can also execute `modern serve` locally to simulate the production environment.
184
+
185
+ Because the Module Federation plugin will automatically read Modern.js's `output.assetPrefix` configuration as the access address for remote modules, and this value defaults to `/` after building in the production environment.
186
+
187
+ If we want to simulate the production environment in local, but not configure `output.assetPrefix`, consumers will pull the entry file of the remote module from their own domain. So We can add the following configuration:
188
+
189
+ ```ts
190
+ import { appTools, defineConfig } from '@modern-js/app-tools';
191
+ import { moduleFederationPlugin } from '@module-federation/modern-js';
192
+
193
+ const isLocal = process.env.IS_LOCAL === 'true';
194
+
195
+ // https://modernjs.dev/en/configure/app/usage
196
+ export default defineConfig({
197
+ server: {
198
+ port: 3051,
199
+ },
200
+ runtime: {
201
+ router: true,
202
+ },
203
+ output: {
204
+ // Now this configuration is only used in the local when you run modern serve command.
205
+ // If you want to deploy the application to the platform, use your own domain name.
206
+ // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
207
+ assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
208
+ },
209
+ plugins: [
210
+ appTools({
211
+ bundler: 'rspack', // Set to 'webpack' to enable webpack
212
+ }),
213
+ moduleFederationPlugin(),
214
+ ],
215
+ });
216
+ ```
217
+
218
+ Now, in the producer, run `IS_LOCAL=true modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
219
+
176
220
  You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
177
221
 
178
222
  ## Related Documentation
179
223
 
180
- - [Module Federation Official Documentation](https://module-federation.io/zh/guide/framework/modernjs.html)
224
+ - [Module Federation Official Documentation](https://module-federation.io/zh/guide/framework/modernjs.html)
@@ -78,6 +78,7 @@ Usage: modern build [options]
78
78
  Options:
79
79
  -c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
80
80
  -h, --help 显示命令帮助
81
+ -w --watch 开启 watch 模式, 监听文件变更并重新构建
81
82
  --analyze 分析构建产物体积,查看各个模块打包后的大小
82
83
  ```
83
84
 
@@ -0,0 +1 @@
1
+ ["html", "favicon", "icon", "mock", "public", "upload"]
@@ -0,0 +1,29 @@
1
+ ---
2
+ title: favicon.*
3
+ sidebar_position: 3
4
+ ---
5
+
6
+ # Favicon
7
+
8
+ 当项目根目录的 `config` 目录下存在 `favicon.*` 文件时,Modern.js 会自动将该文件设置到 [html.favicon](/configure/app/html/favicon) 配置项中,用于生成页面的 favicon 图标:
9
+
10
+ ```
11
+ ./config
12
+ └── favicon.ico
13
+ ```
14
+
15
+ 构建完成后,可以看到 HTML 中自动生成了以下标签:
16
+
17
+ ```html
18
+ <link rel="icon" href="/favicon.ico" />
19
+ ```
20
+
21
+ ## 查找顺序
22
+
23
+ 在设置 app icon 时,Modern.js 会按以下顺序寻找文件:
24
+
25
+ - `favicon.png`
26
+ - `favicon.jpg`
27
+ - `favicon.jpeg`
28
+ - `favicon.svg`
29
+ - `favicon.ico`
@@ -1,36 +1,9 @@
1
1
  ---
2
- title: icon/
2
+ title: icon.*
3
3
  sidebar_position: 2
4
4
  ---
5
5
 
6
- # icon/
7
-
8
- ## Favicon
9
-
10
- 当项目根目录的 `config` 目录下存在 `favicon.*` 文件时,Modern.js 会自动将该文件设置到 [html.favicon](/configure/app/html/favicon) 配置项中,用于生成页面的 favicon 图标:
11
-
12
- ```
13
- ./config
14
- └── favicon.ico
15
- ```
16
-
17
- 构建完成后,可以看到 HTML 中自动生成了以下标签:
18
-
19
- ```html
20
- <link rel="icon" href="/favicon.ico" />
21
- ```
22
-
23
- ### 查找顺序
24
-
25
- 在设置 app icon 时,Modern.js 会按以下顺序寻找文件:
26
-
27
- - `favicon.png`
28
- - `favicon.jpg`
29
- - `favicon.jpeg`
30
- - `favicon.svg`
31
- - `favicon.ico`
32
-
33
- ## Apple Touch Icon
6
+ # Apple Touch Icon
34
7
 
35
8
  当项目根目录的 `config` 目录下存在 `icon.*` 文件时,Modern.js 会自动将该文件设置到 [html.appIcon](/configure/app/html/app-icon) 配置项中,用于生成 iOS 系统下的 Apple Touch Icon 图标。
36
9
 
@@ -45,7 +18,7 @@ sidebar_position: 2
45
18
  <link rel="apple-touch-icon" sizes="180x180" href="/static/image/icon.png" />
46
19
  ```
47
20
 
48
- ### 查找顺序
21
+ ## 查找顺序
49
22
 
50
23
  在设置 app icon 时,Modern.js 会按以下顺序寻找文件:
51
24
 
@@ -25,10 +25,14 @@ Modern.js 约定,在 `src/` 或入口目录下,可以创建 `Document.[jt]sx
25
25
  └── modern-app-env.d.ts
26
26
  ```
27
27
 
28
- `entry-a` 会优先使用当前入口下的 `Docoument.[jt]sx` 文件。如果当前入口没有 `Document.[jt]sx` 文件,例如 `entry-b`,则会查找根目录下的 `Document.[jt]sx` 文件。
28
+ `entry-a` 会优先使用当前入口下的 `Document.[jt]sx` 文件。如果当前入口没有 `Document.[jt]sx` 文件,例如 `entry-b`,则会查找根目录下的 `Document.[jt]sx` 文件。
29
29
 
30
30
  如果未找到,将会使用 Modern.js 的默认模板。
31
31
 
32
+ :::tip
33
+ `Document.[jt]sx` 模块将会被使用 esbuild 编译为 Node.js 产物、并在编译时以 `renderToStaticMarkup` 渲染为字符串以作为 HTML 模板的内容,其行为类似[静态站点生成](/guides/basic-features/render/ssg.html)。HTML 模板模块不会经过 Bundler 编译打包,因此组件中的 React Hooks 不会在浏览器运行时被执行,也不支持导入 JavaScript 以外的图片等资源模块。
34
+ :::
35
+
32
36
  ### HTML 组件
33
37
 
34
38
  Modern.js 提供了一些列渲染页面的组件,用来帮助开发者生成模板,可以从 `@modern-js/runtime/document` 中使用这些组件:
@@ -533,7 +533,11 @@ export const init = (context: RuntimeContext) => {
533
533
  ```ts title="src/routes/layout.tsx"
534
534
  import { RuntimeContext } from '@modern-js/runtime';
535
535
 
536
- export const init = (context: RuntimeContext) => {
536
+ type InitialData = {
537
+ message: string;
538
+ }
539
+
540
+ export const init = (context: RuntimeContext): InitialData => {
537
541
  return {
538
542
  message: 'Hello World',
539
543
  };
@@ -545,7 +549,7 @@ import { useRuntimeContext } from '@modern-js/runtime';
545
549
 
546
550
  export default () => {
547
551
  const context = useRuntimeContext();
548
- const { message } = context.initialData;
552
+ const { message } = context.initialData as InitialData;
549
553
 
550
554
  return <div>{message}</div>;
551
555
  };
@@ -554,9 +558,9 @@ export default () => {
554
558
  配合 SSR 功能时,浏览器端可以获取到 SSR 时 `init` 返回的数据,开发者可以自行判断是否要在浏览器端重新获取数据来覆盖 SSR 数据,例如:
555
559
 
556
560
  ```tsx title="src/routes/layout.tsx"
557
- import { RuntimeContext } from '@modern-js/runtime';
561
+ import type { RuntimeContext } from '@modern-js/runtime';
558
562
 
559
- export const init = (context: RuntimeContext) => {
563
+ export const init = (runtimeContext: RuntimeContext) => {
560
564
  if (process.env.MODERN_TARGET === 'node') {
561
565
  return {
562
566
  message: 'Hello World By Server',
@@ -46,7 +46,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
46
46
 
47
47
  export default createModuleFederationConfig({
48
48
  name: 'remote',
49
- filename: 'remoteEntry.js',
49
+ manifest: {
50
+ filePath:'static',
51
+ },
52
+ filename: 'static/remoteEntry.js',
50
53
  exposes: {
51
54
  './app': './src/export-App.tsx',
52
55
  },
@@ -109,4 +112,4 @@ export default RemoteApp;
109
112
 
110
113
  ## 相关文档
111
114
 
112
- - [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
115
+ - [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
@@ -55,7 +55,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
55
55
 
56
56
  export default createModuleFederationConfig({
57
57
  name: 'remote',
58
- filename: 'remoteEntry.js',
58
+ manifest: {
59
+ filePath: 'static',
60
+ },
61
+ filename: 'static/remoteEntry.js',
59
62
  exposes: {
60
63
  './Button': './src/components/Button.tsx',
61
64
  },
@@ -66,6 +69,10 @@ export default createModuleFederationConfig({
66
69
  });
67
70
  ```
68
71
 
72
+ :::tip
73
+ 在上述代码块中,我们为 Module Federation 导出的 manifest 和 remoteEntry.js 都设置了 `static` 前缀,这是因为 Modern.js 要求将所有需要暴露的资源都放在 `static/` 目录下,Modern.js 的服务器在生产环境时也只会托管 `static/` 目录。
74
+ :::
75
+
69
76
  另外,我们还需要修改 `modern.config.ts`,为生产者提供一个开发环境的端口,让消费者可以通过此端口访问生产者的资源:
70
77
 
71
78
  ```ts title="modern.config.ts"
@@ -100,7 +107,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
100
107
  export default createModuleFederationConfig({
101
108
  name: 'host',
102
109
  remotes: {
103
- remote: 'remote@http://localhost:3051/mf-manifest.json',
110
+ remote: 'remote@http://localhost:3051/static/mf-manifest.json',
104
111
  },
105
112
  shared: {
106
113
  react: { singleton: true },
@@ -142,7 +149,7 @@ export default Index;
142
149
  }
143
150
  }
144
151
  }
145
- ```
152
+ ```
146
153
 
147
154
  :::tip
148
155
  在消费者中,我们通过 `remote/Button` 来引用远程模块。这里简单介绍下这个路径具体代表了什么,可以先将它抽象成 `[remoteAlias]/[remoteExpose]`。
@@ -174,8 +181,43 @@ export default Index;
174
181
 
175
182
  访问 `http://localhost:8080/remote`,可以看到页面中已经包含了生产者的远程模块 `Button` 组件。
176
183
 
184
+ 我们也可以在本地执行 `modern serve` 来模拟生产环境。
185
+
186
+ 因为 Module Federation 插件会自动读取 Modern.js 的 `output.assetPrefix` 配置作为远程模块的访问地址,而该值在生产环境下构建后默认是 `/`。如果不做特殊处理,消费者将从自己的域名下拉取远程模块的入口文件。我们可以添加如下配置:
187
+
188
+ ```ts
189
+ import { appTools, defineConfig } from '@modern-js/app-tools';
190
+ import { moduleFederationPlugin } from '@module-federation/modern-js';
191
+
192
+ const isLocal = process.env.IS_LOCAL === 'true';
193
+
194
+ // https://modernjs.dev/en/configure/app/usage
195
+ export default defineConfig({
196
+ server: {
197
+ port: 3051,
198
+ },
199
+ runtime: {
200
+ router: true,
201
+ },
202
+ output: {
203
+ // Now this configuration is only used in the local when you run modern serve command.
204
+ // If you want to deploy the application to the platform, use your own domain name.
205
+ // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
206
+ assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
207
+ },
208
+ plugins: [
209
+ appTools({
210
+ bundler: 'rspack', // Set to 'webpack' to enable webpack
211
+ }),
212
+ moduleFederationPlugin(),
213
+ ],
214
+ });
215
+ ```
216
+
217
+ 现在,在生产者中运行 `IS_LOCAL=true modern build && modern serve`,在消费者中运行 `modern build && modern serve`,即可在本地模拟生产环境,访问到远程模块。
218
+
177
219
  上述用例可以参考:[Modern.js & Module Federation 基础用法示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base)。
178
220
 
179
221
  ## 相关文档
180
222
 
181
- - [Module Federation 官方文档](https://module-federation.io/zh/guide/framework/modernjs.html)
223
+ - [Module Federation 官方文档](https://module-federation.io/zh/guide/framework/modernjs.html)
package/package.json CHANGED
@@ -15,14 +15,13 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "2.65.3",
18
+ "version": "2.65.5",
19
19
  "publishConfig": {
20
20
  "registry": "https://registry.npmjs.org/",
21
- "access": "public",
22
- "provenance": true
21
+ "access": "public"
23
22
  },
24
23
  "dependencies": {
25
- "@modern-js/sandpack-react": "2.65.3"
24
+ "@modern-js/sandpack-react": "2.65.5"
26
25
  },
27
26
  "devDependencies": {
28
27
  "@rspress/shared": "1.42.0",