@modern-js/main-doc 2.60.0 → 2.60.1-alpha.0

package/docs/en/configure/app/output/disable-svgr.mdx

@@ -4,6 +4,17 @@ title: disableSvgr
 
 # output.disableSvgr
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/disableSvgr.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Whether to transform SVGs into React components. If true, will treat all .svg files as assets.
+
+By default, when an SVG resource is referenced in a JS file, Modern.js will call SVGR to convert the SVG into a React component. If you are sure that all SVG resources in your project are not being used as React components, you can turn off this conversion by setting `disableSvgr` to true to improve build performance.
+
+```js
+export default {
+  output: {
+    disableSvgr: true,
+  },
+};
+```

package/docs/en/configure/app/output/disable-ts-checker.mdx

@@ -4,6 +4,50 @@ title: disableTsChecker
 
 # output.disableTsChecker
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/disableTsChecker.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Whether to disable TypeScript type checker during compilation.
+
+By default, Modern.js will run the TypeScript type checker in a separate process during the build process. Its checking logic is consistent with TypeScript's native `tsc` command. You can use `tsconfig.json` or `tools.tsChecker` config to customize the checking behavior.
+
+### Blocking Compilation
+
+- In development build, type errors will not block the compilation process.
+- In production build, type errors will cause the build to fail to ensure the stability of the production code.
+
+### Example
+
+Disable TypeScript type checker:
+
+```js
+export default {
+  output: {
+    disableTsChecker: true,
+  },
+};
+```
+
+Disable type checker in development:
+
+```js
+export default {
+  output: {
+    disableTsChecker: process.env.NODE_ENV === 'development',
+  },
+};
+```
+
+Disable type checker in production:
+
+```js
+export default {
+  output: {
+    disableTsChecker: process.env.NODE_ENV === 'production',
+  },
+};
+```
+
+:::tip
+It is not recommended to disable type checker in production, which will reduce the stability of the production code, please use it with caution.
+:::

package/docs/en/configure/app/output/dist-path.mdx

@@ -1,9 +1,46 @@
 ---
 title: distPath
+configName: output.distPath
 ---
 
 # output.distPath
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/distPath.md';
+- **Type：**
 
-<Main />
+```ts
+type DistPathConfig = {
+  root?: string;
+  html?: string;
+  js?: string;
+  css?: string;
+  svg?: string;
+  font?: string;
+  wasm?: string;
+  image?: string;
+  media?: string;
+  server?: string;
+  worker?: string;
+};
+```
+
+- **Default：**
+
+```js
+const defaultDistPath = {
+  root: 'dist',
+  css: 'static/css',
+  svg: 'static/svg',
+  font: 'static/font',
+  html: 'html',
+  wasm: 'static/wasm',
+  image: 'static/image',
+  media: 'static/media',
+  js: 'static/js',
+};
+```
+
+Set the directory of the dist files. Modern.js will output files to the corresponding subdirectory according to the file type.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/output/enable-asset-fallback.mdx

@@ -4,6 +4,33 @@ title: enableAssetFallback
 
 # output.enableAssetFallback
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/enableAssetFallback.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+If this option is enabled, all unrecognized files will be emitted to the dist directory; otherwise, an exception will be thrown.
+
+### Example
+
+Enable the config:
+
+```js
+export default {
+  output: {
+    enableAssetFallback: true,
+  },
+};
+```
+
+Import a module of unknown type in code:
+
+```js
+import './foo.xxx';
+```
+
+After compilation, `foo.xxx` will be output to the `dist/static/media` directory.
+
+You can control the output path and filename after fallback through the `output.distPath.media` and `output.filename.media` configs.
+
+:::tip
+Enabling this config will change the rules structure in the webpack config. In most cases, we do not recommend using this config.
+:::

package/docs/en/configure/app/output/enable-asset-manifest.mdx

@@ -4,6 +4,37 @@ title: enableAssetManifest
 
 # output.enableAssetManifest
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/enableAssetManifest.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Whether to generate a manifest file that contains information of all assets.
+
+### Example
+
+Enable asset manifest:
+
+```js
+export default {
+  output: {
+    enableAssetManifest: true,
+  },
+};
+```
+
+After compiler, there will be a `dist/manifest.json` file:
+
+```json
+{
+  "files": {
+    "main.css": "/static/css/main.45b01211.css",
+    "main.js": "/static/js/main.52fd298f.js",
+    "html/main/index.html": "/html/main/index.html"
+  },
+  "entrypoints": ["static/css/main.45b01211.css", "static/js/main.52fd298f.js"]
+}
+```
+
+If the current project has multiple types of build artifacts, such as including SSR build artifacts, multiple manifest.json files will be generated.
+
+- web artifact: `asset-manifest.json`
+- node artifact: `asset-manifest-node.json`

package/docs/en/configure/app/output/enable-css-module-tsdeclaration.mdx

