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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- @modern-js/builder-doc@2.32.1
+
 ## 2.32.0
 
 ### 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/components/enable-bff-caution.mdx

@@ -1,3 +1,3 @@
 :::caution
-Please enable BFF functionality in the current application project root directory using [new](/apis/app/commands#modern-new) first.
+Please use the [new command](/apis/app/commands#modern-new) in the root directory of the current project to enable BFF functionality first.
 :::

package/docs/en/configure/app/auto-load-plugin.mdx

@@ -1,7 +1,7 @@
 ---
-title: autoLoadPlugins
-sidebar_position: 11
+sidebar_position: 22
 ---
+
 # autoLoadPlugins
 
 - **Type:** `boolean`

package/docs/en/configure/app/bff/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "bff",
-  "position": 5
+  "position": 2
 }

package/docs/en/configure/app/builder-plugins.mdx

@@ -1,7 +1,7 @@
 ---
-title: builderPlugins
-sidebar_position: 10
+sidebar_position: 21
 ---
+
 # builderPlugins
 
 - **Type:** `BuilderPlugin[]`

package/docs/en/configure/app/dev/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "dev",
-  "position": 7
+  "position": 1
 }

package/docs/en/configure/app/experiments/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "experiments",
-  "position": 15
+  "position": 14
 }

package/docs/en/configure/app/html/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "html",
-  "position": 2
+  "position": 3
 }

package/docs/en/configure/app/output/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "output",
-  "position": 2
+  "position": 7
 }

package/docs/en/configure/app/output/ssg.mdx

@@ -10,7 +10,7 @@ sidebar_label: ssg
 Enable the SSG for **Self-controlled Routing** or **Conventional Routing**.
 
 :::info
-For more routes detail, see [routes](/guides/basic-features/routes).
+For more routes detail, see [Routing](/guides/basic-features/routes).
 
 :::
 

package/docs/en/configure/app/plugins.mdx

@@ -1,5 +1,4 @@
 ---
-title: plugins
 sidebar_position: 9
 ---
 

package/docs/en/configure/app/runtime/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "runtime",
-  "position": 3
+  "position": 12
 }

package/docs/en/configure/app/security/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "security",
-  "position": 14
+  "position": 11
 }

package/docs/en/configure/app/server/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "server",
-  "position": 4
+  "position": 6
 }

package/docs/en/configure/app/source/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "source",
-  "position": 1
+  "position": 5
 }

package/docs/en/configure/app/source/enable-async-entry.mdx

@@ -9,7 +9,7 @@ sidebar_label: enableAsyncEntry
 
 This option is used for webpack Module Federation scenario.
 
-When this option is enabled, Modern.js will wrap the automatically generated entry files with Dynamic Imports (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
+When this option is enabled, Modern.js will wrap the automatically generated entry files with dynamic import (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
 
 ## Background
 

package/docs/en/configure/app/source/mainEntryName.mdx

@@ -5,7 +5,7 @@ sidebar_label: mainEntryName
 # source.mainEntryName
 
 - **Type:** `string`
-- **Default value:** `main`
+- **Default:** `main`
 
 This option is used to configure the main entry name of Modern.js.
 

package/docs/en/configure/app/testing/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "testing",
-  "position": 8
+  "position": 10
 }

package/docs/en/configure/app/tools/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "tools",
-  "position": 12
+  "position": 4
 }

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

@@ -14,11 +14,17 @@ const tailwind = {
     './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
-  // Use source.design System config as Tailwind CSS theme config
-  theme: source.designSystem,
 };
 ```
 
+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,8 +57,42 @@ export default {
 };
 ```
 
