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

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

@@ -1,85 +0,0 @@
----
-title: loadable
----
-
-Used to create Loadable component
-
-## Usage
-
-```ts
-import loadable from '@modern-js/runtime/loadable';
-```
-
-## Function Signature
-
-```ts
-type Options = {
-  resolveComponent?: (
-    module: Module,
-    props: Props,
-  ) => React.ComponentType<Props>,
-  fallback?: JSX.Element;
-  ssr?: boolean;
-}
-
-function loadable(loadFn: Function, options?: Options) => LoadableComponent
-```
-
-### Input
-
-#### loadFn
-
-Used to load component.
-
-```ts
-import loadable from '@modern-js/runtime/loadable';
-
-const OtherComponent = loadable(() => import('./OtherComponent'))
-```
-
-#### options.resolveComponent
-
-Type: `(module: Module, props: Props) => React.ComponentType<Props>`
-
-`module` is the component returned by `loadFn`, and `props` is the props parameter accepted by the component.
-
-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!'
-```
-
-```ts title='loadable.js'
-const LoadableApple = loadable(() => import('./components'), {
-  resolveComponent: (components) => components.Apple,
-})
-const LoadableOrange = loadable(() => import('./components'), {
-  resolveComponent: (components) => components.Orange,
-})
-const LoadableFruit = loadable(() => import('./components'), {
-  resolveComponent: (components, props) => components[props.fruit],
-})
-```
-
-#### options.fallback
-
-Whether to display fallback content during loading.
-
-#### options.ssr
-
-Whether to support SSR, the default value is `true`。
-
-### Return Value
-
-#### LoadableComponent
-
-```ts
-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

