@modern-js/main-doc 2.58.3 → 2.59.0

package/docs/en/apis/app/runtime/core/use-loader.mdx

@@ -52,7 +52,7 @@ function useLoader(loaderFn: LoaderFn, options: Options): ReturnData;
   - `initialData`: the initial data before the first execution,.
   - `skip`: when the value is `true`, the function does not execute.
   - `params`: when the result of the `params` serialization changes, the function is re-executed. `params` is also passed in as the second argument of the function.
-  - `static`: when the value is `true`, `useLoader` is used for [SSG](/guides/advanced-features/ssg).
+  - `static`: when the value is `true`, `useLoader` is used for [SSG](/guides/basic-features/render/ssg).
 
 ### Return Value
 

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

@@ -4,7 +4,6 @@
 ? Please select the type of project you want to create: Web App
 ? Please select the programming language: TS
 ? Please select the package manager: pnpm
-? Please select the bundler: webpack
 ```
 
 After create the project, Modern.js will automatically install dependencies and create a git repository.

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

@@ -3,5 +3,4 @@ $ npx @modern-js/create@latest myapp
 ? Please select the type of project you want to create: Web App
 ? Please select the programming language: TS
 ? Please select the package manager: pnpm
-? Please select the bundler: Rspack
 ```

package/docs/en/components/ssr-monitor.mdx

@@ -0,0 +1,3 @@
+:::note
+Coming soon
+:::

package/docs/en/configure/app/output/ssg.mdx

@@ -4,46 +4,24 @@ title: ssg
 
 # output.ssg
 
-- **Type:** `boolean` | `object` | `function`
-- **Default:** `undefined`
+- **Type:** `boolean` | `object`
+- **Default Value:** `undefined`
 
-Enable the SSG for **Self-controlled Routing** or **Conventional Routing**.
+Configuration to enable the application’s SSG (Static Site Generation) feature.
 
-:::info Enable SSG
-This configuration will only be available when the SSG feature is enabled. Please read the [Static Site Generation](/guides/advanced-features/ssg) documentation to learn how to enable the SSG feature.
+:::tip Enabling SSG
+This configuration takes effect only when SSG is enabled. Please read the [Static Site Generation](/guides/basic-features/render/ssg) documentation to understand how to enable SSG and its use cases.
 :::
 
-:::info
-For more routes detail, see [Routing](/guides/basic-features/routes).
-
+:::info Recommended Reading
+The SSG feature is closely related to routing. It is recommended to understand the [routing solution](/guides/basic-features/routes) before using SSG.
 :::
 
-## Example
-
-### Single Entry
-
-When the configuration is set to `true`, the SSG of all entries will be enabled by default.
-
-For **self-controlled routing**, the root route of the entry will be rendered. For **convention routing**, every route in the entry will be rendered.
-
-For example, the `src/` directory has the following file structure that satisfies **conventional routing**:
-
-```bash
-.
-├── src
-│   └── routes
-│       ├── layout.tsx
-│       ├── page.tsx
-│       └── user
-│           ├── layout.tsx
-│           ├── page.tsx
-│           └── profile
-│               └── page.tsx
-```
+## Boolean Type
 
-Make the following config in `modern.config.[tj]s`:
+When this configuration is set to `true`, the SSG feature will be enabled for all entries by default. For **manual routing**, the root route of the entry will be rendered. For **conventional routing**, each route in the entry will be rendered.
 