-### Limitations
+### Notes
+
+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,
+  },
+};
+```
 
-The `theme` attribute is not allowed, otherwise the build will fail. Modern.js use [source.designSystem](/configure/app/source/design-system) as the Tailwind CSS Theme configuration.
+- Current usage:
 
-Other uses are consistent with [Tailwind CSS](https://tailwindcss.com/docs/configuration).
+```ts title="modern.config.ts"
+export default {
+  tools: {
+    tailwindcss: tailwindConfig,
+  },
+};
+```

package/docs/en/guides/advanced-features/bff/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "BFF",
+  "label": "Using BFF",
   "position": 2,
   "link": {
     "type": "doc",

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/advanced-features/code-split.mdx

@@ -1,7 +1,7 @@
 ---
-title: Code Split
-sidebar_position: 6
+sidebar_position: 3
 ---
+
 # Code Splitting
 
 Code splitting is a common way to optimize frontend resource loading. This article will introduce the three types of code splitting supported by Modern.js:

package/docs/en/guides/advanced-features/eslint.mdx

@@ -1,8 +1,8 @@
 ---
-title: ESLint
 sidebar_position: 8
 ---
-# ESLint
+
+# ESLint Rules
 
 **Modern.js ESLint Rules** is the full set of **ESLint** rules, includes `@modern-js` (Lint rules for Node.js projects) and `@modern-js-app` (Lint rules for web projects).
 

package/docs/en/guides/advanced-features/low-level.mdx

@@ -1,7 +1,7 @@
 ---
-title: Low-Level Tools
-sidebar_position: 11
+sidebar_position: 10
 ---
+
 # Low-Level Tools
 
 ## Usage

package/docs/en/guides/advanced-features/ssg.mdx

@@ -1,6 +1,5 @@
 ---
-title: Static Site Generation
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # Static Site Generation
@@ -55,7 +54,7 @@ The above file directory will generate the following three routes:
 - `/user/profile`
 
 :::note
-If you are not familiar with the rules of Conventional Routing, you can first check [routes](/guides/basic-features/routes).
+If you are not familiar with the rules of Conventional Routing, you can first check [Routing](/guides/basic-features/routes).
 
 :::
 

package/docs/en/guides/advanced-features/ssr.mdx

@@ -1,9 +1,8 @@
 ---
-title: Server-side rendering
-sidebar_position: 3
+sidebar_position: 4
 ---
 
-# Server-side rendering
+# Server-Side Rendering
 
 In Modern.js, SSR is readily available without the need for developers to write intricate server-level logic or worry about the operation and maintenance of SSR services. Additionally, Modern.js includes a comprehensive degradation strategy for SSR to ensure safe page execution.
 

package/docs/en/guides/advanced-features/testing.mdx

@@ -1,8 +1,8 @@
 ---
-sidebar_position: 10
-title: Testing
+sidebar_position: 11
 ---
-# Testing
+
+# Using Jest
 
 Modern.js integrates the testing capabilities of [Jest](https://jestjs.io/) by default.
 

package/docs/en/guides/advanced-features/using-storybook.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 20
+sidebar_position: 12
 ---
 
 # Using Storybook

package/docs/en/guides/advanced-features/web-server.mdx

@@ -1,7 +1,7 @@
 ---
-title: Custom Web Server
-sidebar_position: 3
+sidebar_position: 13
 ---
+
 # Custom Web Server
 
 As a client-centric development framework, Modern.js has limited customization capabilities on the server side. However, in some development scenarios, special server-level logic needs to be customized, such as user authentication, request preprocessing, and adding page rendering skeletons.

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

@@ -1,8 +1,8 @@
 ---
-title: Alias
-sidebar_position: 8
+sidebar_position: 3
 ---
-# Alias
+
+# Path Alias
 
 Modern.js allows you to use alias to import modules from custom directories in JS and CSS, and comes with the following built-in alias:
 

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

@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-# CSS Solutions
+# Styling
 
 Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.
 
@@ -103,47 +103,46 @@ 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/**/*',
-  ],
-  // Theme configuration (optional)
-  theme: {},
-};
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+} as Config;
 ```
 
-3. In the `modern.config.ts` file, import the `tailwind.config.ts` file you created, 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,
-  },
-  // Theme configuration (optional)
-  source: {
-    designSystem: tailwindConfig.theme,
+    tailwindcss: {
+      content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    },
   },
-});
+};
 ```
 
-Please read the documentation for the following configuration options to understand their functions:
+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}`.
 