@@ -1,131 +0,0 @@
----
-title: Hook
----
-
-Used to extend Modern.js built-in Web Server, requests except BFF are handled by these hooks.
-
-:::note
-For more detail, see [Extend Web Server](/docs/guides/advanced-features/web-server)。
-:::
-
-## Usage
-
-```ts
-import { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
-
-export const afterMatch: AfterMatchHook = (context, next) => {}
-export const afterRender: AfterRenderHook = (context, next) => {}
-```
-
-:::info
-使用该 API 前，请先执行 `pnpm run new` 新建「Web Server 扩展」源码目录。
-
-```bash
-pnpm run new
-? 请选择你想要的操作 创建工程元素
-? 新建「Web Server 扩展」源码目录
-```
-:::
-
-## Function Signature
-
-```ts
-type HookContext = {
-  response: {
-    set: (key: string, value: string) => void;
-    status: (code: number) => void;
-    cookies: {
-      get: (key: string) => string;
-      set: (key: string, value: string) => void;
-      delete: () => void;
-      clear: () => void;
-    };
-    raw: (
-      body: string,
-      { status, headers }: { status: number; headers: Record<string, any> },
-    ) => void;
-  };
-  request: {
-    host: string;
-    pathname: string;
-    query: Record<string, any>;
-    cookie: string;
-    cookies: {
-      get: (key: string) => string;
-    };
-    headers: IncomingHttpHeaders;
-  };
-};
-
-function Hook(context: HookContext, next: NextFunction): Promsie<void> | void;
-```
-
-different Hooks additionally provide different contexts. Currently Modern.js support `AtferMatch` and `AfterRender`.
-
-```ts
-type AfterMatchContext = HookContext & {
-  router: {
-    redirect: (url: string, status: number) => void;
-    rewrite: (entry: string) => void;
-  };
-}
-
-type AfterRenderContext = {
-  template: {
-    get: () => string;
-    set: (html: string) => void;
-    prependHead: (fragment: string) => void;
-    appendHead: (fragment: string) => void;
-    prependBody: (fragment: string) => void;
-    appendBody: (fragment: string) => void;
-  };
-};
-```
-
-
-### Input
-
-- `context`: Hook context.
-  - `response`: provides a series of methods to process the response.
-  - `request`: provides a series of methods to get request info.
-  - `router`: provides methods on routing.
-  - `template`: provides methods on content.
-- `next`: call next listener（not affect the server process, only current hook）。
-
-## Example
-
-### Redirect
-
-Redirect to pages outside the site, for example to login page:
-
-```ts
-import type { AfterMatch } from '@modern-js/runtime/server';
-
-export const afterMatch: AfterMatch = async (ctx, next) => {
-  ctx.router.redirect('https://website.com/login', 302);
-};
-```
-
-### Rewrite
-
-Rewrite to pages of the current site, for example, the same route returns pages that are adapted to different UA:
-
-```ts
-import type { AfterMatch } from '@modern-js/runtime/server';
-
-export const afterMatch: AfterMatch = async (ctx, next) => {
-  ctx.router.rewrite('mobile');
-};
-```
-
-### HTML Inject
-
-Inject some HTML content to the page, such as scripts, page skeletons, etc.:
-
-```ts
-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

@@ -1,106 +0,0 @@
----
-title: Middleware
----
-
-Used to extend Modern.js built-in Web Server, only SSR requests are handled by these middleware.
-
-Unlike [Hook](/docs/apis/app/runtime/web-server/hook), middleware can be extended using the framework plugin.
-
-:::note
-For more detail, see [Extend Web Server](/docs/guides/advanced-features/web-server)。
-:::
-
-## Usage
-
-```ts
-import { Middleware } from '@modern-js/runtime/server';
-
-export const middleware: Middleware = async (context, next) => {}
-export const middleware: Middleware[] = [
-  async (context, next) => {},
-  async (context, next) => {},
-]
-```
-
-:::info
-使用该 API 前，请先执行 `pnpm run new` 新建「Web Server 扩展」源码目录。
-
-```bash
-pnpm run new
-? 请选择你想要的操作 创建工程元素
-? 新建「Web Server 扩展」源码目录
-```
-:::
-
-## Function Signature
-
-```ts
-type MiddlewareContext = {
-  response: {
-    set: (key: string, value: string) => void;
-    status: (code: number) => void;
-    cookies: {
-      get: (key: string) => string;
-      set: (key: string, value: string) => void;
-      delete: () => void;
-      clear: () => void;
-      apply: () => void;
-    };
-    raw: (
-      body: string,
-      { status, headers }: { status: number; headers: Record<string, any> },
-    ) => void;
-    locals: Record<string, any>;
-  };
-  request: {
-    host: string;
-    pathname: string;
-    query: Record<string, any>;
-    cookie: string;
-    cookies: {
-      get: (key: string) => string;
-    };
-    headers: IncomingHttpHeaders;
-  };
-  source: {
-    req: IncomingMessage;
-    res: ServerResponse;
-  };
-};
-
-type RequestHandler = (context: Context, next: NextFunction) => Promise<void> | void;
-```
-
-
-### Input
-
-- `context`: Middleware context.
-  - `response`: provides a series of methods to process the response.
-  - `request`: provides a series of methods to get request info.
-  - `source`: provides Node.js native `req` and `res` object。
-- `next`: call next listener（not affect the server process, only current hook）。
-
-## Example
-
-### Tracking
-
-```ts
-export const Middleware = () => async (ctx, next) => {
-  const start = Date.now();
-  ctx.res.once('finish', () => {
-    console.log(Date.now() - start);
-  });
-}
-```
-
-### Inject Tools & Data
-
-Modern.js provides `res.locals` to store local variables for the current request.
-
-```ts
-export const Middleware = () => async (ctx, next) => {
-  ctx.res.locals.id = 'Modern.js';
-  ctx.res.locals.rpc = createRpcInstance();
-});
-```
-

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

@@ -1,56 +0,0 @@
-:::tip 提示
-The pnpm v6 and pnpm v7 versions do not use the same posture when executing commands. The following should be noted:
-
-pnpm v7：
-
-When using pnpm to invoke a command in `package.json`, if you need to pass arguments to pnpm, you need to put the arguments before the command.
-
-For example, execute the prepare command with the pnpm '--filter' parameter:
-
-```bash
-pnpm run --filter "./packages/**" prepare
-```
-
-If you need to pass parameters to a command, you need to put the parameters after the command.
-
-For example, in the following `package.json` configuration:
-
-``` json
-{
-  "scripts": {
-    "command": "modern command"
-  }
-}
-```
-
-The way to carry parameters when executing the command command is:
-```bash
-pnpm run command --options
-```
-
-pnpm v6:
-
-In the following `package.json` configuration:
-
-``` json
-{
-  "scripts": {
-    "command": "modern command"
-  }
-}
-```
-
-If you need to execute `modern command --option`,
-
-When using pnpm, you need to execute the `pnpm run command -- --option`。
-
-This is because pnpm does not handle command parameters the same as Yarn, but is similar to npm: when not adding a `--` character string, the parameters of pnpm are passed; when using a `--` character string, the parameters of the execution script are passed.
-
-In the above example the parameter `--option` is passed to `modern command`. If `pnpm run command --option` is executed, the parameter `--option` will be passed to pnpm.
-
-Summary:
-
-** When using pnpm v7, if you pass arguments to pnpm, you need to put the arguments before the command **
-
-** When using pnpm v6, if the parameter passed to pnpm, you do not need to add `--`; if the parameter passed is for script use, you need to add `--` character string **.
-:::

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

@@ -1,36 +0,0 @@
-1. Execute `pnpm new` and select "Enable BFF"
-2. Add the following code to `modern.config.[tj]s` according to the chosen runtime framework：
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="modern.config.ts"
-import ExpressPlugin from '@modern-js/plugin-express';
-import BffPlugin from '@modern-js/plugin-bff';
-
-export default defineConfig({
-  plugins: [
-    ExpressPlugin(),
-    BffPlugin()
-  ]
-})
-```
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="modern.config.ts"
-import KoaPlugin from '@modern-js/plugin-koa';
-import BffPlugin from '@modern-js/plugin-bff';
-
-export default defineConfig({
-  plugins: [
-    KoaPlugin(),
-    BffPlugin()
-  ]
-})
-```
-  </TabItem>
-</Tabs>

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

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

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

@@ -1,74 +0,0 @@
-* 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`。
-:::
-
-### Object
-
-Using this option requires that the value of `Object` be installed in advance, the `key` of the object corresponds to the matching `pattern`, and the `value` of the object corresponds to the matching `target`.
-
-Example:
-
-```typescript 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',
-    }
-  }
-});
-```
-
-### String
-
-When the value is `string`, it can be used to specify a separate proxy file, for example:
-
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  dev: {
-    proxy: './proxy.js',
-  },
-});
-```
-
-```js title="proxy.js"
-module.exports = {
-  name: 'my-app',
-  rules: `
-    ^example.com:8080/api/***   http://localhost:3001/api/$
-  `,
-};
-```
-
-:::info
-Modern.js global proxy implementation is based on [whistle](https://wproxy.org/whistle/), for more matching patterns, please refer to: [Matching Patterns](https://wproxy.org/whistle/pattern.html)
-:::
-
-Execute `dev`, when the prompt is as follows, the proxy server starts successfully:
-
-```bash
-  App running at:
-
-  Local:    http://localhost:8080/
-  Network:  http://192.168.0.1:8080/
-
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
-```
-
-Access the `localhost:8899` to view the Network and configure proxy rules on the UI interface:
-
-![proxy UI](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/dev-proxy.png)
-
-:::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,28 +0,0 @@
-
-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
-
-After install the proxy plugin and filling in the rules, execute `pnpm run dev`, Modern.js will automatically enable the proxy server after the development server starts.
-
-Specific proxy rules can be set via the [`dev.proxy`](/docs/configure/app/dev/proxy) or the `config/proxy.js` file.
-
-### Use Proxy Dashboard
-
-After exec `pnpm run dev` command:
-
-```bash
-  App running at:
-
-  Local:    http://localhost:8080/
-  Network:  http://192.168.0.1:8080/
-
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
-```
-
-In the console you can see that the proxy server started successfully.
-
-Accessing the `http://localhost:8899` and, you can set the rules through the dashboard.
-
-![debug-proxy-ui](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/debug/debug-proxy-ui.png)

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

