@modern-js/app-tools 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/dist/cjs/builder/shared/bundlerPlugins/HtmlAsyncChunkPlugin.js +54 -2
- 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/plugins/initialize/index.js +0 -1
- package/dist/esm/builder/shared/bundlerPlugins/HtmlAsyncChunkPlugin.mjs +54 -2
- 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/plugins/initialize/index.mjs +0 -1
- package/dist/esm-node/builder/shared/bundlerPlugins/HtmlAsyncChunkPlugin.mjs +54 -2
- 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/plugins/initialize/index.mjs +0 -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 +2 -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 +2 -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 +2 -0
- 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 +8 -6
- package/docs/configure/app/tools/style-loader.md +2 -0
- package/docs/configure/app/tools/svgr.md +2 -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 +2 -0
- 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 +5 -5
- package/docs/plugin/cli-plugins/api.md +2 -0
- package/docs/plugin/cli-plugins/life-cycle.md +2 -0
- package/docs/plugin/introduction.md +2 -0
- 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 +16 -17
- 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
|
# source.transformImport
|
|
2
4
|
|
|
3
5
|
Transform the import path, which can be used to modularly import the subpath of third-party packages. The functionality is similar to [babel-plugin-import](https://www.npmjs.com/package/babel-plugin-import)。
|
|
@@ -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
|
# tools.sass
|
|
2
4
|
|
|
3
5
|
- **Type:** `Object | Function`
|
|
@@ -14,12 +16,12 @@ const defaultOptions = {
|
|
|
14
16
|
|
|
15
17
|
`tools.sass` modifies the options of [@rsbuild/plugin-sass](https://rsbuild.rs/plugins/list/plugin-sass). It accepts the full plugin options:
|
|
16
18
|
|
|
17
|
-
| Option | Description |
|
|
18
|
-
| ------------------- | --------------------------------------------------------------------------------------------------- |
|
|
19
|
-
| `sassLoaderOptions` | Options passed to [sass-loader](https://github.com/webpack-contrib/sass-loader), object or function |
|
|
20
|
-
| `include` | Files handled by sass-loader, defaults to
|
|
21
|
-
| `exclude` | Files that sass-loader should skip |
|
|
22
|
-
| `rewriteUrls` | Whether to rewrite relative URLs in Sass files with resolve-url-loader, defaults to `true` |
|
|
19
|
+
| Option | Description |
|
|
20
|
+
| ------------------- | --------------------------------------------------------------------------------------------------- |
|
|
21
|
+
| `sassLoaderOptions` | Options passed to [sass-loader](https://github.com/webpack-contrib/sass-loader), object or function |
|
|
22
|
+
| `include` | Files handled by sass-loader, defaults to `/\.s(?:a\|c)ss$/` |
|
|
23
|
+
| `exclude` | Files that sass-loader should skip |
|
|
24
|
+
| `rewriteUrls` | Whether to rewrite relative URLs in Sass files with resolve-url-loader, defaults to `true` |
|
|
23
25
|
|
|
24
26
|
### Modifying sass-loader options
|
|
25
27
|
|
|
@@ -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
|
There are three types of configurations in Modern.js: Compile configuration, Runtime configuration, and Server Runtime configuration.
|
|
@@ -265,11 +267,7 @@ import { defineConfig } from '@modern-js/app-tools';
|
|
|
265
267
|
import { xxPlugin } from '@modern-js/plugin-xx';
|
|
266
268
|
|
|
267
269
|
export default defineConfig({
|
|
268
|
-
plugins: [
|
|
269
|
-
xxPlugin({
|
|
270
|
-
/** Add parameters here */
|
|
271
|
-
}),
|
|
272
|
-
],
|
|
270
|
+
plugins: [xxPlugin({/** Add parameters here */})],
|
|
273
271
|
});
|
|
274
272
|
```
|
|
275
273
|
|
|
@@ -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
|
# Cross-Project Invocation
|
|
2
4
|
|
|
3
5
|
Based on the BFF architecture, Modern.js provides cross-project invocation capabilities, allowing BFF functions created in one project to be invoked by other projects through integrated calls, enabling function sharing and feature reuse across projects.
|
|
@@ -23,7 +25,7 @@ Ensure the current project has BFF enabled with API files defined under `api/lam
|
|
|
23
25
|
export default defineConfig({
|
|
24
26
|
bff: {
|
|
25
27
|
crossProject: true,
|
|
26
|
-
}
|
|
28
|
+
},
|
|
27
29
|
});
|
|
28
30
|
```
|
|
29
31
|
|
|
@@ -87,9 +89,9 @@ import { configure as innerConfigure } from '@modern-js/plugin-bff/client';
|
|
|
87
89
|
import axios from 'axios';
|
|
88
90
|
|
|
89
91
|
configure({
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
92
|
+
setDomain() {
|
|
93
|
+
return 'https://your-bff-api.com';
|
|
94
|
+
},
|
|
93
95
|
});
|
|
94
96
|
|
|
95
97
|
innerConfigure({
|
|
@@ -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
|
# Extend BFF Server
|
|
2
4
|
|
|
3
5
|
In some applications, developers may want to handle all BFF functions uniformly, such as authentication, logging, data processing, etc.
|
|
@@ -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
|
# Runtime Framework
|
|
2
4
|
|
|
3
5
|
Modern.js uses [Hono.js](https://hono.dev/) as the BFF and Server runtime framework, so you can [extend BFF Server](/guides/advanced-features/bff/extend-server.md) based on the Hono.js ecosystem.
|
|
@@ -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
|
# Basic Usage
|
|
2
4
|
|
|
3
5
|
In a Modern.js application, developers can define API files under the `api/lambda` directory and export API functions from these files. In the frontend code, these API functions can be directly invoked by importing the file, which initiates the API requests.
|
|
@@ -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
|
# Creating Extensible BFF Functions
|
|
2
4
|
|
|
3
5
|
The previous section showed how to export a simple BFF function in a file. In more complex scenarios, each BFF function may need to do independent type validation, pre-logic, etc.
|
|
@@ -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
|
# Extend Request SDK
|
|
2
4
|
|
|
3
5
|
The unified invocation of BFF functions is isomorphic in both CSR and SSR. The request SDK encapsulated by Modern.js relies on the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) on the browser side, and on [node-fetch](https://www.npmjs.com/package/node-fetch) on the server side. However, in actual business scenarios, additional processing may be required for requests or responses, such as:
|
|
@@ -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
|
# File Upload
|
|
2
4
|
|
|
3
5
|
BFF combined with runtime framework provides file upload capabilities, supporting integrated calls and pure function manual calls.
|
|
@@ -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
|
# BFF
|
|
2
4
|
|
|
3
5
|
BFF (Backends for Frontends) is an architectural pattern primarily used to address issues of data aggregation in front-end and back-end collaboration. Under the BFF architecture, front-end applications do not communicate directly with backend services. Instead, they interact with backend services through a dedicated BFF middleware layer, custom-made for the front end.
|
|
@@ -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
|
# Improve Build Performance
|
|
2
4
|
|
|
3
5
|
Modern.js optimizes build performance by default, but as the project becomes larger, you may encounter some build performance problems.
|
|
@@ -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
|
# Advanced Usage
|
|
2
4
|
|
|
3
5
|
## SSR Scenarios
|
|
@@ -64,7 +66,7 @@ i18nPlugin({
|
|
|
64
66
|
localeDetectionByEntry: {
|
|
65
67
|
admin: {
|
|
66
68
|
localePathRedirect: false, // admin does not use path prefixes
|
|
67
|
-
languages: ['en'],
|
|
69
|
+
languages: ['en'], // admin only supports English
|
|
68
70
|
},
|
|
69
71
|
mobile: {
|
|
70
72
|
languages: ['zh', 'en', 'ja'], // mobile supports more languages
|
|
@@ -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
|
# API Reference
|
|
2
4
|
|
|
3
5
|
## useModernI18n
|
|
@@ -162,11 +164,11 @@ Type of the custom backend loader function:
|
|
|
162
164
|
type I18nSdkLoader = (options: I18nSdkLoadOptions) => Promise<Resources>;
|
|
163
165
|
|
|
164
166
|
interface I18nSdkLoadOptions {
|
|
165
|
-
lng?: string;
|
|
166
|
-
ns?: string;
|
|
167
|
-
lngs?: string[];
|
|
168
|
-
nss?: string[];
|
|
169
|
-
all?: boolean;
|
|
167
|
+
lng?: string; // Single language code
|
|
168
|
+
ns?: string; // Single namespace
|
|
169
|
+
lngs?: string[]; // Multiple language codes
|
|
170
|
+
nss?: string[]; // Multiple namespaces
|
|
171
|
+
all?: boolean; // Load all resources
|
|
170
172
|
}
|
|
171
173
|
|
|
172
174
|
type Resources = {
|
|
@@ -181,14 +183,14 @@ type Resources = {
|
|
|
181
183
|
```ts
|
|
182
184
|
interface LanguageDetectorOptions {
|
|
183
185
|
order?: string[];
|
|
184
|
-
lookupQuerystring?: string;
|
|
185
|
-
lookupCookie?: string;
|
|
186
|
-
lookupLocalStorage?: string;
|
|
186
|
+
lookupQuerystring?: string; // Default: 'lng'
|
|
187
|
+
lookupCookie?: string; // Default: 'i18next'
|
|
188
|
+
lookupLocalStorage?: string; // Default: 'i18nextLng'
|
|
187
189
|
lookupSession?: string;
|
|
188
|
-
lookupHeader?: string;
|
|
190
|
+
lookupHeader?: string; // Default: 'accept-language'
|
|
189
191
|
lookupFromPathIndex?: number; // Default: 0
|
|
190
192
|
caches?: false | string[];
|
|
191
|
-
cookieMinutes?: number;
|
|
193
|
+
cookieMinutes?: number; // Default: 525600 (1 year)
|
|
192
194
|
cookieExpirationDate?: Date;
|
|
193
195
|
cookieDomain?: string;
|
|
194
196
|
}
|
|
@@ -208,8 +210,8 @@ import { useTranslation } from 'react-i18next';
|
|
|
208
210
|
import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
|
|
209
211
|
|
|
210
212
|
function App() {
|
|
211
|
-
const { t } = useTranslation();
|
|
212
|
-
const { language, changeLanguage } = useModernI18n();
|
|
213
|
+
const { t } = useTranslation(); // Translate text
|
|
214
|
+
const { language, changeLanguage } = useModernI18n(); // Switch language
|
|
213
215
|
|
|
214
216
|
return (
|
|
215
217
|
<div>
|
|
@@ -227,5 +229,11 @@ You can also get the i18next instance from `useModernI18n` and call capabilities
|
|
|
227
229
|
const { i18nInstance } = useModernI18n();
|
|
228
230
|
|
|
229
231
|
// Dynamically add translation resources.
|
|
230
|
-
i18nInstance.addResourceBundle(
|
|
232
|
+
i18nInstance.addResourceBundle(
|
|
233
|
+
'zh',
|
|
234
|
+
'translation',
|
|
235
|
+
{ key: 'Value' },
|
|
236
|
+
true,
|
|
237
|
+
true,
|
|
238
|
+
);
|
|
231
239
|
```
|
|
@@ -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`.
|