@modern-js/main-doc 2.58.2 → 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/community/blog/_meta.json

@@ -1,6 +1 @@
-[
-  "overview",
-  "v2-release-note",
-  "2022-0910-updates",
-  "2022-0708-updates"
-]
+["overview", "v2-release-note", "2022-0910-updates", "2022-0708-updates"]

package/docs/en/components/deploy.mdx

@@ -1 +1 @@
-After local verification, you can organize the artifacts in `dist/` into the structure required by the server for deployment.
+After local develop, you can refer to the [Deployment](/guides/basic-features/deploy.html) section to deploy the project to the server.

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/_meta.json

@@ -75,4 +75,4 @@
   },
   "app/builder-plugins",
   "app/auto-load-plugin"
-]
+]

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/swc.mdx

@@ -19,7 +19,7 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
 
 ## Used in Rspack mode
 
-You can set the options of [builtin:swc-loader](https://www.rspack.dev/guide/builtin-swc-loader) through `tools.swc`.
+You can set the options of [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) through `tools.swc`.
 
 ```
 import { defineConfig } from '@modern-js/app-tools';

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/bff/_meta.json

@@ -1,6 +1 @@
-[
-  "function",
-  "type",
-  "frameworks",
-  "sdk"
-]
+["function", "type", "frameworks", "sdk"]

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';
 
@@ -22,16 +22,9 @@ import InitRspackApp from '@site-docs-en/components/init-rspack-app';
 
 After the project is created, you can experience the project by running `pnpm run dev`. For more project information, please refer to [Quick Start](/guides/get-started/quick-start.html).
 
-:::tip
-When using Rspack as the bundler, the following Features are temporarily unavailable as some of the capabilities are still under development and we will provide support in the future.
-
-- The usage of [useLoader](/guides/basic-features/data/data-fetch.html) in Client Side Rendering
-
-:::
-
 ## 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';
@@ -39,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';
@@ -77,15 +70,9 @@ 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://www.rspack.dev/guide/builtin-swc-loader.html) for code translation in Rspack mode.
+Modern.js uses Rspack [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) for code translation in Rspack mode.
 
 Modern.js has provided a more convenient configuration for the common configuration of `builtin:swc-loader`, such as: configuring the component library to import it on demand through [source.transformImport](/configure/app/source/transform-import).
 
@@ -148,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.