@modern-js/main-doc 2.0.0-beta.0 → 2.0.0-beta.1

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/performance/remove-moment-locale.md

@@ -1,7 +1,6 @@
 ---
 title: performance.removeMomentLocale
 sidebar_label: removeMomentLocale
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/docusaurus-plugin-content-docs/current/configure/app/plugins.md

@@ -0,0 +1,74 @@
+---
+title: plugins
+sidebar_position: 9
+---
+
+* Type: `CliPlugin[] | { cli: CliPlugin[] }`
+* Default: `[]`
+
+Used to configure custom Modern.js plugins.
+
+For the way to write custom plugins, please refer to [How to Write Plugins](/docs/guides/topic-detail/framework-plugin/implement).
+
+This option is used to configure the framework plugin. If you need to configure the webpack plugin, please use [tools.webpack](/docs/configure/app/tools/webpack) or [tools.webpack Chain](/docs/configure/app/tools/webpack-chain); If you need to configure the babel plugin, please use [tools.babel](/docs/configure/app/tools/babel).
+
+## Plugin type
+
+There are three different plug-in mechanisms built into the Modern.js:
+
+- `CLI Plugin`，for local development, compilation and build phases, can extend various capabilities on the command line and compilation phases.
+- `Server Plugin`，for server-level.
+- `Runtime Plugin`，for runtime.
+
+The ability to customize CLI plugins is currently open Modern.js, and the Server plugin and Runtime plugin will be available in the future.
+
+## Plugin execution order
+
+By default, custom plugins are executed sequentially in the order of an array of `plugins`, Modern.js built-in plugins are executed earlier than custom plugins.
+
+When the plugin uses related fields that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields, see [Relationship between plugins](/docs/guides/topic-detail/framework-plugin/relationship).
+
+## Example
+
+Below is an example of using the CLI plugin.
+
+### Using plugins on npm
+
+To use the plugin on npm, you need to install the plugin through the package manager and import it.
+
+```ts title="modern.config.ts"
+import MyPlugin from 'my-plugin';
+
+export default defineConfig({
+  plugins: [MyPlugin()],
+});
+```
+
+### Use local plugins
+
+Using the plugin in the local code repository, you can import it directly through the relative path import.
+
+```ts title="modern.config.ts"
+import MyPlugin from './config/plugin/MyPlugin';
+
+export default defineConfig({
+  plugins: [MyPlugin()],
+});
+```
+
+### Plugin configuration
+
+If the plugin provides some custom configuration options, you can pass in the configuration through the parameters of the plugin function.
+
+```ts title="modern.config.ts"
+import MyPlugin from 'my-plugin';
+
+export default defineConfig({
+  plugins: [
+    MyPlugin({
+      foo: 1,
+      bar: 2,
+    }),
+  ],
+});
+```

package/en/docusaurus-plugin-content-docs/current/configure/app/runtime/intro.md

