@modern-js/module-tools-docs 2.0.1 → 2.0.3-beta.0

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

@@ -6,8 +6,8 @@ sidebar_position: 5
 
 首先如果没有看过以下内容的话，可以先花几分钟先了解一下：
 
-- [使用微生成器开启 Storybook 调试](/zh/guide/use-micro-generator#storybook-调试)
-- [`modern dev`](/zh/guide/command-preview#modern-dev)
+- [使用微生成器开启 Storybook 调试](/guide/basic/use-micro-generator#storybook-调试)
+- [`modern dev`](/guide/basic/command-preview#modern-dev)
 
 [Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具，围绕着组件开发提供了：
 
@@ -19,7 +19,7 @@ sidebar_position: 5
 
 因此它是一个复杂且功能强大的工具。
 
-模块工程解决方案集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下：
+模块工程解决方案集成了 Storybook ,因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下：
 
 ## 调试代码
 
@@ -72,17 +72,18 @@ export const content = 'hello world';
 确保在 `stories/tsconfig.json` 中设置了指向项目根目录的 `paths` 配置。
 `paths` 的 `key` 与项目名称相同。
 
-```json stories/tsconfig.json focus=7:9
+```json stories/tsconfig.json focus=5:7
 {
   "extends": "../tsconfig.json",
-  "include": ["./"],
   "compilerOptions": {
-    "jsx": "preserve",
-    "baseUrl": ".",
+    "baseUrl": "../",
     "paths": {
-      "foo": ["../"]
+      "foo": ["."]
     }
-  }
+  },
+  "include": [
+    "**/*"
+  ]
 }
 ```
 
@@ -151,8 +152,6 @@ export default {
 
 ## 配置 Storybook
 
-### 配置文件
-
 Storybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配置，其中包含各种配置文件。**在模块工程方案中，可以在项目的 `config/storybook` 目录下增加 Storybook 配置文件。**
 
 关于 Storybook 各种配置文件的使用方式，可以查看下面的链接：
@@ -166,15 +165,8 @@ Storybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配
 
 在未来我们会考虑这些配置是否可以允许修改，不过目前为了减少不可预知的问题暂时限制使用这些配置。
 
-### `dev.storybook`
-
-除了配置文件以外，模块工程方案还在 `modern.config.(j|t)s` 项目配置文件里提供了 `dev.storybook` 配置项。
-
-目前可以通过该配置对 Storybook 的 webpack 配置进行修改。
-
-- [`dev.storybook.webpack`](xxx)
 
-### 构建 Storybook 产物
+## 构建 Storybook 产物
 
 除了可以对组件或者普通的模块进行 Storybook 调试，还可以通过下面的命令来执行 Storybook 的构建任务。
 
@@ -184,6 +176,6 @@ modern build --platform storybook
 
 关于 `modern build --platform` 命令可以查看：
 
-- [`modern build`](/zh/guide/command-preview#modern-build)
+- [`modern build`](/guide/basic/command-preview#modern-build)
 
 构建完成后，可以在 `dist/storybook-static` 目录看到构建产物文件。

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

@@ -609,7 +609,7 @@ Tailwind CSS 提供了 [`@apply`](https://v2.tailwindcss.com/docs/functions-and-
 
 对于以下代码，在 bundle 和 bundleless 两种模式下，构建产物会有很大区别。
 
-> 所谓 bundle 和 bundleless 可以查看 [【Bundle 和 Bundleless】](/zh/guide/advance/in-depth-about-build#bundle-和-bundleless)
+> 所谓 bundle 和 bundleless 可以查看 [【Bundle 和 Bundleless】](/guide/advance/in-depth-about-build#bundle-和-bundleless)
 
 ```tsx ./src/index.tsx
 import 'tailwindcss/utilities.css';
@@ -623,7 +623,7 @@ Bundle 模式下，会将第三方依赖打包进来。
 
 对于样式则会生成一份单独的产物文件，并且在 Js 产物文件中并不会存在导入样式的相关代码。
 
-如果需要将样式注入 Js 产物中，可以开启 [`style.inject` API](/zh/api/build-config#inject)。
+如果需要将样式注入 Js 产物中，可以开启 [`style.inject` API](/api/config/build-config#inject)。
 
 <CH.Code>
 ```css ./dist/es/index.css
@@ -732,8 +732,8 @@ export { src_default as default };
 
 如果需要对 CSS Modules 进行配置，可以查看一下 API：
 
-- [autoModules](zh/api/build-config#automodules)
-- [modules](/zh/api/build-config#modules)
+- [autoModules](/api/config/build-config#automodules)
+- [modules](/api/config/build-config#modules)
 
 下面是一个代码示例：
 
@@ -771,7 +771,7 @@ export default () => {
 - `./dist/lib`: 包含了支持 es6 语法的 CommonJS 格式的 bundleless 产物。
 - `./dist/types`: 包含了类型文件。
 
-如果对使用语法支持有要求，可以手动配置 [`buildPreset`](/zh/api/build-preset)，并且支持在 `npm-component` 基础上增加后缀的方式修改支持的语法：
+如果对使用语法支持有要求，可以手动配置 [`buildPreset`](/api/config/build-preset)，并且支持在 `npm-component` 基础上增加后缀的方式修改支持的语法：
 
 ```tsx
 export default defineConfig({
@@ -779,15 +779,15 @@ export default defineConfig({
 });
 ```
 
-如果对构建产物目录结构有特殊需求，则可以使用 [`buildConfig` API](/zh/api/build-config)，可以通过以下文档来了解使用方式：
+如果对构建产物目录结构有特殊需求，则可以使用 [`buildConfig` API](/api/config/build-config)，可以通过以下文档来了解使用方式：
 
-- [修改输出产物](/zh/guide/basic/modify-output-product#构建配置对象)
-- [深入理解构建](/zh/guide/advance/in-depth-about-build)
+- [修改输出产物](/guide/basic/modify-output-product#构建配置对象)
+- [深入理解构建](/guide/advance/in-depth-about-build)
 
 ## 测试组件
 
-关于如何对组件进行测试，可以参考 [【测试项目】](/zh/guide/basic/test-your-project)。
+关于如何对组件进行测试，可以参考 [【测试项目】](/guide/basic/test-your-project)。
 
 ## 发布组件
 
-推荐使用模块工程提供版本发布功能，可以参考 [【版本管理与发布】](/zh/guide/basic/publish-your-project)。
+推荐使用模块工程提供版本发布功能，可以参考 [【版本管理与发布】](/guide/basic/publish-your-project)。

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

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 ## 三分钟快速上手
 
-想要实际体验 Module Tools？首先需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.17.6**。
+想要实际体验 Module Tools？首先需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。
 
 然后在你的项目里安装以下依赖：
 
@@ -79,6 +79,6 @@ npx @modern-js/create your-project-dir-name
 
 选择适合你的教程：
 
-- 我是初学者，需要学习 Module Tools 的[基础使用](/zh/guide/before-getting-started)。
-- 我已经初步掌握了 Module Tools 的使用，可以学习 Module Tools 的[高级使用](/zh/guide/before-getting-started)。
+- 我是初学者，需要学习 Module Tools 的[基础使用](/guide/basic/before-getting-started)。
+- 我已经初步掌握了 Module Tools 的使用，可以学习 Module Tools 的[高级使用](/guide/basic/before-getting-started)。
 - 我是项目的维护者，需要学习如何开发 Module Tools 的插件以及了解更多关于 Module Tools 进阶的内容。

package/docs/zh/index.md

@@ -2,7 +2,7 @@
 pageType: home
 
 hero:
-  name: Modern.js tools
+  name: Module Tools
   text: 模块工程解决方案
   tagline: 简单、强大、高性能的现代化npm包开发方案
   actions:

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

@@ -51,12 +51,12 @@ export const ExamplePlugin = (): CliPlugin<ModuleTools> => {
 
 ---
 
-然后我们通过 [`plugins`](/zh/api/plugins) API，将刚刚写好的插件进行注册。
+然后我们通过 [`plugins`](/api/config/plugins) API，将刚刚写好的插件进行注册。
 
 ```ts ./modern.config.ts
-import { ExamplePlugin } from './plugins/example';
+import { examplePlugin } from './plugins/example';
 export default defineConfig({
-  plugins: [ExamplePlugin()],
+  plugins: [examplePlugin()],
 });
 ```
 
@@ -80,5 +80,5 @@ build over
 
 除了以上内容以外，我们还需要了解：
 
-- [插件对象、类型定义与推荐配置项](/zh/plugins/guide/plugin-object)
-- [setup 函数、`api` 对象参数、生命周期钩子](/zh/plugins/guide/setup-function)
+- [插件对象、类型定义与推荐配置项](/plugins/guide/plugin-object)
+- [setup 函数、`api` 对象参数、生命周期钩子](/plugins/guide/setup-function)

package/docs/zh/plugins/guide/plugin-object.mdx

@@ -16,7 +16,7 @@ Module-tools 插件是一个对象，对象包含以下属性：
 ```ts ./plugins/demo.tsx
 import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';
 
-const MyPlugin: CliPlugin<ModuleTools> = {
+const myPlugin: CliPlugin<ModuleTools> = {
   name: 'my-plugin',
 
   setup() {
@@ -33,9 +33,9 @@ const MyPlugin: CliPlugin<ModuleTools> = {
 ---
 
 ```ts ./modern.config.ts
-import { MyPlugin } from './plugins/demo';
+import { myPlugin } from './plugins/demo';
 export default {
-  plugins: [MyPlugin()],
+  plugins: [myPlugin()],
 };
 ```
 
@@ -48,7 +48,7 @@ export default {
 ```ts
 import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';
 
-const MyPlugin: CliPlugin<ModuleTools> = {
+const myPlugin: CliPlugin<ModuleTools> = {
   name: 'my-plugin',
 
   setup() {
@@ -75,7 +75,7 @@ type MyPluginOptions = {
   foo: string;
 };
 
-const MyPlugin = (options: MyPluginOptions): CliPlugin<ModuleTools> => ({
+const myPlugin = (options: MyPluginOptions): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {

package/docs/zh/plugins/guide/setup-function.mdx

@@ -4,7 +4,7 @@ sidebar_position: 3
 
 # Setup 函数
 
-在[【插件对象】](/zh/plugins/guide/plugin-object) 部分我们知道插件对象包含了一个 `setup` 函数，该函数不仅包含了一个 `api` 对象参数，同时还可以返回一个 Hooks 对象。
+在[【插件对象】](/plugins/guide/plugin-object) 部分我们知道插件对象包含了一个 `setup` 函数，该函数不仅包含了一个 `api` 对象参数，同时还可以返回一个 Hooks 对象。
 
 ## 插件 API 对象
 
@@ -114,4 +114,4 @@ export default (): CliPlugin<ModuleTools> => ({
 - `buildPlatform` 钩子：仅在执行 `build --platform` 命令生成其他构建产物时触发。
 - 调试钩子：运行 `dev` 命令时会触发的钩子。
 
-关于生命周期钩子的完整列表参考 [API 文档](/zh/api/plugin-hooks)。
+关于生命周期钩子的完整列表参考 [API 文档](/api/plugin-api/plugin-hooks)。

package/modern.config.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import { defineConfig } from '@modern-js/doc-tools';
+import docTools, { defineConfig, NavItem } from '@modern-js/doc-tools';
 import { remarkCodeHike } from '@code-hike/mdx';
 import { pluginAutoSidebar } from '@modern-js/doc-plugin-auto-sidebar';
 
@@ -16,7 +16,7 @@ function getI18nHelper(lang: 'zh' | 'en') {
   return { getText, getLink };
 }
 
-function getNavbar(lang: 'zh' | 'en') {
+function getNavbar(lang: 'zh' | 'en'): NavItem[] {
   const { getLink, getText } = getI18nHelper(lang);
 
   return [
@@ -52,12 +52,13 @@ function getNavbar(lang: 'zh' | 'en') {
 }
 
 export default defineConfig({
-  plugins: ['@modern-js/doc-tools'],
+  plugins: [docTools()],
   doc: {
     root: path.join(__dirname, 'docs'),
     lang: 'zh',
-    base: isDevCommand ? '' : '/module-tools/',
-    title: 'Module tools',
+    base: '/module-tools/',
+    title: 'Module Tools',
+    icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png',
     // The plugins for doc tools.
     plugins: [
       pluginAutoSidebar({
@@ -71,6 +72,7 @@ export default defineConfig({
       }),
     ],
     markdown: {
+      checkDeadLinks: true,
       remarkPlugins: [
         [
           remarkCodeHike,
@@ -84,7 +86,7 @@ export default defineConfig({
     },
     themeConfig: {
       footer: {
-        message: 'Copyright © 2022 ByteDance.',
+        message: 'Copyright © 2023 ByteDance.',
       },
       socialLinks: [
         {
@@ -99,7 +101,7 @@ export default defineConfig({
           lang: 'zh',
           label: '简体中文',
           nav: getNavbar('zh'),
-          title: 'Module tools',
+          title: 'Module Tools',
           outlineTitle: '目录',
           prevPageText: '上一页',
           nextPageText: '下一页',
@@ -109,10 +111,15 @@ export default defineConfig({
           lang: 'en',
           label: 'English',
           nav: getNavbar('en'),
-          title: 'Module tools',
+          title: 'Module Tools',
           description: 'Module Engineering Solutions',
         },
       ],
     },
   },
+  builderConfig: {
+    dev: {
+      startUrl: 'http://localhost:<port>/module-tools/',
+    },
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modern-js/module-tools-docs",
-  "version": "2.0.1",
+  "version": "2.0.3-beta.0",
   "description": "docs",
   "main": "index.js",
   "keywords": [],
@@ -8,11 +8,11 @@
   "license": "ISC",
   "dependencies": {
     "@code-hike/mdx": "^0.7.4",
+    "@modern-js/doc-plugin-auto-sidebar": "2.1.0",
+    "@modern-js/doc-tools": "2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "shiki": "^0.11.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.0.1",
-    "@modern-js/doc-tools": "2.0.1"
+    "shiki": "^0.11.1"
   },
   "scripts": {
     "dev": "modern dev",