@modern-js/main-doc 2.35.0 → 2.35.1

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

@@ -30,7 +30,6 @@ After running `modern dev`, Modern.js will watch source file changes and apply h
 $ modern dev
 
 info    Starting dev server...
-info    App running at:
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
@@ -42,7 +41,7 @@ In multi-page (MPA) projects, the `--entry` option can be added to specify one o
 
 For example, execute `modern dev --entry`, the entry selector will be displayed in the command line interface:
 
-```bash
+```text
 $ modern dev --entry
 
 ? Please select the entry that needs to be built
@@ -86,14 +85,16 @@ Options:
 
 execute `npx modern build --analyze` command, can produce an HTML file that analyzes the volume of the bundle while packaging the production code:
 
-```
+```text
 Bundle Analyzer saved report to /example/dist/report.html
-File sizes after production build:
 
-  122.35 KB  dist/static/js/885.1d4fbe5a.js
-  2.3 KB     dist/static/js/main.4b8e8d64.js
-  761 B      dist/static/js/runtime-main.edb7cf35.js
-  645 B      dist/static/css/main.0dd3ecc1.css
+info    Production file sizes:
+
+  File                                      Size         Gzipped
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
 Open the above HTML file in the browser, you can see the tile diagram of the bundled files, and perform package volume analysis and optimization:
@@ -125,7 +126,7 @@ Options:
 
 In the project, execute the `new` command to add entries as follows:
 
-```bash
+```text
 $ npx modern new
 ? Please select the operation you want: Create Element
 ? Please select the type of element to create: New "entry"
@@ -136,7 +137,7 @@ $ npx modern new
 
 In the project, execute the `new` command to enable features as follows:
 
-```bash
+```text
 $ npx modern new
 ? Please select the operation you want: Enable Features
 ? Please select the feature name: (Use arrow keys)
@@ -156,7 +157,7 @@ pnpm does not support the use of JSON strings as parameter values currently. Use
 
 ## modern serve
 