-```ts
+```js
 export default defineConfig({
   output: {
     ssg: true,
@@ -51,39 +29,20 @@ export default defineConfig({
 });
 ```
 
-After executing `pnpm build` to build the application. The `dist/` directory will generate three HTML for each of the three routes (only one HTML if SSG not enabled), and all HTML has been rendered.
-
-For example the following **self-controlled routing**:
-
-import SelfRouteExample from "@site-docs/components/self-route-example";
-
-<SelfRouteExample />
-
-Also using the above configuration, after executing `pnpm run build`, only the entry route `/` will generate the rendered HTML.
+`output.ssg` can also be configured per entry, with the rules for effective configurations determined by the entry's routing method.
 
-### Multi Entries
-
-`output.ssg` can also be configured according to the entries, and the rules that the configuration takes effect are also determined by the entries routing method.
-
-For example the following directory structure:
+For example, given the following directory structure, there are conventional routing entry `entryA` and manual routing entry `entryB`:
 
 ```bash
 .
-├── src
-│   ├── entryA
-│   │   └── routes
-│   │       ├── layout.tsx
-│   │       ├── page.tsx
-│   │       └── user
-│   │           ├── layout.tsx
-│   │           ├── page.tsx
-│   │           └── profile
-│   │               └── page.tsx
-│   └── entryB
-│       └── App.tsx
+└── src
+    ├── entryA
+    │   └── routes
+    └── entryB
+        └── App.tsx
 ```
 
-By default, all entryA entrances are rendered at build time after setting `output.ssg` to `true`. You can configure `false` to cancel the default behavior of the specified entries. For example, to cancel the rendering of the `entryA` at build time:
+You can specify different SSG configurations for `entryA` and `entryB`:
 
 ```js
 export default defineConfig({
@@ -96,107 +55,59 @@ export default defineConfig({
 });
 ```
 
-### Configure Route
-
-As mentioned above, **Self-Controlled Routing** only enables SSG configuration for entries route by default.
-
-Set specific routes in `output.ssg` can tell Modern.js to enable the SSG of these client side routes. For example, the content of the above `src/App.tsx` file is:
-
-<SelfRouteExample />
-
-
-When set like this in `modern.config.[jt]s`, the `/about` route will also enable SSG:
-
-```js
-export default defineConfig({
-  output: {
-    ssg: {
-      routes: ['/', '/about'],
-    },
-  },
-});
-```
-
-Modern.js will automatically concat the complete URL according to the entry and hand it over to the SSG plugin to complete the rendering.
-
-Request headers can also be configured for specific entries or routes, for example:
-
-```js
-export default defineConfig({
-  output: {
-    ssg: {
-      headers: {},
-      routes: [
-        '/',
-        {
-          url: '/about',
-          headers: {},
-        },
-      ],
-    },
-  },
-});
-```
-
 :::info
-The `headers` set in the route override the `headers` set in the entry.
-
+For more information on the default behavior of **conventional routing** and **manual routing** after enabling SSG, please read [Static Site Generation](/guides/basic-features/render/ssg).
 :::
 
-### Prevent Default
+## Object Type
 
-By default, **Conventional Routing** all turn on SSG. Modern.js provides another field to prevent the default SSG behavior.
+When the value type is `Object`, the following attributes can be configured.
 
-For example, the following directory structure , `/`、`/user` and `/user/profle` all have SSG enabled:
+### Configuration Type
 
-```bash
-.
-├── src
-│   └── routes
-│       ├── layout.tsx
-│       ├── page.tsx
-│       └── user
-│           ├── layout.tsx
-│           ├── page.tsx
-│           └── profile
-│               └── page.tsx
-```
-
-You can set this to disable the default behavior of a client-side route:
 
-```js
-export default defineConfig({
-  output: {
-    ssg: {
-      preventDefault: ['/user'],
-    },
-  },
-});
+```ts
+type SSGRouteOptions = string | {
+  url: string;
+  params?: Record<string, any>[];
+  headers?: Record<string, any>;
+};
+
+type SSGOptions = {
+  preventDefault?: string[];
+  headers?: Record<string, any>;
+  routes?: SSGRouteOptions[];
+};
 ```
 
-### Dynamic Params
+### Example
 
-Some routes may be dynamic, such as the `/user/:id` in a self-controlled route or the route generated by the `user/[id]/page.tsx` file in a conventional route.
+In the example configuration below, SSG will render the pages corresponding to the `/`, `/about`, and `/user/:id` routes.
 
-configure specific parameters in `output.ssg` to render the route of the specified parameters, for example:
+For the `/user/:id` route, `cookies` will be added to the request headers, and the `id` in `params` will be replaced with `modernjs`.
 
-```js
+```ts title="modern.config.ts"
 export default defineConfig({
   output: {
     ssg: {
       routes: [
+        '/', 
+        '/about',         
         {
           url: '/user/:id',
-          params: [
-            {
-              id: 'modernjs',
-            },
-          ],
-        },
+          headers: {
+            cookies: "name=modernjs"
+          },
+          params: [{
+            id: 'modernjs',
+          }],
+        }
       ],
-    },
-  },
+    }
+  }
 });
 ```
 
-The features of dynamic routing and SSG is useful when generating static pages in real time based on CMS system.
+:::note
+The configuration method for multiple entries is the same as for a single entry, so it will not be explained further here.
+:::

package/docs/en/configure/app/tools/tailwindcss.mdx

@@ -23,7 +23,7 @@ Used to modify the configuration of [Tailwind CSS](https://tailwindcss.com/docs/
 
 Before using `tools.tailwindcss`, you need to enable the Tailwind CSS plugin for Modern.js.
 
-Please refer to the section [Using Tailwind CSS](/guides/basic-features/css.html#using-tailwind-css) for instructions on how to enable it.
+Please refer to the section [Using Tailwind CSS](/guides/basic-features/css/tailwindcss) for instructions on how to enable it.
 
 ### Function Type
 

package/docs/en/guides/advanced-features/_meta.json

@@ -7,13 +7,6 @@
     "collapsed": true
   },
   "code-split",
-  {
-    "type": "dir",
-    "name": "ssr",
-    "label": "use-ssr",
-    "collapsed": true
-  },
-  "ssg",
   "compatibility",
   "eslint",
   "low-level",
@@ -21,6 +14,5 @@
   "build-performance",
   "inline-assets",
   "optimize-bundle",
-  "using-storybook",
   "web-server"
 ]

package/docs/en/guides/advanced-features/rsbuild-plugin.mdx

@@ -41,8 +41,8 @@ Here are the official Rsbuild plugins built into Modern.js:
 | [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | Used to customize CSS minimizer, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
 | [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | Provides support for the Pug template engine                                                                 | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
 | [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem)                                      | Implements the rem adaptive layout for mobile pages                                                          | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/json-files.html#toml-file)                                                                         |
-| [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/json-files.html#yaml-file)                                                                         |
+| [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/static-assets/json-files.html#toml-file)                                                                         |
+| [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/static-assets/json-files.html#yaml-file)                                                                         |
 
 ### Un-builtin Plugins
 

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

@@ -8,13 +8,13 @@ import Rspack from '@modern-js/builder-doc/docs/en/shared/rspackTip.mdx';
 
 <Rspack />
 
-**Modern.js provides out-of-the-box Rspack support**, so you can switch between the stable Webpack and the faster Rspack.
+**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:
+The Modern.js new project has enabled Rspack by default. Just execute [Initialize Project](/guides/get-started/quick-start.html#initialize) to create an Rspack project:
 
 import InitRspackApp from '@site-docs-en/components/init-rspack-app';
 
@@ -24,7 +24,7 @@ After the project is created, you can experience the project by running `pnpm ru
 
 ## Enable Rspack build
 
-Since Modern.js MAJOR_VERSION.46.0, you can enable Rspack build by add the following configuration in `modern.config.ts`:
+Since Modern.js MAJOR_VERSION.59.0, you can enable Rspack build by add the following configuration in `modern.config.ts`:
 
 ```diff title=modern.config.ts
 import { appTools, defineConfig } from '@modern-js/app-tools';
@@ -32,14 +32,14 @@ import { appTools, defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   plugins: [
     appTools({
-+     bundler: 'experimental-rspack',
++     bundler: 'rspack',
     }),
   ],
 });
 ```
 
 :::tip
-If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by executing `npx modern upgrade`.
+If your current version is lower than MAJOR_VERSION.59.0, you can upgrade by executing `npx modern upgrade`.
 :::
 
 import RspackPrecautions from '@modern-js/builder-doc/docs/en/shared/rspackPrecautions.md';
@@ -70,12 +70,6 @@ export default {
 };
 ```
 
-:::tip
-After turning on the Rspack build capability, there are currently a small number of configurations that are not supported in Rspack, such as [source.moduleScopes](/configure/app/source/module-scopes), [security.sri](/configure/app/security/sri) etc.
-
-For unsupported configurations, we have marked `Bundler: only support webpack` or `Bundler: only support Rspack` in the document. Please refer to the specific configuration introduction.
-:::
-
 ## Modify transpile configuration
 
 Modern.js uses Rspack [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) for code translation in Rspack mode.
@@ -141,9 +135,7 @@ If you need to use the nightly/canary version of Rspack, the package name of the
       "@rspack/plugin-react-refresh": "npm:@rspack/plugin-react-refresh-canary@nightly"
     },
     "peerDependencyRules": {
-      "allowAny": [
-        "@rspack/*"
-      ]
+      "allowAny": ["@rspack/*"]
     }
   }
 }

package/docs/en/guides/basic-features/_meta.json

@@ -1,5 +1,4 @@
 [
-  "css",
   "routes",
   {
     "type": "dir",
@@ -7,16 +6,39 @@
     "label": "data-solution",
     "collapsed": true
   },
+  {
+    "type": "dir",
+    "name": "render",
+    "label": "rendering",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "css",
+    "label": "css-solution",
+    "collapsed": true
+  },
+  "html",
+  {
+    "type": "dir",
+    "name": "static-assets",
+    "label": "static-assets",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "debug",
+    "label": "debug",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "testing",
+    "label": "testing",
+    "collapsed": true
+  },
   "alias",
-  "mock",
-  "proxy",
   "env-vars",
-  "html",
   "output-files",
-  "static-assets",
-  "svg-assets",
-  "json-files",
-  "wasm-assets",
-  "css-modules",
   "deploy"
 ]

package/docs/en/guides/basic-features/css/_meta.json

@@ -0,0 +1 @@
+["css", "css-modules", "css-in-js", "tailwindcss"]

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

@@ -0,0 +1,34 @@
+# Using CSS-in-JS
+
+CSS-in-JS is a technique that allows you to write CSS styles in JS files.
+
+Modern.js integrates the popular CSS-in-JS implementation library [styled-components](https://styled-components.com/), which uses the new JavaScript feature [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write component CSS styles. You can directly import the API of [styled-components](https://styled-components.com/) from `@modern-js/runtime/styled` for use.
+
+When you need to write a `div` component with an internal font color of red, you can implement it as follows:
+
+```js
+import styled from '@modern-js/runtime/styled';
+
+const RedDiv = styled.div`
+  color: red;
+`;
+```
+
+If you need to dynamically set component styles based on the component's `props`, for example, the `primary` property of `props` is `true`, the button color is white, otherwise it is red, you can implement the code as follows:
+
+```js
+import styled from '@modern-js/runtime/styled';
+
+const Button = styled.button`
+  color: ${props => (props.primary ? 'white' : 'red')};
+  font-size: 1em;
+`;
+```
+
+For more usage of styled-components, please refer to [styled-components official website](https://styled-components.com/).
+
+Modern.js integrates Babel's [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) plugin internally, and you can configure the plugin through [tools.styledComponents](/configure/app/tools/styled-components).
+
+:::tip
+If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.npmjs.com/package/styled-jsx) and [Emotion](https://emotion.sh/), you need to install the corresponding dependencies first. For specific usage, please refer to the library's official website.
+:::

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

@@ -1,7 +1,3 @@
----
-sidebar_position: 14
----
-
 # Use CSS Modules
 
 [CSS Modules](https://github.com/css-modules/css-modules) allows us to write CSS code in a modular way, and these styles can be imported and used in JavaScript files. Using CSS Modules can automatically generate unique class names, isolate styles between different modules, and avoid class name conflicts.

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

@@ -0,0 +1,25 @@
+---
+sidebar_position: 1
+---
+
+# Styling
+
+Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.
+
+## Using Less, Sass and Stylus
+
+Modern.js has built-in popular community CSS preprocessors, including Less and Sass.
+
+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).
+
+## 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.
+
+## Using Uno CSS
+
+Please read the [Rsbuild - Using UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) for detailed usage.

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

@@ -1,65 +1,4 @@
----
-sidebar_position: 1
----
-
-# Styling
-
-Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.
-
-## Using Less, Sass and Stylus
-
-Modern.js has built-in popular community CSS preprocessors, including Less and Sass.
-
-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).
-
-## 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.
-
-## Using CSS Modules
-
-Please read the [Using CSS Modules](/guides/basic-features/css-modules) section to learn about the complete usage of CSS Modules.
-
-## Using CSS-in-JS
-
-CSS-in-JS is a technique that allows you to write CSS styles in JS files.
-
-Modern.js integrates the popular CSS-in-JS implementation library [styled-components](https://styled-components.com/), which uses the new JavaScript feature [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write component CSS styles. You can directly import the API of [styled-components](https://styled-components.com/) from `@modern-js/runtime/styled` for use.
-
-When you need to write a `div` component with an internal font color of red, you can implement it as follows:
-
-```js
-import styled from '@modern-js/runtime/styled';
-
-const RedDiv = styled.div`
-  color: red;
-`;
-```
-
-If you need to dynamically set component styles based on the component's `props`, for example, the `primary` property of `props` is `true`, the button color is white, otherwise it is red, you can implement the code as follows:
-
-```js
-import styled from '@modern-js/runtime/styled';
-
-const Button = styled.button`
-  color: ${props => (props.primary ? 'white' : 'red')};
-  font-size: 1em;
-`;
-```
-
-For more usage of styled-components, please refer to [styled-components official website](https://styled-components.com/).
-
-Modern.js integrates Babel's [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) plugin internally, and you can configure the plugin through [tools.styledComponents](/configure/app/tools/styled-components).
-
-:::tip
-If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.npmjs.com/package/styled-jsx) and [Emotion](https://emotion.sh/), you need to install the corresponding dependencies first. For specific usage, please refer to the library's official website.
-:::
-
-## Using Tailwind CSS
+# 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.
 
@@ -112,7 +51,7 @@ const Hello = () => (
 );
 ```
 
-### Configuring Tailwind CSS
+## Configuring Tailwind CSS
 
 In Modern.js, you have two ways to configure Tailwind CSS:
 
@@ -144,7 +83,7 @@ export default {
 
 If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
 
-### Tailwind CSS Autocomplete
+## Tailwind CSS Autocomplete
 
 Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
 
@@ -153,7 +92,7 @@ You can follow the steps below to enable the autocomplete feature:
 1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
 2. If the root directory of your project does not have a `tailwind.config.{ts,js}` file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.
 
-### Tailwind CSS Version
+## Tailwind CSS Version
 
 Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the `tailwindcss` dependency in the project `package.json` file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.
 
@@ -162,7 +101,7 @@ If your project is still using Tailwind CSS v2, we recommend that you upgrade to
 - [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3)
 - [Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide)
 
-### Browser Compatibility
+## Browser Compatibility
 
 Tailwind CSS v2 and v3 do not support the IE 11 browser, please refer to: