@modern-js/main-doc 2.58.2 → 2.59.0

package/docs/zh/guides/concept/entries.mdx

@@ -10,13 +10,13 @@ sidebar_position: 1
 
 **入口（Entry）指的是一个页面的起始模块。**
 
-在 Modern.js 项目中，每一个入口对应一个独立的页面，也对应一条服务端路由。默认情况下，Modern.js 会基于目录约定来自动确定页面的入口，同时也支持通过配置项来自定义入口。
+在 Modern.js 应用中，每一个入口对应一个独立的页面，也对应一条服务端路由。默认情况下，Modern.js 会基于目录约定来自动确定页面的入口，同时也支持通过配置项来自定义入口。
 
 Modern.js 提供的很多配置项都是以入口为维度进行划分的，比如页面标题、HTML 模板、页面 Meta 信息、是否开启 SSR/SSG、服务端路由规则等。
 
 ## 单入口与多入口
 
-Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
+Modern.js 初始化的应用是单入口的，应用结构如下：
 
 ```
 .
@@ -30,7 +30,7 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
 └── tsconfig.json
 ```
 
-在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new`，根据提示创建入口即可：
+在 Modern.js 应用中，你可以很方便的将单入口切换成多入口。在应用目录下执行 `pnpm run new`，根据提示即可创建入口：
 
 ```bash
 ? 请选择你想要的操作 创建工程元素
@@ -56,13 +56,12 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
 
 原本的入口代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了 `new-entry` 入口目录。
 
-你可以执行 `pnpm run dev` 启动开发服务，此时可以看到新增了一条名为 `/new-entry` 的路由，并且原有页面的路由并未发生变化。
-
-:::tip
-Modern.js 会将与 `package.json` 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
+Modern.js 会将与 `package.json` 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。比如，`package.json` 中的 `name` 为 `myapp` 时，`src/myapp` 会作为应用的主入口。
 
-比如，`package.json` 中的 `name` 为 `myapp` 时，`src/myapp` 会作为项目的主入口。
+你可以执行 `pnpm run dev` 启动开发服务，此时可以看到新增了一条名为 `/new-entry` 的路由，并且原有页面的路由并未发生变化。
 
+:::note
+**单入口/多入口** 和 **SPA/MPA** 的概念并不等价。前者是关于如何配置和打包应用，而后者是组织前端应用的模式，每个入口都可以是 SPA 或非 SPA 的。
 :::
 
 ## 入口类型
@@ -73,39 +72,32 @@ import EntryMode from '@site-docs/components/entry-mode.mdx';
 
 <EntryMode />
 
-默认情况下，Modern.js 启动项目前会对 `src/` 下的文件进行扫描，识别入口，并生成对应的服务端路由。
+默认情况下，Modern.js 启动应用前会对 `src/` 下的文件进行扫描，识别入口，并生成对应的服务端路由。
 
 :::tip
-- 你可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改页面入口的识别目录。
-- 如果你需要自定义入口，请参考 [自定义入口](#自定义入口)。
-
+你可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改识别入口的目录。
 :::
 
-并非 `src/` 下所有的一级目录都会成为项目入口, 入口所在目录必须满足以下五个条件之一：
+入口所在目录必须满足以下三个条件之一：
 
 1. 具有 `routes/` 目录。
 2. 具有 `App.[jt]sx?` 文件。
-3. 具有 `entry.[jt]sx?` 文件 (需要开启 `source.enableCustomEntry` 使用)。
-4. 具有 `index.[jt]sx?` 文件（即将废弃）。
-5. 具有 `pages/` 目录（兼容 Modern.js 1.0）(即将废弃)。
+3. 具有 `entry.[jt]sx?` 文件（需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry) 使用）。
 
 
-当 `src/` 目录满足入口特征时，Modern.js 会认为当前项目为单入口应用。
+当 `src/` 目录满足入口特征时，Modern.js 会认为当前应用为单入口应用。否则，Modern.js 会扫描 `src/` 下的一级目录，并进一步判断是否为入口，此时应用通常为多入口应用。
 
 :::tip
 在单入口应用中，默认的入口名为 `main`。
