@modern-js/main-doc 2.67.6 → 2.67.8

package/docs/en/guides/basic-features/css/css.mdx

@@ -12,20 +12,20 @@ Modern.js has built-in popular community CSS preprocessors, including Less and S
 
 By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less) and [tools.sass](/configure/app/tools/sass).
 
-You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus).
+You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://rsbuild.rs/plugins/list/plugin-stylus).
 
 ## Using PostCSS
 
 Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.
 
-Please refer to [Rsbuild - Using PostCSS](https://rsbuild.dev/guide/basic/css-usage#using-postcss) for detailed usage.
+Please refer to [Rsbuild - Using PostCSS](https://rsbuild.rs/guide/basic/css-usage#using-postcss) for detailed usage.
 
 ## Using Lightning CSS
 
 Modern.js supports using [Lightning CSS](https://lightningcss.dev/) to convert CSS code. This feature can be turned on by configuring [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader).
 
-Please refer to [Rsbuild - Using Lightning CSS](https://rsbuild.dev/guide/basic/css-usage#lightning-css) for detailed usage.
+Please refer to [Rsbuild - Using Lightning CSS](https://rsbuild.rs/guide/basic/css-usage#lightning-css) for detailed usage.
 
 ## Using Uno CSS
 
-Please read the [Rsbuild - Using UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) for detailed usage.
+Please read the [Rsbuild - Using UnoCSS](https://rsbuild.rs/zh/guide/basic/unocss) for detailed usage.

package/docs/en/guides/basic-features/data/data-cache.mdx

@@ -166,7 +166,7 @@ const getComplexStatistics = cache(
   }
 );
 
-revalidateTag('dashboard-stats'); // Invalidates the cache for both getDashboardStats and getComplexStatistics functions
+revalidateTag('dashboard'); // Invalidates the cache for both getDashboardStats and getComplexStatistics functions
 ```
 
 

package/docs/en/guides/basic-features/debug/rsdoctor.mdx

@@ -54,4 +54,4 @@ RSDOCTOR=true npm run build
 
 ## Related Documentation
 
-For more information, please refer to the [Rsdoctor Website](https://rsdoctor.dev/).
+For more information, please refer to the [Rsdoctor Website](https://rsdoctor.rs/).

package/docs/en/guides/basic-features/render/ssr.mdx

@@ -217,7 +217,7 @@ document.addEventListener('load', () => {
 export const doSomething = () => {}
 ```
 
-Directly referencing this in a component will cause CSR to throw errors, even if you use environment variables to conditionally load the code. The side effects in the dependency will still execute.
+Directly referencing this in a component will cause SSR to throw errors, even if you use environment variables to conditionally load the code. The side effects in the dependency will still execute.
 
 ```tsx title="routes/page.tsx"
 import { doSomething } from 'packageA';

package/docs/en/guides/basic-features/render/streaming-ssr.mdx

@@ -68,7 +68,7 @@ Here, `user` is a Promise object representing asynchronously fetched data, proce
 Additionally, `defer` can receive both asynchronous and synchronous data. In the example below, short-duration requests are returned using object data, while longer-duration requests are returned using a Promise:
 
 ```ts title="user/[id]/page.data.ts"
-export const loader = ({ params }: LoaderFunctionArgs) => {
+export const loader = async ({ params }: LoaderFunctionArgs) => {
   const userId = params.id;
 
   const user = new Promise<User>(resolve => {
@@ -227,4 +227,4 @@ import StreamSSRPerformance from '@site-docs-en/components/stream-ssr-performanc
 ## Related Documentation
 
 1. [Deferred Data](https://reactrouter.com/en/main/guides/deferred)
-2. [New Suspense SSR Architecture in React 18](https://github.com/reactwg/react-18/discussions/37)
+2. [New Suspense SSR Architecture in React 18](https://github.com/reactwg/react-18/discussions/37)

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

@@ -490,13 +490,83 @@ 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 there is `@modern-js/runtime/router` to re-export React Router API
+1. Why is there `@modern-js/runtime/router` to re-export React Router API?
 
-Notice that all the code examples in the documentation use API exported from the `@modern-js/runtime/router` package instead of directly using the API exported from the React Router package. So, what is the difference?
+Notice that all the code examples in the documentation uses APIs exported from the `@modern-js/runtime/router` package instead of directly using the API exported from the React Router package. So, what is the difference?
 
-The API exported from `@modern-js/runtime/router` is entirely consistent with the API from the React Router package. If you encounter issues while using an API, check the React Router documentation and issues first.
+The API exported from `@modern-js/runtime/router` is the same as the API from the React Router package. If you encounter issues while using an API, check the React Router documentation and issues first.
 
 Additionally, when using conventional routing, make sure to use the API from `@modern-js/runtime/router` instead of directly using the React Router API. Modern.js internally installs React Router, and using the React Router API directly in your application may result in two versions of React Router being present, causing unexpected behavior.
 
@@ -535,3 +605,5 @@ export const init = () => {
   // initialization logic
 };
 ```
+
+

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

@@ -12,7 +12,7 @@ WebAssembly (Wasm) is a portable, high-performance binary format designed to exe
 
 ## Import
 
-You can import a WebAssembly module directly in a JavaScript file:
+You can import a WebAssembly module via named import in a JavaScript file:
 
 ```js title="index.js"
 import { add } from './add.wasm';

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

@@ -150,7 +150,7 @@ console.log(myFile); // "/static/myFile.6c12aba3.pdf"
 
 For more information about asset modules, please refer to:
 
-- [Rspack Documentation - Asset modules](https://www.rspack.dev/guide/asset-module.html#asset-modules)
+- [Rspack Documentation - Asset modules](https://rspack.rs/guide/asset-module.html#asset-modules)
 - [webpack Documentation - Asset modules](https://webpack.js.org/guides/asset-modules/)
 
 ## Image Format

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

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Build Engine
 
-Modern.js internally encapsulates [Rsbuild](https://rsbuild.dev/), and supports seamless switching between Webpack and Rspack bundlers.
+Modern.js internally encapsulates [Rsbuild](https://rsbuild.rs/), and supports seamless switching between Webpack and Rspack bundlers.
 
 ::: 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.
@@ -25,7 +25,7 @@ From the building perspective, Modern.js can be divided into three-layers, from
 
 ## Build Documentation
 
-The documentation address of Rsbuild is: https://rsbuild.dev/
+The documentation address of Rsbuild is: https://rsbuild.rs/
 
 In this documentation, you can learn about the detailed introduction of Rsbuild, and you can also find complete usage guides for various building capabilities.
 
@@ -42,4 +42,4 @@ In Modern.js, you can register Webpack plugins, Rspack plugins, or Rsbuild plugi
 
 Rsbuild provides rich build capabilities, including JavaScript compilation, CSS compilation, static assets processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
 
-We recommend that you read [「Rsbuild - All Features」](https://rsbuild.dev/guide/start/features) to learn about all the features provided by Rsbuild.
+We recommend that you read [「Rsbuild - All Features」](https://rsbuild.rs/guide/start/features) to learn about all the features provided by Rsbuild.

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

@@ -290,7 +290,7 @@ Note that even if SSR is used, React still needs to go through the hydration pha
 
 4. **What are the exceptions to generating multiple HTML files?**
 
-You can configure [html-rspack-plugin](https://rspack.dev/plugins/rspack/html-rspack-plugin#generate-multiple-html-files) to generate multiple HTML files for each entry, or let multiple entries share the same HTML file.
+You can configure [html-rspack-plugin](https://rspack.rs/plugins/rspack/html-rspack-plugin#generate-multiple-html-files) to generate multiple HTML files for each entry, or let multiple entries share the same HTML file.
 
 5. **What is a Multi-Page Application (MPA)?**
 

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

@@ -12,7 +12,7 @@ In this document, you can learn about the main technology stack involved in the
 
 Modern.js uses [React 18](https://react.dev/) to build user interfaces and is also compatible with React 17.
 
-Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://rsbuild.dev/guide/framework/vue).
+Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://rsbuild.rs/guide/framework/vue).
 
 ## Routing
 
@@ -38,7 +38,7 @@ We recommend using pnpm for faster installation speed.
 
 ## Bundler
 
-Modern.js uses [Webpack 5](https://webpack.js.org/) or [Rspack](https://www.rspack.dev/) to bundle your web applications.
+Modern.js uses [Webpack 5](https://webpack.js.org/) or [Rspack](https://rspack.rs/) to bundle your web applications.
 
 The default bundler used is Webpack 5. You can refer to ["Using Rspack"](/en/guides/advanced-features/rspack-start) to switch to the faster Rspack.
 
@@ -69,7 +69,7 @@ Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwind
 Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Less](https://lesscss.org/), and [Stylus](https://stylus-lang.com/):
 
 - Sass and Less are supported by default and ready to use.
-- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://rsbuild.dev/plugins/list/plugin-stylus).
+- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://rsbuild.rs/plugins/list/plugin-stylus).
 
 ## CSS Modules
 

package/docs/en/guides/topic-detail/module-federation/deploy.mdx

@@ -1,8 +1,17 @@
 # Deployment
 
-Typically, deploying a Module Federation application requires adjusting the remote module address on the consumer side to its online address.
+In general, when deploying a Module Federation application, there are two key points to consider:
 
-For example, if the producer is deployed to the domain `https://my-remote-module`, you can modify the consumer's `module-federation.config.ts` file as follows:
+1. Ensure that the remote module addresses in the consumer's configuration file are correct, and that the consumer can correctly access the producer's `manifest` file.
+2. Ensure that all resources in the producer's `manifest` file can be accessed correctly.
+
+We recommend using Modern.js's [Node Server](/guides/basic-features/deploy.html#using-modernjs-built-in-nodejs-server) to deploy Module Federation applications for an out-of-the-box experience.
+
+## Consumer
+
+For the consumer of Module Federation, its connection with the producer is the remote module address in the configuration file.
+
+For example, if the producer is deployed under the domain `https://my-remote-module`, the developer needs to modify the consumer's configuration file:
 
 ```ts title="module-federation.config.ts"
 import { createModuleFederationConfig } from '@module-federation/modern-js';
@@ -10,7 +19,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: 'host',
   remotes: {
-    remote: 'remote@http://my-remote-module/mf-manifest.json',
+    remote: 'remote@https://my-remote-module/static/mf-manifest.json',
   },
   shared: {
     react: { singleton: true },
@@ -19,10 +28,77 @@ export default createModuleFederationConfig({
 });
 ```
 
-At this point, the consumer will load the `manifest` configuration file of the `remote` module in the production environment.
+At this point, the consumer will load the `manifest` configuration file of the remote module production environment.
+
+:::note
+In the above code, the address of the remote module is `/static/mf-manifest.json`, which is just an example using the default output path of Modern.js. In actual projects, developers need to configure according to the actual access path.
+:::
+
+## Producer
+
+For the producer of Module Federation, developers need to correctly configure the [`output.assetPrefix`](/configure/app/output/asset-prefix) configuration, which affects:
+
+1. The `publicPath` defined in `mf-manifest.json`, which determines the access path of other resources of the remote module.
+2. The access path of the `mf-manifest.json` file when hosted directly by the Modern.js server.
+
+In the production environment, developers need to configure `output.assetPrefix` as the access path of the production environment. For example, if we deploy the producer under the domain `https://my-remote-module`, we need to configure `output.assetPrefix` as `https://my-remote-module`.
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  output: {
+    assetPrefix: 'https://my-remote-module',
+  },
+});
+```
+
+At this point, the `publicPath` defined in the producer's build output `mf-manifest.json` is `https://my-remote-module`, for example:
+
+```json
+{
+  "id": "remote",
+  "name": "remote",
+  "metaData": {
+    "name": "remote",
+    "publicPath": "https://my-remote-module/"
+  },
+  "shared": [ /* xxx */ ],
+  "remotes": [],
+  "exposes": [ /* xxx */ ]
+}
+```
+
+When the consumer accesses the remote module, it will automatically prepend the `publicPath` to the resource path of the remote module.
+
+This configuration will also affect the access path of the producer's `mf-manifest.json`. For example, if this value is set to `MyDomain/module-a`, the hosting path of `mf-manifest.json` becomes `MyDomain/module-a/static/mf-manifest.json`.
+
+At this point, the consumer needs to configure the following address when configuring the remote module:
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@MyDomain/module-a/static/mf-manifest.json',
+  },
+});
+```
+
+## Local Deployment Verification
 
-## Deployment via Platform
+Modern.js provides the `modern deploy` command, which can easily generate products that can run in a Node.js environment.
 
-The above deployment method is merely the simplest practice. In real-world scenarios, there are many constraints, such as version management, release sequencing, and more. Within ByteDance, we have set up a deployment process for Module Federation applications on our deployment platform, which helps developers address these issues.
+```bash
+modern deploy
+```
+
+After executing the command, you can see the following output in the console:
+
+```bash
+Static directory: .output/static
+You can preview this build by node .output/index
+```
 
-We will continue to keep an eye on platforms with similar functionalities in the community and, in the future, enhance the documentation for deploying Modern.js + Module Federation on these types of platforms.
+At this point, the developer only needs to run `node .output/index` to preview the effect locally. Whether it is a CSR or an SSR application, all Module Federation files can be accessed correctly.

package/docs/en/guides/topic-detail/module-federation/usage.mdx

@@ -190,8 +190,6 @@ If we want to simulate the production environment in local, but not configure `o
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { moduleFederationPlugin } from '@module-federation/modern-js';
 
-const isLocal = process.env.IS_LOCAL === 'true';
-
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
   server: {
@@ -204,7 +202,7 @@ export default defineConfig({
     // Now this configuration is only used in the local when you run modern serve command.
     // If you want to deploy the application to the platform, use your own domain name.
     // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
-    assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
+    assetPrefix: 'http://127.0.0.1:3051',
   },
   plugins: [
     appTools({
@@ -215,7 +213,7 @@ export default defineConfig({
 });
 ```
 
-Now, in the producer, run `IS_LOCAL=true modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
+Now, in the producer, run `modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
 
 You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
 

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

@@ -10,12 +10,11 @@ If you encounter any build-related issues, you can refer to the current document
 
 ### Rsbuild FAQ
 
-Modern.js is internally based on [Rsbuild](https://rsbuild.dev/) and encapsulates its own build tool, so you can directly refer to the FAQ document of Rsbuild:
-
-- [Rsbuild - Features FAQ](https://rsbuild.dev/guide/faq/features)
-- [Rsbuild - Exceptions FAQ](https://rsbuild.dev/guide/faq/exceptions)
-- [Rsbuild - HMR FAQ](https://rsbuild.dev/guide/faq/hmr)
+Modern.js is internally based on [Rsbuild](https://rsbuild.rs/) and encapsulates its own build tool, so you can directly refer to the FAQ document of Rsbuild:
 
+- [Rsbuild - Features FAQ](https://rsbuild.rs/guide/faq/features)
+- [Rsbuild - Exceptions FAQ](https://rsbuild.rs/guide/faq/exceptions)
+- [Rsbuild - HMR FAQ](https://rsbuild.rs/guide/faq/hmr)
 
 ---