@modern-js/main-doc 2.0.2 → 2.1.0

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

@@ -50,7 +50,7 @@ interface State {
     pending: boolean;
     result: any;
     error: string;
-  }
+  };
 }
 ```
 
@@ -75,9 +75,10 @@ interface State {
 
 - `pending`: the default value is `"pending"`. Change the name of the `pending` field in the returned State. Usage is the same as `result`.
 
-- `error`:  the default value is `"error"`. Change the name of the `error` field in the returned State. Usage is the same as `result`.
+- `error`: the default value is `"error"`. Change the name of the `error` field in the returned State. Usage is the same as `result`.
 
 - `combineMode`: the default value is `"merge"`。get fulfilled state results. There are two ways to deal with it (The data types that can be automatically processed here are also limited to simple object or array types):
+
   - `"merge"`: the previous data is merged with the current data. the data is an array type, operation is similar to `[].concat(lastData, currentData)`. the data is an object，operation is similar to `{...lastData, ...curData}`.
   - `"replace"`: the current data directly replaces the previous data.
 
@@ -95,7 +96,6 @@ interface State {
 }
 ```
 
-
 ### Return Type
 
 Objects are processed by actions in pending, fulfilled, and rejected states.

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

@@ -141,7 +141,6 @@ interface ModelDesc {
 }
 ```
 
-
 2. Depends on the state of other Models
 
 ```ts

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

