@modern-js/main-doc 0.0.0-next-1680864210554 → 0.0.0-next-1680878011563

package/docs/en/guides/basic-features/routes.mdx

@@ -2,6 +2,7 @@
 title: Routes
 sidebar_position: 1
 ---
+
 # Routes
 
 Modern.js build-in provides partial support for [React Router 6](https://reactrouter.com/en/main) and provides various types of routing modes. According to different [entry](/guides/concept/entries) types, routing is divided into three modes, namely **Conventional routing**, **Self-controlled routing** and **Other**.
@@ -57,8 +58,8 @@ Similarly, `routes/user/layout.tsx` will be used as a layout component for all c
 ```tsx
 <Layout>
   <UserLayout>
-    <UserPage>
-  <UserLayout>
+    <UserPage />
+  </UserLayout>
 </Layout>
 ```
 
@@ -106,8 +107,8 @@ In order to facilitate the introduction of the relationship between `<Layout>` a
 ```tsx
 <Layout>
   <UserLayout>
-    <UserPage>
-  <UserLayout>
+    <UserPage />
+  </UserLayout>
 </Layout>
 ```
 
@@ -158,10 +159,9 @@ The `routes/$.tsx` component is rendered when accessing any path that does not m
 import { useParams } from '@modern-js/runtime/router';
 // When the path is `/aaa/bbb`
 const params = useParams();
-params['*']  // => 'aaa/bbb'
+params['*']; // => 'aaa/bbb'
 ```
 
-
 ### Layout with No Path
 
 When a directory name begins with `__`, the corresponding directory name is not converted to the actual routing path, such as the following file directory:
@@ -230,15 +230,15 @@ When a route jumps from `/` to `/blog`, if the JS Chunk of the `<Blog>` componen
 You can redirect routes by creating a [`data loader`](/guides/basic-features/data-fetch) file, Suppose you have the file `routes/user/page.tsx` and you want to redirect the route corresponding to this file, you can create the file `routes/user/page.loader.ts`:
 
 ```ts title="routes/user/page.loader.ts"
-import { redirect } from '@modern-js/runtime/router'
+import { redirect } from '@modern-js/runtime/router';
 
 export default () => {
   const user = await getUser();
-  if(!user){
+  if (!user) {
     return redirect('/login');
   }
   return null;
-}
+};
 ```
 
 ### ErrorBoundary
@@ -255,15 +255,15 @@ Within the `<ErrorBoundary>` component, you can use [useRouteError](/apis/app/ru
 
 ```tsx
 import { useRouteError } from '@modern-js/runtime/router';
-export default const ErrorBoundary = () => {
+export const ErrorBoundary = () => {
   const error = useRouteError();
   return (
     <div>
-        <h1>{error.status}</h1>
-        <h2>{error.message}</h2>
+      <h1>{error.status}</h1>
+      <h2>{error.message}</h2>
     </div>
-  )
-}
+  );
+};
 ```
 
 ### Hooks before rendering
@@ -286,15 +286,13 @@ This feature is useful when the application requires pre-page data, custom data
 :::
 
 ```ts title="src/routes/layout.tsx"
-import {
-  RuntimeContext,
-} from '@modern-js/runtime';
+import { RuntimeContext } from '@modern-js/runtime';
 
 export const init = (context: RuntimeContext) => {
   return {
     message: 'Hello World',
-  }
-}
+  };
+};
 ```
 
 ```tsx title="src/routes/page.tsx"
@@ -305,7 +303,7 @@ export default () => {
   const { message } = context.getInitData();
 
   return <div>{message}</div>;
-}
+};
 ```
 
 When working with SSR, the browser side can get the data returned by `init` during SSR, and the developer can decide whether to retrieve the data on the browser side to overwrite the SSR data, for example:
@@ -317,18 +315,18 @@ export const init = (context: RuntimeContext) => {
   if (process.env.MODERN_TARGET === 'node') {
     return {
       message: 'Hello World By Server',
-    }
+    };
   } else {
     const { context } = runtimeContext;
     const data = context.getInitData();
     // If do not get the expected data
     if (!data.message) {
       return {
-        message: 'Hello World By Client'
-      }
+        message: 'Hello World By Client',
+      };
     }
   }
-}
+};
 ```
 
 ### Runtime Configuration
