@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.99 → 3.4.0-ultramodern.1
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 +143 -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 +128 -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
|
@@ -105,7 +105,7 @@ const layer = HttpApiBuilder.layer(bffEffectApi).pipe(
|
|
|
105
105
|
export default defineEffectBff({ api: bffEffectApi, layer });
|
|
106
106
|
```
|
|
107
107
|
|
|
108
|
-
Call Effect endpoints from
|
|
108
|
+
Call Effect endpoints from browser code via `@api/effect/index`:
|
|
109
109
|
|
|
110
110
|
```ts title="src/routes/page.tsx"
|
|
111
111
|
import effectBff from '@api/effect/index';
|
|
@@ -113,6 +113,8 @@ import effectBff from '@api/effect/index';
|
|
|
113
113
|
const response = await effectBff.client.hello.ping({});
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
+
The `effectBff.client.*` surface is materialized by the BFF loader for `@api/effect/*` imports. Do not import `api/effect/index` directly and expect `client` to run in server code, scripts, or tests; direct entry imports expose the server runtime definition, and `client` is only a typed placeholder there.
|
|
117
|
+
|
|
116
118
|
import Hono from '@site-docs-en/components/hono';
|
|
117
119
|
|
|
118
120
|
<Hono />
|
|
@@ -20,7 +20,7 @@ title: API Reference
|
|
|
20
20
|
| `isResourcesReady` | `boolean` | Whether translation resources for the current language have finished loading |
|
|
21
21
|
| `i18nInstance` | `I18nInstance` | i18next instance for advanced scenarios |
|
|
22
22
|
|
|
23
|
-
When `localePathRedirect` is enabled and `localisedUrls` is omitted, Modern.js
|
|
23
|
+
When `localePathRedirect` is enabled and `localisedUrls` is omitted, Modern.js keeps prefix-only paths such as `/en/about`. Translated path segments are enabled only by a non-empty `localisedUrls` map. Route generation validates every localisable path and every configured language only while that map is enabled.
|
|
24
24
|
|
|
25
25
|
### Basic Usage
|
|
26
26
|
|
|
@@ -49,7 +49,7 @@ export default defineConfig({
|
|
|
49
49
|
| `languages` | `string[]` | `[]` | Supported language list |
|
|
50
50
|
| `fallbackLanguage` | `string` | `''` | Fallback language when detection fails |
|
|
51
51
|
| `localePathRedirect` | `boolean` | `false` | Handles URL locale prefix recognition, redirects, and switching. See [Routing Integration](./routing.md#enable-locale-path-prefixes) |
|
|
52
|
-
| `localisedUrls` | `boolean \| Record<string, Record<string, string>>` |
|
|
52
|
+
| `localisedUrls` | `boolean \| Record<string, Record<string, string>>` | Prefix-only behavior | Localised route path map. Only a non-empty map enables translated path segments; omitted, `true`, `false`, and `{}` keep locale prefixes without translating path segments. |
|
|
53
53
|
| `i18nextDetector` | `boolean` | `false` | Enables the i18next detector (Cookie / Header, etc.) |
|
|
54
54
|
| `detection` | `LanguageDetectorOptions` | - | Detailed i18next detector configuration. See [Locale Detection](./locale-detection.md) |
|
|
55
55
|
| `ignoreRedirectRoutes` | `string[] \| Function` | - | Routes that skip redirects. See [Locale Detection](./locale-detection.md#ignoreredirectroutes) |
|
|
@@ -113,7 +113,7 @@ i18nPlugin({
|
|
|
113
113
|
|
|
114
114
|
## ignoreRedirectRoutes
|
|
115
115
|
|
|
116
|
-
Specify which additional paths should skip locale path redirects. Modern.js automatically skips server API routes
|
|
116
|
+
Specify which additional paths should skip locale path redirects. Modern.js automatically skips server API routes, the default `/api` BFF prefix when BFF is configured, and custom `bff.prefix` values. Use `ignoreRedirectRoutes` for non-API application paths that also do not need a locale prefix.
|
|
117
117
|
|
|
118
118
|
**Syntax 1: string array** (supports exact match and prefix match)
|
|
119
119
|
|
|
@@ -32,11 +32,13 @@ i18nPlugin({
|
|
|
32
32
|
| `/en/about` | Visits normally, language is `en` |
|
|
33
33
|
| `/zh/about` | Visits normally, language is `zh` |
|
|
34
34
|
|
|
35
|
-
API and BFF prefixes are skipped automatically,
|
|
35
|
+
API and BFF prefixes are skipped automatically, including server API routes, the default `/api` BFF prefix when BFF is configured, and custom `bff.prefix` values. Those routes do not need locale prefixes or `localisedUrls` entries. For additional application paths that should not redirect, use `ignoreRedirectRoutes`. See [Locale Detection -> ignoreRedirectRoutes](./locale-detection.md#ignoreredirectroutes).
|
|
36
36
|
|
|
37
37
|
## Localised URL Paths
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
`localePathRedirect` only adds and reads locale prefixes by default, for example `/en/about`. Translated path segments are opt-in: `localisedUrls` is enabled only when you provide a non-empty map. Omitting `localisedUrls`, setting it to `true`, setting it to `false`, or passing an empty object keeps prefix-only behavior.
|
|
40
|
+
|
|
41
|
+
When a non-empty `localisedUrls` map is configured, every localisable route path must define a URL for every configured language. If you add a new language to `languages`, Modern.js will fail route generation until each localised URL entry includes that language too.
|
|
40
42
|
|
|
41
43
|
`localisedUrls` applies to file-system routes generated for both React Router and TanStack Router projects. Do not configure localised URL entries for API routes, BFF prefixes, or configured `bff.prefix` values; those paths are excluded from locale redirects automatically.
|
|
42
44
|
|
|
@@ -73,7 +75,7 @@ i18nPlugin({
|
|
|
73
75
|
| `/cs/terms-of-service` | Redirects to `/cs/podminky-pouzivani` |
|
|
74
76
|
| `/cs/podminky-pouzivani` | Visits normally, language is `cs` |
|
|
75
77
|
|
|
76
|
-
Set `localisedUrls: false`
|
|
78
|
+
Set `localisedUrls: false` as the escape hatch when a preset, shared config, or generated metadata would otherwise provide a map but this entry should keep locale prefixes without translated path segments.
|
|
77
79
|
|
|
78
80
|
## Route Configuration
|
|
79
81
|
|
|
@@ -48,6 +48,18 @@ export default defineServerConfig({
|
|
|
48
48
|
|
|
49
49
|
After creating the file, you can write custom logic in this file.
|
|
50
50
|
|
|
51
|
+
3. Include `server` directory in `tsconfig.json`
|
|
52
|
+
|
|
53
|
+
```json5
|
|
54
|
+
{
|
|
55
|
+
// ...
|
|
56
|
+
"include": [
|
|
57
|
+
// ...
|
|
58
|
+
"server"
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
51
63
|
## Capabilities of the Custom Web Server
|
|
52
64
|
|
|
53
65
|
Modern.js's Web Server is based on Hono, and in the latest version of the Custom Web Server, we expose Hono's middleware capabilities, you can refer to [Hono API](https://hono.dev/docs/api/context) for more usage.
|
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Rsdoctor is a Rspack build analysis tool. In Modern.js, we recommend using Rsdoctor to diagnose and analyze the build process and build outputs.
|
|
4
4
|
|
|
5
|
-
Modern.js
|
|
5
|
+
Modern.js does not enable Rsdoctor by default. Configure `performance.rsdoctor` when you want to run Rsdoctor for a build.
|
|
6
6
|
|
|
7
7
|
## Execute Build
|
|
8
8
|
|
|
9
9
|
```ts title="modern.config.ts"
|
|
10
10
|
export default defineConfig({
|
|
11
11
|
performance: {
|
|
12
|
-
// Enabled by default in production build.
|
|
13
12
|
rsdoctor: true,
|
|
14
13
|
},
|
|
15
14
|
});
|
|
@@ -21,7 +20,7 @@ npm run build
|
|
|
21
20
|
|
|
22
21
|
## Disable Rsdoctor
|
|
23
22
|
|
|
24
|
-
If you want to disable Rsdoctor:
|
|
23
|
+
If you want to disable Rsdoctor after enabling it in shared config:
|
|
25
24
|
|
|
26
25
|
```ts title="modern.config.ts"
|
|
27
26
|
export default defineConfig({
|
|
@@ -55,7 +55,7 @@ Add the following scripts to `package.json` to start the BFF server and Storyboo
|
|
|
55
55
|
```json
|
|
56
56
|
{
|
|
57
57
|
"scripts": {
|
|
58
|
-
"dev:api": "
|
|
58
|
+
"dev:api": "modern dev --api-only",
|
|
59
59
|
"storybook": "BFF_PROXY=1 storybook dev -p 6006 --no-open",
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -15,12 +15,12 @@ Currently, Modern.js only supports running in a Node.js environment. Support for
|
|
|
15
15
|
|
|
16
16
|
## Build Deployment Products
|
|
17
17
|
|
|
18
|
-
Running the `
|
|
18
|
+
Running the `modern deploy` command will automatically produce deployment products. This process includes optimizing Bundler build products and their dependencies, detecting the current deployment platform, and automatically generating deployment products that can run on that platform.
|
|
19
19
|
|
|
20
|
-
If you want to generate and test the output locally for a specific deployment platform, you can specify the platform by setting the environment variable: `
|
|
20
|
+
If you want to generate and test the output locally for a specific deployment platform, you can specify the platform by setting the environment variable: `modern deploy`:
|
|
21
21
|
|
|
22
22
|
```bash
|
|
23
|
-
MODERNJS_DEPLOY=netlify npx
|
|
23
|
+
MODERNJS_DEPLOY=netlify npx modern deploy
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
:::info
|
|
@@ -36,10 +36,10 @@ By default, Modern.js outputs builds that can be run in a Node.js environment wh
|
|
|
36
36
|
Use the following command to build the project:
|
|
37
37
|
|
|
38
38
|
```bash
|
|
39
|
-
npx
|
|
39
|
+
npx modern deploy
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
When running the `
|
|
42
|
+
When running the `modern deploy` command, UltraModern.js will generate runnable products and output the following content in terminal:
|
|
43
43
|
|
|
44
44
|
```bash
|
|
45
45
|
Static directory: `.output/static`
|
|
@@ -67,7 +67,7 @@ Assume that the name in the `package.json` of the current project is `app`. Taki
|
|
|
67
67
|
{
|
|
68
68
|
"scripts": {
|
|
69
69
|
"build:packages": "pnpm --filter 'app^...' run build",
|
|
70
|
-
"deploy": "pnpm run build:packages &&
|
|
70
|
+
"deploy": "pnpm run build:packages && modern deploy"
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
```
|
|
@@ -78,7 +78,7 @@ If you use Rush as your Monorepo management tool, you can add the following comm
|
|
|
78
78
|
{
|
|
79
79
|
"scripts": {
|
|
80
80
|
"build:packages": "rush rebuild --to-except app",
|
|
81
|
-
"deploy": "rushx build:packages &&
|
|
81
|
+
"deploy": "rushx build:packages && modern deploy"
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
```
|
|
@@ -108,7 +108,7 @@ Add the following content to `netlify.toml`:
|
|
|
108
108
|
```toml
|
|
109
109
|
[build]
|
|
110
110
|
publish = "dist"
|
|
111
|
-
command = "
|
|
111
|
+
command = "modern deploy"
|
|
112
112
|
```
|
|
113
113
|
|
|
114
114
|
:::info
|
|
@@ -125,7 +125,7 @@ Full-stack projects refer to projects that use Custom Web Server, SSR or BFF. Th
|
|
|
125
125
|
```toml title="netlify.toml"
|
|
126
126
|
[build]
|
|
127
127
|
publish = "dist"
|
|
128
|
-
command = "
|
|
128
|
+
command = "modern deploy"
|
|
129
129
|
|
|
130
130
|
[functions]
|
|
131
131
|
directory = ".netlify/functions"
|
|
@@ -173,7 +173,7 @@ Add the following script in `packages/app/package.json`, before executing the de
|
|
|
173
173
|
{
|
|
174
174
|
"scripts": {
|
|
175
175
|
"build:packages": "pnpm --filter 'app^...' run build",
|
|
176
|
-
"deploy": "pnpm run build:packages &&
|
|
176
|
+
"deploy": "pnpm run build:packages && modern deploy"
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
179
|
```
|
|
@@ -213,7 +213,7 @@ Add the following content to `vercel.json`:
|
|
|
213
213
|
|
|
214
214
|
```json title="vercel.json"
|
|
215
215
|
{
|
|
216
|
-
"buildCommand": "
|
|
216
|
+
"buildCommand": "modern deploy",
|
|
217
217
|
"outputDirectory": ".vercel/output"
|
|
218
218
|
}
|
|
219
219
|
```
|
|
@@ -281,7 +281,7 @@ Add the following script to `packages/app/package.json` to run `build` command o
|
|
|
281
281
|
{
|
|
282
282
|
"scripts": {
|
|
283
283
|
"build:packages": "pnpm --filter 'app^...' run build",
|
|
284
|
-
"deploy": "pnpm run build:packages &&
|
|
284
|
+
"deploy": "pnpm run build:packages && modern deploy"
|
|
285
285
|
}
|
|
286
286
|
}
|
|
287
287
|
```
|
|
@@ -326,7 +326,7 @@ For branch deployment, follow these steps:
|
|
|
326
326
|
```
|
|
327
327
|
"scripts": {
|
|
328
328
|
//...
|
|
329
|
-
"deploy:gh-pages": "MODERNJS_DEPLOY=ghPages
|
|
329
|
+
"deploy:gh-pages": "MODERNJS_DEPLOY=ghPages modern deploy && gh-pages -d .output"
|
|
330
330
|
}
|
|
331
331
|
```
|
|
332
332
|
|
|
@@ -334,7 +334,7 @@ For branch deployment, follow these steps:
|
|
|
334
334
|
|
|
335
335
|
:::info
|
|
336
336
|
|
|
337
|
-
1. Running `MODERNJS_DEPLOY=ghPages
|
|
337
|
+
1. Running `MODERNJS_DEPLOY=ghPages modern deploy` will build the production output for GitHub in the .output directory.
|
|
338
338
|
2. You can refer to the [project](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)
|
|
339
339
|
:::
|
|
340
340
|
|
|
@@ -16,8 +16,8 @@ The current path prefix of the asset, which is a read-only environment variable.
|
|
|
16
16
|
|
|
17
17
|
The current execution environment and is a **read-only** environment variable whose have different values under different execution commands:
|
|
18
18
|
|
|
19
|
-
- `production`: Default value when running `
|
|
20
|
-
- `development`: Default value when running `
|
|
19
|
+
- `production`: Default value when running `modern build` or `modern serve`.
|
|
20
|
+
- `development`: Default value when running `modern dev`, also the default value in other cases.
|
|
21
21
|
|
|
22
22
|
### MODERN_ENV
|
|
23
23
|
|
|
@@ -47,6 +47,5 @@ Modern.js supports combining multiple rendering modes:
|
|
|
47
47
|
- [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr)
|
|
48
48
|
- [Streaming Server-Side Rendering (Streaming SSR)](/guides/basic-features/render/streaming-ssr)
|
|
49
49
|
- [React Server Components (RSC)](/guides/basic-features/render/rsc)
|
|
50
|
-
- [TanStack Router RSC](/guides/basic-features/render/tanstack-rsc)
|
|
51
50
|
- [Static Site Generation (SSG)](/guides/basic-features/render/ssg)
|
|
52
51
|
- [Rendering Cache](/guides/basic-features/render/ssr-cache)
|
|
@@ -531,4 +531,3 @@ The project's bundle has introduced a non-19 React version, commonly seen in mon
|
|
|
531
531
|
- [Data Cache](/guides/basic-features/data/data-cache)
|
|
532
532
|
- [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr)
|
|
533
533
|
- [Streaming SSR](/guides/basic-features/render/streaming-ssr)
|
|
534
|
-
- [TanStack Router RSC](/guides/basic-features/render/tanstack-rsc)
|
|
@@ -271,7 +271,7 @@ Config routes can be used together with convention routes. You can merge routes
|
|
|
271
271
|
|
|
272
272
|
:::info
|
|
273
273
|
|
|
274
|
-
Current route structure can be viewed through the [`
|
|
274
|
+
Current route structure can be viewed through the [`modern routes`](#debugging-routes) command
|
|
275
275
|
|
|
276
276
|
:::
|
|
277
277
|
|
|
@@ -319,7 +319,7 @@ Since the final structure after route merging may not be intuitive, Modern.js pr
|
|
|
319
319
|
|
|
320
320
|
```bash
|
|
321
321
|
# Generate route structure analysis report
|
|
322
|
-
npx
|
|
322
|
+
npx modern routes
|
|
323
323
|
```
|
|
324
324
|
|
|
325
325
|
This command will generate the final route structure in the `dist/routes-inspect.json` file, helping you understand the complete route information after merging.
|
|
@@ -464,7 +464,7 @@ When defining a `loading.tsx`, if the route transitions from `/` to `/blog` or f
|
|
|
464
464
|
|
|
465
465
|
## Prefetching
|
|
466
466
|
|
|
467
|
-
Most white screens during route transitions can be optimized by defining a `<Loading>` component. Modern.js also supports
|
|
467
|
+
Most white screens during route transitions can be optimized by defining a `<Loading>` component. Modern.js also supports navigation warmup with the `prefetch` and `preload` attributes on `<Link>` components.
|
|
468
468
|
|
|
469
469
|
For applications with higher performance requirements, prefetching can further enhance the user experience by reducing the time spent displaying the `<Loading>` component:
|
|
470
470
|
|
|
@@ -474,21 +474,36 @@ For applications with higher performance requirements, prefetching can further e
|
|
|
474
474
|
|
|
475
475
|
:::tip
|
|
476
476
|
|
|
477
|
-
|
|
477
|
+
In SSR projects, same-origin route data returned by the [Data Loader](/guides/basic-features/data/data-fetch) is prefetched for matched routes with callable loaders. Set `handle.navigationWarmup.data` to `false` on a route when its loader data should not be requested before navigation.
|
|
478
478
|
|
|
479
479
|
:::
|
|
480
480
|
|
|
481
|
-
|
|
481
|
+
By default, same-origin links prefetch the route module and matching loader data when the `<Link>` renders. Modern.js skips these automatic warmups on Save-Data or slow network connections.
|
|
482
482
|
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
- `render`: When the `<Link>` component is rendered, it begins
|
|
483
|
+
The `prefetch` attribute has four optional values:
|
|
484
|
+
|
|
485
|
+
- `render`: The default value. When the `<Link>` component is rendered, it begins warming the corresponding route module.
|
|
486
|
+
- `intent`: When users focus, hover, or touch the link, it starts warming the corresponding route module. If the intent is canceled before warmup starts, the warmup is canceled.
|
|
487
|
+
- `viewport`: When the `<Link>` component enters the viewport, it begins warming the corresponding route module.
|
|
488
|
+
- `none`: Disables automatic prefetching. It also disables implicit preload unless an explicit `preload` value is provided.
|
|
489
|
+
|
|
490
|
+
The `preload` attribute accepts the same timing values and defaults to the `prefetch` timing. Explicit `preload` values always win, and `preload={false}` disables preload behavior.
|
|
491
|
+
|
|
492
|
+
To opt a route out of SSR data warmup:
|
|
493
|
+
|
|
494
|
+
```ts title="routes/page.config.ts"
|
|
495
|
+
export const handle = {
|
|
496
|
+
navigationWarmup: {
|
|
497
|
+
data: false,
|
|
498
|
+
},
|
|
499
|
+
};
|
|
500
|
+
```
|
|
486
501
|
|
|
487
502
|
:::details Difference Between "render" and Not Using Route Splitting
|
|
488
503
|
|
|
489
|
-
- `render` allows you to control
|
|
490
|
-
- `
|
|
491
|
-
-
|
|
504
|
+
- `render` allows you to control route-module warmup with the position of the `<Link>` component in the tree.
|
|
505
|
+
- `viewport` lets you defer module warmup until the link is close to becoming actionable.
|
|
506
|
+
- SSR data prefetching is enabled by default; use `handle.navigationWarmup.data = false` for routes whose loader data is not safe or useful to fetch before navigation.
|
|
492
507
|
|
|
493
508
|
:::
|
|
494
509
|
|
|
@@ -513,5 +528,5 @@ If you encounter API usage issues, check the corresponding upstream docs:
|
|
|
513
528
|
- TanStack Router docs for `@modern-js/plugin-tanstack/runtime`.
|
|
514
529
|
|
|
515
530
|
:::note
|
|
516
|
-
If you must directly use the React Router package's API (e.g., route behavior wrapped in a unified npm package), you can set [`source.alias`](/configure/app/source/alias) to point `react-router`
|
|
531
|
+
If you must directly use the React Router package's API (e.g., route behavior wrapped in a unified npm package), you can set [`source.alias`](/configure/app/source/alias) to point `react-router` to the project's dependency, avoiding the issue of two React Router versions.
|
|
517
532
|
:::
|
|
@@ -8,6 +8,7 @@ This guide explains how to integrate Rstest with Modern.js for web app testing.
|
|
|
8
8
|
|
|
9
9
|
Install the base dependencies first:
|
|
10
10
|
|
|
11
|
+
import { Prompt } from '@rspress/core/theme';
|
|
11
12
|
import { PackageManagerTabs } from '@theme';
|
|
12
13
|
|
|
13
14
|
<PackageManagerTabs command="add @rstest/core @modern-js/adapter-rstest -D" />
|
|
@@ -161,3 +162,31 @@ Execute the `test` command above to run your tests:
|
|
|
161
162
|
If you need node mode tests for server-side logic such as `bff`, refer to the [Rstest documentation](https://rstest.rs) directly.
|
|
162
163
|
|
|
163
164
|
Modern.js mainly targets web apps, so this guide focuses on web UI testing and browser mode.
|
|
165
|
+
|
|
166
|
+
## Migrating from Existing Projects
|
|
167
|
+
|
|
168
|
+
If your project already uses Jest or Vitest, refer to the official Rstest migration guides:
|
|
169
|
+
|
|
170
|
+
- [Migrate from Jest to Rstest](https://rstest.rs/guide/migration/jest)
|
|
171
|
+
- [Migrate from Vitest to Rstest](https://rstest.rs/guide/migration/vitest)
|
|
172
|
+
|
|
173
|
+
We recommend installing the `migrate-to-rstest` skill first, then copying this prompt to your coding agent. It keeps the Modern.js `@modern-js/adapter-rstest` integration during migration:
|
|
174
|
+
|
|
175
|
+
<Prompt
|
|
176
|
+
title="Migrate to Rstest"
|
|
177
|
+
description="Copy this prompt and send it to your coding agent."
|
|
178
|
+
prompt={`Migrate this Modern.js project from Jest or Vitest to Rstest.
|
|
179
|
+
|
|
180
|
+
First install and use the migrate-to-rstest skill. If it is not installed, install it with:
|
|
181
|
+
npx skills add rstackjs/agent-skills --skill migrate-to-rstest
|
|
182
|
+
|
|
183
|
+
Follow the migrate-to-rstest skill instructions and the official Rstest migration guides:
|
|
184
|
+
- Jest: https://rstest.rs/guide/migration/jest
|
|
185
|
+
- Vitest: https://rstest.rs/guide/migration/vitest
|
|
186
|
+
|
|
187
|
+
Modern.js-specific requirement:
|
|
188
|
+
- Install and use @modern-js/adapter-rstest together with @rstest/core.
|
|
189
|
+
- Create or update rstest.config.ts to import withModernConfig from @modern-js/adapter-rstest.
|
|
190
|
+
- Reuse the Modern.js app configuration with extends: withModernConfig().
|
|
191
|
+
- Do not replace this with a plain Rstest config unless the project explicitly does not need Modern.js config integration.`}
|
|
192
|
+
/>
|
|
@@ -26,10 +26,10 @@ Static asset files can be directly hosted by Modern.js' server, but it is highly
|
|
|
26
26
|
|
|
27
27
|
Modern.js supports running built artifacts in any Node.js environment. Typically, the CI environment has already installed all application dependencies.
|
|
28
28
|
|
|
29
|
-
You can run the [`
|
|
29
|
+
You can run the [`modern build`](/apis/app/commands#modern-build) command to build the application and the [`modern serve`](/apis/app/commands#modern-serve) command to run the Web server, starting the UltraModern.js application.
|
|
30
30
|
|
|
31
31
|
## Running in Production Environments
|
|
32
32
|
|
|
33
33
|
When deploying to production, the artifact size should be as small as possible. The aforementioned method for running in CI environments keeps all artifacts from the original project. Therefore, it is not recommended to run the application using the above commands in a production environment.
|
|
34
34
|
|
|
35
|
-
UltraModern.js offers a standalone deployment solution. When running the [`
|
|
35
|
+
UltraModern.js offers a standalone deployment solution. When running the [`modern deploy`](/apis/app/commands#modern-deploy) command, the artifacts will include an entry file for running the Web server.
|
|
@@ -48,7 +48,7 @@ After running `pnpm run dev` again, you can find that the project has completed
|
|
|
48
48
|
|
|
49
49
|
In a newly created project, the `@modern-js/app-tools` npm package is installed by default. It is the core package of the Modern.js framework and provides the following capabilities:
|
|
50
50
|
|
|
51
|
-
- It offers commonly used CLI commands such as `
|
|
51
|
+
- It offers commonly used CLI commands such as `modern dev`, `modern build`, and more.
|
|
52
52
|
- It integrates Rsbuild, providing build capabilities.
|
|
53
53
|
- It integrates Modern.js Server, providing capabilities for development and production servers.
|
|
54
54
|
|