@@ -11,7 +11,6 @@ import ReduckTip from '@site-docs-en/components/reduck-tip.md'
 The original type of Reduck is complex. The following type definition shows the simplified type information. For the original type, see [**model**](https://github.com/modern-js-dev/reduck/blob/main/packages/store/src/model/model.ts)。
 :::
 
-
 ## Function Signature
 
 ```ts
@@ -27,14 +26,12 @@ function useModel(
 ): [state, actions, subscribe];
 ```
 
-
 ### Input
 
 - models: Array of Model objects, which can be passed in as an array type parameter, or all Models can be passed in as parameters one by one.
 - stateSelector: Optional parameters, used to filter State calculations. The first n parameters are the States corresponding to n Models, and the returned data is used as the first element of the `useModel` return value array.
 - actionSelector: Optional parameters, used to filter Action calculations. The first n parameters are the States corresponding to n Models, and the returned data is used as the second element of the `useModel` return value array.
 
-
 ### Return Value
 
 Returns an array with each value:

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

@@ -9,7 +9,6 @@ import ReduckTip from '@site-docs-en/components/reduck-tip.md'
 
 `useStore` Used to get the store shared by the current component tree.
 
-
 ## Function Signature
 
 ```ts
@@ -20,7 +19,6 @@ function useStore(): ReduckStore;
 
 - ReduckStore: Reduck Store，type refer to the return type of [createStore](./create-store.md).
 
-
 :::info More
 [Use Model](/docs/guides/topic-detail/model/use-model).
 :::

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

@@ -21,7 +21,7 @@ interface NavigateFunction {
       replace?: boolean;
       state?: any;
       relative?: RelativeRoutingType;
-    }
+    },
   ): void;
   (delta: number): void;
 }
@@ -30,13 +30,13 @@ interface NavigateFunction {
 The `useNavigate` hook returns a function that lets you navigate programmatically。
 
 ```tsx
-import { useNavigate } from "@modern-js/runtime/router";
+import { useNavigate } from '@modern-js/runtime/router';
 
 export function HomeButton() {
   let navigate = useNavigate();
 
   function handleClick() {
-    navigate("/home");
+    navigate('/home');
   }
 
   return (
@@ -81,19 +81,13 @@ function App() {
 ### useParams
 
 ```ts
-declare function useParams<
-  K extends string = string
->(): Readonly<Params<K>>;
+declare function useParams<K extends string = string>(): Readonly<Params<K>>;
 ```
 
 The `useParams` hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the `<Route path>`.
 
 ```tsx
-import {
-  Routes,
-  Route,
-  useParams
-} from "@modern-js/runtime/router";
+import { Routes, Route, useParams } from '@modern-js/runtime/router';
 
 function BlogPost() {
   const { slug } = useParams();
@@ -103,10 +97,10 @@ function BlogPost() {
 function App() {
   return (
     <Routes>
-      <Route path="/" element={ <div>home</div> } />
-      <Route path="/blog/:slug" element={ <BlogPost />}/>
+      <Route path="/" element={<div>home</div>} />
+      <Route path="/blog/:slug" element={<BlogPost />} />
     </Routes>
-  )
+  );
 }
 ```
 
@@ -118,10 +112,7 @@ function App() {
 declare function Link(props: LinkProps): React.ReactElement;
 
 interface LinkProps
-  extends Omit<
-    React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    "href"
-  > {
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
   replace?: boolean;
   state?: any;
   to: To;
@@ -140,45 +131,31 @@ A `<Link>` is an element that lets the user navigate to another page by clicking
 ### NavLink
 
 ```ts
-declare function NavLink(
-  props: NavLinkProps
-): React.ReactElement;
+declare function NavLink(props: NavLinkProps): React.ReactElement;
 
 interface NavLinkProps
-  extends Omit<
-    LinkProps,
-    "className" | "style" | "children"
-  > {
+  extends Omit<LinkProps, 'className' | 'style' | 'children'> {
   caseSensitive?: boolean;
   children?:
     | React.ReactNode
     | ((props: { isActive: boolean }) => React.ReactNode);
-  className?:
-    | string
-    | ((props: {
-        isActive: boolean;
-      }) => string | undefined);
+  className?: string | ((props: { isActive: boolean }) => string | undefined);
   end?: boolean;
   style?:
     | React.CSSProperties
-    | ((props: {
-        isActive: boolean;
-      }) => React.CSSProperties);
+    | ((props: { isActive: boolean }) => React.CSSProperties);
 }
 ```
 
 A `<NavLink>` is a special kind of `<Link>` that knows whether or not it is "active".
 
-
 ### Outlet
 
 ```ts
 interface OutletProps {
   context?: unknown;
 }
-declare function Outlet(
-  props: OutletProps
-): React.ReactElement | null;
+declare function Outlet(props: OutletProps): React.ReactElement | null;
 ```
 
 An `<Outlet>` should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered.
@@ -201,10 +178,7 @@ function App() {
   return (
     <Routes>
       <Route path="/" element={<Dashboard />}>
-        <Route
-          path="messages"
-          element={<DashboardMessages />}
-        />
+        <Route path="messages" element={<DashboardMessages />} />
         <Route path="tasks" element={<DashboardTasks />} />
       </Route>
     </Routes>
@@ -225,7 +199,7 @@ interface RouteObject {
   action?: ActionFunction;
   element?: React.ReactNode | null;
   errorElement?: React.ReactNode | null;
-  handle?: RouteObject["handle"];
+  handle?: RouteObject['handle'];
   shouldRevalidate?: ShouldRevalidateFunction;
 }
 ```
@@ -241,14 +215,13 @@ const router = createBrowserRouter([
     element: <Team />,
 
     // when the URL matches this segment
-    path: "teams/:teamId",
+    path: 'teams/:teamId',
 
     // with this data loaded before rendering
     loader: async ({ request, params }) => {
-      return fetch(
-        `/fake/api/teams/${params.teamId}.json`,
-        { signal: request.signal }
-      );
+      return fetch(`/fake/api/teams/${params.teamId}.json`, {
+        signal: request.signal,
+      });
     },
 
     // performing this mutation when data is submitted to it
@@ -271,21 +244,17 @@ const router = createBrowserRouter(
       element={<Team />}
       path="teams/:teamId"
       loader={async ({ params }) => {
-        return fetch(
-          `/fake/api/teams/${params.teamId}.json`
-        );
+        return fetch(`/fake/api/teams/${params.teamId}.json`);
       }}
       action={async ({ request }) => {
         return updateFakeTeam(await request.formData());
       }}
       errorElement={<ErrorBoundary />}
-    />
-  )
+    />,
+  ),
 );
 ```
 
 ## More
 
 You can access to [React Router](https://reactrouter.com/) to get the full API information.
-
-

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

@@ -9,11 +9,7 @@ The content wrapped by NoSSR will not be rendered at the server, nor will it be
 ```tsx
 import { NoSSR } from '@modern-js/runtime';
 
-export default () => (
-  <NoSSR>
-    ...
-  </NoSSR>
-)
+export default () => <NoSSR>...</NoSSR>;
 ```
 
 ## Example
@@ -39,6 +35,3 @@ In CSR, it is often necessary to render different content according to the brows
 Modern.js provides complete browser side information in the SSR context, which can be used to determine the rendering result of the component on the server side.
 
 Even so, if there is too much logic in the application, or the developer wants to use the context later, or does not want some content to be rendered at the server side. developer can use the NoSSR component to exclude this part from server-side rendering.
-
-
-

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/ssr/pre-render.md

@@ -13,7 +13,7 @@ export default () => (
   <>
     <PreRender interval={5} />
   </>
-)
+);
 ```
 
 ## Function Signature
@@ -59,7 +59,7 @@ export default function App() {
       <PreRender interval={10} />
       <div>Hello Modern</div>
     </>
-  )
+  );
 }
 ```
 
@@ -67,10 +67,14 @@ The following example shows how to add the parameters in the query and header in
 
 ```tsx
 /* calculate cache identifier using channel in query and language in header */
-<PreRender interval={10} level={2} includes={{
-  query: ["channel"],
-  header: ["language"]
-}} />
+<PreRender
+  interval={10}
+  level={2}
+  includes={{
+    query: ['channel'],
+    header: ['language'],
+  }}
+/>
 ```
 
 The following example shows how not to let the test channel affect the online cache:

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

@@ -44,7 +44,6 @@ function render(ui: React.ReactElement<any>, options: Options): RenderResult;
   - `wrapper`: a react component that can be used to customize rendering logic.
   - `queries`: customize some own `queries`.
 
-
 ### Return Value
 
 - `{...queries}`: all available [queries](https://testing-library.com/docs/queries/about/)。
@@ -55,7 +54,6 @@ function render(ui: React.ReactElement<any>, options: Options): RenderResult;
 - `unmount`: unmount rendered components. This API is helpful if you want to test what happens after the component is unmounted.
 - `asFragment`: return the [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) of rendered component. used to test the response of the DOM structure after the react event is triggered.
 
-
 ## Example
 
 ```ts

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/utility/css-in-js.md

@@ -30,7 +30,7 @@ const TomatoButton = styled(Button)`
   background: tomato;
 `;
 
-function ButtonExample(){
+function ButtonExample() {
   return (
     <>
       <Button>I'm purple.</Button>
@@ -38,5 +38,5 @@ function ButtonExample(){
       <TomatoButton>I'm red.</TomatoButton>
     </>
   );
-};
+}
 ```

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

@@ -9,9 +9,7 @@ Used to add html elements (such as title, meta, script, etc.) to the `<head>` el
 ```tsx
 import { Helmet } from '@modern-js/runtime/head';
 
-export default () => (
-  <Helmet>...</Helmet>
-)
+export default () => <Helmet>...</Helmet>;
 ```
 
 ## Example
@@ -28,10 +26,10 @@ function IndexPage() {
       </Helmet>
       <p>Hello Modern.js!</p>
     </div>
-  )
+  );
 }
 
-export default IndexPage
+export default IndexPage;
 ```
 
 ## More

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

@@ -34,7 +34,7 @@ Used to load component.
 ```ts
 import loadable from '@modern-js/runtime/loadable';
 
-const OtherComponent = loadable(() => import('./OtherComponent'))
+const OtherComponent = loadable(() => import('./OtherComponent'));
 ```
 
 #### options.resolveComponent
@@ -46,20 +46,20 @@ Type: `(module: Module, props: Props) => React.ComponentType<Props>`
 By default, we think that the default export of file is a react component, so we can render the component directly. But when the component is named export, or we need to dynamically determine which component needs to be rendered according to the `props`, we can use `resolveComponent`. Here is an example:
 
 ```ts title='component.js'
-export const Apple = () => 'Apple!'
-export const Orange = () => 'Orange!'
+export const Apple = () => 'Apple!';
+export const Orange = () => 'Orange!';
 ```
 
 ```ts title='loadable.js'
 const LoadableApple = loadable(() => import('./components'), {
-  resolveComponent: (components) => components.Apple,
-})
+  resolveComponent: components => components.Apple,
+});
 const LoadableOrange = loadable(() => import('./components'), {
-  resolveComponent: (components) => components.Orange,
-})
+  resolveComponent: components => components.Orange,
+});
 const LoadableFruit = loadable(() => import('./components'), {
   resolveComponent: (components, props) => components[props.fruit],
-})
+});
 ```
 
 #### options.fallback
@@ -75,11 +75,10 @@ Whether to support SSR, the default value is `true`。
 #### LoadableComponent
 
 ```ts
-type LoadableComponent<Props> =
-  React.ComponentType<
-    Props & { fallback?: JSX.Element; }>
-  & {
-    preload(props?: Props): void;
-    load(props?: Props): Promise<React.ComponentType<Props>>;
-  }
+type LoadableComponent<Props> = React.ComponentType<
+  Props & { fallback?: JSX.Element }
+> & {
+  preload(props?: Props): void;
+  load(props?: Props): Promise<React.ComponentType<Props>>;
+};
 ```

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

@@ -13,8 +13,8 @@ For more detail, see [Extend Web Server](/docs/guides/advanced-features/web-serv
 ```ts
 import { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
 
-export const afterMatch: AfterMatchHook = (context, next) => {}
-export const afterRender: AfterRenderHook = (context, next) => {}
+export const afterMatch: AfterMatchHook = (context, next) => {};
+export const afterRender: AfterRenderHook = (context, next) => {};
 ```
 
 :::info
@@ -68,7 +68,7 @@ type AfterMatchContext = HookContext & {
     redirect: (url: string, status: number) => void;
     rewrite: (entry: string) => void;
   };
-}
+};
 
 type AfterRenderContext = {
   template: {
@@ -82,7 +82,6 @@ type AfterRenderContext = {
 };
 ```
 
-
 ### Input
 
 - `context`: Hook context.
@@ -127,5 +126,5 @@ import type { AfterRender } from '@modern-js/runtime/server';
 
 export const afterRender: AfterRenderHook = (context, next) => {
   ctx.template.prependBody('<div>Footer</div>');
-}
+};
 ```

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/web-server/middleware.md

@@ -15,11 +15,11 @@ For more detail, see [Extend Web Server](/docs/guides/advanced-features/web-serv
 ```ts
 import { Middleware } from '@modern-js/runtime/server';
 
-export const middleware: Middleware = async (context, next) => {}
+export const middleware: Middleware = async (context, next) => {};
 export const middleware: Middleware[] = [
   async (context, next) => {},
   async (context, next) => {},
-]
+];
 ```
 
 :::info
@@ -68,10 +68,12 @@ type MiddlewareContext = {
   };
 };
 
-type RequestHandler = (context: Context, next: NextFunction) => Promise<void> | void;
+type RequestHandler = (
+  context: Context,
+  next: NextFunction,
+) => Promise<void> | void;
 ```
 
