@modern-js/main-doc 2.23.0 → 2.24.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @modern-js/main-doc
 
+## 2.24.0
+
+### Patch Changes
+
+- @modern-js/builder-doc@2.24.0
+
+## 2.23.1
+
+### Patch Changes
+
+- Updated dependencies [4d4dca0]
+  - @modern-js/builder-doc@2.23.1
+
 ## 2.23.0
 
 ### Patch Changes

package/docs/en/apis/app/hooks/config/storybook.mdx

@@ -2,6 +2,7 @@
 title: storybook/
 sidebar_position: 7
 ---
+
 # storybook/
 
 Modern.js supports debugging using Storybook. When configuring Storybook, you need to configure it in the `config/storybook` directory of the project.
@@ -12,3 +13,26 @@ Please refer to [Storybook Configuration](https://storybook.js.org/docs/react/co
 Enabling the Visual Testing (Storybook) mode function requires running the new command to enable it under the project first.
 
 :::
+
+#### Example
+
+For the webpack configuration of the Storybook Manager app section, you can configure it by adding the `./config/storybook/main.js` file to configure it.
+
+```js
+// ./config/storybook/main.js
+
+module.exports = {
+  // it controls the Storybook manager app
+  managerWebpack: async (config, options) => {
+    // update config here
+    return config;
+  },
+};
+```
+
+### Limitation
+
+There are some limitations when using the `config/storybook` directory for configuration:
+
+- The location where the Story file is stored cannot be modified, that is, the `stories` configuration cannot be modified in the `main.js` file.
+- It is not supported to modify Webpack and Babel related configurations in `main.js`, related requirements can be passed through [`tools.webpack`](/configure/app/tools/webpack.html) /[`tools.babel`](/configure/app/tools/babel.html) modify.

package/docs/en/apis/app/hooks/src/stories.mdx

@@ -6,7 +6,7 @@ sidebar_position: 7
 
 Application project Storybook files.
 
-You can create files in the `*.stories.[tj]sx` format in the project source code directory `src/` as Storybook files.
+You can create files in the `*.stories.(js|jsx|ts|tsx|mdx)` format in the project source code directory `src/` as Storybook files.
 
 Run the `npm run dev story` command in the project to use these files to debug relevant content in Storybook.
 

package/docs/en/components/global-proxy-config.mdx

@@ -11,10 +11,10 @@ Before using this option, you need to install and register the `@modern-js/plugi
 # npm
 npm add @modern-js/plugin-proxy -D
 
-#yarn
+# yarn
 yarn add @modern-js/plugin-proxy -D
 
-#pnpm
+# pnpm
 pnpm add @modern-js/plugin-proxy -D
 ```
 

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

@@ -0,0 +1,28 @@
+---
+sidebar_label: mainEntryName
+---
+
+# source.mainEntryName
+
+- **Type:** `string`
+- **Default value:** `main`
+
+This option is used to configure the main entry name of Modern.js.
+
+By default, the default main entry name of Modern.js is `main`. When using a single entry or the entry name is the same as the `name` field in `package.json`, the corresponding entry will be used as the main entry. This configuration can be used to modify the name of the main entry.
+
+For example, change the main entry name to index:
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  source: {
+    mainEntryName: 'index',
+  },
+});
+```
+
+After building, the corresponding HTML output path will be changed to `dist/html/index/index.html`.
+
+:::info
+When the main entry name is modified, other `**ByEntries` configurations also need to be adjusted to use the modified entry name.
+:::

package/docs/en/configure/app/testing/transformer.mdx

@@ -8,14 +8,10 @@ sidebar_position: 1
 - **Type:** `'babel-jest' | 'ts-jest'`
 - **Default:** `babel-jest`
 
-:::caution Caution
-First you need to enable the "Unit Test" function using [new](/apis/app/commands#modern-new) command.
+First need to run `new` command to enable [Unit Test / Integration Test] features.
 
-:::
-
-Configure the compiler for source code when executing tests: [babel-jest](https://www.npmjs.com/package/babel-jest) or [ts-jest](https://github.com/kulshekhar/ts-jest). `babel-jest` is used by default.
-
-:::info Additional information
-`Babel-jest` can also compile TS files, but there is no type error. If you need to check the TS type when running tests, then use `ts-jest`.
+Configure the compilation tool used during test execution. By default, `babel-jest` is used. You can configure it to use either [babel-jest](https://www.npmjs.com/package/babel-jest) or [ts-jest](https://github.com/kulshekhar/ts-jest).
 
+:::info Additional
+`babel-jest` can compile TypeScript files but does not perform type checking. If you want to perform type checking on your TypeScript files while running test cases, you can use `ts-jest`.
 :::

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

@@ -6,9 +6,9 @@ sidebar_position: 5
 
 ## Browserslist Configuration
 
-Modern.js supports setting the browserslist for your web applications. You can set the [Browserslist](https://browsersl.ist/) in the `.browserslistrc` file.
+Modern.js supports setting the browserslist for your web applications. You can set the value of [Browserslist](https://browsersl.ist/) in the `.browserslistrc` file.
 
-When you create a new Modern.js project, it includes a `.browserslistrc` configuration by default, which means that JavaScript code will be compiled to ES6.
+When you create a new Modern.js project, it will includes a `.browserslistrc` configuration by default, which means that the JavaScript code will be compiled to ES6.
 
 ```yaml title=".browserslistrc"
 chrome >= 51
@@ -22,32 +22,11 @@ ios_saf >= 10
 Please refer to [Modern.js Builder - Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist) for more information.
 :::
 
-## Browserslist
-
-Modern.js supports the `browserslist` field in the `package.json` file, or a `.browserslistrc` file to specify the target browser range covered by the project.
-
-This value is used by ['@babel/preset-env'] (https://babeljs.io/docs/en/babel-preset-env) and ['autoprefixer'] (https://github.com/postcss/autoprefixer) to determine the JavaScript syntax features to be converted and the CSS browser prefix to be added.
-
-The default value in Modern.js as follow:
-
-```js
-['> 0.01%', 'not dead', 'not op_mini all'];
-```
-
-You can learn how to customize the browserslist [here](https://github.com/browserslist/browserslist).
-
-See Modern.js Builder docs to learn more [Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist.html) info.
-
-:::note
-Modern.js also supports configuring [output.override Browserslist](/configure/app/output/override-browserslist) to override the default browserslist value.
-
-:::
-
 ## Polyfill
 
 ### Polyfill At Compile
 
-Modern.js inject the Polyfill code via [core-js] (https://github.com/zloirock/core-js) at compile time by default.
+Modern.js defaults to importing corresponding polyfill code from [core-js] (https://github.com/zloirock/core-js) during compilation.
 
 By default, the required Polyfill code will be introduced according to the settings of the Browserslist, so there is no need to worry about the Polyfill problem of the project source code and third-party dependencies, but because it contains some Polyfill code that is not used, the final bundle size may be increased.
 

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

@@ -0,0 +1,44 @@
+---
+sidebar_position: 20
+---
+
+# Using Storybook
+
+[Storybook](https://storybook.js.org/) is a tool dedicated to component debugging, providing around component development.
+
+- Develop UIs that are more durable
+- Test UIs with less effort and no flakes
+- Document UI for your team to reuse
+- Share how the UI actually works
+- Automate UI workflows
+
+## Enable Storybook debugging
+
+The Modern.js framework integrates the Builder's Node Polyfill plugin by default.
+
+If you want to debug the component, you can enable Storybook debugging through `pnpm run new`.
+
+```bash
+$ npx modern new
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Visual Testing (Storybook)
+```
+
+After the execution is complete, you only need to register the Modern.js Storybook plugin in the `modern.config.ts` file to enable Storybook debugging capabilities.
+
+```ts title="modern.config.ts"
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import storybookPlugin from '@modern-js/plugin-storybook';
+
+export default defineConfig({
+  plugins: [appTools(), storybookPlugin()],
+});
+```
+
+## Debugging code
+
+Modern.js recognizes files in the format of [\*.stories.(js|jsx|ts|tsx|mdx)](/apis/app/hooks/src/stories.html) under the project source code directory (src/) by default as Storybook debugging files.
+
+## Configure Storybook
+
+In Modern.js, Storybook configuration files can be added to the [`config/storybook`](/apis/app/hooks/config/storybook.html) directory of the project.

package/docs/en/guides/topic-detail/changesets/changelog.mdx

@@ -220,7 +220,7 @@ export async function getDependencyReleaseLine() {}
 ```json title="package.json"
 {
   "devDependencies": {
-    "custom-changelog": "workspace: *",
+    "custom-changelog": "workspace:*",
     ...
   }
 }

package/docs/en/guides/topic-detail/changesets/commit.mdx

@@ -251,7 +251,7 @@ export async function getVersionMessage() {}
 ```json title="package.json"
 {
   "devDependencies": {
-    "custom-commit": "workspace: *",
+    "custom-commit": "workspace:*",
     ...
   }
 }

package/docs/en/guides/topic-detail/changesets/release-note.mdx

@@ -259,8 +259,9 @@ export function getReleaseNoteLine() {}
 ```json title="package.json"
 {
   "devDependencies": {
-    "custom-release-note": "workspace: *",
+    "custom-release-note": "workspace:*",
     ...
+  }
 }
 ```
 

package/docs/zh/apis/app/hooks/config/storybook.mdx

@@ -2,6 +2,7 @@
 title: storybook/
 sidebar_position: 7
 ---
+
 # storybook/
 
 Modern.js 支持使用 Storybook 进行调试，当需要对 Storybook 进行配置时，需要在项目 config/storybook 目录进行配置。
@@ -12,3 +13,26 @@ Storybook 配置请查看：[Storybook 配置](https://storybook.js.org/docs/rea
 使用 Storybook 进行调试需要提前在项目下执行 new 命令启用「Visual Testing (Storybook)」模式功能。
 
 :::
+
+### 示例
+
+对于 Storybook Manager app 部分的 webpack 配置，可以通过增加 `./config/storybook/main.js` 文件进行配置。
+
+```js
+// ./config/storybook/main.js
+
+module.exports = {
+  // it controls the Storybook manager app
+  managerWebpack: async (config, options) => {
+    // update config here
+    return config;
+  },
+};
+```
+
+### 限制
+
+在使用 config/storybook 目录进行配置时，存在以下限制：
+
+- 不能修改 Story 文件存放的位置，即无法在 `main.js` 文件里修改 `stories` 配置。
+- 不支持在 `main.js` 中修改 Webpack 和 Babel 相关配置，相关需求可通过 [`tools.webpack`](/configure/app/tools/webpack.html) / [`tools.babel`](/configure/app/tools/babel.html) 修改。

package/docs/zh/apis/app/hooks/src/stories.mdx

@@ -6,7 +6,7 @@ sidebar_position: 7
 
 应用项目 Storybook 调试文件。
 
-可以在项目源码目录 `src/` 下创建 `*.stories.[tj]sx` 格式的文件作为 Storybook 的调试文件。
+可以在项目源码目录 `src/` 下创建 `*.stories.(js|jsx|ts|tsx|mdx)` 格式的文件作为 Storybook 的调试文件。
 
 在项目下执行 `npm run dev story` 命令，支持使用这些文件在 Storybook 中对相关内容进行调试。
 

package/docs/zh/community/blog/overview.md

@@ -10,6 +10,16 @@ sidebar_position: 1
 
 ---
 
+## AIGC 如何影响下一代文档搜索方案？
+
+> 发表于 2023.05.11
+
+对于一个文档站点来说，搜索是一个很重要的功能，它可以帮助用户在繁杂的文档中快速找到自己想要的内容。而随着 AIGC(人工智能生成内容)技术的发展，文档搜索领域也正在悄然发生变化。借助 AI 强大的自然语言处理能力和上下文理解能力，我们可以把文档搜索做得更加智能化。本文将会介绍 AIGC 在文档中应用的技术原理，并分析一些业界已有的 AI 搜索产品。
+
+[了解更多 →](https://mp.weixin.qq.com/s/OGuixAbvbIYr2viQrOrPXg)
+
+---
+
 ## Modern.js v2 发布：支持 Rspack 构建
 
 > 发表于 2023.03.16

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

@@ -0,0 +1,28 @@
+---
+sidebar_label: mainEntryName
+---
+
+# source.mainEntryName
+
+- **类型：** `string`
+- **默认值：** `main`
+
+该选项用于配置 Modern.js 的主入口名称。
+
+默认情况下，Modern.js 的默认主入口名称为 `main`，当使用单入口或者入口名称和 `package.json` 中 name 字段一致时，会将对应入口作为主入口，通过该配置可以修改主入口的名称。
+
+比如将主入口名称改为 index：
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  source: {
+    mainEntryName: 'index',
+  },
+});
+```
+
+构建之后，对应 html 产物路径将会变为 `dist/html/index/index.html`。
+
+:::info
+当修改主入口名称后，其他 `**ByEntries` 的配置也需要对应调整使用修改后的入口名称。
+:::

package/docs/zh/configure/app/testing/transformer.mdx

@@ -8,9 +8,12 @@ sidebar_position: 1
 - **类型：** `'babel-jest' | 'ts-jest'`
 - **默认值：** `babel-jest`
 
-配置执行测试的时候对于源码的编译工具： [babel-jest](https://www.npmjs.com/package/babel-jest) 或 [ts-jest](https://github.com/kulshekhar/ts-jest)。默认使用 `babel-jest`。
+:::caution Caution
+请先在当前应用项目根目录使用 [new](/apis/app/commands#modern-new) 启用测试功能。
+:::
 
-:::info 补充信息
-`babel-jest` 也可以编译 TS 文件，但不会类型报错，如果你需要跑测试的时候对 TS 类型进行校验，那么请使用 `ts-jest`。
+配置执行测试时的编译工具，默认使用 `babel-jest`。可配置为 [babel-jest](https://www.npmjs.com/package/babel-jest) 或 [ts-jest](https://github.com/kulshekhar/ts-jest)。
 
+:::info 补充信息
+`babel-jest` 可以编译 TS 文件，但没有类型校验。如果你希望运行测试用例的时，能对 TS 类型进行校验，可以使用 `ts-jest`。
 :::

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

@@ -0,0 +1,44 @@
+---
+sidebar_position: 20
+---
+
+# 使用 Storybook
+
+[Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具，它围绕着组件开发提供了：
+
+- 丰富多样的调试能力
+- 可与一些测试工具结合使用
+- 可重复使用的文档内容
+- 可分享能力
+- 工作流程自动化
+
+## 开启 Storybook 调试
+
+EdenX 默认集成了 Storybook 的调试能力。
+
+当我们想要对组件进行调试的时候，可以通过 `pnpm run new` 启用 Storybook 调试功能。
+
+```bash
+$ npx modern new
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「Visual Testing (Storybook)」模式
+```
+
+执行完成后，你只需在 `modern.config.ts` 文件中注册 Modern.js 的 Storybook 插件，即可启用 Storybook 调试能力。
+
+```ts title="modern.config.ts"
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import storybookPlugin from '@modern-js/plugin-storybook';
+
+export default defineConfig({
+  plugins: [appTools(), storybookPlugin()],
+});
+```
+
+## 调试代码
+
+Modern.js 默认识别项目源码目录 src/ 下 [\*.stories.(js|jsx|ts|tsx|mdx)](/apis/app/hooks/src/stories.html) 格式的文件作为 Storybook 的调试文件。
+
+## 配置 Storybook
+
+在 Modern.js 中，可以在项目的 [`config/storybook`](/apis/app/hooks/config/storybook.html) 目录下增加 Storybook 配置文件。

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

@@ -171,7 +171,7 @@ export default () => {
 
 ### 动态可选路由
 
-通过 `[$]` 命名的文件目录，生成的路由会作为动态路由。例如以下文件目录：
+通过 `[$]` 命名的文件目录，生成的路由会作为动态可选路由。例如以下文件目录：
 
 ```bash
 └── routes

package/docs/zh/guides/topic-detail/changesets/changelog.mdx

@@ -220,7 +220,7 @@ export async function getDependencyReleaseLine() {}
 ```json title="package.json"
 {
   "devDependencies": {
-    "custom-changelog": "workspace: *",
+    "custom-changelog": "workspace:*",
     ...
   }
 }

package/docs/zh/guides/topic-detail/changesets/commit.mdx

@@ -251,7 +251,7 @@ export async function getVersionMessage() {}
 ```json title="package.json"
 {
   "devDependencies": {
-    "custom-commit": "workspace: *",
+    "custom-commit": "workspace:*",
     ...
   }
 }

package/docs/zh/guides/topic-detail/changesets/release-note.mdx

@@ -259,8 +259,9 @@ export function getReleaseNoteLine() {}
 ```json title="package.json"
 {
   "devDependencies": {
-    "custom-release-note": "workspace: *",
+    "custom-release-note": "workspace:*",
     ...
+  }
 }
 ```
 

package/package.json

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