@modern-js/main-doc 2.60.0 → 2.60.1

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

@@ -4,7 +4,7 @@ title: ssg
 
 # output.ssg
 
-- **Type:** `boolean` | `object`
+- **Type:** `boolean | object`
 - **Default Value:** `undefined`
 
 Configuration to enable the application’s SSG (Static Site Generation) feature.
@@ -65,13 +65,14 @@ When the value type is `Object`, the following attributes can be configured.
 
 ### Configuration Type
 
-
 ```ts
-type SSGRouteOptions = string | {
-  url: string;
-  params?: Record<string, any>[];
-  headers?: Record<string, any>;
-};
+type SSGRouteOptions =
+  | string
+  | {
+      url: string;
+      params?: Record<string, any>[];
+      headers?: Record<string, any>;
+    };
 
 type SSGOptions = {
   preventDefault?: string[];
@@ -91,23 +92,25 @@ export default defineConfig({
   output: {
     ssg: {
       routes: [
-        '/', 
-        '/about',         
+        '/',
+        '/about',
         {
           url: '/user/:id',
           headers: {
-            cookies: "name=modernjs"
+            cookies: 'name=modernjs',
           },
-          params: [{
-            id: 'modernjs',
-          }],
-        }
+          params: [
+            {
+              id: 'modernjs',
+            },
+          ],
+        },
       ],
-    }
-  }
+    },
+  },
 });
 ```
 
 :::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/output/svg-default-export.mdx

@@ -4,6 +4,31 @@ title: svgDefaultExport
 
 # output.svgDefaultExport
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/svgDefaultExport.md';
+- **Type:** `'url' | 'component'`
+- **Default:** `'url'`
 
-<Main />
+`output.svgDefaultExport` is used to configure the default export type of SVG files.
+
+When `output.svgDefaultExport` is set to `url` , the default export of SVG files is the URL of the file. For example:
+
+```js
+import logo from './logo.svg';
+
+console.log(logo); // => asset url
+```
+
+When `output.svgDefaultExport` is set to `component` , the default export of SVG files is the React component of the file. For example:
+
+```js
+import Logo from './logo.svg';
+
+console.log(Logo); // => React Component
+```
+
+At this time, you can also specify the `?url` query to import the URL, for example:
+
+```js
+import logo from './logo.svg?url';
+
+console.log(logo); // => asset url
+```

package/docs/en/configure/app/performance/build-cache.mdx

@@ -4,6 +4,82 @@ title: buildCache
 
 # performance.buildCache
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/buildCache.md';
+- **Type:**
 
-<Main />
+```ts
+type BuildCacheConfig =
+  | {
+      /**
+       * Base directory for the filesystem cache.
+       */
+      cacheDirectory?: string;
+      /**
+       * Set different cache names based on cacheDigest content.
+       */
+      cacheDigest?: Array<string | undefined>;
+    }
+  | boolean;
+```
+
+- **Default:**
+
+```js
+const defaultBuildCacheConfig = {
+  cacheDirectory: './node_modules/.cache/webpack',
+};
+```
+
+- **Bundler:** `only support webpack`
+
+Controls the caching behavior during the build process.
+
+Modern.js will enable build cache by default to improve the compile speed, the generated cache files are write to the `./node_modules/.cache/webpack` directory by default.
+
+You can configure the cache path with `buildCache`, e.g.
+
+```js
+export default {
+  performance: {
+    buildCache: {
+      cacheDirectory: './node_modules/.custom_cache/webpack',
+    },
+  },
+};
+```
+
+You can also disable the build cache by setting it to `false`:
+
+```js
+export default {
+  performance: {
+    buildCache: false,
+  },
+};
+```
+
+### cacheDigest
+
+`cacheDigest` is used to add some environment variables that will affect the build results. Modern.js will set the cache name based on the `cacheDigest` content and the current build mode to ensure that different cacheDigests can hit different caches.
+
+#### Example
+
+The current project needs to set different extensions according to different `APP_ID`. By default, since the code & configuration & dependencies of the current project have not changed, the previous cache will be hit.
+
+By adding `APP_ID` to `cacheDigest`, different cache results will be searched when APP_ID changes, thereby avoiding hitting cache results that do not meet expectations.
+
+```js
+export default {
+  tools: {
+    bundlerChain: (chain: any) => {
+      if (process.env.APP_ID === 'xxx') {
+        chain.resolve.extensions.prepend('.ttp.ts');
+      }
+    },
+  },
+  performance: {
+    buildCache: {
+      cacheDigest: [process.env.APP_ID],
+    },
+  },
+};
+```

