@modern-js/main-doc 2.0.0-beta.3 → 2.0.0-beta.5

package/en/docusaurus-plugin-content-docs/current/apis/app/commands/start.md

@@ -1,32 +0,0 @@
----
-sidebar_position: 6
----
-
-```bash
-Usage: modern start [options]
-
-start server
-
-Options:
-  -c --config <config>  configuration file path, which can be a relative path or an absolute path
-  -h, --help            show command help
-  --api-only            only start API service
-```
-
-Usually use the `modern start` command to enable project start in the production environment, and you need to execute the [`build'](/docs/apis/app/commands/build) command in advance to build the product.
-
-By default, the project will start in `localhost:8080`, you can modify the Server port number with `server.port`:
-
-```js
-export default defineConfig({
-  server: {
-    port: 8081,
-  }
-})
-```
-
-import CommandTip from '@site-docs-en/components/command-tip.md'
-
-<CommandTip />
-
-

package/en/docusaurus-plugin-content-docs/current/configure/app/output/enable-modern-mode.md

@@ -1,34 +0,0 @@
----
-sidebar_label: enableModernMode
----
-
-# output.enableModernMode
-
-* Type: `boolean`
-* Default: `false`
-
-Modern.js default value to build JS products with Polyfill for older browsers. After opening this configuration, you can automatically build JS products that are not degraded for modern browser syntax in the production environment. The product filename format is `[name].[hash]-es6/js`.
-
-For example, configure the following configuration:
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  output: {
-    enableModernMode: true,
-  },
-});
-```
-
-After executing the `build` command, modern is packaged in addition to the normal Client packaging, and the `dist/static/js` directory will generate es6 related products.
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-build.jpeg)
-
-After executing the `start` command, use the latest version Chrome browser access, and observe that the requested JS resource in the Network is an es6 product.
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-network.jpeg)
-
-:::info
-For more information, see [Client side compatibility](/docs/guides/advanced-features/compatibility)。
-:::

package/zh/apis/generator/overview.md

@@ -1,32 +0,0 @@
----
-sidebar_position: 0
----
-
-# 概览
-Modern.js 提供了 `create` 工具用于初始化不同工程方案项目。
-
-## 基本使用
-
-```bash
-npx @modern-js/create [projectDir]
-```
-
-```bash
-Usage: create [projectDir]
-
-创建 @modern-js 应用
-
-Options:
-  -c, --config <config>  创建项目默认配置(JSON 字符串) (default: "{}")
-  --mwa                  一键创建应用工程(使用默认配置) (default: false)
-  --module               一键创建模块工程(使用默认配置) (default: false)
-  --monorepo             一键常见 Monorepo 应用(使用默认配置) (default: false)
-  --dist-tag <distTag>   生成项目时生成器使用特殊的 npm Tag (default: "")
-  --registry <registry>  在创建过程中定制 npm Registry (default: "")
-  -d,--debug             开启 Debug 模式，打印调试日志信息 (default: false)
-  -h, --help             display help for command
-```
-
-:::info 补充信息
-不需要全局安装 `@modern-js/create`，使用 npx 按需运行即可，可以保证始终运行最新版本的项目生成器。
-:::

package/zh/configure/app/output/enable-modern-mode.md

