@modern-js/main-doc 2.25.0 → 2.25.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @modern-js/main-doc
 
+## 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
+
+- @modern-js/builder-doc@2.25.1
+
 ## 2.25.0
 
 ### 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/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/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/basic-features/html.mdx

@@ -2,6 +2,7 @@
 title: HTML Template
 sidebar_position: 9
 ---
+
 # HTML Template
 
 Modern.js provides **JSX syntax** and **HTML(EJS) syntax** to customize the HTML template.
@@ -44,7 +45,7 @@ import { Html, Body, Root, Head, Scripts } from '@modern-js/runtime/document';
 
 - `Head`: provide the ability of native Head Element and automatically fills in `<meta>` and `<Scripts>` components.
 
-- `Scripts`: provide the ability to adjust the position of script tags injected into the HTML during the build process. By default, it is placed in the `<Head>` component.
+- `Scripts`: Used to control the placement of the `<script>` tags generated by the build. By default, they are placed within the `<Head>` component.
 
 - `Comment`: retain user-written comments like `<!-- gateway -->` and outputs them to the rendered HTML.
 
@@ -59,7 +60,7 @@ Modern.js also provides `DocumentContext` to provide some configuration and envi
 - `entryName`: the current entry name.
 - `templateParams`: parameters of HTML template (compatible with traditional templates, so it's not recommended for use).
 
-### Example
+### Basic Example
 
 ```tsx
 import React, { useContext } from 'react';
@@ -68,8 +69,8 @@ import {
   Root,
   Head,
   Body,
-  DocumentContext,
   Comment,
+  DocumentContext,
 } from '@modern-js/runtime/document';
 
 export default function Document(): React.ReactElement {
@@ -89,9 +90,9 @@ export default function Document(): React.ReactElement {
       <Body>
         <Root rootId="root">
           <h1 style={{ color: 'red' }}>Some Params: </h1>
-          <h2> entryName：{entryName}</h2>
-          <h2> title：{htmlConfig.title}</h2>
-          <h2> rootId: {templateParams.mountId}</h2>
+          <h2>entryName: {entryName}</h2>
+          <h2>title: {htmlConfig.title}</h2>
+          <h2>rootId: {templateParams.mountId}</h2>
         </Root>
         <h1>bottom</h1>
       </Body>
@@ -105,46 +106,62 @@ The above JSX components will generate the following HTML template:
 ```html
 <!DOCTYPE html>
 <html>
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport"
-        content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="renderer" content="webkit">
-    <meta name="layoutmode" content="standard">
-    <meta name="imagemode" content="force">
-    <meta name="wap-font-scale" content="no">
-    <meta name="format-detection" content="telephone=no">
-    <link rel="icon" href="/a.icon">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="renderer" content="webkit" />
+    <meta name="layoutmode" content="standard" />
+    <meta name="imagemode" content="force" />
+    <meta name="wap-font-scale" content="no" />
+    <meta name="format-detection" content="telephone=no" />
+    <link rel="icon" href="/a.icon" />
     <script defer src="/static/js/builder-runtime.js"></script>
     <script defer src="/static/js/lib-react.js"></script>
     <script defer src="/static/js/lib-polyfill.js"></script>
     <script defer src="/static/js/lib-router.js"></script>
-
-    <script>
-      ...
-    </script>
-    <script defer src="/static/js/sub.js"></script>
+    <script defer src="/static/js/main.js"></script>
     <link href="https://modernjs.dev" />
     <!-- Need a Comment -->
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root">
-        <!--<?- html ?>-->
-        <h1 style="color:red">Some Params: </h1>
-        <h2> entryName：sub</h2>
-        <h2> title：</h2>
-        <h2> rootId: root</h2>
+      <!--<?- html ?>-->
+      <h1 style="color:red">Some Params:</h1>
+      <h2>entryName: main</h2>
+      <h2>title：</h2>
+      <h2>rootId: root</h2>
     </div>
     <h1>bottom</h1>
     <!--<?- chunksMap.js ?>-->
     <!--<?- SSRDataScript ?>-->
-</body>
-
+  </body>
 </html>
+```
+
+### Scripts Component Example
 
+You can use the `<Scripts>` component to insert the `<script>` tags generated by the build inside the `<body>` tag:
+
+```tsx
+import React from 'react';
+import { Html, Root, Head, Body, Scripts } from '@modern-js/runtime/document';
+
+export default function Document(): React.ReactElement {
+  return (
+    <Html>
+      <Head></Head>
+      <Body>
+        <Root rootId="root"></Root>
+        <Scripts />
+      </Body>
+    </Html>
+  );
+}
 ```
 
 ## HTML Syntax
@@ -164,7 +181,7 @@ Under the application root directory, create the `config/html/` directory, which
 
 **These fragments will be injected into the default HTML template according to their positions.**
 
-```html
+```xml
 <!DOCTYPE html>
 <html>
   <head>

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/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/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).
 

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

@@ -163,7 +163,7 @@ function ThreeComponent() {
 
 Using React's refs can also achieve similar effects. In fact, `useStaticModel` also uses refs internally. However, using `useStaticModel` directly helps decouple the state management logic from the component and converge it into the Model layer.
 
-The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/static-model).
+The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/static-model).
 
 ### Using as Local State
 
@@ -194,7 +194,7 @@ Click the `add` button of `Counter` and `LocalCounter` respectively, and the sta
 
 ![local-model](https://lf3-static.bytednsdoc.com/obj/eden-cn/eueh7vhojuh/modern/local-model.gif)
 
-The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/local-model).
+The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/local-model).
 
 ## Using outside of components
 
@@ -237,7 +237,7 @@ setInterval(() => {
 }, 1000);
 ```
 
-The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model-outof-react).
+The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/counter-model-outof-react).
 
 :::info
 If the Store object is manually created through [`createStore`](/apis/app/runtime/model/create-store), there is no need to obtain it through `useStore` in the component, and it can be used directly.