@@ -341,9 +339,9 @@ import type { AppConfig } from '@modern-js/runtime';
 export const config = (): AppConfig => {
   return {
     router: {
-      supportHtml5History: false
-    }
-  }
+      supportHtml5History: false,
+    },
+  };
 };
 ```
 
@@ -367,7 +365,7 @@ export default () => {
 ```
 
 :::note
-Modern.js has a series of resource loading and rendering optimizations to the default convention-based routing, and provides out-of-the-box SSR capabilities,  when using self-directed routing, need to be packaged by the developer, and it is recommended that developers use convention-based routing.
+Modern.js has a series of resource loading and rendering optimizations to the default convention-based routing, and provides out-of-the-box SSR capabilities, when using self-directed routing, need to be packaged by the developer, and it is recommended that developers use convention-based routing.
 
 :::
 

package/docs/en/guides/concept/entries.mdx

@@ -132,9 +132,9 @@ The content of the file generated by Modern.js is as follows:
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import customBootstrap from '@_edenx_src/index.tsx';
-import App from '@_edenx_src/App';
-import { router, state } from '@edenx/runtime/plugins';
+import customBootstrap from '@_modern_js_src/index.tsx';
+import App from '@_modern_js_src/App';
+import { router, state } from '@modern-js/runtime/plugins';
 
 const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
 const MOUNT_ID = 'root';

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

@@ -7,39 +7,22 @@ sidebar_position: 2
 
 ## Environment
 
-### Node.js
+import Prerequisites from "@site-docs-en/components/prerequisites"
 