-Usually use the `modern serve` command to enable project run in the production environment, and you need to execute the [`build'](/apis/app/commands#modern-build) command in advance to build the outputs.
+The `modern serve` command is used to start a Modern.js project in the production environment. It can also be used to preview the artifacts built for the production environment locally. Please note that you need to execute the [`build`](/apis/app/commands#modern-build) command beforehand to generate the corresponding artifacts.
 
 ```bash
 Usage: modern serve [options]

package/docs/en/components/debug-app.mdx

@@ -6,12 +6,10 @@ $ pnpm run dev
 > modern dev
 
 info    Starting dev server...
-info    App running at:
+ready   Client compiled in 50ms
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
-
- Client ✔ done in 76.10ms
 ```
 
 Open `http://localhost:8000/` in your browser to see the page content.

package/docs/en/components/global-proxy-config.mdx

@@ -7,16 +7,9 @@ This option is used to configure a global proxy based on [whistle](https://wprox
 
 Before using this option, you need to install and register the `@modern-js/plugin-proxy` plugin:
 
-```bash
-# npm
-npm add @modern-js/plugin-proxy -D
-
-# yarn
-yarn add @modern-js/plugin-proxy -D
+import { PackageManagerTabs } from '@theme';
 
-# pnpm
-pnpm add @modern-js/plugin-proxy -D
-```
+<PackageManagerTabs command="add @modern-js/plugin-proxy -D" />
 
 After the installation, please register the plugin in the `modern.config.ts` file:
 
@@ -75,13 +68,11 @@ module.exports = {
 Execute `dev`, when the prompt is as follows, the proxy server starts successfully:
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 Access the `localhost:8899` to view the Network and configure proxy rules on the UI interface:

package/docs/en/components/global-proxy.mdx

@@ -11,13 +11,11 @@ Specific proxy rules can be set via the [`dev.proxy`](/configure/app/dev/proxy)
 After installing the proxy plugin and configuring the proxy rules, run the `pnpm run dev` command:
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 You can see that the proxy server has started successfully in the console.

package/docs/en/components/init-app.mdx

@@ -14,7 +14,7 @@ After create the project, Modern.js will automatically install dependencies and
 [INFO] git repository has been automatically created
 [INFO] Success！
 You can run the following command in the directory of the new project:
-pnpm run dev          # Starting the dev server
+pnpm run dev          # Starting dev server
 pnpm run build        # Build the app for production
 pnpm run serve        # Preview the production build locally
 pnpm run lint         # Run ESLint and automatically fix problems

package/docs/en/configure/app/builder-plugins.mdx

@@ -15,8 +15,8 @@ Modern.js Builder is the build tool of Modern.js, please read [Builder](/guides/
 
 This option **is used to configure the Modern.js Builder plugins**. If you need to configure other types of plugins, please select the corresponding configs:
 
-- Use [plugins](/configure/app/builder-plugins) to configure Modern.js framework plugins.
-- Use [tools.webpack](/configure/app/tools/webpack) or [tools.webpackChain](/configure/app/tools/webpack-chain) to configure webpack plugins.
+- Use [plugins](/configure/app/plugins) to configure Modern.js framework plugins.
+- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack or webpack plugins.
 - Use [tools.babel](/configure/app/tools/babel) to configure Babel plugins.
 
 ## When to use

package/docs/en/configure/app/plugins.mdx

@@ -15,10 +15,9 @@ Refer to [How to Develop Plugins](/guides/topic-detail/framework-plugin/implemen
 
 This option is used to configure framework plugins. If you need to configure other types of plugins, please choose the corresponding configuration method:
 
-- To configure Modern.js Builder plugins, use the [builderPlugins](/configure/app/builder-plugins) option.
-- To configure webpack plugins, use the [tools.webpack](/configure/app/tools/webpack)、[tools.webpackChain](/configure/app/tools/webpack-chain) or [tools.bundlerChain](/configure/app/tools/bundler-chain) options.
-- To configure Rspack plugins, use the [tools.rspack](/configure/app/tools/rspack) or [tools.bundlerChain](/configure/app/tools/bundler-chain) options.
-- To configure Babel plugins, use the [tools.babel](/configure/app/tools/babel) option.
+- Use [builderPlugins](/configure/app/builder-plugins) to configure Modern.js Builder plugins.
+- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack or webpack plugins.
+- Use [tools.babel](/configure/app/tools/babel) to configure Babel plugins.
 
 ## Plugin types
 

package/docs/en/configure/app/server/base-url.mdx

@@ -25,8 +25,6 @@ export default defineConfig({
 After running `dev`, you will see that the route access will have the corresponding prefix added:
 
 ```bash
-App running at:
-
   > Local:    http://localhost:8080/base/
   > Network:  http://192.168.0.1:8080/base/
 ```

package/docs/en/configure/app/source/enable-async-entry.mdx

@@ -49,6 +49,6 @@ import('./bootstrap.jsx');
 At this point, you can consume any remote module in the current page.
 
 :::info
-Modern.js does not have webpack's ModuleFederationPlugin plugin built in. Please configure the ModuleFederationPlugin yourself via [tools.webpackChain](/configure/app/tools/webpack-chain).
+Modern.js does not have ModuleFederationPlugin plugin built in. Please configure the ModuleFederationPlugin yourself via [tools.bundlerChain](/configure/app/tools/bundler-chain).
 
 :::

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # Path Alias

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 # Styling
@@ -61,16 +61,31 @@ If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.np
 
 ## Using Tailwind CSS
 
-[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles. To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, simply run `pnpm run new` in the project root directory and enable it.
+[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
 
-Follow the steps below to make a selection:
+To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, you can follow the steps below:
+
+1. Run `pnpm run new` in the root directory of your project and make the following selections:
 
 ```text
 ? Please select the operation you want: Enable features
 ? Please select the feature name: Enable Tailwind CSS
 ```
 
-Register the Tailwind plugin in `modern.config.ts`:
+After successful initialization, you will see the following additions to the `package.json` file:
+
+```json title="./package.json"
+{
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "@modern-js/plugin-tailwindcss": "^2.0.0"
+  }
+}
+```
+
+2. Register the Tailwind plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
@@ -80,29 +95,34 @@ export default defineConfig({
 });
 ```
 
-To use, add the following code to the root component (such as `src/App.jsx`) of the entry:
+3. Create a `index.css` file and add the following code:
+
+```css title="index.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+:::info
+Depending on your needs, you can selectively import the CSS styles provided by Tailwind CSS. Please refer to the [`@tailwind` documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind) for detailed usage of the `@tailwind` directive.
+:::
+
+4. Import the `index.css` file, for example, add the following code in the root component `src/App.jsx`:
 
 ```js
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
+import './index.css';
 ```
 
-Then you can use the Utility Class provided by Tailwind CSS in each component:
+5. Now you can use the Utility Classes provided by Tailwind CSS in your components:
 
 ```tsx
-const App = () => (
+const Hello = () => (
   <div className="h-12 w-48">
     <p className="text-xl font-medium text-black">hello world</p>
   </div>
 );
 ```
 
-:::info Additional Information
-Depending on your needs, you can selectively import the CSS files provided by Tailwind CSS. Since using `@tailwind` is equivalent to directly importing CSS files, you can refer to the comments in the [`@tailwind` usage](https://tailwindcss.com/docs/functions-and-directives#tailwind) documentation for the purpose of the CSS files provided by Tailwind CSS.
-
-:::
-
 ### Configuring Tailwind CSS
 
 In Modern.js, you have two ways to configure Tailwind CSS:

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

@@ -1,10 +1,11 @@
 ---
-sidebar_position: 4
+title: Data Fetching
+sidebar_position: 3
 ---
 
 # Data Fetching
 
-Modern.js provides out-of-the-box data fetching capabilities, allowing developers to develop in an isomorphic way in both client-side and server-side code.
+Modern.js provides out-of-the-box data fetching capabilities,developers can fetch data in the project through these APIs.
 
 It should be noted that these APIs do not help applications initiate requests, but rather help developers better manage data and improve project performance.
 
@@ -13,7 +14,7 @@ It should be noted that these APIs do not help applications initiate requests, b
 Modern.js recommends using [conventional routing](/guides/basic-features/routes) for routing management. Through Modern.js's [conventional (nested) routing](/guides/basic-features/routes#conventional-routing), each routing component (`layout.ts` or `page.ts`) can have a same-named `loader` file. The `loader` file needs to export a function that will be executed before the component is rendered to provide data for the routing component.
 
 :::info
-Modern.js v1 supports fetching data via [useLoader](/guides/basic-features/data-fetch.html#useloader-(old-version)), which is no longer the recommended usage. We do not recommend mixing the two except during the migration process.
+Modern.js v1 supports fetching data via [useLoader](</guides/basic-features/data-fetch.html#useloader-(old-version)>), which is no longer the recommended usage. We do not recommend mixing the two except during the migration process.
 
 :::
 
@@ -216,25 +217,24 @@ If you want to get the data returned by the `loader` in `entry1/routes/layout.ts
 
 :::info
 This feature is currently experimental and the API may change in the future.
-Currently only supports CSR, please look forward to Streaming SSR.
 :::
 
 Create `user/layout.loader.ts` and add the following code:
 
 ```ts title="routes/user/layout.loader.ts"
-import { defer } from "@modern-js/runtime/router"
+import { defer } from '@modern-js/runtime/router';
 
 const loader = () =>
-defer({
-  userInfo: new Promise((resolve) => {
+  defer({
+    userInfo: new Promise(resolve => {
       setTimeout(() => {
         resolve({
           age: 1,
-          name: 'user layout'
-        })
-      }, 1000)
-    })
-  })
+          name: 'user layout',
+        });
+      }, 1000);
+    }),
+  });
 
 export default loader;
 ```

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

@@ -165,9 +165,9 @@ export default function Document(): React.ReactElement {
 
 ## HTML Syntax
 
-Modern.js also supports HTML syntax. By default, Modern.js application projects will include a built-in HTML template for generating HTML code.
+Modern.js also supports generating HTML files using HTML (EJS) syntax.
 
-Based on the HTML syntax template, Modern.js provides two ways to customize the template: **custom HTML fragments** and **custom the whole HTML**.
+By default, Modern.js projects come with a built-in HTML template for generating HTML code. If you need to customize the HTML template, you can use two methods: **Custom HTML Fragments** and **Fully Custom HTML Templates**.
 
 ### Custom HTML Fragments
 

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # Routing
@@ -140,6 +140,7 @@ To simplify the introduction of the relationship between `<Layout>` and `<Outlet
   </UserLayout>
 </Layout>
 ```
+
 In summary, if there is a `layout.tsx` file under the sub-route's file directory, the `<Outlet>` in the parent `layout.tsx` will represent the `layout.tsx` in the sub-route file directory. Otherwise, it will represent the `page.tsx` in the sub-route file directory.
 
 #### Page
@@ -148,12 +149,12 @@ All routes should end with the `<Page>` component. If the developer introduces t
 
 #### Config
 
-Each `Layout` or `Page` file can define its own `config` file, such as `page.config.ts`. In this file, we have an conventinal on a named export called `handle`, which you can define any properties:
+Each `Layout`,`$` or `Page` file can define its own `config` file, such as `page.config.ts`. In this file, we have an conventinal on a named export called `handle`, which you can define any properties:
 
 ```ts title="routes/blog/page.config.ts"
 export const handle = {
-  breadcrumbName: 'profile'
-}
+  breadcrumbName: 'profile',
+};
 ```
 
 These properties as defined are available via the [`useMatches`](https://reactrouter.com/en/main/hooks/use-matches) hook:
@@ -161,12 +162,11 @@ These properties as defined are available via the [`useMatches`](https://reactro
 ```ts title="routes/layout.ts"
 export default () => {
   const matches = useMatches;
-  const breadcrumbs = matches.map(matchedRoute => matchedRoute?.handle?.breadcrumbName);
-  return (
-    <Breadcrumb names={breadcrumbs}>
-    </Breadcrumb>
-  )
-}
+  const breadcrumbs = matches.map(
+    matchedRoute => matchedRoute?.handle?.breadcrumbName,
+  );
+  return <Breadcrumb names={breadcrumbs}></Breadcrumb>;
+};
 ```
 
 ### Dynamic Routing
@@ -227,6 +227,7 @@ For example, the following directory structure:
 ```
 
 When accessing any path that does not match(For example `/blog/a`), the `routes/$.tsx` component will be rendered, because there is `layout.tsx` here, the rendered UI is as follows.
+
 ```tsx
 <RootLayout>
   <BlogLayout>
@@ -364,6 +365,17 @@ export default () => {
 };
 ```
 
+If you want to redirect in a component,you can navigate by `useNavigate` hook, for example:
+
+```ts title="routes/user/page.ts"
+import { useNavigate } from '@modern-js/runtime/router';
+
+export default () => {
+  const navigate = useNavigate();
+  navigate('/login');
+};
+```
+
 ### ErrorBoundary
 
 In each directory under `routes/`, developers can also define an `error.tsx` file that exports an `<ErrorBoundary>` component by default.
@@ -391,7 +403,6 @@ export const ErrorBoundary = () => {
 
 In each root `Layout` component (`routes/layout.ts`), you can dynamically define runtime configuration:
 
-
 ```tsx title="src/routes/layout.tsx"
 // Define runtime config
 import type { AppConfig } from '@modern-js/runtime';
@@ -489,6 +500,7 @@ To further improve the user experience and reduce loading time, Modern.js suppor
 ```
 
 :::info
+
 - This feature is currently only supported in Webpack projects and not yet supported in Rspack projects.
 - Preloading data currently only preloads the data returned by the [Data Loader](/guides/basic-features/data-fetch) in SSR projects.
 
@@ -508,13 +520,13 @@ The `prefetch` attribute has three optional values:
 - By using `render`, static assets will only be loaded when the system is idle, and will not compete with the static assets of the initial screen for network assets.
 - In the SSR scenario, data will also be pre-fetched.
 
-import Motivation from '@site-docs-en/components/convention-routing-motivation'
+import Motivation from '@site-docs-en/components/convention-routing-motivation';
 
-<Motivation/>
+<Motivation />
 
-import Practice from '@site-docs-en/components/routes-practice'
+import Practice from '@site-docs-en/components/routes-practice';
 
-<Practice/>
+<Practice />
 
 ## Self-controlled Routing
 

package/docs/en/guides/get-started/quick-start.mdx

@@ -91,23 +91,15 @@ $ pnpm run build
 
 > modern build
 
-info    Create a production build...
-
-info    File sizes after production build:
+info    Staring production build...
+ready   Client compiled in 50ms
+info    Production file sizes:
 
   File                                      Size         Gzipped
-  dist/static/js/lib-corejs.ffeb7fb8.js     214.96 kB    67.23 kB
-  dist/static/js/lib-react.09721b5c.js      152.61 kB    49.02 kB
-  dist/static/js/218.102e2f39.js            85.45 kB     28.5 kB
-  dist/static/js/lib-babel.a7bba875.js      11.93 kB     3.95 kB
-  dist/html/main/index.html                 5.84 kB      2.57 kB
-  dist/static/js/main.3568a38e.js           3.57 kB      1.44 kB
-  dist/static/css/async/304.c3c481a5.css    2.62 kB      874 B
-  dist/asset-manifest.json                  1.48 kB      349 B
-  dist/static/js/async/304.c45706bc.js      1.4 kB       575 B
-  dist/static/js/async/509.fcb06e14.js      283 B        230 B
-
- Client ✔ done in 3.57s
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
 By default, the build artifacts are generated in `dist/`, with the following directory structure:
@@ -135,8 +127,7 @@ $ pnpm run serve
 
 > modern serve
 
-Starting the modern server...
-info    App running at:
+info    Starting production server...
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/

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

@@ -8,11 +8,13 @@ sidebar_position: 3
 
 Modern.js provides the `upgrade` command to support upgrading the project to the latest version of Modern.js.
 
-Run `pnpm run upgrade` in the project:
+Run the `upgrade` script in the project:
 
-```bash
-$ pnpm run upgrade
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="run upgrade" />
 
+```bash
 > modern upgrade
 
 [INFO] [Project Type]: Web App
@@ -22,11 +24,15 @@ $ pnpm run upgrade
 
 You can see that the dependencies in the project's `package.json` have been updated to the latest version.
 
+:::tip
+If the `upgrade` command is not declared in the project's `package.json`, you can execute `npx modern upgrade` as an equivalent alternative.
+:::
+
 ## Upgrade to a specified version
 
 All packages of Modern.js are currently released with a **uniform version number**.
 
-import ReleaseNote from "@site-docs-en/components/release-note"
+import ReleaseNote from '@site-docs-en/components/release-note';
 
 <ReleaseNote />
 

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

@@ -170,6 +170,8 @@ export const myPlugin = (): CliPlugin => ({
 });
 ```
 
+Note that the setup function of the next plugin is not executed until the async setup function of the current plugin has finished. Therefore, you should avoid performing time-consuming asynchronous operations in the setup function to avoid slowing down the startup performance of the CLI.
+
 ## Adding Plugins
 
 Custom plugins can be used by following the instructions in the [plugins](/configure/app/plugins) section of the documentation. Below is the recommended way to implement plugins in Modern.js.

package/docs/en/guides/topic-detail/micro-frontend/c01-introduction.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 1
 title: Introduction
 ---
+
 # Introduction
 
 import MicroFrontend from '@modern-js/builder-doc/docs/en/shared/micro-frontend.md';