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

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

@@ -16,19 +16,9 @@ Rsbuild supports building Vue applications. If you need to use Vue, you can refe
 
 ## Routing
 
-Modern.js uses [React Router 6](https://reactrouter.com/en/main) for routing and is also compatible with React Router 5.
+Modern.js uses [React Router v7](https://reactrouter.com/en/main) for routing.
 
-Modern.js supports conventional routing, self-controlled routing, or other routing schemes. Please refer to ["Routing"](/en/guides/basic-features/routes) to make your choice.
-
-## Micro Frontends
-
-Modern.js provides out-of-the-box support for the [Garfish](https://www.garfishjs.org/) micro frontend framework.
-
-We are also working with Zack Jackson, the author of [Module Federation](https://webpack.js.org/concepts/module-federation/), to provide a more comprehensive solution.
-
-## State Management
-
-Modern.js can be used with any community state management library, such as [Redux](https://redux.js.org/), [Jotai](https://jotai.org/), [Zustand](https://docs.pmnd.rs/zustand), [Valtio](https://valtio.pmnd.rs/), and more.
+Modern.js supports conventional routing, self-controlled routing, or other routing schemes. Please refer to ["Routing"](/guides/basic-features/routes/routes) to make your choice.
 
 ## Package Manager
 
@@ -38,23 +28,17 @@ We recommend using pnpm for faster installation speed.
 
 ## Bundler
 
-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.
+Modern.js uses [Rspack](https://rspack.rs/) to bundle your web applications.
 
 ## Transpiler
 
-Modern.js uses [Babel](https://babeljs.io/), [SWC](https://swc.rs/), or [esbuild](https://esbuild.github.io/) as JavaScript transpiler to transform TypeScript or JSX into JavaScript code that can run in browsers and perform syntax downgrades.
+Modern.js uses [SWC](https://swc.rs/) as JavaScript transpiler to transform TypeScript or JSX into JavaScript code that can run in browsers and perform syntax downgrades.
 
-- When using Webpack for bundling, the default tool is Babel, which can be switched to SWC or esbuild.
-- When using Rspack for bundling, the default tool is SWC, which can be switched to Babel.
+When using Rspack for building, `babel-loader` is not enabled by default. If you need to add [Babel](https://babeljs.io/) plugins, you can configure them through `tools.babel`, which will generate additional compilation overhead and slow down Rspack build speed to some extent.
 
 ## Minimizer
 
-During production builds, Modern.js uses [Terser](https://github.com/terser/terser), [SWC](https://swc.rs/), or [esbuild](https://esbuild.github.io/) to minify JavaScript code, and [cssnano](https://cssnano.co/) to minify CSS code.
-
-- When using Webpack for bundling, the default tool for minifying JS code is Terser, which can be switched to SWC or esbuild.
-- When using Rspack for bundling, the default tool for minifying JS code is SWC, and switching to other tools is not currently supported.
+During production builds, Modern.js uses [SWC](https://swc.rs/) to minify JS code.
 
 ## CSS Transformer
 
@@ -62,7 +46,7 @@ Modern.js uses [PostCSS](https://postcss.org/) to transform CSS code and enables
 
 Modern.js supports enabling ["Lightning CSS"](/configure/app/tools/lightningcss-loader), which uses Lightning CSS to downgrade CSS syntax.
 
-Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwindcss) and is compatible with both Tailwind CSS v2 and v3.
+Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwindcss) and is compatible with both Tailwind CSS v3 and v4.
 
 ## CSS Preprocessors
 
@@ -87,8 +71,6 @@ If you need to use other CSS-in-JS solutions, you can integrate them into your p
 
 Modern.js can be used with any React UI component library from the community, such as [MUI](https://mui.com/), [Ant Design](https://ant.design/), [Arco Design](https://github.com/arco-design/arco-design), [Semi Design](https://semi.design/), [Radix UI](https://www.radix-ui.com/), and more.
 
-Additionally, Modern.js provides built-in support for [on-demand import](/configure/app/source/transform-import) of Ant Design and Arco Design.
-
 ## Component Development
 
 Modern.js supports the use of [Storybook](https://storybook.js.org/) for developing UI components. This feature is optional. Please refer to ["Using Storybook"](/guides/basic-features/debug/using-storybook) to enable it.

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

@@ -2,46 +2,54 @@
 sidebar_position: 3
 ---
 
+import { PackageManagerTabs } from '@theme';
+import ReleaseNote from '@site-docs-en/components/release-note';
+
 # Upgrading
 
-## Upgrade with command
+import Upgrade from '@site-docs/components/auto-upgrade';
 
-Modern.js provides the `upgrade` command to support upgrading the project to the latest version of Modern.js.
+<Upgrade />
 
-Run the `upgrade` script in the project:
+## Manual Upgrade
 
-import { PackageManagerTabs } from '@theme';
+All Modern.js official packages are released with a **uniform version number**, so when upgrading, you need to update all `@modern-js/**` packages to the target version uniformly.
 
-<PackageManagerTabs command="run upgrade" />
+### Upgrade Steps
 
-```bash
-> modern upgrade
+1. **Check the latest version**
 
-[INFO] [Project Type]: Web App
-[INFO] [Modern.js Latest Version]: x.y.z
-[INFO] Upgrade Modern.js package version success!
-```
+   You can check the latest version of Modern.js through the following methods:
 
-You can see that the dependencies in the project's `package.json` have been updated to the latest version.
+   - Visit [npm](https://www.npmjs.com/package/@modern-js/app-tools) to check the latest version of `@modern-js/app-tools`
+   - Check [GitHub Releases](https://github.com/web-infra-dev/modern.js/releases)
 
-:::tip
-If the `upgrade` command is not declared in the project's `package.json`, you can execute `npx modern upgrade` as an equivalent alternative.
-:::
+   <ReleaseNote />
 
-import UpgradeFaq from '@site-docs-en/components/upgrade-faq';
+2. **Update package.json**
 
-<UpgradeFaq />
+   In the project's `package.json`, update all `@modern-js/**` packages to the target version. For example:
 
-## Upgrade to a specified version
+   ```json title="package.json"
+   {
+     "dependencies": {
+       "@modern-js/app-tools": "3.0.0",
+       "@modern-js/runtime": "3.0.0"
+     },
+     "devDependencies": {
+       "@modern-js/types": "3.0.0"
+     }
+   }
+   ```
 
-All packages of Modern.js are currently released with a **uniform version number**.
+3. **Reinstall dependencies**
 
-import ReleaseNote from '@site-docs-en/components/release-note';
+   After updating `package.json`, reinstall dependencies:
 
-<ReleaseNote />
+   <PackageManagerTabs command="install" />
 
 :::tip
-When upgrading, you need to upgrade all packages provided by Modern.js, rather than upgrading some dependencies.
+When upgrading, you need to upgrade all packages provided by Modern.js uniformly, rather than upgrading individual dependencies. Ensure that all `@modern-js/**` packages have the same version number.
 :::
 
 ## Version Management Strategy
@@ -58,7 +66,6 @@ In Modern.js projects, we recommend that all officially provided dependencies us
 
 This ensures that the versions of dependencies are fully determined, thereby guaranteeing build consistency and predictability.
 
-
 ## Lock nested dependency
 
 When a nested dependency of the project has a problem and Modern.js cannot be updated immediately, you can use the package manager to lock the version of the nested dependency.

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

@@ -4,17 +4,5 @@
     "name": "module-federation",
     "label": "module-federation",
     "collapsed": true
-  },
-  {
-    "type": "dir",
-    "name": "micro-frontend",
-    "label": "micro-frontend",
-    "collapsed": true
-  },
-  {
-    "type": "dir",
-    "name": "model",
-    "label": "reduck",
-    "collapsed": true
   }
 ]

package/docs/en/guides/topic-detail/module-federation/_meta.json

@@ -1 +1 @@
-["introduce", "usage", "application", "ssr", "deploy"]
+["introduce", "usage", "application", "ssr", "deploy", "i18n"]

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

@@ -4,14 +4,6 @@ Modern.js provides runtime APIs to quickly export application-level Module Feder
 
 We use the application created in [Using Module Federation](/guides/topic-detail/module-federation/usage) as an example to further explain how to import application-level modules.
 
-## Install Dependencies
-
-Building on the existing application, we need to install the `@module-federation/bridge-react` dependency to use Bridge for loading application-level modules.
-
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command="add @module-federation/bridge-react" />
-
 ## Exporting Modules from Producer
 
 Unlike directly exporting component-level modules, we need to create a separate entry for application-level modules to be exported via `Module Federation`.
@@ -23,10 +15,10 @@ The filename can be arbitrary; Modern.js does not enforce a specific naming conv
 :::
 
 ```ts title="src/export-App.tsx"
-import '@modern-js/runtime/registry/main'; // This line must be included, it will import micro frontend runtime dependencies by default
+import '@modern-js/runtime/registry/index'; // This line must be included, it will import micro frontend runtime dependencies by default
 import { render } from '@modern-js/runtime/browser';
 import { createRoot } from '@modern-js/runtime/react';
-import { createBridgeComponent } from '@module-federation/bridge-react';
+import { createBridgeComponent } from '@module-federation/modern-js/react-v19';
 
 const ModernRoot = createRoot();
 export const provider = createBridgeComponent({
@@ -37,6 +29,15 @@ export const provider = createBridgeComponent({
 export default provider;
 ```
 
+:::note
+Please select the corresponding import path based on the React version used in your project:
+
+- **React 19**: Use `@module-federation/modern-js/react-v19`
+- **React 18**: Use `@module-federation/modern-js/react-v18`
+
+You can check the React version in your project's `package.json` file to determine which import path to use.
+:::
+
 This file will pass the root component of the `main` entry application to the Bridge API and render it to the specified node via Bridge's render function.
 
 Next, we configure `module-federation.config.ts` to modify the export to `src/export-App.tsx`:
@@ -47,7 +48,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: 'remote',
   manifest: {
-    filePath:'static',
+    filePath: 'static',
   },
   filename: 'static/remoteEntry.js',
   exposes: {
@@ -61,7 +62,7 @@ export default createModuleFederationConfig({
 ```
 
 :::info
-[`createBridgeComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createbridgecomponent) is used to export application-level modules. Modern.js related APIs can be found at [createRoot](/apis/app/runtime/core/create-root) and [render](/apis/app/runtime/core/render).
+[`createBridgeComponent`](https://module-federation.io/practice/bridge/react-bridge/export-app.html#createbridgecomponent-api-reference) is used to export application-level modules. Modern.js related APIs can be found at [createRoot](/apis/app/runtime/core/create-root) and [render](/apis/app/runtime/core/render).
 :::
 
 ## Using Modules in Consumer
@@ -71,11 +72,11 @@ We then modify the consumer configuration by removing the previously created `sr
 We want all routes that access `/remote` to enter the aforementioned application-level module, so we add `src/routes/remote/$.tsx` instead.
 
 :::note
-If you are not familiar with the capabilities of `$.tsx`, please read [Wildcard Routes](/guides/basic-features/routes.html#通配路由).
+If you are not familiar with the capabilities of `$.tsx`, please read [Wildcard Routes](/guides/basic-features/routes/routes#wildcard-routes).
 :::
 
 ```tsx title="src/routes/remote/$.tsx"
-import { createRemoteAppComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/modern-js/react';
 import { loadRemote } from '@module-federation/modern-js/runtime';
 
 const ErrorBoundary = (info?: { error: { message: string } }) => {
@@ -97,7 +98,7 @@ export default RemoteApp;
 ```
 
 :::info
-[`createRemoteAppComponent`](https://module-federation.io/practice/bridge/react-bridge.html#createremoteappcomponent) is used to load application-level modules.
+[`createRemoteAppComponent`](https://module-federation.io/zh/practice/bridge/react-bridge/load-app.html#%E4%BB%80%E4%B9%88%E6%98%AF-createremoteappcomponent) is used to load application-level modules.
 :::
 
 ## Start the Application