@modern-js/main-doc 0.0.0-next-1678773288418 → 0.0.0-next-1678802796441

package/CHANGELOG.md

@@ -1,14 +1,14 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1678773288418
+## 0.0.0-next-1678802796441
 
 ### Patch Changes
 
-- cafb782e0: fix: doc info block not work
+- 7035d5c22: fix: doc info block not work
 
   fix: 修复文档站 info 不生效问题
 
-  - @modern-js/builder-doc@0.0.0-next-1678773288418
+  - @modern-js/builder-doc@0.0.0-next-1678802796441
 
 ## 2.8.0
 

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

@@ -1,35 +1,32 @@
 ---
-title: Rspack Start
 sidebar_position: 1
 ---
 
-# Rspack Start
+# Using Rspack
 
-[Rspack](https://www.rspack.dev/) is a Rust-based web bundler developed by the ByteDance Web Infra team. The core architecture of Rspack is aligned with the implementation of webpack, and provides out-of-the-box support for commonly used build features.
+import Rspack from '@modern-js/builder-doc/docs/en/shared/rspack.md';
 
-Rspack optimizes compilation performance by:
+<Rspack />
 
-- Highly LTO optimized Native code.
-- Take full advantage of multi-core, and the entire compilation process is fully optimized for multi-threading.
-- On-demand compilation based on request (Lazy Compilation), reducing the number of modules per compilation to improve the speed of cold start.
+**Modern.js provides out-of-the-box Rspack support**, so you can switch between the stable Webpack and the faster Rspack.
+
+This document will show you how to enable Rspack build mode in Modern.js.
 
 ## Initializing an Rspack project
 
 The Modern.js generator provides an interactive question-and-answer interface to initialize a project. To create an Rspack project, simply select the **Rspack** build tool by running:
 
-import InitRspackApp from "@site-docs-en/components/init-rspack-app"
+import InitRspackApp from '@site-docs-en/components/init-rspack-app';
 
 <InitRspackApp />
 
 After the project is created, you can experience the project by running `pnpm run dev`. For more project information, please refer to [Quick Start](/guides/get-started/quick-start.html).
 
 :::tip
-When using Rspack as the bundler, the following features are currently not supported:
+When using Rspack as the bundler, the following Features are temporarily unavailable as some of the capabilities are still under development and we will provide support in the future.
 
-- Server-side rendering (SSR)
-- Static Site Generation (SSG)
-- Micro Frontend.
-- Storybook debugging.
+- Micro Frontend
+- Storybook devtool
 
 :::
 
@@ -45,21 +42,18 @@ $ pnpm run new
 
 After executing the command, enable the Rspack build in `modern.config.ts`:
 
-```ts title=modern.config.ts
+```diff title=modern.config.ts
 import appTools, { defineConfig } from '@modern-js/app-tools';
 
-export default defineConfig<'rspack'>({
-  runtime: {
-    router: true,
-  },
++ export default defineConfig<'rspack'>({
   plugins: [
     appTools({
-      bundler: 'experimental-rspack',
++     bundler: 'experimental-rspack',
     }),
   ],
 });
 ```
 
 :::tip
-Migrating from webpack to Rspack may have some differences in build and configuration capabilities. For more details, please refer to [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack).
+When migrating from webpack to Rspack, there may have some differences in build and configuration capabilities. For more details, please refer to [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack).
 :::

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

@@ -8,12 +8,14 @@ In Modern.js, SSR also works out of the box. Developers do not need to write com
 
 Enabling SSR is very easy, just set ['server.ssr'](/configure/app/server/ssr) to `true`:
 
-```json
-{
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
   "server": {
-    "ssr": true
-  }
-}
+    "ssr": true,
+  },
+})
 ```
 
 ## SSR Data Fetch
@@ -293,14 +295,16 @@ Be sure to filter the `host` field if you really need to pass through all reques
 
 Modern.js supports streaming rendering in React 18. Opt in it with the following configuration:
 
-```json
-{
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
   "server": {
     "ssr": {
-      "mode": "stream"
-    }
-  }
-}
+      "mode": "stream",
+    },
+  },
+})
 ```
 
 The streaming SSR of Modern.js is implemented based on React Router, and the main APIs involved are:
@@ -383,7 +387,7 @@ export default ({ params }: LoaderFunctionArgs) => {
 
 Use the `Await` component to render the data returned asynchronously from the Data Loader. For example:
 
-```ts title='page.tsx'
+```tsx title='page.tsx'
 import { Await, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 import type { Data } from './page.loader';
@@ -425,8 +429,7 @@ So, here we import like this: `import type { Data } from './page.loader'`;
 
 You can also get the asynchronous data returned by Data Loader through `useAsyncValue`. For example:
 
-```
-```ts title='page.tsx'
+```tsx title='page.tsx'
 import { useAsyncValue } from '@modern-js/runtime/router';
 
 // skip some codes
