@modern-js/main-doc 2.12.0 → 2.13.0

package/docs/zh/apis/app/runtime/model/model_.mdx

@@ -2,9 +2,10 @@
 sidebar_position: 1
 title: model
 ---
+
 # model
 
-import ReduckTip from "@site-docs/components/reduck-tip"
+import ReduckTip from '@site-docs/components/reduck-tip';
 
 <ReduckTip />
 
@@ -61,7 +62,8 @@ const fooModel = model('foo').define({
 - context: Context，Reduck 上下文对象，可以获取底层的 `store` 对象。`store` 除支持 Redux Store 的所有 [API](https://redux.js.org/api/store) 以外，还挂载了用于消费 Model 的 `use` 的方法，和用于卸载 Model 的 `unmount` 方法。
 - utils: Utils，定义 Model 时，常用的工具函数：`use`、`onMount`。`use` 作用同 `store` 对象上的 `use`，`onMount` 是 Model 挂载后的钩子函数。
 
-{/* TODO: @anchao 调整类型  */}
+{/* TODO: @anchao 调整类型 */}
+
 ```ts
 interface Utils {
   use: UseModel;

package/docs/zh/blog/updates/2022-0708-updates.md

@@ -39,8 +39,7 @@ npx @modern-js/upgrade
 
 新的模块工程项目，不仅支持对产物做 bundless 构建，也支持 bundle 构建。通过配置 `buildConfig` 下的 [`buildType`](https://modernjs.dev/v1/docs/apis/module/config/output/build-config/build-type) ，即可进行 bundle 构建：
 
-```ts
-// modern.config.ts
+```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({

package/docs/zh/components/enable-bff.mdx

@@ -6,7 +6,7 @@ import { Tabs, Tab as TabItem } from "@theme";
 <Tabs>
   <TabItem value="express" label="Express.js" default>
 
-```ts title="edenx.config.ts"
+```ts title="modern.config.ts"
 import expressPlugin from '@modern-js/plugin-express';
 import bffPlugin from '@modern-js/plugin-bff';
 
@@ -18,7 +18,7 @@ export default defineConfig({
   </TabItem>
   <TabItem value="koa" label="Koa.js">
 
-```ts title="edenx.config.ts"
+```ts title="modern.config.ts"
 import koaPlugin from '@modern-js/plugin-koa';
 import bffPlugin from '@modern-js/plugin-bff';
 

package/docs/zh/configure/app/html/script-loading.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: scriptLoading
+---
+
+# html.scriptLoading
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [html.scriptLoading](https://modernjs.dev/builder/api/config-html.html#htmlscriptloading)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/html/scriptLoading.md';
+
+<Main />

package/docs/zh/configure/app/source/disable-entry-dirs.mdx

@@ -7,14 +7,14 @@ sidebar_label: disableEntryDirs
 - **类型：** `string[]`
 - **默认值：** `[]`
 
-默认会根据 `src` 目录识别应用入口，可通过该选项禁止某些目录被识别为应用入口。
+Modern.js 默认会根据 `src` 目录识别应用入口，你可以通过该选项禁止某些目录被识别为应用入口。
 
 例如，当配置与目录结构如下时：
 
 ```ts title="modern.config.ts"
 export default defineConfig({
   source: {
-    disableEntryDirs: './src/one',
+    disableEntryDirs: ['./src/one'],
   },
 });
 ```

package/docs/zh/configure/app/usage.mdx

@@ -19,17 +19,33 @@ Modern.js 不支持同时在 package.json 中和 modern.config.ts 中配置同
 
 ## 在配置文件中配置
 
-Modern.js 的配置文件定义在项目的根目录下，支持 `.js`, `.ts` 和 `.mjs` 格式：
+Modern.js 的配置文件定义在项目的根目录下，支持 `.ts`, `.js` 和 `.mjs` 格式：
 
-- `modern.config.js`
 - `modern.config.ts`
+- `modern.config.js`
 - `modern.config.mjs`
 
-### modern.config.js
+### modern.config.ts（推荐）
+
+我们推荐使用 .ts 格式的配置文件，它提供了友好的 TypeScript 类型提示，从而帮助你避免配置中的错误。
+
+从 `@modern-js/app-tools` 中导入 `defineConfig` 工具函数, 它会帮助你进行配置的类型推导和类型补全：
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  source: {
+    alias: {
+      '@common': './src/common',
+    },
+  },
+});
+```
 
-`modern.config.js` 中可以使用 JavaScript 语法，因此比 `package.json` 更加灵活。
+### modern.config.js
 
-比如，你可以在 `modern.config.js` 中定义函数类型的配置选项：
+如果你在开发一个非 TypeScript 项目，可以使用 .js 格式的配置文件：
 
 ```js title="modern.config.js"
 export default {
@@ -51,24 +67,6 @@ export default {
 };
 ```
 
-### modern.config.ts（推荐）
-
-我们推荐使用 .ts 格式的配置文件，它提供了友好的 TypeScript 类型提示，从而帮助你避免配置中的错误。
-
-从 `@modern-js/app-tools` 中导入 `defineConfig` 工具函数, 它会帮助你进行配置的类型推导和类型补全：
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  source: {
-    alias: {
-      '@common': './src/common',
-    },
-  },
-});
-```
-
 ### 导出配置函数
 
 Modern.js 支持在配置文件中导出一个函数，你可以在函数中动态计算配置，并返回给 Modern.js。
@@ -134,7 +132,7 @@ $ modern build -c modern.prod.config.js
 
 ## 在 package.json 中配置（不推荐）
 
-除了配置文件外，也可以在 `package.json` 中的 `modernConfig` 字段下设置配置选项，如：
+除了配置文件外，你也可以在 `package.json` 中的 `modernConfig` 字段下设置配置项，如：
 
 ```json title="package.json"
 {
@@ -200,3 +198,47 @@ modern.config.local.ts
 modern.config.local.js
 modern.config.local.mjs
 ```
+
+## 合并多份配置
+
+在某些情况下，你可能需要将多份配置合并为一份配置，此时你可以使用 `mergeConfig` 工具函数来合并多个配置。
+
+`mergeConfig` 函数接受一个数组作为参数，数组中的每一项都是一个配置对象，`mergeConfig` 会将数组中的每一项配置对象进行深层合并，自动将多个函数项合并为数组，最终返回一个合并后的配置对象。
+
+### 示例
+
+```ts title="modern.config.ts"
+import { mergeConfig } from '@modern-js/app-tools';
+
+const config1 = {
+  dev: {
+    port: 3000,
+  },
+  tools: {
+    postcss: () => console.log('config1');
+  },
+};
+const config2 = {
+  dev: {
+    port: 3001,
+  },
+  tools: {
+    postcss: () => console.log('config2');
+  },
+};
+
+const mergedConfig = mergeConfig([config1, config2]);
+```
+
+在以上示例中，合并后的配置对象为：
+
+```ts
+const mergedConfig = {
+  dev: {
+    port: 3001,
+  },
+  tools: {
+    postcss: [() => console.log('config1'), () => console.log('config2')],
+  },
+};
+```

package/docs/zh/guides/advanced-features/ssr.mdx

@@ -2,6 +2,7 @@
 title: 服务端渲染（SSR）
 sidebar_position: 3
 ---
+
 # 服务端渲染（SSR）
 
 在 Modern.js 中，SSR 也是开箱即用的。开发者无需为 SSR 编写复杂的服务端逻辑，也无需关心 SSR 的运维，或是创建单独的服务。Modern.js 拥有完备的 SSR 降级策略，保证页面能够安全运行。
@@ -12,10 +13,10 @@ sidebar_position: 3
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
-  "server": {
-    "ssr": true,
+  server: {
+    ssr: true,
   },
-})
+});
 ```
 
 ## SSR 时的数据获取
@@ -33,7 +34,7 @@ export default () => {
 在组件中可以通过 Hooks API 的方式获取 `loader` 函数返回的数据：
 
 ```tsx
-import { useLoaderData } from '@modern-js/runtime/router'
+import { useLoaderData } from '@modern-js/runtime/router';
 export default () => {
   const data = useLoaderData();
   return <div>{data.message}</div>;
@@ -45,14 +46,13 @@ Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发
 不过，开发者仍然需要关注数据的兜底处理，例如 `null` 值或不符合预期的数据返回。避免在 SSR 时产生 React 渲染错误或是返回凌乱的渲染结果。
 
 :::info 补充信息
+
 1. 当以客户端路由的方式请求页面时，Modern.js 会发送一个 HTTP 请求，服务端接收到请求后执行页面对应的 Data Loader 函数，然后将执行结果作为请求的响应返回浏览器。
 
 2. 使用 Data Loader 时，数据获取发生在渲染前，Modern.js 也仍然支持在组件渲染时获取数据。更多相关内容可以查看[数据获取](/guides/basic-features/data-fetch)。
 
 :::
 
-
-
 ## 保持渲染一致
 
 有些业务中，通常需要根据当前的运行容器环境特征做不同的 UI 展示，例如 [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) 信息。如果处理不够仔细，此时很有可能出现不符合预期的渲染结果。
@@ -215,16 +215,23 @@ const App = () => {
 export default App;
 ```
 
-在组件文件中引入 Node API，通常情况下是因为使用了 Data Loader，例如：
+在组件文件中引入 Node API，通常情况下是因为使用了 `useLoader`，例如：
 
 ```ts
 import fse from 'fs-extra';
-export const loader = () => {
-  const file = fse.readFileSync('./myfile');
-  return {
-    ...
-  };
+import { useLoader } from '@modern-js/runtime'
+
+const App = () => {
+  const { data } = useLoader(async () => {
+    const file = fse.readFileSync('./myfile');
+    return {
+      ...
+    };
+  })
+
+  return <div>Hello World</div>;
 };
+export default App;
 ```
 
 ### 环境变量区分
@@ -239,16 +246,32 @@ if (process.env.MODERN_TARGET === 'browser') {
 }
 ```
 
+开发环境打包后，SSR 产物和 CSR 产物会被编译成以下内容。因此 SSR 环境中不会再因为 Web API 报错：
+
+```ts
+// SSR 产物
+if (false) {
+}
+
+// CSR 产物
+if (true) {
+  document.addEventListener('load', () => {
+    console.log('document load');
+  });
+}
+```
+
 :::note
 更多内容可以查看[环境变量](/guides/basic-features/env-vars)。
-
 :::
 
 ### 文件后缀区分
 
-但例如第二种情况，Treeshaking 的方式并不能保证代码被完全分离。Modern.js 也支持通过 `.node.` 后缀的文件来区分 SSR Bundle 和 CSR Bundle 产物的打包文件。
+但例如第二种情况，在代码中引入了 `fs-extra`，它内部有使用了 Node API 的副作用，如果直接引用到组件中，会造成 CSR 加载报错。
 
-例如在代码中引入了 `fs-extra`，这时候直接引用到组件中，会造成 CSR 加载报错。可以创建同名的 `.ts` 和 `.node.ts` 文件做一层代理：
+环境变量的方式并不能在这种情况下生效，Modern.js 也支持通过 `.node.` 后缀的文件来区分 SSR Bundle 和 CSR Bundle 产物的打包文件。
+
+可以创建同名的 `.ts` 和 `.node.ts` 文件做一层代理：
 
 ```ts title="compat.ts"
 export const readFileSync: any = () => {};
@@ -273,7 +296,27 @@ export const loader = () => {
 
 ### 独立文件
 
-上述两种方式，都会为开发者带来一些心智负担。Modern.js 基于[嵌套路由](/guides/basic-features/routes)开发设计了[更简单的方案](/guides/basic-features/data-fetch)来分离 CSR 和 SSR 的代码。
+上述两种方式，都会为开发者带来一些心智负担。在真实的业务中，我们发现大多数的 Node / Web 代码混用都出现在数据请求中。
+
+因此，Modern.js 基于[嵌套路由](/guides/basic-features/routes)开发设计了[更简单的方案](/guides/basic-features/data-fetch)来分离 CSR 和 SSR 的代码。
+
+我们可以通过独立文件来分离**数据请求**与**组件代码**。在 `routes/page.tsx` 中编写组件逻辑，在 `routes/page.loader.ts` 中编写数据请求逻辑。
+
+```ts title="routes/page.tsx"
+export default Page = () => {
+  return <div>Hello World<div>
+}
+```
+
+```ts title="routes/page.loader.tsx"
+import fse from 'fs-extra';
+export default () => {
+  const file = fse.readFileSync('./myfile');
+  return {
+    ...
+  };
+}
+```
 
 ## 接口请求
 
@@ -291,12 +334,12 @@ Modern.js 支持了 React 18 的流式渲染，可以通过如下配置启用：
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
-  "server": {
-    "ssr": {
-      "mode": "stream",
+  server: {
+    ssr: {
+      mode: 'stream',
     },
   },
-})
+});
 ```
 
 Modern.js 的流式渲染基于 React Router 实现，主要涉及 API 有：
@@ -305,10 +348,9 @@ Modern.js 的流式渲染基于 React Router 实现，主要涉及 API 有：
 - [`Await`](https://reactrouter.com/en/main/components/await)：用于渲染 Data Loader 返回的异步数据。
 - [`useAsyncValue`](https://reactrouter.com/en/main/hooks/use-async-value)：用于从最近的父级 `Await` 组件中获取数据。
 
-
 ### 异步获取数据
 
-```ts title='page.loader.ts'
+```ts title="page.loader.ts"
 import { defer, type LoaderFunctionArgs } from '@modern-js/runtime/router';
 
 interface User {
@@ -334,16 +376,14 @@ export default ({ params }: LoaderFunctionArgs) => {
 
   return defer({ data: user });
 };
-
 ```
 
 `user` 是一个 Promise 类型的对象，表示需要异步获取的数据，通过 `defer` 处理需要异步获取的 `user`。注意，`defer` 必须接收一个对象类型的参数，
-因此， 传入 `defer` 的参数为 `{data: user}`。
+因此， 传入 `defer` 的参数为：`{ data: user }`
 
 `defer` 还可以同时接收异步数据和同步数据。例如：
 
-```ts title='page.loader.ts'
-
+```ts title="page.loader.ts"
 // 省略部分代码
 
 export default ({ params }: LoaderFunctionArgs) => {
@@ -366,20 +406,18 @@ export default ({ params }: LoaderFunctionArgs) => {
 
   return defer({
     data: user,
-    other: await otherData
+    other: await otherData,
   });
 };
-
 ```
 
 `otherData` 前加了 `await`，所以是同步获取的数据，它可以和异步获取的数据 `user` 同时传入 `defer`。
 
-
 ### 渲染异步数据
 
 通过 `Await` 组件，可以获取到 Data Loader 中异步返回的数据，然后进行渲染。例如：
 
-```tsx title='page.tsx'
+```tsx title="page.tsx"
 import { Await, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 import type { Data } from './page.loader';
@@ -392,7 +430,7 @@ const Page = () => {
       User info:
       <Suspense fallback={<div id="loading">loading user data ...</div>}>
         <Await resolve={data.data}>
-          {(user) => {
+          {user => {
             return (
               <div id="data">
                 name: {user.name}, age: {user.age}
@@ -430,11 +468,11 @@ const UserInfo = () => {
   const user = useAsyncValue();
 
   return (
-     <div>
+    <div>
       name: {user.name}, age: {user.age}
     </div>
-  )
-}
+  );
+};
 
 const Page = () => {
   const data = useLoaderData() as Data;
@@ -459,7 +497,7 @@ export default Page;
 `Await` 组件的 `errorElement` 属性，可以用来处理当 Data Loader 执行时，或者子组件渲染时抛出的错误。
 例如，我们故意在 Data Loader 函数中抛出错误：
 
-```ts title='page.loader.ts'
+```ts title="page.loader.ts"
 import { defer } from '@modern-js/runtime/router';
 
 export default () => {
@@ -475,7 +513,7 @@ export default () => {
 
 然后通过 `useAsyncError` 获取错误，并将用于渲染错误信息的组件赋值给 `Await` 组件的 `errorElement` 属性：
 
-```tsx title='page.ts'
+```tsx title="page.ts"
 import { Await, useAsyncError, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 

package/docs/zh/guides/basic-features/html.mdx

@@ -174,10 +174,6 @@ Modern.js 也支持 HTML 语法。默认情况下，Modern.js 的应用工程中
     <%= meta %>
     <title><%= title %></title>
     <%= topTemplate %>
-
-    <script>
-      window.__assetPrefix__ = '<%= assetPrefix %>';
-    </script>
     <%= headTemplate %>
     {/* webpack inject css  */}
   </head>

package/docs/zh/guides/basic-features/routes.mdx

@@ -2,6 +2,7 @@
 title: 路由
 sidebar_position: 1
 ---
+
 # 路由
 
 Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，并提供了多种类型的路由模式。根据不同 [入口](/guides/concept/entries) 类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**其他路由方案**。
@@ -77,8 +78,8 @@ Modern.js 支持了业界流行的约定式路由模式：**嵌套路由**，使
 ```tsx
 <Layout>
   <UserLayout>
-    <UserPage>
-  <UserLayout>
+    <UserPage />
+  </UserLayout>
 </Layout>
 ```
 
@@ -138,8 +139,8 @@ export default () => {
 ```tsx
 <Layout>
   <UserLayout>
-    <UserPage>
-  <UserLayout>
+    <UserPage />
+  </UserLayout>
 </Layout>
 ```
 
@@ -177,6 +178,7 @@ export default () => {
 :::
 
 例如以下目录结构：
+
 ```
 └── routes
     ├── $.tsx
@@ -186,11 +188,12 @@ export default () => {
 ```
 
 当访问任何匹配不到的路径时，都会渲染 `routes/$.tsx` 组件，同样，`$.tsx` 中可以使用 [useParams](/apis/app/runtime/router/router#useparams) 捕获 url 的剩余部分。
+
 ```ts title="$.tsx"
 import { useParams } from '@modern-js/runtime/router';
 // 当 path 是 `/aaa/bbb` 时
 const params = useParams();
-params['*']  // => 'aaa/bbb'
+params['*']; // => 'aaa/bbb'
 ```
 
 `$.tsx` 可以加入到 `routes` 目录下的任意目录中，一个常见的使用示例是添加 `routes/$.tsx` 文件去定制任意层级的 404 页面。
@@ -260,8 +263,8 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 
 ```tsx title="当路由为 / 时"
 <Layout>
-  <Suspense fallback={<Loading/>}>
-    <Page><Page>
+  <Suspense fallback={<Loading />}>
+    <Page />
   </Suspense>
 </Layout>
 ```
@@ -297,15 +300,15 @@ Modern.js 建议必须有根 layout 和根 loading。
 可以通过创建 [`data loader`](/guides/basic-features/data-fetch) 文件做路由的重定向，如有文件 `routes/user/page.tsx`，想对这个文件对应的路由做重定向，可以创建 `routes/user/page.loader.ts` 文件：
 
 ```ts title="routes/user/page.loader.ts"
-import { redirect } from '@modern-js/runtime/router'
+import { redirect } from '@modern-js/runtime/router';
 
 export default () => {
   const user = await getUser();
-  if(!user){
+  if (!user) {
     return redirect('/login');
   }
   return null;
-}
+};
 ```
 
 ### 错误处理
@@ -338,7 +341,7 @@ export default ErrorBoundary;
 
 在每个根 `Layout` 组件中(`routes/layout.ts`)，可以动态地定义应用运行时配置：
 
-```ts title="src/routes/layout.tsx"
+```tsx title="src/routes/layout.tsx"
 // 定义运行时配置
 import type { AppConfig } from '@modern-js/runtime';
 
@@ -348,13 +351,13 @@ export const config = (): AppConfig => {
       createRoutes() {
         return [
           {
-            path: 'edenx',
-            element: <div>edenx</div>,
+            path: 'modern',
+            element: <div>modern</div>,
           },
         ];
       },
     },
-  }
+  };
 };
 ```
 
@@ -378,15 +381,13 @@ export const init = (context: RuntimeContext) => {
 :::
 
 ```ts title="src/routes/layout.tsx"
-import {
-  RuntimeContext,
-} from '@modern-js/runtime';
+import { RuntimeContext } from '@modern-js/runtime';
 
 export const init = (context: RuntimeContext) => {
   return {
     message: 'Hello World',
-  }
-}
+  };
+};
 ```
 
 ```tsx title="src/routes/page.tsx"
@@ -397,7 +398,7 @@ export default () => {
   const { message } = context.getInitData();
 
   return <div>{message}</div>;
-}
+};
 ```
 
 配合 SSR 功能时，浏览器端可以获取到 SSR 时 `init` 返回的数据，开发者可以自行判断是否要在浏览器端重新获取数据来覆盖 SSR 数据，例如：
@@ -409,20 +410,42 @@ export const init = (context: RuntimeContext) => {
   if (process.env.MODERN_TARGET === 'node') {
     return {
       message: 'Hello World By Server',
-    }
+    };
   } else {
     const { context } = runtimeContext;
     const data = context.getInitData();
     // 如果没有获取到期望的数据
     if (!data.message) {
       return {
-        message: 'Hello World By Client'
-      }
+        message: 'Hello World By Client',
+      };
     }
   }
-}
+};
 ```
 
+### Prefetch
+
+在约定式路由下， Modern.js 会根据路由，自动地对路由进行分片，当用户访问具体的路由时，会自动加载对应的分片，这样可以有效地减少首屏加载的时间。但这也带来了一个问题，当用户访问一个路由时，如果该路由对应的分片还未加载完成，就会出现白屏的情况。
+这种情况下你可以通过定义 `loading` 组件，在静态资源加载完成前，展示一个自定义的 `loading` 组件。
+
+为了进一步提升用户体验，减少 loading 的时间，Modern.js 支持在 Link 组件上定义 `prefetch` 属性，可以提前对静态资源和数据进行加载， `prefetch` 属性有三个可选值：
+
+```
+<Link prefetch="intent" to="page">
+```
+
+:::info
+- 该功能目前仅在 Webpack 项目中支持，Rspack 项目暂不支持。
+- 对数据的预加载目前只会预加载 SSR 项目中 [data loader](/guides/basic-features/data-fetch) 中返回的数据。
+
+:::
+
+- `none`， 默认值，不会做 prefetch，没有任何额外的行为。
+- `intent`，这是我们推荐大多数场景下使用的值，当你把鼠标放在 Link 上时，会自动开始加载对应的分片和 data loader 中定义的数据，当鼠标移开时，会自动取消加载。在我们的测试中，即使是直接点击，也能减少大约 200ms 的加载时间。
+- `render`，当 Link 组件渲染时，就会加载对应的分片和 data loader 中定义的数据。
+
+
 
 ## 自控式路由
 
@@ -469,3 +492,20 @@ export default defineConfig({
   },
 });
 ```
+
+### 常见问题
+
+1. 产物中的代码是 es2015+ 的，期望产物中是 es5 的代码
+
+react-router^6 的目前默认产物是 es2020 的，如果需要产物中是 es5 的代码，可以配置 `source.include`，让 react-router 相关包经过 bundler 编译 ：
+
+```
+source: {
+  source: {
+    include: [/@remix-run\/router/, /react-router-dom/, /react-router/],
+  }
+}
+```
+
+
+

package/docs/zh/guides/concept/entries.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# 入口（Entry）
+# 入口
 
 通过本章节，你可以了解到 Modern.js 中的入口约定，以及如何自定义入口。
 
@@ -132,9 +132,9 @@ Modern.js 生成的文件内容如下：
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import customBootstrap from '@_edenx_src/index.tsx';
-import App from '@_edenx_src/App';
-import { router, state } from '@edenx/runtime/plugins';
+import customBootstrap from '@_modern_js_src/index.tsx';
+import App from '@_modern_js_src/App';
+import { router, state } from '@modern-js/runtime/plugins';
 
 const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
 const MOUNT_ID = 'root';