@modern-js/module-tools-docs 2.2.1-beta.1 → 2.3.0

package/docs/en/api/plugin-api/plugin-hooks.md

@@ -328,8 +328,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // Whether to disable the source build before the dev command is executed
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -337,11 +335,11 @@ export interface DevToolData {
 }
 ```
 
-:::tip{title='About disableRunBuild configuration'}
+<!-- :::tip{title='About disableRunBuild configuration'}
 When dev a project, it may be possible to set `disableRunBuild: true` to disable build tasks for source execution (in listening mode) if you only need to dev code functionality.
 
 The currently supported Storybook dev supports using source code products as dev objects, so `disableRunBuild: false` in the Storybook plugin.
-:::
+::: -->
 
 ### `beforeDev`
 
@@ -371,8 +369,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // Whether to disable the source build before the dev command is executed
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -434,8 +430,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // Whether to disable the source build before the dev command is executed
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -471,8 +465,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // Whether to disable the source build before the dev command is executed
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },

package/docs/en/guide/advance/in-depth-about-dev-command.md

@@ -15,15 +15,6 @@ The `dev` command provided by the module project is mainly used for debugging th
 
 In addition to the `dev` command, you can also start a debugging tool or task directly by using the `dev [debug tool name]` option.
 
-When executing the `dev` command, the debugging tool can choose whether or not to perform a listening mode for code builds before starting, for example the Storybook debugging tool has this feature enabled.
-
-
-## Storybook
-
-
-Storybook is currently the official Module Tools debugging tool plugin provided by Module Works.
-
-As we mentioned above, Storybook performs the source build task in listening mode before it is started, so you will see log messages for both Storybook and the source build in the terminal. Changes to the build product are also triggered when the source code is updated, and Storybook hot updates are triggered when the build product changes.
 
 ## Extending the dev command
 

package/docs/en/guide/basic/command-preview.md

@@ -33,7 +33,7 @@ When you want to start a project build, you can execute the `modern build` comma
 In addition to the above, module projects also support `platform` build mode, which can be used to perform build tasks for other tools. For example, it is currently officially supported to start a Storybook build task to generate Storybook products by executing the `modern build --platform` or `modern build --platform storybook` commands after installing the `@modern-js/plugin-storybook` plugin.
 
 :::tip{title=Note}
-When executing a Storybook build, it may need to read the project's build product. So **when the `modern build --platform` command is executed to start a Storybook build, the `modern build --watch` program is automatically executed first to ensure the existence of the source build product**.
+When executing a Storybook build, if you need to read the build product of the project. Then **don't forget to execute the `modern build` command to ensure the existence of the project's build product before executing the `modern build --platform` command to start the Storybook build**.
 :::
 
 ## `modern new`

package/docs/en/guide/basic/using-storybook.mdx

@@ -28,7 +28,7 @@ The project code needs to be introduced during the debugging process and can cur
 - Use of project products
 - Using the project source code
 
-We prefer to use the first "**use project product**" approach. This is because it is closer to a real-life usage scenario and not only allows you to debug the functionality of the component, but also to verify the correctness of the build product.
+We recommend using the first "**referenced project product**" approach. Because it is closer to the real usage scenario, not only can we debug the component functionality, but also verify the correctness of the build product. However, we can also refer to the source code when testing the project functionality and refer to the project package name when verifying the project product.
 
 Next, we will talk about how to use each of these two methods.
 
@@ -88,7 +88,7 @@ The `key` of `paths` is the same as the project name.
 
 ---
 
-Finally, it is referenced directly in the Story code by the project name.
+Referenced directly in Story code by the project name.
 
 ```tsx stories/index.stories.tsx focus=1:1
 import { content } from 'foo';
@@ -102,6 +102,26 @@ export default {
 };
 ```
 
+---
+
+Finally, when executing the command, first start the source build in listening mode and then start Storybook debugging.
+
+<CH.Code>
+
+``` bash terminal-1
+## Source Code Build
+modern build --watch
+```
+
+---
+
+``` bash terminal-2
+## Storybook Debug
+modern dev storybook
+```
+
+</CH.Code>
+
 </CH.Spotlight>
 
 If, during development, you encounter a situation where the type definition is not available in real time, at that point.
@@ -125,8 +145,8 @@ For npm and Yarn projects, the values of `types` of `package.json` can only be c
 
 So why is it possible to reference the product directly?
 
-1. the `modern build` command is executed automatically before the `modern dev storybook` command, ensuring the existence of the project build product.
-2. The project name is added as an alias inside Storybook to ensure that the path to the project's product can be parsed **according to `package.json`**.
+1. execute `modern build --watch` command before executing `modern dev storybook` command to ensure the existence of project build products.
+2. Add processing logic inside Storybook to ensure that the project's product paths can be parsed **according to `package.json`, based on the `compilerOptions.paths` configuration in the `tsconfig.json` file or (in JS projects) directly with the project name as an alias**.
 
 ### Referencing component source code
 
@@ -144,10 +164,12 @@ export default {
 };
 ```
 