@@ -4,6 +4,29 @@ title: enableCssModuleTSDeclaration
 
 # output.enableCssModuleTSDeclaration
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/enableCssModuleTSDeclaration.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Whether to generate a TypeScript declaration file for CSS modules.
+
+### Example
+
+Enable CSS module TypeScript declaration:
+
+```js
+export default {
+  output: {
+    enableCssModuleTSDeclaration: true,
+  },
+};
+```
+
+After building, there will be a `.d.ts` file for each CSS module file. For example
+
+```ts
+interface CssExports {
+  title: string;
+}
+export const cssExports: CssExports;
+export default cssExports;
+```

package/docs/en/configure/app/output/enable-inline-scripts.mdx

@@ -4,6 +4,19 @@ title: enableInlineScripts
 
 # output.enableInlineScripts
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/enableInlineScripts.md';
+- **Type:**
 
-<Main />
+```ts
+type EnableInlineScripts =
+  | boolean
+  | RegExp
+  | ((params: { size: number; name: string }) => boolean);
+```
+
+- **Default:** `false`
+
+Whether to inline output scripts files (.js files) into HTML with `<script>` tags in production mode.
+
+:::warning
+**Deprecated**: This configuration is deprecated, please use the boolean usage of `output.inlineScripts` instead.
+:::

package/docs/en/configure/app/output/enable-inline-styles.mdx

@@ -4,6 +4,19 @@ title: enableInlineStyles
 
 # output.enableInlineStyles
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/enableInlineStyles.md';
+- **Type:**
 
-<Main />
+```ts
+type EnableInlineStyles =
+  | boolean
+  | RegExp
+  | ((params: { size: number; name: string }) => boolean);
+```
+
+- **Default:** `false`
+
+Whether to inline output style files (.css files) into HTML with `<style>` tags in production mode.
+
+:::warning
+**Deprecated**: This configuration is deprecated, please use the boolean usage of `output.inlineStyles` instead.
+:::

package/docs/en/configure/app/output/enable-latest-decorators.mdx

