@modern-js/main-doc 2.57.1 → 2.58.1

package/docs/zh/guides/advanced-features/rsbuild-plugin.mdx

@@ -28,26 +28,26 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R
 
 以下是已在 Modern.js 中内置的 Rsbuild 官方插件，无需安装，即可启用：
 
-| 插件                                                                                   | 介绍                                                                                     | Modern.js 链接                                                                                                                        |
-| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| [React 插件](https://rsbuild.dev/zh/plugins/list/plugin-react)                         | 提供对 React 的支持                                                                      | -                                                                                                                                     |
-| [SVGR 插件](https://rsbuild.dev/zh/plugins/list/plugin-svgr)                           | 支持将 SVG 图片转换为一个 React 组件使用                                                 | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
-| [Styled Components 插件](https://rsbuild.dev/zh/plugins/list/plugin-styled-components) | 提供对 styled-components 的编译时支持                                                    | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
-| [Assets Retry 插件](https://rsbuild.dev/zh/plugins/list/plugin-assets-retry)           | 用于在静态资源加载失败时自动发起重试请求                                                 | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
-| [Type Check 插件](https://rsbuild.dev/zh/plugins/list/plugin-type-check)               | 用于在单独的进程中运行 TypeScript 类型检查                                               | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
-| [Node Polyfill 插件](https://rsbuild.dev/zh/plugins/list/plugin-node-polyfill)         | 用于注入 Node 核心模块在浏览器端的 polyfills                                             | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
-| [Source Build 插件](https://rsbuild.dev/zh/plugins/list/plugin-source-build)           | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                       | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
-| [Check Syntax 插件](https://rsbuild.dev/zh/plugins/list/plugin-check-syntax)           | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                           | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
-| [CSS Minimizer 插件](https://rsbuild.dev/zh/plugins/list/plugin-css-minimizer)         | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
-| [Pug 插件](https://rsbuild.dev/zh/plugins/list/plugin-pug)                             | 提供对 Pug 模板引擎的支持                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
-| [Rem 插件](https://rsbuild.dev/zh/plugins/list/plugin-rem)                             | 用于实现移动端页面的 rem 自适应布局                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML 插件](https://rsbuild.dev/zh/plugins/list/plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/json-files.html#toml-文件)                                                                         |
-| [TOML 插件](https://rsbuild.dev/zh/plugins/list/plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/json-files.html#yaml-文件)                                                                         |
+| 插件                                                                                         | 介绍                                                                                     | Modern.js 链接                                                                                                                        |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [React 插件](https://rsbuild.dev/zh/plugins/list/plugin-react)                               | 提供对 React 的支持                                                                      | -                                                                                                                                     |
+| [SVGR 插件](https://rsbuild.dev/zh/plugins/list/plugin-svgr)                                 | 支持将 SVG 图片转换为一个 React 组件使用                                                 | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [Styled Components 插件](https://github.com/rspack-contrib/rsbuild-plugin-styled-components) | 提供对 styled-components 的编译时支持                                                    | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
+| [Assets Retry 插件](https://rsbuild.dev/zh/plugins/list/plugin-assets-retry)                 | 用于在静态资源加载失败时自动发起重试请求                                                 | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Type Check 插件](https://rsbuild.dev/zh/plugins/list/plugin-type-check)                     | 用于在单独的进程中运行 TypeScript 类型检查                                               | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill)         | 用于注入 Node 核心模块在浏览器端的 polyfills                                             | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
+| [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build)           | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                       | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
+| [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)           | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                           | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
+| [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
+| [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | 提供对 Pug 模板引擎的支持                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
+| [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem)                             | 用于实现移动端页面的 rem 自适应布局                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
+| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/json-files.html#toml-文件)                                                                         |
+| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/json-files.html#yaml-文件)                                                                         |
 
 ### 未内置插件
 
 以下是未在 Modern.js 中内置的 Rsbuild 官方插件：
 
-- [Image Compress 插件](https://rsbuild.dev/zh/plugins/list/plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
+- [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
 - [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
-- [UMD 插件](https://rsbuild.dev/zh/plugins/list/plugin-umd)：用于构建 UMD 格式的产物。
+- [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd)：用于构建 UMD 格式的产物。

package/docs/zh/guides/advanced-features/ssr/_meta.json

@@ -0,0 +1,5 @@
+[
+  "usage",
+  "stream",
+  "cache"
+]

package/docs/zh/guides/basic-features/_meta.json

@@ -0,0 +1,22 @@
+[
+  "css",
+  "routes",
+  {
+    "type": "dir",
+    "name": "data",
+    "label": "data-solution",
+    "collapsed": true
+  },
+  "alias",
+  "mock",
+  "proxy",
+  "env-vars",
+  "html",
+  "output-files",
+  "static-assets",
+  "svg-assets",
+  "json-files",
+  "wasm-assets",
+  "css-modules",
+  "deploy"
+]

package/docs/zh/guides/basic-features/data/_meta.json

@@ -0,0 +1,4 @@
+[
+  "data-fetch",
+  "data-write"
+]

package/docs/zh/guides/basic-features/mock.mdx

@@ -80,7 +80,7 @@ module.exports = {
 
 ## 按需使用 Mock 服务
 
-`config/mock/index.ts` 下还可以到处 `config` 对象，更精细的控制 Mock 服务。
+`config/mock/index.ts` 下还可以导出 `config` 对象，更精细的控制 Mock 服务。
 
 ```ts
 type MockConfig = {

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

@@ -0,0 +1,4 @@
+[
+  "entries",
+  "builder"
+]

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

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

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

@@ -95,7 +95,7 @@ $ pnpm run build
 
 > modern build
 
-  Modern.js Framework v2.55.0
+  Modern.js Framework
 
 info    Starting production build...
 info    Type checker is enabled. It may take some time.
@@ -141,7 +141,7 @@ dist
 ```bash
 $ pnpm run serve
 
-  Modern.js Framework v2.55.0
+  Modern.js Framework
 
 info    Starting production server...
 

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

@@ -18,7 +18,7 @@ import { PackageManagerTabs } from '@theme';
 > modern upgrade
 
 [INFO] [项目类型]: Web 应用
-[INFO] [Modern.js 最新版本]: 2.0.0
+[INFO] [Modern.js 最新版本]: x.y.z
 [INFO] 已更新 Modern.js 依赖至最新版本!
 ```
 

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

@@ -0,0 +1,26 @@
+[
+  {
+    "type": "dir",
+    "name": "micro-frontend",
+    "label": "micro-frontend",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "framework-plugin",
+    "label": "framework-plugin",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "model",
+    "label": "reduck",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "generator",
+    "label": "generator",
+    "collapsed": true
+  }
+]

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

@@ -0,0 +1,10 @@
+[
+  "introduction",
+  "lifecycle",
+  "hook",
+  "implement",
+  "relationship",
+  "extend",
+  "plugin-api",
+  "hook-list"
+]

package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -680,14 +680,14 @@ export const myPlugin = (): ServerPlugin => ({
 
 :::
 
-Runtime 插件主要用于开发者修改需要渲染的组件。
+Runtime 插件主要用于开发者自定义应用渲染前行为和修改需要渲染的组件。
 
-### `init`
+### `beforeRender`
 
-- 功能：执行 `App.init`
+- 功能：在应用渲染之前增加行为
 - 执行阶段：渲染（SSR/CSR）
-- Hook 模型：`AsyncPipeline`
-- 类型：`AsyncPipeline<{ context: RuntimeContext; }, unknown>`
+- Hook 模型：`AsyncWorkflow`
+- 类型：`AsyncWorkflow<RuntimeContext， void>`
 - 使用示例：
 
 ```ts
@@ -696,27 +696,22 @@ import type { Plugin } from '@modern-js/runtime';
 export const myPlugin = (): Plugin => ({
   setup(api) {
     return {
-      init({ context }, next) {
+      beforeRender(context) {
         // do something
-        return next({ context });
       },
     };
   },
 });
 ```
 
-### `hoc`
+### `wrapRoot`
 
 - 功能：修改需要渲染的组件
 - 执行阶段：渲染（SSR/CSR）
-- Hook 模型：`Pipeline`
-- 类型：`Pipeline<{ App: React.ComponentType<any>;config: Record<string, any>; },React.ComponentType<any>>`
+- Hook 模型：`Waterfall`
+- 类型：`Waterfall<React.ComponentType<any>>`
 - 使用示例：
 
-:::note
-使用 hoc 钩子时，需要把原来的 App 组件的静态属性拷贝到新的组件上，并透传 props.
-:::
-
 ```ts
 import { createContext } from 'react';
 import type { Plugin } from '@modern-js/runtime';
@@ -725,7 +720,7 @@ export const myPlugin = (): Plugin => ({
   setup(api) {
     const FooContext = createContext('');
     return {
-      hoc({ App, config }, next) {
+      wrapRoot(App) {
         const AppWrapper = (props: any) => {
           return (
             <FooContext.Provider store={'test'}>
@@ -733,10 +728,7 @@ export const myPlugin = (): Plugin => ({
             </FooContext.Provider>
           );
         };
-        return next({
-          App: AppWrapper,
-          config
-        });
+        return AppWrapper
       },
     };
   },

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

@@ -0,0 +1,17 @@
+[
+  {
+    "type": "dir",
+    "name": "create",
+    "label": "@modern-js/create"
+  },
+  {
+    "type": "dir",
+    "name": "new",
+    "label": "new-command"
+  },
+  {
+    "type": "dir",
+    "name": "plugin",
+    "label": "generator-plugin"
+  }
+]

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

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

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

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

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

@@ -0,0 +1,11 @@
+[
+  "structure",
+  "category",
+  "use",
+  "context",
+  {
+    "type": "dir",
+    "name": "api",
+    "label": "API"
+  }
+]

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

@@ -0,0 +1,14 @@
+[
+  "quick-start",
+  "define-model",
+  "use-model",
+  "computed-state",
+  "manage-effects",
+  "auto-actions",
+  "model-communicate",
+  "performance",
+  "typescript-best-practice",
+  "redux-integration",
+  "use-out-of-modernjs",
+  "faq"
+]

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

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

package/docs/zh/guides/troubleshooting/dependencies.mdx

@@ -18,8 +18,8 @@ sidebar_position: 1
 
 ```
 project
-└─┬ @modern-js/app-tools@2.0.0
-  └── @modern-js/core@2.0.0
+└─┬ @modern-js/app-tools@x.y.z
+  └── @modern-js/core@x.y.z
 ```
 
 **pnpm**
@@ -30,8 +30,8 @@ project
 
 ```
 devDependencies:
-@modern-js/app-tools 2.0.0
-└── @modern-js/core 2.0.0
+@modern-js/app-tools x.y.z
+└── @modern-js/core x.y.z
 ```
 
 ---

package/docs/zh/tutorials/_meta.json

@@ -0,0 +1,17 @@
+[
+  {
+    "type": "dir",
+    "name": "foundations",
+    "label": "foundations"
+  },
+  {
+    "type": "dir",
+    "name": "first-app",
+    "label": "first-app"
+  },
+  {
+    "type": "dir",
+    "name": "examples",
+    "label": "examples"
+  }
+]

package/i18n.json

@@ -0,0 +1,110 @@
+{
+  "guide": {
+    "zh": "指南",
+    "en": "Guide"
+  },
+  "tutorials": {
+    "zh": "教程",
+    "en": "Tutorials"
+  },
+  "configure": {
+    "zh": "配置",
+    "en": "Config"
+  },
+  "apis": {
+    "zh": "API",
+    "en": "API"
+  },
+  "community": {
+    "zh": "社区",
+    "en": "Community"
+  },
+  "gettingStarted": {
+    "zh": "开始",
+    "en": "Start"
+  },
+  "concept": {
+    "zh": "核心概念",
+    "en": "Core Concept"
+  },
+  "basic": {
+    "zh": "基础功能",
+    "en": "Basic Features"
+  },
+  "advanced": {
+    "zh": "进阶功能",
+    "en": "Advanced Features"
+  },
+  "topic": {
+    "zh": "专题详解",
+    "en": "Topic Detail"
+  },
+  "troubleshooting": {
+    "zh": "常见问题",
+    "en": "FAQ"
+  },
+  "data-solution": {
+    "zh": "数据管理",
+    "en": "Data Solution"
+  },
+  "rendering": {
+    "zh": "渲染",
+    "en": "Rendering"
+  },
+  "use-bff": {
+    "zh": "使用 BFF",
+    "en": "Using BFF"
+  },
+  "use-ssr": {
+    "zh": "服务端渲染",
+    "en": "SSR"
+  },
+  "micro-frontend": {
+    "zh": "微前端",
+    "en": "Micro Frontend"
+  },
+  "framework-plugin": {
+    "zh": "框架插件",
+    "en": "Framework Plugin"
+  },
+  "reduck": {
+    "zh": "Reduck 状态管理",
+    "en": "Reduck State Manager"
+  },
+  "generator": {
+    "zh": "项目生成器",
+    "en": "Project Generator"
+  },
+  "new-command": {
+    "zh": "New 命令",
+    "en": "New Command"
+  },
+  "generator-plugin": {
+    "zh": "生成器插件",
+    "en": "Generator Plugin"
+  },
+  "examples": {
+    "zh": "示例",
+    "en": "Examples"
+  },
+  "first-app": {
+    "zh": "第一个应用",
+    "en": "First App"
+  },
+  "foundations": {
+    "zh": "基础",
+    "en": "Foundations"
+  },
+  "file-conventions": {
+    "zh": "文件约定",
+    "en": "File Conventions"
+  },
+  "runtime-api": {
+    "zh": "运行时",
+    "en": "Runtime"
+  },
+  "blog": {
+    "zh": "博客",
+    "en": "Blog"
+  }
+}

package/package.json

@@ -15,32 +15,31 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.57.1",
+  "version": "2.58.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.57.1"
+    "@modern-js/sandpack-react": "2.58.1"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.57.1"
+    "@modern-js/builder-doc": "^2.58.1"
   },
   "devDependencies": {
+    "@rspress/shared": "1.27.0",
+    "@types/fs-extra": "9.0.13",
+    "@types/node": "^16",
     "classnames": "^2",
     "clsx": "^1.2.1",
+    "fs-extra": "^10",
     "react": "^18",
     "react-dom": "^18",
+    "rspress": "1.27.0",
     "ts-node": "^10.9.1",
     "typescript": "^5",
-    "fs-extra": "^10",
-    "rspress": "1.26.1",
-    "@rspress/shared": "1.26.1",
-    "@types/node": "^16",
-    "@types/fs-extra": "9.0.13",
-    "@modern-js/builder-doc": "2.57.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.57.1"
+    "@modern-js/builder-doc": "2.58.1"
   },
   "scripts": {
     "dev": "rspress dev",

package/rspress.config.ts

@@ -1,15 +1,6 @@
 import path from 'path';
 import { defineConfig } from 'rspress/config';
 import { NavItem } from '@rspress/shared';
-import { pluginAutoSidebar } from '@modern-js/doc-plugin-auto-sidebar';
-
-const rootCategories = [
-  'tutorials',
-  'guides',
-  'apis/app',
-  'configure/app',
-  'community',
-];
 
 const { version } = require('./package.json');
 
@@ -104,7 +95,7 @@ export default defineConfig({
         title: 'Modern.js',
         description:
           'A Progressive React Framework for modern web development.',
-        nav: getNavbar('zh'),
+        // nav: getNavbar('zh'),
         label: '简体中文',
       },
       {
@@ -112,7 +103,7 @@ export default defineConfig({
         title: 'Modern.js',
         description:
           'A Progressive React Framework for modern web development.',
-        nav: getNavbar('en'),
+        // nav: getNavbar('en'),
         label: 'English',
       },
     ],
@@ -157,13 +148,5 @@ export default defineConfig({
         '@site': require('path').resolve(__dirname),
       },
     },
-  },
-  plugins: [
-    pluginAutoSidebar({
-      root: docPath,
-      categories: ['zh', 'en'].flatMap(lang =>
-        rootCategories.map(category => `${lang}/${category}`),
-      ),
-    }),
-  ],
+  }
 });

package/docs/en/apis/app/hooks/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "Convention",
-  "position": 2,
-  "collapsed": false
-}

package/docs/en/apis/app/hooks/api/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "api/",
-  "position": 2
-}

package/docs/en/apis/app/hooks/config/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "config/",
-  "position": 6
-}

package/docs/en/apis/app/hooks/server/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "server/",
-  "position": 3
-}

package/docs/en/apis/app/hooks/src/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "src/",
-  "position": 1
-}

package/docs/en/apis/app/runtime/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "runtime",
-  "position": 3,
-  "collapsed": false
-}

package/docs/en/apis/app/runtime/app/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "APP API",
-  "position": 4
-}

package/docs/en/apis/app/runtime/bff/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "BFF API",
-  "position": 8
-}

package/docs/en/apis/app/runtime/core/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "Core API",
-  "sidebar-labale": "111",
-  "position": 3
-}

package/docs/en/apis/app/runtime/model/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Model API",
-  "position": 6
-}

package/docs/en/apis/app/runtime/router/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Router API",
-  "position": 5
-}

package/docs/en/apis/app/runtime/ssr/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "SSR API",
-  "position": 7
-}

package/docs/en/apis/app/runtime/utility/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Utility API",
-  "position": 10
-}