@modern-js/main-doc 2.0.3-alpha.0 → 2.1.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @modern-js/main-doc@2.0.2 build /Users/bytedance/Desktop/workspace/modern-js-main.js/packages/toolkit/main-doc
+> @modern-js/main-doc@2.1.0 build /github/workspace/packages/toolkit/main-doc
 > npx ts-node ./scripts/sync.ts
 

package/en/docusaurus-plugin-content-docs/current/apis/app/commands/index.md

@@ -5,8 +5,3 @@ type: ref
 # Commands
 
 This section covers all commands.
-
-
-
-
-

package/en/docusaurus-plugin-content-docs/current/apis/app/commands/lint.md

@@ -15,7 +15,7 @@ Options:
 
 Run ESLint to check the syntax of the code. Normally, only the part of the code modified by this commit needs to be checked by `lint-staged` during the `git commit` phase.
 
-* `--no-fix` close auto fix by lint.
+- `--no-fix` close auto fix by lint.
 
 import CommandTip from '@site-docs-en/components/command-tip.md'
 

package/en/docusaurus-plugin-content-docs/current/apis/app/commands/serve.md

@@ -21,12 +21,10 @@ By default, the project will run in `localhost:8080`, you can modify the Server
 export default defineConfig({
   server: {
     port: 8081,
-  }
-})
+  },
+});
 ```
 
 import CommandTip from '@site-docs-en/components/command-tip.md'
 
 <CommandTip />
-
-

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/api/framework/lambda.md

@@ -19,23 +19,23 @@ this file supports the use `js` or `ts`, but the functions must be exported usin
 
 The files named `index` will be upper level routing:
 
-* `api/lambda/index.ts` -> `$BASENAME/`
-* `api/lambda/user/index.ts` -> `$BASENAME/user`
+- `api/lambda/index.ts` -> `$BASENAME/`
+- `api/lambda/user/index.ts` -> `$BASENAME/user`
 
 ### Multi Level Route
 
 The routing system also supports parsing multiple levels of files. and if you create a folder, the files will still be automatically parsed in the same way.
 
-* `api/lambda/hello.ts` -> `$BASENAME/hello`
-* `api/lambda/user/list.ts` -> `$BASENAME/user/list`
+- `api/lambda/hello.ts` -> `$BASENAME/hello`
+- `api/lambda/user/list.ts` -> `$BASENAME/user/list`
 
 ### Dynamic Route
 
 Dynamic named routing parameters can be supported by creating folders or files with `[xxx]`.
 
-* `api/lambda/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
-* `api/lambda/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
-* `api/lambda/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
+- `api/lambda/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
+- `api/lambda/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
+- `api/lambda/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
 
 the `$BASENAME` can be configured in `modern.config.js`，the default value is `/api`。
 
@@ -43,11 +43,11 @@ the `$BASENAME` can be configured in `modern.config.js`，the default value is `
 
 By default, all files in the `api/` will be parsed as BFF function. but we also set a allow list, and these files will not be parsed:
 
-* file name start with `_`, for example: `_utils.ts`.
-* files in directory that name start with `_`, for example：`_utils/index.ts`、`_utils/cp.ts`.
-* test files, for example：`foo.test.ts`.
-* TypeScript define files, for example：`hello.d.ts`.
-* files in `node_module`.
+- file name start with `_`, for example: `_utils.ts`.
+- files in directory that name start with `_`, for example：`_utils/index.ts`、`_utils/cp.ts`.
+- test files, for example：`foo.test.ts`.
+- TypeScript define files, for example：`hello.d.ts`.
+- files in `node_module`.
 
 ## Define Function
 

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/api/functions/api.md

@@ -1,5 +1,5 @@
 ---
-title: "**/*.[tj]s"
+title: '**/*.[tj]s'
 sidebar_position: 1
 ---
 
@@ -19,23 +19,23 @@ this file supports the use `js` or `ts`, but the functions must be exported usin
 
 The files named `index` will be upper level routing:
 
-* `api/index.ts` -> `$BASENAME/`
-* `api/user/index.ts` -> `$BASENAME/user`
+- `api/index.ts` -> `$BASENAME/`
+- `api/user/index.ts` -> `$BASENAME/user`
 
 ### Multi Level Route
 
 The routing system also supports parsing multiple levels of files. and if you create a folder, the files will still be automatically parsed in the same way.
 
