@modern-js/main-doc 2.25.1 → 2.26.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @modern-js/main-doc
 
+## 2.26.0
+
+### Patch Changes
+
+- @modern-js/builder-doc@2.26.0
+
+## 2.25.2
+
+### Patch Changes
+
+- 4a83fcd: docs(main-doc): fix wrong links and add missing files
+  docs(main-doc): 修复错误的链接，补充缺失的文件
+  - @modern-js/builder-doc@2.25.2
+
 ## 2.25.1
 
 ### Patch Changes

package/docs/en/apis/app/commands.mdx

@@ -71,7 +71,7 @@ modern dev --entry foo,bar
 
 ## modern build
 
-The `modern build` command will build a production-ready product in the `dist/` directory by default. You can specify the output directory by modifying the configuration [`output.distPath`](/configure/app/output/dist-path).
+The `modern build` command will build production-ready artifacts in the `dist/` directory by default. You can specify the output directory by modifying the configuration [`output.distPath`](/configure/app/output/dist-path).
 
 ```bash
 Usage: modern build [options]
@@ -96,7 +96,7 @@ File sizes after production build:
   645 B      dist/static/css/main.0dd3ecc1.css
 ```
 
-Open the above HTML file in the browser, you can see the tile diagram of the packaged product, and perform package volume analysis and optimization:
+Open the above HTML file in the browser, you can see the tile diagram of the bundled files, and perform package volume analysis and optimization:
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/mwa-build-analyze-8784f762c1ab0cb20935829d5f912c4c.png" />
 

package/docs/en/apis/app/hooks/config/icon.mdx

@@ -7,7 +7,7 @@ sidebar_position: 2
 
 ## Favicon
 
-When there is a `favicon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) configuration item for generating the favicon icon on the page:
+When there is a `favicon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) configuration option for generating the favicon icon on the page:
 
 ```
 ./config
@@ -32,7 +32,7 @@ When setting up the favicon, Modern.js looks for files in the following order:
 
 ## Apple Touch Icon
 
-When there is an `icon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.appIcon](/configure/app/html/app-icon) configuration item for generating the Apple Touch Icon icon under the iOS system.
+When there is an `icon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.appIcon](/configure/app/html/app-icon) configuration option for generating the Apple Touch Icon icon under the iOS system.
 
 ```
 ./config

package/docs/en/apis/app/runtime/web-server/middleware.mdx

@@ -123,7 +123,7 @@ export const middleware: SomeType = (ctx, next) => {
 };
 ```
 
-By default, the framework extension capability of Web Server is turned off after installing the framework extension plug-in. If you want to use the framework extension, you can turn it on through ['server.enableFrameworkExt'](/configure/app/server/enable-framework-ext.html).
+By default, the framework extension capability of Web Server is turned off after installing the framework extension plugin. If you want to use the framework extension, you can turn it on through ['server.enableFrameworkExt'](/configure/app/server/enable-framework-ext.html).
 
 
 :::info

package/docs/en/components/custom-router-micro-frontend.mdx

@@ -0,0 +1,40 @@
+```js title="src/App.tsx"
+import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
+
+import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, BrowserRouter, Link, Outlet } from '@modern-js/runtime/router';
+
+const AppLayout = () => (
+  <>
+    <div><Link to={'/table'}>Loading conventional routed sub-applications</Link></div>
+    <div><Link to={'/dashboard'}>Loading Self-Controlled Routing Sub-Applications</Link></div>
+    <div><Link to={'/'}>Uninstall a sub-application</Link></div>
+    <Outlet />
+  </>
+)
+
+export default () => {
+  const { apps, MApp, Table, Dashboard } = useModuleApps();
+
+  // If you are not using the MApp component, you need to use createBrowserRouter to create the route.
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" element={<AppLayout />}>
+        <Route key={'table'} path={'table/*'} element={<Table />} />
+        <Route key={'dashboard'} path={'dashboard/*'} element={<Dashboard />} />
+      </Route>
+    )
+  );
+
+  return (
+    // Approach 1: Use MApp to automatically load sub-applications based on the configured activeWhen parameter (this project is configured in modern.config.ts)
+    // <BrowserRouter>
+    //   <MApp />
+    // </BrowserRouter>
+
+    // Approach 2: Manually write Route components to load sub-applications, which is convenient for scenarios that require authentication and other pre-requisite operations
+    <>
+      <RouterProvider router={router} />
+    </>
+  );
+};
+```

package/docs/en/components/prerequisites.mdx

@@ -9,7 +9,7 @@ import NodeVersion from '@modern-js/builder-doc/docs/en/shared/nodeVersion.md';
 It is recommended to use [pnpm](https://pnpm.io/installation) to manage dependencies:
 
 ```bash
