@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

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

@@ -1,225 +0,0 @@
----
-title: babel
----
-
-# tools.babel
-
-- **Type:** `Object | Function`
-- **Default:** `undefined`
-
-With `tools.babel` you can modify the options of [babel-loader](https://github.com/babel/babel-loader).
-
-### Usage Scenarios
-
-Please note the limitations of `tools.babel` in the following usage scenarios:
-
-- Rspack scenario: When using Rspack as the bundler, using the `tools.babel` option will significantly slow down the Rspack's build speed. This is because Rspack defaults to using SWC for compilation, and configuring Babel will cause the code to be compiled twice, resulting in additional compilation overhead.
-- webpack + SWC scenario: When using webpack as the bundler, if you use SWC plugin for code compilation, the `tools.babel` option will not take effect.
-
-### Function Type
-
-When `tools.babel` is of type `Function`, the default Babel configuration will be passed as the first parameter. You can directly modify the configuration object or return an object as the final `babel-loader` configuration.
-
-```js
-export default {
-  tools: {
-    babel(config) {
-      // Add a Babel plugin
-      // note: the plugin have been added to the default config to support antd load on demand
-      config.plugins.push([
-        'babel-plugin-import',
-        {
-          libraryName: 'xxx-components',
-          libraryDirectory: 'es',
-          style: true,
-        },
-      ]);
-    },
-  },
-};
-```
-
-The second parameter of the `tools.babel` function provides some more convenient utility functions. Please continue reading the documentation below.
-
-:::tip
-The above example is just for reference, usually you don't need to manually configure `babel-plugin-import`, because Modern.js already provides a more general `source.transformImport` configuration.
-:::
-
-### Object Type
-
-When `tools.babel`'s type is `Object`, the config will be shallow merged with default config by `Object.assign`.
-
-:::caution
-Note that `Object.assign` is a shallow copy and will completely overwrite the built-in `presets` or `plugins` array, please use it with caution.
-:::
-
-```js
-export default {
-  tools: {
-    babel: {
-      plugins: [
-        [
-          'babel-plugin-import',
-          {
-            libraryName: 'xxx-components',
-            libraryDirectory: 'es',
-            style: true,
-          },
-        ],
-      ],
-    },
-  },
-};
-```
-
-### Util Functions
-
-When `tools.babel` is a Function, the tool functions available for the second parameter are as follows:
-
-#### addPlugins
-
-- **Type:** `(plugins: BabelPlugin[]) => void`
-
-Add some Babel plugins. For example:
-
-```js
-export default {
-  tools: {
-    babel(config, { addPlugins }) {
-      addPlugins([
-        [
-          'babel-plugin-import',
-          {
-            libraryName: 'xxx-components',
-            libraryDirectory: 'es',
-            style: true,
-          },
-        ],
-      ]);
-    },
-  },
-};
-```
-
-#### addPresets
-
-- **Type:** `(presets: BabelPlugin[]) => void`
-
-Add Babel preset configuration. (No need to add presets in most cases)
-
-```js
-export default {
-  tools: {
-    babel(config, { addPresets }) {
-      addPresets(['@babel/preset-env']);
-    },
-  },
-};
-```
-
-#### removePlugins
-
-- **Type:** `(plugins: string | string[]) => void`
-
-To remove the Babel plugin, just pass in the name of the plugin to be removed, you can pass in a single string or an array of strings.
-
-```js
-export default {
-  tools: {
-    babel(config, { removePlugins }) {
-      removePlugins('babel-plugin-import');
-    },
-  },
-};
-```
-
-#### removePresets
-
-- **Type:** `(presets: string | string[]) => void`
-
-To remove the Babel preset configuration, pass in the name of the preset to be removed, you can pass in a single string or an array of strings.
-
-```js
-export default {
-  tools: {
-    babel(config, { removePresets }) {
-      removePresets('@babel/preset-env');
-    },
-  },
-};
-```
-
-#### modifyPresetEnvOptions
-
-- **Type:** `(options: PresetEnvOptions) => void`
-
-Modify the configuration of [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env), the configuration you pass in will be shallowly merged with default config. For example:
-
-```js
-export default {
-  tools: {
-    babel(config, { modifyPresetEnvOptions }) {
-      modifyPresetEnvOptions({
-        targets: 'last 2 versions',
-      });
-    },
-  },
-};
-```
-
-```js
-export default {
-  tools: {
-    babel(config, { modifyPresetEnvOptions }) {
-      modifyPresetEnvOptions({
-        targets: {
-          chrome: '58',
-          ie: '11',
-        },
-      });
-    },
-  },
-};
-```
-
-#### modifyPresetReactOptions
-
-- **Type:** `(options: PresetReactOptions) => void`
-
-Modify the configuration of [@babel/preset-react](https://babeljs.io/docs/en/babel-preset-react), the configuration you pass in will be shallowly merged with default config. For example:
-
-```js
-export default {
-  tools: {
-    babel(config, { modifyPresetReactOptions }) {
-      modifyPresetReactOptions({
-        pragma: 'React.createElement',
-      });
-    },
-  },
-};
-```
-
-#### addIncludes
-
-Deprecated, please use [source.include](https://modernjs.dev/en/configure/app/source/include.html) instead, both have the same functionality.
-
-#### addExcludes
-
-Deprecated, please use [source.exclude](https://modernjs.dev/en/configure/app/source/exclude.html) instead, both have the same functionality.
-
-### Debugging Babel Configuration
-
-After modifying the `babel-loader` configuration through `tools.babel`, you can view the final generated configuration in [Rsbuild debug mode](https://rsbuild.rs/guide/debug/debug-mode).
-
-First, enable debug mode by using the `DEBUG=builder` parameter:
-
-```bash
-# Debug development mode
-DEBUG=builder pnpm dev
-
-# Debug production mode
-DEBUG=builder pnpm build
-```
-
-Then open the generated `(webpack|rspack).config.web.js` file and search for the `babel-loader` keyword to see the complete `babel-loader` configuration.

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

@@ -1,44 +0,0 @@
----
-title: esbuild
----
-
-# tools.esbuild
-
-- **Type:** `Object`
-- **Default:** `undefined`
-
-:::warning
-**The esbuild feature in the current document is no longer maintained**, we recommend using the Rspack + SWC solution, because Rspack + SWC provide better build performance, richer features, and better compatibility.
-
-Please refer to [「Use Rspack」](/guides/advanced-features/rspack-start.html) for more information.
-
-:::
-
-## Introduction
-
-import Esbuild from '@site-docs-en/components/esbuild.mdx';
-
-<Esbuild />
-
-## Configuration
-
-You can set the esbuild compilation behavior through the `tools.esbuild` config.
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  tools: {
-    esbuild: {
-      loader: {
-        target: 'chrome61',
-      },
-      minimize: {
-        target: 'chrome61',
-      },
-    },
-  },
-});
-```
-
-For config details, please refer to [Esbuild Plugin Configuration](/plugin/official/rsbuild-plugins/plugin-esbuild.html#config).

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

@@ -1,54 +0,0 @@
----
-title: pug
----
-
-# tools.pug
-
-- **Type:** `true | Object | Function | undefined`
-- **Default:** `false`
-
-Configure the [Pug](https://pugjs.org/) template engine.
-
-### Boolean Type
-
-Pug template engine is not enabled by default, you can enable it by setting `tools.pug` to `true`.
-
-```ts
-export default {
-  tools: {
-    pug: true,
-  },
-};
-```
-
-When enabled, you can use `index.pug` as the template file in `html.template` config.
-
-### Object Type
-
-When `tools.terser` is `Object` type, you can passing the Pug options:
-
-```ts
-export default {
-  tools: {
-    pug: {
-      doctype: 'xml',
-    },
-  },
-};
-```
-
-For detailed options, please refer to [Pug API Reference](https://pugjs.org/api/reference.html#options).
-
-### Function Type
-
-When `tools.pug` is `Function` type, the default configuration is passed in as the first parameter, the configuration object can be modified directly, or a value can be returned as the final result.
-
-```ts
-export default {
-  tools: {
-    pug(config) {
-      config.doctype = 'xml';
-    },
-  },
-};
-```

package/docs/en/configure/app/tools/styled-components.mdx

@@ -1,55 +0,0 @@
----
-title: styledComponents
----
-
-# tools.styledComponents
-
-- **Type:** `Object | Function`
-- **Default:**
-
-```js
-{
-  displayName: true,
-  // `isSSR` is true in SSR build
-  ssr: isSSR,
-  // `pure` is enabled in production to reduce bundle size
-  pure: isProd,
-  transpileTemplateLiterals: true,
-}
-```
-
-`tools.styledComponents` config is corresponding to [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components), or [@swc/plugin-styled-components](https://github.com/swc-project/plugins/tree/main/packages/styled-components) when using SWC plugin.
-
-When the value is an Object, use the Object.assign function to merge with the default config. For example:
-
-```js
-export default {
-  tools: {
-    styledComponents: {
-      pure: false,
-    },
-  },
-};
-```
-
-When the config is a Function, the first parameter is the default configuration, and the second parameter provides some utility functions that can be called directly:
-
-```js
-export default {
-  tools: {
-    styledComponents(config) {
-      config.pure = false;
-    },
-  },
-};
-```
-
-The feature is enabled by default, and you can configure `tools.styledComponents` to `false` to disable this behavior, which can improve build performance:
-
-```js
-export default {
-  tools: {
-    styledComponents: false,
-  },
-};
-```

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

@@ -1,98 +0,0 @@
----
-title: tailwindcss
----
-
-# tools.tailwindcss
-
-- **Type:** `Object | Function`
-- **Default:**
-
-```js
-const tailwind = {
-  content: [
-    './src/**/*.{js,jsx,ts,tsx}',
-    './config/html/**/*.{html,ejs,hbs}',
-    './storybook/**/*',
-  ],
-};
-```
-
-Used to modify the configuration of [Tailwind CSS](https://tailwindcss.com/docs/configuration).
-
-### Enabling Tailwind CSS
-
-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/tailwindcss) for instructions on how to enable it.
-
-### Function Type
-
-When `tools.tailwindcss`'s type is Function, the default tailwindcss config will be passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.
-
-```ts title="modern.config.ts"
-export default {
-  tools: {
-    tailwindcss(config) {
-      config.content.push('./some-folder/**/*.{js,ts}');
-    },
-  },
-};
-```
-
-### Object Type
-
-When `tools.tailwindcss`'s type is `Object`, the config will be shallow merged with default config by `Object.assign`.
-
-```ts title="modern.config.ts"
-export default {
-  tools: {
-    tailwindcss: {
-      plugins: [
-        require('@tailwindcss/forms'),
-        require('@tailwindcss/aspect-ratio'),
-        require('@tailwindcss/typography'),
-      ],
-    },
-  },
-};
-```
-
-### Notes
-
-Please note:
-
-- 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}`.
-- If you are using the `source.designSystem` configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
-
-The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.
-
-### About source.designSystem
-
-`source.designSystem` is a deprecated configuration option in Modern.js.
-
-Starting from Modern.js vMAJOR_VERSION.33.0, you can use the `theme` configuration option of Tailwind CSS as a replacement for `source.designSystem`. It is no longer necessary to split the `theme` configuration and set it on `designSystem`.
-
-- Previous usage:
-
-```ts title="modern.config.ts"
-const { theme, ...rest } = tailwindConfig;
-
-export default {
-  tools: {
-    tailwindcss: rest,
-  },
-  source: {
-    designSystem: theme,
-  },
-};
-```
-
-- Current usage:
-
-```ts title="modern.config.ts"
-export default {
-  tools: {
-    tailwindcss: tailwindConfig,
-  },
-};
-```

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

@@ -1,58 +0,0 @@
----
-title: terser
----
-
-# tools.terser
-
-import { Badge } from '@theme';
-
-<Badge type="danger" >Webpack Only</Badge>
-
-- **Type:** `Object | Function | undefined`
-- **Default:**
-
-```js
-const defaultTerserOptions = {
-  terserOptions: {
-    mangle: {
-      safari10: true,
-    },
-  },
-};
-```
-
-When building for production, Modern.js will minimize the JavaScript code through [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin). The config of [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) can be modified via `tools.terser`.
-
-### Object Type
-
-When `tools.terser` is `Object` type, it will be merged with the default config via `Object.assign`.
-
-For example, to exclude some files from minification:
-
-```js
-export default {
-  tools: {
-    terser: {
-      exclude: /\/excludes/,
-    },
-  },
-};
-```
-
-### Function Type
-
-When `tools.terser` is `Function` type, the default config is passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.
-
-```js
-export default {
-  tools: {
-    terser: opts => {
-      opts.exclude = /\/excludes/;
-    },
-  },
-};
-```
-
-:::tip Disable code minification
-If you need to disable code minification, you can use the [output.minify](/configure/app/output/minify) configuration.
-:::

package/docs/en/configure/app/tools/ts-loader.mdx

@@ -1,76 +0,0 @@
----
-title: tsLoader
----
-
-# tools.tsLoader
-
-import { Badge } from '@theme';
-
-<Badge type="danger" >Webpack Only</Badge>
-
-- **Type:** `Object | Function | undefined`
-- **Default:** `undefined`
-
-:::warning Deprecated
-
-ts-loader is not recommended for use in the project, because:
-
-- ts-loader cannot be used with certain features such as [source.transformImport](/configure/app/source/transform-import) and [tools.styledComponents](/configure/app/tools/styled-components) provided by Babel & SWC.
-- Rspack does not support ts-loader.
-
-:::
-
-`ts-loader` is not enabled by default in the project. When `tools.tsLoader` is not undefined, builder will use ts-loader instead of babel-loader to compile TypeScript code.
-
-### Object Type
-
-When this value is an Object, it is merged with the default configuration via Object.assign.
-
-The default configuration is as follows:
-
-```json
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "ESNext"
-  },
-  "transpileOnly": true,
-  "allowTsInNodeModules": true
-}
-```
-
-You can override the default configuration via the `tools.tsLoader` configuration option:
-
-```ts
-export default {
-  tools: {
-    tsLoader: {
-      allowTsInNodeModules: false,
-    },
-  },
-};
-```
-
-### Function Type
-
-When this value is a Function, the default configuration is passed in as the first parameter, the configuration object can be modified directly, or an object can be returned as the final configuration.The second parameter is the util functions to modify the `ts-loader` configuration. For example:
-
-```ts
-export default {
-  tools: {
-    tsLoader: opts => {
-      opts.allowTsInNodeModules = false;
-    },
-  },
-};
-```
-
-### Util Functions
-
-#### addIncludes
-
-Deprecated, please use [source.include](https://modernjs.dev/en/configure/app/source/include.html) instead, both have the same functionality.
-
-#### addExcludes
-
-Deprecated, please use [source.exclude](https://modernjs.dev/en/configure/app/source/exclude.html) instead, both have the same functionality.