@@ -0,0 +1,91 @@
+---
+sidebar_label: Overview
+sidebar_position: 1
+---
+
+# Overview
+
+This section describes the configuration of the Runtime plugin.
+
+## Configuration
+
+### runtime
+
+* Type: `Object`
+
+The runtime is configured as follows:
+
+#### Base
+
+Configure in `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  runtime: {
+    state: true,
+    router: true
+  }
+});
+```
+
+#### DefineConfig
+
+Configure use [`defineConfig`](/docs/apis/app/runtime/app/define-config) API:
+
+:::info
+When there is a function in the runtime configuration, it can only be configured in this way.
+:::
+
+```ts title="src/App.tsx"
+import { defineConfig } from '@modern-js/runtime';
+
+const App = () => {
+  /** */
+};
+
+defineConfig(App, {
+  router: {
+    supportHtml5History: false
+  }
+})
+
+export default App;
+```
+
+:::info
+Using runtime configuration, you can solve the problem that runtime plugin configuration needs to be at runtime to get specific content.
+
+Runtime plugin runtime configuration and configuration directly in `modern.config.ts` are merged by default, and runtime configuration takes precedence.
+:::
+
+:::warning
+defineConfig 中只能定义 Runtime 插件的具体配置内容，确认是否开启插件还需要通过 `package.json` 中的 `modernConfig` 或者 `modern.config.ts` 中的配置决定。
+:::
+
+### runtimeByEntries
+
+* Type: `Object`
+
+#### Introduce
+
+Add the runtime configuration according to the entry. The option attribute is consistent with the runtime. The specified value will be replaced and merged with the content of the runtime attribute.
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  runtime: {
+    state: false,
+  },
+  runtimeByEntries: {
+    entry1: {
+       state: true, // { state: true }
+    },
+    entry2: { // { state: false, router: true }
+       router: true,
+    },
+  },
+});
+```

package/en/docusaurus-plugin-content-docs/current/configure/app/runtime/master-app.md

@@ -0,0 +1,60 @@
+---
+sidebar_label: masterApp
+---
+
+# runtime.masterApp
+
+* 类型： `Object`
+
+:::info
+First you need to enable the "micro frontend" function using [new command](/docs/apis/app/commands/new).
+:::
+
+## `manifest`
+
+The main application adds sub-application information.
+
+* Type: `modules: Array<{
+        name: string;
+        entry: string;
+        activeWhen?: string;
+      }> | string;`
+* Default: `null`
+
+### `modules`
+
+When `modules` is an object type, it represents the information of the sub-application module.
+
+- name: The name of the child application
+- entry: The entry of the child application
+- activeWhen?: The path of the child application
+
+When  `modules` is `string`, it is a url address, and requesting this address can get the same data structure as the `modules` object format.
+
+## `LoadingComponent`
+
+* Type: `React.ComponentType | React.ElementType`
+* Default: `null`
+
+A transition animation to load when loading or switching child applications.
+
+`LoadingComponent` needs to be configured with [defineConfig](/docs/apis/app/runtime/app/define-config).
+
+```tsx
+import { defineConfig } from '@modern-js/runtime';
+
+function App() {
+  ...
+}
+
+defineConfig(
+  App,
+  {
+    masterApp: {
+      LoadingComponent: () => {
+        return <div>loading...</div>
+      }
+    }
+  }
+)
+```

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

@@ -0,0 +1,19 @@
+---
+sidebar_label: router
+---
+
+# runtime.router
+
+* Type: `boolean | Object`
+* Default: `false`。
+
+When `router` is enabled, routing management using conventional routes provided by Modern.js default is supported.
+
+具体配置如下：
+
+### supportHtml5History
+
+* Type: `Boolean`
+* Default: `true`
+
+If the value of `supportHtml5History` is `true`, the project will use `BrowserRouter`, otherwise `HashRouter`.

package/en/docusaurus-plugin-content-docs/current/configure/app/runtime/state.md

@@ -0,0 +1,41 @@
+---
+sidebar_label: state
+---
+
+# runtime.state
+
+* Type:`boolean | object`
+* Default: `false`
+
+Once `state` is enabled, you can use [Model](/docs/guides/topic-detail/model/quick-start) for state management.
+
+The specific configuration items are as follows:
+
+## `immer`
+
+* Type:`boolean`
+* Default: `true`
+
+Whether to enable to update the state with mutable, it is enabled by default, and set to `false` if you want to disable it.
+
+## `effects`
+
+* Type:`boolean`
+* Default: `true`
+
+Whether to enable the side effect management feature, it is enabled by default, and set to `false` if you want to disable it.
+
+## `autoActions`
+
+* Type:`boolean`
+* Default: `true`
+
+Whether to enable the auto-generated actions feature, it is enabled by default, and set to `false` if you want to disable it.
+
+
+## `devtools`
+
+* Type:`boolean | EnhancerOptions`
+* Default: `true`
+
+Whether to enable devtools, it is enabled by default, and all parameters of [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md) are supported at the same time. If you want to disable it, set it to `false`.

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/security/sri.md

@@ -1,7 +1,6 @@
 ---
 title: security.sri
 sidebar_label: sri
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/docusaurus-plugin-content-docs/current/configure/app/server/base-url.md

@@ -0,0 +1,33 @@
+---
+sidebar_label: baseUrl
+---
+
+# server.baseUrl
+
+* Type: `string | string[]`
+* Default: `undefined`
+
+
+Uniformly set the server-level routing prefix (often used in the case of shared domain names to distinguish traffic).
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  server: {
+    // 所有生成的路由前面都会自动加上前缀 `/base`
+    // 生成的服务端路由文件路径：dist/route.json
+    baseUrl: '/base'
+
+    // 多 baseUrl
+    baseUrl: ['/base-new', '/base-old']
+  }
+})
+```
+
+After `dev`, you can see that the routed access will be prefixed accordingly:
+
+```bash
+App running at:
+
+  > Local:    http://localhost:8080/base/
+  > Network:  http://192.168.0.1:8080/base/
+```

package/en/docusaurus-plugin-content-docs/current/configure/app/server/port.md

@@ -0,0 +1,18 @@
+---
+sidebar_label: port
+---
+
+# server.port
+
+* Type: `Number`
+* Default: `8080`
+
+Modern.js' default port is '8080', when using the `dev` or `start` command. You can change the port number using this configuration:
+
+```js title="modern.config.ts"
+export default defineConfig({
+  server: {
+    port: 3000,
+  }
+});
+```

package/en/docusaurus-plugin-content-docs/current/configure/app/server/public-routes.md