-So why is the source code approach not recommended?
-
+:::tip{title='why is the source code approach not recommended'}
 Not only is it impossible to verify that the component product is correct using the component source code, **but also some of the configurations supported by the module project for building the product cannot be fully translated into Storybook internal configuration**. If some of the configurations cannot be converted to each other, there will be unintended results during Storybook debugging.
 
+Module Tools is based on Esbuild, while Storybook is based on Webpack, and Esbuild's configuration is not fully compatible with Webpack.
+:::
+
 ## Configure Storybook
 
 Storybook is officially configured for projects through a folder called `.storybook`, which contains various configuration files. **In a module project scenario, Storybook configuration files can be added to the `config/storybook` directory of the project.**

package/docs/en/guide/intro/getting-started.md

@@ -2,7 +2,7 @@
 sidebar_position: 3
 ---
 
-# Quick start
+# Quick Start
 
 ## 3 minute demo
 

package/docs/en/index.md

@@ -7,24 +7,30 @@ hero:
   tagline: simple, powerful, high-performance modern npm package development solution
   actions:
     - theme: brand
-      text: welcome
-      link: /guide/intro/welcome
+      text: Welcome
+      link: /en/guide/intro/welcome
+    - theme: alt
+      text: Quick Start
+      link: /en/guide/intro/getting-started
 
 features:
   - title: 'Esbuild: The High Performance JS Bundler'
     details: Built on Esbuild, the build is extremely fast and gives you the ultimate development experience.
     icon: 🚀
-  - title: 'Storybook: The community popular UI development tool'
-    details: Integrated with Storybook, you can use it to debug UI.
-    icon: 📦
-  - title: 'transform + bundle'
+  - title: 'Two build modes'
     details: Both bundle and bundleless build modes are supported.
     icon: ✨
-  - title: 'zero configuration'
-    details: Develop your npm packages without any configuration, with built-in presets covering multiple scenarios.
+  - title: 'Out of the box'
+    details: Develop your npm packages without too much configuration, with built-in presets covering a wide range of scenarios.
     icon: 🛠️
   - title: 'Extensible: Provides a powerful plugin mechanism'
     details: With its plugin extension mechanism, you can easily extend the capabilities of Module Tools.
     icon: 🎨
+  - title: 'Storybook: The community popular UI development tool'
+    details: Integrated with Storybook, you can use it to debug UI.
+    icon: 📦
+  - title: 'Jest: Delightful Testing Framework'
+    details: Jest integration makes it easier to test code。
+    icon: 📐
 ---
 # index

package/docs/en/plugins/guide/getting-started.mdx

@@ -44,7 +44,7 @@ export const ExamplePlugin = (): CliPlugin<ModuleTools> => {
           console.info('build over');
         }
       };
-    };
+    },
   };
 };
 ```

package/docs/zh/api/plugin-api/plugin-hooks.md

@@ -330,8 +330,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // 在 dev 命令执行之前，是否关闭源码构建
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -339,11 +337,11 @@ export interface DevToolData {
 }
 ```
 
-:::tip{title='关于 disableRunBuild 配置'}
+<!-- :::tip{title='关于 disableRunBuild 配置'}
 在调试项目的时候，如果仅需要对代码功能进行调试的话，也许可以设置 `disableRunBuild: true` 来关闭对于源码执行（监听模式下的）构建任务。
 
 目前支持的 Storybook 调试支持将源码产物作为调试对象，因此在 Storybook 插件中 `disableRunBuild: false`。
-:::
+::: -->
 
 ### `beforeDev`
 
@@ -373,8 +371,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // 在 dev 命令执行之前，是否关闭源码构建
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -436,8 +432,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // 在 dev 命令执行之前，是否关闭源码构建
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -473,8 +467,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // 在 dev 命令执行之前，是否关闭源码构建
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },

package/docs/zh/guide/advance/in-depth-about-dev-command.md

@@ -15,14 +15,6 @@ sidebar_position: 2
 
 我们除了可以执行 `dev` 命令以外，也可以通过 `dev [调试工具名称]` 的方式来直接启动调试工具或者任务。
 