package/docs/en/configure/app/performance/bundle-analyze.mdx

@@ -1,9 +1,25 @@
 ---
 title: bundleAnalyze
+configName: performance.bundleAnalyze
 ---
 
 # performance.bundleAnalyze
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/bundleAnalyze.md';
+- **Type:** `Object | undefined`
 
-<Main />
+Used to enable the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) plugin to analyze the size of the output.
+
+By default, Modern.js does not enable `webpack-bundle-analyzer`. When this feature is enabled, the default configuration is as follows:
+
+```js
+const defaultConfig = {
+  analyzerMode: 'static',
+  openAnalyzer: false,
+  // Distinguish by target names, such as `web`, `node`, etc.
+  reportFilename: `report-${target}.html`,
+};
+```
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/performance/chunk-split.mdx

@@ -1,9 +1,45 @@
 ---
 title: chunkSplit
+configName: performance.chunkSplit
 ---
 
 # performance.chunkSplit
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/chunkSplit.md';
+- **Type:** `Object`
+- **Default:** `{ strategy: 'split-by-experience' }`
 
-<Main />
+`performance.chunkSplit` is used to configure the chunk splitting strategy. The type of `ChunkSplit` is as follows:
+
+```ts
+type ForceSplitting = RegExp[] | Record<string, RegExp>;
+
+interface BaseChunkSplit {
+  strategy?:
+    | 'split-by-module'
+    | 'split-by-experience'
+    | 'all-in-one'
+    | 'single-vendor';
+  override?: SplitChunks;
+  forceSplitting?: ForceSplitting;
+}
+
+interface SplitBySize {
+  strategy?: 'split-by-size';
+  minSize?: number;
+  maxSize?: number;
+  override?: SplitChunks;
+  forceSplitting?: ForceSplitting;
+}
+
+interface SplitCustom {
+  strategy?: 'custom';
+  splitChunks?: SplitChunks;
+  forceSplitting?: ForceSplitting;
+}
+
+export type ChunkSplit = BaseChunkSplit | SplitBySize | SplitCustom;
+```
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/performance/dns-prefetch.mdx

@@ -1,9 +1,20 @@
 ---
 title: dnsPrefetch
+configName: performance.dnsPrefetch
 ---
 
 # performance.dnsPrefetch
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/dnsPrefetch.md';
+- **Type:** `undefined | string[]`
 
-<Main />
+- **Default:** `undefined`
+
+Specifies that the user agent should preemptively perform DNS resolution for the target resource's origin, refer to [dns-prefetch](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/dns-prefetch).
+
+After this property is set, the domain name can be resolved before the resource is requested, reducing request latency and improving loading performance.
+
+See [Using dns-prefetch](https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch) for more details.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/performance/preconnect.mdx

@@ -1,9 +1,21 @@
 ---
 title: preconnect
+configName: performance.preconnect
 ---
 
 # performance.preconnect
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/preconnect.md';
+- **Type:** `undefined | Array<string | PreconnectOption>`
 
-<Main />
+```ts
+interface PreconnectOption {
+  href: string;
+  crossorigin?: boolean;
+}
+```
+
+- **Default:** `undefined`
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/performance/prefetch.mdx

@@ -1,9 +1,26 @@
 ---
 title: prefetch
+configName: performance.prefetch
 ---
 
 # performance.prefetch
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/prefetch.md';
+- **Type:** `undefined | true | PrefetchOption`
 
-<Main />
+```ts
+type IncludeType = 'async-chunks' | 'initial' | 'all-assets' | 'all-chunks';
+
+type Filter = Array<string | RegExp> | ((filename: string) => boolean);
+
+interface PrefetchOption {
+  type?: IncludeType;
+  include?: Filter;
+  exclude?: Filter;
+}
+```
+
+- **Default:** `undefined`
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/performance/preload.mdx

@@ -1,9 +1,28 @@
 ---
 title: preload
+configName: performance.preload
 ---
 
 # performance.preload
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/preload.md';
+- **Type：** `undefined | true | PreloadOption`
 
