@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.12 → 3.2.0-ultramodern.121
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 +41 -51
- package/docs/en/community/blog/2022-0708-updates.md +1 -1
- package/docs/en/community/blog/2022-0910-updates.md +2 -2
- package/docs/en/community/contributing-guide.mdx +2 -3
- package/docs/en/community/releases.mdx +1 -5
- package/docs/en/components/init-app.mdx +40 -66
- package/docs/en/components/init-rspack-app.mdx +1 -1
- package/docs/en/components/prerequisites.mdx +1 -2
- package/docs/en/components/serve-command.mdx +1 -1
- package/docs/en/configure/app/bff/effect.mdx +27 -3
- package/docs/en/configure/app/bff/runtime-framework.mdx +1 -1
- package/docs/en/configure/app/performance/rsdoctor.mdx +7 -4
- package/docs/en/configure/app/tools/ts-checker.mdx +30 -2
- 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 +4 -1
- package/docs/en/guides/advanced-features/international/configuration.mdx +1 -0
- package/docs/en/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/en/guides/advanced-features/international/routing.mdx +45 -2
- package/docs/en/guides/basic-features/debug/rsdoctor.mdx +2 -3
- package/docs/en/guides/basic-features/deploy.mdx +1 -1
- 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/routes.mdx +24 -9
- package/docs/en/guides/basic-features/testing/_meta.json +1 -1
- 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/tech-stack.mdx +10 -4
- package/docs/en/guides/get-started/ultramodern.mdx +94 -20
- 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 +38 -48
- package/docs/zh/community/blog/2022-0708-updates.md +1 -1
- package/docs/zh/community/blog/2022-0910-updates.md +2 -2
- package/docs/zh/community/contributing-guide.mdx +2 -3
- package/docs/zh/community/releases.mdx +1 -5
- package/docs/zh/components/init-app.mdx +33 -62
- package/docs/zh/components/init-rspack-app.mdx +1 -1
- package/docs/zh/components/prerequisites.mdx +1 -2
- package/docs/zh/components/serve-command.mdx +1 -1
- package/docs/zh/configure/app/bff/effect.mdx +26 -2
- package/docs/zh/configure/app/bff/runtime-framework.mdx +1 -1
- 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 +1 -1
- 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 +4 -1
- package/docs/zh/guides/advanced-features/international/configuration.mdx +1 -0
- package/docs/zh/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/routing.mdx +45 -2
- package/docs/zh/guides/basic-features/debug/rsdoctor.mdx +2 -3
- package/docs/zh/guides/basic-features/deploy.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/routes.mdx +24 -9
- package/docs/zh/guides/basic-features/testing/_meta.json +1 -1
- 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/tech-stack.mdx +10 -4
- package/docs/zh/guides/get-started/ultramodern.mdx +88 -4
- package/docs/zh/guides/upgrade/config.mdx +1 -2
- package/docs/zh/guides/upgrade/other.md +4 -5
- package/package.json +15 -14
- package/rspress.config.ts +17 -5
- package/src/components/Footer/index.tsx +3 -3
- package/src/components/SecondaryTitle/index.module.css +7 -2
- package/src/components/ShowcaseList/useShowcases.ts +23 -65
- package/src/i18n/enUS.ts +0 -9
- package/src/i18n/zhCN.ts +0 -9
- 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/en/guides/basic-features/testing/cypress.mdx +0 -95
- package/docs/en/guides/basic-features/testing/jest.mdx +0 -148
- package/docs/en/guides/basic-features/testing/vitest.mdx +0 -100
- package/docs/zh/guides/basic-features/render/tanstack-rsc.mdx +0 -226
- package/docs/zh/guides/basic-features/testing/cypress.mdx +0 -95
- package/docs/zh/guides/basic-features/testing/jest.mdx +0 -148
- package/docs/zh/guides/basic-features/testing/vitest.mdx +0 -100
- package/main-doc/docs/en/guides/get-started/ultramodern.mdx +0 -320
- package/main-doc/docs/zh/guides/get-started/ultramodern.mdx +0 -304
|
@@ -32,7 +32,50 @@ i18nPlugin({
|
|
|
32
32
|
| `/en/about` | Visits normally, language is `en` |
|
|
33
33
|
| `/zh/about` | Visits normally, language is `zh` |
|
|
34
34
|
|
|
35
|
-
|
|
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
|
+
|
|
37
|
+
## Localised URL Paths
|
|
38
|
+
|
|
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.
|
|
42
|
+
|
|
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.
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
// modern.config.ts
|
|
47
|
+
i18nPlugin({
|
|
48
|
+
localeDetection: {
|
|
49
|
+
localePathRedirect: true,
|
|
50
|
+
languages: ['en', 'cs'],
|
|
51
|
+
fallbackLanguage: 'en',
|
|
52
|
+
localisedUrls: {
|
|
53
|
+
'/terms-of-service': {
|
|
54
|
+
en: '/terms-of-service',
|
|
55
|
+
cs: '/podminky-pouzivani',
|
|
56
|
+
},
|
|
57
|
+
'/products': {
|
|
58
|
+
en: '/products',
|
|
59
|
+
cs: '/produkty',
|
|
60
|
+
},
|
|
61
|
+
'/products/:slug': {
|
|
62
|
+
en: '/products/:slug',
|
|
63
|
+
cs: '/produkty/:slug',
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
});
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
**Result:**
|
|
71
|
+
|
|
72
|
+
| Visited path | Result |
|
|
73
|
+
| --- | --- |
|
|
74
|
+
| `/terms-of-service` | Redirects to `/en/terms-of-service` |
|
|
75
|
+
| `/cs/terms-of-service` | Redirects to `/cs/podminky-pouzivani` |
|
|
76
|
+
| `/cs/podminky-pouzivani` | Visits normally, language is `cs` |
|
|
77
|
+
|
|
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.
|
|
36
79
|
|
|
37
80
|
## Route Configuration
|
|
38
81
|
|
|
@@ -131,4 +174,4 @@ function Navigation() {
|
|
|
131
174
|
<I18nLink to="/en/about">About</I18nLink>
|
|
132
175
|
```
|
|
133
176
|
|
|
134
|
-
`I18nLink`
|
|
177
|
+
`I18nLink` uses the active Modern.js router. In React Router projects it renders the React Router `Link`; in TanStack Router projects it navigates through TanStack Router. For the full Props type, see [API Reference](./api.md#i18nlink-component).
|
|
@@ -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({
|
|
@@ -39,7 +39,7 @@ Use the following command to build the project:
|
|
|
39
39
|
npx modern deploy
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
When running the `modern deploy` command,
|
|
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`
|
|
@@ -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)
|
|
@@ -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
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["
|
|
1
|
+
["rstest", "playwright"]
|
|
@@ -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 [`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
|
|
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
|
-
|
|
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.
|
|
@@ -27,7 +27,7 @@ import DebugApp from '@site-docs-en/components/debug-app';
|
|
|
27
27
|
|
|
28
28
|
## Configuration
|
|
29
29
|
|
|
30
|
-
In
|
|
30
|
+
In an UltraModern.js project created using `@bleedingdev/modern-js-create`, a `modern.config.ts` file is generated by default.
|
|
31
31
|
|
|
32
32
|
You can modify the configuration through this file to override the default behavior of Modern.js. For example, to enable SSR, add the following configuration:
|
|
33
33
|
|
|
@@ -18,13 +18,13 @@ Rsbuild supports building Vue applications. If you need to use Vue, you can refe
|
|
|
18
18
|
|
|
19
19
|
Modern.js provides two first-party routing frameworks:
|
|
20
20
|
|
|
21
|
-
- [
|
|
22
|
-
- [
|
|
21
|
+
- [TanStack Router](https://tanstack.com/router) (UltraModern default), via `@modern-js/plugin-tanstack/runtime`.
|
|
22
|
+
- [React Router v7](https://reactrouter.com/en/main) (compatibility path), via `@modern-js/runtime/router`.
|
|
23
23
|
|
|
24
|
-
When creating
|
|
24
|
+
When creating an UltraModern project, TanStack Router is included by default:
|
|
25
25
|
|
|
26
26
|
```bash
|
|
27
|
-
|
|
27
|
+
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
Modern.js supports conventional routing, self-controlled routing, or other routing schemes. Please refer to ["Routing"](/guides/basic-features/routes/routes) to make your choice.
|
|
@@ -84,6 +84,12 @@ Modern.js can be used with any React UI component library from the community, su
|
|
|
84
84
|
|
|
85
85
|
Modern.js supports the use of [Storybook](https://storybook.js.org/) for developing UI components. This feature is optional. Please refer to ["Using Storybook"](/guides/basic-features/debug/using-storybook) to enable it.
|
|
86
86
|
|
|
87
|
+
## Testing Framework
|
|
88
|
+
|
|
89
|
+
Modern.js recommends [Rstest](https://rstest.rs/) for unit tests and component tests. Rstest is built on Rspack for fast startup and execution, and it can reuse your Modern.js app configuration through [`@modern-js/adapter-rstest`](/guides/basic-features/testing/rstest).
|
|
90
|
+
|
|
91
|
+
For end-to-end (E2E) tests, you can use [Playwright](/guides/basic-features/testing/playwright).
|
|
92
|
+
|
|
87
93
|
## Node.js Framework
|
|
88
94
|
|
|
89
95
|
import TechStackNodeFramework from '@site-docs-en/components/tech-stack-node-framework';
|
|
@@ -30,17 +30,17 @@ UltraModern.js additions are designed as the default product surface for new Sup
|
|
|
30
30
|
|
|
31
31
|
| Area | Modern.js 3.0 baseline | UltraModern.js 3.0 |
|
|
32
32
|
| --- | --- | --- |
|
|
33
|
-
| Build diagnostics | RsDoctor is generally opt-in | Adds `performance.rsdoctor
|
|
33
|
+
| Build diagnostics | RsDoctor is generally opt-in | Adds a first-class `performance.rsdoctor` config surface (opt-in; the earlier default-on behavior and diagnostics contract artifact were reverted) |
|
|
34
34
|
| Output and static serving | Precompression behavior is app-defined | Enables `output.precompress` by default and serves `.br` / `.gz` variants via `Accept-Encoding` negotiation |
|
|
35
35
|
| BFF runtime and contracts | Standard BFF runtime/client generation | Adds `requestId`-aware producer isolation, fail-fast initialization checks, and operation/trace correlation headers |
|
|
36
36
|
| BFF runtime choices | Hono runtime path only in Modern.js 3.0 baseline (no built-in Effect runtime path) | Sets Effect as default runtime, enforces strict runtime split (`effect` -> `api/effect`, `hono` -> `api/lambda`), and adds Effect-Schema-first contracts plus MF failure-injection reliability coverage |
|
|
37
37
|
| Telemetry standardization | Observability wiring is often app-specific | Adds framework-level telemetry pipeline with OTLP/VictoriaMetrics exporters, redaction, batching, and backpressure controls |
|
|
38
38
|
| App-level MF SSR handshake | No dedicated super-app app-level stability contract focus | Adds `server.ssr.moduleFederationAppSSR` plus integration-tested env/config handshake |
|
|
39
|
-
| MF
|
|
39
|
+
| MF vertical loading reliability | Retry/fallback patterns are often implemented per app | Adds deterministic timeout/network/contract-error reliability matrix and distributed OTEL continuity tests |
|
|
40
40
|
| Module onboarding governance | No module-certification evidence profile in baseline | Adds module SDK contracts, boundary anti-pattern guards, and release/module certification gate workflows |
|
|
41
41
|
| Router runtime | Default runtime path centers on React Router | Adds first-class TanStack Router runtime/CLI path (React Router remains supported) |
|
|
42
|
-
| Scaffolding templates | Default create templates center on React Router starter path |
|
|
43
|
-
|
|
|
42
|
+
| Scaffolding templates | Default create templates center on React Router starter path | Generates a SuperApp workspace by default with TanStack, Effect, Module Federation, i18n, Tailwind, Cloudflare, and ownership contracts |
|
|
43
|
+
| Workspace preset enforcement | No generated UltraModern preset gate workflow | Generated workspaces include `.github/workflows/ultramodern-workspace-gates.yml`, `pnpm check`, primitive local gates, and generated contract validation |
|
|
44
44
|
|
|
45
45
|
## What We Intentionally Do Not Change
|
|
46
46
|
|
|
@@ -56,25 +56,99 @@ For teams already on Modern.js 3.0, the adoption path remains compatibility-awar
|
|
|
56
56
|
1. Keep existing React Router apps running as-is. TanStack Router is the preferred path for new scaffolds and incremental route adoption, but the React Router lane remains supported while teams move on their own schedule.
|
|
57
57
|
2. Prefer `bff.runtimeFramework: 'effect'` for new BFF work, with the entry implemented at `api/effect/index.ts`. If your app already uses Hono handlers under `api/lambda/**`, keep `bff.runtimeFramework: 'hono'` until you are ready to move them; Hono remains a supported compatibility lane.
|
|
58
58
|
3. Treat the baseline contracts as progressive defaults, not a forced cutover. `MODERN_BASELINE_ENABLE_MF_SSR`, `MODERN_BASELINE_ENABLE_BFF_REQUEST_ID`, and `MODERN_BASELINE_ENABLE_TELEMETRY_EXPORTERS` already let each app opt out while it converges on the preferred stack.
|
|
59
|
-
4. The public preset now ships with explicit release and certification gates.
|
|
59
|
+
4. The public preset now ships with explicit release and certification gates. Generated workspaces include `.github/workflows/ultramodern-workspace-gates.yml`, so `pnpm check` and `pnpm build` stay part of the local adoption contract from day one while CI runs the primitive gates as parallel matrix jobs.
|
|
60
60
|
|
|
61
61
|
This page is not a migration guide or codemod plan. Migration guidance for existing applications is intentionally deferred from the current Micro Verticals framework scope.
|
|
62
62
|
|
|
63
|
-
##
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
63
|
+
## Human Workflow
|
|
64
|
+
|
|
65
|
+
The public BleedingDev create package has one supported generated product. The
|
|
66
|
+
default command creates a production-ready UltraModern SuperApp workspace with
|
|
67
|
+
`presetUltramodern(...)`, SSR, TanStack Router, Tailwind CSS v4, i18n, Effect
|
|
68
|
+
BFF, Module Federation topology, generated quality gates, and Cloudflare deploy
|
|
69
|
+
basics:
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
73
|
+
cd myapp
|
|
74
|
+
mise install
|
|
75
|
+
mise exec -- pnpm install
|
|
76
|
+
mise exec -- pnpm check
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
The workspace starts from a shell and generated platform contracts. It does not
|
|
80
|
+
generate a demo domain by default. Add real business MicroVerticals when they
|
|
81
|
+
become real ownership boundaries:
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
pnpm dlx @bleedingdev/modern-js-create transportation --vertical
|
|
85
|
+
pnpm dlx @bleedingdev/modern-js-create food-delivery --vertical
|
|
86
|
+
pnpm dlx @bleedingdev/modern-js-create payments --vertical
|
|
87
|
+
pnpm dlx @bleedingdev/modern-js-create maps --vertical
|
|
88
|
+
mise exec -- pnpm check
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
The `--vertical` command mutates the current workspace. It creates the vertical
|
|
92
|
+
package and updates topology metadata, ownership records, shell Module
|
|
93
|
+
Federation wiring, local development overlays, package dependencies, generated
|
|
94
|
+
contracts, ports, route-owned i18n, CSS isolation, and the vertical-owned Effect
|
|
95
|
+
BFF/client surface.
|
|
96
|
+
|
|
97
|
+
### Runtime Contracts
|
|
98
|
+
|
|
99
|
+
Generated apps and verticals keep SSR on the normal Modern.js path. SuperApp
|
|
100
|
+
workspaces add `server.ssr.moduleFederationAppSSR` when Module Federation SSR is
|
|
101
|
+
needed, but the flag remains an explicit contract rather than a requirement for
|
|
102
|
+
every app.
|
|
103
|
+
|
|
104
|
+
Each app emits `src/routes/ultramodern-route-metadata` with
|
|
105
|
+
`ultramodernLocalisedUrls`. The i18n plugin reads that map in
|
|
106
|
+
`localeDetection.localisedUrls`; this is the explicit non-empty map that enables
|
|
107
|
+
translated path segments on top of `localePathRedirect`. The i18n plugin also
|
|
108
|
+
serves dynamic backend JSON from `/locales/{{lng}}/{{ns}}.json`. The route owner
|
|
109
|
+
changes localized paths and locale resource JSON together.
|
|
110
|
+
|
|
111
|
+
JSON-LD is optional route metadata, not inferred output. Private and
|
|
112
|
+
non-indexable routes emit no JSON-LD by default. Public route owners can add
|
|
113
|
+
`jsonLd` beside localized paths and use the generated
|
|
114
|
+
`src/routes/ultramodern-jsonld.ts` helpers for common schema.org shapes.
|
|
115
|
+
|
|
116
|
+
The generated contract writes `.modernjs/ultramodern-generated-contract.json`
|
|
117
|
+
with a `cssFederation` section:
|
|
118
|
+
|
|
119
|
+
- `packages/shared-design-tokens` owns the shared token layer and exports `./tokens.css`.
|
|
120
|
+
- Shell CSS owns only shell base and overlay layers under `[data-app-id="shell-super-app"]`.
|
|
121
|
+
- Each vertical owns one CSS layer, for example `[data-app-id="vertical-transportation"]` with app-local class prefixes.
|
|
122
|
+
- Tailwind CSS v4 is local to each generated app through `@tailwindcss/postcss`; shared base styles must not be duplicated by verticals.
|
|
123
|
+
- SSR first paint requires shared token CSS and app-owned CSS to be emitted by Modern/Rspack assets. Vertical CSS is loaded through manifest ownership, not copied into shell source.
|
|
124
|
+
|
|
125
|
+
Version switching must select UI, Effect API, CSS, i18n JSON, and MF manifest evidence from the same vertical build marker. A shell render that only changes the UI marker is not enough.
|
|
126
|
+
|
|
127
|
+
### Validation And Deploy
|
|
128
|
+
|
|
129
|
+
Local gates:
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
mise exec -- pnpm check
|
|
133
|
+
mise exec -- pnpm build
|
|
134
|
+
mise exec -- pnpm cloudflare:build
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Generated workspaces include `scripts/proof-cloudflare-version.mjs` for live
|
|
138
|
+
Cloudflare and Zephyr proof:
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
ULTRAMODERN_PUBLIC_URL_SHELL_SUPER_APP=https://shell-super-app.example.workers.dev \
|
|
142
|
+
ULTRAMODERN_PUBLIC_URL_TRANSPORTATION=https://transportation.example.workers.dev \
|
|
143
|
+
ULTRAMODERN_PUBLIC_URL_PAYMENTS=https://payments.example.workers.dev \
|
|
144
|
+
mise exec -- pnpm cloudflare:proof -- --require-public-urls
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
Live Cloudflare and Zephyr proof requires public Worker URLs and Zephyr credentials. Without those, the repo can validate generated contracts, local builds, local Cloudflare output, dry-run Zephyr evidence plans, and local evidence schemas, but it cannot prove shell-driven live version selection.
|
|
148
|
+
|
|
149
|
+
BleedingDev packages are published through GitHub Actions trusted publishing.
|
|
150
|
+
The public workflow is tokenless; do not publish packages manually from a
|
|
151
|
+
developer machine.
|
|
78
152
|
|
|
79
153
|
## Baseline Switches (Opt-out)
|
|
80
154
|
|
|
@@ -334,7 +334,7 @@ export default {
|
|
|
334
334
|
|
|
335
335
|
### tools.rsdoctor
|
|
336
336
|
|
|
337
|
-
**Change**: This configuration has been deprecated. In v3,
|
|
337
|
+
**Change**: This configuration has been deprecated. In v3, use [`performance.rsdoctor`](/configure/app/performance/rsdoctor) to opt in to Rsdoctor diagnostics.
|
|
338
338
|
|
|
339
339
|
**Migration Example**:
|
|
340
340
|
|
|
@@ -350,7 +350,6 @@ tools: {
|
|
|
350
350
|
// v3
|
|
351
351
|
export default {
|
|
352
352
|
performance: {
|
|
353
|
-
// enabled by default in production build
|
|
354
353
|
rsdoctor: {
|
|
355
354
|
enabled: true,
|
|
356
355
|
},
|
|
@@ -87,14 +87,14 @@ Modern.js 3.0 uses React Router v7 as the default routing library. React Router
|
|
|
87
87
|
|
|
88
88
|
If you need to use React Router v5 or React Router v6, you need to use **self-controlled routing** mode. Self-controlled routing allows you to fully control routing configuration without being limited by Modern.js convention-based routing.
|
|
89
89
|
|
|
90
|
-
## Using @modern-js
|
|
90
|
+
## Using @bleedingdev/modern-js-create to Create Monorepo and Modern.js Module
|
|
91
91
|
|
|
92
|
-
Modern.js 3.0 no longer supports creating Monorepo projects and Modern.js Module projects through `@modern-js
|
|
92
|
+
Modern.js 3.0 no longer supports creating Monorepo projects and Modern.js Module projects through `@bleedingdev/modern-js-create`.
|
|
93
93
|
|
|
94
94
|
**Changes**:
|
|
95
95
|
|
|
96
|
-
- In [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0), the functionality to create Monorepo projects using `@modern-js
|
|
97
|
-
- In [v2.61.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.61.0), the functionality to create Modern.js Module projects using `@modern-js
|
|
96
|
+
- In [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0), the functionality to create Monorepo projects using `@bleedingdev/modern-js-create` was removed
|
|
97
|
+
- In [v2.61.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.61.0), the functionality to create Modern.js Module projects using `@bleedingdev/modern-js-create` and `modern new` commands was removed
|
|
98
98
|
|
|
99
99
|
**Handling**:
|
|
100
100
|
|
|
@@ -4,9 +4,9 @@ sidebar_position: 1
|
|
|
4
4
|
|
|
5
5
|
# 命令
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
UltraModern.js 内置了一些命令,可以帮助你快速启动开发服务器、构建生产环境代码等。
|
|
8
8
|
|
|
9
|
-
通过本章节,你可以了解到
|
|
9
|
+
通过本章节,你可以了解到 UltraModern.js 内置的命令有哪些,以及如何使用这些命令。
|
|
10
10
|
|
|
11
11
|
## modern dev
|
|
12
12
|
|
|
@@ -23,7 +23,7 @@ Options:
|
|
|
23
23
|
--api-only 仅启动 API 接口服务
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
运行 `modern dev` 后,
|
|
26
|
+
运行 `modern dev` 后,UltraModern.js 会监听源文件变化并进行模块热更新。
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
29
|
$ modern dev
|
|
@@ -80,77 +80,67 @@ Options:
|
|
|
80
80
|
-w --watch 开启 watch 模式, 监听文件变更并重新构建
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
-
## modern
|
|
83
|
+
## modern runtime status
|
|
84
84
|
|
|
85
|
-
`modern
|
|
86
|
-
|
|
87
|
-
比如添加应用入口、启用一些可选功能如 BFF、微前端开发模式等。
|
|
85
|
+
`modern runtime status` 命令用于读取运行时状态端点并打印响应。默认请求 `http://127.0.0.1:8080/_modern/runtime/status`。
|
|
88
86
|
|
|
89
87
|
```bash
|
|
90
|
-
Usage: modern
|
|
88
|
+
Usage: modern runtime status [options]
|
|
91
89
|
|
|
92
90
|
Options:
|
|
93
|
-
--
|
|
94
|
-
--
|
|
95
|
-
-
|
|
96
|
-
-
|
|
97
|
-
--
|
|
98
|
-
--
|
|
91
|
+
--endpoint <endpoint> 运行时状态端点 URL 或路径
|
|
92
|
+
--token <token> 运行时状态鉴权 Token
|
|
93
|
+
--token-env <name> 保存运行时状态鉴权 Token 的环境变量名称 (default: "MODERN_RUNTIME_SIGNAL_TOKEN")
|
|
94
|
+
--header-name <name> 鉴权请求头名称 (default: "x-modernjs-runtime-signal-token")
|
|
95
|
+
--timeout <ms> 请求超时时间,单位毫秒 (default: "5000")
|
|
96
|
+
--json 以 JSON 格式输出,便于机器读取
|
|
99
97
|
-h, --help 显示命令帮助
|
|
100
98
|
```
|
|
101
99
|
|
|
102
|
-
|
|
100
|
+
如果 `--endpoint` 是路径,命令会基于 `http://127.0.0.1:8080` 解析该路径。如果省略 `--token`,命令会从 `--token-env` 指定的环境变量中读取 Token。
|
|
103
101
|
|
|
104
|
-
|
|
102
|
+
默认情况下,命令会将响应格式化为可读的键值行。添加 `--json` 后会打印原始 JSON 载荷。
|
|
105
103
|
|
|
106
104
|
```bash
|
|
107
|
-
|
|
108
|
-
? 请选择你想要的操作 创建工程元素
|
|
109
|
-
? 请选择创建元素类型 新建「应用入口」
|
|
110
|
-
? 请填写入口名称 entry
|
|
105
|
+
modern runtime status --json
|
|
111
106
|
```
|
|
112
107
|
|
|
113
|
-
|
|
108
|
+
## modern runtime fallback-signal
|
|
114
109
|
|
|
115
|
-
|
|
110
|
+
`modern runtime fallback-signal` 命令用于向金丝雀 contract-gate 端点发送运行时 fallback 信号。默认请求 `http://127.0.0.1:8080/_modern/contract-gates/runtime-fallback`。
|
|
116
111
|
|
|
117
112
|
```bash
|
|
118
|
-
|
|
119
|
-
? 请选择你想要的操作 启用可选功能
|
|
120
|
-
? 请选择功能名称 (Use arrow keys)
|
|
121
|
-
❯ 启用「BFF」功能
|
|
122
|
-
启用「微前端」模式
|
|
123
|
-
```
|
|
113
|
+
Usage: modern runtime fallback-signal [options]
|
|
124
114
|
|
|
125
|
-
|
|
126
|
-
|
|
115
|
+
Options:
|
|
116
|
+
--app <appName> 远程应用名称
|
|
117
|
+
--endpoint <endpoint> 运行时 fallback 信号端点 URL 或路径
|
|
118
|
+
--reason <reason> fallback 原因 (default: "runtime_fallback")
|
|
119
|
+
--phase <phase> fallback 阶段 (default: "load")
|
|
120
|
+
--entry <entry> 远程入口 URL
|
|
121
|
+
--runtime-digest <digest> 运行时 digest 值
|
|
122
|
+
--metadata <json> metadata JSON 对象字符串
|
|
123
|
+
--token <token> 运行时信号鉴权 Token
|
|
124
|
+
--token-env <name> 保存运行时信号鉴权 Token 的环境变量名称 (default: "MODERN_RUNTIME_SIGNAL_TOKEN")
|
|
125
|
+
--header-name <name> 鉴权请求头名称 (default: "x-modernjs-runtime-signal-token")
|
|
126
|
+
--timeout <ms> 请求超时时间,单位毫秒 (default: "5000")
|
|
127
|
+
--json 以 JSON 格式输出,便于机器读取
|
|
128
|
+
-h, --help 显示命令帮助
|
|
129
|
+
```
|
|
127
130
|
|
|
128
|
-
|
|
131
|
+
请求体始终包含 `appName`、`reason` 和 `phase`。只有在提供对应选项时,才会包含 `entry`、`runtimeDigest` 和 `metadata`。`--metadata` 必须是 JSON 对象字符串。
|
|
129
132
|
|
|
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/components/serve-command';
|
|
133
138
|
|
|
134
139
|
<ServeCommand />
|
|
135
140
|
|
|
136
|
-
## modern upgrade
|
|
137
|
-
|
|
138
|
-
在项目根目录下执行命令 `npx modern upgrade`,会默认将当前执行命令项目的 `package.json` 中的 Modern.js 相关依赖更新至最新版本。
|
|
139
|
-
|
|
140
|
-
```bash
|
|
141
|
-
Usage: modern upgrade [options]
|
|
142
|
-
|
|
143
|
-
Options:
|
|
144
|
-
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
|
145
|
-
--registry <registry> 定制 npm registry (default: "")
|
|
146
|
-
-d,--debug 开启 Debug 模式,打印调试日志信息 (default: false)
|
|
147
|
-
--cwd <cwd> 项目路径 (default: "")
|
|
148
|
-
-h, --help display help for command
|
|
149
|
-
```
|
|
150
|
-
|
|
151
141
|
## modern inspect
|
|
152
142
|
|
|
153
|
-
`modern inspect` 命令用于查看项目的
|
|
143
|
+
`modern inspect` 命令用于查看项目的 UltraModern.js 配置、[Rsbuild 配置](https://v2.rsbuild.rs/zh/config/index) 以及 Rspack 配置。
|
|
154
144
|
|
|
155
145
|
```bash
|
|
156
146
|
Usage: modern inspect [options]
|
|
@@ -17,7 +17,7 @@ Modern.js 7 ~ 8 月的最新版本为 v1.17.0,本双月的主要更新有:
|
|
|
17
17
|
|
|
18
18
|
Modern.js 框架和相关插件完成对 React 18 的适配。现在,只需要将项目中的 `react`、`react-dom` 两个包的版本,升级到最新的 React 18 大版本,就可以使用 React 18 的新功能。
|
|
19
19
|
|
|
20
|
-
注意,使用 `@modern-js
|
|
20
|
+
注意,使用 `@bleedingdev/modern-js-create` 命令默认创建的项目,安装的依赖 `react`、`react-dom` 的版本仍然为 17,如果希望使用 React 18,请手动升级这两个包的版本。
|
|
21
21
|
|
|
22
22
|
另外,SSR 流式渲染功能,目前尚在开发中,暂不支持。
|
|
23
23
|
|
|
@@ -15,7 +15,7 @@ Modern.js 9 ~ 10 月的最新版本为 v1.21.0,本双月的主要更新有:
|
|
|
15
15
|
|
|
16
16
|
Modern.js 框架完成了对 pnpm v7 的变更适配。
|
|
17
17
|
|
|
18
|
-
使用 `
|
|
18
|
+
使用 `pnpm dlx @bleedingdev/modern-js-create` 创建项目时会根据用户当前环境的 pnpm 版本进行安装依赖操作,并且在初始化项目中会在 `.npmrc` 中添加
|
|
19
19
|
`strict-peer-dependencies=false` 配置,避免安装时由于 `peerDependencies` 缺失导致安装依赖失败问题。
|
|
20
20
|
同时适配 `release`、`deploy` 命令对 pnpm v7 的支持。
|
|
21
21
|
|
|
@@ -67,7 +67,7 @@ pnpm run command --options
|
|
|
67
67
|
|
|
68
68
|
- husky 升级至 v8
|
|
69
69
|
|
|
70
|
-
使用 `
|
|
70
|
+
使用 `pnpm dlx @bleedingdev/modern-js-create` 创建项目时,husky 会默认安装 v8 版本,并移除 `package.json` 中 husky 的配置,使用 `.husky` 文件夹的形式管理 husky 配置。
|
|
71
71
|
|
|
72
72
|
在初次安装依赖时需要执行 `npx husky install` 进行 husky 初始化,默认项目会在 prepare 命令中完成,如果 husky 配置未生效,可通过手动执行完成 husky 配置。
|
|
73
73
|
|
|
@@ -38,8 +38,7 @@ nvm use 22
|
|
|
38
38
|
### 安装 pnpm
|
|
39
39
|
|
|
40
40
|
```bash
|
|
41
|
-
|
|
42
|
-
corepack enable
|
|
41
|
+
mise install
|
|
43
42
|
```
|
|
44
43
|
|
|
45
44
|
### 安装依赖
|
|
@@ -124,7 +123,7 @@ pnpm run reset
|
|
|
124
123
|
|
|
125
124
|
如果你进行了 bugfix,或者添加了需要测试的代码,请添加一些测试代码。
|
|
126
125
|
|
|
127
|
-
|
|
126
|
+
Modern.js 仓库的单元测试统一使用 [Rstest](https://rstest.rs/)。你可以在 `<PACKAGE_DIR>/tests` 文件夹中添加测试用例,测试语法基于 Rstest。
|
|
128
127
|
|
|
129
128
|
### 运行单元测试
|
|
130
129
|
|
|
@@ -24,8 +24,4 @@ Modern.js 遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/) 语义化
|
|
|
24
24
|
|
|
25
25
|
## 版本升级
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
npx modern upgrade
|
|
31
|
-
```
|
|
27
|
+
Modern.js 3.0 不再提供 `modern upgrade` 命令。需要升级项目时,请按照[版本升级](/guides/get-started/upgrade)中的手动迁移步骤操作。
|