@modern-js/main-doc 3.9.3 → 3.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/en/apis/app/hooks/api/lambda.mdx +2 -1
- package/docs/en/apis/app/hooks/config/html.mdx +1 -0
- package/docs/en/apis/app/hooks/config/mock.mdx +1 -0
- package/docs/en/apis/app/hooks/config/public.mdx +1 -0
- package/docs/en/apis/app/hooks/config/upload.mdx +2 -3
- package/docs/en/apis/app/hooks/modern-config.mdx +1 -0
- package/docs/en/apis/app/hooks/shared.mdx +1 -0
- package/docs/en/apis/app/hooks/src/modern.runtime.mdx +1 -0
- package/docs/en/apis/app/hooks/src/routes.mdx +1 -0
- package/docs/en/apis/app/hooks/src/server.mdx +2 -1
- package/docs/en/apis/app/runtime/bff/use-hono-context.mdx +1 -0
- package/docs/en/apis/app/runtime/core/create-root.mdx +4 -1
- package/docs/en/apis/app/runtime/core/render.mdx +6 -2
- package/docs/en/apis/app/runtime/core/runtime-context.mdx +17 -17
- package/docs/en/apis/app/runtime/router/router.mdx +9 -6
- package/docs/en/apis/app/runtime/ssr/no-ssr.mdx +1 -0
- package/docs/en/apis/app/runtime/utility/head.mdx +1 -0
- package/docs/en/apis/app/runtime/utility/loadable.mdx +1 -0
- package/docs/en/community/blog/v3-release-note.mdx +36 -27
- package/docs/en/community/contributing-guide.mdx +15 -33
- package/docs/en/components/default-browserslist.mdx +0 -1
- package/docs/en/components/deploy-command.mdx +1 -1
- package/docs/en/components/deploy.mdx +1 -1
- package/docs/en/components/entry-scan-logic.mdx +1 -1
- package/docs/en/components/init-app.mdx +9 -3
- package/docs/en/components/international/custom-instance-code.mdx +0 -1
- package/docs/en/components/micro-runtime-config.mdx +12 -9
- package/docs/en/components/nodeVersion.mdx +2 -2
- package/docs/en/components/rsc-deploy-tip.mdx +0 -1
- package/docs/en/components/ssr-monitor.mdx +1 -1
- package/docs/en/configure/app/bff/cross-project.mdx +2 -2
- package/docs/en/configure/app/bff/prefix.mdx +1 -1
- package/docs/en/configure/app/dev/lazy-compilation.mdx +17 -1
- package/docs/en/configure/app/dev/start-url.mdx +0 -1
- package/docs/en/configure/app/output/css-modules.mdx +1 -5
- package/docs/en/configure/app/output/dist-path.mdx +0 -1
- package/docs/en/configure/app/output/inline-scripts.mdx +1 -2
- package/docs/en/configure/app/output/inline-styles.mdx +1 -2
- package/docs/en/configure/app/output/split-route-chunks.mdx +1 -1
- package/docs/en/configure/app/output/ssg.mdx +1 -1
- package/docs/en/configure/app/output/ssgByEntries.mdx +1 -0
- package/docs/en/configure/app/performance/chunk-split.mdx +1 -4
- package/docs/en/configure/app/runtime/plugins.mdx +6 -4
- package/docs/en/configure/app/server/rsc.mdx +1 -1
- package/docs/en/configure/app/server/ssr.mdx +7 -8
- package/docs/en/configure/app/server/tsconfig-path.mdx +2 -2
- package/docs/en/configure/app/tools/less.mdx +5 -6
- package/docs/en/configure/app/tools/sass.mdx +5 -6
- package/docs/en/configure/app/tools/svgr.mdx +7 -7
- package/docs/en/configure/app/usage.mdx +1 -5
- package/docs/en/guides/advanced-features/bff/cross-project.mdx +5 -4
- package/docs/en/guides/advanced-features/compatibility.mdx +0 -1
- package/docs/en/guides/advanced-features/international/advanced.mdx +1 -1
- package/docs/en/guides/advanced-features/international/api.mdx +34 -28
- package/docs/en/guides/advanced-features/international/best-practices.mdx +15 -15
- package/docs/en/guides/advanced-features/international/configuration.mdx +37 -37
- package/docs/en/guides/advanced-features/international/locale-detection.mdx +37 -28
- package/docs/en/guides/advanced-features/international/resource-loading.mdx +19 -17
- package/docs/en/guides/advanced-features/international/routing.mdx +8 -6
- package/docs/en/guides/advanced-features/international.mdx +8 -8
- package/docs/en/guides/advanced-features/server-monitor/logger.mdx +5 -5
- package/docs/en/guides/advanced-features/server-monitor/metrics.mdx +8 -8
- package/docs/en/guides/advanced-features/server-monitor/monitors.mdx +1 -3
- package/docs/en/guides/advanced-features/source-build.mdx +1 -1
- package/docs/en/guides/advanced-features/web-server.mdx +3 -3
- package/docs/en/guides/basic-features/data/data-fetch.mdx +1 -3
- package/docs/en/guides/basic-features/data/data-write.mdx +24 -28
- package/docs/en/guides/basic-features/debug/mock.mdx +2 -2
- package/docs/en/guides/basic-features/debug/using-storybook.mdx +5 -6
- package/docs/en/guides/basic-features/html.mdx +2 -3
- package/docs/en/guides/basic-features/output-files.mdx +1 -1
- package/docs/en/guides/basic-features/render/overview.mdx +12 -12
- package/docs/en/guides/basic-features/render/rsc.mdx +16 -9
- package/docs/en/guides/basic-features/render/ssr-cache.mdx +5 -5
- package/docs/en/guides/basic-features/render/ssr.mdx +8 -12
- package/docs/en/guides/basic-features/render/streaming-ssr.mdx +2 -1
- package/docs/en/guides/basic-features/routes/config-routes.mdx +60 -59
- package/docs/en/guides/basic-features/testing/playwright.mdx +14 -8
- package/docs/en/guides/basic-features/testing/rstest.mdx +6 -4
- package/docs/en/guides/get-started/ai-coding-agents.mdx +6 -6
- package/docs/en/guides/get-started/introduction.mdx +0 -1
- package/docs/en/guides/topic-detail/module-federation/deploy.mdx +2 -2
- package/docs/en/guides/topic-detail/module-federation/introduce.mdx +0 -1
- package/docs/en/guides/upgrade/config.mdx +12 -0
- package/docs/en/guides/upgrade/other.mdx +4 -4
- package/docs/en/guides/upgrade/tailwindcss.mdx +0 -1
- package/docs/en/guides/upgrade/web-server.md +34 -17
- package/docs/en/index.md +1 -0
- package/docs/en/plugin/cli-plugins/api.mdx +23 -23
- package/docs/en/plugin/cli-plugins/life-cycle.mdx +2 -0
- package/docs/en/plugin/introduction.mdx +6 -6
- package/docs/en/plugin/official/cli-plugins/plugin-bff.mdx +1 -1
- package/docs/en/plugin/official/cli-plugins/plugin-ssg.mdx +1 -1
- package/docs/en/plugin/plugin-system.mdx +19 -26
- package/docs/en/plugin/runtime-plugins/life-cycle.mdx +2 -0
- package/docs/en/plugin/server-plugins/api.mdx +11 -14
- package/docs/en/plugin/server-plugins/life-cycle.mdx +2 -0
- package/docs/zh/apis/app/hooks/api/lambda.mdx +1 -1
- package/docs/zh/apis/app/hooks/config/html.mdx +1 -0
- package/docs/zh/apis/app/hooks/config/mock.mdx +1 -0
- package/docs/zh/apis/app/hooks/config/public.mdx +1 -0
- package/docs/zh/apis/app/hooks/config/upload.mdx +2 -3
- package/docs/zh/apis/app/hooks/modern-config.mdx +1 -0
- package/docs/zh/apis/app/hooks/shared.mdx +1 -0
- package/docs/zh/apis/app/hooks/src/modern.runtime.mdx +1 -0
- package/docs/zh/apis/app/hooks/src/routes.mdx +1 -0
- package/docs/zh/apis/app/hooks/src/server.mdx +2 -1
- package/docs/zh/apis/app/runtime/bff/use-hono-context.mdx +1 -1
- package/docs/zh/apis/app/runtime/core/create-root.mdx +4 -1
- package/docs/zh/apis/app/runtime/core/render.mdx +6 -3
- package/docs/zh/apis/app/runtime/core/runtime-context.mdx +17 -17
- package/docs/zh/apis/app/runtime/router/router.mdx +10 -6
- package/docs/zh/apis/app/runtime/ssr/no-ssr.mdx +1 -0
- package/docs/zh/apis/app/runtime/utility/head.mdx +1 -0
- package/docs/zh/apis/app/runtime/utility/loadable.mdx +1 -0
- package/docs/zh/community/blog/v3-release-note.mdx +38 -29
- package/docs/zh/community/contributing-guide.mdx +16 -34
- package/docs/zh/components/default-browserslist.mdx +0 -1
- package/docs/zh/components/deploy-command.mdx +1 -1
- package/docs/zh/components/deploy.mdx +1 -1
- package/docs/zh/components/entry-scan-logic.mdx +1 -1
- package/docs/zh/components/init-app.mdx +9 -3
- package/docs/zh/components/international/custom-instance-code.mdx +0 -1
- package/docs/zh/components/international/install-command.mdx +0 -1
- package/docs/zh/components/micro-runtime-config.mdx +12 -9
- package/docs/zh/components/nodeVersion.mdx +2 -2
- package/docs/zh/components/rsc-deploy-tip.mdx +0 -1
- package/docs/zh/components/ssr-monitor.mdx +1 -1
- package/docs/zh/configure/app/bff/cross-project.mdx +2 -2
- package/docs/zh/configure/app/bff/prefix.mdx +1 -1
- package/docs/zh/configure/app/dev/lazy-compilation.mdx +17 -1
- package/docs/zh/configure/app/html/crossorigin.mdx +0 -1
- package/docs/zh/configure/app/html/favicon.mdx +0 -1
- package/docs/zh/configure/app/output/convert-to-rem.mdx +0 -1
- package/docs/zh/configure/app/output/css-modules.mdx +1 -5
- package/docs/zh/configure/app/output/inline-scripts.mdx +1 -2
- package/docs/zh/configure/app/output/inline-styles.mdx +1 -2
- package/docs/zh/configure/app/output/source-map.mdx +0 -2
- package/docs/zh/configure/app/output/split-route-chunks.mdx +1 -1
- package/docs/zh/configure/app/output/ssg.mdx +1 -0
- package/docs/zh/configure/app/output/ssgByEntries.mdx +1 -1
- package/docs/zh/configure/app/performance/chunk-split.mdx +1 -4
- package/docs/zh/configure/app/resolve/dedupe.mdx +0 -1
- package/docs/zh/configure/app/runtime/plugins.mdx +6 -4
- package/docs/zh/configure/app/server/rsc.mdx +1 -1
- package/docs/zh/configure/app/server/ssr.mdx +6 -7
- package/docs/zh/configure/app/server/tsconfig-path.mdx +2 -2
- package/docs/zh/configure/app/tools/less.mdx +6 -7
- package/docs/zh/configure/app/tools/sass.mdx +6 -7
- package/docs/zh/configure/app/tools/svgr.mdx +11 -11
- package/docs/zh/configure/app/usage.mdx +1 -5
- package/docs/zh/guides/advanced-features/bff.mdx +1 -0
- package/docs/zh/guides/advanced-features/international/advanced.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/api.mdx +28 -27
- package/docs/zh/guides/advanced-features/international/best-practices.mdx +15 -15
- package/docs/zh/guides/advanced-features/international/configuration.mdx +38 -36
- package/docs/zh/guides/advanced-features/international/locale-detection.mdx +37 -28
- package/docs/zh/guides/advanced-features/international/resource-loading.mdx +20 -16
- package/docs/zh/guides/advanced-features/international/routing.mdx +6 -4
- package/docs/zh/guides/advanced-features/international.mdx +9 -9
- package/docs/zh/guides/advanced-features/server-monitor/logger.mdx +4 -6
- package/docs/zh/guides/advanced-features/server-monitor/metrics.mdx +9 -10
- package/docs/zh/guides/advanced-features/source-build.mdx +1 -1
- package/docs/zh/guides/advanced-features/web-server.mdx +3 -3
- package/docs/zh/guides/basic-features/data/data-fetch.mdx +1 -3
- package/docs/zh/guides/basic-features/data/data-write.mdx +25 -31
- package/docs/zh/guides/basic-features/debug/mock.mdx +2 -2
- package/docs/zh/guides/basic-features/debug/using-storybook.mdx +5 -5
- package/docs/zh/guides/basic-features/env-vars.mdx +0 -1
- package/docs/zh/guides/basic-features/html.mdx +2 -3
- package/docs/zh/guides/basic-features/render/overview.mdx +12 -13
- package/docs/zh/guides/basic-features/render/rsc.mdx +16 -9
- package/docs/zh/guides/basic-features/render/ssr.mdx +8 -17
- package/docs/zh/guides/basic-features/routes/config-routes.mdx +61 -59
- package/docs/zh/guides/basic-features/testing/playwright.mdx +15 -10
- package/docs/zh/guides/basic-features/testing/rstest.mdx +6 -4
- package/docs/zh/guides/get-started/ai-coding-agents.mdx +7 -7
- package/docs/zh/guides/topic-detail/module-federation/deploy.mdx +2 -2
- package/docs/zh/guides/upgrade/config.mdx +12 -0
- package/docs/zh/guides/upgrade/other.md +4 -11
- package/docs/zh/guides/upgrade/overview.mdx +1 -4
- package/docs/zh/guides/upgrade/tailwindcss.mdx +0 -1
- package/docs/zh/guides/upgrade/web-server.md +34 -19
- package/docs/zh/index.md +1 -0
- package/docs/zh/plugin/cli-plugins/api.mdx +24 -24
- package/docs/zh/plugin/cli-plugins/life-cycle.mdx +2 -0
- package/docs/zh/plugin/introduction.mdx +6 -6
- package/docs/zh/plugin/official/cli-plugins/plugin-bff.mdx +1 -1
- package/docs/zh/plugin/official/cli-plugins/plugin-ssg.mdx +1 -1
- package/docs/zh/plugin/plugin-system.mdx +19 -26
- package/docs/zh/plugin/runtime-plugins/life-cycle.mdx +2 -0
- package/docs/zh/plugin/server-plugins/api.mdx +11 -14
- package/docs/zh/plugin/server-plugins/life-cycle.mdx +2 -0
- package/package.json +11 -13
- package/{rspress.config.ts → rstack.config.mts} +7 -10
- package/src/components/Footer/styles.module.scss +1 -1
- package/src/components/SolutionCards/index.module.scss +3 -1
|
@@ -6,10 +6,10 @@ title: Configuration
|
|
|
6
6
|
|
|
7
7
|
Plugin configuration is split between two files, each with a different responsibility:
|
|
8
8
|
|
|
9
|
-
| File
|
|
10
|
-
|
|
|
11
|
-
| `modern.config.ts`
|
|
12
|
-
| `src/modern.runtime.ts` | i18next initialization options, read at runtime
|
|
9
|
+
| File | Purpose |
|
|
10
|
+
| ----------------------- | ------------------------------------------------ |
|
|
11
|
+
| `modern.config.ts` | Basic plugin settings, read during build/startup |
|
|
12
|
+
| `src/modern.runtime.ts` | i18next initialization options, read at runtime |
|
|
13
13
|
|
|
14
14
|
:::warning Function values can only be configured at runtime
|
|
15
15
|
`modern.config.ts` runs at build time and cannot serialize functions. SDK loaders, custom detection functions, and similar function values must be placed in `modern.runtime.ts`.
|
|
@@ -17,13 +17,13 @@ Plugin configuration is split between two files, each with a different responsib
|
|
|
17
17
|
|
|
18
18
|
## Configuration Ownership
|
|
19
19
|
|
|
20
|
-
| Configuration
|
|
21
|
-
|
|
|
22
|
-
| `localeDetection` (language detection, path redirects, etc.)
|
|
23
|
-
| `backend` (resource paths, SDK declaration, etc.)
|
|
24
|
-
| `i18nInstance`
|
|
20
|
+
| Configuration | Where to configure |
|
|
21
|
+
| -------------------------------------------------------------- | ------------------- |
|
|
22
|
+
| `localeDetection` (language detection, path redirects, etc.) | `modern.config.ts` |
|
|
23
|
+
| `backend` (resource paths, SDK declaration, etc.) | `modern.config.ts` |
|
|
24
|
+
| `i18nInstance` | `modern.runtime.ts` |
|
|
25
25
|
| `initOptions` (`fallbackLng`, `ns`, and other i18next options) | `modern.runtime.ts` |
|
|
26
|
-
| The actual `backend.sdk` loader function
|
|
26
|
+
| The actual `backend.sdk` loader function | `modern.runtime.ts` |
|
|
27
27
|
|
|
28
28
|
## CLI Configuration
|
|
29
29
|
|
|
@@ -44,15 +44,15 @@ export default defineConfig({
|
|
|
44
44
|
|
|
45
45
|
### localeDetection Options
|
|
46
46
|
|
|
47
|
-
| Field
|
|
48
|
-
|
|
|
49
|
-
| `languages`
|
|
50
|
-
| `fallbackLanguage`
|
|
51
|
-
| `localePathRedirect`
|
|
52
|
-
| `i18nextDetector`
|
|
53
|
-
| `detection`
|
|
54
|
-
| `ignoreRedirectRoutes`
|
|
55
|
-
| `localeDetectionByEntry` | `Record<string, ...>`
|
|
47
|
+
| Field | Type | Default | Description |
|
|
48
|
+
| ------------------------ | ------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
49
|
+
| `languages` | `string[]` | `[]` | Supported language list |
|
|
50
|
+
| `fallbackLanguage` | `string` | `''` | Fallback language when detection fails |
|
|
51
|
+
| `localePathRedirect` | `boolean` | `false` | Handles URL locale prefix recognition, redirects, and switching. See [Routing Integration](./routing.md#enable-locale-path-prefixes) |
|
|
52
|
+
| `i18nextDetector` | `boolean` | `false` | Enables the i18next detector (Cookie / Header, etc.) |
|
|
53
|
+
| `detection` | `LanguageDetectorOptions` | - | Detailed i18next detector configuration. See [Locale Detection](./locale-detection.md) |
|
|
54
|
+
| `ignoreRedirectRoutes` | `string[] \| Function` | - | Routes that skip redirects. See [Locale Detection](./locale-detection.md#ignoreredirectroutes) |
|
|
55
|
+
| `localeDetectionByEntry` | `Record<string, ...>` | - | Per-entry overrides for multiple entries |
|
|
56
56
|
|
|
57
57
|
**Example:**
|
|
58
58
|
|
|
@@ -105,11 +105,11 @@ interface BackendOptions {
|
|
|
105
105
|
|
|
106
106
|
**backend auto-enable rules:**
|
|
107
107
|
|
|
108
|
-
| Situation
|
|
109
|
-
|
|
|
110
|
-
| `loadPath` or `addPath` is configured
|
|
111
|
-
| No backend is configured, but a `locales` directory exists and contains JSON files | Automatically enabled with the default `loadPath`
|
|
112
|
-
| `enabled: false` is set explicitly
|
|
108
|
+
| Situation | Result |
|
|
109
|
+
| ---------------------------------------------------------------------------------- | ------------------------------------------------------- |
|
|
110
|
+
| `loadPath` or `addPath` is configured | Automatically enabled. No need to write `enabled: true` |
|
|
111
|
+
| No backend is configured, but a `locales` directory exists and contains JSON files | Automatically enabled with the default `loadPath` |
|
|
112
|
+
| `enabled: false` is set explicitly | Disabled, and auto-detection is skipped |
|
|
113
113
|
|
|
114
114
|
Auto-detected directory locations, in priority order:
|
|
115
115
|
|
|
@@ -118,11 +118,11 @@ Auto-detected directory locations, in priority order:
|
|
|
118
118
|
|
|
119
119
|
**Which backend should you choose?**
|
|
120
120
|
|
|
121
|
-
| Scenario
|
|
122
|
-
|
|
|
123
|
-
| Translation files are local to the project
|
|
124
|
-
| Translations come from a remote API or translation platform | Custom backend (configure `sdk: true`)
|
|
125
|
-
| Local fallback + remote real-time updates
|
|
121
|
+
| Scenario | Recommended approach |
|
|
122
|
+
| ----------------------------------------------------------- | ------------------------------------------------------------------------ |
|
|
123
|
+
| Translation files are local to the project | Static file backend (configure `loadPath`; CSR/SSR switch automatically) |
|
|
124
|
+
| Translations come from a remote API or translation platform | Custom backend (configure `sdk: true`) |
|
|
125
|
+
| Local fallback + remote real-time updates | Chained backend (configure both `loadPath` and `sdk`) |
|
|
126
126
|
|
|
127
127
|
See [Resource Loading](./resource-loading.md) for detailed usage.
|
|
128
128
|
|
|
@@ -136,7 +136,7 @@ const i18nInstance = i18next.createInstance();
|
|
|
136
136
|
|
|
137
137
|
export default defineRuntimeConfig({
|
|
138
138
|
i18n: {
|
|
139
|
-
i18nInstance,
|
|
139
|
+
i18nInstance, // Optional. An isolated instance is recommended.
|
|
140
140
|
initOptions: {
|
|
141
141
|
fallbackLng: 'en',
|
|
142
142
|
supportedLngs: ['zh', 'en'],
|
|
@@ -164,13 +164,13 @@ import Desc from '@site-docs/components/international/init-options-desc';
|
|
|
164
164
|
|
|
165
165
|
<Desc />
|
|
166
166
|
|
|
167
|
-
| Field
|
|
168
|
-
|
|
|
169
|
-
| `fallbackLng`
|
|
170
|
-
| `supportedLngs` | Language list supported by i18next
|
|
171
|
-
| `ns`
|
|
172
|
-
| `defaultNS`
|
|
173
|
-
| `lng`
|
|
167
|
+
| Field | Description |
|
|
168
|
+
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
169
|
+
| `fallbackLng` | Which language resources i18next falls back to when a translation key is missing. Supports strings, arrays, and maps (fallback chains) |
|
|
170
|
+
| `supportedLngs` | Language list supported by i18next |
|
|
171
|
+
| `ns` | Namespace list. Default is `['translation']` |
|
|
172
|
+
| `defaultNS` | Default namespace. Default is `'translation'` |
|
|
173
|
+
| `lng` | Forces the initial language. Usually not needed because the detector decides it |
|
|
174
174
|
|
|
175
175
|
`fallbackLng` supports fallback chains, which are useful for regional language degradation:
|
|
176
176
|
|
|
@@ -64,8 +64,8 @@ Both methods can be enabled at the same time:
|
|
|
64
64
|
```ts
|
|
65
65
|
i18nPlugin({
|
|
66
66
|
localeDetection: {
|
|
67
|
-
localePathRedirect: true,
|
|
68
|
-
i18nextDetector: true,
|
|
67
|
+
localePathRedirect: true, // Path prefix
|
|
68
|
+
i18nextDetector: true, // Cookie / Header, etc.
|
|
69
69
|
languages: ['zh', 'en'],
|
|
70
70
|
fallbackLanguage: 'en',
|
|
71
71
|
detection: {
|
|
@@ -77,39 +77,48 @@ i18nPlugin({
|
|
|
77
77
|
|
|
78
78
|
## Detection Options (`detection`)
|
|
79
79
|
|
|
80
|
-
| Option
|
|
81
|
-
|
|
|
82
|
-
| `order`
|
|
83
|
-
| `lookupQuerystring`
|
|
84
|
-
| `lookupCookie`
|
|
85
|
-
| `lookupLocalStorage`
|
|
86
|
-
| `lookupSession`
|
|
87
|
-
| `lookupHeader`
|
|
88
|
-
| `lookupFromPathIndex`
|
|
89
|
-
| `caches`
|
|
90
|
-
| `cookieMinutes`
|
|
91
|
-
| `cookieExpirationDate` | `Date`
|
|
92
|
-
| `cookieDomain`
|
|
80
|
+
| Option | Type | Default | Description |
|
|
81
|
+
| ---------------------- | ------------------- | ------------------- | ------------------------------------------------------------- |
|
|
82
|
+
| `order` | `string[]` | See below | Detection order inside the i18next detector |
|
|
83
|
+
| `lookupQuerystring` | `string` | `'lng'` | Query parameter key, such as `?lng=en` |
|
|
84
|
+
| `lookupCookie` | `string` | `'i18next'` | Cookie key |
|
|
85
|
+
| `lookupLocalStorage` | `string` | `'i18nextLng'` | LocalStorage key (browser only) |
|
|
86
|
+
| `lookupSession` | `string` | - | SessionStorage key (browser only) |
|
|
87
|
+
| `lookupHeader` | `string` | `'accept-language'` | HTTP request header key |
|
|
88
|
+
| `lookupFromPathIndex` | `number` | `0` | Which URL path segment to start recognizing language from |
|
|
89
|
+
| `caches` | `false \| string[]` | - | Where to cache the detected language, such as `['cookie']` |
|
|
90
|
+
| `cookieMinutes` | `number` | `525600` (1 year) | Cookie expiration time in minutes |
|
|
91
|
+
| `cookieExpirationDate` | `Date` | - | Cookie expiration date. Takes precedence over `cookieMinutes` |
|
|
92
|
+
| `cookieDomain` | `string` | - | Cookie domain |
|
|
93
93
|
|
|
94
94
|
**Default detection order when `order` is not configured:**
|
|
95
95
|
|
|
96
96
|
```ts
|
|
97
|
-
[
|
|
97
|
+
[
|
|
98
|
+
'querystring',
|
|
99
|
+
'cookie',
|
|
100
|
+
'localStorage',
|
|
101
|
+
'header',
|
|
102
|
+
'navigator',
|
|
103
|
+
'htmlTag',
|
|
104
|
+
'path',
|
|
105
|
+
'subdomain',
|
|
106
|
+
];
|
|
98
107
|
```
|
|
99
108
|
|
|
100
109
|
**Available `order` values:**
|
|
101
110
|
|
|
102
|
-
| Value
|
|
103
|
-
|
|
|
104
|
-
| `querystring`
|
|
105
|
-
| `cookie`
|
|
106
|
-
| `localStorage`
|
|
107
|
-
| `sessionStorage` | SessionStorage
|
|
108
|
-
| `navigator`
|
|
109
|
-
| `htmlTag`
|
|
110
|
-
| `header`
|
|
111
|
-
| `path`
|
|
112
|
-
| `subdomain`
|
|
111
|
+
| Value | Source | Limitation |
|
|
112
|
+
| ---------------- | ---------------------------------------- | ------------ |
|
|
113
|
+
| `querystring` | URL query parameter (`?lng=en`) | - |
|
|
114
|
+
| `cookie` | Cookie | - |
|
|
115
|
+
| `localStorage` | LocalStorage | Browser only |
|
|
116
|
+
| `sessionStorage` | SessionStorage | Browser only |
|
|
117
|
+
| `navigator` | Browser language settings | Browser only |
|
|
118
|
+
| `htmlTag` | `<html lang="...">` | Browser only |
|
|
119
|
+
| `header` | `Accept-Language` request header | - |
|
|
120
|
+
| `path` | URL path (requires `localePathRedirect`) | - |
|
|
121
|
+
| `subdomain` | Subdomain (`en.example.com`) | - |
|
|
113
122
|
|
|
114
123
|
## ignoreRedirectRoutes
|
|
115
124
|
|
|
@@ -118,7 +127,7 @@ Specify which paths should skip locale path redirects. This is useful for API ro
|
|
|
118
127
|
**Syntax 1: string array** (supports exact match and prefix match)
|
|
119
128
|
|
|
120
129
|
```ts
|
|
121
|
-
ignoreRedirectRoutes: ['/api', '/admin', '/static']
|
|
130
|
+
ignoreRedirectRoutes: ['/api', '/admin', '/static'];
|
|
122
131
|
// '/api' matches both /api and /api/users.
|
|
123
132
|
```
|
|
124
133
|
|
|
@@ -6,11 +6,11 @@ title: Resource Loading
|
|
|
6
6
|
|
|
7
7
|
How translation files are loaded depends on where your translation resources are stored:
|
|
8
8
|
|
|
9
|
-
| Scenario
|
|
10
|
-
|
|
|
11
|
-
| Translation files are local to the project
|
|
12
|
-
| Translations come from a remote API or translation platform | Custom backend
|
|
13
|
-
| Both: local fallback + remote real-time updates
|
|
9
|
+
| Scenario | Loading method |
|
|
10
|
+
| ----------------------------------------------------------- | ------------------------------------------------------ |
|
|
11
|
+
| Translation files are local to the project | Static file backend (the default method in this guide) |
|
|
12
|
+
| Translations come from a remote API or translation platform | Custom backend |
|
|
13
|
+
| Both: local fallback + remote real-time updates | Chained backend |
|
|
14
14
|
|
|
15
15
|
## Static File Backend
|
|
16
16
|
|
|
@@ -103,11 +103,11 @@ export default defineRuntimeConfig({
|
|
|
103
103
|
|
|
104
104
|
```ts
|
|
105
105
|
interface I18nSdkLoadOptions {
|
|
106
|
-
lng?: string;
|
|
107
|
-
ns?: string;
|
|
108
|
-
lngs?: string[];
|
|
109
|
-
nss?: string[];
|
|
110
|
-
all?: boolean;
|
|
106
|
+
lng?: string; // Single language code
|
|
107
|
+
ns?: string; // Single namespace
|
|
108
|
+
lngs?: string[]; // Multiple language codes
|
|
109
|
+
nss?: string[]; // Multiple namespaces
|
|
110
|
+
all?: boolean; // Load all resources
|
|
111
111
|
}
|
|
112
112
|
```
|
|
113
113
|
|
|
@@ -125,7 +125,7 @@ Use local files and a custom backend together to implement "show local translati
|
|
|
125
125
|
i18nPlugin({
|
|
126
126
|
backend: {
|
|
127
127
|
loadPath: '/locales/{{lng}}/{{ns}}.json', // Local files, fast display
|
|
128
|
-
sdk: true,
|
|
128
|
+
sdk: true, // Remote loading, async update
|
|
129
129
|
},
|
|
130
130
|
});
|
|
131
131
|
```
|
|
@@ -138,7 +138,9 @@ export default defineRuntimeConfig({
|
|
|
138
138
|
backend: {
|
|
139
139
|
sdk: async options => {
|
|
140
140
|
if (options.lng && options.ns) {
|
|
141
|
-
const res = await fetch(
|
|
141
|
+
const res = await fetch(
|
|
142
|
+
`https://api.example.com/i18n/${options.lng}/${options.ns}`,
|
|
143
|
+
);
|
|
142
144
|
return { [options.lng]: { [options.ns]: await res.json() } };
|
|
143
145
|
}
|
|
144
146
|
return {};
|
|
@@ -151,8 +153,8 @@ export default defineRuntimeConfig({
|
|
|
151
153
|
|
|
152
154
|
**`cacheHitMode` option** (controls how the two backends cooperate):
|
|
153
155
|
|
|
154
|
-
| Value
|
|
155
|
-
|
|
|
156
|
-
| `'none'`
|
|
157
|
-
| `'refresh'`
|
|
158
|
-
| `'refreshAndUpdateStore'` | Continue requesting the custom backend, update cache, and refresh page text (default)
|
|
156
|
+
| Value | Behavior |
|
|
157
|
+
| ------------------------- | ------------------------------------------------------------------------------------------- |
|
|
158
|
+
| `'none'` | Use local files after a successful local hit and do not request the custom backend |
|
|
159
|
+
| `'refresh'` | Continue requesting the custom backend and update cache, but do not update the current page |
|
|
160
|
+
| `'refreshAndUpdateStore'` | Continue requesting the custom backend, update cache, and refresh page text (default) |
|
|
@@ -26,11 +26,11 @@ i18nPlugin({
|
|
|
26
26
|
|
|
27
27
|
**Result:**
|
|
28
28
|
|
|
29
|
-
| Visited path | Result
|
|
30
|
-
|
|
|
31
|
-
| `/about`
|
|
32
|
-
| `/en/about`
|
|
33
|
-
| `/zh/about`
|
|
29
|
+
| Visited path | Result |
|
|
30
|
+
| ------------ | --------------------------------- |
|
|
31
|
+
| `/about` | Redirects to `/en/about` |
|
|
32
|
+
| `/en/about` | Visits normally, language is `en` |
|
|
33
|
+
| `/zh/about` | Visits normally, language is `zh` |
|
|
34
34
|
|
|
35
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).
|
|
36
36
|
|
|
@@ -108,7 +108,9 @@ function Navigation() {
|
|
|
108
108
|
<nav>
|
|
109
109
|
<I18nLink to="/">Home</I18nLink>
|
|
110
110
|
<I18nLink to="/about">About</I18nLink>
|
|
111
|
-
<I18nLink to="/contact" replace>
|
|
111
|
+
<I18nLink to="/contact" replace>
|
|
112
|
+
Contact
|
|
113
|
+
</I18nLink>
|
|
112
114
|
</nav>
|
|
113
115
|
);
|
|
114
116
|
}
|
|
@@ -10,15 +10,15 @@ import I18nPluginIntroduce from '@site-docs/components/international/introduce';
|
|
|
10
10
|
|
|
11
11
|
## Where to start?
|
|
12
12
|
|
|
13
|
-
| What you want to do
|
|
14
|
-
|
|
|
15
|
-
| Integrate for the first time and run an example
|
|
16
|
-
| Learn all configuration options
|
|
17
|
-
| Detect language from URL / Cookie / Header
|
|
18
|
-
| Implement paths with locale prefixes, such as `/en/about`
|
|
13
|
+
| What you want to do | Documentation |
|
|
14
|
+
| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
|
|
15
|
+
| Integrate for the first time and run an example | [Quick Start](./international/quick-start.md) |
|
|
16
|
+
| Learn all configuration options | [Configuration](./international/configuration.md) |
|
|
17
|
+
| Detect language from URL / Cookie / Header | [Locale Detection](./international/locale-detection.md) |
|
|
18
|
+
| Implement paths with locale prefixes, such as `/en/about` | [Routing Integration](./international/routing.md) |
|
|
19
19
|
| Load translation resources from a remote service or platform | [Resource Loading -> Custom Backend](./international/resource-loading.md#custom-backend) |
|
|
20
|
-
| SSR, multiple entries, or custom instances
|
|
21
|
-
| Look up Hooks / components / type definitions
|
|
20
|
+
| SSR, multiple entries, or custom instances | [Advanced Usage](./international/advanced.md) |
|
|
21
|
+
| Look up Hooks / components / type definitions | [API Reference](./international/api.md) |
|
|
22
22
|
|
|
23
23
|
## Core Capabilities
|
|
24
24
|
|
|
@@ -6,11 +6,11 @@ Log events are distributed by Modern.js as events of type `log`.
|
|
|
6
6
|
|
|
7
7
|
Based on server-side runtime logic, Modern.js provides the following log events:
|
|
8
8
|
|
|
9
|
-
| Stage
|
|
10
|
-
|
|
|
11
|
-
| RENDER_HTML
|
|
12
|
-
| RENDER_STREAM
|
|
13
|
-
| RENDER_SHELL
|
|
9
|
+
| Stage | Message | Level |
|
|
10
|
+
| ------------- | --------------------------------------------- | ----- |
|
|
11
|
+
| RENDER_HTML | App Render To HTML | error |
|
|
12
|
+
| RENDER_STREAM | An error occurs during streaming SSR | error |
|
|
13
|
+
| RENDER_SHELL | An error occurs during streaming render shell | error |
|
|
14
14
|
|
|
15
15
|
## Built-in Monitor
|
|
16
16
|
|
|
@@ -8,15 +8,15 @@ When SSR is enabled, we need to monitor server-side phase durations and have the
|
|
|
8
8
|
|
|
9
9
|
Based on server-side runtime logic, Modern.js provides the following metric events:
|
|
10
10
|
|
|
11
|
-
| Key | Description
|
|
12
|
-
| ------------------------ |
|
|
13
|
-
| server-handle-request | Modern.js Server request handling duration
|
|
11
|
+
| Key | Description |
|
|
12
|
+
| ------------------------ | --------------------------------------------------------------------------------------------------------------------- |
|
|
13
|
+
| server-handle-request | Modern.js Server request handling duration |
|
|
14
14
|
| ssr-render-shell | [SSR] When using Streaming SSR, React renders a shell for early streaming. This marks shell rendering completion time |
|
|
15
|
-
| ssr-render-html | [SSR] Time taken by React to render component tree to HTML (typically under 50ms)
|
|
16
|
-
| server-middleware | Total execution time of Modern.js custom server middlewares
|
|
17
|
-
| server-loader | Server-side Data Loader total duration
|
|
18
|
-
| server-loader-#id | Individual Data Loader durations on server-side
|
|
19
|
-
| server-loader-navigation | Server-side Data Loader duration during client navigation
|
|
15
|
+
| ssr-render-html | [SSR] Time taken by React to render component tree to HTML (typically under 50ms) |
|
|
16
|
+
| server-middleware | Total execution time of Modern.js custom server middlewares |
|
|
17
|
+
| server-loader | Server-side Data Loader total duration |
|
|
18
|
+
| server-loader-#id | Individual Data Loader durations on server-side |
|
|
19
|
+
| server-loader-navigation | Server-side Data Loader duration during client navigation |
|
|
20
20
|
|
|
21
21
|
Modern.js server workflow diagram:
|
|
22
22
|
|
|
@@ -129,9 +129,7 @@ const myMonitorPlugin = (): ServerPlugin => ({
|
|
|
129
129
|
console.log(`[${event.payload.level}] ${event.payload.message}`);
|
|
130
130
|
} else if (event.type === 'timing') {
|
|
131
131
|
// Handle timing events
|
|
132
|
-
console.log(
|
|
133
|
-
`Timing: ${event.payload.name} = ${event.payload.dur}ms`,
|
|
134
|
-
);
|
|
132
|
+
console.log(`Timing: ${event.payload.name} = ${event.payload.dur}ms`);
|
|
135
133
|
} else if (event.type === 'counter') {
|
|
136
134
|
// Handle counter events
|
|
137
135
|
console.log(`Counter: ${event.payload.name}`);
|
|
@@ -50,13 +50,13 @@ After creating the file, you can write custom logic in this file.
|
|
|
50
50
|
|
|
51
51
|
3. Include `server` directory in `tsconfig.json`
|
|
52
52
|
|
|
53
|
-
```
|
|
53
|
+
```jsonc
|
|
54
54
|
{
|
|
55
55
|
// ...
|
|
56
56
|
"include": [
|
|
57
57
|
// ...
|
|
58
|
-
"server"
|
|
59
|
-
]
|
|
58
|
+
"server",
|
|
59
|
+
],
|
|
60
60
|
}
|
|
61
61
|
```
|
|
62
62
|
|
|
@@ -24,9 +24,7 @@ Modern.js recommends managing routes using [conventional routing](/guides/basic-
|
|
|
24
24
|
In the `routes/user/page.data.ts` file, you can export a Data Loader function:
|
|
25
25
|
|
|
26
26
|
```ts title="routes/user/page.data.ts"
|
|
27
|
-
export type ProfileData = {
|
|
28
|
-
/* some types */
|
|
29
|
-
};
|
|
27
|
+
export type ProfileData = {/* some types */};
|
|
30
28
|
|
|
31
29
|
export const loader = async (): Promise<ProfileData> => {
|
|
32
30
|
const res = await fetch('https://api/user/profile');
|
|
@@ -42,7 +42,7 @@ import {
|
|
|
42
42
|
useFetcher,
|
|
43
43
|
useLoaderData,
|
|
44
44
|
useParams,
|
|
45
|
-
Outlet
|
|
45
|
+
Outlet,
|
|
46
46
|
} from '@modern-js/runtime/router';
|
|
47
47
|
|
|
48
48
|
export default () => {
|
|
@@ -50,23 +50,21 @@ export default () => {
|
|
|
50
50
|
const { submit } = useFetcher();
|
|
51
51
|
const editUser = () => {
|
|
52
52
|
const newUser = {
|
|
53
|
-
name: 'Modern.js'
|
|
54
|
-
}
|
|
53
|
+
name: 'Modern.js',
|
|
54
|
+
};
|
|
55
55
|
return submit(newUser, {
|
|
56
56
|
method: 'post',
|
|
57
57
|
encType: 'application/json',
|
|
58
|
-
})
|
|
59
|
-
}
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
60
|
return (
|
|
61
61
|
<div>
|
|
62
62
|
<button onClick={editUser}>edit user</button>
|
|
63
|
-
<div className="user-profile">
|
|
64
|
-
{userInfo}
|
|
65
|
-
</div>
|
|
63
|
+
<div className="user-profile">{userInfo}</div>
|
|
66
64
|
<Outlet context={userInfo}></Outlet>
|
|
67
65
|
</div>
|
|
68
|
-
)
|
|
69
|
-
}
|
|
66
|
+
);
|
|
67
|
+
};
|
|
70
68
|
```
|
|
71
69
|
|
|
72
70
|
After executing `submit`, the defined `action` function will be triggered. You can get the submitted data from the [parameters](/guides/basic-features/data/data-write.html#parameters) in the `action` function and ultimately send the data to the server.
|
|
@@ -123,17 +121,18 @@ useSubmit:
|
|
|
123
121
|
|
|
124
122
|
```ts
|
|
125
123
|
const submit = useSubmit();
|
|
126
|
-
submit(null, { method:
|
|
124
|
+
submit(null, { method: 'post', action: '/logout' });
|
|
127
125
|
```
|
|
128
126
|
|
|
129
127
|
useFetcher:
|
|
130
128
|
|
|
131
129
|
```ts
|
|
132
130
|
const { submit } = useFetcher();
|
|
133
|
-
submit(null, { method:
|
|
131
|
+
submit(null, { method: 'post', action: '/logout' });
|
|
134
132
|
```
|
|
135
133
|
|
|
136
134
|
The `submit` function takes two parameters. The first parameter is the `formData` passed to the server. The second parameter is an optional object where:
|
|
135
|
+
|
|
137
136
|
- `method` corresponds to the form submission method. In most data writing scenarios, you can set the `method` to `post`.
|
|
138
137
|
- `action` specifies the route component to trigger the Data Action. If not provided, it defaults to the current route component's action. For example, executing submit in `user/page.tsx` or its sub-components will trigger the action defined in `user/page.data.ts`.
|
|
139
138
|
|
|
@@ -151,7 +150,7 @@ For example, `FormData`:
|
|
|
151
150
|
|
|
152
151
|
```ts
|
|
153
152
|
let formData = new FormData();
|
|
154
|
-
formData.append(
|
|
153
|
+
formData.append('cheese', 'gouda');
|
|
155
154
|
submit(formData);
|
|
156
155
|
// In the action, you can get the data by request.json
|
|
157
156
|
```
|
|
@@ -160,7 +159,7 @@ or `URLSearchParams`:
|
|
|
160
159
|
|
|
161
160
|
```ts
|
|
162
161
|
let searchParams = new URLSearchParams();
|
|
163
|
-
searchParams.append(
|
|
162
|
+
searchParams.append('cheese', 'gouda');
|
|
164
163
|
submit(searchParams);
|
|
165
164
|
// In the action, you can get the data by request.json
|
|
166
165
|
```
|
|
@@ -168,10 +167,10 @@ submit(searchParams);
|
|
|
168
167
|
or any value that the `URLSearchParams` constructor accepts:
|
|
169
168
|
|
|
170
169
|
```ts
|
|
171
|
-
submit(
|
|
170
|
+
submit('cheese=gouda&toasted=yes');
|
|
172
171
|
submit([
|
|
173
|
-
[
|
|
174
|
-
[
|
|
172
|
+
['cheese', 'gouda'],
|
|
173
|
+
['toasted', 'yes'],
|
|
175
174
|
]);
|
|
176
175
|
// In the action, you can get the data by request.json
|
|
177
176
|
```
|
|
@@ -180,11 +179,11 @@ By default, if the first parameter of the `submit` function is an object, the co
|
|
|
180
179
|
|
|
181
180
|
```ts
|
|
182
181
|
submit(
|
|
183
|
-
{ key:
|
|
182
|
+
{ key: 'value' },
|
|
184
183
|
{
|
|
185
|
-
method:
|
|
186
|
-
encType:
|
|
187
|
-
}
|
|
184
|
+
method: 'post',
|
|
185
|
+
encType: 'application/x-www-form-urlencoded',
|
|
186
|
+
},
|
|
188
187
|
);
|
|
189
188
|
|
|
190
189
|
// In the action, you can get the data by request.formData
|
|
@@ -193,14 +192,11 @@ submit(
|
|
|
193
192
|
You can also specify the encoding type via the second parameter:
|
|
194
193
|
|
|
195
194
|
```tsx
|
|
196
|
-
submit(
|
|
197
|
-
{ key: "value" },
|
|
198
|
-
{ method: "post", encType: "application/json" }
|
|
199
|
-
);
|
|
195
|
+
submit({ key: 'value' }, { method: 'post', encType: 'application/json' });
|
|
200
196
|
|
|
201
197
|
submit('{"key":"value"}', {
|
|
202
|
-
method:
|
|
203
|
-
encType:
|
|
198
|
+
method: 'post',
|
|
199
|
+
encType: 'application/json',
|
|
204
200
|
});
|
|
205
201
|
|
|
206
202
|
// In the action, you can get the data by request.json
|
|
@@ -209,7 +205,7 @@ submit('{"key":"value"}', {
|
|
|
209
205
|
or submit plain text:
|
|
210
206
|
|
|
211
207
|
```ts
|
|
212
|
-
submit(
|
|
208
|
+
submit('value', { method: 'post', encType: 'text/plain' });
|
|
213
209
|
// In the action, you can get the data by request.text
|
|
214
210
|
```
|
|
215
211
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
sidebar_position: 15
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
import { PackageManagerTabs } from '@theme'
|
|
5
|
+
import { PackageManagerTabs } from '@theme';
|
|
6
6
|
|
|
7
7
|
# Using Storybook
|
|
8
8
|
|
|
@@ -33,17 +33,16 @@ You need to install `@rsbuild/core` in your project, otherwise the plugin may no
|
|
|
33
33
|
## Configure `.storybook/main.ts`
|
|
34
34
|
|
|
35
35
|
```ts
|
|
36
|
-
import type { StorybookConfig } from 'storybook-react-rsbuild'
|
|
36
|
+
import type { StorybookConfig } from 'storybook-react-rsbuild';
|
|
37
37
|
|
|
38
38
|
const config: StorybookConfig = {
|
|
39
39
|
stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
|
40
40
|
addons: ['storybook-addon-modernjs'],
|
|
41
41
|
framework: 'storybook-react-rsbuild',
|
|
42
|
-
}
|
|
43
|
-
export default config
|
|
42
|
+
};
|
|
43
|
+
export default config;
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
-
|
|
47
46
|
## BFF Integrated Calls in Storybook
|
|
48
47
|
|
|
49
48
|
When you want to call BFF APIs directly in Storybook components (for example `/api/**`), start the BFF service and configure a proxy in Storybook's dev server to avoid CORS issues.
|
|
@@ -56,7 +55,7 @@ Add the following scripts to `package.json` to start the BFF server and Storyboo
|
|
|
56
55
|
{
|
|
57
56
|
"scripts": {
|
|
58
57
|
"dev:api": "modern dev --api-only",
|
|
59
|
-
"storybook": "BFF_PROXY=1 storybook dev -p 6006 --no-open"
|
|
58
|
+
"storybook": "BFF_PROXY=1 storybook dev -p 6006 --no-open"
|
|
60
59
|
}
|
|
61
60
|
}
|
|
62
61
|
```
|
|
@@ -19,9 +19,8 @@ For example, consider the following directory structure:
|
|
|
19
19
|
├── entry-a
|
|
20
20
|
│ ├── Document.tsx
|
|
21
21
|
│ └── routes
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
└── modern-app-env.d.ts
|
|
22
|
+
└── entry-b
|
|
23
|
+
└── routes
|
|
25
24
|
```
|
|
26
25
|
|
|
27
26
|
`entry-a` will use the `Document.tsx` file under the current entry as the template. If there is no `Document.tsx` file under the current entry, like `entry-b`, it will look for the `Document.tsx` file under the root directory.
|