@modern-js/main-doc 2.0.0-beta.4 → 2.0.0-beta.6

package/zh/tutorials/first-app/c06-model.md

@@ -32,7 +32,7 @@ const computed = {
 };
 ```
 
-computed 类型字段的定义方式是函数，但使用时可以像普通字段一样通过 state 访问。
+`computed` 类型字段的定义方式是函数，但使用时可以像普通字段一样通过 state 访问。
 
 :::info
 Modern.js 集成了 [Immer](https://immerjs.github.io/immer/)，能够像操作 JS 中常规的可变数据一样，去写这种状态转移的逻辑。
@@ -90,7 +90,7 @@ touch src/models/contacts.ts
 添加 `src/models/contacts.ts` 的内容：
 
 ```tsx
-import { model } from "@modern-js/runtime/model";
+import { model } from '@modern-js/runtime/model';
 
 type State = {
   items: {
@@ -103,18 +103,18 @@ type State = {
   error: null | Error;
 };
 
-export default model<State>("contacts").define({
+export default model<State>('contacts').define({
   state: {
     items: [],
     pending: false,
     error: null,
   },
   computed: {
-    archived: ({ items }: State) => items.filter((item) => item.archived),
+    archived: ({ items }: State) => items.filter(item => item.archived),
   },
   actions: {
     archive(draft, payload) {
-      const target = draft.items.find((item) => item.email === payload)!;
+      const target = draft.items.find(item => item.email === payload)!;
       if (target) {
         target.archived = true;
       }
@@ -132,7 +132,7 @@ export default model<State>("contacts").define({
 首先修改 `src/components/Item/index.tsx`，添加 **Archive 按钮**的 UI 和交互，内容如下：
 
 ```tsx
-import Avatar from "../Avatar";
+import Avatar from '../Avatar';
 
 type InfoProps = {
   avatar: string;
@@ -163,11 +163,11 @@ const Item = ({
           onClick={onArchive}
           className={`text-white font-bold py-2 px-4 rounded-full ${
             archived
-              ? "bg-gray-400 cursor-default"
-              : "bg-blue-500 hover:bg-blue-700"
+              ? 'bg-gray-400 cursor-default'
+              : 'bg-blue-500 hover:bg-blue-700'
           }`}
         >
-          {archived ? "Archived" : "Archive"}
+          {archived ? 'Archived' : 'Archive'}
         </button>
       </div>
     </div>
@@ -180,13 +180,13 @@ export default Item;
 接下来，我们修改 `src/routes/page.tsx`，为 `<Item>` 组件传递更多参数：
 
 ```tsx
-import { Helmet } from "@modern-js/runtime/head";
-import { useModel } from "@modern-js/runtime/model";
-import { useLoaderData } from "@modern-js/runtime/router";
-import { List } from "antd";
-import { name, internet } from "faker";
-import Item from "../components/Item";
-import contacts from "../models/contacts";
+import { Helmet } from '@modern-js/runtime/head';
+import { useModel } from '@modern-js/runtime/model';
+import { useLoaderData } from '@modern-js/runtime/router';
+import { List } from 'antd';
+import { name, internet } from 'faker';
+import Item from '../components/Item';
+import contacts from '../models/contacts';
 
 type LoaderData = {
   code: number;
@@ -216,9 +216,9 @@ export const loader = async (): Promise<LoaderData> => {
 
 function Index() {
   const { data } = useLoaderData() as LoaderData;
-  const [{ items }, { archive, setItem }] = useModel(contacts);
+  const [{ items }, { archive, setItems }] = useModel(contacts);
   if (items.length === 0) {
-    setItem(data);
+    setItems(data);
   }
 
   return (
@@ -228,7 +228,7 @@ function Index() {
       </Helmet>
       <List
         dataSource={items}
-        renderItem={(info) => (
+        renderItem={info => (
           <Item
             key={info.name}
             info={info}

package/zh/tutorials/first-app/c07-container.md

@@ -16,9 +16,21 @@ import TabItem from '@theme/TabItem';
 Modern.js 支持在 `layout.tsx` 通过 Data Loader 获取数据，我们先数据获取这部分代码移动到 `src/routes/layout.tsx` 中：
 
 ```tsx
-import { name, internet } from "faker";
-import { useModel } from "@modern-js/runtime/model";
-import contacts from "../models/contacts";
+import { name, internet } from 'faker';
+import {
+  Outlet,
+  useLoaderData,
+  useLocation,
+  useNavigate,
+} from '@modern-js/runtime/router';
+import { useState } from 'react';
+import { Radio, RadioChangeEvent } from 'antd';
+import { useModel } from '@modern-js/runtime/model';
+import contacts from '../models/contacts';
+import 'tailwindcss/base.css';
+import 'tailwindcss/components.css';
+import 'tailwindcss/utilities.css';
+import '../styles/utils.css';
 
 type LoaderData = {
   code: number;
@@ -36,7 +48,6 @@ export const loader = async (): Promise<LoaderData> => {
       name: firstName,
       avatar: `https://avatars.dicebear.com/api/identicon/${firstName}.svg`,
       email: internet.email(),
-      archived: false,
     };
   });
 
@@ -48,9 +59,9 @@ export const loader = async (): Promise<LoaderData> => {
 
 export default function Layout() {
   const { data } = useLoaderData() as LoaderData;
-  const [{ items }, { setItem }] = useModel(contacts);
+  const [{ items }, { setItems }] = useModel(contacts);
   if (items.length === 0) {
-    setItem(data);
+    setItems(data);
   }
 
   const navigate = useNavigate();
@@ -61,11 +72,11 @@ export default function Layout() {
 在 `src/routes/page.tsx` 中，直接使用 Model，获取数据：
 
 ```tsx
-import { Helmet } from "@modern-js/runtime/head";
-import { useModel } from "@modern-js/runtime/model";
-import { List } from "antd";
-import Item from "../components/Item";
-import contacts from "../models/contacts";
+import { Helmet } from '@modern-js/runtime/head';
+import { useModel } from '@modern-js/runtime/model';
+import { List } from 'antd';
+import Item from '../components/Item';
+import contacts from '../models/contacts';
 
 function Index() {
   const [{ items }, { archive }] = useModel(contacts);
@@ -77,7 +88,7 @@ function Index() {
       </Helmet>
       <List
         dataSource={items}
-        renderItem={(info) => (
+        renderItem={info => (
           <Item
             key={info.name}
             info={info}
@@ -97,11 +108,11 @@ export default Index;
 同样在 `archived/page.tsx` 中，删除原本的 `mockData` 逻辑，使用 Model 中 computed 的 `archived` 值作为数据源：
 
 ```tsx
-import { Helmet } from "@modern-js/runtime/head";
-import { useModel } from "@modern-js/runtime/model";
-import { List } from "antd";
-import Item from "../../components/Item";
-import contacts from "../../models/contacts";
+import { Helmet } from '@modern-js/runtime/head';
+import { useModel } from '@modern-js/runtime/model';
+import { List } from 'antd';
+import Item from '../../components/Item';
+import contacts from '../../models/contacts';
 
 function Index() {
   const [{ archived }, { archive }] = useModel(contacts);
@@ -113,7 +124,7 @@ function Index() {
       </Helmet>
       <List
         dataSource={archived}
-        renderItem={(info) => (
+        renderItem={info => (
           <Item
             key={info.name}
             info={info}
@@ -172,14 +183,18 @@ import { Helmet } from "@modern-js/runtime/head";
 import { useModel } from "@modern-js/runtime/model";
 import { List } from "antd";
 import Item from "../components/Item";
-import contacts from "../models/contacts";
+import { Helmet } from '@modern-js/runtime/head';
+import { useModel } from '@modern-js/runtime/model';
+import { List } from 'antd';
+import Item from '../components/Item';
+import contacts from '../models/contacts';
 
 function Contacts({
   title,
   source,
 }: {
   title: string;
-  source: "items" | "archived";
+  source: 'items' | 'archived';
 }) {
   const [state, { archive }] = useModel(contacts);
 
@@ -190,7 +205,7 @@ function Contacts({
       </Helmet>
       <List
         dataSource={state[source]}
-        renderItem={(info) => (
+        renderItem={info => (
           <Item
             key={info.name}
             info={info}
@@ -210,7 +225,7 @@ export default Contacts;
 修改 `src/routes/page.tsx` 和 `src/routes/archives/page.tsx` 的代码：
 
 ```tsx title="src/routes/page.tsx"
-import Contacts from "../containers/Contacts";
+import Contacts from '../containers/Contacts';
 
 function Index() {
   return <Contacts title="All" source="items" />;
@@ -220,7 +235,7 @@ export default Index;
 ```
 
 ```tsx title="src/routes/archives/page.tsx"
-import Contacts from "../../containers/Contacts";
+import Contacts from '../../containers/Contacts';
 
 function Index() {
   return <Contacts title="Archives" source="archived" />;

package/zh/tutorials/first-app/c08-entries.md

@@ -95,8 +95,10 @@ mv src/myapp src/contacts
 现在，修改 `modern.config.ts` 里面添加内容：
 
 ```typescript
-import { defineConfig } from '@modern-js/app-tools';
+import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
+import TailwindCSSPlugin from '@modern-js/plugin-tailwindcss';
 
+// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   runtime: {
     router: true,
@@ -108,6 +110,7 @@ export default defineConfig({
       'landing-page': false,
     },
   },
+  plugins: [AppToolsPlugin(), TailwindCSSPlugin()],
 });
 ```
 

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/zh/guides/advanced-features/custom-app.md

@@ -1,70 +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: React.ComponentType) => {
-  // do something before bootstrap...
-  bootstrap(App, 'root', undefined, ReactDOM);
-};
-```
-
-:::warning
-由于 bootstrap 函数需要兼容 React17 和 React18 的用法，调用 bootstrap 函数时需要手动传入 ReactDOM 参数。
-:::
-
-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';
-
-const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
-const MOUNT_ID = 'root';
-
-let AppWrapper = null;
-
-function render() {
-  AppWrapper = createApp({
-    // runtime 的插件参数...
-  })(App)
-  if (IS_BROWSER) {
-    customBootstrap(AppWrapper);
-  }
-  return AppWrapper
-}
-
-AppWrapper = render();
-
-export default AppWrapper;;
-```
-
-## 完全接管 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/)。
-
-在微前端研发模式中，应用会被分成 **主应用**、和 **子应用**。
-
-- 主应用：微前端项目的基座工程，所有子应用都会由它来加载。
-- 子应用：独立开发、独立部署的应用，最终会被主应用加载。