package/docs/zh/apis/monorepo/commands/deploy.mdx

@@ -9,7 +9,7 @@ Usage: modern deploy [options]
 deploy project
 
 Options:
-  -p, --path [path]  Specify the path of the product output (default: "output")
+  -p, --path [path]  Specify the path of the output files (default: "output")
   -h, --help         display help for command
 ```
 

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

@@ -2,6 +2,7 @@
 title: builderPlugins (构建插件)
 sidebar_position: 10
 ---
+
 # builderPlugins (构建插件)
 
 - **类型：** `BuilderPlugin[]`
@@ -36,7 +37,7 @@ Modern.js Builder 是 Modern.js 底层的构建引擎，请阅读 [构建能力]
 使用 npm 上的插件，需要通过包管理器安装插件，并通过 import 引入。
 
 ```ts title="modern.config.ts"
-import myBuilderPlugin from 'my-builder-plugin';
+import { myBuilderPlugin } from 'my-builder-plugin';
 
 export default defineConfig({
   builderPlugins: [myBuilderPlugin()],
@@ -48,7 +49,7 @@ export default defineConfig({
 使用本地代码仓库中的插件，直接通过相对路径 import 引入即可。
 
 ```ts title="modern.config.ts"
-import myBuilderPlugin from './plugin/myBuilderPlugin';
+import { myBuilderPlugin } from './plugin/myBuilderPlugin';
 
 export default defineConfig({
   builderPlugins: [myBuilderPlugin()],
@@ -60,7 +61,7 @@ export default defineConfig({
 如果插件提供了一些自定义的配置项，可以通过插件函数的参数传入配置。
 
 ```ts title="modern.config.ts"
-import myBuilderPlugin from 'my-builder-plugin';
+import { myBuilderPlugin } from 'my-builder-plugin';
 
 export default defineConfig({
   builderPlugins: [