@modern-js/module-tools-docs 2.52.0 → 2.54.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @modern-js/module-tools-docs
 
+## 2.54.0
+
+### Patch Changes
+
+- 38537fc: optimize the doc content
+
+## 2.53.0
+
+### Patch Changes
+
+- 51bd725: docs: correcting the name of the document product added to .gitignore
+
 ## 2.52.0
 
 ## 2.51.0

package/docs/en/api/config/build-config.mdx

@@ -878,7 +878,7 @@ For more information about JSX Transform, you can refer to the following links:
 
 - [React Blog - Introducing the New JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).
 - [esbuild - JSX](https://esbuild.github.io/api/#jsx).
-  :::
+:::
 
 ## metafile
 

package/docs/en/guide/basic/use-micro-generator.md

@@ -31,27 +31,6 @@ export default defineConfig({
 });
 ```
 
-:::
-
-## Test
-
-When we want to test some modules, we can enable the test feature. When this feature is enabled, **a `tests` directory and related files will be created in the project directory, and a new `"@modern-js/plugin-testing"` dependency will be added to package.json**.
-Use `edenx test` to run tests.
-
-:::tip
-After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
-
-```ts
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-import { testingPlugin } from '@modern-js/plugin-testing';
-
-export default defineConfig({
-  plugins: [moduleTools(), testingPlugin()],
-});
-```
-
-:::
-
 ## Storybook
 
 The **Storybook feature** can be enabled when we want to debug a component or a common module. When this feature is enabled, **the `stories` directory and `.storybook` directory are created in the project directory, and a new `"@modern-js/storybook"` dependency is added to package.json**. Use `storybook dev` and `storybook build` to debug and build.

package/docs/en/guide/basic/use-module-doc.mdx

@@ -123,10 +123,10 @@ export default () => {
 }
 ```
 
-3. In the `.gitignore`, add `docs_build/`:
+3. In the `.gitignore`, add `doc_build/`:
 
 ```bash title=".gitignore"
-docs_build/
+doc_build/
 ```
 
 Congratulations, you have finished writing a component document, execute `pnpm run dev` to see the result, remember to build the component library first to make sure the component product exists.

package/docs/en/guide/best-practices/components.mdx

@@ -229,10 +229,6 @@ If you have special needs for the build artifacts directory structure, you can u
 - [modify-output-product](/en/guide/basic/modify-output-product#build-configuration-object)
 - [in-depth-about-build](/en/guide/advance/in-depth-about-build)
 
-## Testing components
-
-For more information on how to test components, please refer to ["Test project"](/en/guide/basic/test-your-project).
-
 ## Releasing components
 
 It is recommended to use the version release feature provided by Modern.js Module. You can refer to the ["Version Management and Release"](/en/guide/basic/publish-your-project) section for more information.

package/docs/en/guide/faq/build.mdx

@@ -97,7 +97,7 @@ export const libs = {
 
 In this case `babel-plugin-import` may also cause `Comps` to become `undefined`. So you need to remove the corresponding `babel-plugin-import` as well.
 
-### Cannot find module http
+### Cannot find module 'http'
 
 If the output reports an error like `Cannot find module 'http'` at browser runtime, it means that your output has bundled node modules.
 This may occur if some of your dependencies support both browser and node, such as `axios`, in which case you only need to set the [platform](/api/config/build-config.html#platform) to `browser`.

package/docs/en/guide/faq/storybook.mdx

@@ -17,7 +17,7 @@ In addition to the Addon, other configurations may also have differences. For ex
 - v6：[Document](https://storybook.js.org/docs/6.5/react/writing-stories/decorators#global-decorators)
 - v7：[Document](https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators)
 
-## Cannot find module 'react-dom/package.json
+## Cannot find module 'react-dom/package.json'
 
 When debug Storybook, the following problem occurs:
 

package/docs/zh/guide/basic/modify-output-product.md

@@ -39,15 +39,15 @@ export default defineConfig({
 
 `buildPreset` 代表着提前准备好的一组或者多组构建相关的配置，只需要使用 `buildPreset` 对应的预设值，就可以省去麻烦且复杂的配置工作，得到符合预期的产物。
 
-Modern.js Module 主要内置了两套构建预设,包括:
+Modern.js Module 主要内置了两套构建预设，包括:
 
 - `npm-component`: 用于构建组件库。
-- `npm-library`: 用于打包其他库类型的项目,如工具库。
+- `npm-library`: 用于打包其他库类型的项目，如工具库。
 
 同时，还提供一些变体，例如 `npm-library-with-umd` 和 `npm-library-es5`，顾名思义，分别对应带有 umd 产物和支持到 es5 语法的库预设。
-详细配置可以查看其[API](/api/config/build-preset)。
+详细配置可以查看其 [API](/api/config/build-preset) 。
 
-除此之外,我们也可以完全自定义构建配置:
+除此之外，我们也可以完全自定义构建配置:
 
 ## 构建配置
 

package/docs/zh/guide/basic/use-micro-generator.md

@@ -31,26 +31,6 @@ export default defineConfig({
 });
 ```
 
-:::
-
-## Test 测试
-
-当我们想要对一些模块进行测试的时候，可以启用测试功能。启动该功能后，**会在项目目录下创建 `tests` 目录以及相关文件，在 package.json 中新增 `"@modern-js/plugin-testing"` 依赖**。使用 `modern test` 来测试你的模块。
-
-:::tip
-在成功开启后，会提示需要手动在配置中增加如下类似的代码。
-
-```ts
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-import { testingPlugin } from '@modern-js/plugin-testing';
-
-export default defineConfig({
-  plugins: [moduleTools(), testingPlugin()],
-});
-```
-
-:::
-
 ## Storybook 调试
 
 当我们想要对组件或者普通模块进行调试的时候，可以启用 Storybook 调试功能。启动该功能后，**会在项目目录下创建 `stories` 目录以及 `.storybook` 目录，在 package.json 中新增 `"@modern-js/storybook"` 依赖**。使用 `storybook dev` 和 `storybook build` 来调试和构建。

package/docs/zh/guide/basic/use-module-doc.mdx

@@ -119,10 +119,10 @@ export default () => {
 }
 ```
 
-3. 在 `.gitignore` 文件下添加 `docs_build/`，文档产物将会生成在此目录下：
+3. 在 `.gitignore` 文件下添加 `doc_build/`，文档产物将会生成在此目录下：
 
 ```bash title=".gitignore"
-docs_build/
+doc_build/
 ```
 
 恭喜你，已经完成了一个组件文档的编写，执行`pnpm run dev`看看效果吧，记得先构建一下组件库，确保组件产物存在。

package/docs/zh/guide/best-practices/components.mdx

@@ -229,10 +229,6 @@ export default defineConfig({
 - [修改输出产物](/guide/basic/modify-output-product#构建配置对象)
 - [深入理解构建](/guide/advance/in-depth-about-build)
 
-## 测试组件
-
-关于如何对组件进行测试，可以参考 [「测试项目」](/guide/basic/test-your-project)。
-
 ## 发布组件
 
 推荐使用 Modern.js Module 提供的版本发布功能，可以参考 [「版本管理与发布」](/guide/basic/publish-your-project)。

package/docs/zh/guide/faq/build.mdx

@@ -97,7 +97,7 @@ export const libs = {
 
 此时 `babel-plugin-import` 也可能会导致 `Comps` 变为 `undefined`。因此也需要移除对应的 `babel-plugin-import`。
 
-### Cannot find module http
+### Cannot find module 'http'
 
 如果产物在浏览器运行时报了类似 `Cannot find module 'http'` 的错误，说明你的产物打包进了 node 模块。
 这可能会发生于你的依赖里有一些同时支持 browser 和 node 的三方包，例如 `axios`，此时只需要将 [platform](/api/config/build-config.html#platform) 设置为 `browser` 即可。

package/docs/zh/guide/faq/storybook.mdx

@@ -17,7 +17,7 @@ Modern.js Module 目前使用的 Storybook 版本是 v6，如果使用了 v7 版
 - v6：[文档链接](https://storybook.js.org/docs/6.5/react/writing-stories/decorators#global-decorators)
 - v7：[文档链接](https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators)
 
-## Cannot find module 'react-dom/package.json
+## Cannot find module 'react-dom/package.json'
 
 在执行 Storybook 调试的时候，出现下面的报错提示：
 

package/package.json

@@ -9,14 +9,14 @@
     "directory": "packages/document/module-doc"
   },
   "license": "MIT",
-  "version": "2.52.0",
+  "version": "2.54.0",
   "main": "index.js",
   "devDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rspress": "1.18.2",
     "@rspress/shared": "1.18.2",
-    "@modern-js/doc-plugin-auto-sidebar": "2.52.0"
+    "@modern-js/doc-plugin-auto-sidebar": "2.54.0"
   },
   "scripts": {
     "dev": "rspress dev",

package/docs/en/guide/basic/test-your-project.mdx

@@ -1,120 +0,0 @@
----
-sidebar_position: 6
----
-
-# Testing Projects
-
-This chapter will describe how to test modules.
-
-## Prerequisites and conventions
-
-To use the testing features of the project, you need to make sure that the project contains the dependency: `"@modern-js/plugin-testing"` , which can be done with [modern new](/guide/basic/command-preview#modern-new).
-
-In Modern.js Module, the following conventions are in place for test cases, or files for writing tests:
-
-- The `tests` directory in the project directory is the directory for test cases and test files, **no support for changing the directory for running test cases**.
-- Files with the suffix `.test.[tj]sx?` are automatically recognized as test files by default.
-- Other `. [tj]sx?` suffixes are recognized as normal files that can be used as test `utils` files or for other purposes.
-
-## Run the tests
-
-Once the dependencies are prepared and we know where to write the test cases, we can execute the tests with the following command:
-
-```bash
-modern test
-
-// Update snapshot
-modern test --updateSnapshot
-```
-
-After execution, you will see the results of the test:
-
-![test-result](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/test-result.png)
-
-## Usage Configuration
-
-Modern.js Module provides the following configurations for testing.
-
-- [`testing`](/api/config/testing)
-
-You can add it in `modern.config.(j|t)s`.
-
-## Test example
-
-### Common modules
-
-For common modules, we can use the test function as follows:
-
-- First is the code of the module:
-
-```ts title="./src/index.ts"
-export default function () {
-  return 'hello world';
-}
-```
-
-- Then in the test file, we can import source code as the following way. Where `@` points to the source directory, defined in `tests/tsconfig.json` in the initialization project.
-
-```ts title="./tests/index.test.ts"
-import main from '@/index';
-
-describe('default cases', () => {
-  test('Have returns', () => {
-    const drink = jest.fn(main);
-    drink();
-    expect(drink).toHaveReturned();
-  });
-});
-```
-
-- Finally we can execute `modern test`.
-
-```bash
-pnpm test
-## or
-yarn test
-## or
-npm run test
-```
-
-### Components
-
-For components, Modern.js's Runtime API provides functionality for testing UI components, which is provided by `@modern-js/runtime/testing`.
-
-:::tip
-If you need to use the Runtime API, then you can turn it on via [microgenerator](/guide/basic/command-preview).
-:::
-
-- First is the code of the component:
-
-```tsx title="./src/index.tsx"
-export default () => {
-  return <div>This is a UI Component</div>;
-};
-```
-
-
-- Then in the test file, we can import source code as the following way. Where `@` points to the source directory, defined in `tests/tsconfig.json` in the initialization project.
-
-```tsx title="./tests/index.test.tsx"
-import { render, screen } from '@modern-js/runtime/testing';
-
-import Component from '@/index';
-
-describe('default cases', () => {
-  test('Rendered', () => {
-    render(<Component />);
-    expect(screen.getByText('This is a UI Component')).toBeInTheDocument();
-  });
-});
-```
-
-- Finally we can execute `modern test`.
-
-```bash
-pnpm test
-## or
-yarn test
-## or
-npm run test
-```

package/docs/zh/guide/basic/test-your-project.mdx

@@ -1,135 +0,0 @@
----
-sidebar_position: 6
----
-
-# 测试项目
-
-本章将要介绍如何测试可复用模块。
-
-## 先决条件和约定
-
-想要使用项目的测试功能，需要确保项目中包含依赖：`"@modern-js/plugin-testing"`，以及按照类似下面的内容进行配置：
-
-```ts
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-import { testingPlugin } from '@modern-js/plugin-testing';
-
-export default defineConfig({
-  plugins: [
-    moduleTools(),
-    testingPlugin(),
-  ],
-});
-```
-
-可以通过执行 [`modern new`](/guide/basic/command-preview#modern-new) 命令来开启测试功能。
-
-在 Modern.js Module 中，对于测试用例或者说编写测试的文件有如下约定：
-
-- 项目目录下的 `tests` 目录为测试用例和测试文件的目录，**不支持更改运行测试用例的目录**。
-- 默认会自动将后缀为 `.test.[tj]sx?` 的文件识别为测试文件。
-- 其他的 `.[tj]sx?` 后缀的文件被识别为普通的文件，可以用于测试的 `utils` 文件或者其他用途。
-
-## 运行测试
-
-当准备好了依赖、增加了相关配置以及了解了测试用例在哪里编写后，我们可以通过以下命令来执行测试：
-
-```bash
-modern test
-
-// 更新 snapshot
-modern test --updateSnapshot
-```
-
-执行之后，会看到测试的结果：
-
-![test-result](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/test-result.png)
-
-## 使用配置
-
-Modern.js Module 对测试提供了以下配置：
-
-- [`testing`](/api/config/testing)
-
-可以在 `modern.config.(j|t)s` 中增加它。
-
-## 测试示例
-
-### 普通模块
-
-对于普通的模块，我们可以按照如下方式使用测试功能：
-
-- 首先是模块的代码：
-
-```ts title="./src/index.ts"
-export default function () {
-  return 'hello world';
-}
-```
-
-- 然后在测试文件中，我们可以按以下方式引用，其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 的 `paths` 中定义了。
-
-```ts title="./tests/index.test.ts"
-import main from '@/index';
-
-describe('默认值 cases', () => {
-  test('Have returns', () => {
-    const drink = jest.fn(main);
-    drink();
-    expect(drink).toHaveReturned();
-  });
-});
-```
-
-- 最后我们可以执行 `modern test`：
-
-```bash
-pnpm test
-## or
-yarn test
-## or
-npm run test
-```
-
-### 组件
-
-{/* 链接待补充 */}
-
-对于组件，Modern.js 的 Runtime API 提供了用于测试 UI 组件的功能，其功能由 `@modern-js/runtime/testing` 提供。
-
-:::tip
-如果需要使用 Runtime API，那么可以通过 [微生成器](/guide/basic/command-preview) 开启。
-:::
-
-- 首先是组件的代码：
-
-```tsx title="./src/index.tsx"
-export default () => {
-  return <div>This is a UI Component</div>;
-};
-```
-
-- 然后在测试文件中，我们可以按以下方式引用，其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 的 `paths` 中定义了。
-
-```tsx title="./tests/index.test.tsx"
-import { render, screen } from '@modern-js/runtime/testing';
-
-import Component from '@/index';
-
-describe('默认值 cases', () => {
-  test('Rendered', () => {
-    render(<Component />);
-    expect(screen.getByText('This is a UI Component')).toBeInTheDocument();
-  });
-});
-```
-
-- 最后我们可以执行 `modern test`。
-
-```bash
-pnpm test
-## or
-yarn test
-## or
-npm run test
-```