@bleedingdev/modern-js-main-doc 3.5.0-ultramodern.1 → 3.5.0-ultramodern.100
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/hooks/config/mock.mdx +4 -1
- package/docs/en/apis/app/hooks/src/routes.mdx +1 -1
- package/docs/en/apis/app/runtime/router/router.mdx +1 -1
- package/docs/en/components/prerequisites.mdx +1 -1
- package/docs/en/configure/app/bff/effect.mdx +35 -5
- package/docs/en/configure/app/dev/mock-dir.mdx +35 -0
- package/docs/en/configure/app/performance/build-cache.mdx +5 -0
- package/docs/en/configure/app/server/rsc.mdx +1 -1
- package/docs/en/configure/app/source/react-compiler.mdx +72 -0
- package/docs/en/configure/app/tools/ts-checker.mdx +4 -4
- package/docs/en/guides/advanced-features/international/api.mdx +41 -8
- package/docs/en/guides/basic-features/debug/mock.mdx +11 -0
- package/docs/en/guides/basic-features/deploy.mdx +6 -6
- package/docs/en/guides/basic-features/render/rsc.mdx +2 -2
- package/docs/en/guides/basic-features/routes/routes.mdx +2 -2
- package/docs/en/guides/concept/entries.mdx +1 -1
- package/docs/en/guides/get-started/ai-coding-agents.mdx +19 -4
- package/docs/en/guides/get-started/tech-stack.mdx +2 -2
- package/docs/en/guides/get-started/ultramodern.mdx +66 -21
- package/docs/en/guides/topic-detail/module-federation/application.mdx +4 -4
- package/docs/en/guides/topic-detail/module-federation/usage.mdx +1 -1
- package/docs/en/tutorials/examples/csr-auth.mdx +1 -1
- package/docs/zh/apis/app/hooks/config/mock.mdx +3 -1
- package/docs/zh/apis/app/hooks/src/routes.mdx +1 -1
- package/docs/zh/components/prerequisites.mdx +1 -1
- package/docs/zh/configure/app/bff/effect.mdx +31 -4
- package/docs/zh/configure/app/dev/mock-dir.mdx +33 -0
- package/docs/zh/configure/app/performance/build-cache.mdx +4 -0
- package/docs/zh/configure/app/server/rsc.mdx +1 -1
- package/docs/zh/configure/app/source/react-compiler.mdx +72 -0
- package/docs/zh/configure/app/tools/ts-checker.mdx +4 -4
- package/docs/zh/guides/advanced-features/international/api.mdx +39 -8
- package/docs/zh/guides/basic-features/debug/mock.mdx +10 -0
- package/docs/zh/guides/basic-features/deploy.mdx +1 -1
- package/docs/zh/guides/basic-features/render/rsc.mdx +2 -2
- package/docs/zh/guides/basic-features/routes/routes.mdx +2 -2
- package/docs/zh/guides/concept/entries.mdx +1 -1
- package/docs/zh/guides/get-started/ai-coding-agents.mdx +19 -4
- package/docs/zh/guides/get-started/tech-stack.mdx +1 -1
- package/docs/zh/guides/get-started/ultramodern.mdx +57 -18
- package/docs/zh/guides/topic-detail/module-federation/application.mdx +4 -4
- package/docs/zh/guides/topic-detail/module-federation/usage.mdx +1 -1
- package/docs/zh/tutorials/examples/csr-auth.mdx +1 -1
- package/package.json +12 -13
|
@@ -4,4 +4,7 @@ sidebar_position: 5
|
|
|
4
4
|
---
|
|
5
5
|
# mock/
|
|
6
6
|
|
|
7
|
-
When there is a `config/mock/index.
|
|
7
|
+
When there is a `config/mock/index.ts` or `config/mock/index.js` file in the
|
|
8
|
+
project directory, Modern.js will automatically enable the Mock service during
|
|
9
|
+
development. Use [`dev.mockDir`](/configure/app/dev/mock-dir) to customize
|
|
10
|
+
this directory.
|
|
@@ -85,6 +85,6 @@ export default () => {
|
|
|
85
85
|
```
|
|
86
86
|
|
|
87
87
|
:::note
|
|
88
|
-
`<Outlet>` is
|
|
88
|
+
`<Outlet>` is an API provided by React Router. For details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
|
|
89
89
|
|
|
90
90
|
:::
|
|
@@ -6,7 +6,7 @@ sidebar_position: 1
|
|
|
6
6
|
# router
|
|
7
7
|
|
|
8
8
|
:::info
|
|
9
|
-
The router solution based on [react-router
|
|
9
|
+
The router solution based on [react-router](https://reactrouter.com/).
|
|
10
10
|
|
|
11
11
|
This page documents the React Router runtime export (`@modern-js/runtime/router`).
|
|
12
12
|
If your app uses TanStack Router (`--router tanstack`), use `@modern-js/plugin-tanstack/runtime` and refer to TanStack Router API docs.
|
|
@@ -45,6 +45,23 @@ import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
|
|
|
45
45
|
|
|
46
46
|
`bff.effect` is only effective when `bff.runtimeFramework` is set to `'effect'`.
|
|
47
47
|
|
|
48
|
+
:::caution Install the Effect peers yourself
|
|
49
|
+
`effect` and `@effect/opentelemetry` are **optional exact peer dependencies** of
|
|
50
|
+
`@modern-js/plugin-bff`, not dependencies. The plugin no longer bundles a copy —
|
|
51
|
+
Effect 4 derives `Context` / `Service` keys per module instance, so a bundled copy
|
|
52
|
+
would give your app a second Effect identity. Before setting
|
|
53
|
+
`runtimeFramework: 'effect'` or importing `@modern-js/plugin-bff/effect`,
|
|
54
|
+
`/effect-server`, `/effect-edge` or `/effect-client`, install the exact cohort:
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
pnpm add effect@4.0.0-beta.102 @effect/opentelemetry@4.0.0-beta.102
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
The pin is exact because UltraModern ships Effect as one lockstep cohort. Apps
|
|
61
|
+
using only `runtimeFramework: 'hono'` or the `./data-platform` lane need neither
|
|
62
|
+
package.
|
|
63
|
+
:::
|
|
64
|
+
|
|
48
65
|
Generated UltraModern workspaces use this runtime as the only generated HTTP API
|
|
49
66
|
path. The API contract lives at `shared/api.ts`, the server runtime lives at
|
|
50
67
|
`api/index.ts`, clients live under `src/api/*-client.ts`, and generated checks
|
|
@@ -197,18 +214,31 @@ The generated `api.client.*` API only exists for loader-materialized `@api/index
|
|
|
197
214
|
## Effect cohort
|
|
198
215
|
|
|
199
216
|
UltraModern-generated workspaces pin the framework-compatible Effect cohort
|
|
200
|
-
through `pnpm-workspace.yaml` overrides. For
|
|
201
|
-
apps use:
|
|
217
|
+
through `pnpm-workspace.yaml` overrides. For the current UltraModern cohort,
|
|
218
|
+
generated apps use:
|
|
202
219
|
|
|
203
220
|
```yaml
|
|
221
|
+
minimumReleaseAgeExclude:
|
|
222
|
+
- 'effect@4.0.0-beta.102'
|
|
223
|
+
- '@effect/opentelemetry@4.0.0-beta.102'
|
|
224
|
+
|
|
225
|
+
trustPolicyExclude:
|
|
226
|
+
- 'effect@4.0.0-beta.102'
|
|
227
|
+
- '@effect/opentelemetry@4.0.0-beta.102'
|
|
228
|
+
|
|
204
229
|
overrides:
|
|
205
|
-
'@effect/
|
|
206
|
-
effect: 4.0.0-beta.
|
|
230
|
+
'@effect/opentelemetry': 4.0.0-beta.102
|
|
231
|
+
'@effect/vitest': 4.0.0-beta.102
|
|
232
|
+
effect: 4.0.0-beta.102
|
|
207
233
|
```
|
|
208
234
|
|
|
209
235
|
Do not add a different direct `effect` version in an app package. A mismatched
|
|
210
236
|
Effect beta can fail while building layers or HTTP middleware because runtime
|
|
211
|
-
services come from different package instances.
|
|
237
|
+
services come from different package instances. Keep the generated
|
|
238
|
+
policy exclusion entries with the same Effect cohort; they handle the
|
|
239
|
+
framework-selected Effect beta versions before the 24-hour maturity window and
|
|
240
|
+
the `effect`/`@effect/opentelemetry` trusted-publisher to provenance metadata
|
|
241
|
+
transition without weakening UltraModern API architecture checks.
|
|
212
242
|
|
|
213
243
|
## Contract tests
|
|
214
244
|
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: mockDir
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# dev.mockDir
|
|
6
|
+
|
|
7
|
+
- **Type:** `string`
|
|
8
|
+
- **Default:** `'./config/mock'`
|
|
9
|
+
|
|
10
|
+
Sets the directory containing the Mock API entry file. Relative paths are
|
|
11
|
+
resolved from the application directory, and absolute paths are also supported.
|
|
12
|
+
Modern.js loads `index.ts` or `index.js` from this directory during development.
|
|
13
|
+
|
|
14
|
+
For example, move the Mock API entry to `mocks/index.ts`:
|
|
15
|
+
|
|
16
|
+
```js title="modern.config.ts"
|
|
17
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
18
|
+
|
|
19
|
+
export default defineConfig({
|
|
20
|
+
dev: {
|
|
21
|
+
mockDir: './mocks',
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
This is also useful in a monorepo when multiple applications share one Mock
|
|
27
|
+
directory:
|
|
28
|
+
|
|
29
|
+
```js title="modern.config.ts"
|
|
30
|
+
export default defineConfig({
|
|
31
|
+
dev: {
|
|
32
|
+
mockDir: '../../shared/mocks',
|
|
33
|
+
},
|
|
34
|
+
});
|
|
35
|
+
```
|
|
@@ -28,6 +28,11 @@ type BuildCacheConfig =
|
|
|
28
28
|
|
|
29
29
|
Controls the caching behavior during the build process.
|
|
30
30
|
|
|
31
|
+
When persistent Rspack cache is enabled, Modern.js treats `cacheDirectory` as a
|
|
32
|
+
base directory and stores each Rsbuild/Rspack environment in its own child
|
|
33
|
+
directory, such as `client`, `server`, or `workerSSR`. This avoids concurrent
|
|
34
|
+
environment compilers writing to the same filesystem cache root.
|
|
35
|
+
|
|
31
36
|
Modern.js will enable build cache by default to improve the compile speed. You can disable the build cache by setting it to `false`:
|
|
32
37
|
|
|
33
38
|
```js
|
|
@@ -22,7 +22,7 @@ export default defineConfig({
|
|
|
22
22
|
:::tip Prerequisites
|
|
23
23
|
Before enabling RSC, ensure:
|
|
24
24
|
1. React and React DOM are upgraded to version 19 (recommended 19.2.4 or above)
|
|
25
|
-
2. Install the `react-server-dom-rspack@0.0.
|
|
25
|
+
2. Install the `react-server-dom-rspack@0.0.2` dependency
|
|
26
26
|
|
|
27
27
|
:::
|
|
28
28
|
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: reactCompiler
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# source.reactCompiler
|
|
6
|
+
|
|
7
|
+
- **Type:** `boolean | ReactCompilerOptions`
|
|
8
|
+
- **Default:** `undefined` (disabled)
|
|
9
|
+
|
|
10
|
+
Whether to enable [React Compiler](https://react.dev/learn/react-compiler). React Compiler is a build-time tool that optimizes re-rendering performance of React applications through automatic memoization.
|
|
11
|
+
|
|
12
|
+
Modern.js implements this capability based on the Rust-based React Compiler built into Rspack's `builtin:swc-loader` (equivalent to setting SWC's `jsc.transform.reactCompiler`), reusing Rspack's built-in SWC transform chain without introducing Babel.
|
|
13
|
+
|
|
14
|
+
:::tip
|
|
15
|
+
This option is disabled by default. It must be enabled explicitly for any React version, including React 19.
|
|
16
|
+
:::
|
|
17
|
+
|
|
18
|
+
## Example
|
|
19
|
+
|
|
20
|
+
### Enable React Compiler (React 19)
|
|
21
|
+
|
|
22
|
+
```ts title="modern.config.ts"
|
|
23
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
24
|
+
|
|
25
|
+
export default defineConfig({
|
|
26
|
+
source: {
|
|
27
|
+
reactCompiler: true,
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Using with React 18
|
|
33
|
+
|
|
34
|
+
The compiled output targets React 19 by default. To use it in React 18 projects, you need to:
|
|
35
|
+
|
|
36
|
+
1. Install [react-compiler-runtime](https://www.npmjs.com/package/react-compiler-runtime) as a **runtime dependency** (the compiled output references it at runtime):
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm add react-compiler-runtime
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
2. Specify the React version via `target`:
|
|
43
|
+
|
|
44
|
+
```ts title="modern.config.ts"
|
|
45
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
46
|
+
|
|
47
|
+
export default defineConfig({
|
|
48
|
+
source: {
|
|
49
|
+
reactCompiler: {
|
|
50
|
+
target: '18',
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
});
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Customize compilation behavior
|
|
57
|
+
|
|
58
|
+
When passing an object, the options are the same as Rspack's `jsc.transform.reactCompiler`. For example, use `compilationMode: 'annotation'` to only compile functions annotated with the `"use memo"` directive:
|
|
59
|
+
|
|
60
|
+
```ts title="modern.config.ts"
|
|
61
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
62
|
+
|
|
63
|
+
export default defineConfig({
|
|
64
|
+
source: {
|
|
65
|
+
reactCompiler: {
|
|
66
|
+
compilationMode: 'annotation',
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
});
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
For the complete list of options, see [Rsbuild - reactCompiler](https://rsbuild.rs/plugins/list/plugin-react#reactcompiler) and the [React Compiler configuration docs](https://react.dev/reference/react-compiler/configuration).
|
|
@@ -19,7 +19,7 @@ const defaultOptions = {
|
|
|
19
19
|
// use TypeScript Go checker by default
|
|
20
20
|
tsgo: true,
|
|
21
21
|
// use TS-Go native preview of user project
|
|
22
|
-
typescriptPath: require.resolve('
|
|
22
|
+
typescriptPath: require.resolve('typescript/package.json'),
|
|
23
23
|
},
|
|
24
24
|
issue: {
|
|
25
25
|
exclude: [
|
|
@@ -80,11 +80,11 @@ export default {
|
|
|
80
80
|
|
|
81
81
|
Type checking runs on [TypeScript Go](https://github.com/microsoft/typescript-go) (`tsgo`) by default in this fork. The capability is provided by [`ts-checker-rspack-plugin`](https://github.com/rstackjs/ts-checker-rspack-plugin), which is integrated by [`@rsbuild/plugin-type-check`](https://github.com/rstackjs/rsbuild-plugin-type-check), and reduces type-checking time by about 5-10x.
|
|
82
82
|
|
|
83
|
-
`@typescript/native-preview`
|
|
83
|
+
Modern.js prefers the project's stable `typescript` package when it is TypeScript 7 or newer, and falls back to `@typescript/native-preview` for projects still on the preview lane. To pin stable TypeScript 7, install it in your project:
|
|
84
84
|
|
|
85
|
-
<PackageManagerTabs command="install
|
|
85
|
+
<PackageManagerTabs command="install typescript -D" />
|
|
86
86
|
|
|
87
|
-
When `tsgo` is enabled, the default `typescript.typescriptPath` resolves to
|
|
87
|
+
When `tsgo` is enabled, the default `typescript.typescriptPath` resolves to `typescript/package.json` for TypeScript 7 projects. If you manually set `typescript.typescriptPath`, it must be an absolute path to `typescript/package.json` or `@typescript/native-preview/package.json`.
|
|
88
88
|
|
|
89
89
|
To fall back to the classic TypeScript checker, set `typescript.tsgo` to `false` and make sure `typescript` is installed in your project:
|
|
90
90
|
|
|
@@ -145,19 +145,52 @@ const myPlugin = (): RuntimePlugin => ({
|
|
|
145
145
|
|
|
146
146
|
The i18next instance type used by the plugin. It is a subset of the i18next `i18n` type and only lists fields actually used by the plugin:
|
|
147
147
|
|
|
148
|
+
:::warning BREAKING (UltraModern)
|
|
149
|
+
`I18nInstance` no longer declares a top-level `[key: string]: unknown` index
|
|
150
|
+
signature: TypeScript never grants an interface an implicit index signature, so
|
|
151
|
+
that member made the documented `runtime: { i18n: { i18nInstance: i18next } }`
|
|
152
|
+
usage fail to typecheck. Reading a property that is not declared below is now a
|
|
153
|
+
type error (TS2339) — cast to the concrete instance type instead. `t` is now a
|
|
154
|
+
REQUIRED member, so object literals that produce an `I18nInstance` must supply
|
|
155
|
+
one.
|
|
156
|
+
:::
|
|
157
|
+
|
|
148
158
|
```ts
|
|
159
|
+
type TranslateFn = (
|
|
160
|
+
key: string | string[],
|
|
161
|
+
options?: Record<string, unknown>,
|
|
162
|
+
) => string;
|
|
163
|
+
|
|
149
164
|
interface I18nInstance {
|
|
150
165
|
language: string;
|
|
151
|
-
isInitialized
|
|
152
|
-
init
|
|
153
|
-
changeLanguage
|
|
154
|
-
|
|
155
|
-
|
|
166
|
+
isInitialized?: boolean;
|
|
167
|
+
init(options?: any, callback?: any): Promise<any>;
|
|
168
|
+
changeLanguage?(lng?: string, callback?: any): Promise<any>;
|
|
169
|
+
setLang?: (lang: string) => void | Promise<void>;
|
|
170
|
+
use(plugin: any): unknown;
|
|
171
|
+
t: TranslateFn;
|
|
172
|
+
exists?: (key: string | string[], options?: Record<string, unknown>) => boolean;
|
|
173
|
+
getFixedT?: (
|
|
174
|
+
lng: string | readonly string[] | null,
|
|
175
|
+
ns?: string | readonly string[] | null,
|
|
176
|
+
keyPrefix?: string,
|
|
177
|
+
) => TranslateFn;
|
|
178
|
+
hasLoadedNamespace?: (
|
|
179
|
+
ns: string | readonly string[],
|
|
180
|
+
options?: Record<string, unknown>,
|
|
181
|
+
) => boolean;
|
|
182
|
+
dir?: (lng?: string) => string;
|
|
183
|
+
languages?: readonly string[];
|
|
184
|
+
resolvedLanguage?: string;
|
|
185
|
+
createInstance?(options?: any, callback?: any): I18nInstance;
|
|
186
|
+
cloneInstance?(options?: any, callback?: any): I18nInstance;
|
|
156
187
|
options?: {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
188
|
+
detection?: any;
|
|
189
|
+
backend?: any;
|
|
190
|
+
ns?: any;
|
|
191
|
+
defaultNS?: any;
|
|
160
192
|
};
|
|
193
|
+
// ...see src/runtime/i18n/instance.ts for the full member list.
|
|
161
194
|
}
|
|
162
195
|
```
|
|
163
196
|
|
|
@@ -20,6 +20,17 @@ By convention, when there is an `index.ts` in the `config/mock/` directory, mock
|
|
|
20
20
|
└── modern.config.ts
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
+
You can use [`dev.mockDir`](/configure/app/dev/mock-dir) to place the
|
|
24
|
+
Mock entry in another directory:
|
|
25
|
+
|
|
26
|
+
```js title="modern.config.ts"
|
|
27
|
+
export default {
|
|
28
|
+
dev: {
|
|
29
|
+
mockDir: './mocks',
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
```
|
|
33
|
+
|
|
23
34
|
## Writing Mock Files
|
|
24
35
|
|
|
25
36
|
The `config/mock/index.ts` file only needs to export an object containing all Mock APIs. The properties of the object are composed of the request configuration `method` and `url`, and the corresponding property values can be `Object`, `Array`, or `Function`:
|
|
@@ -112,7 +112,7 @@ Add the following content to `netlify.toml`:
|
|
|
112
112
|
```
|
|
113
113
|
|
|
114
114
|
:::info
|
|
115
|
-
You can refer to the [deployment project example](https://github.com/web-infra-dev/modern
|
|
115
|
+
You can refer to the [deployment project example](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
|
|
116
116
|
|
|
117
117
|
:::
|
|
118
118
|
|
|
@@ -137,7 +137,7 @@ Full-stack projects refer to projects that use Custom Web Server, SSR or BFF. Th
|
|
|
137
137
|
:::info
|
|
138
138
|
|
|
139
139
|
1. Currently, Modern.js does not support deployment on Netlify Edge Functions. We will support it in future versions.
|
|
140
|
-
2. You can refer to the [deployment project example](https://github.com/web-infra-dev/modern
|
|
140
|
+
2. You can refer to the [deployment project example](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-ssr).
|
|
141
141
|
|
|
142
142
|
:::
|
|
143
143
|
|
|
@@ -223,7 +223,7 @@ Commit your project to git, select Framework Preset as `Other` on the Vercel pla
|
|
|
223
223
|
<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png" />
|
|
224
224
|
|
|
225
225
|
:::info
|
|
226
|
-
You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern
|
|
226
|
+
You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
|
|
227
227
|
|
|
228
228
|
:::
|
|
229
229
|
|
|
@@ -237,7 +237,7 @@ In addition to configuring `vercel.json` in the same way as a [pure front-end pr
|
|
|
237
237
|
2. The Node.js version for function execution is determined by the project configuration on the Vercel platform.
|
|
238
238
|
|
|
239
239
|
:::info
|
|
240
|
-
You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern
|
|
240
|
+
You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-ssr).
|
|
241
241
|
|
|
242
242
|
:::
|
|
243
243
|
|
|
@@ -335,10 +335,10 @@ For branch deployment, follow these steps:
|
|
|
335
335
|
:::info
|
|
336
336
|
|
|
337
337
|
1. Running `MODERNJS_DEPLOY=ghPages modern deploy` will build the production output for GitHub in the .output directory.
|
|
338
|
-
2. You can refer to the [project](https://github.com/web-infra-dev/modern
|
|
338
|
+
2. You can refer to the [project](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)
|
|
339
339
|
:::
|
|
340
340
|
|
|
341
|
-
For GitHub Actions deployment, select Settings > Pages > Source > GitHub Actions, and add a workflow file to the project. You can refer to the [example](https://github.com/web-infra-dev/modern
|
|
341
|
+
For GitHub Actions deployment, select Settings > Pages > Source > GitHub Actions, and add a workflow file to the project. You can refer to the [example](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
|
|
342
342
|
|
|
343
343
|
## Using Self-Built Node.js Server
|
|
344
344
|
|
|
@@ -23,10 +23,10 @@ Before starting, we recommend reading React's official [Server Components docume
|
|
|
23
23
|
|
|
24
24
|
1. **Ensure React and React DOM are upgraded to version 19** (recommended version 19.2.4 or above)
|
|
25
25
|
|
|
26
|
-
2. **Install the `react-server-dom-rspack@0.0.
|
|
26
|
+
2. **Install the `react-server-dom-rspack@0.0.2` dependency**
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
|
-
npm install react-server-dom-rspack@0.0.
|
|
29
|
+
npm install react-server-dom-rspack@0.0.2
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
:::warning Notes
|
|
@@ -4,7 +4,7 @@ sidebar_position: 2
|
|
|
4
4
|
|
|
5
5
|
# Routing
|
|
6
6
|
|
|
7
|
-
Modern.js supports conventional routing on top of both [React Router
|
|
7
|
+
Modern.js supports conventional routing on top of both [React Router](https://reactrouter.com/en/main) and [TanStack Router](https://tanstack.com/router), offering file convention-based routing capabilities and supporting the industry-popular **nested routing** pattern. When an entry is recognized as [conventional routing](/guides/concept/entries.html#conventional-routing), Modern.js automatically generates the corresponding routing structure based on the file system.
|
|
8
8
|
|
|
9
9
|
:::note
|
|
10
10
|
|
|
@@ -93,7 +93,7 @@ export default () => {
|
|
|
93
93
|
|
|
94
94
|
:::note
|
|
95
95
|
|
|
96
|
-
`<Outlet>` is an API provided by React Router
|
|
96
|
+
`<Outlet>` is an API provided by React Router. For more details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
|
|
97
97
|
|
|
98
98
|
:::
|
|
99
99
|
|
|
@@ -156,7 +156,7 @@ If there is an `App.tsx?` file in the entry, this entry is a self-controlled rou
|
|
|
156
156
|
│ └── App.tsx
|
|
157
157
|
```
|
|
158
158
|
|
|
159
|
-
For the entry defined as `src/App.tsx`, Modern.js does not perform additional routing operations. Developers can use the [React Router
|
|
159
|
+
For the entry defined as `src/App.tsx`, Modern.js does not perform additional routing operations. Developers can use the [React Router](https://reactrouter.com/en/main) API to set up client-side routes, or not set up client-side routes. For example, the following code sets up client-side routes in the application:
|
|
160
160
|
|
|
161
161
|
```tsx title="src/App.tsx"
|
|
162
162
|
import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
|
|
@@ -5,16 +5,31 @@ sidebar_position: 6
|
|
|
5
5
|
|
|
6
6
|
# Modern.js For AI
|
|
7
7
|
|
|
8
|
-
Modern.js provides a toolkit for AI agents that
|
|
8
|
+
Modern.js provides a toolkit for AI agents that makes your project agent-ready out of the box, helping you use AI to develop, upgrade, and migrate Modern.js applications more accurately and efficiently.
|
|
9
|
+
|
|
10
|
+
## Bundled docs
|
|
11
|
+
|
|
12
|
+
Modern.js ships the English docs that match your installed version together with `@modern-js/app-tools`. After you install or upgrade, they live at `node_modules/@modern-js/app-tools/docs/`, available offline with no extra setup.
|
|
13
|
+
|
|
14
|
+
AI agents use them to get APIs, config, and conventions that exactly match your framework version, rather than relying on potentially outdated training data.
|
|
15
|
+
|
|
16
|
+
## AGENTS.md
|
|
17
|
+
|
|
18
|
+
`AGENTS.md` gives AI coding agents project-level guidance — telling them to read the bundled docs before making changes and to follow Modern.js conventions. A `CLAUDE.md` is generated alongside it, reusing the same guidance for Claude Code via the `@AGENTS.md` import.
|
|
19
|
+
|
|
20
|
+
- **New projects**: `npx @modern-js/create` generates both files by default; pass `--no-agents-md` to skip them.
|
|
21
|
+
- **Existing projects**: run `npx @modern-js/create agents-md` at the project root to create or update them. Re-run it any time; your own additions are preserved.
|
|
22
|
+
|
|
23
|
+
Modern.js only maintains the content inside the `<!-- BEGIN:modernjs-agent-rules -->` markers in `AGENTS.md`; anything you write outside them is left untouched.
|
|
9
24
|
|
|
10
25
|
## llms.txt
|
|
11
26
|
|
|
12
|
-
|
|
27
|
+
llms.txt is an online documentation index following the [llms.txt specification](https://llmstxt.org/), auto-generated by [`@rspress/plugin-llms`](https://rspress.rs/plugin/official-plugins/llms) for AI tools to retrieve the full docs online:
|
|
13
28
|
|
|
14
29
|
- Index: [`https://modernjs.dev/llms.txt`](https://modernjs.dev/llms.txt)
|
|
15
|
-
- Full text: `https://modernjs.dev/llms-full.txt` (large — fetch on demand)
|
|
30
|
+
- Full text: [`https://modernjs.dev/llms-full.txt`](https://modernjs.dev/llms-full.txt) (large — fetch on demand)
|
|
16
31
|
|
|
17
|
-
|
|
32
|
+
Use it when you need content beyond the bundled docs — just let your agent retrieve it on demand, no need to copy docs into your project. Typical cases: looking up another framework version, a section not included in the bundle, or getting Modern.js information outside of a project (for example before a project exists, or when researching on its own).
|
|
18
33
|
|
|
19
34
|
## Skills
|
|
20
35
|
|
|
@@ -10,7 +10,7 @@ In this document, you can learn about the main technology stack involved in the
|
|
|
10
10
|
|
|
11
11
|
## UI Library
|
|
12
12
|
|
|
13
|
-
Modern.js uses [React
|
|
13
|
+
Modern.js uses [React 19](https://react.dev/) to build user interfaces and is also compatible with React 18.
|
|
14
14
|
|
|
15
15
|
Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://v2.rsbuild.rs/guide/framework/vue).
|
|
16
16
|
|
|
@@ -19,7 +19,7 @@ Rsbuild supports building Vue applications. If you need to use Vue, you can refe
|
|
|
19
19
|
Modern.js provides two first-party routing frameworks:
|
|
20
20
|
|
|
21
21
|
- [TanStack Router](https://tanstack.com/router) (UltraModern default), via `@modern-js/plugin-tanstack/runtime`.
|
|
22
|
-
- [React Router
|
|
22
|
+
- [React Router](https://reactrouter.com/en/main), via `@modern-js/runtime/router`.
|
|
23
23
|
|
|
24
24
|
When creating an UltraModern project, TanStack Router is included by default:
|
|
25
25
|
|
|
@@ -78,33 +78,78 @@ mise exec -- pnpm check
|
|
|
78
78
|
mise exec -- pnpm build
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
### Migrating to `3.5.0-ultramodern.18`
|
|
82
|
+
|
|
83
|
+
Use `3.5.0-ultramodern.18` or newer for localized Cloudflare SSR workspaces.
|
|
84
|
+
This cohort moves bare locale-root redirects into the framework-owned
|
|
85
|
+
Cloudflare Worker entry and the i18n server runtime. A request for `/` is
|
|
86
|
+
redirected server-side with `302` to the negotiated locale path, for example
|
|
87
|
+
`/cs` for `Accept-Language: cs-CZ` or `/en` for English and fallback traffic.
|
|
88
|
+
|
|
89
|
+
Existing generated workspaces should upgrade the whole BleedingDev Modern
|
|
90
|
+
package cohort together:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
pnpm dlx @bleedingdev/modern-js-create@3.5.0-ultramodern.18 ultramodern \
|
|
94
|
+
migrate-strict-effect --version 3.5.0-ultramodern.18
|
|
95
|
+
pnpm install
|
|
96
|
+
pnpm check
|
|
97
|
+
pnpm build
|
|
98
|
+
pnpm cloudflare:build
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
For deployed Cloudflare Workers, redeploy after the cohort update and verify
|
|
102
|
+
the root response before accepting the migration:
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
curl -I -H 'Accept-Language: cs-CZ,cs;q=0.9,en;q=0.1' https://<worker-host>/
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
The expected response is `302` with `Location: /cs` or the matching locale,
|
|
109
|
+
`Cache-Control: private, no-store`, and `Vary` covering the locale detection
|
|
110
|
+
headers. Following the redirect should return the SSR locale page with the
|
|
111
|
+
matching document language and i18n SSR data.
|
|
112
|
+
|
|
113
|
+
Do not fix older root `404` responses by adding app-owned root route files,
|
|
114
|
+
client-side redirects, custom navigation wrappers, Cloudflare Worker
|
|
115
|
+
postprocessing, generated output edits, or local redirect shims. If `/` still
|
|
116
|
+
returns `404` after upgrading, confirm the production build log shows
|
|
117
|
+
`Modern.js Framework v3.5.0-ultramodern.18` or newer and redeploy the Worker.
|
|
118
|
+
|
|
119
|
+
Strict generated API migration requires `3.5.0-ultramodern.10` or newer.
|
|
82
120
|
`3.4.0-ultramodern.20` and earlier cohorts do not include this full direct
|
|
83
121
|
`api/index.ts` generator, generated `.mts` checks, strict Oxlint boundary rule
|
|
84
122
|
set, Effect cohort overrides, and strict Effect migration command. Agents that
|
|
85
123
|
cannot install that BleedingDev cohort yet should use the local Modern.js
|
|
86
|
-
workspace for migration validation; otherwise pin `3.5.0-ultramodern.
|
|
124
|
+
workspace for migration validation; otherwise pin `3.5.0-ultramodern.10` or
|
|
87
125
|
newer with `--ultramodern-package-version`.
|
|
88
126
|
|
|
89
127
|
Before hand-editing package aliases or generated metadata, run the framework
|
|
90
128
|
migration command from the target workspace:
|
|
91
129
|
|
|
92
130
|
```bash
|
|
93
|
-
pnpm dlx @bleedingdev/modern-js-create@3.5.0-ultramodern.
|
|
94
|
-
migrate-strict-effect --version 3.5.0-ultramodern.
|
|
131
|
+
pnpm dlx @bleedingdev/modern-js-create@3.5.0-ultramodern.10 ultramodern \
|
|
132
|
+
migrate-strict-effect --version 3.5.0-ultramodern.10
|
|
95
133
|
pnpm api:check
|
|
96
134
|
pnpm contract:check
|
|
97
135
|
```
|
|
98
136
|
|
|
99
137
|
The command updates `.modernjs/ultramodern.json`, root
|
|
100
|
-
`modernjs.packageSource`, generated Modern package aliases,
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
138
|
+
`modernjs.packageSource`, generated Modern package aliases, framework-owned
|
|
139
|
+
toolchain pins, direct topology API metadata, strict Effect pnpm
|
|
140
|
+
overrides/trust policy, and the pnpm lockfile. Remaining failures are source
|
|
141
|
+
migration work: move code to `shared/api.ts`, `api/index.ts`, and
|
|
142
|
+
`src/api/*-client.ts`, then delete `api/effect`, `api/lambda`, `shared/effect`,
|
|
143
|
+
and `src/effect`.
|
|
104
144
|
|
|
105
145
|
Generated strict Effect workspaces pin the compatible Effect cohort with pnpm
|
|
106
|
-
overrides: `effect@4.0.0-beta.
|
|
107
|
-
add app-local direct Effect
|
|
146
|
+
overrides: `effect@4.0.0-beta.102`, `@effect/opentelemetry@4.0.0-beta.102`,
|
|
147
|
+
and `@effect/vitest@4.0.0-beta.102`. Do not add app-local direct Effect
|
|
148
|
+
versions that disagree with those overrides. They also carry generated pnpm
|
|
149
|
+
policy exclusions for `effect@4.0.0-beta.102` and
|
|
150
|
+
`@effect/opentelemetry@4.0.0-beta.102` so the framework-selected Effect beta
|
|
151
|
+
cohort is not blocked by the 24-hour age gate or trusted-publisher to
|
|
152
|
+
provenance metadata transition.
|
|
108
153
|
|
|
109
154
|
Gradual migration means old, unmigrated Modern.js apps can keep their existing
|
|
110
155
|
runtime until they are converted. Once a surface is generated or migrated as
|
|
@@ -165,8 +210,8 @@ Older repos with nested Effect entries and `verbatimModuleSyntax` should update
|
|
|
165
210
|
the latest BleedingDev cohort instead of adding app-level `"type": "module"`
|
|
166
211
|
metadata, Module Federation shims, or custom server wrappers. The framework BFF
|
|
167
212
|
compiler normalizes CommonJS server output while generated app packages keep
|
|
168
|
-
stable
|
|
169
|
-
|
|
213
|
+
stable TypeScript 7 so Module Federation DTS generation and TS-Go checks use
|
|
214
|
+
the same modern compiler lane.
|
|
170
215
|
|
|
171
216
|
Cloudflare SSR deploys are also split by runtime responsibility: `.output` is an
|
|
172
217
|
ESM module-worker package, while `.output/worker` remains a CommonJS package
|
|
@@ -183,9 +228,10 @@ instead of patching generated output by hand.
|
|
|
183
228
|
Cloudflare D1 bindings are first-class on `deploy.worker.d1Databases`; use that
|
|
184
229
|
config instead of app-local postprocessing when a generated app owns D1
|
|
185
230
|
migrations. Cloudflare public output excludes server-only `api` and `shared`
|
|
186
|
-
directories by default, and generated Modern/Rspack
|
|
187
|
-
and
|
|
188
|
-
|
|
231
|
+
directories by default, and generated Modern/Rspack output roots, temp
|
|
232
|
+
directories, and caches are isolated per app, build target, and Rspack
|
|
233
|
+
environment so local `build`, `cloudflare:build`, and multi-environment
|
|
234
|
+
compilers do not share mutable build state.
|
|
189
235
|
|
|
190
236
|
## Human Workflow
|
|
191
237
|
|
|
@@ -305,10 +351,9 @@ Overlays are explicit CodeSmith generators that run after base workspace or
|
|
|
305
351
|
MicroVertical generation. They extend generated output; they do not replace,
|
|
306
352
|
inherit, or shadow the base templates. The generator and CodeSmith adapter are
|
|
307
353
|
plain Node generator surfaces. The package build emits declaration files through
|
|
308
|
-
the TS-Go toolchain. Generated app packages keep stable `typescript`
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
on native-preview compiler internals.
|
|
354
|
+
the TS-Go toolchain. Generated app packages keep stable `typescript` on TS7 so
|
|
355
|
+
Module Federation DTS generation and TS-Go use the same compiler lane; runtime
|
|
356
|
+
code does not depend on compiler internals.
|
|
312
357
|
|
|
313
358
|
### Runtime Contracts
|
|
314
359
|
|
|
@@ -335,7 +380,7 @@ The generated contract writes `.modernjs/ultramodern.json` with a
|
|
|
335
380
|
- `packages/shared-design-tokens` owns the shared token layer and exports `./tokens.css`.
|
|
336
381
|
- Shell CSS owns only shell base and overlay layers under `[data-app-id="shell-super-app"]`.
|
|
337
382
|
- Each vertical owns one CSS layer, for example `[data-app-id="vertical-transportation"]` with app-local class prefixes.
|
|
338
|
-
- Tailwind CSS v4 is local to each generated app through `@tailwindcss
|
|
383
|
+
- Tailwind CSS v4 is local to each generated app through `@rsbuild/plugin-tailwindcss`; shared base styles must not be duplicated by verticals.
|
|
339
384
|
- 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.
|
|
340
385
|
|
|
341
386
|
Version switching must select UI, 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.
|
|
@@ -357,7 +402,7 @@ Cloudflare and Zephyr proof:
|
|
|
357
402
|
ULTRAMODERN_PUBLIC_URL_SHELL_SUPER_APP=https://shell-super-app.example.workers.dev \
|
|
358
403
|
ULTRAMODERN_PUBLIC_URL_TRANSPORTATION=https://transportation.example.workers.dev \
|
|
359
404
|
ULTRAMODERN_PUBLIC_URL_PAYMENTS=https://payments.example.workers.dev \
|
|
360
|
-
mise exec -- pnpm cloudflare:proof --
|
|
405
|
+
mise exec -- pnpm cloudflare:proof --require-public-urls
|
|
361
406
|
```
|
|
362
407
|
|
|
363
408
|
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.
|