@modern-js/main-doc 2.21.1 → 2.22.1

package/docs/en/guides/topic-detail/generator/plugin/context.md

@@ -0,0 +1,104 @@
+---
+sidebar_position: 4
+---
+
+# Context
+
+By default, generator plugins will export a function that takes `context` as a parameter. During execution, `context` will be automatically injected into the generator plugin.
+
+```ts title="src/index.ts"
+import { IPluginContext, ForgedAPI } from '@modern-js/generator-plugin';
+
+export default function (context: IPluginContext) {
+  context.onForged(async (_api: ForgedAPI, _input: Record<string, unknown>) => {
+    /**
+     * Todo
+     */
+  });
+}
+```
+`context` provides two types of APIs, which are used to customize input and define generator plugin lifecycle logic.
+
+:::info
+Only some APIs are briefly explained below. For the complete API, please refer to [Generator Plugin API](/guides/topic-detail/generator/plugin/api/context.html).
+:::
+
+## Customize Input
+
+Both Modern.js Web App and Npm Module schemes have default input interactions. These APIs can be used to add, modify, hide, and provide default values for these inputs.
+
+For example:
+
+- Add question
+
+```ts
+context.addInputBefore('packageManager', {
+  type: 'object',
+  properties: {
+    'username': {
+      type: 'string',
+      title: '用户名',
+    },
+  },
+});
+```
+
+- Hide question by setting `config`
+
+```ts
+context.setDefaultConfig({ langauge: 'ts' });
+```
+
+## Lifecycle
+
+Generator plugin provide two lifecycle hooks to define generator plugin behavior:
+
+- `onForged`: Lifecycle after file operations are completed.
+
+- `afterForged`: Lifecycle after the `onForged` hook function is executed.
+
+## `onForged`
+
+Hook function after the Modern.js project scheme generator has completed file operations. It is used to complete file operations in the generator plugin, such as adding template files, overwriting existing files, deleting existing files, etc.
+
+When multiple generator plugins are executed simultaneously for extension type, the `onForged` operations of the corresponding generator plugins will be executed in order according to the declared order.
+
+The `onForged` function takes a callback function as a parameter, with `api` and `input` as arguments.
+
+```ts
+context.onForged(async (api: ForgedAPI, input: Record<string, unknown>) => {
+  const { language } = input;
+  api.addFile({
+      type: FileType.Text,
+      file: `src/index.${language as string}`,
+      templateFile: `index.${language as string}.handlebars`,
+      force: true,
+  });
+})
+```
+
+The `api` object provides file operation-related methods supported by generator plugin.
+
+`input` is the current user input, which includes the `--config` parameter definition, the default scheme interaction, and the user input defined by the generator plugin.
+
+When adding a new file template, define the template file in the `templates` directory, and then operate on it through the `api` method above. The generator plugin defaults to operating on files in the `templates` directory, so there is no need to declare the `templates` path.
+
+## `afterForged`
+
+Executed after the `onForged` hook function is completed. It is mainly used to install dependencies, perform git operations, etc.
+
+By default, Modern.js project scheme will install dependencies and initialize Git after completing file operations, and perform git initial submissions, etc. This hook function can be omitted.
+
+For custom generator plugins that also support the `custom` type, which only provides a small number of best practice project configurations, installation of dependencies and Git initialization operations need to be completed in this hook function.
+
+The `afterForged` function also takes a callback function as a parameter, with `api` and `input` as arguments.
+
+```ts
+  context.afterForged(
+    async (api: AfterForgedAPI, input: Record<string, unknown>) => {
+      const { packageManager } = input;
+      console.info('packageManager:', packageManager);
+      await api.install();
+    },
+  );
+```

package/docs/en/guides/topic-detail/generator/plugin/structure.md

