@modern-js/app-tools 3.9.2 → 3.10.0
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/dist/cjs/builder/shared/bundlerPlugins/HtmlAsyncChunkPlugin.js +54 -2
- package/dist/cjs/commands/build.js +1 -2
- package/dist/cjs/commands/deploy.js +1 -3
- package/dist/cjs/commands/index.js +4 -0
- package/dist/cjs/compat/hooks.js +0 -5
- package/dist/cjs/compat/index.js +0 -5
- package/dist/cjs/compat/utils.js +0 -5
- package/dist/cjs/index.js +15 -39
- package/dist/cjs/plugins/analyze/index.js +2 -2
- package/dist/cjs/plugins/analyze/utils.js +2 -3
- package/dist/cjs/plugins/initialize/index.js +3 -5
- package/dist/esm/builder/shared/bundlerPlugins/HtmlAsyncChunkPlugin.mjs +54 -2
- package/dist/esm/commands/build.mjs +1 -2
- package/dist/esm/commands/deploy.mjs +1 -3
- package/dist/esm/commands/index.mjs +4 -0
- package/dist/esm/compat/hooks.mjs +0 -5
- package/dist/esm/compat/index.mjs +0 -5
- package/dist/esm/compat/utils.mjs +0 -5
- package/dist/esm/index.mjs +2 -10
- package/dist/esm/plugins/analyze/index.mjs +2 -2
- package/dist/esm/plugins/analyze/utils.mjs +2 -3
- package/dist/esm/plugins/initialize/index.mjs +3 -5
- package/dist/esm-node/builder/shared/bundlerPlugins/HtmlAsyncChunkPlugin.mjs +54 -2
- package/dist/esm-node/commands/build.mjs +1 -2
- package/dist/esm-node/commands/deploy.mjs +1 -3
- package/dist/esm-node/commands/index.mjs +4 -0
- package/dist/esm-node/compat/hooks.mjs +0 -5
- package/dist/esm-node/compat/index.mjs +0 -5
- package/dist/esm-node/compat/utils.mjs +0 -5
- package/dist/esm-node/index.mjs +2 -10
- package/dist/esm-node/plugins/analyze/index.mjs +2 -2
- package/dist/esm-node/plugins/analyze/utils.mjs +2 -3
- package/dist/esm-node/plugins/initialize/index.mjs +3 -5
- package/dist/types/index.d.ts +1 -3
- package/dist/types/plugins/analyze/utils.d.ts +1 -1
- package/dist/types/types/config/index.d.ts +0 -2
- package/dist/types/types/config/tools.d.ts +0 -8
- package/docs/apis/app/commands.md +2 -0
- package/docs/apis/app/hooks/api/lambda.md +2 -0
- package/docs/apis/app/hooks/config/favicon.md +2 -0
- package/docs/apis/app/hooks/config/html.md +2 -0
- package/docs/apis/app/hooks/config/icon.md +2 -0
- package/docs/apis/app/hooks/config/mock.md +2 -0
- package/docs/apis/app/hooks/config/public.md +2 -0
- package/docs/apis/app/hooks/config/upload.md +3 -3
- package/docs/apis/app/hooks/modern-config.md +2 -0
- package/docs/apis/app/hooks/server/server.md +2 -0
- package/docs/apis/app/hooks/shared.md +2 -0
- package/docs/apis/app/hooks/src/app.md +2 -0
- package/docs/apis/app/hooks/src/entry.md +2 -0
- package/docs/apis/app/hooks/src/entry.server.md +2 -0
- package/docs/apis/app/hooks/src/modern.runtime.md +2 -0
- package/docs/apis/app/hooks/src/routes.md +2 -0
- package/docs/apis/app/hooks/src/server.md +2 -0
- package/docs/apis/app/runtime/bff/use-hono-context.md +2 -0
- package/docs/apis/app/runtime/core/create-root.md +5 -1
- package/docs/apis/app/runtime/core/render.md +7 -2
- package/docs/apis/app/runtime/core/runtime-context.md +18 -16
- package/docs/apis/app/runtime/router/router.md +11 -6
- package/docs/apis/app/runtime/ssr/no-ssr.md +2 -0
- package/docs/apis/app/runtime/ssr/renderStreaming.md +2 -0
- package/docs/apis/app/runtime/ssr/renderString.md +2 -0
- package/docs/apis/app/runtime/ssr/requestHandler.md +2 -0
- package/docs/apis/app/runtime/utility/css-in-js.md +2 -0
- package/docs/apis/app/runtime/utility/head.md +2 -0
- package/docs/apis/app/runtime/utility/loadable.md +2 -0
- package/docs/community/blog/2022-0708-updates.md +2 -0
- package/docs/community/blog/2022-0910-updates.md +2 -0
- package/docs/community/blog/overview.md +2 -0
- package/docs/community/blog/v2-release-note.md +2 -0
- package/docs/community/blog/v3-release-note.md +18 -13
- package/docs/community/contributing-guide.md +17 -33
- package/docs/community/releases.md +2 -0
- package/docs/community/showcase.md +2 -0
- package/docs/community/team.md +2 -0
- package/docs/configure/app/bff/cross-project.md +2 -0
- package/docs/configure/app/bff/prefix.md +2 -0
- package/docs/configure/app/builder-plugins.md +2 -0
- package/docs/configure/app/dev/asset-prefix.md +2 -0
- package/docs/configure/app/dev/before-start-url.md +2 -0
- package/docs/configure/app/dev/client.md +2 -0
- package/docs/configure/app/dev/hmr.md +2 -0
- package/docs/configure/app/dev/host.md +2 -0
- package/docs/configure/app/dev/https.md +2 -0
- package/docs/configure/app/dev/lazy-compilation.md +19 -1
- package/docs/configure/app/dev/live-reload.md +2 -0
- package/docs/configure/app/dev/mock-dir.md +2 -0
- package/docs/configure/app/dev/progress-bar.md +2 -0
- package/docs/configure/app/dev/server.md +2 -0
- package/docs/configure/app/dev/setup-middlewares.md +2 -0
- package/docs/configure/app/dev/start-url.md +2 -0
- package/docs/configure/app/dev/watch-files.md +2 -0
- package/docs/configure/app/dev/write-to-disk.md +2 -0
- package/docs/configure/app/experiments/source-build.md +2 -0
- package/docs/configure/app/html/app-icon.md +2 -0
- package/docs/configure/app/html/crossorigin.md +2 -0
- package/docs/configure/app/html/favicon.md +2 -0
- package/docs/configure/app/html/inject.md +2 -0
- package/docs/configure/app/html/meta.md +2 -0
- package/docs/configure/app/html/mount-id.md +2 -0
- package/docs/configure/app/html/output-structure.md +2 -0
- package/docs/configure/app/html/script-loading.md +2 -0
- package/docs/configure/app/html/tags.md +2 -0
- package/docs/configure/app/html/template-parameters.md +2 -0
- package/docs/configure/app/html/template.md +2 -0
- package/docs/configure/app/html/title.md +2 -0
- package/docs/configure/app/output/asset-prefix.md +2 -0
- package/docs/configure/app/output/assets-retry.md +2 -0
- package/docs/configure/app/output/charset.md +2 -0
- package/docs/configure/app/output/clean-dist-path.md +2 -0
- package/docs/configure/app/output/convert-to-rem.md +2 -0
- package/docs/configure/app/output/copy.md +2 -0
- package/docs/configure/app/output/css-modules.md +3 -5
- package/docs/configure/app/output/data-uri-limit.md +2 -0
- package/docs/configure/app/output/disable-css-module-extension.md +2 -0
- package/docs/configure/app/output/disable-inline-runtime-chunk.md +2 -0
- package/docs/configure/app/output/disable-svgr.md +6 -0
- package/docs/configure/app/output/disable-ts-checker.md +2 -0
- package/docs/configure/app/output/dist-path.md +2 -0
- package/docs/configure/app/output/enable-asset-manifest.md +2 -0
- package/docs/configure/app/output/enable-css-module-tsdeclaration.md +2 -0
- package/docs/configure/app/output/enable-inline-route-manifests.md +2 -0
- package/docs/configure/app/output/externals.md +2 -0
- package/docs/configure/app/output/filename-hash.md +2 -0
- package/docs/configure/app/output/filename.md +2 -0
- package/docs/configure/app/output/inject-styles.md +2 -0
- package/docs/configure/app/output/inline-scripts.md +3 -2
- package/docs/configure/app/output/inline-styles.md +3 -2
- package/docs/configure/app/output/legal-comments.md +2 -0
- package/docs/configure/app/output/minify.md +2 -0
- package/docs/configure/app/output/override-browserslist.md +2 -0
- package/docs/configure/app/output/polyfill.md +2 -0
- package/docs/configure/app/output/source-map.md +2 -0
- package/docs/configure/app/output/split-route-chunks.md +3 -1
- package/docs/configure/app/output/ssg.md +2 -0
- package/docs/configure/app/output/ssgByEntries.md +2 -0
- package/docs/configure/app/output/svg-default-export.md +6 -0
- package/docs/configure/app/output/temp-dir.md +2 -0
- package/docs/configure/app/performance/build-cache.md +2 -0
- package/docs/configure/app/performance/chunk-split.md +3 -4
- package/docs/configure/app/performance/dns-prefetch.md +2 -0
- package/docs/configure/app/performance/preconnect.md +2 -0
- package/docs/configure/app/performance/prefetch.md +2 -0
- package/docs/configure/app/performance/preload.md +2 -0
- package/docs/configure/app/performance/print-file-size.md +2 -0
- package/docs/configure/app/performance/profile.md +2 -0
- package/docs/configure/app/performance/remove-console.md +2 -0
- package/docs/configure/app/performance/remove-moment-locale.md +2 -0
- package/docs/configure/app/plugins.md +2 -0
- package/docs/configure/app/resolve/alias-strategy.md +2 -0
- package/docs/configure/app/resolve/alias.md +2 -0
- package/docs/configure/app/resolve/condition-names.md +2 -0
- package/docs/configure/app/resolve/dedupe.md +2 -0
- package/docs/configure/app/resolve/extensions.md +2 -0
- package/docs/configure/app/runtime/0-intro.md +2 -0
- package/docs/configure/app/runtime/plugins.md +8 -4
- package/docs/configure/app/runtime/router.md +2 -0
- package/docs/configure/app/security/check-syntax.md +2 -0
- package/docs/configure/app/security/nonce.md +2 -0
- package/docs/configure/app/security/sri.md +2 -0
- package/docs/configure/app/server/base-url.md +2 -0
- package/docs/configure/app/server/port.md +2 -0
- package/docs/configure/app/server/public-routes.md +2 -0
- package/docs/configure/app/server/routes.md +2 -0
- package/docs/configure/app/server/rsc.md +2 -0
- package/docs/configure/app/server/ssr-by-entries.md +2 -0
- package/docs/configure/app/server/ssr.md +3 -1
- package/docs/configure/app/server/tsconfig-path.md +4 -2
- package/docs/configure/app/source/alias-strategy.md +2 -0
- package/docs/configure/app/source/alias.md +2 -0
- package/docs/configure/app/source/config-dir.md +2 -0
- package/docs/configure/app/source/decorators.md +2 -0
- package/docs/configure/app/source/define.md +2 -0
- package/docs/configure/app/source/disable-default-entries.md +2 -0
- package/docs/configure/app/source/enable-async-entry.md +2 -0
- package/docs/configure/app/source/enable-async-pre-entry.md +2 -0
- package/docs/configure/app/source/entries-dir.md +2 -0
- package/docs/configure/app/source/entries.md +2 -0
- package/docs/configure/app/source/exclude.md +2 -0
- package/docs/configure/app/source/global-vars.md +2 -0
- package/docs/configure/app/source/include.md +2 -0
- package/docs/configure/app/source/main-entry-name.md +2 -0
- package/docs/configure/app/source/pre-entry.md +2 -0
- package/docs/configure/app/source/react-compiler.md +2 -0
- package/docs/configure/app/source/transform-import.md +2 -0
- package/docs/configure/app/split-chunks.md +2 -0
- package/docs/configure/app/tools/autoprefixer.md +2 -0
- package/docs/configure/app/tools/bundler-chain.md +2 -0
- package/docs/configure/app/tools/css-extract.md +2 -0
- package/docs/configure/app/tools/css-loader.md +2 -0
- package/docs/configure/app/tools/dev-server.md +2 -0
- package/docs/configure/app/tools/html-plugin.md +2 -0
- package/docs/configure/app/tools/less.md +96 -19
- package/docs/configure/app/tools/lightningcss-loader.md +2 -0
- package/docs/configure/app/tools/minify-css.md +2 -0
- package/docs/configure/app/tools/postcss.md +2 -0
- package/docs/configure/app/tools/rspack.md +2 -0
- package/docs/configure/app/tools/sass.md +89 -18
- package/docs/configure/app/tools/style-loader.md +2 -0
- package/docs/configure/app/tools/svgr.md +91 -0
- package/docs/configure/app/tools/swc.md +2 -0
- package/docs/configure/app/tools/ts-checker.md +2 -0
- package/docs/configure/app/usage.md +3 -5
- package/docs/guides/advanced-features/bff/cross-project.md +6 -4
- package/docs/guides/advanced-features/bff/extend-server.md +2 -0
- package/docs/guides/advanced-features/bff/frameworks.md +2 -0
- package/docs/guides/advanced-features/bff/function.md +2 -0
- package/docs/guides/advanced-features/bff/operators.md +2 -0
- package/docs/guides/advanced-features/bff/sdk.md +2 -0
- package/docs/guides/advanced-features/bff/upload.md +2 -0
- package/docs/guides/advanced-features/bff.md +2 -0
- package/docs/guides/advanced-features/build-performance.md +2 -0
- package/docs/guides/advanced-features/compatibility.md +2 -0
- package/docs/guides/advanced-features/international/advanced.md +3 -1
- package/docs/guides/advanced-features/international/api.md +21 -13
- package/docs/guides/advanced-features/international/best-practices.md +17 -15
- package/docs/guides/advanced-features/international/configuration.md +3 -1
- package/docs/guides/advanced-features/international/locale-detection.md +15 -4
- package/docs/guides/advanced-features/international/quick-start.md +2 -0
- package/docs/guides/advanced-features/international/resource-loading.md +11 -7
- package/docs/guides/advanced-features/international/routing.md +5 -1
- package/docs/guides/advanced-features/international.md +2 -0
- package/docs/guides/advanced-features/low-level.md +2 -0
- package/docs/guides/advanced-features/page-performance/code-split.md +2 -0
- package/docs/guides/advanced-features/page-performance/inline-assets.md +2 -0
- package/docs/guides/advanced-features/page-performance/optimize-bundle.md +2 -0
- package/docs/guides/advanced-features/page-performance/react-compiler.md +2 -0
- package/docs/guides/advanced-features/server-monitor/logger.md +2 -0
- package/docs/guides/advanced-features/server-monitor/metrics.md +2 -0
- package/docs/guides/advanced-features/server-monitor/monitors.md +3 -3
- package/docs/guides/advanced-features/source-build.md +3 -1
- package/docs/guides/advanced-features/web-server.md +5 -3
- package/docs/guides/basic-features/alias.md +2 -0
- package/docs/guides/basic-features/css/css-in-js.md +2 -0
- package/docs/guides/basic-features/css/css-modules.md +2 -0
- package/docs/guides/basic-features/css/css.md +2 -0
- package/docs/guides/basic-features/css/tailwindcss.md +2 -0
- package/docs/guides/basic-features/data/data-cache.md +2 -0
- package/docs/guides/basic-features/data/data-fetch.md +3 -3
- package/docs/guides/basic-features/data/data-write.md +25 -28
- package/docs/guides/basic-features/debug/mock.md +4 -2
- package/docs/guides/basic-features/debug/proxy.md +2 -0
- package/docs/guides/basic-features/debug/rsdoctor.md +2 -0
- package/docs/guides/basic-features/debug/using-storybook.md +6 -4
- package/docs/guides/basic-features/deploy.md +2 -0
- package/docs/guides/basic-features/env-vars.md +2 -0
- package/docs/guides/basic-features/html.md +4 -3
- package/docs/guides/basic-features/output-files.md +3 -1
- package/docs/guides/basic-features/render/before-render.md +2 -0
- package/docs/guides/basic-features/render/overview.md +2 -0
- package/docs/guides/basic-features/render/rsc.md +12 -2
- package/docs/guides/basic-features/render/ssg.md +2 -0
- package/docs/guides/basic-features/render/ssr-cache.md +2 -0
- package/docs/guides/basic-features/render/ssr.md +10 -12
- package/docs/guides/basic-features/render/streaming-ssr.md +4 -1
- package/docs/guides/basic-features/routes/config-routes.md +54 -54
- package/docs/guides/basic-features/routes/routes.md +2 -0
- package/docs/guides/basic-features/static-assets/json-files.md +2 -0
- package/docs/guides/basic-features/static-assets/svg-assets.md +31 -17
- package/docs/guides/basic-features/static-assets/wasm-assets.md +2 -0
- package/docs/guides/basic-features/static-assets.md +2 -0
- package/docs/guides/basic-features/testing/playwright.md +8 -6
- package/docs/guides/basic-features/testing/rstest.md +7 -5
- package/docs/guides/concept/builder.md +2 -0
- package/docs/guides/concept/entries.md +2 -0
- package/docs/guides/concept/server.md +2 -0
- package/docs/guides/get-started/ai-coding-agents.md +5 -3
- package/docs/guides/get-started/glossary.md +2 -0
- package/docs/guides/get-started/introduction.md +2 -0
- package/docs/guides/get-started/quick-start.md +13 -5
- package/docs/guides/get-started/tech-stack.md +2 -0
- package/docs/guides/get-started/upgrade.md +2 -0
- package/docs/guides/topic-detail/module-federation/application.md +2 -0
- package/docs/guides/topic-detail/module-federation/deploy.md +4 -2
- package/docs/guides/topic-detail/module-federation/i18n.md +2 -0
- package/docs/guides/topic-detail/module-federation/introduce.md +2 -0
- package/docs/guides/topic-detail/module-federation/ssr.md +2 -0
- package/docs/guides/topic-detail/module-federation/usage.md +2 -0
- package/docs/guides/troubleshooting/builder.md +2 -0
- package/docs/guides/troubleshooting/cli.md +2 -0
- package/docs/guides/troubleshooting/dependencies.md +2 -0
- package/docs/guides/troubleshooting/hmr.md +2 -0
- package/docs/guides/upgrade/config.md +14 -0
- package/docs/guides/upgrade/entry.md +2 -0
- package/docs/guides/upgrade/other.md +2 -0
- package/docs/guides/upgrade/overview.md +2 -0
- package/docs/guides/upgrade/tailwindcss.md +2 -0
- package/docs/guides/upgrade/web-server.md +25 -6
- package/docs/index.md +2 -0
- package/docs/llms.txt +8 -7
- package/docs/plugin/cli-plugins/api.md +2 -0
- package/docs/plugin/cli-plugins/life-cycle.md +2 -0
- package/docs/plugin/introduction.md +12 -10
- package/docs/plugin/official/cli-plugins/plugin-bff.md +2 -0
- package/docs/plugin/official/cli-plugins/plugin-ssg.md +2 -0
- package/docs/plugin/official/cli-plugins/plugin-styled-components.md +2 -0
- package/docs/plugin/official/cli-plugins.md +2 -0
- package/docs/plugin/plugin-system.md +3 -3
- package/docs/plugin/runtime-plugins/api.md +2 -0
- package/docs/plugin/runtime-plugins/life-cycle.md +2 -0
- package/docs/plugin/server-plugins/api.md +2 -0
- package/docs/plugin/server-plugins/life-cycle.md +2 -0
- package/docs/tutorials/examples/csr-auth.md +2 -0
- package/docs/tutorials/foundations/introduction.md +2 -0
- package/lib/types.d.ts +0 -1
- package/package.json +18 -19
- package/{rslib.config.mts → rstack.config.mts} +4 -4
- package/dist/cjs/types/config/testing.js +0 -18
- package/dist/esm/types/config/testing.mjs +0 -0
- package/dist/esm-node/types/config/testing.mjs +0 -1
- package/dist/types/types/config/testing.d.ts +0 -8
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Best Practices
|
|
2
4
|
|
|
3
5
|
## Resource File Organization
|
|
@@ -59,8 +61,8 @@ function ButtonGroup() {
|
|
|
59
61
|
const { t } = useTranslation('common', { keyPrefix: 'button' });
|
|
60
62
|
return (
|
|
61
63
|
<>
|
|
62
|
-
<button>{t('submit')}</button>
|
|
63
|
-
<button>{t('cancel')}</button>
|
|
64
|
+
<button>{t('submit')}</button> {/* common:button.submit */}
|
|
65
|
+
<button>{t('cancel')}</button> {/* common:button.cancel */}
|
|
64
66
|
</>
|
|
65
67
|
);
|
|
66
68
|
}
|
|
@@ -90,9 +92,9 @@ The quality of translation key names directly affects maintenance cost. Recommen
|
|
|
90
92
|
```
|
|
91
93
|
|
|
92
94
|
```tsx
|
|
93
|
-
t('page.title')
|
|
94
|
-
t('form.username.label')
|
|
95
|
-
t('form.submit', { defaultValue: 'Save' }) // defaultValue prevents showing the key string when the key is missing.
|
|
95
|
+
t('page.title');
|
|
96
|
+
t('form.username.label');
|
|
97
|
+
t('form.submit', { defaultValue: 'Save' }); // defaultValue prevents showing the key string when the key is missing.
|
|
96
98
|
```
|
|
97
99
|
|
|
98
100
|
## Plurals
|
|
@@ -117,9 +119,9 @@ i18next automatically selects the correct plural form based on the `count` param
|
|
|
117
119
|
```
|
|
118
120
|
|
|
119
121
|
```tsx
|
|
120
|
-
t('item', { count: 0 })
|
|
121
|
-
t('item', { count: 1 })
|
|
122
|
-
t('item', { count: 5 })
|
|
122
|
+
t('item', { count: 0 }); // "没有条目" / "No items"
|
|
123
|
+
t('item', { count: 1 }); // "没有条目" / "1 item" (Chinese usually has only one form)
|
|
124
|
+
t('item', { count: 5 }); // "5 个条目" / "5 items"
|
|
123
125
|
```
|
|
124
126
|
|
|
125
127
|
Different languages have different plural rules. English has singular and plural, while Russian has one/few/many forms. i18next automatically matches CLDR rules based on the language code.
|
|
@@ -148,8 +150,8 @@ Nested structures can clearly reflect UI hierarchy and are accessed with dots:
|
|
|
148
150
|
```
|
|
149
151
|
|
|
150
152
|
```tsx
|
|
151
|
-
t('modal.confirm.title')
|
|
152
|
-
t('modal.confirm.actions.ok')
|
|
153
|
+
t('modal.confirm.title');
|
|
154
|
+
t('modal.confirm.actions.ok');
|
|
153
155
|
```
|
|
154
156
|
|
|
155
157
|
Avoid nesting deeper than 4 levels. Excessive depth makes key names long and hard to maintain.
|
|
@@ -195,8 +197,8 @@ Use `, format` in translation files to specify the formatting type:
|
|
|
195
197
|
```
|
|
196
198
|
|
|
197
199
|
```tsx
|
|
198
|
-
t('price', { value: 99.5 })
|
|
199
|
-
t('expiry', { date: new Date() }) // "到期日:2025年5月12日" (zh)
|
|
200
|
+
t('price', { value: 99.5 }); // "当前价格:¥99.50" (zh) / "$99.50" (en)
|
|
201
|
+
t('expiry', { date: new Date() }); // "到期日:2025年5月12日" (zh)
|
|
200
202
|
```
|
|
201
203
|
|
|
202
204
|
## Error Handling
|
|
@@ -233,7 +235,7 @@ if (!i18n.isInitialized) return null;
|
|
|
233
235
|
Provide fallback text with `defaultValue` to prevent key strings from appearing in the UI:
|
|
234
236
|
|
|
235
237
|
```tsx
|
|
236
|
-
t('missing.key', { defaultValue: 'Default text' })
|
|
238
|
+
t('missing.key', { defaultValue: 'Default text' });
|
|
237
239
|
```
|
|
238
240
|
|
|
239
241
|
In development, you can enable `saveMissing` to output missing keys to the console for debugging:
|
|
@@ -277,8 +279,8 @@ Referencing JSON file types directly is less likely to drift from actual transla
|
|
|
277
279
|
|
|
278
280
|
```tsx
|
|
279
281
|
const { t } = useTranslation();
|
|
280
|
-
t('welcome');
|
|
281
|
-
t('nonExistent');
|
|
282
|
+
t('welcome'); // TypeScript autocomplete
|
|
283
|
+
t('nonExistent'); // TypeScript error
|
|
282
284
|
```
|
|
283
285
|
|
|
284
286
|
:::tip Large projects
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Configuration
|
|
2
4
|
|
|
3
5
|
Plugin configuration is split between two files, each with a different responsibility:
|
|
@@ -132,7 +134,7 @@ const i18nInstance = i18next.createInstance();
|
|
|
132
134
|
|
|
133
135
|
export default defineRuntimeConfig({
|
|
134
136
|
i18n: {
|
|
135
|
-
i18nInstance,
|
|
137
|
+
i18nInstance, // Optional. An isolated instance is recommended.
|
|
136
138
|
initOptions: {
|
|
137
139
|
fallbackLng: 'en',
|
|
138
140
|
supportedLngs: ['zh', 'en'],
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Locale Detection
|
|
2
4
|
|
|
3
5
|
Locale detection means automatically inferring which language to use when the user has not manually selected one. The plugin can detect language from URL path, Cookie, request headers, browser settings, and other sources, and these methods can be combined.
|
|
@@ -60,8 +62,8 @@ Both methods can be enabled at the same time:
|
|
|
60
62
|
```ts
|
|
61
63
|
i18nPlugin({
|
|
62
64
|
localeDetection: {
|
|
63
|
-
localePathRedirect: true,
|
|
64
|
-
i18nextDetector: true,
|
|
65
|
+
localePathRedirect: true, // Path prefix
|
|
66
|
+
i18nextDetector: true, // Cookie / Header, etc.
|
|
65
67
|
languages: ['zh', 'en'],
|
|
66
68
|
fallbackLanguage: 'en',
|
|
67
69
|
detection: {
|
|
@@ -90,7 +92,16 @@ i18nPlugin({
|
|
|
90
92
|
**Default detection order when `order` is not configured:**
|
|
91
93
|
|
|
92
94
|
```ts
|
|
93
|
-
[
|
|
95
|
+
[
|
|
96
|
+
'querystring',
|
|
97
|
+
'cookie',
|
|
98
|
+
'localStorage',
|
|
99
|
+
'header',
|
|
100
|
+
'navigator',
|
|
101
|
+
'htmlTag',
|
|
102
|
+
'path',
|
|
103
|
+
'subdomain',
|
|
104
|
+
];
|
|
94
105
|
```
|
|
95
106
|
|
|
96
107
|
**Available `order` values:**
|
|
@@ -114,7 +125,7 @@ Specify which paths should skip locale path redirects. This is useful for API ro
|
|
|
114
125
|
**Syntax 1: string array** (supports exact match and prefix match)
|
|
115
126
|
|
|
116
127
|
```ts
|
|
117
|
-
ignoreRedirectRoutes: ['/api', '/admin', '/static']
|
|
128
|
+
ignoreRedirectRoutes: ['/api', '/admin', '/static'];
|
|
118
129
|
// '/api' matches both /api and /api/users.
|
|
119
130
|
```
|
|
120
131
|
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Resource Loading
|
|
2
4
|
|
|
3
5
|
How translation files are loaded depends on where your translation resources are stored:
|
|
@@ -99,11 +101,11 @@ export default defineRuntimeConfig({
|
|
|
99
101
|
|
|
100
102
|
```ts
|
|
101
103
|
interface I18nSdkLoadOptions {
|
|
102
|
-
lng?: string;
|
|
103
|
-
ns?: string;
|
|
104
|
-
lngs?: string[];
|
|
105
|
-
nss?: string[];
|
|
106
|
-
all?: boolean;
|
|
104
|
+
lng?: string; // Single language code
|
|
105
|
+
ns?: string; // Single namespace
|
|
106
|
+
lngs?: string[]; // Multiple language codes
|
|
107
|
+
nss?: string[]; // Multiple namespaces
|
|
108
|
+
all?: boolean; // Load all resources
|
|
107
109
|
}
|
|
108
110
|
```
|
|
109
111
|
|
|
@@ -121,7 +123,7 @@ Use local files and a custom backend together to implement "show local translati
|
|
|
121
123
|
i18nPlugin({
|
|
122
124
|
backend: {
|
|
123
125
|
loadPath: '/locales/{{lng}}/{{ns}}.json', // Local files, fast display
|
|
124
|
-
sdk: true,
|
|
126
|
+
sdk: true, // Remote loading, async update
|
|
125
127
|
},
|
|
126
128
|
});
|
|
127
129
|
```
|
|
@@ -134,7 +136,9 @@ export default defineRuntimeConfig({
|
|
|
134
136
|
backend: {
|
|
135
137
|
sdk: async options => {
|
|
136
138
|
if (options.lng && options.ns) {
|
|
137
|
-
const res = await fetch(
|
|
139
|
+
const res = await fetch(
|
|
140
|
+
`https://api.example.com/i18n/${options.lng}/${options.ns}`,
|
|
141
|
+
);
|
|
138
142
|
return { [options.lng]: { [options.ns]: await res.json() } };
|
|
139
143
|
}
|
|
140
144
|
return {};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Routing Integration
|
|
2
4
|
|
|
3
5
|
## Enable Locale Path Prefixes
|
|
@@ -104,7 +106,9 @@ function Navigation() {
|
|
|
104
106
|
<nav>
|
|
105
107
|
<I18nLink to="/">Home</I18nLink>
|
|
106
108
|
<I18nLink to="/about">About</I18nLink>
|
|
107
|
-
<I18nLink to="/contact" replace>
|
|
109
|
+
<I18nLink to="/contact" replace>
|
|
110
|
+
Contact
|
|
111
|
+
</I18nLink>
|
|
108
112
|
</nav>
|
|
109
113
|
);
|
|
110
114
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Internationalization
|
|
2
4
|
|
|
3
5
|
`@modern-js/plugin-i18n` 是 Modern.js 的国际化插件,基于 [i18next](https://www.i18next.com/) 和 [react-i18next](https://react.i18next.com/) 构建。
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Code Splitting
|
|
2
4
|
|
|
3
5
|
Code splitting is a common way to optimize frontend resource loading. This article will introduce the three types of code splitting supported by Modern.js:
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Inline Static Assets
|
|
2
4
|
|
|
3
5
|
Inline static assets refer to the practice of including the content of a static asset directly in a HTML or JS file, instead of linking to an external file. This can improve the performance of a website by reducing the number of HTTP requests that the browser has to make to load the page.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Bundle Size Optimization
|
|
2
4
|
|
|
3
5
|
Bundle size optimization is an important part of optimizing your production environment because it directly affects the user experience. In this document, we will introduce some common bundle size optimization methods in Modern.js.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# React Compiler
|
|
2
4
|
|
|
3
5
|
React Compiler is a build-time compiler from the React team that reduces unnecessary re-renders through automatic memoization, without manually writing `useMemo`, `useCallback`, or `React.memo`.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Monitors
|
|
2
4
|
|
|
3
5
|
Modern.js is a full-stack framework that supports both client-side and server-side development. When server-side rendering (SSR), the framework automatically injects additional logs and metrics during server runtime to help production issue diagnosis.
|
|
@@ -129,9 +131,7 @@ const myMonitorPlugin = (): ServerPlugin => ({
|
|
|
129
131
|
console.log(`[${event.payload.level}] ${event.payload.message}`);
|
|
130
132
|
} else if (event.type === 'timing') {
|
|
131
133
|
// Handle timing events
|
|
132
|
-
console.log(
|
|
133
|
-
`Timing: ${event.payload.name} = ${event.payload.dur}ms`,
|
|
134
|
-
);
|
|
134
|
+
console.log(`Timing: ${event.payload.name} = ${event.payload.dur}ms`);
|
|
135
135
|
} else if (event.type === 'counter') {
|
|
136
136
|
// Handle counter events
|
|
137
137
|
console.log(`Counter: ${event.payload.name}`);
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Source Code Build Mode
|
|
2
4
|
|
|
3
5
|
The source code build mode is used in the monorepo development scenario, allowing developers to directly reference the source code of other sub-projects within the monorepo for development.
|
|
@@ -138,7 +140,7 @@ At the same time, we need to set `composite` to `true` in the lib project's `tsc
|
|
|
138
140
|
{
|
|
139
141
|
"compilerOptions": {
|
|
140
142
|
"composite": true
|
|
141
|
-
}
|
|
143
|
+
}
|
|
142
144
|
}
|
|
143
145
|
```
|
|
144
146
|
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Custom Web Server
|
|
2
4
|
|
|
3
5
|
Modern.js encapsulates most server-side capabilities required by projects, typically eliminating the need for server-side development. However, in certain scenarios such as user authentication, request preprocessing, or adding page skeletons, custom server-side logic may still be necessary.
|
|
@@ -46,13 +48,13 @@ After creating the file, you can write custom logic in this file.
|
|
|
46
48
|
|
|
47
49
|
3. Include `server` directory in `tsconfig.json`
|
|
48
50
|
|
|
49
|
-
```
|
|
51
|
+
```jsonc
|
|
50
52
|
{
|
|
51
53
|
// ...
|
|
52
54
|
"include": [
|
|
53
55
|
// ...
|
|
54
|
-
"server"
|
|
55
|
-
]
|
|
56
|
+
"server",
|
|
57
|
+
],
|
|
56
58
|
}
|
|
57
59
|
```
|
|
58
60
|
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Path Alias
|
|
2
4
|
|
|
3
5
|
Path aliases allow developers to define aliases for modules, making it easier to reference them in code. This can be useful when you want to use a short, easy-to-remember name for a module instead of a long, complex path.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Use CSS Modules
|
|
2
4
|
|
|
3
5
|
[CSS Modules](https://github.com/css-modules/css-modules) allows us to write CSS code in a modular way, and these styles can be imported and used in JavaScript files. Using CSS Modules can automatically generate unique class names, isolate styles between different modules, and avoid class name conflicts.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Styling
|
|
2
4
|
|
|
3
5
|
Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Using Tailwind CSS
|
|
2
4
|
|
|
3
5
|
[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Data Caching
|
|
2
4
|
|
|
3
5
|
The `cache` function allows you to cache the results of data fetching or computation, Compared to full-page [rendering cache](/guides/basic-features/render/ssr-cache.md), it provides more fine-grained control over data granularity and is applicable to various scenarios such as Client-Side Rendering (CSR), Server-Side Rendering (SSR), and API services (BFF).
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Data Fetching
|
|
2
4
|
|
|
3
5
|
Modern.js provides out-of-the-box data fetching capabilities. Developers can use these APIs to fetch data in their projects. It's important to note that these APIs do not help the application make requests but assist developers in managing data better and improving project performance.
|
|
@@ -20,9 +22,7 @@ Modern.js recommends managing routes using [conventional routing](/guides/basic-
|
|
|
20
22
|
In the `routes/user/page.data.ts` file, you can export a Data Loader function:
|
|
21
23
|
|
|
22
24
|
```ts title="routes/user/page.data.ts"
|
|
23
|
-
export type ProfileData = {
|
|
24
|
-
/* some types */
|
|
25
|
-
};
|
|
25
|
+
export type ProfileData = {/* some types */};
|
|
26
26
|
|
|
27
27
|
export const loader = async (): Promise<ProfileData> => {
|
|
28
28
|
const res = await fetch('https://api/user/profile');
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Data Writing
|
|
2
4
|
|
|
3
5
|
In the [Data Fetching](/guides/basic-features/data/data-fetch.md) section, we introduced how Modern.js fetches data. This might bring up two questions:
|
|
@@ -38,7 +40,7 @@ import {
|
|
|
38
40
|
useFetcher,
|
|
39
41
|
useLoaderData,
|
|
40
42
|
useParams,
|
|
41
|
-
Outlet
|
|
43
|
+
Outlet,
|
|
42
44
|
} from '@modern-js/runtime/router';
|
|
43
45
|
|
|
44
46
|
export default () => {
|
|
@@ -46,23 +48,21 @@ export default () => {
|
|
|
46
48
|
const { submit } = useFetcher();
|
|
47
49
|
const editUser = () => {
|
|
48
50
|
const newUser = {
|
|
49
|
-
name: 'Modern.js'
|
|
50
|
-
}
|
|
51
|
+
name: 'Modern.js',
|
|
52
|
+
};
|
|
51
53
|
return submit(newUser, {
|
|
52
54
|
method: 'post',
|
|
53
55
|
encType: 'application/json',
|
|
54
|
-
})
|
|
55
|
-
}
|
|
56
|
+
});
|
|
57
|
+
};
|
|
56
58
|
return (
|
|
57
59
|
<div>
|
|
58
60
|
<button onClick={editUser}>edit user</button>
|
|
59
|
-
<div className="user-profile">
|
|
60
|
-
{userInfo}
|
|
61
|
-
</div>
|
|
61
|
+
<div className="user-profile">{userInfo}</div>
|
|
62
62
|
<Outlet context={userInfo}></Outlet>
|
|
63
63
|
</div>
|
|
64
|
-
)
|
|
65
|
-
}
|
|
64
|
+
);
|
|
65
|
+
};
|
|
66
66
|
```
|
|
67
67
|
|
|
68
68
|
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.md#parameters) in the `action` function and ultimately send the data to the server.
|
|
@@ -119,14 +119,14 @@ useSubmit:
|
|
|
119
119
|
|
|
120
120
|
```ts
|
|
121
121
|
const submit = useSubmit();
|
|
122
|
-
submit(null, { method:
|
|
122
|
+
submit(null, { method: 'post', action: '/logout' });
|
|
123
123
|
```
|
|
124
124
|
|
|
125
125
|
useFetcher:
|
|
126
126
|
|
|
127
127
|
```ts
|
|
128
128
|
const { submit } = useFetcher();
|
|
129
|
-
submit(null, { method:
|
|
129
|
+
submit(null, { method: 'post', action: '/logout' });
|
|
130
130
|
```
|
|
131
131
|
|
|
132
132
|
The `submit` function takes two parameters. The first parameter is the `formData` passed to the server. The second parameter is an optional object where:
|
|
@@ -148,7 +148,7 @@ For example, `FormData`:
|
|
|
148
148
|
|
|
149
149
|
```ts
|
|
150
150
|
let formData = new FormData();
|
|
151
|
-
formData.append(
|
|
151
|
+
formData.append('cheese', 'gouda');
|
|
152
152
|
submit(formData);
|
|
153
153
|
// In the action, you can get the data by request.json
|
|
154
154
|
```
|
|
@@ -157,7 +157,7 @@ or `URLSearchParams`:
|
|
|
157
157
|
|
|
158
158
|
```ts
|
|
159
159
|
let searchParams = new URLSearchParams();
|
|
160
|
-
searchParams.append(
|
|
160
|
+
searchParams.append('cheese', 'gouda');
|
|
161
161
|
submit(searchParams);
|
|
162
162
|
// In the action, you can get the data by request.json
|
|
163
163
|
```
|
|
@@ -165,10 +165,10 @@ submit(searchParams);
|
|
|
165
165
|
or any value that the `URLSearchParams` constructor accepts:
|
|
166
166
|
|
|
167
167
|
```ts
|
|
168
|
-
submit(
|
|
168
|
+
submit('cheese=gouda&toasted=yes');
|
|
169
169
|
submit([
|
|
170
|
-
[
|
|
171
|
-
[
|
|
170
|
+
['cheese', 'gouda'],
|
|
171
|
+
['toasted', 'yes'],
|
|
172
172
|
]);
|
|
173
173
|
// In the action, you can get the data by request.json
|
|
174
174
|
```
|
|
@@ -177,11 +177,11 @@ By default, if the first parameter of the `submit` function is an object, the co
|
|
|
177
177
|
|
|
178
178
|
```ts
|
|
179
179
|
submit(
|
|
180
|
-
{ key:
|
|
180
|
+
{ key: 'value' },
|
|
181
181
|
{
|
|
182
|
-
method:
|
|
183
|
-
encType:
|
|
184
|
-
}
|
|
182
|
+
method: 'post',
|
|
183
|
+
encType: 'application/x-www-form-urlencoded',
|
|
184
|
+
},
|
|
185
185
|
);
|
|
186
186
|
|
|
187
187
|
// In the action, you can get the data by request.formData
|
|
@@ -190,14 +190,11 @@ submit(
|
|
|
190
190
|
You can also specify the encoding type via the second parameter:
|
|
191
191
|
|
|
192
192
|
```tsx
|
|
193
|
-
submit(
|
|
194
|
-
{ key: "value" },
|
|
195
|
-
{ method: "post", encType: "application/json" }
|
|
196
|
-
);
|
|
193
|
+
submit({ key: 'value' }, { method: 'post', encType: 'application/json' });
|
|
197
194
|
|
|
198
195
|
submit('{"key":"value"}', {
|
|
199
|
-
method:
|
|
200
|
-
encType:
|
|
196
|
+
method: 'post',
|
|
197
|
+
encType: 'application/json',
|
|
201
198
|
});
|
|
202
199
|
|
|
203
200
|
// In the action, you can get the data by request.json
|
|
@@ -206,7 +203,7 @@ submit('{"key":"value"}', {
|
|
|
206
203
|
or submit plain text:
|
|
207
204
|
|
|
208
205
|
```ts
|
|
209
|
-
submit(
|
|
206
|
+
submit('value', { method: 'post', encType: 'text/plain' });
|
|
210
207
|
// In the action, you can get the data by request.text
|
|
211
208
|
```
|
|
212
209
|
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Data Mocking
|
|
2
4
|
|
|
3
5
|
Modern.js allows you to easily generate mock data so that the front-end can develop independently without depending on the back-end API.
|
|
@@ -98,8 +100,8 @@ type MockConfig = {
|
|
|
98
100
|
};
|
|
99
101
|
|
|
100
102
|
export const config = {
|
|
101
|
-
enable: false
|
|
102
|
-
}
|
|
103
|
+
enable: false,
|
|
104
|
+
};
|
|
103
105
|
```
|
|
104
106
|
|
|
105
107
|
Currently only the `enable` configuration is supported, which allows developers to control whether to execute mock.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Local Proxy
|
|
2
4
|
|
|
3
5
|
Modern.js provides a way to configure the development proxy in [`dev.server.proxy`](/configure/app/dev/server.md).
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Using Rsdoctor
|
|
2
4
|
|
|
3
5
|
Rsdoctor is a Rspack build analysis tool. In Modern.js, we recommend using Rsdoctor to diagnose and analyze the build process and build outputs.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Using Storybook
|
|
2
4
|
|
|
3
5
|
[Storybook](https://storybook.js.org/) is a tool specifically designed for component debugging. It provides:
|
|
@@ -46,14 +48,14 @@ You need to install `@rsbuild/core` in your project, otherwise the plugin may no
|
|
|
46
48
|
## Configure `.storybook/main.ts`
|
|
47
49
|
|
|
48
50
|
```ts
|
|
49
|
-
import type { StorybookConfig } from 'storybook-react-rsbuild'
|
|
51
|
+
import type { StorybookConfig } from 'storybook-react-rsbuild';
|
|
50
52
|
|
|
51
53
|
const config: StorybookConfig = {
|
|
52
54
|
stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
|
53
55
|
addons: ['storybook-addon-modernjs'],
|
|
54
56
|
framework: 'storybook-react-rsbuild',
|
|
55
|
-
}
|
|
56
|
-
export default config
|
|
57
|
+
};
|
|
58
|
+
export default config;
|
|
57
59
|
```
|
|
58
60
|
|
|
59
61
|
## BFF Integrated Calls in Storybook
|
|
@@ -68,7 +70,7 @@ Add the following scripts to `package.json` to start the BFF server and Storyboo
|
|
|
68
70
|
{
|
|
69
71
|
"scripts": {
|
|
70
72
|
"dev:api": "modern dev --api-only",
|
|
71
|
-
"storybook": "BFF_PROXY=1 storybook dev -p 6006 --no-open"
|
|
73
|
+
"storybook": "BFF_PROXY=1 storybook dev -p 6006 --no-open"
|
|
72
74
|
}
|
|
73
75
|
}
|
|
74
76
|
```
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Environment Variables
|
|
2
4
|
|
|
3
5
|
Modern.js provides support for environment variables, including built-in environment variables and custom environment variables.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# HTML Template
|
|
2
4
|
|
|
3
5
|
Modern.js provides **JSX syntax** and **HTML(EJS) syntax** to customize the HTML template.
|
|
@@ -15,9 +17,8 @@ For example, consider the following directory structure:
|
|
|
15
17
|
├── entry-a
|
|
16
18
|
│ ├── Document.tsx
|
|
17
19
|
│ └── routes
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
└── modern-app-env.d.ts
|
|
20
|
+
└── entry-b
|
|
21
|
+
└── routes
|
|
21
22
|
```
|
|
22
23
|
|
|
23
24
|
`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.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Output Files
|
|
2
4
|
|
|
3
5
|
This chapter will introduces the directory structure of output files and how to control the output directory of different types of files.
|
|
@@ -109,7 +111,7 @@ export default {
|
|
|
109
111
|
},
|
|
110
112
|
html: {
|
|
111
113
|
outputStructure: 'flat',
|
|
112
|
-
}
|
|
114
|
+
},
|
|
113
115
|
};
|
|
114
116
|
```
|
|
115
117
|
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
|
|
2
|
+
|
|
1
3
|
# Render Preprocessing
|
|
2
4
|
|
|
3
5
|
In certain scenarios, applications need to perform preprocessing operations before rendering. Modern.js recommends using **[Runtime Plugins](/plugin/introduction.md#runtime-plugins)** to implement this type of logic.
|