@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.12 → 3.2.0-ultramodern.120

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/docs/en/apis/app/commands.mdx +32 -32
  2. package/docs/en/community/blog/2022-0708-updates.md +1 -1
  3. package/docs/en/community/blog/2022-0910-updates.md +2 -2
  4. package/docs/en/community/blog/v2-release-note.mdx +5 -5
  5. package/docs/en/community/blog/v3-release-note.mdx +1 -1
  6. package/docs/en/community/contributing-guide.mdx +2 -3
  7. package/docs/en/community/releases.mdx +2 -2
  8. package/docs/en/components/build-output.mdx +1 -1
  9. package/docs/en/components/debug-app.mdx +1 -1
  10. package/docs/en/components/deploy-command.mdx +3 -3
  11. package/docs/en/components/init-app.mdx +36 -66
  12. package/docs/en/components/init-rspack-app.mdx +1 -1
  13. package/docs/en/components/prerequisites.mdx +1 -2
  14. package/docs/en/components/serve-command.mdx +3 -3
  15. package/docs/en/configure/app/bff/runtime-framework.mdx +1 -1
  16. package/docs/en/configure/app/tools/ts-checker.mdx +30 -2
  17. package/docs/en/configure/app/usage.mdx +6 -6
  18. package/docs/en/guides/advanced-features/international/api.mdx +4 -1
  19. package/docs/en/guides/advanced-features/international/configuration.mdx +1 -0
  20. package/docs/en/guides/advanced-features/international/locale-detection.mdx +1 -1
  21. package/docs/en/guides/advanced-features/international/routing.mdx +43 -2
  22. package/docs/en/guides/basic-features/debug/using-storybook.mdx +1 -1
  23. package/docs/en/guides/basic-features/deploy.mdx +14 -14
  24. package/docs/en/guides/basic-features/env-vars.mdx +2 -2
  25. package/docs/en/guides/basic-features/routes/config-routes.mdx +2 -2
  26. package/docs/en/guides/basic-features/routes/routes.mdx +24 -9
  27. package/docs/en/guides/basic-features/testing/_meta.json +1 -1
  28. package/docs/en/guides/concept/server.mdx +2 -2
  29. package/docs/en/guides/get-started/quick-start.mdx +2 -2
  30. package/docs/en/guides/get-started/tech-stack.mdx +10 -4
  31. package/docs/en/guides/get-started/ultramodern.mdx +87 -19
  32. package/docs/en/guides/topic-detail/module-federation/application.mdx +1 -1
  33. package/docs/en/guides/topic-detail/module-federation/deploy.mdx +2 -2
  34. package/docs/en/guides/topic-detail/module-federation/usage.mdx +5 -5
  35. package/docs/en/guides/troubleshooting/builder.mdx +1 -1
  36. package/docs/en/guides/upgrade/other.mdx +7 -7
  37. package/docs/zh/apis/app/commands.mdx +32 -32
  38. package/docs/zh/community/blog/2022-0708-updates.md +1 -1
  39. package/docs/zh/community/blog/2022-0910-updates.md +2 -2
  40. package/docs/zh/community/blog/v2-release-note.mdx +5 -5
  41. package/docs/zh/community/blog/v3-release-note.mdx +1 -1
  42. package/docs/zh/community/contributing-guide.mdx +2 -3
  43. package/docs/zh/community/releases.mdx +2 -2
  44. package/docs/zh/components/build-output.mdx +1 -1
  45. package/docs/zh/components/debug-app.mdx +1 -1
  46. package/docs/zh/components/deploy-command.mdx +3 -3
  47. package/docs/zh/components/init-app.mdx +36 -34
  48. package/docs/zh/components/init-rspack-app.mdx +1 -1
  49. package/docs/zh/components/prerequisites.mdx +1 -2
  50. package/docs/zh/components/serve-command.mdx +3 -3
  51. package/docs/zh/configure/app/bff/runtime-framework.mdx +1 -1
  52. package/docs/zh/configure/app/tools/ts-checker.mdx +30 -2
  53. package/docs/zh/configure/app/usage.mdx +5 -5
  54. package/docs/zh/guides/advanced-features/international/api.mdx +4 -1
  55. package/docs/zh/guides/advanced-features/international/configuration.mdx +1 -0
  56. package/docs/zh/guides/advanced-features/international/locale-detection.mdx +1 -1
  57. package/docs/zh/guides/advanced-features/international/routing.mdx +43 -2
  58. package/docs/zh/guides/basic-features/debug/using-storybook.mdx +1 -1
  59. package/docs/zh/guides/basic-features/deploy.mdx +13 -13
  60. package/docs/zh/guides/basic-features/env-vars.mdx +2 -2
  61. package/docs/zh/guides/basic-features/routes/config-routes.mdx +2 -2
  62. package/docs/zh/guides/basic-features/routes/routes.mdx +24 -9
  63. package/docs/zh/guides/basic-features/testing/_meta.json +1 -1
  64. package/docs/zh/guides/concept/server.mdx +2 -2
  65. package/docs/zh/guides/get-started/quick-start.mdx +2 -2
  66. package/docs/zh/guides/get-started/tech-stack.mdx +10 -4
  67. package/docs/zh/guides/get-started/ultramodern.mdx +90 -1
  68. package/docs/zh/guides/topic-detail/module-federation/application.mdx +1 -1
  69. package/docs/zh/guides/topic-detail/module-federation/deploy.mdx +2 -2
  70. package/docs/zh/guides/topic-detail/module-federation/usage.mdx +5 -5
  71. package/docs/zh/guides/troubleshooting/builder.mdx +1 -1
  72. package/docs/zh/guides/upgrade/other.md +7 -8
  73. package/main-doc/docs/en/guides/get-started/ultramodern.mdx +97 -14
  74. package/main-doc/docs/zh/guides/get-started/ultramodern.mdx +62 -3
  75. package/package.json +12 -12
  76. package/docs/en/guides/basic-features/testing/cypress.mdx +0 -95
  77. package/docs/en/guides/basic-features/testing/jest.mdx +0 -148
  78. package/docs/en/guides/basic-features/testing/vitest.mdx +0 -100
  79. package/docs/zh/guides/basic-features/testing/cypress.mdx +0 -95
  80. package/docs/zh/guides/basic-features/testing/jest.mdx +0 -148
  81. package/docs/zh/guides/basic-features/testing/vitest.mdx +0 -100