@@ -0,0 +1,106 @@
+---
+sidebar_position: 1
+---
+
+# Introduction and Project Creation
+
+## Introduction
+
+Modern.js provides engineering solutions such as Web App and Npm Module. By using the `@modern-js/create` tool, you can create initial project templates for engineering solutions. The initial project template provides a basic code development environment, simple example code, and configuration, etc.
+
+The initial templates provided by Modern.js are generic and can meet some common project development needs.
+
+When you use Modern.js deeply, you will inevitably find that each created project will make some specific similar changes for its own project, such as modifying example code, adding some configurations, enabling certain features, etc.
+
+Generator plugin can help you to deposit these specific changes for individuals or teams. When running `npx @modern-js/create@latest`, you only need to simply add the `--plugin` parameter to avoid repetitive modification of the project after each project creation.
+
+Generator plugin is based on the initial template projects provided by Modern.js, providing methods to add, delete, and modify templates, and modifying `package.json`, `modernConfig` configurations, and enabling features through a convenient way.
+
+## Create Project
+
+Use `@modern-js/create` to create a generator plugin project directly:
+
+```bash
+npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
+? Please select the type of project you want to create: Npm Module
+? Please select the project scenario: Generator Plugin
+? Please fill in the package name of the generator plugin: plugin
+? Please select the programming language: TS
+? Please select the package manager: pnpm
+? Please select the type of plugin: extend
+? Please select the base type of the plugin: Web App
+```
+
+After creating, we can take a look at the directory structure of this project:
+
+```bash
+.
+├── .changeset
+│   └── config.json
+├── .eslintrc.js
+├── .gitignore
+├── .npmrc
+├── .nvmrc
+├── .prettierrc
+├── README.md
+├── modern.config.ts
+├── package.json
+├── src
+│   ├── modern-app-env.d.ts
+│   └── index.ts
+├── templates
+│   └── .gitkeep
+└── tsconfig.json
+```
+
+The project is based on the Npm module project, and the core files are as follows:
+
+```bash
+*
+├── package.json
+├── src
+│   └── index.ts
+├── templates
+│   └── .gitkeep
+```
+
+## package.json
+
+In addition to the normal fields of a module project, `package.json` provides a `meta` field to describe information about the generator plugin.
+
+Generator plugin is divided into two categories: extension and custom. For specific classification definitions, please refer to [Type](/guides/topic-detail/generator/plugin/category).
+
+```json title="package.json"
+{
+  ...,
+  "meta": {
+    "extend": "mwa"
+  }
+}
+```
+
+## src/index.ts
+
+This file is used to complete the content development of the generator plugin.
+
+```js
+import { IPluginContext, ForgedAPI } from '@modern-js/generator-plugin';
+
+export default function (context: IPluginContext) {
+  context.onForged(async (_api: ForgedAPI, _input: Record<string, unknown>) => {
+    /**
+     * todo
+     */
+  });
+}
+```
+
+This file exports a function by default, and the function takes `context` as a parameter. The `context` object provides API methods supported by the generator plugin, which can be used to implement the logic of the generator plugin. The capabilities provided by `context` can be found in [context](/guides/topic-detail/generator/plugin/context).
+
+## templates
+
+The `templates` directory contains template files for the current customization method, supporting [Handlebars](https://handlebarsjs.com/) and [EJS](https://ejs.co/) formats. Different rendering engines will be used for rendering according to the template file suffix. If there is no suffix, the template file will be copied directly to the target directory.
+
+If the template file is a `js`, `ts`, or `json` file, it is recommended to use the `.handlebars` or `.ejs` suffix directly to avoid project eslint errors and recognition issues in Monorepo projects.
+
+The `.gitignore` and `.npmrc` files in the template will be automatically deleted when publishing the npm package, so it is necessary to use the `.handlebars` or `.ejs` suffix to keep them.

package/docs/en/guides/topic-detail/generator/plugin/use.md

@@ -0,0 +1,33 @@
+---
+sidebar_position: 3
+---
+
+# Usage
+
+`@modern-js/create` provides the `--plugin` parameter to run the generator plugin project.
+
+`--plugin` supports three formats:
+
+## Absolute path
+
+Suitable for local development and debugging. After development is completed, build the project by running `npm run build` in the generator plugin project, and then use the following command for testing:
+
+```bash
+npx @modern-js/create@latest --plugin <pluginPath>
+```
+
+## Relative path
+
+Suitable for local development and debugging or when the generator plugin project and the target project to be created are in the same Monorepo and there is no need to publish an NPM package. After building the generator plugin project, use the following command:
+
+```bash
+npx @modern-js/create@latest --plugin file:../<pluginPath>
+```
+
+## NPM package
+
+Suitable for scenarios where the generator project is published on npm for sharing.
+
+```bash
+npx @modern-js/create@latest --plugin <pluginPackage>
+```

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -33,8 +33,8 @@ npx @modern-js/create@latest
 After the project is created, we can enable the `micro frontend` through `pnpm run new`:
 
 ```bash
-? Action Enable features
-? Enable features Enable Micro Front-end Feature
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Micro Front-end Feature
 ```
 
 Next, let's register the micro frontend plugin and add the main micro frontend app and add the list of sub-apps:
@@ -115,8 +115,8 @@ npx @modern-js/create@latest
 After the project is created, we can enable the `micro frontend` function through `pnpm run new`:
 
 ```bash
-? Action Enable features
-? Enable features Enable Micro Front-end Feature
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Micro Front-end Feature
 ```
 
 Next, let's register the micro frontend plugin and add the main micro frontend app and add the list of sub-apps:
@@ -143,8 +143,8 @@ npx @modern-js/create@latest
 After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:
 
 ```bash
-? Action Enable features
-? Enable features Enable Micro Front-end Feature
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Micro Front-end Feature
 ```
 
 Next, let's register the micro frontend plugin and modify `modern.config.ts` to add the configuration of the micro frontend sub-app `deploy.microFrontend`:
@@ -192,8 +192,8 @@ npx @modern-js/create@latest
 After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:
 
 ```bash
-? Action Enable features
-? Enable features Enable Micro Front-end Feature
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Micro Front-end Feature
 ```
 
 Next, let's register the micro frontend plugin and modify `modern.config.ts` to add the configuration of the micro frontend sub-app `deploy.microFrontend`:

package/docs/en/guides/troubleshooting/builder.mdx

@@ -29,3 +29,11 @@ Please refer to [Modern.js Builder - Exceptions FAQ](https://modernjs.dev/builde
 - 'compilation' argument error when webpack compiling?
 - Compile error `You may need additional loader`?
 - Find `exports is not defined` runtime error?
+
+## HMR FAQ
+
+Please refer to [Modern.js Builder - HMR FAQ](https://modernjs.dev/builder/guide/faq/hmr.html), such as:
+
+- HMR not working when external React?
+- HMR not working when setting filename hash in development mode?
+- HMR not working when updating React components?

package/docs/en/tutorials/first-app/c03-css.mdx

@@ -114,8 +114,8 @@ Modern.js integrates the mainstream, light, general-purpose Utility Class librar
 Execute `pnpm run new` and select the following to start Tailwind CSS:
 
 ```bash
-? Action: Enable features
-? Enable features: Enable Tailwind CSS
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Tailwind CSS
 ```
 
 Register the Tailwind plugin in `modern.config.ts`:

package/docs/en/tutorials/first-app/c08-entries.mdx

@@ -14,9 +14,9 @@ A complete project may require multiple entries, Modern.js supports the automati
 We can also use it to create new project elements and execute `pnpm run new` in the project root directory:
 
 ```bash
-? Action Create project element
-? Create project element New "entry"
-? Entry name (entry) landing-page
+? Please select the operation you want: Create Element
+? Please select the type of element to create: New "entry"
+? Please fill in the entry name: landing-page
 ```
 
 When created, the project will look like this:

package/docs/zh/apis/app/commands.mdx

@@ -126,7 +126,7 @@ Options:
 ```bash
 $ npx modern new
 ? 请选择你想要的操作 创建工程元素
-? 创建工程元素 新建「应用入口」
+? 请选择创建元素类型 新建「应用入口」
 ? 请填写入口名称 entry
 ```
 
@@ -137,8 +137,8 @@ $ npx modern new
 ```bash
 $ npx modern new
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 (Use arrow keys)
-❯ 启用 Tailwind CSS 支持
+? 请选择功能名称 (Use arrow keys)
+❯ 启用 「Tailwind CSS」 支持
   启用「BFF」功能
   启用「微前端」模式
   启用「单元测试 / 集成测试」功能

package/docs/zh/apis/app/hooks/api/{functions/api.mdx → api.mdx}

@@ -4,7 +4,7 @@ sidebar_position: 1
 ---
 # **/*.[tj]s
 
-在 BFF 函数写法下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/functions/api)外，`api` 目录下的文件会被注册为接口的路由。
+在 [BFF 函数写法](/guides/advanced-features/bff/type.html#函数写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/api#白名单)外，`api` 目录下的文件会被注册为接口的路由。
 
 :::info
 使用 `api` 目录需要开启 BFF 功能，需要在项目下执行 new 命令启用「BFF」功能。
@@ -31,7 +31,7 @@ sidebar_position: 1
 
 ### 动态路由
 
-同样的，你可以通过创建带有 `[xxx]` 的文件夹或者文件来支持动态的命名路由参数。
+路由系统支持通过 `[]` 命名的文件目录生成动态路由。
 
 - `api/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
 - `api/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
@@ -64,7 +64,7 @@ export const get = async () => {
 };
 ```
 
-这样导出函数，则会得到一个 `POST` 接口。
+这样导出函数，则会得到一个 `GET` 接口。
 
 应用工程中支持了 9 个 Method 定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
 
@@ -75,6 +75,6 @@ export const get = async () => {
 可以在一个文件中定义多个不同 Method 的函数，但如果定义多个相同 Method 的函数，则只有第一个会生效。
 
 :::info
-需要注意的是，定义的函数都应该是异步的，这个与函数调用时类型有关，这个后面会提到。
+需要注意的是，定义的函数都应该是异步的，这个与函数调用时类型有关。
 
 :::

package/docs/zh/apis/app/hooks/api/app.mdx

@@ -0,0 +1,12 @@
+---
+title: _app.[tj]s
+sidebar_position: 2
+---
+# _app.[tj]s
+
+在 [BFF 函数写法](/guides/advanced-features/bff/type.html#函数写法)下，该文件可以为 BFF 函数添加前置中间件。
+
+:::note
+具体示例请参考 [hook](/apis/app/runtime/bff/hook)
+
+:::

package/docs/zh/apis/app/hooks/api/{framework/lambda.mdx → lambda.mdx}

@@ -1,10 +1,10 @@
 ---
 title: lambda/*.[tj]s
-sidebar_position: 1
+sidebar_position: 3
 ---
 # lambda/*.[tj]s
 
-在 BFF 框架写法下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/framework/lambda#白名单)外，`api/` 目录下的文件会被注册为接口的路由。
+在 [BFF 框架写法](/guides/advanced-features/bff/type.html#框架写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/lambda#白名单)外，`lambda/` 目录下的文件会被注册为接口的路由。
 
 :::info
 使用 `api` 目录需要开启 BFF 功能，需要在项目下执行 new 命令启用「BFF」功能。
@@ -34,7 +34,7 @@ sidebar_position: 1
 
 ### 动态路由
 
-同样的，你可以通过创建带有 `[xxx]` 的文件夹或者文件来支持动态的命名路由参数。
+路由系统支持通过 `[]` 命名的文件目录生成动态路由。
 
 - `api/lambda/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
 - `api/lambda/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
@@ -44,7 +44,7 @@ sidebar_position: 1
 
 ### 白名单
 
-默认 `api` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
+默认 `lambda` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
 
 - 命名以 `_` 开头的文件。例如：`_utils.ts`。
 - 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
@@ -54,4 +54,4 @@ sidebar_position: 1
 
 ## 函数定义
 
-和函数写法下[函数定义](/apis/app/hooks/api/functions/api#define-function)完全一致。
+和函数写法下[函数定义](/apis/app/hooks/api/api#函数定义)完全一致。

package/docs/zh/apis/app/hooks/api/test.mdx

@@ -1,12 +1,12 @@
 ---
 title: test.[tj]s
-sidebar_position: 2
+sidebar_position: 4
 ---
 # test.[tj]s
 
-应用的 BFF 测试文件，支持在 `api/` 目录后缀为 `.test.[tj]sx?` 的文件中编写测试用例。
+The BFF test file of the application supports writing test cases in files with the suffix `.test.[tj]sx?` under the `api/` directory.
 
 :::info
-使用单元测试、集成测试需要提前在项目下执行 new 命令启用「单元测试 / 集成测试」功能。
+Enabling unit testing and integration testing requires running the new command to enable the "Unit Testing/Integration Testing" function under the project first.
 
 :::

package/docs/zh/apis/app/hooks/config/icon.mdx

@@ -1,11 +1,11 @@
 ---
-title: icon
+title: icon/
 sidebar_position: 2
 ---
 
-# Icon
+# icon/
 
-## 设置 favicon
+## Favicon
 
 当项目根目录的 `config` 目录下存在 `favicon.*` 文件时，Modern.js 会自动将该文件设置到 [html.favicon](/configure/app/html/favicon) 配置项中，用于生成页面的 favicon 图标：
 
@@ -24,15 +24,15 @@ sidebar_position: 2
 
 在设置 app icon 时，Modern.js 会按以下顺序寻找文件：
 
-- favicon.png
-- favicon.jpg
-- favicon.jpeg
-- favicon.svg
-- favicon.ico
+- `favicon.png`
+- `favicon.jpg`
+- `favicon.jpeg`
+- `favicon.svg`
+- `favicon.ico`
 
-## 设置 app icon
+## Apple Touch Icon
 
-当项目根目录的 `config` 目录下存在 `icon.*` 文件时，Modern.js 会自动将该文件设置到 [html.appIcon](/configure/app/html/app-icon) 配置项中，用于生成 iOS 系统下的 apple-touch-icon 图标。
+当项目根目录的 `config` 目录下存在 `icon.*` 文件时，Modern.js 会自动将该文件设置到 [html.appIcon](/configure/app/html/app-icon) 配置项中，用于生成 iOS 系统下的 Apple Touch Icon 图标。
 
 ```
 ./config
@@ -49,8 +49,8 @@ sidebar_position: 2
 
 在设置 app icon 时，Modern.js 会按以下顺序寻找文件：
 
-- icon.png
-- icon.jpg
-- icon.jpeg
-- icon.svg
-- icon.ico
+- `icon.png`
+- `icon.jpg`
+- `icon.jpeg`
+- `icon.svg`
+- `icon.ico`

package/docs/zh/apis/app/hooks/config/mock.mdx

@@ -4,4 +4,4 @@ sidebar_position: 5
 ---
 # mock/
 
-项目根目录下存在 `config/mock/index.js` 时，在开发环节自动开启 Mock 服务。
+当项目目录下存在 `config/mock/index.js` 时，Modern.js 在开发环节将自动开启 Mock 服务。

package/docs/zh/apis/app/hooks/config/public.mdx

@@ -4,13 +4,13 @@ sidebar_position: 3
 ---
 # public/
 
-`public/` 目录中可以放置任意格式的静态资源文件，文件会被 Serve 在 Web 应用域名下。
+`public/` 目录中可以放置任意格式的静态资源文件，文件会被服务端部署到对应的应用域名下。
 
 ## 说明
 
-被 Serve 的文件路由基于目录结构的约定，其中，`public/` 为根目录，对应 Web 应用根路径。
+文件路由基于目录结构的约定，其中，`public/` 为根目录，对应 Web 应用根路径。
 
-例如 `config/public/sdk/index.js` 文件，在部署后将会被 Serve 在 `${domain}/sdk/index.js` 下。
+例如 `config/public/sdk/index.js` 文件，在部署后将会被部署在 `${domain}/sdk/index.js` 下。
 
 ## 场景
 

package/docs/zh/apis/app/hooks/config/upload.mdx

@@ -14,7 +14,7 @@ sidebar_position: 4
 
 ## 场景
 
-例如 `google-analysis.js` 等项目自用的 SDK（通常需要 http 缓存）。
+例如 `google-analysis.js` 等项目自用的 SDK（通常需要 HTTP 缓存）。
 
 图片、字体文件、通用 CSS 等。
 

package/docs/zh/apis/app/hooks/modern-config.mdx

@@ -1,9 +1,9 @@
 ---
-title: modern.config.js
+title: modern.config.[tj]s
 sidebar_position: 8
 ---
-# modern.config.js
+# modern.config.[tj]s
 
 Modern.js 配置文件, 通过该文件可以对当前项目的各个方面进行个性化配置。
 
-了解配置的具体用法，请参考 [配置使用](/configure/app/usage)。
+了解配置的具体用法，请参考[配置使用](/configure/app/usage)。

package/docs/zh/apis/app/hooks/server/index_.mdx

@@ -4,11 +4,6 @@ sidebar_position: 1
 ---
 # index.[tj]s
 
-扩展 Modern.js Web Server 的文件，在此文件中可以给应用工程启动的 Web Server 添加 Hook 或 Middleware。
+扩展 Modern.js Web Server 的文件，在此文件中可以给应用工程启动的 Web Server 添加 [Hook](/apis/app/runtime/web-server/hook) 或 [Middleware](/apis/app/runtime/web-server/middleware)。
 
 可以对请求和响应进行拦截处理，鉴权与角色、请求预处理、异常兜底等。也可在内置处理逻辑（包括路由匹配、资源寻址、头部注入、页面渲染，静态 Web 托管）插入特定的业务逻辑。
-
-:::info
-具体使用示例可查看 [Hook](/apis/app/runtime/web-server/hook) & [Middleware](/apis/app/runtime/web-server/middleware)。
-
-:::

package/docs/zh/apis/app/hooks/shared.mdx

@@ -4,4 +4,4 @@ sidebar_position: 5
 ---
 # shared/
 
-共享源码目录。当项目在 `api/`、`server/`、`src/` 下有公共代码时，可将这些代码放到 shared 目录下，而不是直接引用。
+共享源码目录。当项目在 `api/`、`server/`、`src/` 下有公共代码时，可将这些代码放到 `shared` 目录下，而不是直接引用。

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

@@ -4,46 +4,36 @@ sidebar_position: 1
 ---
 # App.[tj]sx
 
-应用使用自控路由时的入口标识符。
+应用使用[自控路由](/guides/basic-features/routes.html#self-controlled-routing)时的入口标识符。
 
 `App.[tj]sx` 并不是实际的应用入口，Modern.js 会自动生成真正的构建打包的入口文件, 内容大致如下：
 
 ```js
 import React from 'react';
+import ReactDOM from 'react-dom/client';
 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';
-
-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;
-};
+// runtime plugin
+import { router } from '@modern-js/runtime/plugins';
+
+const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
+const MOUNT_ID = 'root';
+
 let AppWrapper = null;
+
 function render() {
   AppWrapper = createApp({
     plugins: [
-      state({
-        ...{ plugins: createStatePlugins(true) },
-        ...App?.config?.state,
-      }),
-    ],
-  })(App);
+     router({...{"serverBase":["/"]}, ...App.config?.router}),
+    ]
+  })(App)
   if (IS_BROWSER) {
-    bootstrap(AppWrapper, MOUNT_ID);
+    bootstrap(AppWrapper, MOUNT_ID, null, ReactDOM);
   }
-  return AppWrapper;
+  return AppWrapper
 }
+
 AppWrapper = render();
 export default AppWrapper;
 ```