-npm install -g pnpm@7
+npm install -g pnpm@8
 ```
 
 :::note

package/docs/en/components/ua-polyfill.mdx

@@ -23,7 +23,7 @@ export default defineConfig({
 });
 ```
 
-After configuring `output.polyfill` as `ua` and executing `pnpm run build & & pnpm run serve` to start the server, visiting the page can see that the HTML product contains the following script:
+After configuring `output.polyfill` as `ua` and executing `pnpm run build & & pnpm run serve` to start the server, visiting the page can see that the HTML artifacts contains the following script:
 
 ```js
 <script src="/__polyfill__" crossorigin></script>

package/docs/en/configure/app/auto-load-plugin.mdx

@@ -24,7 +24,7 @@ export default defineConfig({
 
 ### Auto Registration plugin
 
-In addition to means registration, Modern.js also provides a way to automatically register plugins: set the `autoLoadPlugin` configuration item to `true`.
+In addition to means registration, Modern.js also provides a way to automatically register plugins: set the `autoLoadPlugin` configuration option to `true`.
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';

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

@@ -28,13 +28,13 @@ export default defineConfig({
 
 Assuming the address of Modern.js BFF server is `localhost:8080`, all requests starting with `api` will be proxied to `https://cnodejs.org`, for example, the request to `localhost:8080/api/v1/topics` will be proxied to `https://cnodejs.org/api/v1/topics`.
 
-import BFFProxyPathRewrite from "@site-docs/components/bff-proxy-path-rewrite";
+import BFFProxyPathRewrite from "@site-docs-en/components/bff-proxy-path-rewrite";
 
 <BFFProxyPathRewrite />
 
 Unlike [dev.proxy](/configure/app/dev/proxy), the proxy here only applies to requests entering the BFF/API service; at the same time, this configuration can not only be used in the development environment, but also proxies corresponding requests in the production environment.
 
-import BFFProxyPrinciple from "@site-docs/components/bff-proxy-principle";
+import BFFProxyPrinciple from "@site-docs-en/components/bff-proxy-principle";
 
 <BFFProxyPrinciple />
 

package/docs/en/configure/app/builder-plugins.mdx