@@ -4,6 +4,11 @@ title: enableLatestDecorators
 
 # output.enableLatestDecorators
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/enableLatestDecorators.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Whether to use [the new decorator proposal](https://github.com/tc39/proposal-decorators/tree/7fa580b40f2c19c561511ea2c978e307ae689a1b).
+
+:::warning
+**Deprecated**: This configuration is deprecated, please use `source.decorators` instead.
+:::

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

@@ -1,9 +1,25 @@
 ---
 title: externals
+configName: output.externals
 ---
 
 # output.externals
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/externals.md';
+- **Type:**
 
-<Main />
+```ts
+type Externals =
+  | string
+  | object
+  | function
+  | RegExp
+  | Array<string | object | function | RegExp>;
+```
+
+- **Default:** `undefined`
+
+At build time, prevent some `import` dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/output/filename-hash.mdx

@@ -1,5 +1,6 @@
 ---
 title: filenameHash
+configName: output.filenameHash
 ---
 
 # output.filenameHash
@@ -9,31 +10,6 @@ title: filenameHash
 
 Whether to add a hash value to the filename after the production build.
 
-### Example
-
-By default, the filename of the output files will include a hash value:
-
-```bash
-dist/static/css/index.7879e19d.css
-dist/static/js/index.18a568e5.js
-```
-
-You can set `output.filenameHash` to false to disable this behavior:
-
-```js
-export default {
-  output: {
-    filenameHash: false,
-  },
-};
-```
-
-After rebuilding, the output filenames becomes:
-
-```bash
-dist/static/css/index.css
-dist/static/js/index.js
-```
-
-For detailed usage, please refer to [Rsbuild - output.filenameHash](https://rsbuild.dev/config/output/filename-hash).
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
 
+<RsbuildConig />

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

@@ -1,9 +1,54 @@
 ---
 title: filename
+configName: output.filename
 ---
 
 # output.filename
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/filename.md';
+- **Type:**
 
-<Main />
+```ts
+type FilenameConfig = {
+  html?: string;
+  js?:
+    | string
+    | ((pathData: Rspack.PathData, assetInfo: Rspack.JsAssetInfo) => string);
+  css?: string;
+  svg?: string;
+  font?: string;
+  image?: string;
+  media?: string;
+};
+```
+
+- **Default:**
+
+```js
+// Development mode
+const devDefaultFilename = {
+  html: '[name].html',
+  js: '[name].js',
+  css: '[name].css',
+  svg: '[name].[contenthash:8].svg',
+  font: '[name].[contenthash:8][ext]',
+  image: '[name].[contenthash:8][ext]',
+  media: '[name].[contenthash:8][ext]',
+};
+
+// Production mode
+const prodDefaultFilename = {
+  html: '[name].html',
+  js: output.target === 'node' ? '[name].js' : '[name].[contenthash:8].js',
+  css: '[name].[contenthash:8].css',
+  svg: '[name].[contenthash:8].svg',
+  font: '[name].[contenthash:8][ext]',
+  image: '[name].[contenthash:8][ext]',
+  media: '[name].[contenthash:8][ext]',
+};
+```
+
+Sets the filename of dist files.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/output/inject-styles.mdx

@@ -0,0 +1,15 @@
+---
+title: injectStyles
+configName: output.injectStyles
+---
+
+# output.injectStyles
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Whether to inject styles into DOM.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/output/inline-scripts.mdx

@@ -0,0 +1,34 @@
+---
+title: inlineScripts
+configName: output.inlineScripts
+---
+
+# output.inlineScripts
+
+- **Type:**
+
+```ts
+type InlineScriptsTest =
+  | RegExp
+  | ((params: { size: number; name: string }) => boolean);
+
+type InlineScripts =
+  | boolean
+  | InlineScriptsTest
+  | {
+      enable?: boolean | 'auto';
+      test: InlineScriptsTest;
+    };
+```
+
+- **Default:** `false`
+
+Whether to inline output scripts files (.js files) into HTML with `<script>` tags.
+
+:::tip
+When using convention-based routing, you need to set [output.splitRouteChunks](https://modernjs.dev/en/configure/app/output/splitRouteChunks.html) to false if this option is turned on.
+:::
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/output/inline-styles.mdx

@@ -0,0 +1,34 @@
+---
+title: inlineStyles
+configName: output.inlineStyles
+---
+
+# output.inlineStyles
+
+- **Type:**
+
+```ts
+type InlineStylesTest =
+  | RegExp
+  | ((params: { size: number; name: string }) => boolean);
+
+type InlineStyles =
+  | boolean
+  | InlineStylesTest
+  | {
+      enable?: boolean | 'auto';
+      test: InlineStylesTest;
+    };
+```
+
+- **Default:** `false`
+
+Whether to inline output style files (.css files) into HTML with `<style>` tags.
+
+:::tip
+When using convention-based routing, you need to set [output.splitRouteChunks](https://modernjs.dev/en/configure/app/output/splitRouteChunks.html) to false if this option is turned on.
+:::
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/output/legal-comments.mdx

@@ -1,9 +1,23 @@
 ---
 title: legalComments
+configName: output.legalComments
 ---
 
 # output.legalComments
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/legalComments.md';
+- **Type:** `'linked' | 'inline' | 'none'`
+- **Default:** `'linked'`
 
-<Main />
+Configure how to handle the legal comment.
+
+A "legal comment" is considered to be any statement-level comment in JS or rule-level comment in CSS that contains `@license` or `@preserve` or that starts with `//!` or `/*!`. These comments are preserved in output files by default since that follows the intent of the original authors of the code.
+
+This behavior can be configured by using one of the following options:
+
+- `linked`: Extract all legal comments to a .LEGAL.txt file and link to them with a comment.
+- `inline`: Preserve all legal comments in original position.
+- `none`: Remove all legal comments.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

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

@@ -0,0 +1,27 @@
+---
+title: minify
+configName: output.minify
+---
+
+# output.minify
+
+- **Type:**
+
+```ts
+type Minify =
+  | boolean
+  | {
+      js?: boolean;
+      jsOptions?: SwcJsMinimizerRspackPluginOptions;
+      css?: boolean;
+      cssOptions?: LightningCssMinimizerRspackPluginOptions;
+    };
+```
+
+- **Default:** `true`
+
+Configure whether to enable code minification in production mode, or to configure minimizer options.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/output/override-browserslist.mdx

@@ -1,9 +1,25 @@
 ---
 title: overrideBrowserslist
+configName: output.overrideBrowserslist
 ---
 
 # output.overrideBrowserslist
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/overrideBrowserslist.md';
+- **Type:** `string[] | undefined`
+- **Default:**
 
-<Main />
+```ts
+const defaultBrowserListMap: Record<RsbuildTarget, string[]> = {
+  web: ['> 0.01%', 'not dead', 'not op_mini all'],
+  node: ['node >= 14'],
+  'web-worker': ['> 0.01%', 'not dead', 'not op_mini all'],
+};
+```
+
+Modern.js will give priority to using the configuration in the `.browserslistrc` file in the project root directory.
+
+Specifies the range of target browsers that the project is compatible with. This value will be used by [SWC](https://github.com/swc-project/swc) and [autoprefixer](https://github.com/postcss/autoprefixer) to identify the JavaScript syntax that need to be transformed and the CSS browser prefixes that need to be added.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

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

@@ -1,9 +1,19 @@
 ---
 title: polyfill
+configName: output.polyfill
 ---
 
 # output.polyfill
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/polyfill.md';
+- **Type:** `'entry' | 'usage' | 'ua' | 'off'`
+- **Default:** `'entry'`
 
-<Main />
+Via `output.polyfill` you can configure how the polyfill is injected.
+
+import OutputPolyfillExtend from '@site-docs-en/components/output-polyfill-extend';
+
+<OutputPolyfillExtend />
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/output/source-map.mdx

@@ -0,0 +1,30 @@
+---
+title: sourceMap
+configName: output.sourceMap
+---
+
+# output.sourceMap
+
+- **Type:**
+
+```ts
+type SourceMap = {
+  js?: Rspack.Configuration['devtool'];
+  css?: boolean;
+};
+```
+
+- **Default:**
+
+```ts
+const defaultSourceMap = {
+  js: isDev ? 'cheap-module-source-map' : false,
+  css: false,
+};
+```
+
+Used to set whether to generate source map files, and which format of source map to generate.
+
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />