@modern-js/main-doc 2.0.2 → 2.1.0

package/zh/guides/topic-detail/monorepo/sub-project-interface.md

@@ -17,6 +17,7 @@ sidebar_position: 3
 执行 `pnpm run new`，并按照如下进行选择：
 
 **「应用」子项目：**
+
 ```
 ? 请选择你想创建的工程类型 应用
 ? 请填写子项目名称 app
@@ -25,6 +26,7 @@ sidebar_position: 3
 ```
 
 **「模块（内部）」子项目：**
+
 ```
 ? 请选择你想创建的工程类型 模块（内部）
 ? 请填写子项目名称 internal-lib
@@ -33,6 +35,7 @@ sidebar_position: 3
 ```
 
 **「模块」子项目：**
+
 ```
 ? 请选择你想创建的工程类型 模块
 ? 请填写子项目名称 components
@@ -49,7 +52,8 @@ sidebar_position: 3
 然后修改一下默认的代码和新增文件：
 
 **重命名 `./pakcages/components/src/index.tsx`**
-``` tsx
+
+```tsx
 import './index.css';
 
 export default function ({ text }: { text: string }) {
@@ -62,21 +66,24 @@ export default function ({ text }: { text: string }) {
 ```
 
 **新增 `./pakcages/components/src/index.css`**
-``` css
+
+```css
 .log {
   color: gray;
 }
 ```
 
 **修改 `./features/internal-lib/src/index.ts`**
-``` tsx
+
+```tsx
 export default function (text: string) {
   return text.toUpperCase();
 }
 ```
 
 **修改 `./apps/app/src/App.tsx`**
-``` tsx
+
+```tsx
 import { Switch, Route } from '@modern-js/runtime/router';
 import formatString from 'internal-lib';
 import Comp from 'components';
@@ -106,7 +113,7 @@ export default App;
 启动 `apps/app` 项目之前需要先构建（`pnpm run build`） `packages/component`。
 :::
 
-由于Modern.js 支持 pnpm 与 Yarn 的 Monorepo 工程，接下来会从这两个方面分别介绍。
+由于 Modern.js 支持 pnpm 与 Yarn 的 Monorepo 工程，接下来会从这两个方面分别介绍。
 
 ## 在使用 pnpm 的 Monorepo 中进行项目联调
 
@@ -130,7 +137,7 @@ pnpm add internal-lib -D
 
 执行成功后，在 `apps/app/package.json` 会发生如下变化：
 
