@modern-js/main-doc 2.32.1 → 2.32.2-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @modern-js/main-doc
 
+## 2.32.2-alpha.0
+
+### Patch Changes
+
+- bc1f8daf0ff: feat(builder): support custom logger in dev server
+
+  feat(builder): 支持自定义 logger
+
+  - @modern-js/builder-doc@2.32.2-alpha.0
+
 ## 2.32.1
 
 ### Patch Changes

package/docs/en/apis/app/runtime/app/define-config.mdx

@@ -53,9 +53,9 @@ defineConfig(App, {
 
 ```json
 {
-  // 来自 `modern.config.js`
+  // From `modern.config.js`
   ...runtime.router
-  // 来自 `defineConfig`
+  // From `defineConfig`
   ...config.router
 }
 ```

package/docs/en/apis/app/runtime/model/auto-actions.mdx

@@ -57,9 +57,9 @@ State type is Array, generate the following Actions:
   - usage: `arr.unshift(element1, ..., elementN)`
   - `elementN`: the element or elements to add to the beginning of the array.
 - `filter`: filter element.
-{/* 语义与原生方法不同, 待修改 API  */}
+{/* Semantics are different from native methods, API to be modified  */}
 - `concat`: concat array.
-{/* 语义与原生方法不同, 待修改 API  */}
+{/* Semantics are different from native methods, API to be modified  */}
 - `splice`: modify the array by deleting or replacing existing elements or adding new elements in place, and return the modified array(Note that it is different from the native `splice` return value).
   - usage: `splice(start[, deleteCount[, item1[, item2[, ...]]]])`
   - `start`: specifies the start position of the modification(counting from 0).

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

@@ -61,7 +61,6 @@ const fooModel = model('foo').define({
 - `context`: Reduck Context, can get underlying `store` object. `store` support all Redux Store [API](https://redux.js.org/api/store), also mounts the `use` method for consuming the Model, and the `unmount` method for unmounting the Model.
 - utils: commonly used tool like `use`、`onMount`. `use` is the same as `store.use`, `onMount` is the hook function after the Model is mounted.
 
-{/* TODO: @anchao 调整类型  */}
 ```ts
 interface Utils {
   use: UseModel;

package/docs/en/apis/app/runtime/model/use-static-model.mdx

@@ -37,7 +37,7 @@ function App() {
   const [state] = useStaticModel(userModel);
 
   useEffect(() => {
-    // 统计 UV 数据
+    // Statistical UV Data
     send('pageview', { user: state.user });
   }, [state]);
 

package/docs/en/configure/app/tools/tailwindcss.mdx

@@ -17,6 +17,14 @@ const tailwind = {
 };
 ```
 
+Used to modify the configuration of [Tailwind CSS](https://tailwindcss.com/docs/configuration).
+
+### Enabling Tailwind CSS
+
+Before using `tools.tailwindcss`, you need to enable the Tailwind CSS plugin for Modern.js.
+
+Please refer to the section [Using Tailwind CSS](/guides/basic-features/css.html#using-tailwind-css) for instructions on how to enable it.
+
 ### Function Type
 
 When `tools.tailwindcss`'s type is Function, the default tailwindcss config will be passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.
@@ -51,6 +59,40 @@ export default {
 
 ### Notes
 
-Please note that if you are using the [source.designSystem](/configure/app/source/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
+Please note:
+
+- If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
+- If you are using the `source.designSystem` configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
 
 The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.
+
+### About source.designSystem
+
+`source.designSystem` is a deprecated configuration option in Modern.js.
+
+Starting from Modern.js vMAJOR_VERSION.33.0, you can use the `theme` configuration option of Tailwind CSS as a replacement for `source.designSystem`. It is no longer necessary to split the `theme` configuration and set it on `designSystem`.
+
+- Previous usage:
+
+```ts title="modern.config.ts"
+const { theme, ...rest } = tailwindConfig;
+
+export default {
+  tools: {
+    tailwindcss: rest,
+  },
+  source: {
+    designSystem: theme,
+  },
+};
+```
+
+- Current usage:
+
+```ts title="modern.config.ts"
+export default {
+  tools: {
+    tailwindcss: tailwindConfig,
+  },
+};
+```

package/docs/en/guides/advanced-features/bff/frameworks.mdx

@@ -1,10 +1,10 @@
 ---
 sidebar_position: 3
-title: Frameworks
 ---
+
 # Frameworks
 
-Modern.js's BFF supports different runtime frameworks, currently Modern.js's BFF supports two runtime frameworks[Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/).
+Modern.js's BFF supports different runtime frameworks, currently Modern.js's BFF supports two runtime frameworks: [Express.js](https://expressjs.com/) and [Koa.js](https://koajs.com/).
 
 ## Function Mode
 

package/docs/en/guides/advanced-features/bff/function.mdx

@@ -224,7 +224,7 @@ export default () => {
     });
   };
 
-  return <div onClick={addSku}>添加 SKU</div>;
+  return <div onClick={addSku}>Add SKU</div>;
 };
 ```
 

package/docs/en/guides/basic-features/css.mdx

@@ -103,37 +103,47 @@ Depending on your needs, you can selectively import the CSS files provided by Ta
 
 :::
 
-### Tailwind CSS Autocomplete
-
-Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
+### Configuring Tailwind CSS
 
-You can follow the steps below to enable the autocompletion feature:
+In Modern.js, you have two ways to configure Tailwind CSS:
 
-1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
-2. Create a `tailwind.config.ts` file in the root directory of your project and write the desired Tailwind CSS configuration.
+1. Using the `tailwind.config.{ts,js}` file, which follows the official usage of Tailwind CSS. Please refer to ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) for more details.
 
 ```ts title="tailwind.config.ts"
+import type { Config } from 'tailwindcss';
+
 export default {
-  content: [
-    './src/**/*.{js,jsx,ts,tsx}',
-    './config/html/**/*.{html,ejs,hbs}',
-    './storybook/**/*',
-  ],
-};
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+} as Config;
 ```
 
-3. In the `modern.config.ts` file, import the `tailwind.config.ts` file you created and pass it to [tools.tailwindcss](/configure/app/tools/tailwindcss), so that Modern.js can recognize the Tailwind CSS configuration correctly.
+:::tip
+Please upgrade Modern.js to version >= MAJOR_VERSION.33.0 to support automatic reading of `tailwind.config.{ts,js}` files.
+:::
 
-```ts title="modern.config.ts"
-import tailwindConfig from './tailwind.config';
+2. Using the [tools.tailwindcss](/configure/app/tools/tailwindcss.html) configuration option. This is the old way of configuring Tailwind CSS, and we recommend using the `tailwind.config.{ts,js}` file for configuration.
 
-export default defineConfig({
+```ts title="modern.config.ts"
+export default {
   tools: {
-    tailwindcss: tailwindConfig,
+    tailwindcss: {
+      content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    },
   },
-});
+};
 ```
 
+If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
+
+### Tailwind CSS Autocomplete
+
+Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
+
+You can follow the steps below to enable the autocomplete feature:
+
+1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
+2. If the root directory of your project does not have a `tailwind.config.{ts,js}` file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.
+
 ### Tailwind CSS Version
 
 Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the `tailwindcss` dependency in the project `package.json` file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.

package/docs/en/guides/basic-features/mock.mdx

@@ -52,7 +52,7 @@ const Mock = require('mockjs');
 module.exports = {
   '/api/getInfo': Mock.mock({
     'data|1-10': [{ name: '@cname' }],
-  }) /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */,
+  }) /* => {data: [{name: "Jack"}, {name: "Jim"},  {name: "Mary"}} */,
 };
 ```
 

package/docs/en/guides/topic-detail/framework-plugin/hook.mdx

@@ -66,7 +66,7 @@ pipeline.use((count, next) => {
   return count * 2;
 });
 
-// 3. 执行
+// 3. Run
 pipeline.run(1); // 2
 pipeline.run(5); // 6
 ```
@@ -155,7 +155,7 @@ workflow.use(count => {
   return count * 2;
 });
 
-// 3. 执行
+// 3. Run
 workflow.run(1); // [2, 2]
 workflow.run(5); // [6, 10]
 ```

package/docs/en/guides/topic-detail/generator/plugin/category.md

@@ -58,7 +58,7 @@ npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
 ? Please select the base type of the plugin: Web App
 ```
 
-### 自定义
+### Custom
 
 ```bash
 npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin

package/docs/en/guides/topic-detail/generator/plugin/context.md

@@ -37,7 +37,7 @@ context.addInputBefore('packageManager', {
   properties: {
     'username': {
       type: 'string',
-      title: '用户名',
+      title: 'Username',
     },
   },
 });

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -1,6 +1,6 @@
 ---
 sidebar_position: 2
-title: development
+title: Development
 ---
 
 # Experience Micro Frontend
@@ -16,7 +16,7 @@ Currently supports two routing modes
 - Self-controlled routing
 - Conventional routing
 
-First, clarify the routing mode of the main application [create a conventional routing main application](#创建约定式路由主应用) or [create a self-controlled routing main application](#创建自控式路由主应用)
+First, clarify the routing mode of the main application [create a file-based routing main App](#file-based-routing-main-app) or [create a self-controlled main App](#self-controlled-main-app)
 
 In this experience we will create two sub-applications Table and Dashboard for the main application (Table is reduced routing, Dashboard is self-controlled routing)
 

package/docs/en/guides/topic-detail/model/auto-actions.mdx

@@ -23,7 +23,7 @@ function Counter() {
   const [state, actions] = useModel(countModel);
 
   useEffect(() => {
-    // 增加 1
+    // Add 1
     actions.setState(state + 1);
   }, []);
 }

package/docs/en/guides/topic-detail/model/performance.mdx

@@ -84,7 +84,8 @@ const fooModel = model('foo').define({
 });
 
 function ComponentA() {
-  // 通过传入 selector 函数，只返回 a 状态给组件
+  // By passing in the selector function
+  // only the a state is returned to the component
   const [stateA] = useModel(fooModel, state => state.a);
 
   return <div>{stateA}</div>;

package/docs/en/guides/topic-detail/model/typescript-best-practice.mdx

@@ -30,7 +30,7 @@ export const foo = model<State>('foo').define({
 });
 ```
 
-When you declare type information for the State of a Model, the `computed` and `actions` of the Model can get the correct type information. In fact, even if we don't define State type information in the example code above, the type information of State can be automatically inferred based on the initial value information of `state`. However, we still recommend that you declare the type information of State when defining a Model because the type information of State inferred based on the initial value information of `state` may be incomplete (missing fields or field type information), and the type information of State cannot be automatically inferred based on the initial value information of `state` when using [Function Type](/apis/app/runtime/model/model_#函数类型) to define the Model.
+When you declare type information for the State of a Model, the `computed` and `actions` of the Model can get the correct type information. In fact, even if we don't define State type information in the example code above, the type information of State can be automatically inferred based on the initial value information of `state`. However, we still recommend that you declare the type information of State when defining a Model because the type information of State inferred based on the initial value information of `state` may be incomplete (missing fields or field type information), and the type information of State cannot be automatically inferred based on the initial value information of `state` when using [Function Type](/apis/app/runtime/model/model_#function-type) to define the Model.
 
 ## Dependent types of Derived State
 

package/docs/en/guides/topic-detail/model/use-model.mdx

@@ -39,7 +39,7 @@ const barModel = model('bar').define({
 });
 
 const [state, actions] = useModel([fooModel, barModel]);
-// 或
+// Or
 const [state, actions] = useModel(fooModel, barModel);
 ```
 

package/docs/en/tutorials/first-app/c05-loader.mdx

@@ -78,8 +78,6 @@ function Index() {
 export default Index;
 ```
 
-{/* Todo 重新截图，SSR 内容  */}
-
 Re-execute `pnpm run dev`, view `view-source: http://localhost:8080/`, or view the "Preview" of the HTML request in the Network panel of devtools, you can see that the HTML rendered by SSR already contains the complete UI:
 
 ![display6](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/11/display6.png)

package/docs/zh/configure/app/tools/tailwindcss.mdx

@@ -17,7 +17,13 @@ const tailwind = {
 };
 ```
 
-对应 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置。
+用于修改 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置项。
+
+### 启用 Tailwind CSS
+
+在使用 `tools.tailwindcss` 之前，你需要启用 Modern.js 的 Tailwind CSS 插件。
+
+请阅读[「使用 Tailwind CSS」](/guides/basic-features/css.html#使用-tailwind-css) 章节来了解开启方式。
 
 ### Function 类型
 
@@ -53,6 +59,40 @@ export default {
 
 ### 注意事项
 
-注意，如果你同时使用了 [source.designSystem](/configure/app/source/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
+注意：
+
+- 如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
+- 如果你同时使用了 `source.designSystem` 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
 
 其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
+
+### 关于 source.designSystem
+
+`source.designSystem` 是 Modern.js 中废弃的配置项。
+
+从 Modern.js vMAJOR_VERSION.33.0 版本开始，你可以使用 Tailwind CSS 的 `theme` 配置项来代替 `source.designSystem`，不再需要将 `theme` 配置拆分并设置到 `designSystem` 上。
+
+- 旧版本用法：
+
+```ts title="modern.config.ts"
+const { theme, ...rest } = tailwindConfig;
+
+export default {
+  tools: {
+    tailwindcss: rest,
+  },
+  source: {
+    designSystem: theme,
+  },
+};
+```
+
+- 当前版本用法：
+
+```ts title="modern.config.ts"
+export default {
+  tools: {
+    tailwindcss: tailwindConfig,
+  },
+};
+```

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

@@ -103,37 +103,46 @@ const App = () => (
 
 :::
 
-### Tailwind CSS 自动补全
-
-Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
+### 配置 Tailwind CSS
 
-你可以参考以下步骤来启动自动补全功能：
+在 Modern.js 中，你有两种方式来配置 Tailwind CSS：
 
-1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
-2. 在项目的根目录创建 `tailwind.config.ts` 文件，并写入你需要的 Tailwind CSS 配置。
+1. 使用 `tailwind.config.{ts,js}` 文件，该用法与 Tailwind CSS 的官方用法一致，请参考 ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) 来了解更多用法。
 
 ```ts title="tailwind.config.ts"
+import type { Config } from 'tailwindcss';
+
 export default {
-  content: [
-    './src/**/*.{js,jsx,ts,tsx}',
-    './config/html/**/*.{html,ejs,hbs}',
-    './storybook/**/*',
-  ],
-};
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+} as Config;
 ```
 
-3. 在 `modern.config.ts` 中通过 [tools.tailwindcss](/configure/app/tools/tailwindcss) 引用你创建的 `tailwind.config.ts` 文件，使 Modern.js 可以正确识别 Tailwind CSS 配置内容。
+:::tip
+请升级 Modern.js 到 >= MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
+:::
 
-```ts title="modern.config.ts"
-import tailwindConfig from './tailwind.config';
+2. 使用 [tools.tailwindcss](/configure/app/tools/tailwindcss.html) 配置项，这是旧版本的用法，我们更推荐使用 `tailwind.config.{ts,js}` 文件进行配置。
 
-export default defineConfig({
+```ts title="modern.config.ts"
+export default {
   tools: {
-    tailwindcss: tailwindConfig,
+    tailwindcss: {
+      content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    },
   },
-});
+};
 ```
 
+如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
+
+### Tailwind CSS 自动补全
+
+Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
+
+你可以参考以下步骤来启动自动补全功能：
+
+1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
+2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。
 
 ### Tailwind CSS 版本
 

package/modern.config.ts

@@ -133,6 +133,14 @@ export default defineConfig({
       // exclude document fragments from routes
       exclude: ['scripts/**', '**/zh/components/**', '**/en/components/**'],
     },
+    replaceRules: [
+      {
+        // The major version is different inside the ByteDance,
+        // so we use a flag to define it.
+        search: /MAJOR_VERSION/g,
+        replace: '2',
+      },
+    ],
     builderConfig: {
       output: {
         disableTsChecker: true,

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.32.1",
+  "version": "2.32.2-alpha.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.32.1"
+    "@modern-js/builder-doc": "^2.32.2-alpha.1"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -34,9 +34,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.32.1",
-    "@modern-js/doc-tools": "2.32.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.32.1"
+    "@modern-js/builder-doc": "2.32.2-alpha.1",
+    "@modern-js/doc-tools": "2.32.2-alpha.1",
+    "@modern-js/doc-plugin-auto-sidebar": "2.32.2-alpha.1"
   },
   "scripts": {
     "dev": "modern dev",