@modern-js/main-doc 3.9.3 → 3.10.1

package/docs/en/configure/app/bff/cross-project.mdx

@@ -7,7 +7,7 @@ title: crossProject
 - **Type:** `boolean`
 - **Default:** `false`
 
-import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
+import EnableBFFCaution from '@site-docs-en/components/enable-bff-caution';
 
 <EnableBFFCaution />
 
@@ -21,4 +21,4 @@ export default defineConfig({
 });
 ```
 
-For detailed configuration and usage of BFF cross-project invocation, please refer to the [BFF Cross-Project Invocation Guide](/guides/advanced-features/bff/cross-project.html).
+For detailed configuration and usage of BFF cross-project invocation, please refer to the [BFF Cross-Project Invocation Guide](/guides/advanced-features/bff/cross-project.html).

package/docs/en/configure/app/bff/prefix.mdx

@@ -7,7 +7,7 @@ title: prefix
 - **Type:** `string`
 - **Default:** `/api`
 
-import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
+import EnableBFFCaution from '@site-docs-en/components/enable-bff-caution';
 
 <EnableBFFCaution />
 

package/docs/en/configure/app/dev/lazy-compilation.mdx

@@ -33,10 +33,26 @@ type LazyCompilationOptions =
     };
 ```
 
-- **Default:** `false`
+- **Default:** depends on how the application renders:
+  - Pure CSR and streaming SSR applications: `{ imports: true, entries: false }`, which compiles dynamic imports on demand;
+  - Applications using string SSR (including any entry in `server.ssrByEntries` using string SSR), RSC or SSG: `false`.
 
 Enable lazy compilation (compilation on demand), implemented based on Rspack's [lazy compilation](https://rspack.rs/guide/features/lazy-compilation) feature.
 
+This option only takes effect in the dev server and does not affect production build output. When enabled for streaming SSR applications, route components are still compiled eagerly so that first-screen JS/CSS injection stays correct.
+
+An explicitly configured `dev.lazyCompilation` always takes precedence over the default. To disable it:
+
+```ts
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  dev: {
+    lazyCompilation: false,
+  },
+});
+```
+
 import RsbuildLink from '@site/src/components/RsbuildLink';
 
 :::info

package/docs/en/configure/app/dev/start-url.mdx

@@ -50,4 +50,3 @@ On MacOS, you can open the specified browser when Dev Server starts, by set envi
 - Brave Browser
 - Vivaldi
 - Chromium
-

package/docs/en/configure/app/output/css-modules.mdx

@@ -17,11 +17,7 @@ type CssModules = {
         resourceFragment: string,
       ) => boolean);
   exportLocalsConvention?:
-    | 'asIs'
-    | 'camelCase'
-    | 'camelCaseOnly'
-    | 'dashes'
-    | 'dashesOnly';
+    'asIs' | 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly';
   exportGlobals?: boolean;
   localIdentName?: string;
   mode?:

package/docs/en/configure/app/output/dist-path.mdx

@@ -4,7 +4,6 @@ title: distPath
 
 # output.distPath
 
-
 import CommentTips from '@site-docs/components/output-distpath-warning';
 
 <CommentTips />

package/docs/en/configure/app/output/inline-scripts.mdx

@@ -8,8 +8,7 @@ title: inlineScripts
 
 ```ts
 type InlineScriptsTest =
-  | RegExp
-  | ((params: { size: number; name: string }) => boolean);
+  RegExp | ((params: { size: number; name: string }) => boolean);
 
 type InlineScripts =
   | boolean

package/docs/en/configure/app/output/inline-styles.mdx

@@ -8,8 +8,7 @@ title: inlineStyles
 
 ```ts
 type InlineStylesTest =
-  | RegExp
-  | ((params: { size: number; name: string }) => boolean);
+  RegExp | ((params: { size: number; name: string }) => boolean);
 
 type InlineStyles =
   | boolean

package/docs/en/configure/app/output/split-route-chunks.mdx

@@ -16,5 +16,5 @@ export default {
   output: {
     splitRouteChunks: false,
   },
-}
+};
 ```

package/docs/en/configure/app/output/ssg.mdx

@@ -20,6 +20,7 @@ The SSG feature is closely related to routing. It is recommended to understand t
 :::
 
 :::info
+
 - Use `output.ssg` for single-entry apps.
 - For multi-entry apps, prefer `output.ssgByEntries`.
 - If `output.ssg` is `true` and `output.ssgByEntries` is not set, all routes under all entries are treated as SSG routes.
@@ -82,4 +83,3 @@ export default defineConfig({
   },
 });
 ```