-<Main />
+```ts
+type IncludeType = 'async-chunks' | 'initial' | 'all-assets' | 'all-chunks';
+
+type Filter = Array<string | RegExp> | ((filename: string) => boolean);
+
+interface PreloadOption {
+  type?: IncludeType;
+  include?: Filter;
+  exclude?: Filter;
+}
+```
+
+- **Default：** `undefined`
+
+Inject the [`<link rel="preload">`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel/preload) tags for the static assets generated by Rsbuild.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/performance/print-file-size.mdx

@@ -1,9 +1,45 @@
 ---
 title: printFileSize
+configName: performance.printFileSize
 ---
 
 # performance.printFileSize
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/printFileSize.md';
+- **Type:**
 
-<Main />
+```ts
+type PrintFileSizeOptions =
+  | {
+      /**
+       * whether to print total size
+       */
+      total?: boolean;
+      /**
+       * whether to print size of each file
+       */
+      detail?: boolean;
+      /**
+       * whether to print gzip-compressed size
+       */
+      compressed?: boolean;
+    }
+  | boolean;
+```
+
+- **Default:** `true`
+
+Whether to print the file sizes after production build.
+
+```bash
+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
+```
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/performance/profile.mdx

@@ -1,9 +1,15 @@
 ---
 title: profile
