@bleedingdev/modern-js-app-tools 3.5.0-ultramodern.100 → 3.5.0-ultramodern.102

package/docs/guides/advanced-features/international.md

@@ -0,0 +1,27 @@
+# Internationalization
+
+`@modern-js/plugin-i18n` 是 Modern.js 的国际化插件，基于 [i18next](https://www.i18next.com/) 和 [react-i18next](https://react.i18next.com/) 构建。
+
+- **插件本身**：负责与 Modern.js 框架的集成，如 SSR 语言传递、路由前缀处理等
+- **i18next**：核心翻译能力，如 `t()` 函数、插值、复数、命名空间。
+- **react-i18next**：React 组件和 Hook，如 `useTranslation`，实现与 React 生命周期的结合。
+
+## Where to start?
+
+| What you want to do                                          | Documentation                                                                                                    |
+| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
+| Integrate for the first time and run an example              | [Quick Start](/guides/advanced-features/international/quick-start.md)                                            |
+| Learn all configuration options                              | [Configuration](/guides/advanced-features/international/configuration.md)                                        |
+| Detect language from URL / Cookie / Header                   | [Locale Detection](/guides/advanced-features/international/locale-detection.md)                                  |
+| Implement paths with locale prefixes, such as `/en/about`    | [Routing Integration](/guides/advanced-features/international/routing.md)                                        |
+| Load translation resources from a remote service or platform | [Resource Loading -> Custom Backend](/guides/advanced-features/international/resource-loading.md#custom-backend) |
+| SSR, multiple entries, or custom instances                   | [Advanced Usage](/guides/advanced-features/international/advanced.md)                                            |
+| Look up Hooks / components / type definitions                | [API Reference](/guides/advanced-features/international/api.md)                                                  |
+
+## Core Capabilities
+
+- **Locale detection**: Supports detection from URL path, Cookie, LocalStorage, request headers, browser settings, and other sources, with configurable priority.
+- **Resource loading**: Supports HTTP static files, file system loading for SSR, custom SDK functions, and chained backend progressive loading.
+- **Routing integration**: Automatically adds locale path prefixes such as `/en/about`, and provides the `I18nLink` component for locale-aware navigation.
+- **SSR support**: Detects the language on the server and injects it into the page so the client can reuse it directly and avoid language flicker.
+- **TypeScript support**: Provides complete type definitions and supports type-safe translation keys.

package/docs/guides/advanced-features/{low-level.mdx → low-level.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 10
----
-
 # Low-Level Tools
 
 ## Usage
@@ -10,7 +6,7 @@ Modern.js internally integrates tools such as [TypeScript](https://www.typescrip
 
 Usually, the default configuration can meet most development needs. When there are special needs, it can be achieved through the underlying configuration.
 
-Take configuring Rspack as an example, just add [tools.rspack](/configure/app/tools/rspack) to the modern.config.ts:
+Take configuring Rspack as an example, just add [tools.rspack](/configure/app/tools/rspack.md) to the modern.config.ts:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -32,19 +28,19 @@ When the value is `Function`, the first parameter is the default configuration v
 
 Currently provided is as follows:
 
-| Tools              | Config                                                               |
-| ------------------ | -------------------------------------------------------------------- |
-| Rspack             | [tools.rspack](/configure/app/tools/rspack)                          |
-| Bundler Chain      | [tools.bundlerChain](/configure/app/tools/bundler-chain)             |
-| SWC                | [tools.swc](/configure/app/tools/swc)                                |
-| TypeScript Checker | [tools.tsChecker](/configure/app/tools/ts-checker)                   |
-| PostCSS            | [tools.postcss](/configure/app/tools/postcss)                        |
-| Less               | [tools.less](/configure/app/tools/less)                              |
-| Sass               | [tools.sass](/configure/app/tools/sass)                              |
-| CSS Extract        | [tools.cssExtract](/configure/app/tools/css-extract)                 |
-| CSS Loader         | [tools.cssLoader](/configure/app/tools/css-loader)                   |
-| Style Loader       | [tools.styleLoader](/configure/app/tools/style-loader)               |
-| Lightning CSS      | [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader) |
-| Minify CSS         | [tools.minifyCss](/configure/app/tools/minify-css)                   |
-| Autoprefixer       | [tools.autoprefixer](/configure/app/tools/autoprefixer)              |
-| HTML Plugin        | [tools.htmlPlugin](/configure/app/tools/html-plugin)                 |
+| Tools              | Config                                                                  |
+| ------------------ | ----------------------------------------------------------------------- |
+| Rspack             | [tools.rspack](/configure/app/tools/rspack.md)                          |
+| Bundler Chain      | [tools.bundlerChain](/configure/app/tools/bundler-chain.md)             |
+| SWC                | [tools.swc](/configure/app/tools/swc.md)                                |
+| TypeScript Checker | [tools.tsChecker](/configure/app/tools/ts-checker.md)                   |
+| PostCSS            | [tools.postcss](/configure/app/tools/postcss.md)                        |
+| Less               | [tools.less](/configure/app/tools/less.md)                              |
+| Sass               | [tools.sass](/configure/app/tools/sass.md)                              |
+| CSS Extract        | [tools.cssExtract](/configure/app/tools/css-extract.md)                 |
+| CSS Loader         | [tools.cssLoader](/configure/app/tools/css-loader.md)                   |
+| Style Loader       | [tools.styleLoader](/configure/app/tools/style-loader.md)               |
+| Lightning CSS      | [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader.md) |
+| Minify CSS         | [tools.minifyCss](/configure/app/tools/minify-css.md)                   |
+| Autoprefixer       | [tools.autoprefixer](/configure/app/tools/autoprefixer.md)              |
+| HTML Plugin        | [tools.htmlPlugin](/configure/app/tools/html-plugin.md)                 |

package/docs/guides/advanced-features/page-performance/{code-split.mdx → code-split.md}

@@ -1,13 +1,9 @@
----
-sidebar_position: 3
----
-
 # Code Splitting
 
 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:
 
 :::info
-When using Modern.js [Conventional routing](/guides/basic-features/routes/routes#conventional-routing). By default, code splitting is done according to the routing component, so you don't need to do it yourself.
+When using Modern.js [Conventional routing](/guides/basic-features/routes/routes.md#conventional-routing). By default, code splitting is done according to the routing component, so you don't need to do it yourself.
 :::
 
 - dynamic `import`
@@ -78,4 +74,4 @@ However, it's important to note that any Loadable API in SSR does not support th
 If you want to use `<Suspense>` in CSR projects with React 17 and below, you can substitute `React.lazy` with `loadable.lazy`.
 :::
 
-For details, see [Loadable API](/apis/app/runtime/utility/loadable).
+For details, see [Loadable API](/apis/app/runtime/utility/loadable.md).

package/docs/guides/advanced-features/page-performance/{inline-assets.mdx → inline-assets.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 13
----
-
 # Inline Static Assets
 
 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.
@@ -14,7 +10,7 @@ Modern.js will automatically inline static assets that are less than 10KB, but s
 
 By default, Modern.js will inline assets when the file size of is less than a threshold (the default is 10KB). When inlined, the asset will be converted to a Base64 encoded string and will no longer send a separate HTTP request. When the file size is greater than this threshold, it is loaded as a separate file with a separate HTTP request.
 
-The threshold can be modified with the [output.dataUriLimit](/configure/app/output/data-uri-limit) config. For example, set the threshold of images to 5000 Bytes, and set media assets not to be inlined:
+The threshold can be modified with the [output.dataUriLimit](/configure/app/output/data-uri-limit.md) config. For example, set the threshold of images to 5000 Bytes, and set media assets not to be inlined:
 
 ```ts
 export default {
@@ -102,7 +98,7 @@ Excluding assets from inlining will increase the number of assets that the Web A
 
 In addition to inlining static assets into JS files, Modern.js also supports inlining JS files into HTML files.
 
-Just enable the [output.inlineScripts](/configure/app/output/inline-scripts) config, and the generated JS files will not be written into the output directory, but will be directly inlined to the corresponding in the HTML file.
+Just enable the [output.inlineScripts](/configure/app/output/inline-scripts.md) config, and the generated JS files will not be written into the output directory, but will be directly inlined to the corresponding in the HTML file.
 
 ```ts
 export default {
@@ -120,7 +116,7 @@ Inline JS files may cause the single HTML file to be too large, and it will brea
 
 You can also inline CSS files into HTML files.
 
-Just enable the [output.inlineStyles](/configure/app/output/inline-styles) config, the generated CSS file will not be written into the output directory, but will be directly inlined to the corresponding in the HTML file.
+Just enable the [output.inlineStyles](/configure/app/output/inline-styles.md) config, the generated CSS file will not be written into the output directory, but will be directly inlined to the corresponding in the HTML file.
 
 ```ts
 export default {

package/docs/guides/advanced-features/page-performance/{optimize-bundle.mdx → optimize-bundle.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 13
----
-
 # Bundle Size Optimization
 
 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.
@@ -46,7 +42,7 @@ This will generate a bundle analysis report to help you identify large dependenc
 
 Modern.js will compile the code according to the project's Browserslist config, and inject some Polyfills. If the project does not need to be compatible with legacy browsers, you can adjust the Browserslist and drop some legacy browsers, thereby reducing the compilation overhead on syntax and polyfill.
 
-Modern.js's default [`output.overrideBrowserslist`](/configure/app/output/override-browserslist.html) config is:
+Modern.js's default [`output.overrideBrowserslist`](/configure/app/output/override-browserslist.md) config is:
 
 ```js
 ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];
@@ -59,12 +55,12 @@ For example, if you only need to be compatible with browsers above Chrome 100, y
 ```
 
 :::tip
-Please read the [Browserslist configuration](/guides/advanced-features/compatibility.html) chapter to know more about the usage of Browserslist.
+Please read the [Browserslist configuration](/guides/advanced-features/compatibility.md) chapter to know more about the usage of Browserslist.
 :::
 
 ## Usage polyfill
 
-When it is clear that third-party dependencies do not require additional polyfills, you can set [output.polyfill](/configure/app/output/polyfill.html) to `usage`.
+When it is clear that third-party dependencies do not require additional polyfills, you can set [output.polyfill](/configure/app/output/polyfill.md) to `usage`.
 
 In `usage` mode, Modern.js analyzes the syntax used in the source code and injects the required polyfill code on demand to reduce the size of polyfill.
 
@@ -77,7 +73,7 @@ export default {
 ```
 
 :::tip
-Please read the [Browser Compatibility](/guides/advanced-features/compatibility) chapter to know more about the usage of Browserslist.
+Please read the [Browser Compatibility](/guides/advanced-features/compatibility.md) chapter to know more about the usage of Browserslist.
 :::
 
 ## Image Compression

package/docs/{components/internal-logger.mdx → guides/advanced-features/server-monitor/logger.md}

@@ -1,3 +1,19 @@
+# Logs Events
+
+Log events are distributed by Modern.js as events of type `log`.
+
+## Built-in Events
+
+Based on server-side runtime logic, Modern.js provides the following log events:
+
+| Stage          | Message                                       | Level |
+| -------------- | --------------------------------------------- | ----- |
+| RENDER\_HTML   | App Render To HTML                            | error |
+| RENDER\_STREAM | An error occurs during streaming SSR          | error |
+| RENDER\_SHELL  | An error occurs during streaming render shell | error |
+
+## Built-in Monitor
+
 In Modern.js, log events are handled by `LoggerMonitor`, which outputs logs to the console.
 
 :::info

package/docs/guides/advanced-features/server-monitor/metrics.md

@@ -0,0 +1,58 @@
+# Metrics Events
+
+Metric events are distributed by Monitors as events of type `timing` or `counter`.
+
+## Built-in Events
+
+When SSR is enabled, we need to monitor server-side phase durations and have the capability to diagnose server-side issues.
+
+Based on server-side runtime logic, Modern.js provides the following metric events:
+
+| Key                      | Description                                                                                                            |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| server-handle-request    | Modern.js Server request handling duration                                                                             |
+| ssr-render-shell         | \[SSR] When using Streaming SSR, React renders a shell for early streaming. This marks shell rendering completion time |
+| ssr-render-html          | \[SSR] Time taken by React to render component tree to HTML (typically under 50ms)                                     |
+| server-middleware        | Total execution time of Modern.js custom server middlewares                                                            |
+| server-loader            | Server-side Data Loader total duration                                                                                 |
+| server-loader-#id        | Individual Data Loader durations on server-side                                                                        |
+| server-loader-navigation | Server-side Data Loader duration during client navigation                                                              |
+
+Modern.js server workflow diagram:
+
+![server](https://lf3-static.bytednsdoc.com/obj/eden-cn/eeeh7uhbepxlpe/edenx-website/e374def0-c179-40aa-9cfe-e82e181663b1.jpeg)
+
+## Built-in Monitor
+
+In Modern.js, metric events are also handled by `LoggerMonitor`, which outputs metrics to the console in a specific format.
+
+:::info
+The built-in `LoggerMonitor` depends on the [rslog](https://www.npmjs.com/package/rslog) library.
+:::
+
+The `rslog` instance initialized in Modern.js outputs logs at `debug` level and above in development environment by default, and outputs all logs in production environment. In the built-in `LoggerMonitor`, all metric events are output as Debug logs. Therefore, if you want to view metric event information in the development environment, you need to add additional environment variables.
+
+Developers can add the environment variable `DEBUG=true` when running the `dev` command. If running normally, after accessing, you can see the following output in the console:
+
+```shell
+> Local:    http://localhost:8080/
+> press h + enter to show shortcuts
+
+debug   SSR Debug - server-loader, cost: 2.000094, req.url = /
+debug   SSR Debug - ssr-prerender, cost: 6.99997, req.url = /
+debug   SSR Debug - ssr-render-html, cost: 0.999927, req.url = /
+debug   Debug - server-handle-request, cost: 19.999981, req.url = /
+debug     --> GET / 200 90ms
+```
+
+## Server-Timing
+
+Modern.js injects phase metrics as Server-Timing headers into HTML responses.
+
+Developers can retrieve these metrics using the [Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance) in browsers:
+
+```ts
+const navigation = performance.getEntriesByType('navigation')[0];
+const serverTiming = navigation.serverTiming;
+console.log(serverTiming);
+```

package/docs/guides/advanced-features/server-monitor/{monitors.mdx → monitors.md}

@@ -68,12 +68,12 @@ export interface Monitors {
 
 Modern.js comes with a built-in default Monitor, where different events trigger different behaviors in the built-in Monitor. For more details, see:
 
-- [Log Event](/guides/advanced-features/server-monitor/logger)
-- [Metrics Event](/guides/advanced-features/server-monitor/metrics)
+- [Log Event](/guides/advanced-features/server-monitor/logger.md)
+- [Metrics Event](/guides/advanced-features/server-monitor/metrics.md)
 
 ## Register Monitors
 
-Developers can register their own Monitors using the `push` API, but this can only be done in [server middleware](/guides/advanced-features/web-server#unstable-middleware) or [server plugins](/plugin/server-plugins/api). Registration is not available in Data Loaders, components, or init functions.
+Developers can register their own Monitors using the `push` API, but this can only be done in [server middleware](/guides/advanced-features/web-server.md#unstable-middleware) or [server plugins](/plugin/server-plugins/api.md). Registration is not available in Data Loaders, components, or init functions.
 
 ```ts title="server/modern.server.ts"
 import {

package/docs/guides/advanced-features/{source-build.mdx → source-build.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 11
----
-
 # Source Code Build Mode
 
 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.
@@ -68,7 +64,7 @@ The disadvantages are:
 
 ### Enabling Configuration
 
-You can enable source code build mode by setting [experiments.sourceBuild](/configure/app/experiments/source-build.html) to `true`.
+You can enable source code build mode by setting [experiments.sourceBuild](/configure/app/experiments/source-build.md) to `true`.
 
 ```ts
 export default {

package/docs/guides/advanced-features/{web-server.mdx → web-server.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 16
----
-
 # Custom Web Server
 
 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.
@@ -72,11 +68,7 @@ In the `server/modern.server.ts` file, you can add the following configurations
 
 In the **Plugin**, you can define **Middleware** and **RenderMiddleware**. The middleware loading process is illustrated in the following diagram:
 
-<img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/10eh7nuhpenuhog/server-md-wf.png"
-  style={{ width: '100%', maxWidth: '540px' }}
-/>
-
+![](https://lf3-static.bytednsdoc.com/obj/eden-cn/10eh7nuhpenuhog/server-md-wf.png)
 ### Basic Configuration
 
 ```ts title="server/modern.server.ts"

package/docs/guides/basic-features/{alias.mdx → alias.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 4
----
-
 # Path Alias
 
 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.
@@ -11,7 +7,7 @@ For example, if you frequently reference the `src/common/request.ts` module in y
 In Modern.js, there are two ways to set up path aliases:
 
 - Through the `paths` configuration in `tsconfig.json`.
-- Through the [source.alias](/configure/app/source/alias) configuration.
+- Through the [source.alias](/configure/app/source/alias.md) configuration.
 
 ## Using `tsconfig.json`'s `paths` Configuration
 
@@ -37,7 +33,7 @@ You can refer to the [TypeScript - paths](https://www.typescriptlang.org/tsconfi
 
 ## Use `source.alias` Configuration
 
-Modern.js provides the [source.alias](/configure/app/source/alias) configuration option. You can configure this option using an object or a function.
+Modern.js provides the [source.alias](/configure/app/source/alias.md) configuration option. You can configure this option using an object or a function.
 
 ### Use Cases
 
@@ -84,7 +80,7 @@ export default {
 
 The `paths` configuration in `tsconfig.json` takes precedence over the `source.alias` configuration. When a path matches the rules defined in both `paths` and `source.alias`, the value defined in `paths` will be used.
 
-You can adjust the priority of these two options using [source.aliasStrategy](/configure/app/source/alias-strategy).
+You can adjust the priority of these two options using [source.aliasStrategy](/configure/app/source/alias-strategy.md).
 
 ## Default Aliases
 

package/docs/guides/basic-features/css/{css-in-js.mdx → css-in-js.md}

@@ -10,15 +10,18 @@ The Modern.js plugin `@modern-js/plugin-styled-components` provides support for
 
 First, you need to install the `styled-components` plugin dependency and the `styled-components` library:
 
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs
-  command={{
-    npm: 'npm install @modern-js/plugin-styled-components styled-components -D',
-    yarn: 'yarn add @modern-js/plugin-styled-components styled-components -D',
-    pnpm: 'pnpm install @modern-js/plugin-styled-components styled-components -D',
-  }}
-/>
+
+```sh [npm]
+npm install @modern-js/plugin-styled-components styled-components -D
+```
+
+```sh [yarn]
+yarn add @modern-js/plugin-styled-components styled-components -D
+```
+
+```sh [pnpm]
+pnpm install @modern-js/plugin-styled-components styled-components -D
+```
 
 Then configure the `styled-components` plugin in `modern.config.ts`:
 

package/docs/guides/basic-features/css/{css-modules.mdx → css-modules.md}

@@ -38,7 +38,7 @@ export default () => {
 
 By default, only files ending in `*.module.css` are treated CSS Modules.
 
-If you want to treat all CSS files in the source directory as CSS Modules, you can enable the [output.disableCssModuleExtension](/configure/app/output/disable-css-module-extension) config, for example:
+If you want to treat all CSS files in the source directory as CSS Modules, you can enable the [output.disableCssModuleExtension](/configure/app/output/disable-css-module-extension.md) config, for example:
 
 ```ts
 export default {
@@ -63,7 +63,7 @@ We do not recommend enabling this config, because after enabling disableCssModul
 
 By default, only files ending in `*.module.css` are treated CSS Modules.
 
-If you want to enable CSS Modules only for specified style files, you can configure [output.cssModules](/configure/app/output/css-modules), for example:
+If you want to enable CSS Modules only for specified style files, you can configure [output.cssModules](/configure/app/output/css-modules.md), for example:
 
 ```ts
 export default {
@@ -149,7 +149,7 @@ After adding the type declaration, if the type error still exists, you can try t
 
 Although the above method can provide the type of CSS Modules, it cannot accurately prompt which classNames are exported by a certain CSS file.
 
-Modern.js supports generating accurate type declarations for CSS Modules, you only need to enable the [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration) config, and then execute the build, Modern.js will generate type declaration files for all CSS Modules.
+Modern.js supports generating accurate type declarations for CSS Modules, you only need to enable the [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration.md) config, and then execute the build, Modern.js will generate type declaration files for all CSS Modules.
 
 ```ts
 export default {

package/docs/guides/basic-features/css/{css.mdx → css.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 1
----
-
 # Styling
 
 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.
@@ -10,7 +6,7 @@ Modern.js has built-in a variety of commonly used CSS solutions, including Less
 
 Modern.js has built-in popular community CSS preprocessors, including Less and Sass.
 
-By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less) and [tools.sass](/configure/app/tools/sass).
+By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less.md) and [tools.sass](/configure/app/tools/sass.md).
 
 You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://v2.rsbuild.rs/plugins/list/plugin-stylus).
 
@@ -22,7 +18,7 @@ Please refer to [Rsbuild - Using PostCSS](https://v2.rsbuild.rs/guide/styling/cs
 
 ## Using Lightning CSS
 
-Modern.js supports using [Lightning CSS](https://lightningcss.dev/) to convert CSS code. This feature can be turned on by configuring [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader).
+Modern.js supports using [Lightning CSS](https://lightningcss.dev/) to convert CSS code. This feature can be turned on by configuring [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader.md).
 
 Please refer to [Rsbuild - Using Lightning CSS](https://v2.rsbuild.rs/guide/styling/css-usage#lightning-css) for detailed usage.
 

package/docs/guides/basic-features/data/{data-cache.mdx → data-cache.md}

@@ -1,11 +1,6 @@
----
-title: Data Caching
-sidebar_position: 4
----
-
 # Data Caching
 
-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), 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).
+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).
 
 ## Basic Usage
 

package/docs/guides/basic-features/data/{data-fetch.mdx → data-fetch.md}

@@ -1,14 +1,10 @@
----
-sidebar_position: 3
----
-
 # Data Fetching
 
 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.
 
 ## What is Data Loader
 
-Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes/routes). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export a `loader` function, known as Data Loader, which executes before the corresponding route component renders to provide data for the component. Here is an example:
+Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes/routes.md). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export a `loader` function, known as Data Loader, which executes before the corresponding route component renders to provide data for the component. Here is an example:
 
 ```bash
 .
@@ -54,7 +50,7 @@ In a CSR environment, the `loader` function executes on the browser side and can
 
 In an SSR environment, the `loader` function only executes on the server side for initial page loads and when navigating. Here it can call any Node.js APIs, and any dependencies or code used won't be included in the client-side bundle.
 
-When navigating on the client side, based on [conventional routing](/guides/basic-features/routes/routes), Modern.js supports parallel execution (requests) of all `loader` functions. For example, when visiting `/user/profile`, the `loader` functions under `/user` and `/user/profile` will execute in parallel, solving the request-render waterfall issue and significantly improving page performance.
+When navigating on the client side, based on [conventional routing](/guides/basic-features/routes/routes.md), Modern.js supports parallel execution (requests) of all `loader` functions. For example, when visiting `/user/profile`, the `loader` functions under `/user` and `/user/profile` will execute in parallel, solving the request-render waterfall issue and significantly improving page performance.
 
 :::tip
 The `loader` is responsible for data fetching, with route parameters and request information provided as input. Generally, there's no need to access browser APIs. It's recommended to keep it environment-agnostic for future SSR compatibility.
@@ -66,7 +62,7 @@ The `loader` function has two parameters used for getting route parameters and r
 
 ### params
 
-`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes/routes#dynamic-routes), which passed as parameters to the `loader` function:
+`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes/routes.md#dynamic-routes), which passed as parameters to the `loader` function:
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { LoaderFunctionArgs } from '@modern-js/runtime/router';
@@ -153,7 +149,7 @@ export async function loader() {
 
 ### Basic Usage
 
-In a `loader` function, you can handle errors by using `throw error` or `throw response`. When an error is thrown in the `loader` function, Modern.js will stop executing the remaining code in the current `loader` and switch the front-end UI to the defined [`ErrorBoundary`](/guides/basic-features/routes/routes#error-handling) component:
+In a `loader` function, you can handle errors by using `throw error` or `throw response`. When an error is thrown in the `loader` function, Modern.js will stop executing the remaining code in the current `loader` and switch the front-end UI to the defined [`ErrorBoundary`](/guides/basic-features/routes/routes.md#error-handling) component:
 
 ```tsx
 // routes/user/profile/page.data.ts

package/docs/guides/basic-features/data/{data-write.mdx → data-write.md}

@@ -1,10 +1,6 @@
----
-sidebar_position: 4
----
-
 # Data Writing
 
-In the [Data Fetching](/guides/basic-features/data/data-fetch) section, we introduced how Modern.js fetches data. This might bring up two questions:
+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:
 
 1. How do I update the data returned by the Data Loader?
 2. How do I send new data to the server?
@@ -13,7 +9,7 @@ In Modern.js, you can use Data Action to address these scenarios.
 
 ## What is Data Action
 
-Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes/routes). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export an `action` function, known as Data Action, which developers can call at an appropriate time:
+Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes/routes.md). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export an `action` function, known as Data Action, which developers can call at an appropriate time:
 
 ```bash
 .
@@ -69,7 +65,7 @@ export default () => {
 }
 ```
 
-After executing `submit`, the defined `action` function will be triggered. You can get the submitted data from the [parameters](/guides/basic-features/data/data-write.html#parameters) in the `action` function and ultimately send the data to the server.
+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.
 
 Once the `action` function executes, Modern.js will automatically run the `loader` function code to update the data and view accordingly.
 
@@ -81,7 +77,7 @@ Similar to the `loader` function, the `action` function takes two parameters: `p
 
 ### params
 
-`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes/routes#dynamic-routes), which are passed as parameters to the `action` function:
+`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes/routes.md#dynamic-routes), which are passed as parameters to the `action` function:
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { ActionFunctionArgs } from '@modern-js/runtime/router;
@@ -134,6 +130,7 @@ submit(null, { method: "post", action: "/logout" });
 ```
 
 The `submit` function takes two parameters. The first parameter is the `formData` passed to the server. The second parameter is an optional object where:
+
 - `method` corresponds to the form submission method. In most data writing scenarios, you can set the `method` to `post`.
 - `action` specifies the route component to trigger the Data Action. If not provided, it defaults to the current route component's action. For example, executing submit in `user/page.tsx` or its sub-components will trigger the action defined in `user/page.data.ts`.
 
@@ -223,7 +220,7 @@ In Modern.js, we aim to help developers automatically synchronize client and ser
 
 ![state manage](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-state-manage1.png)
 
-If the shared data in your project mainly comes from the server, you don't need to introduce a client-side state management library. Use Data Loader to request data and share it in sub-components via [`useRouteLoaderData`](/guides/basic-features/data/data-fetch). Use Data Action to modify and synchronize the server's state.
+If the shared data in your project mainly comes from the server, you don't need to introduce a client-side state management library. Use Data Loader to request data and share it in sub-components via [`useRouteLoaderData`](/guides/basic-features/data/data-fetch.md). Use Data Action to modify and synchronize the server's state.
 
 ## CSR and SSR
 

package/docs/guides/basic-features/debug/{mock.mdx → mock.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 5
----
-
 # Data Mocking
 
 Modern.js allows you to easily generate mock data so that the front-end can develop independently without depending on the back-end API.
@@ -20,7 +16,7 @@ By convention, when there is an `index.ts` in the `config/mock/` directory, mock
 └── modern.config.ts
 ```
 
-You can use [`dev.mockDir`](/configure/app/dev/mock-dir) to place the
+You can use [`dev.mockDir`](/configure/app/dev/mock-dir.md) to place the
 Mock entry in another directory:
 
 ```js title="modern.config.ts"

package/docs/guides/basic-features/debug/{proxy.mdx → proxy.md}

@@ -1,10 +1,6 @@
----
-sidebar_position: 6
----
-
 # Local Proxy
 
-Modern.js provides a way to configure the development proxy in [`dev.server.proxy`](/configure/app/dev/server).
+Modern.js provides a way to configure the development proxy in [`dev.server.proxy`](/configure/app/dev/server.md).
 
 For example, to proxy the local interface to another address:
 

package/docs/guides/basic-features/debug/{using-storybook.mdx → using-storybook.md}

@@ -1,9 +1,3 @@
----
-sidebar_position: 15
----
-
-import { PackageManagerTabs } from '@theme'
-
 # Using Storybook
 
 [Storybook](https://storybook.js.org/) is a tool specifically designed for component debugging. It provides:
@@ -26,7 +20,26 @@ This document only provides the simplest usage. For more information, please ref
 
 ## Installation
 
-<PackageManagerTabs command="install @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D" />
+
+```sh [npm]
+npm install @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D
+```
+
+```sh [yarn]
+yarn add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D
+```
+
+```sh [pnpm]
+pnpm add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D
+```
+
+```sh [bun]
+bun add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D
+```
+
+```sh [deno]
+deno add npm:@rsbuild/core npm:storybook-builder-rsbuild npm:storybook-addon-modernjs -D
+```
 
 You need to install `@rsbuild/core` in your project, otherwise the plugin may not work properly.
 
@@ -43,7 +56,6 @@ const config: StorybookConfig = {
 export default config
 ```
 
-
 ## BFF Integrated Calls in Storybook
 
 When you want to call BFF APIs directly in Storybook components (for example `/api/**`), start the BFF service and configure a proxy in Storybook's dev server to avoid CORS issues.