@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.98 → 3.4.0-ultramodern.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/docs/en/apis/app/commands.mdx +59 -69
- package/docs/en/community/blog/v2-release-note.mdx +5 -5
- package/docs/en/community/blog/v3-release-note.mdx +1 -1
- package/docs/en/community/releases.mdx +1 -5
- package/docs/en/components/build-output.mdx +1 -1
- package/docs/en/components/debug-app.mdx +1 -1
- package/docs/en/components/deploy-command.mdx +3 -3
- package/docs/en/components/init-app.mdx +23 -51
- package/docs/en/components/prerequisites.mdx +1 -1
- package/docs/en/components/serve-command.mdx +3 -3
- package/docs/en/configure/app/bff/effect.mdx +27 -3
- package/docs/en/configure/app/performance/rsdoctor.mdx +7 -4
- package/docs/en/configure/app/tools/ts-checker.mdx +30 -2
- package/docs/en/configure/app/usage.mdx +6 -6
- package/docs/en/guides/advanced-features/bff/data-platform.mdx +3 -1
- package/docs/en/guides/advanced-features/bff/frameworks.mdx +3 -1
- package/docs/en/guides/advanced-features/international/api.mdx +1 -1
- package/docs/en/guides/advanced-features/international/configuration.mdx +1 -1
- package/docs/en/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/en/guides/advanced-features/international/routing.mdx +5 -3
- package/docs/en/guides/advanced-features/web-server.mdx +12 -0
- package/docs/en/guides/basic-features/debug/rsdoctor.mdx +2 -3
- package/docs/en/guides/basic-features/debug/using-storybook.mdx +1 -1
- package/docs/en/guides/basic-features/deploy.mdx +14 -14
- package/docs/en/guides/basic-features/env-vars.mdx +2 -2
- package/docs/en/guides/basic-features/render/_meta.json +1 -10
- package/docs/en/guides/basic-features/render/overview.mdx +0 -1
- package/docs/en/guides/basic-features/render/rsc.mdx +0 -1
- package/docs/en/guides/basic-features/routes/config-routes.mdx +2 -2
- package/docs/en/guides/basic-features/routes/routes.mdx +25 -10
- package/docs/en/guides/basic-features/testing/rstest.mdx +29 -0
- package/docs/en/guides/concept/server.mdx +2 -2
- package/docs/en/guides/get-started/quick-start.mdx +1 -1
- package/docs/en/guides/get-started/ultramodern.mdx +135 -26
- package/docs/en/guides/topic-detail/module-federation/application.mdx +1 -1
- package/docs/en/guides/topic-detail/module-federation/deploy.mdx +2 -2
- package/docs/en/guides/topic-detail/module-federation/usage.mdx +5 -5
- package/docs/en/guides/troubleshooting/builder.mdx +1 -1
- package/docs/en/guides/upgrade/config.mdx +1 -2
- package/docs/en/guides/upgrade/other.mdx +4 -4
- package/docs/zh/apis/app/commands.mdx +56 -66
- package/docs/zh/community/blog/v2-release-note.mdx +5 -5
- package/docs/zh/community/blog/v3-release-note.mdx +1 -1
- package/docs/zh/community/releases.mdx +1 -5
- package/docs/zh/components/build-output.mdx +1 -1
- package/docs/zh/components/debug-app.mdx +1 -1
- package/docs/zh/components/deploy-command.mdx +3 -3
- package/docs/zh/components/init-app.mdx +16 -47
- package/docs/zh/components/prerequisites.mdx +1 -1
- package/docs/zh/components/serve-command.mdx +3 -3
- package/docs/zh/configure/app/bff/effect.mdx +26 -2
- package/docs/zh/configure/app/performance/rsdoctor.mdx +7 -4
- package/docs/zh/configure/app/tools/ts-checker.mdx +30 -2
- package/docs/zh/configure/app/usage.mdx +6 -6
- package/docs/zh/guides/advanced-features/bff/data-platform.mdx +3 -1
- package/docs/zh/guides/advanced-features/bff/frameworks.mdx +3 -1
- package/docs/zh/guides/advanced-features/international/api.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/configuration.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/routing.mdx +5 -3
- package/docs/zh/guides/advanced-features/web-server.mdx +12 -0
- package/docs/zh/guides/basic-features/debug/rsdoctor.mdx +2 -3
- package/docs/zh/guides/basic-features/debug/using-storybook.mdx +1 -1
- package/docs/zh/guides/basic-features/deploy.mdx +13 -13
- package/docs/zh/guides/basic-features/env-vars.mdx +2 -2
- package/docs/zh/guides/basic-features/render/_meta.json +1 -10
- package/docs/zh/guides/basic-features/render/overview.mdx +0 -1
- package/docs/zh/guides/basic-features/render/rsc.mdx +0 -1
- package/docs/zh/guides/basic-features/routes/config-routes.mdx +2 -2
- package/docs/zh/guides/basic-features/routes/routes.mdx +25 -10
- package/docs/zh/guides/basic-features/testing/rstest.mdx +29 -0
- package/docs/zh/guides/concept/server.mdx +2 -2
- package/docs/zh/guides/get-started/quick-start.mdx +1 -1
- package/docs/zh/guides/get-started/ultramodern.mdx +121 -22
- package/docs/zh/guides/topic-detail/module-federation/application.mdx +1 -1
- package/docs/zh/guides/topic-detail/module-federation/deploy.mdx +2 -2
- package/docs/zh/guides/topic-detail/module-federation/usage.mdx +5 -5
- package/docs/zh/guides/troubleshooting/builder.mdx +1 -1
- package/docs/zh/guides/upgrade/config.mdx +1 -2
- package/docs/zh/guides/upgrade/other.md +4 -4
- package/package.json +17 -14
- package/rspress.config.ts +17 -5
- package/src/components/Footer/index.tsx +3 -3
- package/src/components/Footer/styles.module.scss +1 -1
- package/src/components/Mermaid/style.scss +52 -52
- package/src/components/RandomMemberList/index.module.scss +8 -8
- package/src/components/SecondaryTitle/index.module.css +7 -2
- package/src/components/ShowcaseList/index.module.scss +1 -1
- package/src/components/ShowcaseList/useShowcases.ts +23 -65
- package/src/i18n/enUS.ts +0 -9
- package/src/i18n/zhCN.ts +0 -9
- package/src/pages/index.module.scss +6 -6
- package/src/sandbox/csr-auth/src/routes/page-tsx.txt +1 -1
- package/static/img/logo.svg +7 -0
- package/static/img/social-card.svg +12 -0
- package/builder-doc/docs/en/config/performance/rsdoctor.md +0 -37
- package/builder-doc/docs/zh/config/performance/rsdoctor.md +0 -37
- package/docs/en/guides/basic-features/render/tanstack-rsc.mdx +0 -226
- package/docs/zh/guides/basic-features/render/tanstack-rsc.mdx +0 -226
- package/main-doc/docs/en/guides/get-started/ultramodern.mdx +0 -403
- package/main-doc/docs/zh/guides/get-started/ultramodern.mdx +0 -363
|
@@ -8,12 +8,12 @@ UltraModern.js has some built-in commands that can help you quickly start a deve
|
|
|
8
8
|
|
|
9
9
|
Through this chapter, you can learn about the built-in commands of UltraModern.js and how to use them.
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## modern dev
|
|
12
12
|
|
|
13
|
-
The `
|
|
13
|
+
The `modern dev` command is used to start a local development server and compile the source code in the development environment.
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
|
-
Usage:
|
|
16
|
+
Usage: modern dev [options]
|
|
17
17
|
|
|
18
18
|
Options:
|
|
19
19
|
-e --entry <entry> compiler by entry
|
|
@@ -23,10 +23,10 @@ Options:
|
|
|
23
23
|
--api-only only start API service
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
After running `
|
|
26
|
+
After running `modern dev`, UltraModern.js will watch source file changes and apply hot module replacement.
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
|
-
$
|
|
29
|
+
$ modern dev
|
|
30
30
|
|
|
31
31
|
info Starting dev server...
|
|
32
32
|
|
|
@@ -38,10 +38,10 @@ info Starting dev server...
|
|
|
38
38
|
|
|
39
39
|
In multi-page (MPA) projects, the `--entry` option can be added to specify one or more pages to compile. In this way, only part of the code in the project will be compiled, and the dev startup speed will be faster.
|
|
40
40
|
|
|
41
|
-
For example, execute `
|
|
41
|
+
For example, execute `modern dev --entry`, the entry selector will be displayed in the command line interface:
|
|
42
42
|
|
|
43
43
|
```text
|
|
44
|
-
$
|
|
44
|
+
$ modern dev --entry
|
|
45
45
|
|
|
46
46
|
? Please select the entry that needs to be built
|
|
47
47
|
❯ ◯ foo
|
|
@@ -57,22 +57,22 @@ You can also specify the page name through parameters after `--entry`, and the n
|
|
|
57
57
|
|
|
58
58
|
```bash
|
|
59
59
|
# Compile foo page
|
|
60
|
-
|
|
60
|
+
modern dev --entry foo
|
|
61
61
|
|
|
62
62
|
# Compile foo and bar pages
|
|
63
|
-
|
|
63
|
+
modern dev --entry foo,bar
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
-
##
|
|
66
|
+
## modern start
|
|
67
67
|
|
|
68
|
-
`
|
|
68
|
+
`modern start` is an alias of `modern dev` command, the usage of the two are exactly the same.
|
|
69
69
|
|
|
70
|
-
##
|
|
70
|
+
## modern build
|
|
71
71
|
|
|
72
|
-
The `
|
|
72
|
+
The `modern build` command will build production-ready artifacts in the `dist/` directory by default. You can specify the output directory by modifying the configuration [`output.distPath`](/configure/app/output/dist-path).
|
|
73
73
|
|
|
74
74
|
```bash
|
|
75
|
-
Usage:
|
|
75
|
+
Usage: modern build [options]
|
|
76
76
|
|
|
77
77
|
Options:
|
|
78
78
|
-c --config <config> specify the configuration file, which can be a relative or absolute path
|
|
@@ -80,80 +80,70 @@ Options:
|
|
|
80
80
|
-w --watch turn on watch mode, watch for changes and rebuild
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
-
##
|
|
83
|
+
## modern runtime status
|
|
84
84
|
|
|
85
|
-
The `
|
|
86
|
-
|
|
87
|
-
For example, add application entry, enable some optional features such as BFF, micro frontend, etc.
|
|
85
|
+
The `modern runtime status` command reads the runtime status endpoint and prints the response. It targets `http://127.0.0.1:8080/_modern/runtime/status` by default.
|
|
88
86
|
|
|
89
87
|
```bash
|
|
90
|
-
Usage:
|
|
88
|
+
Usage: modern runtime status [options]
|
|
91
89
|
|
|
92
90
|
Options:
|
|
93
|
-
--
|
|
94
|
-
--
|
|
95
|
-
-
|
|
96
|
-
-
|
|
97
|
-
--
|
|
98
|
-
--
|
|
99
|
-
-h, --help
|
|
91
|
+
--endpoint <endpoint> runtime status endpoint URL or path
|
|
92
|
+
--token <token> runtime status auth token
|
|
93
|
+
--token-env <name> environment variable name that stores runtime status auth token (default: "MODERN_RUNTIME_SIGNAL_TOKEN")
|
|
94
|
+
--header-name <name> auth header name (default: "x-modernjs-runtime-signal-token")
|
|
95
|
+
--timeout <ms> request timeout in milliseconds (default: "5000")
|
|
96
|
+
--json output as JSON format for machine reading
|
|
97
|
+
-h, --help display help for command
|
|
100
98
|
```
|
|
101
99
|
|
|
102
|
-
|
|
100
|
+
If `--endpoint` is a path, it is resolved against `http://127.0.0.1:8080`. If `--token` is omitted, the command reads the token from the environment variable named by `--token-env`.
|
|
103
101
|
|
|
104
|
-
|
|
102
|
+
By default, the command formats the response as readable key/value lines. Add `--json` to print the raw JSON payload.
|
|
105
103
|
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
? Please select the operation you want: Create Element
|
|
109
|
-
? Please select the type of element to create: New "entry"
|
|
110
|
-
? Please fill in the entry name: entry
|
|
104
|
+
```bash
|
|
105
|
+
modern runtime status --json
|
|
111
106
|
```
|
|
112
107
|
|
|
113
|
-
|
|
108
|
+
## modern runtime fallback-signal
|
|
114
109
|
|
|
115
|
-
|
|
110
|
+
The `modern runtime fallback-signal` command posts a runtime fallback signal to the canary contract-gate endpoint. It targets `http://127.0.0.1:8080/_modern/contract-gates/runtime-fallback` by default.
|
|
116
111
|
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
112
|
+
```bash
|
|
113
|
+
Usage: modern runtime fallback-signal [options]
|
|
114
|
+
|
|
115
|
+
Options:
|
|
116
|
+
--app <appName> remote app name
|
|
117
|
+
--endpoint <endpoint> runtime fallback signal endpoint URL or path
|
|
118
|
+
--reason <reason> fallback reason (default: "runtime_fallback")
|
|
119
|
+
--phase <phase> fallback phase (default: "load")
|
|
120
|
+
--entry <entry> remote entry URL
|
|
121
|
+
--runtime-digest <digest> runtime digest value
|
|
122
|
+
--metadata <json> metadata JSON object string
|
|
123
|
+
--token <token> runtime signal auth token
|
|
124
|
+
--token-env <name> environment variable name that stores runtime signal auth token (default: "MODERN_RUNTIME_SIGNAL_TOKEN")
|
|
125
|
+
--header-name <name> auth header name (default: "x-modernjs-runtime-signal-token")
|
|
126
|
+
--timeout <ms> request timeout in milliseconds (default: "5000")
|
|
127
|
+
--json output as JSON format for machine reading
|
|
128
|
+
-h, --help display help for command
|
|
124
129
|
```
|
|
125
130
|
|
|
126
|
-
|
|
127
|
-
The `--config` parameter needs to use a JSON string.
|
|
131
|
+
The request body always includes `appName`, `reason`, and `phase`. It includes `entry`, `runtimeDigest`, and `metadata` only when those options are provided. `--metadata` must be a JSON object string.
|
|
128
132
|
|
|
129
|
-
|
|
130
|
-
|
|
133
|
+
```bash
|
|
134
|
+
modern runtime fallback-signal --app crm-shell --reason remote_load_failed --phase load --json
|
|
135
|
+
```
|
|
131
136
|
|
|
132
137
|
import ServeCommand from '@site-docs-en/components/serve-command';
|
|
133
138
|
|
|
134
139
|
<ServeCommand />
|
|
135
140
|
|
|
136
|
-
##
|
|
137
|
-
|
|
138
|
-
Execute the command `npx ultramodern upgrade` in the project, by default, dependencies in the `package.json` are updated to the latest version.
|
|
139
|
-
|
|
140
|
-
```bash
|
|
141
|
-
Usage: ultramodern upgrade [options]
|
|
142
|
-
|
|
143
|
-
Options:
|
|
144
|
-
--config <config> specify the configuration file, which can be a relative or absolute path
|
|
145
|
-
--registry <registry> specify npm registry (default: "")
|
|
146
|
-
-d,--debug using debug mode to log something (default: false)
|
|
147
|
-
--cwd <cwd> app directory (default: "")
|
|
148
|
-
-h, --help show command help
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
## ultramodern inspect
|
|
141
|
+
## modern inspect
|
|
152
142
|
|
|
153
|
-
The `
|
|
143
|
+
The `modern inspect` command is used to view the UltraModern.js config, [Rsbuild config](https://v2.rsbuild.rs/config/index) and Rspack config of the project.
|
|
154
144
|
|
|
155
145
|
```bash
|
|
156
|
-
Usage:
|
|
146
|
+
Usage: modern inspect [options]
|
|
157
147
|
|
|
158
148
|
Options:
|
|
159
149
|
--env <env> view the configuration in the target environment (default: "development")
|
|
@@ -163,14 +153,14 @@ Options:
|
|
|
163
153
|
-h, --help show command help
|
|
164
154
|
```
|
|
165
155
|
|
|
166
|
-
After executing the command `npx
|
|
156
|
+
After executing the command `npx modern inspect` in the project root directory, the following files will be generated in the `dist` directory of the project:
|
|
167
157
|
|
|
168
158
|
- `modern.js.config.mjs`:The Modern.js configuration currently used.
|
|
169
159
|
- `rsbuild.config.mjs`: The Rsbuild config to use at build time.
|
|
170
160
|
- `rspack.config.web.mjs`: The Rspack config used by to use at build time.
|
|
171
161
|
|
|
172
162
|
```bash
|
|
173
|
-
➜ npx
|
|
163
|
+
➜ npx modern inspect
|
|
174
164
|
|
|
175
165
|
Inspect config succeed, open following files to view the content:
|
|
176
166
|
|
|
@@ -184,7 +174,7 @@ Inspect config succeed, open following files to view the content:
|
|
|
184
174
|
By default, the inspect command will output the development configs, you can use the `--env production` option to output the production configs:
|
|
185
175
|
|
|
186
176
|
```bash
|
|
187
|
-
|
|
177
|
+
modern inspect --env production
|
|
188
178
|
```
|
|
189
179
|
|
|
190
180
|
### Verbose content
|
|
@@ -192,7 +182,7 @@ ultramodern inspect --env production
|
|
|
192
182
|
By default, the inspect command will omit the function content in the config object, you can use the `--verbose` option to output the full content of the function:
|
|
193
183
|
|
|
194
184
|
```bash
|
|
195
|
-
|
|
185
|
+
modern inspect --verbose
|
|
196
186
|
```
|
|
197
187
|
|
|
198
188
|
### SSR Configuration
|
|
@@ -200,7 +190,7 @@ ultramodern inspect --verbose
|
|
|
200
190
|
If the project has enabled SSR, an additional `rspack.config.node.mjs` file will be generated in the `dist/`, corresponding to the Rspack configuration at SSR build time.
|
|
201
191
|
|
|
202
192
|
```bash
|
|
203
|
-
➜ npx
|
|
193
|
+
➜ npx modern inspect
|
|
204
194
|
|
|
205
195
|
Inspect config succeed, open following files to view the content:
|
|
206
196
|
|
|
@@ -86,20 +86,20 @@ title: Modern.js v2 发布
|
|
|
86
86
|
|
|
87
87
|
大家对 Modern.js 框架的第一印象可能是「一个大而全的框架」,但事实上,为了避免变得臃肿,**Modern.js 采取了渐进式设计**,将所有功能建立在灵活的插件系统之上,因此具备按需启用和可插拔的能力。
|
|
88
88
|
|
|
89
|
-
Modern.js 期望能支持不同规模的项目研发,考虑到中大型项目和小型项目对功能的诉求存在差异,**Modern.js 的大多数功能都是按需启用的**。在创建项目时,Modern.js 默认只安装核心模块,使 npm 依赖保持轻量;当需要用到额外功能时,你可以通过
|
|
89
|
+
Modern.js 期望能支持不同规模的项目研发,考虑到中大型项目和小型项目对功能的诉求存在差异,**Modern.js 的大多数功能都是按需启用的**。在创建项目时,Modern.js 默认只安装核心模块,使 npm 依赖保持轻量;当需要用到额外功能时,你可以通过 modern new 命令一键开启,并自动安装相关依赖。
|
|
90
90
|
|
|
91
|
-

|
|
92
92
|
|
|
93
|
-
<div style={{ textAlign: 'center', fontStyle: 'italic' }}>
|
|
93
|
+
<div style={{ textAlign: 'center', fontStyle: 'italic' }}>modern new 命令</div>
|
|
94
94
|
|
|
95
95
|
比如:
|
|
96
96
|
|
|
97
97
|
- 对于基础的开发场景,项目中只需安装 Modern.js 的 CLI 工具 `@modern-js/app-tools`,即具备了开发调试、生产构建的能力。
|
|
98
|
-
- 当你需要在应用中增加一些 BFF 接口时,可以执行
|
|
98
|
+
- 当你需要在应用中增加一些 BFF 接口时,可以执行 modern new 命令来启用 BFF 功能。启用后,Modern.js 会自动安装所需的 BFF 插件,以及某个 Node.js 框架对应的插件(如 Koa / Express):
|
|
99
99
|
|
|
100
100
|

|
|
101
101
|
|
|
102
|
-
目前,你可以通过 `
|
|
102
|
+
目前,你可以通过 `modern new` 命令来按需开启以下功能,未来我们也会将更多功能加入到 `new` 命令中,使其能够被便捷地集成。
|
|
103
103
|
|
|
104
104
|

|
|
105
105
|
|
|
@@ -339,7 +339,7 @@ For more on config-based routing, see the docs: [Config-Based Routing](/guides/b
|
|
|
339
339
|
|
|
340
340
|
#### Route Debugging
|
|
341
341
|
|
|
342
|
-
Run the `npx
|
|
342
|
+
Run the `npx modern routes` command to generate a complete route structure analysis report in the `dist/routes-inspect.json` file.
|
|
343
343
|
|
|
344
344
|
The report displays each route's path, component file, data loader, error boundary, loading component, and other details, helping developers quickly understand the project's route configuration and troubleshoot routing issues. The structured JSON format is also easy for AI agents to understand and analyze, improving the efficiency of AI-assisted development.
|
|
345
345
|
|
|
@@ -24,8 +24,4 @@ Modern.js follows the [Semantic Versioning](https://semver.org) specification.
|
|
|
24
24
|
|
|
25
25
|
## Version Upgrade
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
npx ultramodern upgrade
|
|
31
|
-
```
|
|
27
|
+
Modern.js 3.0 no longer ships the `modern upgrade` command. When you need to upgrade a project, follow the manual migration steps in [Upgrade](/guides/get-started/upgrade).
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
##
|
|
1
|
+
## modern deploy
|
|
2
2
|
|
|
3
|
-
The `
|
|
3
|
+
The `modern deploy` command is used to generate artifacts required for the deployment platform.
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
|
-
Usage:
|
|
6
|
+
Usage: modern deploy [options]
|
|
7
7
|
|
|
8
8
|
Options:
|
|
9
9
|
-c --config <config> Specify configuration file path, either relative or absolute
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
UltraModern.js provides the BleedingDev create package to create
|
|
1
|
+
UltraModern.js provides the BleedingDev create package to create SuperApp
|
|
2
|
+
workspaces. It does not require global installation and can be run on-demand
|
|
3
|
+
using `pnpm dlx`.
|
|
4
|
+
|
|
5
|
+
The supported pnpm command is the scoped package specifier:
|
|
6
|
+
`pnpm dlx @bleedingdev/modern-js-create <target>`. Do not shorten it to
|
|
7
|
+
`pnpm dlx modern-js-create`; there is no unscoped package by that name.
|
|
2
8
|
|
|
3
9
|
You can initialize the empty directory you are already in:
|
|
4
10
|
|
|
@@ -10,33 +16,13 @@ pnpm dlx @bleedingdev/modern-js-create .
|
|
|
10
16
|
You can also create a project directly in a new directory:
|
|
11
17
|
|
|
12
18
|
```bash
|
|
13
|
-
pnpm dlx @bleedingdev/modern-js-create
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
TanStack Router is scaffolded by default. To force React Router compatibility:
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
pnpm dlx @bleedingdev/modern-js-create myapp --router react-router
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
Tailwind CSS v4 is scaffolded by default. To opt out:
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
pnpm dlx @bleedingdev/modern-js-create myapp --no-tailwind
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
Effect HttpApi BFF is scaffolded by default.
|
|
29
|
-
|
|
30
|
-
To initialize BFF scaffold with Hono runtime:
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
pnpm dlx @bleedingdev/modern-js-create myapp --bff-runtime hono
|
|
19
|
+
pnpm dlx @bleedingdev/modern-js-create my-super-app
|
|
34
20
|
```
|
|
35
21
|
|
|
36
22
|
To initialize with workspace protocol dependencies (for local monorepo testing of unreleased Modern.js packages):
|
|
37
23
|
|
|
38
24
|
```bash
|
|
39
|
-
pnpm dlx @bleedingdev/modern-js-create
|
|
25
|
+
pnpm dlx @bleedingdev/modern-js-create my-super-app --workspace
|
|
40
26
|
```
|
|
41
27
|
|
|
42
28
|
The BleedingDev create package will directly create the application without providing an interactive Q & A interface:
|
|
@@ -44,7 +30,7 @@ The BleedingDev create package will directly create the application without prov
|
|
|
44
30
|
```bash
|
|
45
31
|
🚀 Welcome to UltraModern.js
|
|
46
32
|
|
|
47
|
-
📦 Creating project "
|
|
33
|
+
📦 Creating project "my-super-app"...
|
|
48
34
|
|
|
49
35
|
✨ Project created successfully! 🎉
|
|
50
36
|
|
|
@@ -52,7 +38,7 @@ The BleedingDev create package will directly create the application without prov
|
|
|
52
38
|
|
|
53
39
|
📁 Enter the project directory:
|
|
54
40
|
|
|
55
|
-
cd
|
|
41
|
+
cd my-super-app
|
|
56
42
|
|
|
57
43
|
🔧 Initialize Git repository:
|
|
58
44
|
|
|
@@ -71,37 +57,23 @@ Now, the project structure is as follows:
|
|
|
71
57
|
|
|
72
58
|
```
|
|
73
59
|
.
|
|
74
|
-
├──
|
|
75
|
-
|
|
60
|
+
├── apps
|
|
61
|
+
│ └── shell-super-app
|
|
76
62
|
├── package.json
|
|
77
|
-
├──
|
|
78
|
-
├──
|
|
79
|
-
│ ├──
|
|
80
|
-
│
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
│ └── page.tsx
|
|
85
|
-
└── tsconfig.json
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
Tailwind CSS v4 is generated by default; pass `--no-tailwind` to omit `postcss.config.mjs`, `tailwind.config.ts`, and the Tailwind import.
|
|
89
|
-
|
|
90
|
-
By default, `modern.config.ts` enables `@modern-js/plugin-bff`, generates `api/effect/index.ts` + `shared/effect/api.ts`, and sets `bff.runtimeFramework` to `effect`.
|
|
91
|
-
When `--bff-runtime hono` is enabled, `modern.config.ts` enables `@modern-js/plugin-bff`, generates `api/lambda/hello.ts`, and sets `bff.runtimeFramework` to `hono`.
|
|
92
|
-
When `--workspace` is enabled, `@modern-js/*` dependencies use `workspace:*` versions for local monorepo linkage.
|
|
93
|
-
|
|
94
|
-
It creates a simple production-ready UltraModern app by default and installs
|
|
95
|
-
the published BleedingDev package aliases:
|
|
96
|
-
|
|
97
|
-
```bash
|
|
98
|
-
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
63
|
+
├── packages
|
|
64
|
+
│ ├── shared-contracts
|
|
65
|
+
│ ├── shared-design-tokens
|
|
66
|
+
│ └── shared-effect-client
|
|
67
|
+
├── scripts
|
|
68
|
+
├── topology
|
|
69
|
+
└── verticals
|
|
99
70
|
```
|
|
100
71
|
|
|
101
|
-
|
|
72
|
+
The default workspace starts shell-only and installs the published BleedingDev
|
|
73
|
+
package aliases:
|
|
102
74
|
|
|
103
75
|
```bash
|
|
104
|
-
pnpm dlx @bleedingdev/modern-js-create my-super-app
|
|
76
|
+
pnpm dlx @bleedingdev/modern-js-create my-super-app
|
|
105
77
|
```
|
|
106
78
|
|
|
107
79
|
From a generated SuperApp workspace, add a business MicroVertical in place:
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
##
|
|
1
|
+
## modern serve
|
|
2
2
|
|
|
3
|
-
The `
|
|
3
|
+
The `modern serve` command is used to start an UltraModern.js project in the production environment. It can also be used to preview the artifacts built for the production environment locally. Please note that you need to execute the [`build`](/apis/app/commands#modern-build) command beforehand to generate the corresponding artifacts.
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
|
-
Usage:
|
|
6
|
+
Usage: modern serve [options]
|
|
7
7
|
|
|
8
8
|
Options:
|
|
9
9
|
-c --config <config> specify the configuration file, which can be a relative or absolute path
|
|
@@ -123,13 +123,35 @@ export default defineConfig({
|
|
|
123
123
|
}
|
|
124
124
|
```
|
|
125
125
|
|
|
126
|
-
- **Default:**
|
|
126
|
+
- **Default:**
|
|
127
|
+
|
|
128
|
+
```ts
|
|
129
|
+
{
|
|
130
|
+
enabled: true,
|
|
131
|
+
requireEnvelope: false,
|
|
132
|
+
envelopeHeader: 'x-modernjs-data-envelope',
|
|
133
|
+
validateOrigin: true,
|
|
134
|
+
requireTraceContext: false,
|
|
135
|
+
batch: {
|
|
136
|
+
enabled: true,
|
|
137
|
+
endpoint: '/_data/batch',
|
|
138
|
+
maxBatchSize: 16,
|
|
139
|
+
maxBatchBytes: 64 * 1024,
|
|
140
|
+
flushIntervalMs: 8,
|
|
141
|
+
maxConcurrency: 4,
|
|
142
|
+
requestTimeoutMs: 10000,
|
|
143
|
+
allowedMethods: ['GET'],
|
|
144
|
+
},
|
|
145
|
+
}
|
|
146
|
+
```
|
|
127
147
|
|
|
128
148
|
Configure request-envelope validation for Effect runtime.
|
|
129
149
|
|
|
130
150
|
Generated Effect client requests batching against `${bff.prefix}${batch.endpoint}` (for example, `/bff-api/_data/batch`).
|
|
131
151
|
|
|
132
|
-
|
|
152
|
+
Envelope validation is enabled by default but optional: requests without an envelope pass unless `requireEnvelope` is `true`. If an envelope is present, runtime validates it against the configured namespace, origin, trace, and selection policy. `expectedNamespace` is unset by default, and `selection` has no default limits unless configured.
|
|
153
|
+
|
|
154
|
+
Origin validation is enabled by default. Runtime compares envelope origin with request `Origin` header first, then falls back to request URL origin; set `validateOrigin: false` to disable that comparison.
|
|
133
155
|
|
|
134
156
|
```ts title="modern.config.ts"
|
|
135
157
|
export default defineConfig({
|
|
@@ -149,4 +171,6 @@ export default defineConfig({
|
|
|
149
171
|
});
|
|
150
172
|
```
|
|
151
173
|
|
|
152
|
-
`batch.flushIntervalMs` controls client-side micro-batch window in generated Effect client. `maxConcurrency` and `requestTimeoutMs` are applied by the server batch gateway when dispatching items.
|
|
174
|
+
`batch.flushIntervalMs` controls the client-side micro-batch window in the generated Effect client. `maxConcurrency` and `requestTimeoutMs` are applied by the server batch gateway when dispatching items.
|
|
175
|
+
|
|
176
|
+
The generated `effectBff.client.*` API only exists for loader-materialized `@api/effect/*` imports. Directly importing the server entry (`api/effect/index`) exposes the Effect BFF definition; its `client` property is a placeholder that fails on operation access.
|
|
@@ -11,22 +11,23 @@ type RsdoctorConfig =
|
|
|
11
11
|
| boolean
|
|
12
12
|
| {
|
|
13
13
|
enabled?: boolean;
|
|
14
|
+
disableClientServer?: boolean;
|
|
14
15
|
};
|
|
15
16
|
```
|
|
16
17
|
|
|
17
|
-
- **Default:** `
|
|
18
|
+
- **Default:** `undefined`, Rsdoctor is disabled unless this option is configured.
|
|
18
19
|
|
|
19
|
-
Configure Rsdoctor diagnostics in Modern.js build.
|
|
20
|
+
Configure Rsdoctor diagnostics in Modern.js build. Set this option to `true` to enable Rsdoctor:
|
|
20
21
|
|
|
21
22
|
```ts title="modern.config.ts"
|
|
22
23
|
export default defineConfig({
|
|
23
24
|
performance: {
|
|
24
|
-
rsdoctor:
|
|
25
|
+
rsdoctor: true,
|
|
25
26
|
},
|
|
26
27
|
});
|
|
27
28
|
```
|
|
28
29
|
|
|
29
|
-
You can also use object form
|
|
30
|
+
You can also use object form. When an object is provided, Rsdoctor is enabled unless `enabled` is set to `false`:
|
|
30
31
|
|
|
31
32
|
```ts title="modern.config.ts"
|
|
32
33
|
export default defineConfig({
|
|
@@ -37,3 +38,5 @@ export default defineConfig({
|
|
|
37
38
|
},
|
|
38
39
|
});
|
|
39
40
|
```
|
|
41
|
+
|
|
42
|
+
To disable Rsdoctor after enabling it in shared config, set `rsdoctor` to `false` or set `enabled` to `false`.
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
title: tsChecker
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
+
import { PackageManagerTabs } from '@theme';
|
|
6
|
+
|
|
5
7
|
# tools.tsChecker
|
|
6
8
|
|
|
7
9
|
- **Type:** `Object | Function`
|
|
@@ -14,6 +16,8 @@ const defaultOptions = {
|
|
|
14
16
|
memoryLimit: 8192,
|
|
15
17
|
// use tsconfig of user project
|
|
16
18
|
configFile: tsconfigPath,
|
|
19
|
+
// use TypeScript Go checker by default
|
|
20
|
+
tsgo: true,
|
|
17
21
|
// use TS-Go native preview of user project
|
|
18
22
|
typescriptPath: require.resolve('@typescript/native-preview/package.json'),
|
|
19
23
|
},
|
|
@@ -35,7 +39,7 @@ const defaultOptions = {
|
|
|
35
39
|
},
|
|
36
40
|
```
|
|
37
41
|
|
|
38
|
-
By default,
|
|
42
|
+
By default, the [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) is enabled for type checking. You can use `output.disableTsChecker` config to disable it.
|
|
39
43
|
|
|
40
44
|
## Example
|
|
41
45
|
|
|
@@ -53,4 +57,28 @@ export default {
|
|
|
53
57
|
};
|
|
54
58
|
```
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
## TypeScript Go by Default
|
|
61
|
+
|
|
62
|
+
Type checking runs on [TypeScript Go](https://github.com/microsoft/typescript-go) (`tsgo`) by default in this fork. The capability is provided by [`ts-checker-rspack-plugin`](https://github.com/rstackjs/ts-checker-rspack-plugin), which is integrated by [`@rsbuild/plugin-type-check`](https://github.com/rstackjs/rsbuild-plugin-type-check), and reduces type-checking time by about 5-10x.
|
|
63
|
+
|
|
64
|
+
`@typescript/native-preview` ships with the builder, so no extra install is needed. To pin your own version, install it in your project:
|
|
65
|
+
|
|
66
|
+
<PackageManagerTabs command="install @typescript/native-preview -D" />
|
|
67
|
+
|
|
68
|
+
When `tsgo` is enabled, the default `typescript.typescriptPath` resolves to `@typescript/native-preview/package.json`. If you manually set `typescript.typescriptPath`, it must be an absolute path to `@typescript/native-preview/package.json`.
|
|
69
|
+
|
|
70
|
+
To fall back to the classic TypeScript checker, set `typescript.tsgo` to `false` and make sure `typescript` is installed in your project:
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
export default {
|
|
74
|
+
tools: {
|
|
75
|
+
tsChecker: {
|
|
76
|
+
typescript: {
|
|
77
|
+
tsgo: false,
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
};
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
For supported options and limitations, please refer to [ts-checker-rspack-plugin - TypeScript Go support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-go-support).
|
|
@@ -86,8 +86,8 @@ export default defineConfig(({ env, command }) => ({
|
|
|
86
86
|
This function accepts the following parameters:
|
|
87
87
|
|
|
88
88
|
- `env`: Corresponds to the value of `process.env.NODE_ENV`.
|
|
89
|
-
- When running `
|
|
90
|
-
- When running `
|
|
89
|
+
- When running `modern dev`, the value of `env` is `development`.
|
|
90
|
+
- When running `modern build` or `modern serve`, the value of `env` is `production`.
|
|
91
91
|
- `command`: Corresponds to the current command being run, such as `dev`, `build`, or `serve`.
|
|
92
92
|
|
|
93
93
|
#### Exporting Asynchronous Functions
|
|
@@ -117,8 +117,8 @@ For example, if you need to use the `modern.prod.config.js` file when executing
|
|
|
117
117
|
```json title="package.json"
|
|
118
118
|
{
|
|
119
119
|
"scripts": {
|
|
120
|
-
"dev": "
|
|
121
|
-
"build": "
|
|
120
|
+
"dev": "modern dev",
|
|
121
|
+
"build": "modern build --config modern.prod.config.js"
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
```
|
|
@@ -126,7 +126,7 @@ For example, if you need to use the `modern.prod.config.js` file when executing
|
|
|
126
126
|
You can also abbreviate the `--config` option as `-c`:
|
|
127
127
|
|
|
128
128
|
```bash
|
|
129
|
-
$
|
|
129
|
+
$ modern build -c modern.prod.config.js
|
|
130
130
|
```
|
|
131
131
|
|
|
132
132
|
### Configuring in package.json (Not Recommended)
|
|
@@ -187,7 +187,7 @@ The configuration in the `modern.config.local.ts` file will be deeply merged wit
|
|
|
187
187
|
|
|
188
188
|
When using `modern.config.local.ts`, please note the following:
|
|
189
189
|
|
|
190
|
-
- The `modern.config.local.ts` file will only be loaded when executing the `
|
|
190
|
+
- The `modern.config.local.ts` file will only be loaded when executing the `modern dev` commands and will not be loaded during `modern build`.
|
|
191
191
|
- The priority of the `modern.config.local.ts` file is higher than both `modern.config.ts` and the `modernConfig` field in `package.json`.
|
|
192
192
|
- Since `modern.config.local.ts` is only used for local debugging, it is not recommended to commit it to the code repository. Ensure that the project's `.gitignore` file includes `modern.config.local.ts` and similar files.
|
|
193
193
|
|
|
@@ -55,12 +55,14 @@ export default defineConfig({
|
|
|
55
55
|
});
|
|
56
56
|
```
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
Envelope validation is enabled by default but does not require an envelope unless `requireEnvelope` is set. Origin validation is enabled by default; set `validateOrigin: false` to skip comparing the envelope origin against the incoming `Origin` header, or the request URL origin when the header is absent.
|
|
59
59
|
|
|
60
60
|
## Generated Effect client behavior
|
|
61
61
|
|
|
62
62
|
When using the generated Effect client (`@api/effect/index`), Modern.js automatically attaches a serialized data envelope header (`x-modernjs-data-envelope`) for same-origin requests.
|
|
63
63
|
|
|
64
|
+
The generated client is loader-materialized. Import it from `@api/effect/*` in browser or client-bundled code; direct imports of the server entry (`api/effect/index`) expose the Effect BFF definition and only provide a placeholder `client`.
|
|
65
|
+
|
|
64
66
|
The envelope includes:
|
|
65
67
|
|
|
66
68
|
- operation metadata
|