-Requires [Node.js LTS](https://github.com/nodejs/Release) and ensures that the Node version is greater than or equal to 14.19.0, 16.x version is recommended.
-
-Modern.js recommend installing [nvm](https://github.com/nvm-sh/nvm#install--update-script) in the development environment and integrating [script to automatically switch node versions](https://github.com/nvm-sh/nvm#deeper-shell-integration) in the shell.
-
-Then there is a `.nvmrc` file with the content of `lts/fermium` or `lts/gallium` in the root directory of the repository, it will automatically install or switch to the correct Node.js version when entering the repository.
-
-### pnpm
-
-[pnpm](https://pnpm.io/installation) is recommended for package management.
-
-```bash
-npm install -g pnpm@7
-```
-
-:::note
-Modern.js also supports other package managers, such as `yarn` or `npm`.
-
-:::
+<Prerequisites />
 
 ## Installation
 
-Modern.js provides the `@modern-js/create` tool to create projects. Don't install globally, use `npx` to run on demand.
+Modern.js provides the `@modern-js/create` tool for creating new projects. You can use `npx` to run it.
 
-Projects can be created using an existing empty directory:
+You can create the project in an existing empty directory:
 
 ```bash
 mkdir myapp && cd myapp
 npx @modern-js/create
 ```
 
-Projects can also be created directly from the new directory:
+You can also directly create the project as a new folder:
 
 ```bash
 npx @modern-js/create myapp
@@ -161,4 +144,4 @@ Open http://localhost:8000/ in the browser and the content should be the same as
 
 ## Deploy
 
-After the local verification is completed, the products under `dist/` can be organized into the structure required by the server for deployment.
+Once the local verification is complete, the outputs under `dist` folder can be organized into the structure required by the server for deployment.

package/docs/en/guides/get-started/upgrade.mdx

@@ -25,24 +25,24 @@ You can see that the dependency in the project `package.json` has been changed t
 
 ## Specify version upgrade
 
-Modern.js all packages are published using the **unified version number**.
+All packages of Modern.js are published using the **unified version number**.
 
-According to the website Release Note, developers can also manually upgrade the project to the desired version.
+According to the website release note, developers can also manually upgrade the project to the desired version.
 
 :::tip
 When upgrading, you need to upgrade to all packages provided by the Modern.js, rather than upgrading a single dependency.
 
 :::
 
-## lock child dependency
+## Lock nested dependency
 
-When there is a problem with one of the child dependencies of the project, and the Modern.js cannot be updated immediately, you can use the package manager to lock the child dependency version.
+When there is a problem with one of the nested dependencies of the project, and the Modern.js cannot be updated immediately, you can use the package manager to lock the child dependency version.
 
 ### pnpm
 
 For projects using pnpm, add the following configuration to the `package.json` in the **project root directory** and re-execute `pnpm install`:
 
-```json
+```json title="package.json"
 {
   "pnpm": {
     "overrides": {
@@ -56,7 +56,7 @@ For projects using pnpm, add the following configuration to the `package.json` i
 
 For projects using Yarn, add the following configuration to the `package.json` in the **project root directory** and re-execute `yarn install`:
 
-```json
+```json title="package.json"
 {
   "resolutions": {
     "package-name": "^1.0.0"
@@ -68,7 +68,7 @@ For projects using Yarn, add the following configuration to the `package.json` i
 
 For projects using Npm, add the following configuration to the `package.json` in the **project root directory** and re-execute `npm install`:
 
-```json
+```json title="package.json"
 {
   "overrides": {
     "package-name": "^1.0.0"

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

@@ -32,7 +32,7 @@ pipeline.run(1); // 4
 pipeline.run(5); // 12
 ```
 
-In this example, a `Pipeline<number, number>` is created on line 3. This means that when you run it, you need to pass in a `number`, and you will get a `number` as a result，the type is:
+In this example, a `Pipeline<number, number>` is created on line 3. This means that when you run it, you need to pass in a `number`, and you will get a `number` as a result, the type is:
 
 ```ts
 (count: number, next: (nextCount: number) => number) => number;

package/docs/en/guides/topic-detail/generator/codesmith/api/json.mdx

@@ -35,7 +35,7 @@ Get the JSON file content.
 
 Parameter:
 
-- resource: `FsResource`. A file resource，get by `context.materials.default.get(<filename>)`.
+- resource: `FsResource`. A file resource, get by `context.materials.default.get(<filename>)`.
 
 ### extend
 
@@ -43,7 +43,7 @@ Merge objects into a JSON file.
 
 Parameter:
 
-- resource: `FsResource`. A file resource，get by `context.materials.default.get(<filename>)`.
+- resource: `FsResource`. A file resource, get by `context.materials.default.get(<filename>)`.
 - obj: `Record<string, any>`. Object to be merged.
 
 ### update
@@ -52,5 +52,5 @@ pdate object fields to JSON file.
 
 Parameter:
 
-- resource: `FsResource`. A file resource，get by `context.materials.default.get(<filename>)`.
+- resource: `FsResource`. A file resource, get by `context.materials.default.get(<filename>)`.
 - operation: `{ query: Record<string, any>; update: Record<string, any> }`. Update operation, use gesture to view [declaration-update](https://www.npmjs.com/package/declaration-update) in detail.

package/docs/en/guides/topic-detail/generator/config/app.mdx

@@ -75,7 +75,7 @@ BFF type (bffType), supports two options:
 
 ##### framework
 
-BFF runtime framework (framework)，supports two options:
+BFF runtime framework (framework), supports two options:
 
 - Express(express)
 

package/docs/en/guides/topic-detail/generator/config/monorepo.mdx

@@ -12,7 +12,7 @@ The Monorepo project supports the creation of sub-projects by using the new comm
 
 ### solution
 
-Subproject type(solution)，the different subproject type fields are:
+Subproject type(solution), the different subproject type fields are:
 
 - Application (mwa)
 - Application (Test) (mwa_test)

package/docs/en/guides/topic-detail/generator/plugin/api/file/addHelper.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # addHelper
 
-For text files, add a customized Help function of Handlebars，the specific viewable document[Custom Helpers](https://handlebarsjs.com/guide/#custom-helpers).
+For text files, add a customized Help function of Handlebars, the specific viewable document[Custom Helpers](https://handlebarsjs.com/guide/#custom-helpers).
 
 This method is available on the `onForged` time to live API parameter.
 

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

@@ -2,6 +2,7 @@
 sidebar_position: 5
 title: Management Effect
 ---
+
 # Management Effect
 
 The actions in the model must be pure functions and cannot have any side effects during execution. However, in real-world scenarios, we often encounter many side effects, such as: requesting data from an HTTP API to obtain state data, or modifying `localStorage` or sending events while updating the state. In Reduck, side effects are managed through the model's `effects` function.
@@ -88,7 +89,7 @@ For this type of side effect scenario, `handleEffect` stipulates that the state
 {
   result: null,
   error: null,
-  pending: false，
+  pending: false,
 }
 ```
 

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

@@ -188,7 +188,7 @@ const fooModel = model('foo').define((context, { use, onMount }) => {
   let actions;
 
   onMount(() => {
-    // after fooModel mounted，get actions
+    // after fooModel mounted, get actions
     [, actions] = use(fooModel);
   });
 

package/docs/zh/apis/app/hooks/src/pages.mdx

@@ -85,7 +85,7 @@ pages 目录下的文件满足以下条件的不会被当做路由文件
 import React from 'react';
 import UserLayout from 'xxxx';
 
-export default const App = ({Component, ...pageProps}:{ Component: React.ComponentType}) => {
+export const App = ({Component, ...pageProps}:{ Component: React.ComponentType}) => {
   return (
     <UserLayout>
       <Component {...pageProps} />

package/docs/zh/apis/app/runtime/model/handle-effect.mdx

@@ -2,9 +2,10 @@
 sidebar_position: 7
 title: handleEffect
 ---
+
 # handleEffect
 
-import ReduckTip from "@site-docs/components/reduck-tip"
+import ReduckTip from '@site-docs/components/reduck-tip';
 
 <ReduckTip />
 

package/docs/zh/apis/app/runtime/model/model_.mdx

@@ -2,9 +2,10 @@
 sidebar_position: 1
 title: model
 ---
+
 # model
 
-import ReduckTip from "@site-docs/components/reduck-tip"
+import ReduckTip from '@site-docs/components/reduck-tip';
 
 <ReduckTip />
 
@@ -61,7 +62,8 @@ const fooModel = model('foo').define({
 - context: Context，Reduck 上下文对象，可以获取底层的 `store` 对象。`store` 除支持 Redux Store 的所有 [API](https://redux.js.org/api/store) 以外，还挂载了用于消费 Model 的 `use` 的方法，和用于卸载 Model 的 `unmount` 方法。
 - utils: Utils，定义 Model 时，常用的工具函数：`use`、`onMount`。`use` 作用同 `store` 对象上的 `use`，`onMount` 是 Model 挂载后的钩子函数。
 
-{/* TODO: @anchao 调整类型  */}
+{/* TODO: @anchao 调整类型 */}
+
 ```ts
 interface Utils {
   use: UseModel;

package/docs/zh/blog/updates/2022-0708-updates.md

@@ -39,8 +39,7 @@ npx @modern-js/upgrade
 
 新的模块工程项目，不仅支持对产物做 bundless 构建，也支持 bundle 构建。通过配置 `buildConfig` 下的 [`buildType`](https://modernjs.dev/v1/docs/apis/module/config/output/build-config/build-type) ，即可进行 bundle 构建：
 
-```ts
-// modern.config.ts
+```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({

package/docs/zh/components/enable-bff.mdx

@@ -6,7 +6,7 @@ import { Tabs, Tab as TabItem } from "@theme";
 <Tabs>
   <TabItem value="express" label="Express.js" default>
 
-```ts title="edenx.config.ts"
+```ts title="modern.config.ts"
 import expressPlugin from '@modern-js/plugin-express';
 import bffPlugin from '@modern-js/plugin-bff';
 
@@ -18,7 +18,7 @@ export default defineConfig({
   </TabItem>
   <TabItem value="koa" label="Koa.js">
 
-```ts title="edenx.config.ts"
+```ts title="modern.config.ts"
 import koaPlugin from '@modern-js/plugin-koa';
 import bffPlugin from '@modern-js/plugin-bff';
 

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

@@ -2,6 +2,7 @@
 title: 服务端渲染（SSR）
 sidebar_position: 3
 ---
+
 # 服务端渲染（SSR）
 
 在 Modern.js 中，SSR 也是开箱即用的。开发者无需为 SSR 编写复杂的服务端逻辑，也无需关心 SSR 的运维，或是创建单独的服务。Modern.js 拥有完备的 SSR 降级策略，保证页面能够安全运行。
@@ -12,10 +13,10 @@ sidebar_position: 3
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
-  "server": {
-    "ssr": true,
+  server: {
+    ssr: true,
   },
-})
+});
 ```
 
 ## SSR 时的数据获取
@@ -33,7 +34,7 @@ export default () => {
 在组件中可以通过 Hooks API 的方式获取 `loader` 函数返回的数据：
 
 ```tsx
-import { useLoaderData } from '@modern-js/runtime/router'
+import { useLoaderData } from '@modern-js/runtime/router';
 export default () => {
   const data = useLoaderData();
   return <div>{data.message}</div>;
@@ -45,14 +46,13 @@ Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发
 不过，开发者仍然需要关注数据的兜底处理，例如 `null` 值或不符合预期的数据返回。避免在 SSR 时产生 React 渲染错误或是返回凌乱的渲染结果。
 
 :::info 补充信息
+
 1. 当以客户端路由的方式请求页面时，Modern.js 会发送一个 HTTP 请求，服务端接收到请求后执行页面对应的 Data Loader 函数，然后将执行结果作为请求的响应返回浏览器。
 
 2. 使用 Data Loader 时，数据获取发生在渲染前，Modern.js 也仍然支持在组件渲染时获取数据。更多相关内容可以查看[数据获取](/guides/basic-features/data-fetch)。
 
 :::
 
-
-
 ## 保持渲染一致
 
 有些业务中，通常需要根据当前的运行容器环境特征做不同的 UI 展示，例如 [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) 信息。如果处理不够仔细，此时很有可能出现不符合预期的渲染结果。
@@ -291,12 +291,12 @@ Modern.js 支持了 React 18 的流式渲染，可以通过如下配置启用：
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
-  "server": {
-    "ssr": {
-      "mode": "stream",
+  server: {
+    ssr: {
+      mode: 'stream',
     },
   },
-})
+});
 ```
 
 Modern.js 的流式渲染基于 React Router 实现，主要涉及 API 有：
@@ -305,7 +305,6 @@ Modern.js 的流式渲染基于 React Router 实现，主要涉及 API 有：
 - [`Await`](https://reactrouter.com/en/main/components/await)：用于渲染 Data Loader 返回的异步数据。
 - [`useAsyncValue`](https://reactrouter.com/en/main/hooks/use-async-value)：用于从最近的父级 `Await` 组件中获取数据。
 
-
 ### 异步获取数据
 
 ```ts title='page.loader.ts'
@@ -334,7 +333,6 @@ export default ({ params }: LoaderFunctionArgs) => {
 
   return defer({ data: user });
 };
-
 ```
 
 `user` 是一个 Promise 类型的对象，表示需要异步获取的数据，通过 `defer` 处理需要异步获取的 `user`。注意，`defer` 必须接收一个对象类型的参数，
@@ -343,7 +341,6 @@ export default ({ params }: LoaderFunctionArgs) => {
 `defer` 还可以同时接收异步数据和同步数据。例如：
 
 ```ts title='page.loader.ts'
-
 // 省略部分代码
 
 export default ({ params }: LoaderFunctionArgs) => {
@@ -366,15 +363,13 @@ export default ({ params }: LoaderFunctionArgs) => {
 
   return defer({
     data: user,
-    other: await otherData
+    other: await otherData,
   });
 };
-
 ```
 
 `otherData` 前加了 `await`，所以是同步获取的数据，它可以和异步获取的数据 `user` 同时传入 `defer`。
 
-
 ### 渲染异步数据
 
 通过 `Await` 组件，可以获取到 Data Loader 中异步返回的数据，然后进行渲染。例如：
@@ -392,7 +387,7 @@ const Page = () => {
       User info:
       <Suspense fallback={<div id="loading">loading user data ...</div>}>
         <Await resolve={data.data}>
-          {(user) => {
+          {user => {
             return (
               <div id="data">
                 name: {user.name}, age: {user.age}
@@ -430,11 +425,11 @@ const UserInfo = () => {
   const user = useAsyncValue();
 
   return (
-     <div>
+    <div>
       name: {user.name}, age: {user.age}
     </div>
-  )
-}
+  );
+};
 
 const Page = () => {
   const data = useLoaderData() as Data;