@@ -53,7 +53,7 @@ export default defineConfig({
 });
 ```
 
-### Plugin configuration items
+### Plugin configuration options
 
 If the plugin provides some custom configuration options, you can pass in the configuration through the parameters of the plugin function.
 

package/docs/en/configure/app/runtime/master-app.mdx

@@ -37,4 +37,4 @@ interface AppInfo {
 
 In the `masterApp` configuration, developers can pass through options supported by Garfish
 
-All supported configuration items [see here](https://garfishjs.org/api/run/#%E5%8F%82%E6%95%B0).
+All supported configuration options [see here](https://garfishjs.org/api/run/#%E5%8F%82%E6%95%B0).

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

@@ -9,7 +9,7 @@ sidebar_label: state
 
 Once `state` is enabled, you can use [Model](/guides/topic-detail/model/quick-start) for state management.
 
-The specific configuration items are as follows:
+The specific configuration options are as follows:
 
 ## models
 

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

@@ -32,14 +32,15 @@ When the value type is `Object`, the following properties can be configured:
 ```ts title="modern.config.ts"
 export default defineConfig({
   server: {
-    forceCSR: true,
-    mode: 'stream',
-    inlineScript: false,
+    ssr: {
+      forceCSR: true,
+      mode: 'stream',
+      inlineScript: false,
+    },
   },
 });
 ```
 
-
 ### Active Fallback
 
 In a production environment, there are scenarios where it is necessary to actively fallback an SSR project to CSR. Examples include
@@ -50,7 +51,7 @@ In a production environment, there are scenarios where it is necessary to active
 
 3. When the SSR server is under heavy load, it may be necessary to fallback some traffic directly to the CSR to avoid service downtime.
 
-By configuring `ssr.forCSR` to `true` in the project, you can control this behavior through query strings or request headers.
+By configuring `server.ssr.forceCSR` to `true` in the project, you can control this behavior through query strings or request headers.
 
 For example, in a custom Web Server middleware, you can actively fallback when traffic exceeds a certain threshold:
 

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

@@ -15,6 +15,8 @@ import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
 
 :::tip
 When using Rspack as the bundler, SWC will be used for transpiling and compression by default, so you don't need to install or configure the SWC plugin.
+
+If you have configured the current SWC plugin when using Rspack, it will not have any effect.
 :::
 
 ## Install

package/docs/en/guides/advanced-features/bff/index.mdx

@@ -1,6 +1,7 @@
 ---
 title: BFF
 ---
+
 # BFF
 
 In the development of the concept of **front back separation**, the front-end part can do more and more things, and the front-end needs some UI-oriented data interfaces, so the industry introduced the concept of BFF (Backends for Frontends).

package/docs/en/guides/advanced-features/code-split.mdx

@@ -16,7 +16,7 @@ When using Modern.js [Conventional routing](/guides/basic-features/routes#conven
 
 ## import
 
-use dynamic `import()`, the JS modules pass to this API will be packaged as a separate JS file, for example:
+use dynamic `import()`, the JS modules pass to this API will be bundled as a separate JS file, for example:
 
 ```ts
 import('./math').then(math => {

package/docs/en/guides/advanced-features/rspack-start.mdx

@@ -92,4 +92,4 @@ Usually it is available and any errors that arise will fixed promptly.
 However, if there are any break changes that require modern.js to modify the code, we recommend to wait for the next version of modern.js.
 :::
 
-More examples of using package management tools, please refer to: [Lock nested dependency](/guides/get-started/upgrade.html#lock-nested-dependency).
+More examples of using package managers, please refer to: [Lock nested dependency](/guides/get-started/upgrade.html#lock-nested-dependency).

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

@@ -251,7 +251,7 @@ if (process.env.MODERN_TARGET === 'browser') {
 }
 ```
 
-After the development environment is packaged, the SSR and CSR products will be compiled into the following content. Therefore, there will be no more Web API errors in the SSR environment.
+After the development environment is bundled, the SSR and CSR artifacts will be compiled into the following content. Therefore, there will be no more Web API errors in the SSR environment.
 
 ```ts
 // SSR production

package/docs/en/guides/basic-features/data-fetch.mdx

@@ -336,7 +336,7 @@ export default async (): Promise<ProfileData> => {
 };
 ```
 
-4. When running on the server, the `loader` function will be packaged into a unified bundle, so we do not recommend using `__filename` and `__dirname` in server-side code.
+4. When running on the server, the `loader` function will be bundled into a unified bundle, so we do not recommend using `__filename` and `__dirname` in server-side code.
 
 ### FAQ
 

package/docs/en/guides/get-started/quick-start.mdx

@@ -13,7 +13,7 @@ import Prerequisites from "@site-docs-en/components/prerequisites"
 
 ## Installation
 
-Modern.js provides the `@modern-js/create` tool to create projects. Do not install it globally, use `npx` to run it.
+Modern.js provides the `@modern-js/create` tool to create projects. It does not require global installation and can be run on-demand using `npx`.
 
 You can create a project in an existing empty directory:
 
@@ -47,21 +47,41 @@ In a Modern.js project created using `@modern-js/create`, a `modern.config.ts` f
 You can modify the configuration through this file to override the default behavior of Modern.js. For example, to enable SSR, add the following configuration:
 
 ```ts
-import { defineConfig } from '@modern-js/app-tools';
+import { appTools, defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
   runtime: {
     router: true,
-    state: true,
   },
   server: {
     ssr: true,
   },
+  plugins: [appTools()],
 });
 ```
 
 After running `pnpm run dev` again, you can find that the project has completed page rendering on the server in the browser's Network menu.
 
+## Core npm Package
+
+In a newly created project, the `@modern-js/app-tools` npm package is installed by default. It is the core package of the Modern.js framework and provides the following capabilities:
+
+- It offers commonly used CLI commands such as `modern dev`, `modern build`, and more.
+- It integrates Modern.js Core, providing capabilities for configuration parsing, plugin loading, and more.
+- It integrates Modern.js Builder, providing build capabilities.
+- It integrates Modern.js Server, providing capabilities for development and production servers.
+- It integrates some commonly used plugins, such as `plugin-lint`, `plugin-data-loader`, and more.
+
+`@modern-js/app-tools` is implemented based on the plugin system of Modern.js. Essentially, it is a plugin. Therefore, you need to register `appTools` in the `plugins` field of the configuration file:
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  plugins: [appTools()],
+});
+```
+
 ## Build the project
 
 To build the production artifacts of the project, run `pnpm run build` in the project:

package/docs/en/guides/topic-detail/changesets/add.mdx

@@ -19,7 +19,7 @@ A changeset includes:
 ## Steps
 
 :::info
-The following example commands are all using pnpm. If you need to use other package management tools, please replace them as needed.
+The following example commands are all using pnpm. If you need to use other package managers, please replace them as needed.
 :::
 
 ### NPM Module

package/docs/en/guides/topic-detail/changesets/release-pre.mdx

@@ -9,7 +9,7 @@ Before doing an actual release, we also need to publish a pre-release version fo
 ## Steps
 
 :::info
-The following example commands are all using pnpm. If you need to use other package management tools, please replace them as needed.
+The following example commands are all using pnpm. If you need to use other package managers, please replace them as needed.
 :::
 
 #### Run the bump command to upgrade the version of the pre-release

package/docs/en/guides/topic-detail/changesets/release.mdx

@@ -9,7 +9,7 @@ When releasing a version, we need to upgrade the version of the corresponding pa
 ## Steps
 
 :::info
-The following example commands are all using pnpm. If you need to use other package management tools, please replace them as needed.
+The following example commands are all using pnpm. If you need to use other package managers, please replace them as needed.
 
 :::
 

package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -299,10 +299,21 @@ export const myPlugin = (): CliPlugin => ({
 
 ### `beforeCreateCompiler`
 
-- Function: Provides access to the Webpack configuration used to create the Webpack Compiler within middleware functions.
-- Execution Stage: Executed before creating the Webpack Compiler.
-- Hook Model: AsyncWorkflow.
-- Type: `AsyncWorkflow<{ webpackConfigs: Configuration[];}, unknown>`.
+- Function: A callback function triggered before creating the underlying Compiler instance, and you can get the final configuration array of the underlying bundler through the `bundlerConfigs` parameter:
+  - If the current bundler is webpack, you will get the webpack Compiler object.
+  - If the current bundler is Rspack, you will get the Rspack Compiler object.
+  - The configuration array may contain one or multiple configurations, depending on whether you have enabled features such as SSR.
+- Execution Stage: Executed before creating the Compiler instance when running the `dev` or `build` command.
+- Hook Model: `AsyncWorkflow`.
+- Type:
+
+```ts
+type BeforeCreateCompiler = AsyncWorkflow<
+  { bundlerConfigs: Configuration[] },
+  unknown
+>;
+```
+
 - Usage Example:
 
 ```ts
@@ -311,8 +322,9 @@ import type { CliPlugin } from '@modern-js/core';
 export const myPlugin = (): CliPlugin => ({
   setup(api) {
     return {
-      beforeCreateCompiler: ({ webpackConfigs }) => {
-        // do something
+      beforeCreateCompiler: ({ bundlerConfigs }) => {
+        console.log('Before create compiler.');
+        console.log(bundlerConfigs);
       },
     };
   },
@@ -321,10 +333,20 @@ export const myPlugin = (): CliPlugin => ({
 
 ### `afterCreateCompiler`
 
-- Function: Provides access to the created Webpack Compiler within middleware functions.
-- Execution Stage: Executed after creating the Webpack Compiler.
-- Hook Model: AsyncWorkflow.
-- Type: `AsyncWorkflow<{ compiler: Compiler | MultiCompiler | undefined; }, unknown>`.
+- Function: A callback function triggered after creating a Compiler instance and before executing the build. You can access the Compiler instance object through the `compiler` parameter:
+  - If the current bundler is webpack, you will get the webpack Compiler object.
+  - If the current bundler is Rspack, you will get the Rspack Compiler object.
+- Execution Stage: Executed after creating the Compiler object.
+- Hook Model: `AsyncWorkflow`.
+- Type:
+
+```ts
+type AfterCreateCompiler = AsyncWorkflow<
+  { compiler: Compiler | MultiCompiler | undefined },
+  unknown
+>;
+```
+
 - Usage Example:
 
 ```ts
@@ -334,7 +356,8 @@ export const myPlugin = (): CliPlugin => ({
   setup(api) {
     return {
       afterCreateCompiler: ({ compiler }) => {
-        // do something
+        console.log('After create compiler.');
+        console.log(compiler);
       },
     };
   },
@@ -368,10 +391,20 @@ export const myPlugin = (): CliPlugin => ({
 
 ### `beforeBuild`
 
-- Function: Tasks to be executed before the main process of the `build` command, provides access to the Webpack configuration used for building.
-- Execution Stage: Executed before starting the project build when running the `build` command.
-- Hook Model: AsyncWorkflow.
-- Type: `AsyncWorkflow<{ webpackConfigs: Configuration[]; }>`.
+- Function: A callback function triggered before executing production environment builds. You can access the final configuration array of the underlying bundler through the `bundlerConfigs` parameter.
+  - If the current bundler is webpack, you will get the webpack Compiler object.
+  - If the current bundler is Rspack, you will get the Rspack Compiler object.
+  - The configuration array may contain one or multiple configurations, depending on whether you have enabled features such as SSR.
+- Execution Stage: Executed after running the `build` command and before the actual build process begins.
+- Hook Model: `AsyncWorkflow`.
+- Type:
+
+```ts
+type BeforeBuild = AsyncWorkflow<{
+  bundlerConfigs: WebpackConfig[] | RspackConfig[];
+}>;
+```
+
 - Usage Example:
 
 ```ts
@@ -380,8 +413,9 @@ import type { CliPlugin } from '@modern-js/core';
 export const myPlugin = (): CliPlugin => ({
   setup(api) {
     return {
-      beforeBuild: () => {
-        // do something
+      beforeBuild: ({ bundlerConfigs }) => {
+        console.log('Before build.');
+        console.log(bundlerConfigs);
       },
     };
   },
@@ -390,10 +424,19 @@ export const myPlugin = (): CliPlugin => ({
 
 ### `afterBuild`
 
-- Function: Tasks to be executed after the main process of the `build` command.
-- Execution Stage: Executed after the project build is completed when running the `build` command.
-- Hook Model: AsyncWorkflow.
-- Type: `AsyncWorkflow<void, unknown>`.
+- Function: A callback function triggered after running the production build. You can access the build result information through the `stats` parameter.
+  - If the current bundler is webpack, you will get webpack Stats.
+  - If the current bundler is Rspack, you will get Rspack Stats.
+- Execution Stage: It is executed after running the `build` command and completing the build.
+- Hook Model: `AsyncWorkflow`.
+- Type:
+
+```ts
+type AfterBuild = AsyncWorkflow<{
+  stats?: Stats | MultiStats;
+}>;
+```
+
 - Usage Example:
 
 ```ts
@@ -402,8 +445,9 @@ import type { CliPlugin } from '@modern-js/core';
 export const myPlugin = (): CliPlugin => ({
   setup(api) {
     return {
-      afterBuild: () => {
-        // do something
+      afterBuild: ({ stats }) => {
+        console.log('After build.');
+        console.log(stats);
       },
     };
   },

package/docs/en/guides/topic-detail/generator/create/option.md

@@ -65,9 +65,9 @@ By default, `@modern-js/create` will automatically identify the user's system la
 
 Specify the default project configuration.
 
-By default, `@modern-js/create` will prompt for interactive questions such as language selection and package management tools during the execution process. When it is necessary to specify these configuration contents in advance, they can be passed in through this field.
+By default, `@modern-js/create` will prompt for interactive questions such as language selection and package managers during the execution process. When it is necessary to specify these configuration contents in advance, they can be passed in through this field.
 
-This field is a JSON string. For example, when specifying a package management tool:
+This field is a JSON string. For example, when specifying a package manager:
 
 ```bash
 npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
@@ -122,7 +122,7 @@ npx @modern-js/create@next --dist-tag next
 
 Specify specific package version dependencies when creating a project.
 
-If you need to specify a specific package version when creating a project, you can use this parameter. This parameter will configure `pnpm.overrides` (if the package management tool is pnpm) or `resolutions` to lock the package version number in the `package.json` file in the project root directory.
+If you need to specify a specific package version when creating a project, you can use this parameter. This parameter will configure `pnpm.overrides` (if the package manager is pnpm) or `resolutions` to lock the package version number in the `package.json` file in the project root directory.
 
 The parameter value is a JSON string.
 

package/docs/en/guides/topic-detail/generator/plugin/api/afterForged.md

@@ -46,4 +46,4 @@ Parameters:
 
 ### install
 
-Installs dependencies in the root directory of the project. The `install` function will use the corresponding package management tool according to the value of `packageManager` to install dependencies.
+Installs dependencies in the root directory of the project. The `install` function will use the corresponding package manager according to the value of `packageManager` to install dependencies.

package/docs/en/guides/topic-detail/generator/plugin/api/onForged.md

@@ -215,7 +215,7 @@ Parameter types:
 updateInfo: Record<string, any>
 ```
 
-- `updateInfo`: Update content information. `updateModernConfig` is a package based on `updateJSONFile`, which will automatically update under the `edenxConfig` field. Only the configuration fields under `modernConfig` need to be filled in `updateInfo`.
+- `updateInfo`: Update content information. `updateModernConfig` is a package based on `updateJSONFile`, which will automatically update under the `modernConfig` field. Only the configuration fields under `modernConfig` need to be filled in `updateInfo`.
 
 For example, enable SSR:
 

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -39,7 +39,7 @@ After the project is created, we can enable the `micro frontend` through `pnpm r
 
 Next, let's register the micro frontend plugin and add the main micro frontend app and add the list of sub-apps:
 
-import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
+import EnableMicroFrontend from "@site-docs-en/components/enable-micro-frontend";
 
 <EnableMicroFrontend />
 
@@ -127,7 +127,7 @@ Since it is a self-controlled route, we delete the `routes/` folder and add the
 
 #### Load sub-app
 
-import CustomRouterMicroFrontend from "@site-docs/components/custom-router-micro-frontend";
+import CustomRouterMicroFrontend from "@site-docs-en/components/custom-router-micro-frontend";
 
 <CustomRouterMicroFrontend />
 

package/docs/en/guides/topic-detail/micro-frontend/c03-main-app.mdx

@@ -8,7 +8,7 @@ In the previous [Experience micro frontend](/guides/topic-detail/micro-frontend/
 
 After creating an application project through the `@modern-js/create` command, you can execute `pnpm run new` in the project (the `modern new` command is actually executed). After selecting the 「micro frontend」 mode, the micro frontend will be installed. Dependencies, just register the plugin manually.
 
-import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
+import EnableMicroFrontend from "@site-docs-en/components/enable-micro-frontend";
 
 <EnableMicroFrontend />
 
@@ -23,10 +23,10 @@ You can register the sub-application information directly through the configurat
 :::tip
 It can be configured at runtime via the API [defineConfig](/apis/app/runtime/app/define-config).
 
-When the parameter is a function, it cannot be serialized to the product code, so please configure it through defineConfig when it comes to configuration such as functions
+When the parameter is a function, it cannot be serialized to the output code, so please configure it through defineConfig when it comes to configuration such as functions
 :::
 
-import MicroRuntimeConfig from "@site-docs/components/micro-runtime-config";
+import MicroRuntimeConfig from "@site-docs-en/components/micro-runtime-config";
 
 <MicroRuntimeConfig />
 

package/docs/en/guides/topic-detail/model/manage-effects.mdx

@@ -248,5 +248,5 @@ const handleClick = async () => {
 ```
 
 :::info
-[Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/effects)
+[Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/effects)
 :::

package/docs/en/guides/topic-detail/model/model-communicate.mdx

@@ -100,7 +100,7 @@ The final effect is as follows:
 ![communicate-models](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/models-communicate.gif)
 
 :::info Additional Information
-- Full example code for this section can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/models-communication).
+- Full example code for this section can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/models-communication).
 - For more information about the relevant API, please refer to: [model](/apis/app/runtime/model/model_#function-types).
 
 :::

package/docs/en/guides/topic-detail/model/performance.mdx

@@ -165,6 +165,6 @@ const barModel = model("bar").define({
 We created a caching function `createSelector`, which only recalculates the value of `combineA` when the state of `barModel` changes or the state `a` of `fooModel` changes.
 
 :::info Additional Information
-You can find the complete example code of this section [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/performance-optimization).
+You can find the complete example code of this section [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/performance-optimization).
 :::
 

package/docs/en/guides/topic-detail/model/quick-start.mdx

@@ -4,7 +4,7 @@ title: Quick Start
 ---
 # Quick Start
 
-import ReduckMigration from "@site-docs/components/reduck-migration"
+import ReduckMigration from "@site-docs-en/components/reduck-migration"
 
 <ReduckMigration />
 
@@ -110,5 +110,5 @@ The final demonstration effect is as follows:
 
 ![countModel](https://lf3-static.bytednsdoc.com/obj/eden-cn/eueh7vhojuh/modern/simple-count-model.gif)
 
-That completes a simple counter application. You can view the complete example code for this section [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model).
+That completes a simple counter application. You can view the complete example code for this section [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/counter-model).