-
 ### Input
 
 - `context`: Middleware context.
@@ -90,7 +92,7 @@ export const Middleware = () => async (ctx, next) => {
   ctx.res.once('finish', () => {
     console.log(Date.now() - start);
   });
-}
+};
 ```
 
 ### Inject Tools & Data
@@ -103,4 +105,3 @@ export const Middleware = () => async (ctx, next) => {
   ctx.res.locals.rpc = createRpcInstance();
 });
 ```
-

package/en/docusaurus-plugin-content-docs/current/components/command-tip.md

@@ -15,7 +15,7 @@ If you need to pass parameters to a command, you need to put the parameters afte
 
 For example, in the following `package.json` configuration:
 
-``` json
+```json
 {
   "scripts": {
     "command": "modern command"
@@ -24,6 +24,7 @@ For example, in the following `package.json` configuration:
 ```
 
 The way to carry parameters when executing the command command is:
+
 ```bash
 pnpm run command --options
 ```
@@ -32,7 +33,7 @@ pnpm v6:
 
 In the following `package.json` configuration:
 
-``` json
+```json
 {
   "scripts": {
     "command": "modern command"

package/en/docusaurus-plugin-content-docs/current/components/debug-app.md

@@ -0,0 +1,17 @@
+Execute `pnpm run dev` in the project to start the project:
+
+```bash
+$ pnpm run dev
+
+> modern dev
+
+info    Starting dev server...
+info    App running at:
+
+  > Local:    http://localhost:8080/
+  > Network:  http://192.168.0.1:8080/
+
+ Client ✔ done in 76.10ms
+```
+
+Open `http://localhost:8000/` in your browser to see the page content.

package/en/docusaurus-plugin-content-docs/current/components/enable-bff.md

@@ -8,29 +8,25 @@ import TabItem from '@theme/TabItem';
   <TabItem value="express" label="Express.js" default>
 
 ```ts title="edenx.config.ts"
-import ExpressPlugin from '@edenx/plugin-express';
-import BffPlugin from '@edenx/plugin-bff';
+import expressPlugin from '@edenx/plugin-express';
+import bffPlugin from '@edenx/plugin-bff';
 
 export default defineConfig({
-  plugins: [
-    ExpressPlugin(),
-    BffPlugin()
-  ]
-})
+  plugins: [expressPlugin(), bffPlugin()],
+});
 ```
+
   </TabItem>
   <TabItem value="koa" label="Koa.js">
 
 ```ts title="edenx.config.ts"
-import KoaPlugin from '@edenx/plugin-koa';
-import BffPlugin from '@edenx/plugin-bff';
+import koaPlugin from '@edenx/plugin-koa';
+import bffPlugin from '@edenx/plugin-bff';
 
 export default defineConfig({
-  plugins: [
-    KoaPlugin(),
-    BffPlugin()
-  ]
-})
+  plugins: [koaPlugin(), bffPlugin()],
+});
 ```
+
   </TabItem>
 </Tabs>

package/en/docusaurus-plugin-content-docs/current/components/enable-micro-frontend.md

@@ -1,6 +1,6 @@
-```javascript title="modern.config.ts"
-import AppToolPlugin, { defineConfig } from '@modern-js/app-tools';
-import GarfishPlugin from '@modern-js/plugin-garfish';
+```js title="modern.config.ts"
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import garfishPlugin from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   runtime: {
@@ -8,6 +8,6 @@ export default defineConfig({
     state: true,
     masterApp: true,
   },
-  plugins: [AppToolPlugin(), GarfishPlugin()],
+  plugins: [appTools(), garfishPlugin()],
 });
 ```

package/en/docusaurus-plugin-content-docs/current/components/global-proxy-config.md

@@ -1,9 +1,8 @@
-* Type: `string | Object`
-* Default: `null`
+- Type: `string | Object`
+- Default: `null`
 
 When this option is configured, the development environment will start a global proxy, similar to [Fiddler](https://www.telerik.com/fiddler), [Charles](https://www.charlesproxy.com/) and other web proxy debugging tools, which can be used to view, modify HTTP/HTTPS requests, responses, and can also be used as a proxy server.
 
-
 :::tip 提示
 Using this option requires advance installation `@modern-js/plugin-proxy`。
 :::
@@ -14,15 +13,15 @@ Using this option requires that the value of `Object` be installed in advance, t
 
 Example:
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   dev: {
     proxy: {
       'https://www.baidu.com': 'https://google.com.hk',
       //可以通过 file 协议直接返回静态文件。
       'https://example.com/api': 'file://./data.json',
-    }
-  }
+    },
+  },
 });
 ```
 
@@ -30,8 +29,7 @@ export default defineConfig({
 
 When the value is `string`, it can be used to specify a separate proxy file, for example:
 
-
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   dev: {
     proxy: './proxy.js',
@@ -71,4 +69,3 @@ Access the `localhost:8899` to view the Network and configure proxy rules on the
 :::caution Caution
 The https agent automatically installs the certificate to obtain root privileges. Please enter the password as prompted. ** The password is only used when the certificate is trusted and will not be leaked or used for other links **.
 :::
-

package/en/docusaurus-plugin-content-docs/current/components/global-proxy.md

@@ -1,4 +1,3 @@
-
 Modern.js provides out-of-the-box global proxy plugin `@modern-js/plugin-proxy`, which is based on [whistle](https://github.com/avwo/whistle) and can be used to view and modify HTTP/HTTPS requests and responses, and can also be used as an HTTP proxy server.
 
 ### Set Proxy Rules