-
 :::
 
-当项目不是单入口应用时，Modern.js 会进一步查看 `src/` 下的一级目录。
-
 ### 框架模式入口
 
-框架模式指的是需要使用 Modern.js 的框架能力，例如嵌套路由、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/[entryName]/index.js` 找到真正的入口。
+框架模式指的是需要使用 Modern.js 的框架能力，例如约定式路由、SSR、一体化调用等。这类入口约定下，应用中的入口并不是真正的编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/[entryName]/index.js` 找到真正的入口。
 
 #### 约定式路由
 
-如果入口中存在 `routes/` 目录，Modern.js 会在启动时扫描 `routes/` 下的文件，基于文件约定，自动生成客户端路由（react-router）。例如：
+如果入口中存在 `routes/` 目录，我们称该入口为约定式路由。Modern.js 会在启动时扫描 `routes/` 下的文件，基于文件约定，自动生成客户端路由（react-router）。例如：
 
 ```bash
 .
@@ -121,9 +113,18 @@ import EntryMode from '@site-docs/components/entry-mode.mdx';
 
 #### 自控式路由
 
-如果入口中存在 `App.[jt]sx?` 文件，开发者可以在这个文件中通过代码的方式，设置客户端路由，或者不设置客户端路由。
+如果入口中存在 `App.[jt]sx?` 文件，我们称为该入口为自控式路由。例如：
 
-```tsx
+```bash
+.
+├── src
+│   └── App.tsx
+```
+
+
+以 `src/App.tsx` 为约定的入口，Modern.js 不会对路由做额外的操作，开发者可以使用 [React Router 6](https://reactrouter.com/en/main) 的 API 设置客户端路由，或不设置客户端路由。例如以下代码，在应用中自行设置了客户端路由：
+
+```tsx title="src/App.tsx"
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
 
 export default () => {
@@ -138,16 +139,20 @@ export default () => {
 };
 ```
 
-详细内容可以参考[路由方案](/guides/basic-features/routes#自控式路由)。
+:::note
+我们推荐开发者使用约定式路由，Modern.js 默认对约定式路由做了一系列资源加载及渲染上的优化，并且提供了开箱即用的 SSR 能力。而在使用自控路由时，这些能力都需要开发者自行封装。
+:::
 
 #### 自定义入口
 
-如果入口中存在 `entry.[jt]sx` 文件，需要开发者在 `entry.[jt]sx` 文件中调用 `createRoot` 和 `render` 函数，完成项目入口逻辑。
-
 :::info
-使用该文件需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
+使用该功能需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
 :::
 
+默认情况下，使用约定式路由或自控式路由时，Modern.js 会自动完成渲染。如果你希望自定义这个行为，可以通过自定义入口文件的方式来实现。
+
+如果入口中存在 `entry.[jt]sx` 文件，则 Modern.js 不再控制应用的渲染流程，你可以在 `entry.[jt]sx` 文件中调用 `createRoot` 和 `render` 函数，完成应用入口逻辑。
+
 ```tsx
 import { createRoot } from '@modern-js/runtime/react';
 import { render } from '@modern-js/runtime/browser';
@@ -158,7 +163,7 @@ render(<ModernRoot />);
 
 ```
 
-比如在 render 执行前，需要做一些其他操作，可以这样实现：
+上述代码中，`createRoot` 函数返回的组件为 `routes/` 目录生成或 `App.tsx` 导出的组件，`render` 函数用于处理渲染与挂载组件。例如，你希望在渲染前执行某些异步任务，可以这样实现：
 
 ```tsx
 import { createRoot } from '@modern-js/runtime/react';
@@ -167,7 +172,7 @@ import { render } from '@modern-js/runtime/browser';
 const ModernRoot = createRoot();
 
 async function beforeRender() {
-   // todo
+   // some async request
 }
 
 beforeRender().then(() => {
@@ -175,34 +180,15 @@ beforeRender().then(() => {
 });
 ```
 
-#### 自定义 Bootstrap
-
-:::warning
-即将废弃，推荐使用自定义入口
-:::
-
-如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 `bootstrap` 函数作为入参传入，并用导出的函数替代默认的 `bootstrap`，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
-
-```tsx
-export default (App: React.ComponentType, bootstrap: () => void) => {
-  // do something before bootstrap...
-  initSomething().then(() => {
-    bootstrap();
-  });
-};
-```
-
 ### 构建模式入口
 
-构建模式指的是不使用 Modern.js 提供的 Runtime 能力，而是完全由开发者自行定义页面的入口。
-
-当入口目录中存在 `index.[jt]sx`(即将废弃) 并且没有通过 `export default` 导出函数或者入口目录存在 `entry.[jt]sx` 并且未安装 `@modern-js/runtime` 依赖时，对应文件就会被识别为 webpack 或 Rspack 的 entry 模块。
-
 :::info
-使用 `entry.[jt]sx` 文件需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
+使用该功能需要开启需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
 :::
 
-此时 Modern.js 不会自动生成入口代码，因此需要你自行将组件挂载到 DOM 节点上，例如:
+构建模式指的是不使用 Modern.js 提供的 Runtime 能力，只使用 Modern.js 构建能力的开发模式。当应用中未安装 `@modern-js/runtime` 依赖时，Modern.js 会认为当前应用所有的入口都是构建模式入口。
+
+此时，如果入口中存在 `entry.[jt]sx`，则该文件会被识别为 webpack 或 Rspack 的构建入口。此时，Modern.js 不会自动生成入口代码，你需要自行将组件挂载到 DOM 节点上，例如:
 
 ```js title=src/entry.tsx
 import React from 'react';
@@ -212,18 +198,21 @@ import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-这种方式等价于开启 Modern.js 的 [source.entries.disableMount](/configure/app/source/entries) 选项。当你使用这种方式时，**将无法使用 Modern.js 框架的运行时能力**，比如 `modern.config.js` 文件中的 `runtime` 配置将不会再生效。
+在构建模式入口中，**将无法使用 Modern.js 框架的运行时能力**，比如：
+- 约定式路由，即基于 `src/routes` 下文件的路由
+- 服务端渲染（SSR）
+- `modern.config.js` 文件中的 `runtime` 配置将不会再生效
 
-## 自定义入口配置
+## 在配置文件中指定入口
 
 在某些情况下，你可能需要自定义入口配置，而不是使用 Modern.js 提供的入口约定。
 
-比如你需要将一个非 Modern.js 项目迁移到 Modern.js，它并不是按照 Modern.js 的目录结构来搭建的。如果你要将它改成 Modern.js 约定的目录结构，可能会存在一定的迁移成本。这种情况下，你就可以使用自定义入口。
+比如你需要将一个非 Modern.js 应用迁移到 Modern.js，它并不是按照 Modern.js 的目录结构来搭建的。如果你要将它改成 Modern.js 约定的目录结构，会存在一定的迁移成本。这种情况下，你就可以使用自定义入口。
 
 Modern.js 提供了以下配置项，你可以在 [modern.config.ts](/configure/app/usage) 中配置它们：
 
 - [source.entries](/configure/app/source/entries)：用于设置自定义的入口对象。
-- [source.disableDefaultEntries](/configure/app/source/disable-default-entries)：用于关闭 Modern.js 默认的入口扫描行为。当你使用自定义入口时，项目的部分结构可能会恰巧命中 Modern.js 约定的目录结构，但你可能不希望 Modern.js 为你自动生成入口配置，开启该选项可以避免这个问题。
+- [source.disableDefaultEntries](/configure/app/source/disable-default-entries)：用于关闭 Modern.js 默认的入口扫描行为。当你使用自定义入口时，应用的部分结构可能会恰巧命中 Modern.js 约定的目录结构，但你可能不希望 Modern.js 为你自动生成入口配置，开启该选项可以避免这个问题。
 
 ### 示例
 
@@ -247,4 +236,37 @@ export default defineConfig({
 });
 ```
 
-注意，当你开启 `disableMount` 时，**将无法使用 Modern.js 框架的运行时能力**，比如 `modern.config.ts` 文件中的 `runtime` 配置将不会再生效。
+值得注意的是，默认情况下，Modern.js 认为通过配置指定的入口是**框架模式入口**，将自动生成真正的编译入口。如果你的应用是从 Webpack 或 Vite 等构建工具迁移到 Modern.js 框架时，你通常需要在入口配置中开启 `disableMount` 选项，此时 Modern.js 认为该入口是**构建模式入口**。
+
+
+## 弃用功能
+
+目前，如果入口所在的目录满足以下条件，也会成为应用入口。
+
+1. 具有 `index.[jt]sx?` 文件。
+2. 具有 `pages/` 目录。
+
+
+`pages/` 目录为 Modern.js 旧版本中的约定式路由，新版本中推荐使用 `routes/` 目录。
+
+`index.[jt]sx?` 在旧版本中支持应用自定义 Bootstrap 逻辑和构建模式入口，新版本中推荐使用 `entry.[jt]sx?` 代替。
+
+### 自定义 Bootstrap
+
+当入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 `bootstrap` 函数作为入参传入，并用导出的函数替代默认的 `bootstrap`，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
+
+```tsx
+export default (App: React.ComponentType, bootstrap: () => void) => {
+  // do something before bootstrap...
+  initSomething().then(() => {
+    bootstrap();
+  });
+};
+```
+
+### 构建模式入口
+
+当入口目录中存在 `index.[jt]sx`(即将废弃) 并且没有通过 `export default` 导出函数时，该入口也将被认为是构建模式入口。
+
+
+

package/docs/zh/guides/get-started/_meta.json

@@ -1,7 +1 @@
-[
-  "introduction",
-  "quick-start",
-  "upgrade",
-  "glossary",
-  "tech-stack"
-]
+["introduction", "quick-start", "upgrade", "glossary", "tech-stack"]

package/docs/zh/guides/get-started/introduction.mdx

@@ -50,10 +50,10 @@ Modern.js 能为开发者提供极致的**开发体验（Development Experience
 
 - 🚀 **Rust 构建**：提供双构建工具支持，轻松切换到 Rspack 构建工具，编译飞快。
 - 🪜 **渐进式**：使用最精简的模板创建项目，通过生成器逐步开启插件功能，定制解决方案。
-- 🏠 **一体化**：开发与生产环境 Web Server 唯一，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
+- 🏠 **一体化**：开发与生产环境 Web Server 逻辑一致，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
 - 📦 **开箱即用**：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
 - 🌏 **周边生态**：自研状态管理、微前端、模块打包等周边需求。
-- 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）等。
+- 🕸 **约定式路由**：使用基于文件约定的路由，帮助开发者快速搭建应用。
 
 ## 和其他框架的对比
 

package/docs/zh/guides/get-started/quick-start.mdx

@@ -58,7 +58,7 @@ export default defineConfig({
   },
   plugins: [
     appTools({
-      bundler: 'webpack', // Set to 'experimental-rspack' to enable rspack ⚡️🦀
+      bundler: 'rspack', // Set to 'webpack' to enable webpack
     }),
   ],
 });
@@ -74,7 +74,6 @@ export default defineConfig({
 - 集成 Modern.js Core，提供配置解析、插件加载等能力。
 - 集成 Modern.js Builder，提供构建能力。
 - 集成 Modern.js Server，提供开发和生产服务器相关能力。
-- 集成一些最为常用的插件，比如 `plugin-lint`、`plugin-data-loader` 等。
 
 `@modern-js/app-tools` 是基于 Modern.js 的插件体系实现的，本质上是一个插件，因此你需要在配置文件的 `plugins` 字段中注册 `appTools`：
 

package/docs/zh/guides/get-started/tech-stack.mdx

@@ -12,13 +12,13 @@ Modern.js 框架默认集成了一些社区中流行的库和开发工具。
 
 Modern.js 使用 [React 18](https://react.dev/) 来构建用户界面，同时也兼容 React 17。
 
-Modern.js 底层的 Rsbuild 支持构建 Vue 应用，如果你需要使用 Vue，可以参考[「Rsbuild - Vue」](https://rsbuild.dev/zh/guide/framework/vue3)。
+Modern.js 底层的 Rsbuild 支持构建 Vue 应用，如果你需要使用 Vue，可以参考 [Rsbuild - Vue](https://rsbuild.dev/zh/guide/framework/vue3)。
 
 ## 路由
 
 Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，同时也兼容 React Router 5。
 
-Modern.js 支持约定式路由、自控式路由或其他路由方案，请参考[「路由方案」](/guides/basic-features/routes) 进行选择。
+Modern.js 支持约定式路由、自控式路由或其他路由方案，请参考 [路由方案](/guides/basic-features/routes) 进行选择。
 
 ## 微前端
 
@@ -30,8 +30,6 @@ Modern.js 提供对 [Garfish](https://www.garfishjs.org/) 微前端框架开箱
 
 Modern.js 可以与社区中任意的状态管理库搭配使用，比如 [Redux](https://redux.js.org/)、[Jotai](https://jotai.org/)、[Zustand](https://docs.pmnd.rs/zustand)、[Valtio](https://valtio.pmnd.rs/) 等。
 
-Modern.js 也基于 Redux 封装了 Reduck 状态管理库，你可以参考 [「Reduck 状态管理」](/guides/topic-detail/model/quick-start)来使用。
-
 ## 包管理器
 
 Modern.js 可以与社区中任意的包管理器搭配使用，比如 [npm](https://www.npmjs.com/package/npm)、[yarn](https://classic.yarnpkg.com/lang/en/)、[pnpm](https://pnpm.io/) 或 [Bun](https://bun.sh/)。
@@ -42,7 +40,7 @@ Modern.js 可以与社区中任意的包管理器搭配使用，比如 [npm](htt
 
 Modern.js 使用 [Webpack 5](https://webpack.js.org/) 或 [Rspack](https://www.rspack.dev/) 来打包你的 Web 应用。
 
-默认使用的打包工具为 Webpack 5，你可以参考[「使用 Rspack」](/guides/advanced-features/rspack-start) 来切换到更快的 Rspack。
+默认使用的打包工具为 Webpack 5，你可以参考 [使用 Rspack](/guides/advanced-features/rspack-start) 来切换到更快的 Rspack。
 
 ## 转译工具
 
@@ -62,24 +60,24 @@ Modern.js 使用 [Babel](https://babeljs.io/)、[SWC](https://swc.rs/) 或 [esbu
 
 Modern.js 使用 [PostCSS](https://postcss.org/) 来转换 CSS 代码，并默认开启 [autoprefixer](https://github.com/postcss/autoprefixer) 来补全 CSS 前缀。
 
-Modern.js 支持[「启用 Tailwind CSS」](/guides/basic-features/css.html#使用-tailwind-css)，并同时兼容 Tailwind CSS v2 和 v3 版本。
+Modern.js 支持 [启用 Tailwind CSS](/guides/basic-features/css/tailwindcss)，并同时兼容 Tailwind CSS v2 和 v3 版本。
 
 ## CSS 预处理器
 
 Modern.js 支持 [Sass](https://sass-lang.com/)、[Less](https://lesscss.org/) 和 [Stylus](https://stylus-lang.com/) 三种 CSS 预处理器：
 
 - 默认支持 Sass 和 Less，开箱即用。
-- 可选支持 Stylus，请参考[「Stylus 插件」](https://rsbuild.dev/zh/plugins/list/plugin-stylus) 来使用。
+- 可选支持 Stylus，请参考 [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus) 来使用。
 
 ## CSS Modules
 
 Modern.js 对 [CSS Modules](https://github.com/css-modules/css-modules) 提供了开箱即用的支持，内部基于 [css-loader](https://www.npmjs.com/package/css-loader) 实现。
 
-请参考[「使用 CSS Modules」](/guides/basic-features/css-modules) 来使用。
+请参考 [使用 CSS Modules](/guides/basic-features/css/css-modules) 来使用。
 
 ## CSS-in-JS
 
-Modern.js 支持使用 [styled-components](https://styled-components.com/)，请参考[「使用 CSS-in-JS」](/guides/basic-features/css.html#使用-css-in-js) 来使用。
+Modern.js 支持使用 [styled-components](https://styled-components.com/)，请参考 [使用 CSS-in-JS](/guides/basic-features/css/css-in-js) 来使用。
 
 如果你需要使用其他 CSS-in-JS 方案，可以自行集成到你的项目中。
 
@@ -91,7 +89,7 @@ Modern.js 可以与社区中任意的 React 组件库搭配使用，比如 [MUI]
 
 ## 组件开发
 
-Modern.js 支持使用 [Storybook](https://storybook.js.org/) 来开发 UI 组件。该功能为可选功能，请参考[「使用 Storybook」](/guides/advanced-features/using-storybook) 启用。
+Modern.js 支持使用 [Storybook](https://storybook.js.org/) 来开发 UI 组件。该功能为可选功能，请参考 [使用 Storybook](/guides/basic-features/debug/using-storybook) 启用。
 
 ## Node.js 框架
 

package/docs/zh/guides/get-started/upgrade.mdx

@@ -38,9 +38,23 @@ import ReleaseNote from '@site-docs/components/release-note';
 
 :::tip
 当升级时，需要对 Modern.js 官方提供的所有包做统一升级，而不是升级单个依赖。
-
 :::
 
+## 版本管理策略
+
+在 Modern.js 项目中，我们推荐所有官方提供的依赖都使用固定版本号，不使用 `^` 或 `~` 进行范围声明。例如：
+
+```json
+{
+  "dependencies": {
+    "@modern-js/app-tools": "x.y.z"
+  }
+}
+```
+
+这样可以确保依赖的版本是完全确定的，从而保证构建的一致性和可预测性。
+
+
 ## 锁定子依赖
 
 当项目某个子依赖出现问题，而 Modern.js 无法立即更新时，可以使用包管理器锁定子依赖版本。

package/docs/zh/guides/topic-detail/framework-plugin/_meta.json

@@ -7,4 +7,4 @@
   "extend",
   "plugin-api",
   "hook-list"
-]
+]

package/docs/zh/guides/topic-detail/generator/_meta.json

@@ -14,4 +14,4 @@
     "name": "plugin",
     "label": "generator-plugin"
   }
-]
+]

package/docs/zh/guides/topic-detail/generator/create/_meta.json

@@ -1,5 +1 @@
-[
-  "use",
-  "option",
-  "config"
-]
+["use", "option", "config"]

package/docs/zh/guides/topic-detail/generator/create/config.mdx

@@ -41,16 +41,6 @@ import PackageManager from '@site-docs/components/package-manager';
 
 <PackageManager />
 
-### buildTools
-
-问题：请选择构建工具
-
-选项：
-
-- webpack -- webpack
-
-- Rspack -- rspack
-
 ## Npm 模块
 
 ### packageName

package/docs/zh/guides/topic-detail/generator/create/use.mdx

@@ -35,7 +35,6 @@ npx @modern-js/create@latest web-app
 ? 请选择你想创建的工程类型 Web 应用
 ? 请选择开发语言 TS
 ? 请选择包管理工具 pnpm
-? 请选择构建工具 webpack
 ```
 
 ### 创建 Npm 模块项目

package/docs/zh/guides/topic-detail/generator/new/_meta.json

@@ -1,5 +1 @@
-[
-  "use",
-  "option",
-  "config"
-]
+["use", "option", "config"]

package/docs/zh/guides/topic-detail/generator/plugin/_meta.json

@@ -8,4 +8,4 @@
     "name": "api",
     "label": "API"
   }
-]
+]

package/docs/zh/guides/troubleshooting/_meta.json

@@ -1,6 +1 @@
-[
-  "dependencies",
-  "cli",
-  "builder",
-  "hmr"
-]
+["dependencies", "cli", "builder", "hmr"]

package/docs/zh/tutorials/first-app/c03-css.mdx

@@ -293,7 +293,7 @@ import '../styles/utils.css';
 ```
 
 :::info
-Modern.js 集成了 [PostCSS](/guides/basic-features/css)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)。
+Modern.js 集成了 [PostCSS](/guides/basic-features/css/css)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)。
 
 :::
 

package/i18n.json

@@ -51,14 +51,26 @@
     "zh": "渲染",
     "en": "Rendering"
   },
+  "css-solution": {
+    "zh": "样式开发",
+    "en": "Styling"
+  },
+  "debug": {
+    "zh": "调试",
+    "en": "Debug"
+  },
+  "static-assets": {
+    "zh": "引用静态资源",
+    "en": "Import Static Assets"
+  },
+  "testing": {
+    "zh": "测试",
+    "en": "Testing"
+  },
   "use-bff": {
     "zh": "使用 BFF",
     "en": "Using BFF"
   },
-  "use-ssr": {
-    "zh": "服务端渲染",
-    "en": "SSR"
-  },
   "micro-frontend": {
     "zh": "微前端",
     "en": "Micro Frontend"

package/package.json

@@ -15,20 +15,20 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.58.2",
+  "version": "2.59.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.58.2"
+    "@modern-js/sandpack-react": "2.59.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.58.2"
+    "@modern-js/builder-doc": "^2.59.0"
   },
   "devDependencies": {
-    "@rspress/shared": "1.27.0",
+    "@rspress/shared": "1.28.2",
     "@types/fs-extra": "9.0.13",
     "@types/node": "^16",
     "classnames": "^2",
@@ -36,10 +36,10 @@
     "fs-extra": "^10",
     "react": "^18",
     "react-dom": "^18",
-    "rspress": "1.27.0",
+    "rspress": "1.28.2",
     "ts-node": "^10.9.1",
     "typescript": "^5",
-    "@modern-js/builder-doc": "2.58.2"
+    "@modern-js/builder-doc": "2.59.0"
   },
   "scripts": {
     "dev": "rspress dev",

package/rspress.config.ts

@@ -1,6 +1,6 @@
 import path from 'path';
-import { defineConfig } from 'rspress/config';
 import type { NavItem } from '@rspress/shared';
+import { defineConfig } from 'rspress/config';
 
 const { version } = require('./package.json');
 

package/src/components/ContentCard/index.tsx

@@ -1,5 +1,5 @@
-import type React from 'react';
 import cl from 'classnames';
+import type React from 'react';
 import { withBase } from 'rspress/runtime';
 import styles from './index.module.scss';
 

package/src/components/Sandpack/index.tsx

@@ -2,7 +2,7 @@ import ModernSandpack, {
   type ModernSandpackProps,
 } from '@modern-js/sandpack-react';
 import React, { type PropsWithChildren } from 'react';
-import { useDark, NoSSR } from 'rspress/runtime';
+import { NoSSR, useDark } from 'rspress/runtime';
 
 import './index.css';
 

package/src/components/ShowcaseList/index.tsx

@@ -1,5 +1,5 @@
-import { useShowcases } from './useShowcases';
 import styles from './index.module.scss';
+import { useShowcases } from './useShowcases';
 
 const getDomain = (url: string) => new URL(url).hostname;
 

package/src/i18n/index.ts

@@ -1,4 +1,4 @@
-import { withBase, useLang } from 'rspress/runtime';
+import { useLang, withBase } from 'rspress/runtime';
 import { EN_US } from './enUS';
 import { ZH_CN } from './zhCN';
 

package/src/pages/index.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/no-unescaped-entities */
 import clsx from 'clsx';
-import { useLang, Helmet, useLocation } from 'rspress/runtime';
 import { useEffect } from 'react';
+import { Helmet, useLang, useLocation } from 'rspress/runtime';
 import ContentCard from '../components/ContentCard';
-import SecondaryTitle from '../components/SecondaryTitle';
 import { FeatureLayout } from '../components/FeatureLayout';
 import Footer from '../components/Footer';
+import SecondaryTitle from '../components/SecondaryTitle';
 import { useI18n, useUrl } from '../i18n';
 import styles from './index.module.scss';
 

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

@@ -1,37 +0,0 @@
----
-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.
-
-Please refer to [Storybook Configuration](https://storybook.js.org/docs/react/configure/overview) for Storybook configuration.
-
-:::info
-Enabling the Storybook 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.