-- [tools.tailwindcss](/configure/app/tools/tailwindcss).
-- [source.designSystem](/configure/app/source/design-system).
+### 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
 
@@ -162,39 +161,3 @@ Tailwind CSS v2 and v3 do not support the IE 11 browser, please refer to:
 - [Tailwind CSS v2 - Browser Support](https://v2.tailwindcss.com/docs/browser-support)
 
 If you use Tailwind CSS on IE 11 browser, some styles may not be available, please use it with caution.
-
-### Theme Configuration
-
-When you need to customize the [theme](https://tailwindcss.com/docs/theme) configuration of Tailwind CSS, you can modify it in the [`source.designSystem`](/configure/app/source/design-system) configuration. For example, adding a `primary` color theme:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    designSystem: {
-      extend: {
-        colors: {
-          primary: '#5c6ac4',
-        },
-      },
-    },
-  },
-});
-```
-
-When you need to make other special configurations to Tailwind CSS besides [theme](https://tailwindcss.com/docs/theme), you can configure them in [`tools.tailwindcss`](/configure/app/tools/tailwindcss), such as setting `variants`:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    tailwindcss: {
-      variants: {
-        extend: {
-          backgroundColor: ['active'],
-        },
-      },
-    },
-  },
-});
-```
-
-> When you configure Tailwind CSS for your project, the combination of [source.designSystem](/configure/app/source/design-system) and [tools.tailwindcss](/configure/app/tools/tailwindcss) configurations is equivalent to configuring a `tailwindcss.config.js` file separately. [source.designSystem](/configure/app/source/design-system) is equivalent to the Tailwind CSS [theme](https://v2.tailwindcss.com/docs/configuration#theme) configuration.

package/docs/en/guides/basic-features/data-fetch.mdx

@@ -1,7 +1,7 @@
 ---
-title: Data Fetching
-sidebar_position: 3
+sidebar_position: 4
 ---
+
 # Data Fetching
 
 Modern.js provides out-of-the-box data fetching capabilities, allowing developers to develop in an isomorphic way in both client-side and server-side code.

package/docs/en/guides/basic-features/env-vars.mdx

@@ -1,8 +1,8 @@
 ---
-title: Environment Variable
 sidebar_position: 7
 ---
-# Environment Variable
+
+# Environment Variables
 
 Modern.js provides support for environment variables, including built-in environment variables and custom environment variables.
 

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

@@ -1,5 +1,4 @@
 ---
-title: HTML Template
 sidebar_position: 9
 ---
 

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

@@ -1,8 +1,8 @@
 ---
-title: Mock
-sidebar_position: 6
+sidebar_position: 5
 ---
-# Mock
+
+# Data Mocking
 
 Modern.js allows you to easily generate mock data so that the front-end can develop independently without depending on the back-end API.
 
@@ -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/basic-features/proxy.mdx

@@ -1,8 +1,8 @@
 ---
-title: Proxy
-sidebar_position: 5
+sidebar_position: 6
 ---
-# Proxy
+
+# Network Proxy
 
 ## Local Proxy
 

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

@@ -1,9 +1,8 @@
 ---
-title: Routes
 sidebar_position: 1
 ---
 
-# Routes
+# Routing
 
 Modern.js's routing is based on [React Router 6](https://reactrouter.com/en/main) and provides multiple types of routing modes. According to different [entry](/guides/concept/entries) types, routing is divided into three modes: **Conventional Routing**, **Self-controlled Routing**, and **Other**.
 

package/docs/en/guides/concept/builder.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-# Builder
+# Build Engine
 
 **Modern.js uses [Modern.js Builder](https://modernjs.dev/builder/en) to build your Web App.**
 
@@ -16,7 +16,7 @@ From a building perspective, Modern.js is divided into three layers, from top to
 - Common build engine: Modern.js Builder.
 - Low-level bundler: webpack and Rspack.
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-0824.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## Builder Documentation
 

package/docs/en/guides/concept/entries.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# Entry
+# Page Entry
 
 In this chapter, you will learn about the entry convention in Modern.js and how to customize it.