-在执行 `dev` 命令的时候，调试工具可以选择是否在启动之前执行代码构建的监听模式，例如 Storybook 调试工具就开启了该功能。
-
-## Storybook
-
-Storybook 是目前模块工程官方提供的 Module Tools 调试工具插件。
-
-上面我们说到 Storybook 在启动之前会执行监听模式的源码构建任务，因此在终端里你会看到 Storybook 和源码构建的日志信息同时出现。并且在更新源码后会触发构建产物的变化，当构建产物变化的时候也会触发 Storybook 热更新。
-
 ## 扩展 dev 命令
 
 如果需要扩展 dev 命令或者说提供自己的 Module Tools 调试工具插件，那么你需要先了解以下内容：

package/docs/zh/guide/basic/command-preview.md

@@ -33,7 +33,7 @@ Options:
 除了以上，模块工程还支持 `platform` 构建模式，可以用于执行其他工具的构建任务。例如，目前官方支持在安装了 `@modern-js/plugin-storybook` 插件后，可以通过执行 `modern build --platform` 或者 `modern build --platform storybook` 命令启动 Storybook 构建任务生成 Storybook 产物。
 
 :::tip{title=注意}
-在执行 Storybook 构建的时候，它可能需要读取项目的构建产物。因此**在执行 `modern build --platform` 命令启动 Storybook 构建的时候，会自动先执行 `modern build --watch` 程序确保源码构建产物的存在**。
+在执行 Storybook 构建的时候，如果需要读取项目的构建产物。那么**在执行 `modern build --platform` 命令启动 Storybook 构建之前，不要忘记先执行 `modern build` 命令确保项目构建产物的存在**。
 :::
 
 ## `modern new`

package/docs/zh/guide/basic/using-storybook.mdx

@@ -28,7 +28,7 @@ sidebar_position: 5
 - 引用项目产物
 - 引用项目源码
 
-我们更推荐使用第一种“**引用项目产物**”的方式。因为它更接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。
+我们推荐使用第一种“**引用项目产物**”的方式。因为它更接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。不过我们也可以在测试项目功能的时候引用源码，在验证项目产物的时候引用项目的包名。
 
 接下来我们分别讲一下这两种方式具体如何使用。
 
@@ -90,7 +90,7 @@ export const content = 'hello world';
 
 ---
 
-最后在 Story 代码中直接以项目名称的方式引用。
+在 Story 代码中直接以项目名称的方式引用。
 
 ```tsx stories/index.stories.tsx focus=1:1
 import { content } from 'foo';
@@ -104,6 +104,26 @@ export default {
 };
 ```
 
+---
+
+最后在执行命令的时候，先启动监听模式的源码构建，然后启动 Storybook 调试。
+
+<CH.Code>
+
+``` bash terminal-1
+## 源码构建
+modern build --watch
+```
+
+---
+
+``` bash terminal-2
+## Storybook 调试
+modern dev storybook
+```
+
+</CH.Code>
+
 </CH.Spotlight>
 
 :::info