-``` json
+```json
 {
   "dependencies": {
 ++  "components": "workspace:^0.1.0"
@@ -159,7 +166,7 @@ pnpm add internal-lib -D
 
 但是由于组件 `components` 是非内部模块，因此建议在 `apps/app/package.json` 中进行依赖声明：
 
-``` json
+```json
 {
   "dependencies": {
 ++  "components": "0.1.0"

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

@@ -81,7 +81,7 @@ rm src/routes/index.css
 接下来，我们修改项目中的 `modern.config.ts`，开启 SSR 能力：
 
 ```ts
-import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
+import appTools, { defineConfig } from '@modern-js/app-tools';
 
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
@@ -92,7 +92,7 @@ export default defineConfig({
   server: {
     ssr: true,
   },
-  plugins: [AppToolsPlugin()],
+  plugins: [appTools()],
 });
 ```
 

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

@@ -98,7 +98,6 @@ export default Avatar;
 采用目录形式 `Avatar/index.tsx` 而不是单文件形式 `Avatar.tsx` 的原因是，之后可以方便的在目录内部增加子文件，包括专用的资源（图片等）、专用子组件、CSS 文件等。
 :::
 
-
 ## 使用 Utility
 
 我们已经使用 style-components 实现 `<Avatar>` 组件，但当前的 UI 仍然不能让人满意，缺乏专业感，例如列表项内部的布局有点粗糙，很多地方没对齐。
@@ -121,8 +120,8 @@ Modern.js 集成了主流、轻量、通用的 Utility Class 工具库 [Tailwind
 在 `modern.config.ts` 中注册 Tailwind 插件:
 
 ```ts title="modern.config.ts"
-import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
-import TailwindCSSPlugin from '@modern-js/plugin-tailwindcss';
+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({
@@ -133,7 +132,7 @@ export default defineConfig({
   server: {
     ssr: true,
   },
-  plugins: [AppToolsPlugin(), TailwindCSSPlugin()],
+  plugins: [appTools(), tailwindcssPlugin()],
 });
 ```
 
@@ -175,7 +174,7 @@ import 'tailwindcss/components.css';
 import 'tailwindcss/utilities.css';
 import Item from '../components/Item';
 
-const getAvatar = (users: Array<{ name: string; email: string }>) =>
+const getAvatar = (users: Array<{ name: string, email: string }>) =>
   users.map(user => ({
     ...user,
     avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
@@ -248,7 +247,6 @@ export default Item;
 
 我们只使用了少量 Utility Class，比如 [Flex](https://tailwindcss.com/docs/display/)、[Padding](https://tailwindcss.com/docs/padding/)、[Margin](https://tailwindcss.com/docs/margin/)、[Text](https://tailwindcss.com/docs/text-color/)、[Font](https://tailwindcss.com/docs/font-weight/)、[Border](https://tailwindcss.com/docs/border-width)，不写一行 CSS 就实现了符合设计稿的专业 UI。
 
-
 ## 自定义 Utility Class
 
 我们也可以自己实现新的 Utility Class，方便在代码间复用。
@@ -286,7 +284,7 @@ import '../styles/utils.css';
 
 ```css
 :root {
-  --custom-text-color:rgb(113, 128, 150);
+  --custom-text-color: rgb(113, 128, 150);
 }
 
 .custom-text-gray {
@@ -295,7 +293,7 @@ import '../styles/utils.css';
 ```
 
 :::info 注
-Modern.js 集成了 [PostCSS](/docs/guides/basic-features/css/postcss)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)。
+Modern.js 集成了 [PostCSS](/docs/guides/basic-features/css/postcss)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)。
 :::
 
 在 `src/routes/components/Item/index.tsx` 里使用，把：
@@ -321,4 +319,3 @@ Modern.js 集成了 [PostCSS](/docs/guides/basic-features/css/postcss)，支持
 
 不过在 PostCSS 的支持下，现代 CSS 应该足以满足这些开发需求，性能相较于预处理器也更好，建议优先用 .css 文件。
 :::
-

package/zh/tutorials/first-app/c04-routes.md

@@ -140,7 +140,7 @@ export default function Layout() {
 ```js
 import { useState } from 'react';
 import { Radio, RadioChangeEvent } from 'antd';
-import { Outlet, useLocation, useNavigate } from "@modern-js/runtime/router";
+import { Outlet, useLocation, useNavigate } from '@modern-js/runtime/router';
 ```
 
 最后在 Layout 组件里增加局部状态和相关逻辑：

package/zh/tutorials/first-app/c05-loader.md

@@ -67,7 +67,7 @@ function Index() {
       </Helmet>
       <List
         dataSource={data}
-        renderItem={(info) => <Item key={info.name} info={info} />}
+        renderItem={info => <Item key={info.name} info={info} />}
       />
     </div>
   );
@@ -77,6 +77,7 @@ export default Index;
 ```
 
 <!-- Todo 重新截图，SSR 内容 -->
+
 重新执行 `pnpm run dev`，查看 `view-source:http://localhost:8080/`，或在 devtools 的 Network 面板里查看 HTML 请求的「 Preview 」，可以看到 SSR 渲染出来的 HTML 已经包含完整的 UI：
 
 ![display6](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/11/display6.png)

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

@@ -179,10 +179,10 @@ ni src/containers/Contacts.tsx
 我们将原本两个 `page.tsx` 中公共的部分抽离出来，`src/containers/Contacts.tsx` 的代码如下：
 
 ```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 { Helmet } from '@modern-js/runtime/head';
+import { useModel } from '@modern-js/runtime/model';
+import { List } from 'antd';
+import Item from '../components/Item';
 import { Helmet } from '@modern-js/runtime/head';
 import { useModel } from '@modern-js/runtime/model';
 import { List } from 'antd';
@@ -246,7 +246,7 @@ export default Index;
 
 重构完成，现在的项目结构是：
 
-```md
+```bash
 .
 ├── README.md
 ├── dist
@@ -277,7 +277,6 @@ export default Index;
 
 `components/` 里的**视图组件**，都是目录形式，如 `Avatar/index.tsx`。而 `containers/` 里的**容器组件**，都是单文件形式，如 `contacts.tsx`。**这是我们推荐的一种最佳实践**。
 
-在​ [添加 UI 组件（Component）](./c02-component.md) 章节提到过，视图组件用目录形式，是因为视图组件负责实现 UI 展示和交互细节，可以演变的复杂。用目录形式，可以方便增加子文件，包括专用的资源（图片等）、专用子组件、CSS 文件等。在这个目录内部可以随意重构，只考虑最小局部。
+在 ​ [添加 UI 组件（Component）](./c02-component.md) 章节提到过，视图组件用目录形式，是因为视图组件负责实现 UI 展示和交互细节，可以演变的复杂。用目录形式，可以方便增加子文件，包括专用的资源（图片等）、专用子组件、CSS 文件等。在这个目录内部可以随意重构，只考虑最小局部。
 
 而容器组件只负责连接，是一个胶水层，复杂的业务逻辑和实现细节都交给 View 层和 Model 层去实现。容器组件自己应该保持简单清晰，不应该包含复杂实现细节，所以不应该有内部结构。采用单文件形式不但更简洁，也能起到约束作用，提醒开发者不要把容器组件写复杂。
-

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

@@ -20,7 +20,7 @@ title: 添加应用入口
 
 创建完成，项目会变成这样：
 
-```md
+```bash
 .
 ├── README.md
 ├── modern.config.ts
@@ -52,7 +52,6 @@ title: 添加应用入口
 │       └── styles
 │           └── utils.css
 └── tsconfig.json
-
 ```
 
 可以看到联系人列表应用的文件，都被自动重构到 `src/myapp/` 里。
@@ -87,16 +86,15 @@ mv src/myapp src/contacts
 
 现在不再有主入口，联系人列表现在是一个普通入口，需要用 `http://localhost:8080/contacts` 访问。
 
-
 ## 按入口修改配置
 
 我们可以在 Modern.js 配置文件里，自己写代码来控制项目的配置。
 
 现在，修改 `modern.config.ts` 里面添加内容：
 
-```typescript
-import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
-import TailwindCSSPlugin from '@modern-js/plugin-tailwindcss';
+```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({
@@ -110,7 +108,7 @@ export default defineConfig({
       'landing-page': false,
     },
   },
-  plugins: [AppToolsPlugin(), TailwindCSSPlugin()],
+  plugins: [appTools(), tailwindcssPlugin()],
 });
 ```