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

package/docs/en/configure/app/output/disable-css-module-extension.mdx

@@ -4,6 +4,56 @@ title: disableCssModuleExtension
 
 # output.disableCssModuleExtension
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/disableCssModuleExtension.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Whether to treat all `.css` files in the source directory as CSS Modules.
+
+By default, only the `*.module.css` files are treated as CSS Modules. After enabling this config, all `*.css` style files in the source directory will be regarded as CSS Modules.
+
+`.sass`, `.scss` and `.less` files are also affected by `disableCssModuleExtension`.
+
+:::tip
+We do not recommend enabling this config, because after enabling `disableCssModuleExtension`, CSS Modules files and ordinary CSS files cannot be clearly distinguished, which is not conducive to long-term maintenance.
+:::
+
+### Example
+
+```js
+export default {
+  output: {
+    disableCssModuleExtension: true,
+  },
+};
+```
+
+### Detailed
+
+The following is a detailed explanation of the CSS Modules rules:
+
+#### disableCssModuleExtension is false (default)
+
+The following files are treated as CSS Modules:
+
+- all `*.module.css` files
+
+The following files are treated as normal CSS:
+
+- all `*.css` files (excluding `.module`)
+- all `*.global.css` files
+
+#### disableCssModuleExtension is true
+
+The following files are treated as CSS Modules:
+
+- `*.css` and `*.module.css` files in the source directory
+- `*.module.css` files under node_modules
+
+The following files are treated as normal CSS:
+
+- all `*.global.css` files
+- `*.css` files under node_modules (without `.module`)
+
+:::tip
+For CSS Modules files inside node_modules, please always use the `*.module.css` suffix.
+:::

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

@@ -4,6 +4,13 @@ title: disableFilenameHash
 
 # output.disableFilenameHash
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/disableFilenameHash.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Remove the hash from the name of static files after production build.
+
+After the production build, there will be a hash in the middle of the filename by default. You can disable this behavior through the `output.disableFilenameHash` config.
+
+:::warning
+**Deprecated**: This configuration is deprecated, please use the boolean usage of `output.filenameHash` instead.
+:::

package/docs/en/configure/app/output/disable-inline-runtime-chunk.mdx

@@ -4,6 +4,42 @@ title: disableInlineRuntimeChunk
 
 # output.disableInlineRuntimeChunk
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/disableInlineRuntimeChunk.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Used to control whether to inline the bundler's runtime code into HTML.
+
+:::tip What is runtimeChunk
+Modern.js will generate a `builder-runtime.js` file in the dist directory, which is the runtime code of webpack or Rspack.
+
+runtimeChunk is a piece of runtime code, which is provided by webpack or Rspack, that contains the necessary module processing logic, such as module loading, module parsing, etc. See [Runtime](https://webpack.js.org/concepts/manifest/#runtime) for details.
+
+:::
+
+In the production environment, Modern.js will inline the runtimeChunk file into the HTML file by default instead of writing it to the dist directory. This is done to reduce the number of file requests.
+
+### Disable Inlining
+
+If you don't want the runtimeChunk file to be inlined into the HTML file, you can set `disableInlineRuntimeChunk` to `true` and a separate `builder-runtime.js` file will be generated.
+
+```js
+export default {
+  output: {
+    disableInlineRuntimeChunk: true,
+  },
+};
+```
+
+### Merge Into Page Chunk
+
+If you don't want to generate a separate runtimeChunk file, but want the runtimeChunk code to be bundled into the page chunk, you can set the config like this:
+
+```js
+export default {
+  tools: {
+    bundlerChain(chain) {
+      chain.optimization.runtimeChunk(false);
+    },
+  },
+};
+```

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

@@ -4,6 +4,11 @@ title: disableMinimize
 
 # output.disableMinimize
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/disableMinimize.md';
+- **Type:** `boolean`
+- **Default:** `false`
 
-<Main />
+Whether to disable code minification on production builds.
+
+:::warning
+**Deprecated**: This configuration is deprecated, please use the boolean usage of `output.minify` instead.
+:::

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

@@ -4,6 +4,28 @@ title: disableSourceMap
 
 # output.disableSourceMap
 
-import Main from '@modern-js/builder-doc/docs/en/config/output/disableSourceMap.md';
+- **Type:**
 
-<Main />
+```ts
+type DisableSourceMap =
+  | boolean
+  | {
+      js?: boolean;
+      css?: boolean;
+    };
+```
+
+- **Default:**
+
+```ts
+const defaultDisableSourceMap = {
+  js: false,
+  css: process.env.NODE_ENV === 'production',
+};
+```
+
+Whether to disable Source Map generation.
+
+:::warning
+**Deprecated**: This configuration is deprecated, please use the boolean usage of `output.sourceMap` instead.
+:::

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 />