@@ -1,42 +0,0 @@
-Modern.js generator will provide an interactive Q & A interface, initialization items according to the result, according to the default selection:
-
-```bash
-? Please select the solution you want to create: MWA Solution
-? Development Language: TS
-? Package Management Tool: pnpm
-```
-
-After create the project, Modern.js automatically installs dependency and creates a git repository.
-
-```bash
-[INFO] dependencies are automatically installed
-[INFO] git repository has been automatically created
-[INFO] Success！
-You can run the following command in the directory of the new project：
-pnpm run dev          # Run and debug the project according to the requirements of the development environment
-pnpm run build        # Build the project according to the requirements of the product environment
-pnpm run serve        # Run the project according to the requirements of the product environment
-pnpm run lint         # Check and fix all codes
-pnpm run new          # Create more project elements, such as application portals
-```
-
-:::note
-In addition to working during project initialization, the Modern.js generator can also generate modules of the project in subsequent development, which is not thrown away as soon as it is used.
-:::
-
-Now, the project structure is as follows:
-
-```
-.
-├── src
-│   ├── modern-app-env.d.ts
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
-├── modern.config.ts
-├── package.json
-├── pnpm-lock.yaml
-├── README.md
-└── tsconfig.json
-```

package/en/docusaurus-plugin-content-docs/current/components/micro-master-manifest-config.md

