@modern-js/main-doc 2.23.0 → 2.23.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @modern-js/main-doc
 
+## 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/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/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/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/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.23.0",
+  "version": "2.23.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.23.0"
+    "@modern-js/builder-doc": "^2.23.1"
   },
   "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.23.1",
+    "@modern-js/doc-tools": "2.23.1",
+    "@modern-js/doc-plugin-auto-sidebar": "2.23.1"
   },
   "scripts": {
     "dev": "modern dev",