-* `api/hello.ts` -> `$BASENAME/hello`
-* `api/user/list.ts` -> `$BASENAME/user/list`
+- `api/hello.ts` -> `$BASENAME/hello`
+- `api/user/list.ts` -> `$BASENAME/user/list`
 
 ### Dynamic Route
 
 Dynamic named routing parameters can be supported by creating folders or files with `[xxx]`.
 
-* `api/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
-* `api/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
-* `api/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
+- `api/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
+- `api/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
+- `api/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
 
 the `$BASENAME` can be configured in `modern.config.js`，the default value is `/api`。
 
@@ -43,11 +43,11 @@ the `$BASENAME` can be configured in `modern.config.js`，the default value is `
 
 By default, all files in the `api/` will be parsed as BFF function. but we also set a allow list, and these files will not be parsed:
 
-* file name start with `_`, for example: `_utils.ts`.
-* files in directory that name start with `_`, for example：`_utils/index.ts`、`_utils/cp.ts`.
-* test files, for example：`foo.test.ts`.
-* TypeScript define files, for example：`hello.d.ts`.
-* files in `node_module`.
+- file name start with `_`, for example: `_utils.ts`.
+- files in directory that name start with `_`, for example：`_utils/index.ts`、`_utils/cp.ts`.
+- test files, for example：`foo.test.ts`.
+- TypeScript define files, for example：`hello.d.ts`.
+- files in `node_module`.
 
 ## Define Function
 

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/api/functions/app.md

@@ -8,5 +8,3 @@ in BFF function mode，this file can add middleware before [BFF 函数](/docs/ap
 :::note
 For detail, see [hook](/docs/apis/app/runtime/bff/hook)
 :::
-
-

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/api/functions/common.md

@@ -1,10 +1,8 @@
 ---
-title: "**/_*.[tj]s, _*/**"
+title: '**/_*.[tj]s, _*/**'
 sidebar_position: 2
 ---
 
 under BFF function mode, these files are not registered as routes.
 
 Any files that not routes, but required in the project can be named in this way.
-
-

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/app.md

@@ -13,33 +13,40 @@ import { createApp, bootstrap } from '@modern-js/runtime';
 // App.[jt]sx
 import App from '@_modern_js_src/App';
 import { state } from '@modern-js/runtime/plugins';
-import { immer, effects, autoActions, devtools } from '@modern-js/runtime/model';
+import {
+  immer,
+  effects,
+  autoActions,
+  devtools,
+} from '@modern-js/runtime/model';
 
-const createStatePlugins = (config) => {
+const createStatePlugins = config => {
   const plugins = [];
   plugins.push(immer(config['immer']));
   plugins.push(effects(config['effects']));
   plugins.push(autoActions(config['autoActions']));
   plugins.push(devtools(config['devtools']));
   return plugins;
-}
+};
 let AppWrapper = null;
 function render() {
   AppWrapper = createApp({
     plugins: [
-     state({...{plugins: createStatePlugins(true)}, ...App?.config?.state}),
-    ]
-  })(App)
+      state({
+        ...{ plugins: createStatePlugins(true) },
+        ...App?.config?.state,
+      }),
+    ],
+  })(App);
   if (IS_BROWSER) {
     bootstrap(AppWrapper, MOUNT_ID);
   }
-  return AppWrapper
+  return AppWrapper;
 }
 AppWrapper = render();
-export default AppWrapper;;
+export default AppWrapper;
 ```
 
 :::note
 In multi-entry App，each entry can have a `App.[jt]sx`, for detail, see [Entry](/docs/guides/concept/entries).
 :::
-

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/index_.md

