@modern-js/main-doc 2.4.0 → 2.5.0

package/zh/guides/topic-detail/micro-frontend/c03-main-app.mdx

@@ -4,7 +4,7 @@ title: 开发主应用
 ---
 # 开发主应用
 
-在上一章 [体验微前端](/guides/topic-detail/micro-frontend/c02-development.md) 通过一个示例演示了如何创建和配置微前端子应用，通过本章你可以进一步了解如何开发主应用，以及它的常见配置。
+在上一章 [体验微前端](/guides/topic-detail/micro-frontend/c02-development) 通过一个示例演示了如何创建和配置微前端子应用，通过本章你可以进一步了解如何开发主应用，以及它的常见配置。
 
 在通过 `@modern-js/create` 命令创建应用工程后，可以在项目中执行 `pnpm run new`（实际执行了 `modern new` 命令），在选择了「微前端」模式后，会安装微前端依赖依赖，只需手动注册插件即可。
 
@@ -41,13 +41,13 @@ defineConfig(App, {
       getAppList: async () => {
         // 可以从其他远程接口获取
         return [{
-          name: 'SubConvention',
-          entry: 'http://localhost:3002',
-          // activeWhen: '/SubConvention'
+          name: 'Table',
+          entry: 'http://localhost:8001',
+          // activeWhen: '/table'
         }, {
-          name: 'SubCustom',
-          entry: 'http://localhost:3003'
-          // activeWhen: '/SubConvention'
+          name: 'Dashboard',
+          entry: 'http://localhost:8002'
+          // activeWhen: '/dashboard'
         }];
       },
     },
@@ -81,8 +81,8 @@ import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, B
 
 const AppLayout = () => (
   <>
-    <div><Link to={'/SubConvention'}>加载约定式路由子应用</Link></div>
-    <div><Link to={'/SubCustom'}>加载自控式路由子应用</Link></div>
+    <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
+    <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
     <div><Link to={'/'}>卸载子应用</Link></div>
     <Outlet />
   </>
@@ -101,7 +101,7 @@ export default () => {
           return (
             <Route
               key={app.name}
-              path={`${app.name}/*`}
+              path={`${app.name.toLowerCase()}/*`}
               element={
               <Component
                 loadable={{
@@ -138,7 +138,7 @@ export default () => {
 };
 ```
 
-这里通过 `Route` 组件自定义了 **SubConvention** 的激活路由为 **/SubConvention**， **SubCustom** 的激活路由为 **/SubCustom**。
+这里通过 `Route` 组件自定义了 **Table** 的激活路由为 **/table**， **Dashboard** 的激活路由为 **/dashboard**。
 
 ### 集中式路由
 
@@ -162,7 +162,7 @@ function App() {
 }
 ```
 
-这样启动应用后，访问 `/SubCustom` 路由，会渲染 `SubCustom` 子应用，访问 `/SubConvention` 路由，会渲染 `SubConvention` 子应用。
+这样启动应用后，访问 `/table` 路由，会渲染 `Table` 子应用，访问 `/dashboard` 路由，会渲染 `Dashboard` 子应用。
 
 ### 两种模式混用
 
@@ -182,7 +182,7 @@ function Loading() {
 
 function App(){
   return <>
-    <SubCustom
+    <Table
       loadable={{
         loading: Loading,
       }}
@@ -229,7 +229,7 @@ function Loading({ error, pastDelay }) {
 
 function App(){
   return <>
-    <SubCustom
+    <Table
       loadable={{
         loading: Loading,
         delay: 300 // 0.3 seconds
@@ -265,7 +265,7 @@ function Loading({ error, timeOut, pastDelay }) {
 
 function App(){
   return <>
-    <SubCustom
+    <Table
       loadable={{
         loading: Loading,
         timeOut: 10000 // 10s

package/zh/guides/topic-detail/model/model-communicate.mdx

@@ -88,7 +88,7 @@ export default function App() {
 ```
 
 :::info 补充信息
-Modern.js 默认开启 [自动生成 actions](./auto-actions.md)，所以 `stepModel` 中虽然没有手动定义 Actions，但可以使用自动生成的 `setState`。
+Modern.js 默认开启 [自动生成 actions](./auto-actions.mdx)，所以 `stepModel` 中虽然没有手动定义 Actions，但可以使用自动生成的 `setState`。
 
 :::
 

package/zh/guides/troubleshooting/_category_.json

@@ -1,5 +1,5 @@
 {
   "label": "常见问题",
-  "position": 6,
-  "collapsed": true
+  "position": 10,
+  "collapsed": false
 }

package/zh/index.md

@@ -1,4 +1,4 @@
 ---
 pageType: home
 ---
-# index
+# Modern.js - 基于 React 的渐进式现代 Web 开发框架

package/zh/tutorials/first-app/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "联系人列表应用",
+  "label": "实战教程",
   "position": 2,
   "collapsed": false
 }

package/zh/tutorials/first-app/c01-start.mdx

@@ -81,10 +81,9 @@ rm src/routes/index.css
 
 接下来，我们修改项目中的 `modern.config.ts`，开启 SSR 能力：
 
-```ts
+```ts title="modern.config.ts"
 import appTools, { defineConfig } from '@modern-js/app-tools';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   runtime: {
     router: true,

package/zh/tutorials/first-app/c03-css.mdx

@@ -124,7 +124,6 @@ Modern.js 集成了主流、轻量、通用的 Utility Class 工具库 [Tailwind
 import appTools, { 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,
@@ -294,7 +293,7 @@ import '../styles/utils.css';
 ```
 
 :::info
-Modern.js 集成了 [PostCSS](/guides/basic-features/css/postcss)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)。
+Modern.js 集成了 [PostCSS](/guides/css/postcss)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)。
 
 :::
 

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

@@ -10,8 +10,8 @@ title: 添加业务模型（状态管理）
 
 因此会开始编写一些跟 UI 完全无关的业务逻辑，如果继续写在组件代码中，会产生越来越多的面条式代码。为此，我们引入了一种叫做 **业务模型（Model）** 的代码模块，将这些业务逻辑和 UI 解耦。
 
-:::info意
-使用状态管理相关 API，需要先启用配置项 [runtime.state](/docs/configure/app/runtime/state)：
+:::info 注意
+使用状态管理相关 API，需要先启用配置项 [runtime.state](/configure/app/runtime/state)：
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';

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

@@ -277,6 +277,6 @@ export default Index;
 
 `components/` 里的**视图组件**，都是目录形式，如 `Avatar/index.tsx`。而 `containers/` 里的**容器组件**，都是单文件形式，如 `contacts.tsx`。**这是我们推荐的一种最佳实践**。
 
-在 ​ [添加 UI 组件（Component）](./c02-component.md) 章节提到过，视图组件用目录形式，是因为视图组件负责实现 UI 展示和交互细节，可以演变的复杂。用目录形式，可以方便增加子文件，包括专用的资源（图片等）、专用子组件、CSS 文件等。在这个目录内部可以随意重构，只考虑最小局部。
+在 ​ [添加 UI 组件（Component）](./c02-component.mdx) 章节提到过，视图组件用目录形式，是因为视图组件负责实现 UI 展示和交互细节，可以演变的复杂。用目录形式，可以方便增加子文件，包括专用的资源（图片等）、专用子组件、CSS 文件等。在这个目录内部可以随意重构，只考虑最小局部。
 
 而容器组件只负责连接，是一个胶水层，复杂的业务逻辑和实现细节都交给 View 层和 Model 层去实现。容器组件自己应该保持简单清晰，不应该包含复杂实现细节，所以不应该有内部结构。采用单文件形式不但更简洁，也能起到约束作用，提醒开发者不要把容器组件写复杂。

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

@@ -91,13 +91,12 @@ mv src/myapp src/contacts
 
 我们可以在 Modern.js 配置文件里，自己写代码来控制项目的配置。
 
-现在，修改 `modern.config.ts` 里面添加内容：
+现在，修改 `modern.config.ts`，添加内容：
 
-```ts
+```ts title="modern.config.ts"
 import appTools, { 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,

package/zh/tutorials/foundations/introduction.mdx

@@ -2,44 +2,29 @@
 title: 介绍
 sidebar_position: 1
 ---
+
 # 介绍
 
 欢迎来到 Modern.js 教程！
 
 阅读本栏目后，你将初步理解 Modern.js，并使用 Modern.js 创建第一个应用。
 
-:::note 关注
-加入我们的飞书群，咨询相关问题，了解最新动态。
-
-:::
-
 ## Modern.js 是什么
 
-**Modern.js** 是基于 React 的渐进式现代 Web 开发框架。
-
-框架内置多种开箱即用的开发工具，拥有极致的构建性能，支持零配置的渲染范式切换，一体化的 API 调用。并从三种工程方案出发（应用工程方案、模块工程方案，Monorepo 工程方案），支持全链路的前端研发。
-
-Modern.js 是字节跳动的底层前端研发框架，已经直接或间接的服务上千个应用，包括中后台、PC Web、H5 等多种应用场景。框架覆盖完整的生命周期，拥有完善的插件体系，提供高度定制能力。支持通过生成器插件自定义业务线专属的工程方案，定制各种功能扩展和业务需求，帮助开发者更快速的搭建应用。
-
-## 为什么使用 Modern.js
-
-Modern.js 能为开发者提供极致的**开发体验（Development Experience）**，让应用拥有更好的**用户体验（User Experience）**。
-
-在开发 React 应用过程中，开发者通常需要去为某些功能去设计实现方案，或是使用其他的库、框架来解决这些问题。Modern.js 支持 React 应用所需要的所有配置和工具，并内置**额外的功能和优化**。开发者可以使用 React 构建应用的 UI，然后逐步采用 Modern.js 的功能来解决常见的应用需求，如路由、数据获取、状态管理等。
-
-它主要包含以下特点：
-
-- 🪜 **渐进式**：使用最精简的模板创建项目，通过生成器逐步开启插件功能，定制解决方案。
-- 🏠 **一体化**：开发与生产环境 Web Server 唯一，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
-- 📦 **开箱即用**：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
-- 🌏 **周边生态**：自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。
-- 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）等。
-- 🚀 **独立构建核心**：支持多种打包工具，深度优化构建产物。
+如果你对 Modern.js 还不了解，可以先阅读 [Modern.js 介绍](/guides/get-started/introduction)。
 
-## 下一步
+## 实战教程
 
-{/* 如果你是前端初学者，可能会觉得这些概念有些复杂。我们提供了一些 [JavaScript 和 React](/tutorials/foundations/basic) 的学习资料，你可以先对它们做些了解。
+我们准备了一个创建「联系人列表应用」的实战教程，你可以按照教程一步步创建一个应用，并了解到 Modern.js 中的以下实践：
 
-如果你是有经验的开发者，希望了解如何使用 Modern.js，你可以尝试[创建第一个应用](/tutorials/first-app/c01-start)，或是阅读[指南](/guides/get-started/quick-start)。  */}
+- 创建项目
+- 使用 antd 组件库
+- 集成 Tailwind CSS
+- 客户端路由
+- 数据获取
+- 状态管理
+- 容器组件
+- 新建入口
+- ...
 
-如果你希望了解如何使用 Modern.js，可以尝试[创建第一个应用](/tutorials/first-app/c01-start)，或是阅读[指南](/guides/get-started/quick-start)。
+下面就让我们从 [创建项目](tutorials/first-app/c01-start) 开始吧！

package/en/apis/app/commands/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# Commands
-
-This section covers all commands.

package/en/apis/app/hooks/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# Convention
-
-This section covers all documentation conventions.

package/en/apis/app/runtime/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# Runtime
-
-This section covers all APIs using `@modern-js/runtime`.

package/en/guides/advanced-features/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# Advanced Features
-
-This section covers advanced features of Modern.js.

package/en/guides/basic-features/css/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "CSS Solutions",
-  "position": 4
-}

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

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# 命令
-
-本节涵盖了所有命令。

package/zh/apis/app/hooks/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# 文件约定
-
-本节涵盖了使用应用工程的所有文件约定。

package/zh/apis/app/runtime/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# 运行时
-
-本节涵盖了使用 `@modern-js/runtime` 的所有 API。

package/zh/guides/advanced-features/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# 进阶功能
-
-本节涵盖了使用应用工程的进阶功能。

package/zh/guides/basic-features/css/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "CSS 开发方案",
-  "position": 4
-}

package/zh/guides/basic-features/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# 基础功能
-
-本节涵盖了使用应用工程的基础功能。