@@ -480,7 +483,7 @@ export default () => {
 
 Then use `useAsyncError` to get the error, and assign the component used to render the error to the `errorElement` property of the `Await` component:
 
-```ts title='page.ts'
+```tsx title='page.ts'
 import { Await, useAsyncError, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 

package/package.json

@@ -11,13 +11,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1678773288418",
+  "version": "0.0.0-next-1678802796441",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1678773288418"
+    "@modern-js/builder-doc": "0.0.0-next-1678802796441"
   },
   "devDependencies": {
     "ts-node": "^10",
@@ -25,7 +25,7 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-1678773288418"
+    "@modern-js/builder-doc": "0.0.0-next-1678802796441"
   },
   "scripts": {
     "build": "npx ts-node ./scripts/sync.ts"

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

@@ -5,29 +5,27 @@ sidebar_position: 1
 
 # 使用 Rspack
 
-[Rspack](https://www.rspack.dev/) 是字节跳动 Web Infra 团队自研的 Rust Bundler，核心架构对齐 webpack 实现，并对社区常用的构建能力做了开箱即用的支持。
+import Rspack from '@modern-js/builder-doc/docs/zh/shared/rspack.md';
 
-Rspack 通过以下方式来提升编译性能：
+<Rspack />
 
-- 高度 LTO 优化的 Native code。
-- 充分利用多核优势，整个编译过程充分进行多线程优化。
-- 基于请求的按需编译（Lazy Compilation），减小每次编译的模块数目，以提升冷启动的速度。
+**Modern.js 提供开箱即用的 Rspack 支持**，你可以在成熟的 Webpack 和更快的 Rspack 之间进行切换。
+
+这篇文档会向你介绍如何在 Modern.js 中开启 Rspack 构建模式。
 
 ## 初始化 Rspack 项目
 
 Modern.js 生成器会提供一个可交互的问答界面，只需将构建工具选择为 **Rspack**，即可创建一个 Rspack 项目:
 
-import InitRspackApp from "@site-docs/components/init-rspack-app"
+import InitRspackApp from '@site-docs/components/init-rspack-app';
 
 <InitRspackApp />
 
-项目创建完成后，在项目中执行 `pnpm run dev` 即可体验项目。更多项目信息可参考[快速上手](/guides/get-started/quick-start.html)。
+项目创建完成后，在项目中执行 `pnpm run dev` 即可体验项目，更多信息可参考[快速上手](/guides/get-started/quick-start.html)。
 
 :::tip
-使用 Rspack 作为打包工具时，以下功能暂不支持使用:
+在使用 Rspack 作为打包工具时，由于部分能力尚在开发中，以下 features 暂时无法使用，我们将在未来提供支持：
 
-- 服务端渲染（SSR）
-- 静态站点生成（SSG）
 - 微前端（Micro Frontend）
 - Storybook 调试
 
@@ -35,31 +33,28 @@ import InitRspackApp from "@site-docs/components/init-rspack-app"
 
 ## 从 webpack 迁移至 Rspack
 
-通过执行 `pnpm run new` 可启用 Rspack 构建：
+在一个已有的 Modern.js 项目中，你可以通过执行 `pnpm run new` 来启用 Rspack 构建：
 
 ```bash
 $ pnpm run new
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「Rspack 构建」
+? 请选择你想要的操作：启用可选功能
+? 启用可选功能：启用「Rspack 构建」
 ```
 
-执行命令后，在 modern.config.ts 中开启 Rspack 构建：
+执行以上命令后，在 `modern.config.ts` 中添加 Rspack 相关配置即可：
 
-```ts title=modern.config.ts
+```diff title=modern.config.ts
 import appTools, { defineConfig } from '@modern-js/app-tools';
 
-export default defineConfig<'rspack'>({
-  runtime: {
-    router: true,
-  },
++ export default defineConfig<'rspack'>({
   plugins: [
     appTools({
-      bundler: 'experimental-rspack',
++     bundler: 'experimental-rspack',
     }),
   ],
 });
 ```
 
 :::tip
-从 webpack 迁移至 Rspack，会有一些构建和配置能力上的差异，详情可参考：[配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack)
+从 webpack 迁移至 Rspack 时，存在一些构建能力和配置上的差异，详情可参考：[配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack)
 :::

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

@@ -8,12 +8,14 @@ sidebar_position: 3
 
 启用 SSR 非常简单，只需要设置 [`server.ssr`](/configure/app/server/ssr) 为 `true` 即可：
 
-```json
-{
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
   "server": {
-    "ssr": true
-  }
-}
+    "ssr": true,
+  },
+})
 ```
 
 ## SSR 时的数据获取
@@ -282,14 +284,16 @@ export const loader = () => {
 
 Modern.js 支持了 React 18 的流式渲染，可以通过如下配置启用：
 
-```json
-{
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
   "server": {
     "ssr": {
-      "mode": "stream"
-    }
-  }
-}
+      "mode": "stream",
+    },
+  },
+})
 ```
 
 Modern.js 的流式渲染基于 React Router 实现，主要涉及 API 有：
@@ -372,7 +376,7 @@ export default ({ params }: LoaderFunctionArgs) => {
 
 通过 `Await` 组件，可以获取到 Data Loader 中异步返回的数据，然后进行渲染。例如：
 
-```ts title='page.tsx'
+```tsx title='page.tsx'
 import { Await, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 import type { Data } from './page.loader';
@@ -413,8 +417,8 @@ export default Page;
 
 也可以通过 `useAsyncValue` 获取 Data Loader 返回的异步数据。例如：
 
-```
-```ts title='page.tsx'
+
+```tsx title='page.tsx'
 import { useAsyncValue } from '@modern-js/runtime/router';
 
 // 省略部分代码
@@ -468,7 +472,7 @@ export default () => {
 
 然后通过 `useAsyncError` 获取错误，并将用于渲染错误信息的组件赋值给 `Await` 组件的 `errorElement` 属性：
 
-```ts title='page.ts'
+```tsx title='page.ts'
 import { Await, useAsyncError, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 

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

@@ -25,7 +25,7 @@ Modern.js 提供了快速生成 Mock 数据的功能，能够让前端独立自
 `config/mock/index.ts` 文件只需要导出一个包含所有 Mock API 的对象，对象的属性由请求配置 `method` 和 `url` 组成，对应的属性值可以为 `Object`、`Array`、`Function`：
 
 ```js
-module.exports = {
+export default {
   /* 属性为具体的 method 和 请求 url，值为 object 或 array 作为请求的结果 */
   'GET /api/getInfo': { data: [1, 2, 3, 4] },
 

package/zh/index.md

@@ -1,4 +1,4 @@
 ---
 pageType: home
 ---
-# Modern.js - 基于 React 的渐进式现代 Web 开发框架
+# Modern.js - 基于 React 的渐进式 Web 开发框架