@@ -7,7 +7,6 @@ Entry identifier if App want use custom entry. In most case, [`App.[tj]sx`](/doc
 
 When we need to add custom behavior before `bootstrap` or completely take over the webpack entry, we can place `index.[tj]s` in `src/` or entry directory. The following are discussed in two cases:
 
-
 1. add custom behavior before bootstrap
 
 Just add default export under `src/index.[tj]s`:

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/routes.md

@@ -7,8 +7,8 @@ The entry identifier when the application uses file system-based routing.
 
 When the project structure is of type `Routes directory entry`, the files in the `src/routes` directory are parsed to get the client-side routing configuration. See [Routing by convention](/docs/guides/basic-features/routes) for more details on usage.
 
-
 Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as a route to the application：
+
 ```bash {3}
 .
 └── routes
@@ -32,6 +32,7 @@ The directory names in the `routes` directory will be used as a mapping of the r
 ```
 
 The following two routes are produced:
+
 - `/`
 - `/user`
 
@@ -69,6 +70,7 @@ As in the example below, you can add a common layout component for all routing c
 ```
 
 You can represent child components in layout components by using `<Outlet>`:
+
 ```tsx title=routes/layout.tsx
 import { Link, Outlet, useLoaderData } from '@modern-js/runtime/router';
 
@@ -77,8 +79,8 @@ export default () => {
     <>
       <Outlet></Outlet>
     </>
-  )
-}
+  );
+};
 ```
 
 :::note

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/server.md

@@ -1,5 +1,5 @@
 ---
-title: "*.[server|node].[tj]sx"
+title: '*.[server|node].[tj]sx'
 sidebar_position: 8
 ---
 
@@ -14,12 +14,14 @@ Used in application projects to place server side code, it generally has the fol
 import { useLoaderData } from '@modern-js/runtime/router';
 import { readFile } from './utils.server';
 
-type ProfileData = { /* some type declarations */ }
+type ProfileData = {
+  /* some type declarations */
+};
 
-export const loader = async(): ProfileData => {
+export const loader = async (): ProfileData => {
   const profile = await readFile('profile.json');
   return profile;
-}
+};
 
 export default function UserPage() {
   const profileData = useLoaderData() as ProfileData;

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/stories.md

@@ -1,5 +1,5 @@
 ---
-title: "**/*.stories.[tj]sx"
+title: '**/*.stories.[tj]sx'
 sidebar_position: 7
 ---
 
@@ -8,5 +8,5 @@ App Storybook debug file. files in `src/` which suffix `*.stories.[tj]sx` are as
 Execute the `dev story` command to debugging these files in the Storybook.
 
 :::info
-Using a Storybook requires executing `new` command  to enable the 「Visual Testing (Storybook)」 mode.
+Using a Storybook requires executing `new` command to enable the 「Visual Testing (Storybook)」 mode.
 :::

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/test.md

@@ -1,5 +1,5 @@
 ---
-title: "**/*.test.[tj]sx?"
+title: '**/*.test.[tj]sx?'
 sidebar_position: 6
 ---
 

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/app/define-config.md

@@ -43,7 +43,6 @@ defineConfig(App, {
 })
 ```
 
-
 1. `defineConfig` can configuring [runtime.state](/docs/configure/app/runtime/state)、[runtime.router](/docs/configure/app/runtime/router) etc.
 
 2. `defineConfig` before configuring a property, such as `router`, you need to make sure that the `modern.config.js` has been configured to enable this feature.

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/bff/hook.md

@@ -16,10 +16,10 @@ import { hook } from '@modern-js/runtime/{namespace}';
 
 ```ts
 type HookOptions = {
-  addMiddleware: string | function
-}
+  addMiddleware: string | function;
+};
 
-function hook(options: HookOptions): void
+function hook(options: HookOptions): void;
 ```
 
 ### Input

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/core/bootstrap.md

@@ -7,7 +7,7 @@ Used to start and mount App, usually without manual calls。This API is only req
 ## Usage
 
 ```ts
-import ReactDOM from 'react-dom/client'
+import ReactDOM from 'react-dom/client';
 import { bootstrap } from '@modern-js/runtime';
 
 bootstrap(App, 'root', undefined, ReactDOM);
@@ -39,7 +39,7 @@ type BootStrap<T = unknown> = (
 ## Example
 
 ```tsx