-

package/docs/en/configure/app/output/ssgByEntries.mdx

@@ -10,6 +10,7 @@ title: ssgByEntries
 Configure SSG per entry for multi-entry applications.
 
 :::info
+
 - Use `output.ssg` for single-entry apps.
 - For multi-entry apps, prefer `output.ssgByEntries`.
 - If `output.ssg` is `true` and `output.ssgByEntries` is not set, all routes under all entries are treated as SSG routes.

package/docs/en/configure/app/performance/chunk-split.mdx

@@ -14,10 +14,7 @@ type ForceSplitting = RegExp[] | Record<string, RegExp>;
 
 interface BaseChunkSplit {
   strategy?:
-    | 'split-by-module'
-    | 'split-by-experience'
-    | 'all-in-one'
-    | 'single-vendor';
+    'split-by-module' | 'split-by-experience' | 'all-in-one' | 'single-vendor';
   override?: SplitChunks;
   forceSplitting?: ForceSplitting;
 }

package/docs/en/configure/app/runtime/plugins.mdx

@@ -50,9 +50,11 @@ import { defineRuntimeConfig } from '@modern-js/runtime';
 import { myPlugin } from './config/plugin/myPlugin';
 
 export default defineRuntimeConfig({
-  plugins: [myPlugin({
-    foo: 1,
-    bar: 2,
-  })],
+  plugins: [
+    myPlugin({
+      foo: 1,
+      bar: 2,
+    }),
+  ],
 });
 ```

package/docs/en/configure/app/server/rsc.mdx

@@ -21,10 +21,10 @@ export default defineConfig({
 
 :::tip Prerequisites
 Before enabling RSC, ensure:
+
 1. React and React DOM are upgraded to version 19 (recommended 19.2.4 or above)
 2. Install the `react-server-dom-rspack@0.0.2` dependency
 
 :::
 
 For more information about using RSC, see the [React Server Components guide](/guides/basic-features/render/rsc).
-

package/docs/en/configure/app/server/ssr.mdx

@@ -25,13 +25,12 @@ export default defineConfig({
 
 When the value type is `Object`, the following properties can be configured:
 
-| Name              | Type                                                         | Default                                   | Description                                                                     |
-| ---------------- | ------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
-| mode             | `string`                                  | `stream`          | which defaults to using streaming rendering. Configure `string` to use `renderToString` for rendering       |
-| forceCSR         | `boolean`                                 | `false`           | which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` or adding `x-modern-ssr-fallback` header when accessing the page |
-| unsafeHeaders    | `string[]`                                | `[]`              | For safety reasons, Modern.js does not add excessive content to SSR_DATA. Developers can use this configuration to specify the headers that need to be injected      |
-| loaderFailureMode| `clientRender \| errorBoundary`           | `errorBoundary`   | The default configuration is `'errorBoundary'`, when an error occurs in [data loader](/en/guides/basic-features/data/data-fetch.html#data-loader-recommended), it will default to rendering the [`Error`](/guides/basic-features/routes/routes#error-handling) component of the route. When configured as `'clientRender'`, if a loader throws an error, it switch to client-side rendering，you can use it with [Client Loader](/en/guides/basic-features/data/data-fetch.html#client-loader) |
-
+| Name              | Type                            | Default         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ----------------- | ------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| mode              | `string`                        | `stream`        | which defaults to using streaming rendering. Configure `string` to use `renderToString` for rendering                                                                                                                                                                                                                                                                                                                                                                                          |
+| forceCSR          | `boolean`                       | `false`         | which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` or adding `x-modern-ssr-fallback` header when accessing the page                                                                                                                                                                                                                                                                                                                        |
+| unsafeHeaders     | `string[]`                      | `[]`            | For safety reasons, Modern.js does not add excessive content to SSR_DATA. Developers can use this configuration to specify the headers that need to be injected                                                                                                                                                                                                                                                                                                                                |
+| loaderFailureMode | `clientRender \| errorBoundary` | `errorBoundary` | The default configuration is `'errorBoundary'`, when an error occurs in [data loader](/en/guides/basic-features/data/data-fetch.html#data-loader-recommended), it will default to rendering the [`Error`](/guides/basic-features/routes/routes#error-handling) component of the route. When configured as `'clientRender'`, if a loader throws an error, it switch to client-side rendering，you can use it with [Client Loader](/en/guides/basic-features/data/data-fetch.html#client-loader) |
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -39,7 +38,7 @@ export default defineConfig({
     ssr: {
       forceCSR: true,
       mode: 'stream',
-      unsafeHeaders: ['User-Agent']
+      unsafeHeaders: ['User-Agent'],
     },
   },
 });

package/docs/en/configure/app/server/tsconfig-path.mdx

@@ -40,9 +40,9 @@ Add `<appDirectory>/tsconfig.server.json`:
     "types": ["node"],
     "esModuleInterop": true,
     "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
   },
-  "include": ["api", "shared", "server", "config", "modern.config.ts"]
+  "include": ["api", "shared", "server", "config", "modern.config.ts"],
 }
 ```
 

package/docs/en/configure/app/tools/less.mdx

@@ -21,12 +21,12 @@ const defaultOptions = {
 
 `tools.less` modifies the options of [@rsbuild/plugin-less](https://rsbuild.rs/plugins/list/plugin-less). It accepts the full plugin options:
 
-| Option              | Description                                                                                    |
-| ------------------- | ---------------------------------------------------------------------------------------------- |
+| Option              | Description                                                                                         |
+| ------------------- | --------------------------------------------------------------------------------------------------- |
 | `lessLoaderOptions` | Options passed to [less-loader](https://github.com/webpack-contrib/less-loader), object or function |
-| `include`           | Files handled by less-loader, defaults to `/\.less$/`                                          |
-| `exclude`           | Files that less-loader should skip                                                             |
-| `parallel`          | Whether to compile Less modules in worker threads, defaults to `false`                         |
+| `include`           | Files handled by less-loader, defaults to `/\.less$/`                                               |
+| `exclude`           | Files that less-loader should skip                                                                  |
+| `parallel`          | Whether to compile Less modules in worker threads, defaults to `false`                              |
 
 ### Modifying less-loader options
 
@@ -135,7 +135,6 @@ export default {
 As soon as an object contains a plugin-level key (`lessLoaderOptions`, `include`, `exclude`, ...), the whole object is parsed as plugin options and any loader option in it has no effect. For example, `lessOptions` in `tools.less: { parallel: true, lessOptions: { ... } }` is ignored and must be moved under `lessLoaderOptions`; a hint is printed in development.
 :::
 
-
 In earlier versions, `tools.less` took the less-loader options directly, e.g. `tools.less: { lessOptions: {} }` or `tools.less(config, { addExcludes }) {}`. This form still works: Modern.js wraps it into `lessLoaderOptions` and produces exactly the same config as before. A migration hint is printed in development, and the legacy form will be removed in the next major version.
 
 ```js

package/docs/en/configure/app/tools/sass.mdx

@@ -18,12 +18,12 @@ const defaultOptions = {
 
 `tools.sass` modifies the options of [@rsbuild/plugin-sass](https://rsbuild.rs/plugins/list/plugin-sass). It accepts the full plugin options:
 
-| Option              | Description                                                                                    |
-| ------------------- | ---------------------------------------------------------------------------------------------- |
+| Option              | Description                                                                                         |
+| ------------------- | --------------------------------------------------------------------------------------------------- |
 | `sassLoaderOptions` | Options passed to [sass-loader](https://github.com/webpack-contrib/sass-loader), object or function |
-| `include`           | Files handled by sass-loader, defaults to `/\.s(?:a|c)ss$/`                                    |
-| `exclude`           | Files that sass-loader should skip                                                             |
-| `rewriteUrls`       | Whether to rewrite relative URLs in Sass files with resolve-url-loader, defaults to `true`     |
+| `include`           | Files handled by sass-loader, defaults to `/\.s(?:a\|c)ss$/`                                        |
+| `exclude`           | Files that sass-loader should skip                                                                  |
+| `rewriteUrls`       | Whether to rewrite relative URLs in Sass files with resolve-url-loader, defaults to `true`          |
 
 ### Modifying sass-loader options
 
@@ -126,7 +126,6 @@ export default {
 As soon as an object contains a plugin-level key (`sassLoaderOptions`, `include`, `exclude`, ...), the whole object is parsed as plugin options and any loader option in it has no effect. For example, `sassOptions` in `tools.sass: { rewriteUrls: false, sassOptions: { ... } }` is ignored and must be moved under `sassLoaderOptions`; a hint is printed in development.
 :::
 
-
 In earlier versions, `tools.sass` took the sass-loader options directly, e.g. `tools.sass: { sassOptions: {} }` or `tools.sass(config, { addExcludes }) {}`. This form still works: Modern.js wraps it into `sassLoaderOptions` and produces exactly the same config as before. A migration hint is printed in development, and the legacy form will be removed in the next major version.
 
 ```js

package/docs/en/configure/app/tools/svgr.mdx

@@ -18,14 +18,14 @@ const defaultOptions = {
 
 `tools.svgr` modifies the options of [@rsbuild/plugin-svgr](https://rsbuild.rs/plugins/list/plugin-svgr). It accepts the full plugin options. Set it to `false` to skip registering the SVGR plugin; all `.svg` files are then treated as static assets.
 
-| Option            | Description                                                                                          |
-| ----------------- | ---------------------------------------------------------------------------------------------------- |
+| Option            | Description                                                                                                |
+| ----------------- | ---------------------------------------------------------------------------------------------------------- |
 | `svgrOptions`     | Options passed to [SVGR](https://react-svgr.com/docs/options/), such as `exportType`, `icon`, `svgoConfig` |
-| `parallel`        | Whether to transform SVG files in worker threads, defaults to `false`                                |
-| `exclude`         | SVG files that SVGR should skip                                                                      |
-| `excludeImporter` | Importer files whose SVG imports should skip SVGR                                                    |
-| `query`           | Query that triggers the SVGR transform, defaults to `/react/`                                        |
-| `mixedImport`     | Whether a module may import both the URL and the React component, defaults to `true`                |
+| `parallel`        | Whether to transform SVG files in worker threads, defaults to `false`                                      |
+| `exclude`         | SVG files that SVGR should skip                                                                            |
+| `excludeImporter` | Importer files whose SVG imports should skip SVGR                                                          |
+| `query`           | Query that triggers the SVGR transform, defaults to `/react/`                                              |
+| `mixedImport`     | Whether a module may import both the URL and the React component, defaults to `true`                       |
 
 ### Merge rules
 

package/docs/en/configure/app/usage.mdx

@@ -265,11 +265,7 @@ import { defineConfig } from '@modern-js/app-tools';
 import { xxPlugin } from '@modern-js/plugin-xx';
 
 export default defineConfig({
-  plugins: [
-    xxPlugin({
-      /** Add parameters here */
-    }),
-  ],
+  plugins: [xxPlugin({/** Add parameters here */})],
 });
 ```
 

package/docs/en/guides/advanced-features/bff/cross-project.mdx

@@ -9,6 +9,7 @@ Cross-project invocation consists of **producer** and **consumer** sides. The pr
 
 Enable cross-project invocation via configuration. Projects with BFF capabilities enabled can act as BFF producers, or you can create standalone BFF applications.
 When executing `dev` or `build`, the following artifacts for consumers will be automatically generated:
+
 - API functions under the `dist/client` directory
 - Runtime configuration functions under the `dist/runtime` directory
 - Interface exports defined in `exports` field of `package.json`
@@ -24,7 +25,7 @@ Ensure the current project has BFF enabled with API files defined under `api/lam
 export default defineConfig({
   bff: {
     crossProject: true,
-  }
+  },
 });
 ```
 
@@ -88,9 +89,9 @@ import { configure as innerConfigure } from '@modern-js/plugin-bff/client';
 import axios from 'axios';
 
 configure({
-    setDomain() {
-        return 'https://your-bff-api.com';
-    },
+  setDomain() {
+    return 'https://your-bff-api.com';
+  },
 });
 
 innerConfigure({

package/docs/en/guides/advanced-features/compatibility.mdx

@@ -18,7 +18,6 @@ import DefaultBrowserslist from '@site-docs/components/default-browserslist';
 
 <DefaultBrowserslist />
 
-
 When the `overrideBrowserslist` configuration is not specified in the project, this `.browserslistrc` file will take effect.
 
 ### Method 2: Configure via package.json

package/docs/en/guides/advanced-features/international/advanced.mdx

@@ -68,7 +68,7 @@ i18nPlugin({
     localeDetectionByEntry: {
       admin: {
         localePathRedirect: false, // admin does not use path prefixes
-        languages: ['en'],         // admin only supports English
+        languages: ['en'], // admin only supports English
       },
       mobile: {
         languages: ['zh', 'en', 'ja'], // mobile supports more languages

package/docs/en/guides/advanced-features/international/api.mdx

@@ -10,14 +10,14 @@ title: API Reference
 
 ### Return Value
 
-| Field | Type | Description |
-| --- | --- | --- |
-| `language` | `string` | Current language code |
-| `changeLanguage` | `(lang: string) => Promise<void>` | Switches language |
-| `supportedLanguages` | `string[]` | Supported language list, from `localeDetection.languages` |
-| `isLanguageSupported` | `(lang: string) => boolean` | Checks whether a language is in the supported list |
-| `isResourcesReady` | `boolean` | Whether translation resources for the current language have finished loading |
-| `i18nInstance` | `I18nInstance` | i18next instance for advanced scenarios |
+| Field                 | Type                              | Description                                                                  |
+| --------------------- | --------------------------------- | ---------------------------------------------------------------------------- |
+| `language`            | `string`                          | Current language code                                                        |
+| `changeLanguage`      | `(lang: string) => Promise<void>` | Switches language                                                            |
+| `supportedLanguages`  | `string[]`                        | Supported language list, from `localeDetection.languages`                    |
+| `isLanguageSupported` | `(lang: string) => boolean`       | Checks whether a language is in the supported list                           |
+| `isResourcesReady`    | `boolean`                         | Whether translation resources for the current language have finished loading |
+| `i18nInstance`        | `I18nInstance`                    | i18next instance for advanced scenarios                                      |
 
 ### Basic Usage
 
@@ -85,13 +85,13 @@ A route link component with a locale prefix.
 
 ### Props
 
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| `to` | `string` | Yes | Target path. Do not include the locale prefix |
-| `children` | `React.ReactNode` | Yes | Link content |
-| `replace` | `boolean` | No | Uses `history.replace` instead of `push` |
-| `state` | `any` | No | State passed to the target route |
-| Other Link props | - | No | Inherited from the `Link` component in `@modern-js/runtime/router` |
+| Prop             | Type              | Required | Description                                                        |
+| ---------------- | ----------------- | -------- | ------------------------------------------------------------------ |
+| `to`             | `string`          | Yes      | Target path. Do not include the locale prefix                      |
+| `children`       | `React.ReactNode` | Yes      | Link content                                                       |
+| `replace`        | `boolean`         | No       | Uses `history.replace` instead of `push`                           |
+| `state`          | `any`             | No       | State passed to the target route                                   |
+| Other Link props | -                 | No       | Inherited from the `Link` component in `@modern-js/runtime/router` |
 
 ### Usage
 
@@ -166,11 +166,11 @@ Type of the custom backend loader function:
 type I18nSdkLoader = (options: I18nSdkLoadOptions) => Promise<Resources>;
 
 interface I18nSdkLoadOptions {
-  lng?: string;      // Single language code
-  ns?: string;       // Single namespace
-  lngs?: string[];   // Multiple language codes
-  nss?: string[];    // Multiple namespaces
-  all?: boolean;     // Load all resources
+  lng?: string; // Single language code
+  ns?: string; // Single namespace
+  lngs?: string[]; // Multiple language codes
+  nss?: string[]; // Multiple namespaces
+  all?: boolean; // Load all resources
 }
 
 type Resources = {
@@ -185,14 +185,14 @@ type Resources = {
 ```ts
 interface LanguageDetectorOptions {
   order?: string[];
-  lookupQuerystring?: string;   // Default: 'lng'
-  lookupCookie?: string;        // Default: 'i18next'
-  lookupLocalStorage?: string;  // Default: 'i18nextLng'
+  lookupQuerystring?: string; // Default: 'lng'
+  lookupCookie?: string; // Default: 'i18next'
+  lookupLocalStorage?: string; // Default: 'i18nextLng'
   lookupSession?: string;
-  lookupHeader?: string;        // Default: 'accept-language'
+  lookupHeader?: string; // Default: 'accept-language'
   lookupFromPathIndex?: number; // Default: 0
   caches?: false | string[];
-  cookieMinutes?: number;       // Default: 525600 (1 year)
+  cookieMinutes?: number; // Default: 525600 (1 year)
   cookieExpirationDate?: Date;
   cookieDomain?: string;
 }
@@ -212,8 +212,8 @@ import { useTranslation } from 'react-i18next';
 import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 function App() {
-  const { t } = useTranslation();                          // Translate text
-  const { language, changeLanguage } = useModernI18n();    // Switch language
+  const { t } = useTranslation(); // Translate text
+  const { language, changeLanguage } = useModernI18n(); // Switch language
 
   return (
     <div>
@@ -231,5 +231,11 @@ You can also get the i18next instance from `useModernI18n` and call capabilities
 const { i18nInstance } = useModernI18n();
 
 // Dynamically add translation resources.
-i18nInstance.addResourceBundle('zh', 'translation', { key: 'Value' }, true, true);
+i18nInstance.addResourceBundle(
+  'zh',
+  'translation',
+  { key: 'Value' },
+  true,
+  true,
+);
 ```

package/docs/en/guides/advanced-features/international/best-practices.mdx

@@ -63,8 +63,8 @@ function ButtonGroup() {
   const { t } = useTranslation('common', { keyPrefix: 'button' });
   return (
     <>
-      <button>{t('submit')}</button>   {/* common:button.submit */}
-      <button>{t('cancel')}</button>   {/* common:button.cancel */}
+      <button>{t('submit')}</button> {/* common:button.submit */}
+      <button>{t('cancel')}</button> {/* common:button.cancel */}
     </>
   );
 }
@@ -94,9 +94,9 @@ The quality of translation key names directly affects maintenance cost. Recommen
 ```
 
 ```tsx
-t('page.title')
-t('form.username.label')
-t('form.submit', { defaultValue: 'Save' }) // defaultValue prevents showing the key string when the key is missing.
+t('page.title');
+t('form.username.label');
+t('form.submit', { defaultValue: 'Save' }); // defaultValue prevents showing the key string when the key is missing.
 ```
 
 ## Plurals
@@ -121,9 +121,9 @@ i18next automatically selects the correct plural form based on the `count` param
 ```
 
 ```tsx
-t('item', { count: 0 })  // "没有条目" / "No items"
-t('item', { count: 1 })  // "没有条目" / "1 item" (Chinese usually has only one form)
-t('item', { count: 5 })  // "5 个条目" / "5 items"
+t('item', { count: 0 }); // "没有条目" / "No items"
+t('item', { count: 1 }); // "没有条目" / "1 item" (Chinese usually has only one form)
+t('item', { count: 5 }); // "5 个条目" / "5 items"
 ```
 
 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.
@@ -152,8 +152,8 @@ Nested structures can clearly reflect UI hierarchy and are accessed with dots:
 ```
 
 ```tsx
-t('modal.confirm.title')
-t('modal.confirm.actions.ok')
+t('modal.confirm.title');
+t('modal.confirm.actions.ok');
 ```
 
 Avoid nesting deeper than 4 levels. Excessive depth makes key names long and hard to maintain.
@@ -199,8 +199,8 @@ Use `, format` in translation files to specify the formatting type:
 ```
 
 ```tsx
-t('price', { value: 99.5 })       // "当前价格：¥99.50" (zh) / "$99.50" (en)
-t('expiry', { date: new Date() }) // "到期日：2025年5月12日" (zh)
+t('price', { value: 99.5 }); // "当前价格：¥99.50" (zh) / "$99.50" (en)
+t('expiry', { date: new Date() }); // "到期日：2025年5月12日" (zh)
 ```
 
 ## Error Handling
@@ -237,7 +237,7 @@ if (!i18n.isInitialized) return null;
 Provide fallback text with `defaultValue` to prevent key strings from appearing in the UI:
 
 ```tsx
-t('missing.key', { defaultValue: 'Default text' })
+t('missing.key', { defaultValue: 'Default text' });
 ```
 
 In development, you can enable `saveMissing` to output missing keys to the console for debugging:
@@ -281,8 +281,8 @@ Referencing JSON file types directly is less likely to drift from actual transla
 
 ```tsx
 const { t } = useTranslation();
-t('welcome');       // TypeScript autocomplete
-t('nonExistent');   // TypeScript error
+t('welcome'); // TypeScript autocomplete
+t('nonExistent'); // TypeScript error
 ```
 
 :::tip Large projects