+configName: performance.profile
 ---
 
 # performance.profile
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/profile.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Whether capture timing information for each module, same as the [profile](https://webpack.js.org/configuration/other-options/#profile) config of Rspack.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/performance/remove-console.mdx

@@ -1,9 +1,15 @@
 ---
 title: removeConsole
+configName: performance.removeConsole
 ---
 
 # performance.removeConsole
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/removeConsole.md';
+- **Type:** `boolean | ConsoleType[]`
+- **Default:** `false`
 
-<Main />
+Whether to remove `console.[methodName]` in production build.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/performance/remove-moment-locale.mdx

@@ -1,9 +1,15 @@
 ---
 title: removeMomentLocale
+configName: performance.removeMomentLocale
 ---
 
 # performance.removeMomentLocale
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/removeMomentLocale.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Whether to remove the locales of [moment.js](https://momentjs.com/).
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/performance/transform-lodash.mdx

@@ -4,6 +4,46 @@ title: transformLodash
 
 # performance.transformLodash
 
-import Main from '@modern-js/builder-doc/docs/en/config/performance/transformLodash.md';
+- **Type:** `boolean`
+- **Default:** `true`
+- **Bundler:** `only support webpack`
 
-<Main />
+Specifies whether to modularize the import of [lodash](https://www.npmjs.com/package/lodash) and remove unused lodash modules to reduce the code size of lodash.
+
+This optimization is implemented using [babel-plugin-lodash](https://www.npmjs.com/package/babel-plugin-lodash) and [swc-plugin-lodash](https://github.com/web-infra-dev/swc-plugins/tree/main/crates/plugin_lodash) under the hood.
+
+### Example
+
+This option is enabled by default, and Modern.js will automatically redirects the code references of `lodash` to sub-paths.
+
+For example:
+
+```ts title="input.js"
+import _ from 'lodash';
+import { add } from 'lodash/fp';
+
+const addOne = add(1);
+_.map([1, 2, 3], addOne);
+```
+
+The transformed code will be:
+
+```ts title="output.js"
+import _add from 'lodash/fp/add';
+import _map from 'lodash/map';
+
+const addOne = _add(1);
+_map([1, 2, 3], addOne);
+```
+
+### Disabling the Transformation
+
+In some cases, the import transformation of `lodash` may generate unexpected code. In such cases, you can manually disable this optimization:
+
+```js
+export default {
+  performance: {
+    transformLodash: false,
+  },
+};
+```

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

@@ -15,7 +15,7 @@ Refer to [How to Develop Plugins](/plugin/plugin-system/implement) for how to wr
 
 This option is used to configure framework plugins. If you need to configure other types of plugins, please choose the corresponding configuration method:
 
-- Use [builderPlugins](/configure/app/builder-plugins) to configure Modern.js Builder plugins.
+- Use [builderPlugins](/configure/app/builder-plugins) to configure Rsbuild 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.
 

package/docs/en/configure/app/security/check-syntax.mdx

@@ -4,6 +4,70 @@ title: checkSyntax
 
 # security.checkSyntax
 
-import Main from '@modern-js/builder-doc/docs/en/config/security/checkSyntax.md';
+- **Type:**
 
-<Main />
+```ts
+type CheckSyntax =
+  | boolean
+  | {
+      targets?: string[];
+      exclude?: RegExp | RegExp[];
+      ecmaVersion?: EcmaVersion;
+    };
+```
+
+- **Default:** `false`
+
+Used to analyze whether there is incompatible advanced syntax in the build artifacts under the current browser scope. If any incompatible syntax is found, detailed information will be printed to the terminal.
+
+### Enable Detection
+
+You can set `checkSyntax` to `true` to enable syntax checking.
+
+```ts
+export default {
+  security: {
+    checkSyntax: true,
+  },
+};
+```
+
+When you enable `checkSyntax`, Modern.js will perform the detection during production builds. If any incompatible advanced syntax is detected in the build artifacts, error logs will be printed to the terminal, and the current build process will be terminated.
+
+### Error Logs
+
+The format of the error logs is as follows, including the source file, artifact location, error reason, and source code:
+
+```bash
+error   [Syntax Checker] Find some syntax errors after production build:
+
+  Error 1
+  source:  /node_modules/foo/index.js:1:0
+  output:  /dist/static/js/main.3f7a4d7e.js:2:39400
+  reason:  Unexpected token (1:178)
+  code:
+     9 |
+    10 | var b = 2;
+    11 |
+  > 12 | console.log(() => {
+    13 |   return a + b;
+    14 | });
+    15 |
+```
+
+:::tip
+Currently, syntax checking is implemented based on AST parser. Each time it performs a check, it can only identify the first incompatible syntax found in the file. If there are multiple incompatible syntaxes in the file, you need to fix the detected syntax and re-run the check.
+If the corresponding source location is not shown in the log, try setting **output.disableMinimize** to true and rebuild again.
+:::
+
+### Solutions
+
+If a syntax error is detected, you can handle it in the following ways:
+
+- If you want to downgrade this syntax to ensure good code compatibility, you can compile the corresponding module through the `source.include` config.
+- If you don't want to downgrade the syntax, you can adjust the project's browserslist to match the syntax.
+- If you do not want to check the syntax of certain products, you can use the `checkSyntax.exclude` configuration to exclude the files to be checked.
+
+### Options
+
+`security.checkSyntax` is implemented based on `@rsbuild/plugin-check-syntax`. For specific options, please refer to [@rsbuild/plugin-check-syntax](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax).

package/docs/en/configure/app/security/nonce.mdx

@@ -1,9 +1,20 @@
 ---
 title: nonce
+configName: security.nonce
 ---
 
 # security.nonce
 
-import Main from '@modern-js/builder-doc/docs/en/config/security/nonce.md';
+- **Type:**
 
-<Main />
+```ts
+type Nonce = string;
+```
+
+- **Default:** `undefined`
+
+Adding a `nonce` attribute to the scripts resources introduced for HTML. This allows the browser to determine whether the script can be executed when it parses inline scripts with matching nonce values.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/security/sri.mdx

@@ -1,9 +1,26 @@
 ---
 title: sri
+configName: security.sri
 ---
 
 # security.sri
 
-import Main from '@modern-js/builder-doc/docs/en/config/security/sri.md';
+- **Type**
 
-<Main />
+```ts
+type SriOptions = {
+  hashFuncNames?: [string, ...string[]];
+  enabled?: 'auto' | true | false;
+  hashLoading?: 'eager' | 'lazy'; // only support webpack
+};
+```
+
+- **Default:** `undefined`
+
+Adding an `integrity` attribute to `<script>` and `<link rel="stylesheet">` tags introduced by HTML allows the browser to verify the integrity of the introduced resource, thus preventing tampering with the downloaded resource.
+
+:::info
+For a specific introduction to SRI, you can refer to [Rsbuild security.sri](https://rsbuild.dev/zh/config/security/sri).
+
+This configuration type is not completely consistent with Rsbuild and will be automatically converted during the build process.
+:::

package/docs/en/configure/app/server/port.mdx

@@ -1,5 +1,6 @@
 ---
 title: port
+configName: server.port
 ---
 
 # server.port
@@ -36,3 +37,7 @@ export default defineConfig({
   },
 });
 ```
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />