@modern-js/main-doc 2.69.4 → 3.0.0-alpha.0

package/docs/en/configure/app/source/resolve-extension-prefix.mdx

@@ -1,55 +0,0 @@
----
-title: resolveExtensionPrefix
----
-
-# source.resolveExtensionPrefix
-
-- **Type:** `string | Record<BuilderTarget, string>`
-- **Default:** `undefined`
-
-Add a prefix to [resolve.extensions](https://webpack.js.org/configuration/resolve/#resolveextensions).
-
-If multiple files share the same name but have different extensions, Modern.js will resolve the one with the extension listed first in the array and skip the rest.
-
-### Example
-
-```js
-export default {
-  source: {
-    resolveExtensionPrefix: '.web',
-  },
-};
-```
-
-With the configuration above, the extensions array will become:
-
-```js
-// before
-const extensions = ['.js', '.ts', ...];
-
-// after
-const extensions = ['.web.js', '.js', '.web.ts' , '.ts', ...];
-```
-
-When `import './foo'` in the code, the `foo.web.js` file will be resolved first, then the `foo.js` file.
-
-#### Set according to Targets
-
-When you build multiple targets at the same time, you can set different extension prefix for different targets. At this point, you need to set `resolveExtensionPrefix` to an object whose key is the corresponding build target.
-
-For example to set different extension prefix for `web` and `node`:
-
-```js
-export default {
-  output: {
-    source: {
-      resolveExtensionPrefix: {
-        web: '.web',
-        node: '.node',
-      },
-    },
-  },
-};
-```
-
-When `import './foo'` in the code, the `foo.node.js` file will be resolved for node target, and the `foo.web.js` file will be resolved for web target.

package/docs/en/configure/app/source/resolve-main-fields.mdx

@@ -1,46 +0,0 @@
----
-title: resolveMainFields
----
-
-# source.resolveMainFields
-
-- **Type:**
-
-```ts
-type Fields = (string | string[])[];
-
-type ResolveMainFields = Fields | Record<BuilderTarget, Fields>;
-```
-
-- **Default:** `undefined`
-
-This config will determine which field of `package.json` you use to import the `npm` module. Same as the [resolve.mainFields](https://webpack.js.org/configuration/resolve/#resolvemainfields) config of webpack.
-
-### Example
-
-```js
-export default {
-  source: {
-    resolveMainFields: ['main', 'browser', 'exports'],
-  },
-};
-```
-
-#### Set according to Targets
-
-When you build multiple targets at the same time, you can set different mainFields for different targets. At this point, you need to set `resolveMainFields` to an object whose key is the corresponding build target.
-
-For example to set different mainFields for `web` and `node`:
-
-```js
-export default {
-  output: {
-    source: {
-      resolveMainFields: {
-        web: ['main', 'browser', 'exports'],
-        node: ['main', 'node', 'exports'],
-      },
-    },
-  },
-};
-```

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.