-import ReactDOM from 'react-dom/client'
+import ReactDOM from 'react-dom/client';
 import { createApp, bootstrap } from '@modern-js/runtime';
 
 function App() {
@@ -48,13 +48,10 @@ function App() {
 
 const WrappedApp = createApp({
   // customized plugin
-  plugins: [
-    customPlugin(),
-  ],
+  plugins: [customPlugin()],
 })(App);
 
 bootstrap(WrappedApp, 'root', undefined, ReactDOM);
-
 ```
 
 :::info

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/core/create-app.md

@@ -39,8 +39,6 @@ function App() {
 }
 
 export default createApp({
-  plugins: [
-    customPlugin()
-  ]
+  plugins: [customPlugin()],
 })(App);
 ```

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/core/use-loader.md

@@ -21,14 +21,14 @@ type Options = {
   skip: boolean;
   params: Record<string, any>;
   static: boolean;
-}
+};
 type ReturnData = {
   data: Record<string, any>;
   loading: boolean;
   error: Error;
   reload: (params?: Record<string, any>) => Promise<any> | undefined;
   reloading: boolean;
-}
+};
 
 function useLoader(loaderFn: LoaderFn, options: Options): ReturnData;
 ```

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/core/use-module-apps.md

@@ -28,15 +28,17 @@ import EnableMicroFrontend from '@site-docs-en/components/enable-micro-frontend.
 function App() {
   const { Home, Contact } = useModuleApps();
 
-  return <div>
-    Master APP
-    <Route exact path='/home'>
-      <Home />
-    </Route>
-    <Route exact path='/home'>
-      <Contact />
-    </Route>
-  </div>;
+  return (
+    <div>
+      Master APP
+      <Route exact path="/home">
+        <Home />
+      </Route>
+      <Route exact path="/home">
+        <Contact />
+      </Route>
+    </div>
+  );
 }
 
 defineConfig(App, {
@@ -44,24 +46,23 @@ defineConfig(App, {
     apps: [
       {
         // name 区分大小写，name 提供的是什么 useModuleApps 返回的就是什么
-        name: "Home",
-        entry: "http://127.0.0.1:8081/"
+        name: 'Home',
+        entry: 'http://127.0.0.1:8081/',
       },
       {
-          name: "Contact",
-          entry: "http://localhost:8082"
-      }
-    ]
-  }
-})
+        name: 'Contact',
+        entry: 'http://localhost:8082',
+      },
+    ],
+  },
+});
 ```
 
 Get the `Home` and `Contact` sub-application components(the same as name in the config) through `useModuleApps()`. After that, you can load the child application just like a normal React component.
 
-
 ### Centralized Routing
 
-**Centralized Routing** is a way to centrally configure the activation routes of sub-applications. 我add `activeWhen` config to enable **Centralized Routing**。
+**Centralized Routing** is a way to centrally configure the activation routes of sub-applications. Add `activeWhen` config to enable **Centralized Routing**。
 
 import MicroRuntimeConfig from '@site-docs-en/components/micro-runtime-config.md';
 
@@ -75,9 +76,11 @@ import { useModuleApp } from '@modern-js/plugin-runtime';
 function App() {
   const { MApp } = useModuleApps();
 
-  return <div>
-    <MApp />
-  </div>
+  return (
+    <div>
+      <MApp />
+    </div>
+  );
 }
 
 defineConfig(App, {
@@ -85,18 +88,18 @@ defineConfig(App, {
     apps: [
       {
         // name is case sensitive, what name provides is what useModuleApps returns
-        name: "Dashboard",
+        name: 'Dashboard',
         activeWhen: '/dashboard',
-        entry: "http://127.0.0.1:8081/"
+        entry: 'http://127.0.0.1:8081/',
       },
       {
-        name: "TableList",
+        name: 'TableList',
         activeWhen: '/table',
-        entry: "http://localhost:8082"
-      }
-    ]
-  }
-})
+        entry: 'http://localhost:8082',
+      },
+    ],
+  },
+});
 ```
 
 After starting the application in this way, accessing the `/dashboard` route will render the `Dashboard`, and accessing the `/table` route will render the `TableList`.
@@ -107,26 +110,30 @@ The transition animation of the component loading process can be customized in t
 
 ```tsx title=App.tsx
 function App() {
-  const { Components: { Home } } = useModuleApps();
-
-  return <div>
-    Master APP
-    <Route exact path='/home'>
-      <Home
-        loadable={{
-          loading: ({ pastDelay, error }: any) => {
-            if (error) {
-              console.error(error);
-              return <div>error: {error?.message}</div>;
-            } else if (pastDelay) {
-              return <div>loading</div>;
-            } else {
-              return null;
-            }
-          },
-        }}
-      />
-    </Route>
-  </div>;
+  const {
+    Components: { Home },
+  } = useModuleApps();
+
+  return (
+    <div>
+      Master APP
+      <Route exact path="/home">
+        <Home
+          loadable={{
+            loading: ({ pastDelay, error }: any) => {
+              if (error) {
+                console.error(error);
+                return <div>error: {error?.message}</div>;
+              } else if (pastDelay) {
+                return <div>loading</div>;
+              } else {
+                return null;
+              }
+            },
+          }}
+        />
+      </Route>
+    </div>
+  );
 }
 ```

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/core/use-runtime-context.md

@@ -11,7 +11,7 @@ import { useRuntimeContext } from '@modern-js/runtime';
 
 export function App() {
   const runtimeContext = useRuntimeContext();
-  return <div>Hello World</div>
+  return <div>Hello World</div>;
 }
 ```
 
