@modern-js/main-doc 2.47.1 → 2.48.1

package/docs/en/apis/app/commands.mdx

@@ -146,7 +146,6 @@ $ npx modern new
   Enable SSG
   Enable Micro Frontend
   Enable Unit Test / Integration Test
-  Enable Visual Testing (Storybook)
 ```
 
 :::tip

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

@@ -10,8 +10,7 @@ Modern.js supports debugging using Storybook. When configuring Storybook, you ne
 Please refer to [Storybook Configuration](https://storybook.js.org/docs/react/configure/overview) for Storybook configuration.
 
 :::info
-Enabling the Visual Testing (Storybook) mode function requires running the new command to enable it under the project first.
-
+Enabling the Storybook function requires running the new command to enable it under the project first.
 :::
 
 #### Example

package/docs/en/apis/app/hooks/src/stories.mdx

@@ -11,7 +11,6 @@ You can create files in the `*.stories.(js|jsx|ts|tsx|mdx)` format in the projec
 Run the `npm run dev story` command in the project to use these files to debug relevant content in Storybook.
 
 :::info
-To use Storybook, you need to enable the "Visual Testing (Storybook)" mode by running the `new` command in the project first.
-
+To use Storybook, you need to enable the "Storybook" mode by running the `new` command in the project first.
 :::
 

package/docs/en/configure/app/output/filename-hash.mdx

@@ -0,0 +1,39 @@
+---
+sidebar_label: filenameHash
+---
+
+# output.filenameHash
+
+- **Type:** `boolean | string`
+- **Default:** `true`
+
+Whether to add a hash value to the filename after the production build.
+
+### Example
+
+By default, the filename of the output files will include a hash value:
+
+```bash
+dist/static/css/index.7879e19d.css
+dist/static/js/index.18a568e5.js
+```
+
+You can set `output.filenameHash` to false to disable this behavior:
+
+```js
+export default {
+  output: {
+    filenameHash: false,
+  },
+};
+```
+
+After rebuilding, the output filenames becomes:
+
+```bash
+dist/static/css/index.css
+dist/static/js/index.js
+```
+
+For detailed usage, please refer to [Rsbuild - output.filenameHash](https://rsbuild.dev/config/output/filename-hash).
+

package/docs/en/configure/app/source/decorators.mdx

@@ -0,0 +1,41 @@
+---
+sidebar_label: decorators
+---
+
+# source.decorators
+
+- **Type:**
+```
+type Decorators = {
+  version?: 'legacy' | '2022-03';
+};
+```
+
+- **Default:**
+
+```
+type Decorators = {
+  version: 'legacy',
+};
+```
+
+Used to configure the decorators syntax.
+
+### Example
+
+Modern.js uses `legacy` syntax by default (Stage 1 proposal), equivalent to TypeScript's `experimentalDecorators: true`.
+
+You can adjust the decorator syntax to the Stage 3 decorator proposal by setting `decorators.version` to `2022-03`.
+
+```js
+export default {
+  source: {
+    decorators: {
+      version: '2022-03',
+    },
+  },
+};
+```
+
+For detailed usage, please refer to [Rsbuild - source.decorators](https://rsbuild.dev/config/source/decorators).
+

package/docs/en/configure/app/tools/swc.mdx

@@ -15,17 +15,35 @@ import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
 
 :::tip
 When using Rspack as the bundler, SWC will be used for transpiling and compression by default, so you don't need to install or configure the SWC plugin.
-
-If you have configured the current SWC plugin when using Rspack, it will not have any effect.
 :::
 
-## Install
+## Used in Rspack mode
+
+You can set the options of [builtin:swc-loader](https://www.rspack.dev/guide/builtin-swc-loader) through `tools.swc`.
+
+```
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig<'rspack'>({
+  tools: {
+    swc: {
+      jsc: {
+        externalHelpers: false,
+      },
+    },
+  },
+});
+```
+
+For more usage, please refer to [Rsbuild - tools.swc](https://rsbuild.dev/config/tools/swc).
+
+## Used in Webpack mode
 
 import EnableSWC from '@modern-js/builder-doc/docs/en/shared/enableSwc.md';
 
 <EnableSWC />
 
-## Config
+### Config
 
 You can set the SWC compilation behavior through the `tools.swc` config.
 

package/docs/en/guides/advanced-features/rspack-start.mdx

@@ -87,22 +87,22 @@ For unsupported configurations, we have marked `Bundler: only support webpack` o
 
 Modern.js uses Rspack [builtin:swc-loader](https://www.rspack.dev/guide/builtin-swc-loader.html) for code translation in Rspack mode.
 
-Modern.js has provided a more convenient configuration for the common configuration of `builtin:swc-loader`, such as: configuring the component library to import it on demand through [source.transformImport](/configure/app/source/transform-import). If you have custom configuration requirements for `builtin:swc-loader`, you can refer to the following code:
+Modern.js has provided a more convenient configuration for the common configuration of `builtin:swc-loader`, such as: configuring the component library to import it on demand through [source.transformImport](/configure/app/source/transform-import).
+
+If you have custom configuration requirements for `builtin:swc-loader`, you can set the options of builtin:swc-loader through [tools.swc](/configure/app/tools/swc):
 
 ```ts