@@ -1,34 +0,0 @@
----
-sidebar_label: enableModernMode
----
-
-# output.enableModernMode
-
-* 类型： `boolean`
-* 默认值：`false`
-
-Modern.js 默认值构建针对旧版浏览器带有 Polyfill 的 JS 产物，开启该配置后，可以在生产环境会自动构建出针对现代浏览器语法未降级的 JS 产物，产物文件名格式为 `[name].[hash]-es6/js`。
-
-例如配置如下配置：
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  output: {
-    enableModernMode: true,
-  },
-});
-```
-
-执行 `build` 命令后，除了正常的 Client 打包外， 还进行了 Modern 的打包，并且 `dist/static/js` 目录会生成 es6 相关产物。
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-build.jpeg)
-
-执行 `start` 命令后，使用最新版本 Chrome 浏览器访问，观察 Network 中请求的 JS 资源为 es6 产物。
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-network.jpeg)
-
-:::info
-更多内容可以查看[客户端兼容性](/docs/guides/advanced-features/compatibility)。
-:::

package/zh/guides/advanced-features/custom-app.md

@@ -1,72 +0,0 @@
----
-title: 自定义 App
-sidebar_position: 7
----
-
-在[入口](/docs/guides/concept/entries)概念中提到， Modern.js 提供了三种文件约定来标记入口。
-
-通常情况下，`routes/` 与 `App.[jt]sx` 两种模式已经能够满足需求。当开发者需要在根组件挂载前做些操作，或者完全接管 Webpack 入口时，可以在入口目录下放置 `index.[jt]sx` 文件，我们称为**自定义 App**。
-
-## 添加自定义行为
-
-当 `index` 文件默认导出**函数**是，Modern.js 还是会根据 `runtime` 的设置情况生成 `createApp` 包裹后的代码。在渲染过程中，将 `createApp` 包裹后的组件作为参数传递给 `index` 文件导出的函数，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
-
-```js title=src/index.jsx
-import ReactDOM from 'react-dom/client'
-import { bootstrap } from '@modern-js/runtime';
-
-
-export default App => {
-  // do something before bootstrap...
-  bootstrap(App, 'root', undefined, ReactDOM);
-};
-```
-
-:::warning
-由于 bootstrap 函数需要兼容 React17 和 React18 的用法，调用 bootstrap 函数时需要手动传入 ReactDOM 参数。
-:::
-
-Modern.js 生成的文件内容如下：
-
-```js
-import customRender from '@/src/index.js';
-import { createApp, bootstrap } from '@modern-js/runtime';
-import React from 'react';
-import App from '@/src/App';
-
-const IS_BROWSER = typeof window !== 'undefined';
-const MOUNT_ID = 'root';
-
-let AppWrapper = null;
-
-const renderApp = () => {
-  AppWrapper = createApp({
-    // runtime 的插件参数...
-  })(App);
-  customRender(AppWrapper);
-};
-
-renderApp();
-
-export default AppWrapper;
-
-if (IS_BROWSER && module.hot) {
-  module.hot.accept('<path>/src/App', () => {
-    renderApp();
-  });
-}
-```
-
-## 完全接管 Webpack 入口
-
-当 `index.[jt]sx` 文件没有导出函数时，这时候该文件就是真正的 Webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
-
-```js title=src/index.jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-```
-
-Modern.js **不推荐**使用这种方式，这种方式丧失了框架的一些能力，如 **`modern.config.js` 文件中的 `runtime` 配置将不会再生效**。

package/zh/guides/topic-detail/micro-frontend/communicate.md

@@ -1,39 +0,0 @@
----
-sidebar_position: 3
-title: 主子应用通信
----
-
-## props 通信
-
-Modern.js 中，会将子应用包裹成一个 React 组件，直接通过给 React 组件传递 `props` 即可实现主应用和子应用通信的目的。
-
-```tsx title=主应用：App.tsx
-function App() {
-  const { Dashboard } = useModuleApps();
-  const [count, setCount] = useState(0);
-
-  return <div>
-    <Dashboard count={count} />
-    <button onClick={() => setCount(count + 1)}>add</button>
-  </div>;
-}
-```
-
-```tsx title=子应用：App.tsx
-function App(props) {
-  console.log(props);
-
-  return ...
-}
-```
-
-子应用将会打印 `{count: 0}`。
-
-当主应用点击 `add` 按钮，`count` 状态更新的时候，子应用也会响应到最新的 `props` 数据，并重新渲染。
-
-## 使用 Model 通信
-
-
-:::tip 提示
-近期上线，敬请期待。
-:::

package/zh/guides/topic-detail/micro-frontend/debugging.md

@@ -1,168 +0,0 @@
----
-sidebar_position: 2
-title: 子应用调试
----
-
-根据研发的不同阶段，我们将子应用调试分为如下两种方式：
-
-1. 使用本地主应用调试。
-2. 使用线上主应用调试。
-
-## 使用本地主应用调试
-
-项目初期，主应用未部署，可以使用本地分别启动主应用、子应用的方式进行调试。
-
-### 主应用
-
-#### 配置
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  runtime: {
-    router: true,
-    masterApp: {
-      manifest: {
-        modules: [
-          {
-            name: 'Dashboard',
-            entry: 'http://localhost:8081',
-          },
-        ],
-      },
-    },
-  },
-});
-```
-
-假设本地的子应用的名字为 `DashBoard` 且启动服务的地址为 `http://localhost:8081`。配置 `runtime.masterApp.modules` 字段指定子应用的相关信息。
-
-#### 加载子应用
-
-使用 [useModuleApps](/docs/apis/app/runtime/core/use-module-apps) API 获取子应用组件，并加载子应用。
-
-```tsx title=App.tsx
-import { useModuleApps } from '@modern-js/plugin-garfish';
-
-function App() {
-  const { Dashboard } = useModuleApps();
-
-  return (
-    <div>
-      Master APP
-      <Route path="/dashboard">
-        <Dashboard />
-      </Route>
-    </div>
-  );
-}
-```
-
-### 子应用
-
-#### 配置
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  deploy: {
-    microFrontend: true,
-  },
-});
-```
-
-当 `deploy.microFrontend` 字段配置为 true 的时候，Modern.js 将认为当前应用是一个微前端子应用，并将其编译为符合 Garfish 子应用规范的产物。
-
-#### 子应用代码
-
-子应用在代码层面和应用工程是完全一致的。
-
-```tsx title=src/App.tsx
-function App() {
-  return <div>dashboard</div>;
-}
-```
-
-:::info 注
-目前不支持在子应用中使用 BFF 功能。
-:::
-
-然后分别启动主应用和子应用（执行 `pnpm dev`），主应用访问 `8080` 端口，子应用访问 `8081` 端口。浏览器打开 `http://localhost:8080/dashboard` 就能看到加载了 `Dashboard` 子应用的效果了。
-
-## 使用线上主应用调试
-
-当主应用项目部署之后，Modern.js 提供了用线上主应用调试本地子应用的方式。
-
-:::info 注
-本小节所用线上地址均是虚构，只为演示方便。
-:::
-
-### 主应用
-
-#### 配置
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  server: {
-    enableMicroFrontendDebug: true,
-  },
-  runtime: {
-    router: true,
-    masterApp: {
-      manifest: {
-        modules: [
-          {
-            name: 'Dashboard',
-            entry: 'http://modern-js.dev/dashboard',
-          },
-        ],
-      },
-    },
-  },
-});
-```
-
-:::info 注
-`enableMicroFrontendDebug` 会在线上开启 微前端 Debug 模式，如担心安全隐患，可只在线上测试环境开启，线上正式环境关掉该配置。
-:::
-
-### 子应用
-
-#### 配置
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  deploy: {
-    microFrontend: true,
-  },
-});
-```
-
-本地启动子应用，其端口为 `8080`。
-
-### Query 模式调试
-
-访问主应用地址 `http://master.example.com/` 并在 URL 后加上 Query `?__debug__micro-frontend-debug-name=TableList&__debug__micro-frontend-debug-entry=http://localhost:8080`。
-
-此时访问主应用后，服务端注入的子应用模块信息将被替换为我们 Query 里的信息。即 `TableList` 子应用 `entry` 为 `http://localhost:8080`。线上主应用切换到 `/tablelist` 路由后将会加载本地的子应用。
-
-![query-debug](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/query-debug.png)
-
-### Header 模式调试（推荐）
-
-Query 调试时，当路透跳转的时候，Query 参数会丢失，reload 页面后，服务端返回的子应用信息里将不会注入本地的子应用信息。可以使用 Header 模式来调试，获取更稳定的调试开发体验。
-
-#### 环境要求
-
-[ModHeader](https://modheader.com/install) 是用于 Mock 浏览器请求/返回 Header 的浏览器插件。使用 ModHeader 支持的浏览器（Chrome、Firefox、Opera、Edge），并安装 ModHeader 插件。
-
-#### 配置 Header
-
-配置如下 Header:
-
-- `x-micro-frontend-module-name TableList`
-- `x-micro-frontend-module-entry http://localhost:8080`
-
-访问主应用地址如下所示
-
-![header-debug](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/header-debug.png)
-
-可以看到此时服务端返回的 `TableList` 子应用信息是 Header 里面指定的本地域名 `http://localhost:8080`

package/zh/guides/topic-detail/micro-frontend/introduction.md

@@ -1,13 +0,0 @@
----
-sidebar_position: 1
-title: 微前端介绍
----
-
-随着前端生态的繁重以及 Web 应用日益复杂化，给大型项目研发流程、跨团队协作等带来不小的挑战。微前端从架构层面出发将多个独立交付的前端应用组成整体，这些前端应用能够「独立开发」、「独立测试」、「独立部署」，但是最终在用户看来仍然是内聚的单个产品。
-
-[Garfish](https://garfish.top/guide/) 是业界成熟的微前端解决方案，Modern.js 中开箱即用的支持了 [Garfish](https://garfish.top/guide/)。
-
-在微前端研发模式中，应用会被分成 **主应用**、和 **子应用**。
-
-- 主应用：微前端项目的基座工程，所有子应用都会由它来加载。
-- 子应用：独立开发、独立部署的应用，最终会被主应用加载。

package/zh/guides/topic-detail/micro-frontend/route-mode.md

@@ -1,110 +0,0 @@
----
-sidebar_position: 4
-title: 加载子应用
----
-
-在微前端中分为两种加载子应用的方式：
-
-1. **子应用组件** 获取到每个子应用的组件，之后就可以像使用普通的 React 组件一样渲染微前端的子应用。
-2. **集中式路由** 通过集中式的路由配置，自动根据当前页面 pathname 激活渲染对应的子应用。
-
-## 子应用组件
-
-使用 `useModuleApps` API 可以获取到各个子应用的组件。结合 `router`，可以自控式的根据不同的路由渲染不同的子应用。
-
-假设我们的子应用列表配置如下：
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  runtime: {
-    masterApp: {
-      manifest: {
-        modules: [
-          {
-            name: "Dashboard",
-            entry: "http://localhost:8081"
-          },
-          {
-            name: "TableList",
-            entry: "http://localhost:8082"
-          }
-        ]
-      }
-    }
-  }
-}
-```
-
-编辑主应用 `App.tsx` 文件如下：
-
-```tsx title=主应用：App.tsx
-import { useModuleApps } from '@modern-js/plugin-garfish';
-import { Route, Switch } from '@modern-js/runtime/router';
-
-function App() {
-  const { Dashboard, TableList } = useModuleApps();
-
-  return <div>
-    <Switch>
-      <Route path='/dashboard'>
-        <Dashboard />
-      </Route>
-      <Route path='/tablelist'>
-        <TableList />
-      </Route>
-    </ Switch>
-  </div>
-}
-```
-
-这里通过 `Route` 组件自定义了 **DashBoard** 的激活路由为 **/dashboard**， **TableList** 的激活路由为 **/tablelist**。
-
-## 集中式路由
-
-**集中式路由** 是将子应用的激活路由集中配置的方式。我们给子应用列表信息添加 `activeWhen` 字段来启用 **集中式路由**。
-
-```typescript title="modern.config.ts"Å {8,13}
-export default defineConfig({
-  runtime: {
-    masterApp: {
-      manifest: {
-        modules: [
-          {
-            name: "Dashboard",
-            activeWhen: '/dashboard',
-            entry: "http://localhost:8081"
-          },
-          {
-            name: TableList,
-            activeWhen: '/tablelist',
-            entry: "http://localhost:8082"
-          }
-        ]
-      }
-    }
-  }
-}
-```
-
-然后在主应用中使用 `useModuleApp` API 来获取 `MApp` 在主应用渲染。
-
-```tsx title=主应用：App.tsx
-import { useModuleApp } from '@modern-js/runtime';
-
-function App() {
-  const MApp = useModuleApp();
-
-  return <div>
-    <MApp />
-  </div>
-}
-```
-
-这样启动应用后，访问 `/dashboard` 路由，会渲染 `Dashboard` 子应用，访问 `/tablelist` 路由，会渲染 `TableList` 子应用。
-
-## 两种模式混用
-
-当然 **子应用组件** 和 **集中式路由** 是可以混合使用的。
-
-- 一部分子应用作为 **子应用组件** 激活，另外一部分作为 **集中式路由** 激活。
-- 一部分子应用既可以作为 **集中式路由** 激活，也可以作为 **子应用组件** 激活。

package/zh/guides/topic-detail/monorepo/deploy.md

@@ -1,43 +0,0 @@
----
-sidebar_position: 5
----
-
-# 应用项目的部署
-
-本章将要介绍如何在 Monorepo 中对应用项目进行部署。
-
-所谓的 “在 Monorepo 中对应用项目进行部署” 更像是应用项目部署到服务器的前置工作。应用项目的功能一般来自以下部分
-
-- 自身的代码逻辑功能
-- 第三方的依赖
-- Monorepo 中其他子项目提供的逻辑功能
-
-而在将应用项目放到部署服务器之前，需要对应用项目、第三方依赖以及它所依赖的子项目做整合处理。
-
-Modern.js 为 Monorepo 工程提供了部署功能，该功能可以为要部署的项目生成一个最小集合的 Monorepo，在这个 Monorepo 当中包含应用项目以及其依赖的子项目。
-
-我们以 [子项目联调](/docs/guides/topic-detail/monorepo/sub-project-interface) 章节的例子为例，如果要发布 `apps/app` 应用项目，那么在 Monorepo 根目录下执行：
-
-```
-pnpm deploy app
-```
-
-:::info 补充信息
-`app` 为应用项目的项目名称，或者说是 `package.json` 的 `name` 对应的值。
-:::
-
-执行命令之后，首先会在 Monorepo 根目录下生成 `output` 目录，其中包含了应用项目 `apps/app`、`features/internal-lib`、`packages/components`。
-
-:::info 补充信息
-`output` 目录就是需要部署到服务器上的目录，可以通过命令参数进行路径修改。可以查看 [deploy 命令](/docs/apis/monorepo/commands/deploy)。
-:::
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/guides/monorepo-output.png)
-
-然后会自动进行依赖的安装。
-
-最后当 deploy 命令运行完成后，我们可以将 `output` 放到部署项目的服务器上。
-
-:::tip 提示
-在使用 Yarn 的 Monorepo 中，推荐全局安装 [Lerna](https://github.com/lerna/lerna) 作为 Monorepo 子项目额外的管理工具。由于 [Yarn 1 (Classic) ](https://classic.yarnpkg.com/lang/en/) 在安装依赖的时候，不会触发子项目的 [Life Cycle Scripts](https:/docs.npmjs.com/cli/v7/using-npm/scripts#life-cycle-scripts)，因此还需要使用 Lerna 完成这类事情。
-:::

package/zh/tutorials/first-app/c01-getting-started/1.1-prerequisites.md

@@ -1,25 +0,0 @@
----
-title: 环境准备
----
-
-从本章节开始，我们将进入实战教程部分。
-
-在实战教程中，我们将会从环境准备开始，从简单到复杂，一步一步搭建一个真实的项目。
-
-基于 Modern.js 框架的项目，自带全套工程环境和工程能力，对仓库目录之外的环境几乎没有任何依赖，只需要安装以下少数几个最基本的工具。
-
-## 1. Node.js
-
-需要 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 14.19.0, 推荐使用 16.x 版本。
-
-Modern.js 推荐在开发环境里先安装 [nvm](https://github.com/nvm-sh/nvm#install--update-script)，在 shell 里集成[自动切换 node 版本的脚本](https://github.com/nvm-sh/nvm#deeper-shell-integration)。
-
-然后只要仓库根目录下有内容为 `lts/fermium` 或 `lts/gallium` 的 `.nvmrc` 文件，进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。
-
-## 2. pnpm
-
-推荐使用 [pnpm](https://pnpm.io/installation) 来管理项目依赖：
-
-```bash
-npm install -g pnpm
-```