@@ -1,15 +0,0 @@
-## manifest
-
-```ts
-interface Manifest {
-  getAppList?: ()=> Array<AppInfo>
-}
-```
-
-### getAppList?
-
-Through the `getAppList` configuration, you can customize how to get remote list data
-
-```ts
-type GetAppList = ()=> Promise<Array<AppInfo>>;
-```

package/en/docusaurus-plugin-content-docs/current/components/micro-runtime-config.md

@@ -1,18 +0,0 @@
-```javascript title="src/App.tsx"
-import { defineConfig } from '@modern-js/runtime';
-
-defineConfig(App, {
-  masterApp: {
-    apps: [
-      {
-        name: 'DashBoard',
-        entry: 'http://127.0.0.1:8081/',
-      },
-      {
-        name: 'TableList',
-        entry: 'http://localhost:8082',
-      },
-    ],
-  },
-});
-```

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

@@ -1,19 +0,0 @@
-### Node.js
-
-Requires [Node.js LTS] (https://github.com/nodejs/Release) and makes sure the Node version is greater than or equal to v16.18.1.
-
-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 whenever there is a `.nvmrc` file with `lts/gallium` in the root directory of the repository, entering the repository will automatically install or switch to the correct Node.js version.
-
-### pnpm
-
-It is recommended to use [pnpm](https://pnpm.io/installation) to manage dependencies:
-
-```bash
-npm install -g pnpm
-```
-
-:::note
-Modern.js also supports dependency management with `yarn` and `npm`.
-:::

package/en/docusaurus-plugin-content-docs/current/components/reduck-migration.md

@@ -1 +0,0 @@
-

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

@@ -1,5 +0,0 @@
-:::info  information
-By default, the export package name for all APIs in this section is: `@modern-js/runtime/model`.
-
-If Reduck is integrated separately from Modern.js, the export package name is: `@modern-js-reduck/react`.
-:::

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

@@ -1 +0,0 @@
-