@@ -0,0 +1,26 @@
+---
+sidebar_label: publicRoutes
+---
+
+# server.publicRoutes
+
+* Type: `Object`
+* Default: Automatic generation of server-level routing rules based on file conventions: One routing rule is generated per file of the application.
+
+This configuration option only applies to server-level routing, and you can customize the access route of resources in `config/public/`.
+
+The `key` of the object is the relative file path of the current application (not used `./`）, value can be `string`.
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  server: {
+    publicRoutes: {
+      // Set up a long route
+      'index.json': '/user-config/card-info/extra/help.json',
+
+      // Set up a route without a suffix
+      'robot.txt': '/app/authentication'
+    }
+  }
+});
+```

package/en/docusaurus-plugin-content-docs/current/configure/app/server/routes.md

@@ -0,0 +1,91 @@
+---
+sidebar_label: routes
+---
+
+# server.routes
+
+* Type: `Object`
+* Default: Automatic generation of server-level routing rules based on file conventions: One routing rule is generated per file of the application,and the default route is the same as the entry name.
+
+This configuration option only applies to server-level routing, and can customize the service access configuration of the application entry.
+
+## Custom access routing
+
+The `key` of the object is the entry name of the current application, and the value can be `string | Array<string>`.
+
+When the value type is  `string`, the current value represents the name of the route to access the entry.
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  server: {
+    routes: {
+      // The default route is /entryName1, /p/test1 after customization
+      entryName1: '/p/test1'
+      // Support dynamic server-level routing configuration
+      entryName2: '/detail/:id'
+    }
+  }
+});
+```
+
+Multiple access routes can also be set for entries using the `Array<string>`:
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  server: {
+    routes: {
+      'page-a': [`/a`, '/b'],
+    },
+  },
+});
+```
+
+At this point, the '`page-a` entry can be accessed through both `/a` and `/b` routes.
+
+After executing the `dev` command, you can see in `dist/route.json` that there are two routing records in the entry `page-a`:
+
+```json
+{
+  "routes": [
+    {
+      "urlPath": "/a",
+      "entryName": "page-a",
+      "entryPath": "html/page-a/index.html",
+      "isSPA": true,
+      "isSSR": false,
+      "enableModernMode": false
+    },
+    {
+      "urlPath": "/b",
+      "entryName": "page-a",
+      "entryPath": "html/page-a/index.html",
+      "isSPA": true,
+      "isSSR": false,
+      "enableModernMode": false
+    },
+  ]
+}
+```
+
+## Custom response header
+
+The response header can be set by configuring the resHeaders of the entry:
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  server: {
+    routes: {
+      'page-a': {
+        route: ['/a', '/b'],
+        resHeaders: {
+          'x-modern-test': '1',
+        },
+      },
+    },
+  },
+});
+```
+
+:::note
+This configuration takes effect in both the production environment and the development environment, and can set different response headers according to the NODE_ENV. But if you only need to set response headers in the development environment, `tools.devServer.headers` is recommended.
+:::

package/en/docusaurus-plugin-content-docs/current/configure/app/server/ssr-by-entries.md

@@ -0,0 +1,28 @@
+---
+sidebar_label: ssrByEntries
+---
+
+# server.ssrByEntries
+
+* Type: `Object`
+* Default: `undefined`
+
+Set the ssr option according to the entry. The attributes in the option are the same as [ssr](./ssr.md). The specified value will be replaced and merged with the content of the ssr attribute. For example:
+
+:::info
+The "entry name" defaults to the directory name. In a few cases, when the entry is customized by `source.entries`, the entry name `source.entries` the `key` of the object.
+:::
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  server: {
+    ssr: true,
+    ssrByEntries: {
+      // page-a does not enable ssr
+      'page-a': false,
+    }
+  }
+});
+```
+
+As configured above, the project has ssr enabled as a whole, but the ssr rendering capability is turned off for the entry `page-a`.

package/en/docusaurus-plugin-content-docs/current/configure/app/server/ssr.md

@@ -0,0 +1,20 @@
+---
+sidebar_label: ssr
+---
+
+# server.ssr
+
+* Type: `boolean`
+* Default: `false`
+
+Enalbe SSR configuration.
+
+When the value type is `boolean`, it indicates whether to enable SSR deployment mode, and `false` is not enabled by default.
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  server: {
+    ssr: true,
+  }
+});
+```

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/source/alias.md

@@ -1,7 +1,6 @@
 ---
 title: source.alias
 sidebar_label: alias
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/source/compile-js-data-uri.md

@@ -1,7 +1,6 @@
 ---
 title: source.compileJsDataURI
 sidebar_label: compileJsDataURI
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/docusaurus-plugin-content-docs/current/configure/app/source/config-dir.md

@@ -0,0 +1,23 @@
+---
+title: source.configDir
+sidebar_label: configDir
+---
+
+* Type: `string`
+* Default: `./config`
+
+Modern.js supports placing some files in the `./config` folder to customize HTML templates, icons, static resources, etc. For details, please refer to [File Convention](/docs/apis/app/hooks/config/html).
+
+This option allows you to customize the directory of configuration files.
+
+For example, adjust the resource file directory to the `resources` directory:
+
+```js title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  source: {
+    configDir: './resources',
+  },
+});
+```

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/source/define.md

@@ -1,7 +1,6 @@
 ---
 title: source.define
 sidebar_label: define
-sidebar_position: 1
 ---
 
 :::info BUILDER