@modern-js/main-doc 2.69.4 → 3.0.0-alpha.0

package/docs/en/guides/basic-features/{routes.mdx → routes/routes.mdx}

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Routing
 
-Modern.js routing is based on [React Router 6](https://reactrouter.com/en/main), offering file convention-based routing capabilities and supporting the industry-popular **nested routing** pattern. When an entry is recognized as [conventional routing](/guides/concept/entries.html#conventional-routing), Modern.js automatically generates the corresponding routing structure based on the file system.
+Modern.js routing is based on [React Router v7](https://reactrouter.com/en/main), offering file convention-based routing capabilities and supporting the industry-popular **nested routing** pattern. When an entry is recognized as [conventional routing](/guides/concept/entries.html#conventional-routing), Modern.js automatically generates the corresponding routing structure based on the file system.
 
 :::note
 
@@ -51,7 +51,7 @@ The `<Page>` component refers to all `page.tsx` files in the `routes/` directory
 
 ```tsx title=routes/page.tsx
 export default () => {
-  return <div>Hello world</div>
+  return <div>Hello world</div>;
 };
 ```
 
@@ -88,7 +88,7 @@ export default () => {
 
 :::note
 
-`<Outlet>` is an API provided by React Router 6. For more details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
+`<Outlet>` is an API provided by React Router v7. For more details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
 
 :::
 
@@ -235,9 +235,9 @@ import { useParams } from '@modern-js/runtime/router';
 function Blog() {
   // When the path is `/blog/aaa/bbb`
   const params = useParams();
-  console.log(params) // ---> { '*': 'aaa/bbb' }
+  console.log(params); // ---> { '*': 'aaa/bbb' }
 
-  return <div>current blog URL is {params["*"]}</div>;
+  return <div>current blog URL is {params['*']}</div>;
 }
 export default Blog;
 ```
@@ -347,7 +347,7 @@ Create a `page.data.ts` file in the same directory as `page.tsx`. This file is t
 ```ts title="routes/user/page.data.ts"
 import { redirect } from '@modern-js/runtime/router';
 
-export const loader = () => {
+export const loader = async () => {
   const user = await getUser();
   if (!user) {
     return redirect('/login');
@@ -480,6 +480,7 @@ The `prefetch` attribute has three optional values:
 - `render`: When the `<Link>` component is rendered, it begins loading the corresponding chunk and data defined in the Data Loader.
 
 :::details Difference Between "render" and Not Using Route Splitting
+
 - `render` allows you to control the timing of route splitting, triggering only when the `<Link>` component enters the viewport. You can control the loading timing of the split by adjusting the rendering position of the `<Link>` component.
 - `render` loads static resources only during idle times, thus not occupying the loading time of critical modules.
 - Besides preloading route splits, `render` will also initiate data prefetching in SSR projects.
@@ -490,76 +491,6 @@ import Motivation from '@site-docs-en/components/convention-routing-motivation';
 
 <Motivation />
 
-## Upgrading to React Router v7
-
-React Router v7 reduces bundle size (approximately 15% smaller) compared to React Router v6, provides a more efficient route matching algorithm, and offers better support for React 19 and TypeScript. There are very few breaking changes compared to React Router v6, and Modern.js has made both versions compatible, allowing for a seamless upgrade by simply installing and registering the appropriate plugin.
-
-:::info
-
-For more changes from React Router v6 to React Router v7, check the [documentation](https://reactrouter.com/upgrading/v6#upgrade-to-v7)
-
-:::
-
-### Requirements
-
-React Router v7 has certain environment requirements:
-
-- Node.js 20+
-- React 18+
-- React DOM 18+
-
-### Install the Plugin
-
-First, install the Modern.js React Router v7 plugin:
-
-```bash
-pnpm add @modern-js/plugin-router-v7
-```
-
-### Configure the Plugin
-
-Register the plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import { routerPlugin } from '@modern-js/plugin-router-v7';
-
-export default {
-  runtime: {
-    router: true,
-  },
-  plugins: [routerPlugin()],
-};
-```
-
-### Code Changes
-
-In React Router v7, you no longer need to use the `defer` API; you can directly return data in the data loader:
-
-```ts title="routes/page.data.ts"
-import { defer } from '@modern-js/runtime/router';
-
-export const loader = async ({ params }) => {
-  // Recommended v7 style
-  const user = fetchUser(params.id)
-  return { user };
-
-  // v6 style, still compatible with Modern.js
-  return defer({ data: 'hello' });
-};
-```
-
-React Router v7 has also deprecated the `json` API:
-
-```ts title="routes/page.data.ts"
-export const loader = async ({ params }) => {
-  // Recommended v7 style
-  return { data: 'hello' };
-
-  // v6 style, still compatible with Modern.js
-  return json({ data: 'hello' });
-};
-```
-
 ## FAQ
 
 1. Why is there `@modern-js/runtime/router` to re-export React Router API?
@@ -573,37 +504,3 @@ Additionally, when using conventional routing, make sure to use the API from `@m
 :::note
 If you must directly use the React Router package's API (e.g., route behavior wrapped in a unified npm package), you can set [`source.alias`](/configure/app/source/alias) to point `react-router` and `react-router-dom` to the project's dependencies, avoiding the issue of two versions of React Router.
 :::
-
-2. About `config` function and `init` function
-
-:::warning Not Recommended
-
-Modern.js early versions supported runtime configuration and initialization operations through `config` function and `init` function exported in route layout files. These methods are still **supported**, but we **strongly recommend** using the [Runtime Configuration File](/configure/app/runtime/0-intro) and [Runtime Plugin](/plugin/introduction.html#runtime-plugin) to implement the corresponding functions.
-
-:::
-
-**config**
-
-In route components, you can add dynamic Runtime configuration by exporting a `config` function:
-
-```tsx
-// routes/layout.tsx
-export const config = () => {
-  return {
-    // dynamic Runtime configuration
-  };
-};
-```
-
-**init**
-
-In route components, you can execute pre-rendering logic by exporting an `init` function:
-
-```tsx
-// routes/layout.tsx
-export const init = () => {
-  // initialization logic
-};
-```
-
-

package/docs/en/guides/basic-features/static-assets/json-files.mdx

@@ -4,7 +4,7 @@ sidebar_position: 12
 
 # Import JSON Files
 
-Modern.js supports import JSON files in code, and also supports import [YAML](https://yaml.org/) and [Toml](https://toml.io/en/) files and converting them to JSON format.
+Modern.js supports import JSON files in code by default. You can use Rsbuild plugins to support importing [YAML](https://yaml.org/) and [Toml](https://toml.io/en/) files and converting them to JSON format.
 
 ## JSON file
 
@@ -38,7 +38,16 @@ import { name } from './example.json';
 
 YAML is a data serialization language commonly used for writing configuration files.
 
-You can directly import `.yaml` or `.yml` files in JavaScript and they will be automatically converted to JSON format.
+You can configure the [YAML plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml) in `modern.config.ts` to support importing `.yaml` or `.yml` files, they will be automatically converted to JSON format.
+
+```ts
+import { defineConfig } from '@modern-js/app-tools';
+import { pluginYaml } from '@rsbuild/plugin-yaml';
+
+export default defineConfig({
+  plugins: [pluginYaml()],
+});
+```
 
 ### Example
 
@@ -76,7 +85,16 @@ declare module '*.yml' {
 
 Toml is a semantically explicit, easy-to-read configuration file format.
 
-You can directly import `.toml` files in JavaScript and it will be automatically converted to JSON format.
+You can configure the [TOML plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml) in `modern.config.ts` to support importing `.toml` files, it will be automatically converted to JSON format.
+
+```ts
+import { defineConfig } from '@modern-js/app-tools';
+import { pluginToml } from '@rsbuild/plugin-toml';
+
+export default defineConfig({
+  plugins: [pluginToml()],
+});
+```
 
 ### Example
 

package/docs/en/guides/basic-features/static-assets.mdx

@@ -32,7 +32,7 @@ In JS files, you can directly import static assets in relative paths:
 // Import the logo.png image in the static directory
 import logo from './static/logo.png';
 
-export default = () => <img src={logo} />;
+export default () => <img src={logo} />;
 ```
 
 Import with [alias](/guides/basic-features/alias.html) are also supported:
@@ -40,7 +40,7 @@ Import with [alias](/guides/basic-features/alias.html) are also supported:
 ```tsx
 import logo from '@/static/logo.png';
 
-export default = () => <img src={logo} />;
+export default () => <img src={logo} />;
 ```
 
 ## Import Assets in CSS file

package/docs/en/guides/concept/builder.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Build Engine
 
-Modern.js internally encapsulates [Rsbuild](https://rsbuild.rs/), and supports seamless switching between Webpack and Rspack bundlers.
+Modern.js internally encapsulates [Rsbuild](https://rsbuild.rs/), using Rspack as the bundler.
 
 ::: tip What is Rsbuild?
 Rsbuild is a build tool based on Rspack. It is an enhanced Rspack CLI, easy-to-use, and ready-to-use out of the box.
@@ -14,14 +14,29 @@ Rsbuild is a build tool based on Rspack. It is an enhanced Rspack CLI, easy-to-u
 
 From the building perspective, Modern.js can be divided into three-layers, from top to bottom:
 
-- Upper-level framework: Modern.js (open source) and EdenX (internal).
+- Upper-level framework: Modern.js.
 - Build tool: Rsbuild.
-- Bundler: Webpack and Rspack.
+- Bundler: Rspack.
 
-<img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/build-layers-02193.png"
-  style={{ width: '100%', maxWidth: '540px' }}
-/>
+import Mermaid from '@site/src/components/Mermaid';
+
+<Mermaid>
+{`
+flowchart TD
+    Framework("Upper-level Framework: Modern.js")
+    BuildTool("Build Tool: Rsbuild")
+    Bundler("Bundler: Rspack")
+
+    Framework --> BuildTool
+    BuildTool --> Bundler
+
+    style Framework fill:#FDE68A,stroke:#F59E0B,stroke-width:2px
+    style BuildTool fill:#86EFAC,stroke:#10B981,stroke-width:2px
+    style Bundler fill:#93C5FD,stroke:#3B82F6,stroke-width:2px
+
+`}
+
+</Mermaid>
 
 ## Build Documentation
 
@@ -33,9 +48,9 @@ If you want to understand the use of build configurations, it is recommended tha
 
 ## Build Plugins
 
-In Modern.js, you can register Webpack plugins, Rspack plugins, or Rsbuild plugins:
+In Modern.js, you can register Rspack plugins or Rsbuild plugins:
 
-- Webpack / Rspack plugins: Configured through [tools.bundlerChain](/configure/app/tools/bundler-chain).
+- Rspack plugins: Configured through [tools.bundlerChain](/configure/app/tools/bundler-chain).
 - Rsbuild plugins: Configured through [builderPlugins](/configure/app/builder-plugins).
 
 ## Build Capabilities