@@ -32,7 +32,48 @@ i18nPlugin({
32
32
  | `/en/about` | Visits normally, language is `en` |
33
33
  | `/zh/about` | Visits normally, language is `zh` |
34
34
 
35
- Some paths, such as API routes and static assets, do not need locale prefixes. Use `ignoreRedirectRoutes` to skip redirects. See [Locale Detection -> ignoreRedirectRoutes](./locale-detection.md#ignoreredirectroutes).
35
+ API and BFF prefixes are skipped automatically, so server API 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
+ When `localePathRedirect` is enabled, `localisedUrls` is enabled by default. This means 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
+
41
+ `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
+
43
+ ```ts
44
+ // modern.config.ts
45
+ i18nPlugin({
46
+ localeDetection: {
47
+ localePathRedirect: true,
48
+ languages: ['en', 'cs'],
49
+ fallbackLanguage: 'en',
50
+ localisedUrls: {
51
+ '/terms-of-service': {
52
+ en: '/terms-of-service',
53
+ cs: '/podminky-pouzivani',
54
+ },
55
+ '/products': {
56
+ en: '/products',
57
+ cs: '/produkty',
58
+ },
59
+ '/products/:slug': {
60
+ en: '/products/:slug',
61
+ cs: '/produkty/:slug',
62
+ },
63
+ },
64
+ },
65
+ });
66
+ ```
67
+
68
+ **Result:**
69
+
70
+ | Visited path | Result |
71
+ | --- | --- |
72
+ | `/terms-of-service` | Redirects to `/en/terms-of-service` |
73
+ | `/cs/terms-of-service` | Redirects to `/cs/podminky-pouzivani` |
74
+ | `/cs/podminky-pouzivani` | Visits normally, language is `cs` |
75
+
76
+ Set `localisedUrls: false` only when you want locale prefixes without translated path segments.
36
77
 
37
78
  ## Route Configuration
38
79
 
@@ -131,4 +172,4 @@ function Navigation() {
131
172
  <I18nLink to="/en/about">About</I18nLink>
132
173
  ```
133
174
 
134
- `I18nLink` extends the `Link` component from `@modern-js/runtime/router` and supports all standard Link props such as `replace`, `state`, and `className`. For the full Props type, see [API Reference](./api.md#i18nlink-component).
175
+ `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).
@@ -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": "modern dev --api-only",
58
+ "dev:api": "ultramodern 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 `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.
18
+ Running the `ultramodern 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: `modern deploy`:
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: `ultramodern deploy`:
21
21
 
22
22
  ```bash
23
- MODERNJS_DEPLOY=netlify npx modern deploy
23
+ MODERNJS_DEPLOY=netlify npx ultramodern 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 modern deploy
39
+ npx ultramodern deploy
40
40
  ```
41
41
 
42
- When running the `modern deploy` command, Modern.js will generate runnable products and output the following content in terminal:
42
+ When running the `ultramodern 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 && modern deploy"
70
+ "deploy": "pnpm run build:packages && ultramodern 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 && modern deploy"
81
+ "deploy": "rushx build:packages && ultramodern 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 = "modern deploy"
111
+ command = "ultramodern 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 = "modern deploy"
128
+ command = "ultramodern 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 && modern deploy"
176
+ "deploy": "pnpm run build:packages && ultramodern 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": "modern deploy",
216
+ "buildCommand": "ultramodern 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 && modern deploy"
284
+ "deploy": "pnpm run build:packages && ultramodern 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 modern deploy && gh-pages -d .output"
329
+ "deploy:gh-pages": "MODERNJS_DEPLOY=ghPages ultramodern 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 modern deploy` will build the production output for GitHub in the .output directory.
337
+ 1. Running `MODERNJS_DEPLOY=ghPages ultramodern 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 `modern build` or `modern serve`.
20
- - `development`: Default value when running `modern dev`, also the default value in other cases.
19
+ - `production`: Default value when running `ultramodern build` or `ultramodern serve`.
20
+ - `development`: Default value when running `ultramodern dev`, also the default value in other cases.
21
21
 
22
22
  ### MODERN_ENV
23
23
 
@@ -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 [`modern routes`](#debugging-routes) command
274
+ Current route structure can be viewed through the [`ultramodern 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 modern routes
322
+ npx ultramodern 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 preloading static resources and data with the `prefetch` attribute on `<Link>` components.
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
- Data preloading currently only preloads data returned by the [Data Loader](/guides/basic-features/data/data-fetch) in SSR projects.
477
+ Route data warmup is opt-in. In SSR projects, data returned by the [Data Loader](/guides/basic-features/data/data-fetch) is only prefetched when the matched route explicitly enables it with `handle.navigationWarmup.data`.
478
478
 
479
479
  :::
480
480
 
481
- The `prefetch` attribute has three optional values:
481
+ By default, same-origin links prefetch the route module when the `<Link>` renders and preload when the link enters the viewport. Modern.js skips these automatic warmups on Save-Data or slow network connections.
482
482
 
483
- - `none`: The default value. No prefetching, no additional behavior.
484
- - `intent`: This is the recommended value for most scenarios. When you hover over the Link, it will automatically start loading the corresponding chunk and the data defined in the Data Loader. If the mouse moves away, the loading is automatically canceled. In our tests, even quick clicks can reduce load time by approximately 200ms.
485
- - `render`: When the `<Link>` component is rendered, it begins loading the corresponding chunk and data defined in the Data Loader.
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 render prefetching. It also disables the default viewport preload unless an explicit `preload` value is provided.
489
+
490
+ The `preload` attribute accepts the same timing values and defaults to `viewport`. Explicit `preload` values always win, and `preload={false}` disables preload behavior.
491
+
492
+ To opt a route into SSR data warmup:
493
+
494
+ ```ts title="routes/page.config.ts"
495
+ export const handle = {
496
+ navigationWarmup: {
497
+ data: true,
498
+ },
499
+ };
500
+ ```
486
501
 
487
502
  :::details Difference Between "render" and Not Using Route Splitting
488
503
 
489
- - `render` allows you to control the timing of route splitting, triggering only when the `<Link>` component enters the viewport. You can control the loading timing of the split by adjusting the rendering position of the `<Link>` component.
490
- - `render` loads static resources only during idle times, thus not occupying the loading time of critical modules.
491
- - Besides preloading route splits, `render` will also initiate data prefetching in SSR projects.
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 not enabled by default; use `handle.navigationWarmup.data` only for routes whose loader data is safe and useful to fetch before navigation.
492
507
 
493
508
  :::
494
509
 
@@ -1 +1 @@
1
- ["playwright", "rstest", "vitest", "jest", "cypress"]
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 Modern.js application.
29
+ You can run the [`ultramodern build`](/apis/app/commands#ultramodern-build) command to build the application and the [`ultramodern serve`](/apis/app/commands#ultramodern-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
- Modern.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.
35
+ UltraModern.js offers a standalone deployment solution. When running the [`ultramodern deploy`](/apis/app/commands#ultramodern-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 a Modern.js project created using `@modern-js/create`, a `modern.config.ts` file is generated by default.
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
 
@@ -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 `modern dev`, `modern build`, and more.
51
+ - It offers commonly used CLI commands such as `ultramodern dev`, `ultramodern 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
 
@@ -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
- - [React Router v7](https://reactrouter.com/en/main) (default), via `@modern-js/runtime/router`.
22
- - [TanStack Router](https://tanstack.com/router), via `@modern-js/plugin-tanstack/runtime`.
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 a project, you can choose TanStack Router by using:
24
+ When creating an UltraModern project, TanStack Router is included by default:
25
25
 
26
26
  ```bash
27
- npx @modern-js/create@latest myapp --router tanstack
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';
@@ -36,11 +36,11 @@ UltraModern.js additions are designed as the default product surface for new Sup
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 remote reliability | Retry/fallback patterns are often implemented per app | Adds deterministic timeout/network/contract-error reliability matrix and distributed OTEL continuity tests |
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 | Adds TanStack-ready and Tailwind-ready create templates |
43
- | Starter preset enforcement | No generated UltraModern preset gate workflow | Generated starters include `ultramodern:check`, opt-out env switches, and `.github/workflows/ultramodern-gates.yml` |
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,93 @@ 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. The generated starter also ships `.github/workflows/ultramodern-gates.yml`, so `pnpm run ultramodern:check` and `pnpm run build` stay part of the adoption contract from day one.
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
- ## Micro Vertical Delivery Path
64
-
65
- `presetUltramodern(...)` is also the single public entrypoint for Micro Verticals. The intended adoption sequence is:
66
-
67
- 1. start with one app and keep route/data ownership inside the shell,
68
- 2. extract stable route subtrees into MF remotes once fallback and compatibility behavior are explicit,
69
- 3. extract shared workflows into strict Effect services when request, identity, locale, and trace context must survive deployment boundaries,
70
- 4. keep Hono only as an explicit compatibility lane for existing Modern.js-style BFF handlers.
71
-
72
- In this repo, the reference examples are:
73
-
74
- - `routes-tanstack-mf` for shell + remote composition and MF SSR contracts,
75
- - `bff-corss-project` for cross-project producer/consumer wiring,
76
- - `bff-runtime-parity` for generated-client build/serve parity,
77
- - `bff-hono` for the compatibility lane.
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` and serves dynamic backend JSON from
107
+ `/locales/{{lng}}/{{ns}}.json`. The route owner changes localized paths and
108
+ locale resource JSON together.
109
+
110
+ The generated contract writes `.modernjs/ultramodern-generated-contract.json`
111
+ with a `cssFederation` section:
112
+
113
+ - `packages/shared-design-tokens` owns the shared token layer and exports `./tokens.css`.
114
+ - Shell CSS owns only shell base and overlay layers under `[data-app-id="shell-super-app"]`.
115
+ - Each vertical owns one CSS layer, for example `[data-app-id="vertical-transportation"]` with app-local class prefixes.
116
+ - Tailwind CSS v4 is local to each generated app through `@tailwindcss/postcss`; shared base styles must not be duplicated by verticals.
117
+ - 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.
118
+
119
+ 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.
120
+
121
+ ### Validation And Deploy
122
+
123
+ Local gates:
124
+
125
+ ```bash
126
+ mise exec -- pnpm check
127
+ mise exec -- pnpm build
128
+ mise exec -- pnpm cloudflare:build
129
+ ```
130
+
131
+ Generated workspaces include `scripts/proof-cloudflare-version.mjs` for live
132
+ Cloudflare and Zephyr proof:
133
+
134
+ ```bash
135
+ ULTRAMODERN_PUBLIC_URL_SHELL_SUPER_APP=https://shell-super-app.example.workers.dev \
136
+ ULTRAMODERN_PUBLIC_URL_TRANSPORTATION=https://transportation.example.workers.dev \
137
+ ULTRAMODERN_PUBLIC_URL_PAYMENTS=https://payments.example.workers.dev \
138
+ mise exec -- pnpm cloudflare:proof -- --require-public-urls
139
+ ```
140
+
141
+ 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.
142
+
143
+ BleedingDev packages are published through GitHub Actions trusted publishing.
144
+ The public workflow is tokenless; do not publish packages manually from a
145
+ developer machine.
78
146
 
79
147
  ## Baseline Switches (Opt-out)
80
148
 
@@ -103,7 +103,7 @@ export default RemoteApp;
103
103
 
104
104
  ## Start the Application
105
105
 
106
- Now, both the producer and consumer applications are set up. We can run `modern dev` locally to start both applications.
106
+ Now, both the producer and consumer applications are set up. We can run `ultramodern dev` locally to start both applications.
107
107
 
108
108
  After startup, when the consumer application accesses the `/remote` route, it will enter the producer application. Accessing `http://localhost:8080/remote` will display a complete page of the producer's remote module in the browser.
109
109
 
@@ -88,10 +88,10 @@ export default createModuleFederationConfig({
88
88
 
89
89
  ## Local Deployment Verification
90
90
 
91
- Modern.js provides the `modern deploy` command, which can easily generate products that can run in a Node.js environment.
91
+ Modern.js provides the `ultramodern deploy` command, which can easily generate products that can run in a Node.js environment.
92
92
 
93
93
  ```bash
94
- modern deploy
94
+ ultramodern deploy
95
95
  ```
96
96
 
97
97
  After executing the command, you can see the following output in the console:
@@ -154,7 +154,7 @@ The second part, `remoteExpose`, is the `key` configured in the `exposes` field
154
154
 
155
155
  ## Start the Applications
156
156
 
157
- Now, both the producer and consumer applications are set up. You can run `modern dev` locally to start both applications.
157
+ Now, both the producer and consumer applications are set up. You can run `ultramodern dev` locally to start both applications.
158
158
 
159
159
  Once started, the imports of the producer's modules in the consumer will no longer throw errors, and the types will be downloaded to the consumer application.
160
160
 
@@ -164,7 +164,7 @@ After modifying the producer's code, the consumer will automatically fetch the p
164
164
 
165
165
  Access `http://localhost:8080/remote`, and you will see that the page includes the `Button` component from the producer's remote module.
166
166
 
167
- We can also execute `modern serve` locally to simulate the production environment.
167
+ We can also execute `ultramodern serve` locally to simulate the production environment.
168
168
 
169
169
  Because the Module Federation plugin will automatically read Modern.js's `output.assetPrefix` configuration as the access address for remote modules, and this value defaults to `/` after building in the production environment.
170
170
 
@@ -180,7 +180,7 @@ export default defineConfig({
180
180
  port: 3051,
181
181
  },
182
182
  output: {
183
- // Now this configuration is only used in the local when you run modern serve command.
183
+ // Now this configuration is only used in the local when you run ultramodern serve command.
184
184
  // If you want to deploy the application to the platform, use your own domain name.
185
185
  // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
186
186
  assetPrefix: 'http://127.0.0.1:3051',
@@ -189,10 +189,10 @@ export default defineConfig({
189
189
  });
190
190
  ```
191
191
 
192
- Now, in the producer, run `modern build && MODERN_MF_AUTO_CORS=true modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
192
+ Now, in the producer, run `ultramodern build && MODERN_MF_AUTO_CORS=true ultramodern serve`, and in the consumer, run `ultramodern build && ultramodern serve` to simulate the production environment locally and access the remote modules.
193
193
 
194
194
  :::tip
195
- When using the `modern serve` command, you need to set the `MODERN_MF_AUTO_CORS=true` environment variable when starting the producer project to automatically handle CORS issues and ensure that consumers can properly access the producer's remote module resources.
195
+ When using the `ultramodern serve` command, you need to set the `MODERN_MF_AUTO_CORS=true` environment variable when starting the producer project to automatically handle CORS issues and ensure that consumers can properly access the producer's remote module resources.
196
196
  :::
197
197
 
198
198
  You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
@@ -23,7 +23,7 @@ Modern.js is internally based on [Rsbuild](https://v2.rsbuild.rs/) and encapsula
23
23
  Modern.js provides [inspect command](https://modernjs.dev/en/apis/app/commands.html) to view the final Modern.js configuration and Rspack configuration generated by the project.
24
24
 
25
25
  ```bash
26
- ➜ npx modern inspect
26
+ ➜ npx ultramodern inspect
27
27
 
28
28
  Inspect config succeed, open following files to view the content:
29
29
 
@@ -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/create to Create Monorepo and Modern.js Module
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/create`.
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/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 `@modern-js/create` and `modern new` commands was removed
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 `ultramodern new` commands was removed
98
98
 
99
99
  **Handling**:
100
100
 
@@ -103,12 +103,12 @@ Modern.js 3.0 no longer supports creating Monorepo projects and Modern.js Module
103
103
 
104
104
  ## new and upgrade Commands Removed
105
105
 
106
- Modern.js 3.0 removed the `modern new` and `modern upgrade` commands, and you need to perform operations manually according to the documentation.
106
+ Modern.js 3.0 removed the `ultramodern new` and `ultramodern upgrade` commands, and you need to perform operations manually according to the documentation.
107
107
 
108
108
  **Changes**:
109
109
 
110
- - The `modern new` command is no longer supported in Modern.js 3.0, and you cannot add entries or enable features through commands
111
- - The `modern upgrade` command is no longer supported in Modern.js 3.0, and you cannot automatically upgrade dependencies through commands
110
+ - The `ultramodern new` command is no longer supported in Modern.js 3.0, and you cannot add entries or enable features through commands
111
+ - The `ultramodern upgrade` command is no longer supported in Modern.js 3.0, and you cannot automatically upgrade dependencies through commands
112
112
 
113
113
  **Handling**:
114
114