-export default {
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig<'rspack'>({
   tools: {
-    bundlerChain: (chain, { CHAIN_ID }) => {
-      chain.module
-        .rule(CHAIN_ID.RULE.JS)
-        .use(CHAIN_ID.USE.SWC)
-        .tap(options => {
-          options.xxx = '';
-          return options;
-        });
+    swc: {
+      jsc: {
+        externalHelpers: false,
+      },
     },
-  }
-};
+  },
+});
 ```
 
 :::tip

package/docs/en/guides/advanced-features/ssr/cache.mdx

@@ -184,3 +184,29 @@ export const cacheOption: CacheOption = {
   staleWhileRevalidate: 1000, // ms
 };
 ```
+
+## Cache Identification
+
+When the rendering cache is activated, Modern.js will identify the cache status of the current request through the response header `x-render-cache`.
+
+The following is an example of a response.
+
+```bash
+< HTTP/1.1 200 OK
+< Access-Control-Allow-Origin: *
+< content-type: text/html; charset=utf-8
+< x-render-cache: hit
+< Date: Thu, 29 Feb 2024 02:46:49 GMT
+< Connection: keep-alive
+< Keep-Alive: timeout=5
+< Content-Length: 2937
+```
+
+The `x-render-cache` may have the following values.
+
+| Name    | Description                                                                |
+| ------- | -------------------------------------------------------------------------- |
+| hit     | Cache hit, returns cached content                                          |
+| stale   | Cache hit, but data is stale, returns cached content while rendering again |
+| expired | Cache hit, returns rendering result after re-rendering                     |
+| miss    | Cache miss                                                                 |

package/docs/en/guides/topic-detail/framework-plugin/introduction.mdx

@@ -39,7 +39,6 @@ $ npx modern new
   Enable SSG
   Enable Micro Frontend
   Enable Unit Test / Integration Test
-  Enable Visual Testing (Storybook)
 ```
 
 After the selection is completed, the Modern.js generator will automatically install the corresponding plugins and third-party dependencies. Upon completion of the installation, you will see:

package/docs/en/guides/topic-detail/generator/new/config.md

@@ -66,8 +66,6 @@ Options:
 
 - Enable Global Proxy -- proxy
 
-- Enable Visual Testing (Storybook) -- mwa_storybook
-
 ### bffType
 
 Question: Please select the BFF type

package/docs/zh/apis/app/commands.mdx

@@ -145,7 +145,6 @@ $ npx modern new
   启用「BFF」功能
   启用「微前端」模式
   启用「单元测试 / 集成测试」功能
-  启用「Visual Testing (Storybook)」模式
 ```
 
 :::tip

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

