@bleedingdev/modern-js-main-doc 3.5.0-ultramodern.6 → 3.5.0-ultramodern.75
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/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 +9 -8
- package/docs/en/configure/app/performance/build-cache.mdx +5 -0
- package/docs/en/configure/app/tools/ts-checker.mdx +4 -4
- 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/tech-stack.mdx +1 -1
- package/docs/en/guides/get-started/ultramodern.mdx +58 -19
- package/docs/en/tutorials/examples/csr-auth.mdx +1 -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 +8 -7
- package/docs/zh/configure/app/performance/build-cache.mdx +4 -0
- package/docs/zh/configure/app/tools/ts-checker.mdx +4 -4
- 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/tech-stack.mdx +1 -1
- package/docs/zh/guides/get-started/ultramodern.mdx +53 -18
- package/docs/zh/tutorials/examples/csr-auth.mdx +1 -1
- package/package.json +12 -13
|
@@ -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.
|
|
@@ -197,21 +197,22 @@ The generated `api.client.*` API only exists for loader-materialized `@api/index
|
|
|
197
197
|
## Effect cohort
|
|
198
198
|
|
|
199
199
|
UltraModern-generated workspaces pin the framework-compatible Effect cohort
|
|
200
|
-
through `pnpm-workspace.yaml` overrides. For
|
|
201
|
-
apps use:
|
|
200
|
+
through `pnpm-workspace.yaml` overrides. For the current UltraModern cohort,
|
|
201
|
+
generated apps use:
|
|
202
202
|
|
|
203
203
|
```yaml
|
|
204
204
|
minimumReleaseAgeExclude:
|
|
205
|
-
- 'effect@4.0.0-beta.
|
|
206
|
-
- '@effect/opentelemetry@4.0.0-beta.
|
|
205
|
+
- 'effect@4.0.0-beta.97'
|
|
206
|
+
- '@effect/opentelemetry@4.0.0-beta.97'
|
|
207
207
|
|
|
208
208
|
trustPolicyExclude:
|
|
209
|
-
- 'effect@4.0.0-beta.
|
|
210
|
-
- '@effect/opentelemetry@4.0.0-beta.
|
|
209
|
+
- 'effect@4.0.0-beta.97'
|
|
210
|
+
- '@effect/opentelemetry@4.0.0-beta.97'
|
|
211
211
|
|
|
212
212
|
overrides:
|
|
213
|
-
'@effect/
|
|
214
|
-
effect: 4.0.0-beta.
|
|
213
|
+
'@effect/opentelemetry': 4.0.0-beta.97
|
|
214
|
+
'@effect/vitest': 4.0.0-beta.97
|
|
215
|
+
effect: 4.0.0-beta.97
|
|
215
216
|
```
|
|
216
217
|
|
|
217
218
|
Do not add a different direct `effect` version in an app package. A mismatched
|
|
@@ -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
|
|
@@ -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
|
|
|
@@ -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';
|
|
@@ -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,20 +78,58 @@ 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
|
```
|
|
@@ -105,10 +143,11 @@ migration work: move code to `shared/api.ts`, `api/index.ts`, and
|
|
|
105
143
|
and `src/effect`.
|
|
106
144
|
|
|
107
145
|
Generated strict Effect workspaces pin the compatible Effect cohort with pnpm
|
|
108
|
-
overrides: `effect@4.0.0-beta.
|
|
109
|
-
add app-local direct Effect
|
|
110
|
-
|
|
111
|
-
|
|
146
|
+
overrides: `effect@4.0.0-beta.97`, `@effect/opentelemetry@4.0.0-beta.97`,
|
|
147
|
+
and `@effect/vitest@4.0.0-beta.97`. 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.97` and
|
|
150
|
+
`@effect/opentelemetry@4.0.0-beta.97` so the framework-selected Effect beta
|
|
112
151
|
cohort is not blocked by the 24-hour age gate or trusted-publisher to
|
|
113
152
|
provenance metadata transition.
|
|
114
153
|
|
|
@@ -171,8 +210,8 @@ Older repos with nested Effect entries and `verbatimModuleSyntax` should update
|
|
|
171
210
|
the latest BleedingDev cohort instead of adding app-level `"type": "module"`
|
|
172
211
|
metadata, Module Federation shims, or custom server wrappers. The framework BFF
|
|
173
212
|
compiler normalizes CommonJS server output while generated app packages keep
|
|
174
|
-
stable
|
|
175
|
-
|
|
213
|
+
stable TypeScript 7 so Module Federation DTS generation and TS-Go checks use
|
|
214
|
+
the same modern compiler lane.
|
|
176
215
|
|
|
177
216
|
Cloudflare SSR deploys are also split by runtime responsibility: `.output` is an
|
|
178
217
|
ESM module-worker package, while `.output/worker` remains a CommonJS package
|
|
@@ -189,9 +228,10 @@ instead of patching generated output by hand.
|
|
|
189
228
|
Cloudflare D1 bindings are first-class on `deploy.worker.d1Databases`; use that
|
|
190
229
|
config instead of app-local postprocessing when a generated app owns D1
|
|
191
230
|
migrations. Cloudflare public output excludes server-only `api` and `shared`
|
|
192
|
-
directories by default, and generated Modern/Rspack
|
|
193
|
-
and
|
|
194
|
-
|
|
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.
|
|
195
235
|
|
|
196
236
|
## Human Workflow
|
|
197
237
|
|
|
@@ -311,10 +351,9 @@ Overlays are explicit CodeSmith generators that run after base workspace or
|
|
|
311
351
|
MicroVertical generation. They extend generated output; they do not replace,
|
|
312
352
|
inherit, or shadow the base templates. The generator and CodeSmith adapter are
|
|
313
353
|
plain Node generator surfaces. The package build emits declaration files through
|
|
314
|
-
the TS-Go toolchain. Generated app packages keep stable `typescript`
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
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.
|
|
318
357
|
|
|
319
358
|
### Runtime Contracts
|
|
320
359
|
|
|
@@ -341,7 +380,7 @@ The generated contract writes `.modernjs/ultramodern.json` with a
|
|
|
341
380
|
- `packages/shared-design-tokens` owns the shared token layer and exports `./tokens.css`.
|
|
342
381
|
- Shell CSS owns only shell base and overlay layers under `[data-app-id="shell-super-app"]`.
|
|
343
382
|
- Each vertical owns one CSS layer, for example `[data-app-id="vertical-transportation"]` with app-local class prefixes.
|
|
344
|
-
- 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.
|
|
345
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.
|
|
346
385
|
|
|
347
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.
|
|
@@ -363,7 +402,7 @@ Cloudflare and Zephyr proof:
|
|
|
363
402
|
ULTRAMODERN_PUBLIC_URL_SHELL_SUPER_APP=https://shell-super-app.example.workers.dev \
|
|
364
403
|
ULTRAMODERN_PUBLIC_URL_TRANSPORTATION=https://transportation.example.workers.dev \
|
|
365
404
|
ULTRAMODERN_PUBLIC_URL_PAYMENTS=https://payments.example.workers.dev \
|
|
366
|
-
mise exec -- pnpm cloudflare:proof --
|
|
405
|
+
mise exec -- pnpm cloudflare:proof --require-public-urls
|
|
367
406
|
```
|
|
368
407
|
|
|
369
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.
|
|
@@ -4,7 +4,7 @@ title: Route Authorization
|
|
|
4
4
|
|
|
5
5
|
# Route Authorization
|
|
6
6
|
|
|
7
|
-
Modern.js defaults to the convention-based routing based on React Router
|
|
7
|
+
Modern.js defaults to the convention-based routing based on React Router. For more details, please refer to [Routing](/guides/basic-features/routes/routes#routing).
|
|
8
8
|
|
|
9
9
|
In a web application, if there are multiple routes, we may need to authorize access to some of them before accessing them. For example, in the following scenario:
|
|
10
10
|
|
|
@@ -85,6 +85,6 @@ export default () => {
|
|
|
85
85
|
```
|
|
86
86
|
|
|
87
87
|
:::note
|
|
88
|
-
`<Outlet>` 是 React Router
|
|
88
|
+
`<Outlet>` 是 React Router 提供的 API,详情可以查看 [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
|
|
89
89
|
|
|
90
90
|
:::
|
|
@@ -195,20 +195,21 @@ export default defineConfig({
|
|
|
195
195
|
## Effect 版本组
|
|
196
196
|
|
|
197
197
|
UltraModern 生成的 workspace 会通过 `pnpm-workspace.yaml` overrides 锁定与框架兼容的
|
|
198
|
-
Effect
|
|
198
|
+
Effect 版本组。当前 UltraModern 版本组使用:
|
|
199
199
|
|
|
200
200
|
```yaml
|
|
201
201
|
minimumReleaseAgeExclude:
|
|
202
|
-
- 'effect@4.0.0-beta.
|
|
203
|
-
- '@effect/opentelemetry@4.0.0-beta.
|
|
202
|
+
- 'effect@4.0.0-beta.97'
|
|
203
|
+
- '@effect/opentelemetry@4.0.0-beta.97'
|
|
204
204
|
|
|
205
205
|
trustPolicyExclude:
|
|
206
|
-
- 'effect@4.0.0-beta.
|
|
207
|
-
- '@effect/opentelemetry@4.0.0-beta.
|
|
206
|
+
- 'effect@4.0.0-beta.97'
|
|
207
|
+
- '@effect/opentelemetry@4.0.0-beta.97'
|
|
208
208
|
|
|
209
209
|
overrides:
|
|
210
|
-
'@effect/
|
|
211
|
-
effect: 4.0.0-beta.
|
|
210
|
+
'@effect/opentelemetry': 4.0.0-beta.97
|
|
211
|
+
'@effect/vitest': 4.0.0-beta.97
|
|
212
|
+
effect: 4.0.0-beta.97
|
|
212
213
|
```
|
|
213
214
|
|
|
214
215
|
不要在应用包里添加不同版本的直接 `effect` 依赖。Effect beta 不一致时,Layer 或 HTTP
|
|
@@ -28,6 +28,10 @@ type BuildCacheConfig =
|
|
|
28
28
|
|
|
29
29
|
控制 Modern.js 在构建过程中的缓存行为。
|
|
30
30
|
|
|
31
|
+
启用 Rspack 持久化缓存时,Modern.js 会把 `cacheDirectory` 视为基础目录,并为每个
|
|
32
|
+
Rsbuild/Rspack environment 写入独立子目录,例如 `client`、`server` 或
|
|
33
|
+
`workerSSR`。这样可以避免并发 environment compiler 写入同一个文件系统 cache 根目录。
|
|
34
|
+
|
|
31
35
|
在构建时,Modern.js 默认会开启构建缓存来提升二次构建的速度。如果不希望缓存,你可以将 `buildCache` 置为 `false` 将其禁用掉:
|
|
32
36
|
|
|
33
37
|
```js
|
|
@@ -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
|
类型检查默认使用 [TypeScript Go](https://github.com/microsoft/typescript-go)(`tsgo`)。该能力由 [`@rsbuild/plugin-type-check`](https://github.com/rstackjs/rsbuild-plugin-type-check) 底层集成的 [`ts-checker-rspack-plugin`](https://github.com/rstackjs/ts-checker-rspack-plugin) 提供,可以将类型检查耗时减少约 5-10 倍。
|
|
82
82
|
|
|
83
|
-
`@typescript/native-preview
|
|
83
|
+
Modern.js 会优先使用项目内稳定版 `typescript`(TypeScript 7 或更新版本),仍在预览通道的项目会回退到 `@typescript/native-preview`。如需固定稳定版 TypeScript 7,可在项目中安装:
|
|
84
84
|
|
|
85
|
-
<PackageManagerTabs command="install
|
|
85
|
+
<PackageManagerTabs command="install typescript -D" />
|
|
86
86
|
|
|
87
|
-
开启 `tsgo`
|
|
87
|
+
开启 `tsgo` 后,TypeScript 7 项目默认的 `typescript.typescriptPath` 会解析到 `typescript/package.json`。如果你手动设置了 `typescript.typescriptPath`,它必须是指向 `typescript/package.json` 或 `@typescript/native-preview/package.json` 的绝对路径。
|
|
88
88
|
|
|
89
89
|
如需回退到经典 TypeScript 检查器,请将 `typescript.tsgo` 设置为 `false`,并确保项目中安装了 `typescript`:
|
|
90
90
|
|
|
@@ -4,7 +4,7 @@ sidebar_position: 2
|
|
|
4
4
|
|
|
5
5
|
# 路由基础
|
|
6
6
|
|
|
7
|
-
Modern.js 的约定式路由支持基于 [React Router
|
|
7
|
+
Modern.js 的约定式路由支持基于 [React Router](https://reactrouter.com/en/main) 和 [TanStack Router](https://tanstack.com/router) 两套框架,提供基于文件约定的路由能力,并支持业界流行的约定式路由模式:**嵌套路由**。当入口被识别为 [约定式路由](/guides/concept/entries.html#约定式路由) 时,Modern.js 会自动基于文件系统,生成对应的路由结构。
|
|
8
8
|
|
|
9
9
|
:::note
|
|
10
10
|
|
|
@@ -91,7 +91,7 @@ export default () => {
|
|
|
91
91
|
|
|
92
92
|
:::note
|
|
93
93
|
|
|
94
|
-
`<Outlet>` 是 React Router
|
|
94
|
+
`<Outlet>` 是 React Router 提供的 API,详情可以查看 [Outlet](https://reactrouter.com/en/main/components/outlet#outlet)。
|
|
95
95
|
|
|
96
96
|
:::
|
|
97
97
|
|
|
@@ -156,7 +156,7 @@ src/
|
|
|
156
156
|
│ └── App.tsx
|
|
157
157
|
```
|
|
158
158
|
|
|
159
|
-
以 `src/App.tsx` 为约定的入口,Modern.js 不会对路由做额外的操作,开发者可以使用 [React Router
|
|
159
|
+
以 `src/App.tsx` 为约定的入口,Modern.js 不会对路由做额外的操作,开发者可以使用 [React Router](https://reactrouter.com/en/main) 的 API 设置客户端路由,或不设置客户端路由。例如以下代码,在应用中自行设置了客户端路由:
|
|
160
160
|
|
|
161
161
|
```tsx title="src/App.tsx"
|
|
162
162
|
import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
|
|
@@ -19,7 +19,7 @@ Modern.js 底层的 Rsbuild 支持构建 Vue 应用,如果你需要使用 Vue
|
|
|
19
19
|
Modern.js 提供两套一方路由方案:
|
|
20
20
|
|
|
21
21
|
- 默认使用 [TanStack Router](https://tanstack.com/router),通过 `@modern-js/plugin-tanstack/runtime` 导出 API。
|
|
22
|
-
- 兼容 [React Router
|
|
22
|
+
- 兼容 [React Router](https://reactrouter.com/en/main),通过 `@modern-js/runtime/router` 导出 API。
|
|
23
23
|
|
|
24
24
|
创建 UltraModern 项目时,默认会包含 TanStack Router:
|
|
25
25
|
|
|
@@ -71,18 +71,52 @@ mise exec -- pnpm check
|
|
|
71
71
|
mise exec -- pnpm build
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
-
|
|
74
|
+
### 迁移到 `3.5.0-ultramodern.18`
|
|
75
|
+
|
|
76
|
+
本地化 Cloudflare SSR workspace 应使用 `3.5.0-ultramodern.18` 或更新版本。这个
|
|
77
|
+
cohort 将裸 locale root 重定向移动到框架拥有的 Cloudflare Worker entry 和 i18n
|
|
78
|
+
server runtime 中。请求 `/` 时,框架会按语言协商在服务端返回 `302`,例如
|
|
79
|
+
`Accept-Language: cs-CZ` 会跳转到 `/cs`,英语或 fallback 流量会跳转到 `/en`。
|
|
80
|
+
|
|
81
|
+
既有生成 workspace 应整体升级同一个 BleedingDev Modern package cohort:
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
pnpm dlx @bleedingdev/modern-js-create@3.5.0-ultramodern.18 ultramodern \
|
|
85
|
+
migrate-strict-effect --version 3.5.0-ultramodern.18
|
|
86
|
+
pnpm install
|
|
87
|
+
pnpm check
|
|
88
|
+
pnpm build
|
|
89
|
+
pnpm cloudflare:build
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Cloudflare Workers 已部署环境需要在 cohort 更新后重新部署,并在接受迁移前验证 root
|
|
93
|
+
响应:
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
curl -I -H 'Accept-Language: cs-CZ,cs;q=0.9,en;q=0.1' https://<worker-host>/
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
期望响应是 `302`,并带有 `Location: /cs` 或匹配的 locale、
|
|
100
|
+
`Cache-Control: private, no-store`,以及覆盖语言检测 Header 的 `Vary`。继续跟随该
|
|
101
|
+
redirect 后,应返回匹配语言的 SSR 页面,文档语言和 i18n SSR 数据也应一致。
|
|
102
|
+
|
|
103
|
+
不要通过 app 自有 root route、客户端 redirect、自定义导航 wrapper、Cloudflare Worker
|
|
104
|
+
postprocess、生成产物编辑或本地 redirect shim 来修复旧版本的 root `404`。如果升级后
|
|
105
|
+
`/` 仍然返回 `404`,先确认生产构建日志显示
|
|
106
|
+
`Modern.js Framework v3.5.0-ultramodern.18` 或更新版本,然后重新部署 Worker。
|
|
107
|
+
|
|
108
|
+
严格生成 API 迁移要求 `3.5.0-ultramodern.10` 或更新版本。
|
|
75
109
|
`3.4.0-ultramodern.20` 及更早 cohort 还没有这套完整的直接
|
|
76
110
|
`api/index.ts` 生成器、生成的 `.mts` 检查、严格 Oxlint 边界规则、Effect 版本组
|
|
77
111
|
overrides 和严格 Effect 迁移命令。还不能安装该 BleedingDev cohort 的 agent 应使用本地
|
|
78
112
|
Modern.js workspace 做迁移校验;否则用 `--ultramodern-package-version` 固定
|
|
79
|
-
`3.5.0-ultramodern.
|
|
113
|
+
`3.5.0-ultramodern.10` 或更新版本。
|
|
80
114
|
|
|
81
115
|
手写 package alias 或生成 metadata 之前,先在目标 workspace 运行框架迁移命令:
|
|
82
116
|
|
|
83
117
|
```bash
|
|
84
|
-
pnpm dlx @bleedingdev/modern-js-create@3.5.0-ultramodern.
|
|
85
|
-
migrate-strict-effect --version 3.5.0-ultramodern.
|
|
118
|
+
pnpm dlx @bleedingdev/modern-js-create@3.5.0-ultramodern.10 ultramodern \
|
|
119
|
+
migrate-strict-effect --version 3.5.0-ultramodern.10
|
|
86
120
|
pnpm api:check
|
|
87
121
|
pnpm contract:check
|
|
88
122
|
```
|
|
@@ -94,11 +128,12 @@ pnpm overrides/trust policy 和 pnpm lockfile。剩余失败就是源码迁移
|
|
|
94
128
|
`api/lambda`、`shared/effect` 和 `src/effect`。
|
|
95
129
|
|
|
96
130
|
严格 Effect 生成 workspace 会通过 pnpm overrides 固定兼容版本组:
|
|
97
|
-
`effect@4.0.0-beta.
|
|
98
|
-
overrides 冲突的 app 本地直接
|
|
99
|
-
`effect@4.0.0-beta.
|
|
100
|
-
|
|
101
|
-
|
|
131
|
+
`effect@4.0.0-beta.97`、`@effect/opentelemetry@4.0.0-beta.97` 和
|
|
132
|
+
`@effect/vitest@4.0.0-beta.97`。不要添加与这些 overrides 冲突的 app 本地直接
|
|
133
|
+
Effect 版本。生成的 pnpm policy 还会为 `effect@4.0.0-beta.97` 和
|
|
134
|
+
`@effect/opentelemetry@4.0.0-beta.97` 添加例外,避免框架选定的 Effect beta
|
|
135
|
+
版本组被 24 小时成熟期检查,或从 trusted-publisher metadata 迁移到 provenance
|
|
136
|
+
attestation 时被 no-downgrade 检查误拦截。
|
|
102
137
|
|
|
103
138
|
渐进迁移意味着尚未迁移的旧 Modern.js app 可以保留现有 runtime,直到被转换为
|
|
104
139
|
UltraModern。一个 surface 一旦生成为或迁移为 UltraModern HTTP API,就只能使用
|
|
@@ -151,8 +186,8 @@ API group layer 一起提供。
|
|
|
151
186
|
带有 Effect BFF 入口和 `verbatimModuleSyntax` 的旧仓库,应升级到最新的
|
|
152
187
|
BleedingDev cohort,而不是给 app package 增加 `"type": "module"`、Module
|
|
153
188
|
Federation shim 或自定义 server wrapper。框架 BFF compiler 会把服务端输出规范化为
|
|
154
|
-
CommonJS,同时生成的 app package
|
|
155
|
-
|
|
189
|
+
CommonJS,同时生成的 app package 会使用稳定版 TypeScript 7,让 Module Federation
|
|
190
|
+
DTS 与 TS-Go 检查走同一条现代 compiler 通道。
|
|
156
191
|
|
|
157
192
|
安装新 cohort 后,先运行生成的 `pnpm api:check` 与
|
|
158
193
|
`scripts/validate-ultramodern-workspace.mts` 契约校验,再接受人工改动。topology、
|
|
@@ -161,8 +196,9 @@ Federation 冲突,都应在对应归属文件中修复,不要手写补丁覆
|
|
|
161
196
|
|
|
162
197
|
Cloudflare D1 绑定使用一等配置 `deploy.worker.d1Databases`;生成 app 拥有 D1
|
|
163
198
|
migration 时不要再用 app 本地 postprocess。Cloudflare public output 默认排除服务端
|
|
164
|
-
`api` 和 `shared` 目录,并且生成的 Modern/Rspack
|
|
165
|
-
|
|
199
|
+
`api` 和 `shared` 目录,并且生成的 Modern/Rspack 输出根目录、temp 目录和 cache
|
|
200
|
+
会按 app、构建目标和 Rspack environment 隔离,避免本地 `build`、`cloudflare:build`
|
|
201
|
+
以及多 environment compiler 共享可变构建状态。
|
|
166
202
|
|
|
167
203
|
## 人类工作流
|
|
168
204
|
|
|
@@ -272,9 +308,8 @@ JSON 契约缺失或不是对象、Tailwind 前缀冲突,都会报告归属契
|
|
|
272
308
|
Overlays 是显式配置的 CodeSmith 生成器,会在基础 workspace 或 MicroVertical
|
|
273
309
|
生成之后运行。它们只扩展生成结果,不替换、不继承、也不遮蔽基础模板。公开生成器与
|
|
274
310
|
CodeSmith adapter 都是普通 Node 生成器入口。包构建通过 TS-Go 工具链产出声明文件;
|
|
275
|
-
生成出来的 app package
|
|
276
|
-
|
|
277
|
-
native-preview compiler 内部实现。
|
|
311
|
+
生成出来的 app package 会把稳定版 `typescript` 固定在 TS7,让 Module Federation
|
|
312
|
+
DTS 与 TS-Go 使用同一条 compiler 通道;运行时代码不依赖 compiler 内部实现。
|
|
278
313
|
|
|
279
314
|
### 运行时契约
|
|
280
315
|
|
|
@@ -298,7 +333,7 @@ JSON-LD。公开路由 owner 可以在本地化路径旁显式添加 `jsonLd`,
|
|
|
298
333
|
- `packages/shared-design-tokens` 拥有共享 token layer,并导出 `./tokens.css`。
|
|
299
334
|
- Shell CSS 只拥有 `[data-app-id="shell-super-app"]` 下的 shell base 和 overlay layer。
|
|
300
335
|
- 每个 vertical 拥有自己的 CSS layer,例如 `[data-app-id="vertical-transportation"]` 和应用本地 class 前缀。
|
|
301
|
-
- Tailwind CSS v4 通过 `@tailwindcss
|
|
336
|
+
- Tailwind CSS v4 通过 `@rsbuild/plugin-tailwindcss` 保持在每个生成应用内部;共享 base style 不应由 vertical 重复定义。
|
|
302
337
|
- SSR 首屏依赖 Modern/Rspack 产出共享 token CSS 和应用自己的 CSS。Vertical CSS 通过 manifest 归属加载,不复制到 shell 源码中。
|
|
303
338
|
|
|
304
339
|
版本切换必须从同一个 vertical build marker 选择 UI、API、CSS、i18n JSON 与 MF manifest 证据。只切换 shell 渲染里的 UI marker 不足以证明完整版本切换。
|
|
@@ -320,7 +355,7 @@ Zephyr 证据:
|
|
|
320
355
|
ULTRAMODERN_PUBLIC_URL_SHELL_SUPER_APP=https://shell-super-app.example.workers.dev \
|
|
321
356
|
ULTRAMODERN_PUBLIC_URL_TRANSPORTATION=https://transportation.example.workers.dev \
|
|
322
357
|
ULTRAMODERN_PUBLIC_URL_PAYMENTS=https://payments.example.workers.dev \
|
|
323
|
-
mise exec -- pnpm cloudflare:proof --
|
|
358
|
+
mise exec -- pnpm cloudflare:proof --require-public-urls
|
|
324
359
|
```
|
|
325
360
|
|
|
326
361
|
Live Cloudflare 与 Zephyr 证明需要公开 Worker URL 和 Zephyr 凭据。没有这些凭据时,
|
|
@@ -4,7 +4,7 @@ title: 路由鉴权
|
|
|
4
4
|
|
|
5
5
|
# 路由鉴权
|
|
6
6
|
|
|
7
|
-
Modern.js 默认提供的路由方式是基于 React Router
|
|
7
|
+
Modern.js 默认提供的路由方式是基于 React Router 的约定式路由,具体可查看[路由方案](/guides/basic-features/routes/routes#路由方案)。
|
|
8
8
|
|
|
9
9
|
在一个 Web 应用中如果存在多个路由,我们可能需要对部分路由进行鉴权后才能访问。例如下面这个案例:
|
|
10
10
|
|
package/package.json
CHANGED
|
@@ -19,32 +19,31 @@
|
|
|
19
19
|
"modern.js",
|
|
20
20
|
"ultramodern.js"
|
|
21
21
|
],
|
|
22
|
-
"version": "3.5.0-ultramodern.
|
|
22
|
+
"version": "3.5.0-ultramodern.75",
|
|
23
23
|
"publishConfig": {
|
|
24
|
-
"registry": "https://registry.npmjs.org/",
|
|
25
24
|
"access": "public"
|
|
26
25
|
},
|
|
27
26
|
"dependencies": {
|
|
28
|
-
"
|
|
29
|
-
"
|
|
27
|
+
"@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.5.0-ultramodern.75",
|
|
28
|
+
"mermaid": "^11.16.0"
|
|
30
29
|
},
|
|
31
30
|
"devDependencies": {
|
|
32
|
-
"@rsbuild/plugin-sass": "2.0.
|
|
33
|
-
"@rspress/core": "2.0.
|
|
34
|
-
"@rspress/plugin-llms": "2.0.
|
|
35
|
-
"@rspress/shared": "2.0.
|
|
36
|
-
"@shikijs/transformers": "^4.3.
|
|
31
|
+
"@rsbuild/plugin-sass": "2.0.1",
|
|
32
|
+
"@rspress/core": "2.0.17",
|
|
33
|
+
"@rspress/plugin-llms": "2.0.17",
|
|
34
|
+
"@rspress/shared": "2.0.17",
|
|
35
|
+
"@shikijs/transformers": "^4.3.1",
|
|
37
36
|
"@types/fs-extra": "11.0.4",
|
|
38
|
-
"@types/node": "^26.
|
|
39
|
-
"@typescript/native-preview": "7.0.0-dev.
|
|
37
|
+
"@types/node": "^26.1.1",
|
|
38
|
+
"@typescript/native-preview": "7.0.0-dev.20260707.2",
|
|
40
39
|
"classnames": "^2.5.1",
|
|
41
40
|
"clsx": "^2.1.1",
|
|
42
|
-
"fs-extra": "^11.3.
|
|
41
|
+
"fs-extra": "^11.3.6",
|
|
43
42
|
"react": "^19.2.7",
|
|
44
43
|
"react-dom": "^19.2.7",
|
|
45
44
|
"rsbuild-plugin-open-graph": "1.1.3",
|
|
46
45
|
"ts-node": "^10.9.2",
|
|
47
|
-
"typescript": "^
|
|
46
|
+
"typescript": "^7.0.2"
|
|
48
47
|
},
|
|
49
48
|
"scripts": {
|
|
50
49
|
"dev": "rspress dev",
|