@@ -129,8 +149,8 @@ export default {
 
 那么为什么可以直接引用产物呢？
 
-1. 在执行 `modern dev storybook` 命令之前，会自动执行 `modern build` 命令，保证项目构建产物的存在。
-2. 在 Storybook 内部增加了针对 `tsconfig.json` 文件或者以项目名称作为别名的处理，保证能够**根据 `package.json` 解析出项目的产物路径**。
+1. 在执行 `modern dev storybook` 命令之前，执行 `modern build --watch` 命令，保证项目构建产物的存在。
+2. 在 Storybook 内部增加了根据 `tsconfig.json` 文件的 `compilerOptions.paths` 配置或者（在 JS 项目中）直接以项目名称作为别名的处理逻辑，保证能够**根据 `package.json` 解析出项目的产物路径**。
 
 ### 引用组件源码
 
@@ -148,11 +168,14 @@ export default {
 };
 ```
 
-那么为什么不推荐使用源码的方式呢？
 
+:::tip{title='为什么不推荐使用源码的方式?'}
 不仅仅是因为使用组件源码无法验证组件产物是否正确，**同时模块工程对于构建产物支持的一些配置无法完全转换为 Storybook
 内部的配置**。如果某些配置无法进行相互转换的话，就会在 Storybook 调试过程中出现不符合预期的结果。
 
+Module Tools 是基于 Esbuild 实现的，而 Storybook 是基于 Webpack 实现的。Esbuild 的配置无法与 Webpack 完全兼容。
+:::
+
 ## 配置 Storybook
 
 Storybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配置，其中包含各种配置文件。**在模块工程方案中，可以在项目的 `config/storybook` 目录下增加 Storybook 配置文件。**

package/docs/zh/index.md

@@ -4,27 +4,33 @@ pageType: home
 hero:
   name: Module Tools
   text: 模块工程解决方案
-  tagline: 简单、强大、高性能的现代化npm包开发方案
+  tagline: 简单、强大、高性能的现代化 npm 包开发方案
   actions:
     - theme: brand
       text: 欢迎使用
       link: /guide/intro/welcome
+    - theme: alt
+      text: 快速上手
+      link: /guide/intro/getting-started
 
 features:
-  - title: 'Esbuild: 高性能的JS Bundler'
+  - title: 'Esbuild: 高性能的 JS Bundler'
     details: 基于 Esbuild 构建，构建速度极快，带给你极致的开发体验。
     icon: 🚀
-  - title: 'Storybook: 社区流行的UI开发工具'
-    details: 集成了Storybook，你可以使用它调试UI。
-    icon: 📦
-  - title: 'transform + bundle'
-    details: 支持bundle和bundleless两种构建模式。
+  - title: '双构建模式'
+    details: 支持 Bundle 和 Bundleless 两种构建模式。
     icon: ✨
-  - title: '零配置'
-    details: 无需任何配置即可开发你的npm包，内置预设覆盖多种场景。
+  - title: '开箱即用'
+    details: 无需过多配置即可开发你的 npm 包，内置预设覆盖多种场景。
     icon: 🛠️
   - title: '扩展性强: 提供强大的插件机制'
-    details: 通过其插件扩展机制，你可以轻松的扩展Module tools的各项能力。
+    details: 通过其插件扩展机制，你可以轻松的扩展 Module tools 的各项能力。
     icon: 🎨
+  - title: 'Storybook: 社区流行的 UI 开发工具'
+    details: 集成了 Storybook，你可以使用它调试 UI。
+    icon: 📦
+  - title: 'Jest: 令人愉快的测试框架'
+    details: 集成了 Jest，使得代码测试更加容易。
+    icon: 📐
 ---
 # index

package/docs/zh/plugins/guide/getting-started.mdx

@@ -44,7 +44,7 @@ export const ExamplePlugin = (): CliPlugin<ModuleTools> => {
           console.info('build over');
         }
       };
-    };
+    },
   };
 };
 ```

package/modern.config.ts

@@ -6,8 +6,6 @@ import { pluginAutoSidebar } from '@modern-js/doc-plugin-auto-sidebar';
 const theme = require('shiki/themes/nord.json');
 const { version } = require('./package.json');
 
-const isDevCommand = process.env.NODE_ENV !== 'production';
-
 function getI18nHelper(lang: 'zh' | 'en') {
   const cn = lang === 'zh';
   const prefix = cn ? '' : '/en';
@@ -116,10 +114,10 @@ export default defineConfig({
         },
       ],
     },
-  },
-  builderConfig: {
-    dev: {
-      startUrl: 'http://localhost:<port>/module-tools/',
+    builderConfig: {
+      dev: {
+        startUrl: 'http://localhost:<port>/module-tools/',
+      },
     },
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modern-js/module-tools-docs",
-  "version": "2.2.1-beta.1",
+  "version": "2.3.0",
   "description": "docs",
   "main": "index.js",
   "keywords": [],
@@ -11,11 +11,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shiki": "^0.11.1",
-    "@modern-js/doc-tools": "2.2.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.2.0"
+    "@modern-js/doc-tools": "2.3.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.3.0"
   },
   "scripts": {
     "dev": "modern dev",
-    "build": "modern build"
+    "build:doc": "modern build"
   }
 }

package/doc_build/html/main/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!--<?- HEAD ?>-->
-<script defer src="/static/js/builder-runtime.js"></script><script defer src="/static/js/lib-react.js"></script><script defer src="/static/js/lib-lodash.js"></script><script defer src="/static/js/lib-polyfill.js"></script><script defer src="/static/js/vendors-node_modules_pnpm_remix-run_router_1_2_0_node_modules_remix-run_router_dist_router_js-9d5e9c.js"></script><script defer src="/static/js/main.js"></script><link href="/static/css/vendors-node_modules_pnpm_remix-run_router_1_2_0_node_modules_remix-run_router_dist_router_js-9d5e9c.css" rel="stylesheet"><link href="/static/css/main.css" rel="stylesheet"></head>
-
-<body>
-  <div id="root"><!--<?- DOC_CONTENT ?>--></div>
-
-</body>
-
-</html>

package/doc_build/route.json

@@ -1,10 +0,0 @@
-{
-  "routes": [
-    {
-      "urlPath": "/",
-      "entryName": "main",
-      "entryPath": "html/main/index.html",
-      "isSPA": true
-    }
-  ]
-}