@@ -10,7 +10,7 @@ Modern.js 支持使用 Storybook 进行调试，当需要对 Storybook 进行配
 Storybook 配置请查看：[Storybook 配置](https://storybook.js.org/docs/react/configure/overview)
 
 :::info
-使用 Storybook 进行调试需要提前在项目下执行 new 命令启用「Visual Testing (Storybook)」模式功能。
+使用 Storybook 进行调试需要提前在项目下执行 new 命令启用「Storybook」模式功能。
 
 :::
 

package/docs/zh/apis/app/hooks/src/stories.mdx

@@ -11,6 +11,6 @@ sidebar_position: 7
 在项目下执行 `npm run dev story` 命令，支持使用这些文件在 Storybook 中对相关内容进行调试。
 
 :::info
-使用 Storybook 需要提前在项目下执行 new 命令启用「Visual Testing (Storybook)」模式。
+使用 Storybook 需要提前在项目下执行 new 命令启用「Storybook」。
 
 :::

package/docs/zh/configure/app/output/filename-hash.mdx

@@ -0,0 +1,38 @@
+---
+sidebar_label: filenameHash
+---
+
+# output.filenameHash
+
+- **类型：** `boolean | string`
+- **默认值：** `true`
+
+在生产环境构建后，是否在产物的文件名中添加 hash 值。
+
+### 示例
+
+默认情况下，构建后的产物名称会包含 hash 值：
+
+```bash
+dist/static/css/index.7879e19d.css
+dist/static/js/index.18a568e5.js
+```
+
+你可以将 `output.filenameHash` 设置为 false 来禁用这个行为：
+
+```js
+export default {
+  output: {
+    filenameHash: false,
+  },
+};
+```
+
+重新构建，产物的名称变为：
+
+```bash
+dist/static/css/index.css
+dist/static/js/index.js
+```
+
+详细用法可参考 [Rsbuild - output.filenameHash](https://rsbuild.dev/zh/config/output/filename-hash)。

package/docs/zh/configure/app/source/decorators.mdx

@@ -0,0 +1,40 @@
+---
+sidebar_label: decorators
+---
+
+# source.decorators
+
+- **类型：**
+```
+type Decorators = {
+  version?: 'legacy' | '2022-03';
+};
+```
+
+- **默认值：**
+
+```
+type Decorators = {
+  version: 'legacy',
+};
+```
+
+用于配置装饰器语法。
+
+### 示例
+
+Modern.js 默认使用 `legacy` 语法（Stage 1 提案），等价于 TypeScript 的 `experimentalDecorators: true`。
+
+如果希望将装饰器语法调整成 Stage 3 提案，可以将 decorators.version 设置成 `2022-03`：
+
+```js
+export default {
+  source: {
+    decorators: {
+      version: '2022-03',
+    },
+  },
+};
+```
+
+详细用法可参考 [Rsbuild - source.decorators](https://rsbuild.dev/zh/config/source/decorators)。

package/docs/zh/configure/app/tools/swc.mdx

@@ -15,17 +15,35 @@ import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
 
 :::tip
 在使用 Rspack 作为打包工具时，默认会使用 SWC 进行转译和压缩，因此你不需要再安装和配置 SWC 插件。
-
-如果你使用 Rspack 时配置了当前的 SWC 插件，它将不会产生任何效果。
 :::
 
-## 安装
+## 在 Rspack 模式下使用
+
+通过 `tools.swc` 可以设置 Rspack [builtin:swc-loader](https://www.rspack.dev/guide/builtin-swc-loader) 的选项。
+
+```
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig<'rspack'>({
+  tools: {
+    swc: {
+      jsc: {
+        externalHelpers: false,
+      },
+    },
+  },
+});
+```
+
+更多用法可参考 [Rsbuild - tools.swc](https://rsbuild.dev/zh/config/tools/swc)。
+
+## 在 Webpack 模式下使用
 
 import EnableSWC from '@modern-js/builder-doc/docs/zh/shared/enableSwc.md';
 
 <EnableSWC />
 
-## 配置项
+### 配置项
 
 你可以通过 `tools.swc` 配置项来设置 SWC 编译行为。
 

package/docs/zh/guides/advanced-features/rspack-start.mdx

@@ -88,22 +88,20 @@ export default {
 
 Modern.js 在 Rspack 模式下使用 Rspack [builtin:swc-loader](https://www.rspack.dev/zh/guide/builtin-swc-loader.html) 进行代码转译。
 
-Modern.js 已对 `builtin:swc-loader` 的常见配置提供了更方便的配置方式，如：通过 [source.transformImport](/configure/app/source/transform-import) 配置组件库按需引入。如果对 `builtin:swc-loader` 有自定义配置的需求，可参考以下代码：
+Modern.js 已对 `builtin:swc-loader` 的常见配置提供了更方便的配置方式，如：通过 [source.transformImport](/configure/app/source/transform-import) 配置组件库按需引入。如果对 `builtin:swc-loader` 有自定义配置的需求，可通过 [tools.swc](/configure/app/tools/swc) 进行配置：
 
 ```ts
-export default {
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig<'rspack'>({
   tools: {
-    bundlerChain: (chain, { CHAIN_ID }) => {
-      chain.module
-        .rule(CHAIN_ID.RULE.JS)
-        .use(CHAIN_ID.USE.SWC)
-        .tap(options => {
-          options.xxx = '';
-          return options;
-        });
+    swc: {
+      jsc: {
+        externalHelpers: false,
+      },
     },
-  }
-};
+  },
+});
 ```
 
 :::tip

package/docs/zh/guides/advanced-features/ssr/cache.mdx

@@ -187,3 +187,29 @@ export const cacheOption: CacheOption = {
   staleWhileRevalidate: 1000, // ms
 };
 ```
+
+## 缓存标识
+
+当开启渲染缓存后，Modern.js 将通过响应头 `x-render-cache` 来标识当前请求的缓存状态。
+
+下列是一个响应示例
+
+```bash
+< HTTP/1.1 200 OK
+< Access-Control-Allow-Origin: *
+< content-type: text/html; charset=utf-8
+< x-render-cache: hit
+< Date: Thu, 29 Feb 2024 02:46:49 GMT
+< Connection: keep-alive
+< Keep-Alive: timeout=5
+< Content-Length: 2937
+```
+
+`x-render-cache` 可能会有以下几种值
+
+| 名称    | 说明                                               |
+| ------- | -------------------------------------------------- |
+| hit     | 缓存命中，返回缓存内容                             |
+| stale   | 缓存命中，但数据陈旧，返回缓存内容的同时做重新渲染 |
+| expired | 缓存命中，重新渲染后返回渲染结果                   |
+| miss    | 缓存未命中                                         |

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

@@ -357,7 +357,7 @@ Modern.js 建议必须有根 Layout 和根 Loading。
 ```ts title="routes/user/page.data.ts"
 import { redirect } from '@modern-js/runtime/router';
 
-export const loader () => {
+export const loader = () => {
   const user = await getUser();
   if (!user) {
     return redirect('/login');

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

@@ -38,7 +38,6 @@ $ npx modern new
 ❯ 启用「BFF」功能
   启用「微前端」模式
   启用「单元测试 / 集成测试」功能
-  启用「Visual Testing (Storybook)」模式
 ```
 
 完成选择后，Modern.js 生成器会自动安装对应的插件和三方依赖，安装完成后可以看到：

package/docs/zh/guides/topic-detail/generator/new/config.md

@@ -66,7 +66,6 @@ sidebar_position: 3
 
 - 启用「全局代理」 -- proxy
 
-- 启用「Visual Testing (Storybook)」模式 -- mwa_storybook
 
 ### bffType
 

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.47.1",
+  "version": "2.48.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.47.1"
+    "@modern-js/sandpack-react": "2.48.1"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.47.1"
+    "@modern-js/builder-doc": "^2.48.1"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -35,12 +35,12 @@
     "ts-node": "^10.9.1",
     "typescript": "^5",
     "fs-extra": "^10",
-    "rspress": "1.12.3",
-    "@rspress/shared": "1.12.3",
+    "rspress": "1.14.0",
+    "@rspress/shared": "1.14.0",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/builder-doc": "2.47.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.47.1"
+    "@modern-js/doc-plugin-auto-sidebar": "2.48.1",
+    "@modern-js/builder-doc": "2.48.1"
   },
   "scripts": {
     "dev": "rspress dev",