@@ -27,12 +27,11 @@ type RuntimeContext = {
     cookie: string;
   };
   store: ReduckStore;
-}
+};
 
 function useRuntimeContext(): RuntimeContext;
 ```
 
-
 ### Return Value
 
 - `request`: additional information in the request context.
@@ -54,6 +53,6 @@ function App() {
 
   const [state, actions] = store.use(fooModel);
 
-  return <div>state: {state}</div>
+  return <div>state: {state}</div>;
 }
 ```

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/index.md

@@ -5,8 +5,3 @@ type: ref
 # Runtime
 
 This section covers all APIs using `@modern-js/runtime`.
-
-
-
-
-

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/connect.md

@@ -13,12 +13,17 @@ The original type of Reduck is complex. The following type definition shows the
 
 `Connect` is the same as `useModel` and is the corresponding HOC-style API. It is recommended to use the Hook-style `useModel` first.
 
-
 ## Function Signature
 
 ```ts
-type SelectStateToProps = (...modelStates: State[], ownProps? :any) => PlainObject;
-type SelectActionsToProps = (...modelActions: Actions[], ownProps? :any) => PlainObject;
+type SelectStateToProps = (
+  ...modelStates: State[],
+  ownProps?: any,
+) => PlainObject;
+type SelectActionsToProps = (
+  ...modelActions: Actions[],
+  ownProps?: any,
+) => PlainObject;
 
 function connect(models: Model, options?: ConnectOptions);
 function connect(
@@ -27,7 +32,6 @@ function connect(
 );
 ```
 
-
 ### Input
 
 - `models`: passed one or more Models. When `models` is an array type parameter, the last two params can be a function for filtering State (`SelectStateToProps` type) and a function for filtering Actions (`SelectActionsToProps` type).
@@ -38,7 +42,6 @@ function connect(
 
 - `options`: Optional parameter for auxiliary configuration. Currently supports setting `forwardRef`, which is used to control whether to forward the `ref` of the component. The default value is `false`, which means that the `ref` is not forwarded. Set to `{ forwardRef: true }`, which means to forward `ref`.
 
-
 ### Return Type
 
 Returns a HOC: receives an component, returns a component with extra State and Actions injected on `props`.

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/create-store.md

@@ -7,12 +7,10 @@ import ReduckTip from '@site-docs-en/components/reduck-tip.md'
 
 <ReduckTip />
 
-
 `createStore` is used to create a Store. Reduck’s Store based on Redux's [Store](https://redux.js.org/api/store) implementatio. Used to store the state of the application and managing the state and Model.
 
 In general, this API is only used when you need to have full control over the creation of the Store. For example, to customize a Store, pass in the ['Provider'](./Provider.md) component to use.
 
-
 ## Function Signature
 
 ```ts
@@ -49,8 +47,8 @@ Reduck Store:
 - `unmount`: unmount the Model object, and the Model State is cleared from the Store.
 - `ReduxStore`: [Redux Store API](https://redux.js.org/tutorials/fundamentals/part-4-store#redux-store).
 
-
 ## Example
+
 ```tsx
 const store = createStore();