@modern-js/main-doc 2.58.0 → 2.58.2

package/docs/en/guides/advanced-features/_meta.json

@@ -0,0 +1,26 @@
+[
+  "rspack-start",
+  {
+    "type": "dir",
+    "name": "bff",
+    "label": "use-bff",
+    "collapsed": true
+  },
+  "code-split",
+  {
+    "type": "dir",
+    "name": "ssr",
+    "label": "use-ssr",
+    "collapsed": true
+  },
+  "ssg",
+  "compatibility",
+  "eslint",
+  "low-level",
+  "source-build",
+  "build-performance",
+  "inline-assets",
+  "optimize-bundle",
+  "using-storybook",
+  "web-server"
+]

package/docs/en/guides/advanced-features/bff/_meta.json

@@ -0,0 +1,6 @@
+[
+  "function",
+  "type",
+  "frameworks",
+  "sdk"
+]

package/docs/en/guides/advanced-features/rsbuild-plugin.mdx

@@ -28,19 +28,19 @@ If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by exe
 
 Here are the official Rsbuild plugins built into Modern.js:
 
-| Plugin Name                                                                           | Introduce                                                                                                    | Modern.js Link                                                                                                                        |
-| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
-| [React Plugin](https://rsbuild.dev/plugins/list/plugin-react)                         | Provides support for React                                                                                   | -                                                                                                                                     |
-| [SVGR Plugin](https://rsbuild.dev/plugins/list/plugin-svgr)                           | Support convert SVG to React components                                                                      | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
-| [Styled Components Plugin](https://rsbuild.dev/plugins/list/plugin-styled-components) | Provides compile-time support for styled-components                                                          | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
-| [Assets Retry Plugin](https://rsbuild.dev/plugins/list/plugin-assets-retry)           | Used to automatically resend requests when static assets fail to load                                        | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
-| [Type Check Plugin](https://rsbuild.dev/plugins/list/plugin-type-check)               | Used to run TypeScript type checker on a separate process                                                    | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| Plugin Name                                                                                    | Introduce                                                                                                    | Modern.js Link                                                                                                                        |
+| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [React Plugin](https://rsbuild.dev/plugins/list/plugin-react)                                  | Provides support for React                                                                                   | -                                                                                                                                     |
+| [SVGR Plugin](https://rsbuild.dev/plugins/list/plugin-svgr)                                    | Support convert SVG to React components                                                                      | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [Styled Components Plugin](https://github.com/rspack-contrib/rsbuild-plugin-styled-components) | Provides compile-time support for styled-components                                                          | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
+| [Assets Retry Plugin](https://rsbuild.dev/plugins/list/plugin-assets-retry)                    | Used to automatically resend requests when static assets fail to load                                        | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Type Check Plugin](https://rsbuild.dev/plugins/list/plugin-type-check)                        | Used to run TypeScript type checker on a separate process                                                    | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
 | [Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill)         | Used to inject polyfills of Node core modules in the browser side                                            | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
-| [Source Build Plugin](https://rsbuild.dev/plugins/list/plugin-source-build)           | Supports referencing source code from other subdirectories                                                   | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
+| [Source Build Plugin](https://github.com/rspack-contrib/rsbuild-plugin-source-build)           | Supports referencing source code from other subdirectories                                                   | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
 | [Check Syntax Plugin](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)           | Used to analyze the syntax compatibility of artifacts                                                        | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
 | [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | Used to customize CSS minimizer, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
 | [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | Provides support for the Pug template engine                                                                 | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
-| [Rem Plugin](https://rsbuild.dev/plugins/list/plugin-rem)                             | Implements the rem adaptive layout for mobile pages                                                          | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
+| [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem)                                      | Implements the rem adaptive layout for mobile pages                                                          | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
 | [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/json-files.html#toml-file)                                                                         |
 | [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/json-files.html#yaml-file)                                                                         |
 

package/docs/en/guides/advanced-features/ssr/_meta.json

@@ -0,0 +1,5 @@
+[
+  "usage",
+  "stream",
+  "cache"
+]

package/docs/en/guides/basic-features/_meta.json

@@ -0,0 +1,22 @@
+[
+  "css",
+  "routes",
+  {
+    "type": "dir",
+    "name": "data",
+    "label": "data-solution",
+    "collapsed": true
+  },
+  "alias",
+  "mock",
+  "proxy",
+  "env-vars",
+  "html",
+  "output-files",
+  "static-assets",
+  "svg-assets",
+  "json-files",
+  "wasm-assets",
+  "css-modules",
+  "deploy"
+]

package/docs/en/guides/basic-features/data/_meta.json

@@ -0,0 +1,4 @@
+[
+  "data-fetch",
+  "data-write"
+]

package/docs/en/guides/concept/_meta.json

@@ -0,0 +1,4 @@
+[
+  "entries",
+  "builder"
+]

package/docs/en/guides/{deprecat.md → deprecated.md}

@@ -2,7 +2,7 @@
 sidebar_position: 10
 ---
 
-# Deprecated Functions
+# Deprecated
 
 This article will introduce the functions that were previously supported by Modern.js, but have now been deprecated, along with the recommended alternatives.
 

package/docs/en/guides/get-started/_meta.json

@@ -0,0 +1,7 @@
+[
+  "introduction",
+  "quick-start",
+  "upgrade",
+  "glossary",
+  "tech-stack"
+]

package/docs/en/guides/get-started/quick-start.mdx

@@ -93,7 +93,7 @@ $ pnpm run build
 
 > modern build
 
-  Modern.js Framework v2.55.0
+  Modern.js Framework
 
 info    Starting production build...
 info    Type checker is enabled. It may take some time.
@@ -141,7 +141,7 @@ $ pnpm run serve
 
 > modern serve
 
-  Modern.js Framework v2.55.0
+  Modern.js Framework
 
 info    Starting production server...
 

package/docs/en/guides/get-started/upgrade.mdx

@@ -18,7 +18,7 @@ import { PackageManagerTabs } from '@theme';
 > modern upgrade
 
 [INFO] [Project Type]: Web App
-[INFO] [Modern.js Latest Version]: 2.0.0
+[INFO] [Modern.js Latest Version]: x.y.z
 [INFO] Upgrade Modern.js package version success!
 ```
 

package/docs/en/guides/rsbuild-plugins/plugin-esbuild.mdx

@@ -0,0 +1,205 @@
+---
+sidebar_position: 3
+---
+
+# Esbuild Plugin
+
+:::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) for more information.
+
+:::
+
+import Esbuild from '@modern-js/builder-doc/docs/en/shared/esbuild.md';
+
+<Esbuild />
+
+## Quick Start
+
+### Used in Modern.js framework
+
+The Modern.js framework integrates the Builder's esbuild plugin by default, so you don't need to manually install and register the plugin, just use the [tools.esbuild](https://modernjs.dev/en/configure/app/tools/esbuild.html) configuration:
+
+```js
+export default defineConfig({
+  tools: {
+    esbuild: {
+      loader: {
+        target: 'chrome61',
+      },
+      minimize: {
+        target: 'chrome61',
+      },
+    },
+  },
+});
+```
+
+## Config
+
+The plugin will enable code transformation and minification by default. You can also customize the behavior of the plugin through configuration.
+
+### loader
+
+- **Type:**
+
+```ts
+type LoaderOptions = EsbuildLoaderOptions | false | undefined;
+```
+
+- **Default:**
+
+```ts
+const defaultOptions = {
+  target: 'es2015',
+  charset: builderConfig.output.charset,
+};
+```
+
+This config is used to enable JavaScript/TypeScript transformation, which will replace babel-loader and ts-loader with esbuild-loader.
+
+If you want to modify the options, you can check the [esbuild-loader documentation](https://github.com/privatenumber/esbuild-loader#loader).
+
+#### Set JSX Format
+
+When using esbuild for transformation, esbuild will read the `compilerOptions.jsx` field in `tsconfig.json` to determine which JSX syntax to use.
+
+Therefore, you need to set the correct JSX syntax in `tsconfig.json`.
+
+For example, React projects need to set `compilerOptions.jsx` to `react-jsx`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}
+```
+
+#### Set the target environment
+
+Use the `target` option to set the target environment for transformation. `target` can be set directly to the JavaScript language version, such as `es6`, `es2020`; it can also be set to several target environments, each target environment is an environment name followed by a version number, such as `['chrome58', 'edge16' ,'firefox57']`. For a detailed introduction of the `target` option, please refer to [esbuild - target](https://esbuild.github.io/api/#target).
+
+target supports setting to the following environments:
+
+- chrome
+- edge
+- firefox
+- ie
+- ios
+- node
+- opera
+- safari
+
+```ts
+builderPluginEsbuild({
+  loader: {
+    target: 'chrome61',
+  },
+});
+```
+
+#### Disable transformation
+
+Set `loader` to `false` to disable esbuild transformation, and Builder will continue to use Babel to transform the code.
+
+```ts
+builderPluginEsbuild({
+  loader: false,
+});
+```
+
+### minimize
+
+- **Type:**
+
+```ts
+type MinimizeOptions = EsbuildMinifyOptions | false | undefined;
+```
+
+- **Default:**
+
+```ts
+const defaultOptions = {
+  css: true,
+  target: 'es2015',
+  format: builderTarget === 'web' ? 'iife' : undefined,
+};
+```
+
+This option is used to enable minification for JavaScript and CSS.
+
+If you want to modify the options, you can check the [esbuild-loader documentation](https://github.com/privatenumber/esbuild-loader#minifyplugin).
+
+#### Set the target environment
+
+Use the `target` option to set the target environment for minification.
+
+```ts
+builderPluginEsbuild({
+  minimize: {
+    target: 'chrome61',
+  },
+});
+```
+
+#### Disable minification
+
+Set `minimize` to `false` to disable esbuild minification, and Builder will continue to use Terser to minify the code.
+
+```ts
+builderPluginEsbuild({
+  minimize: false,
+});
+```
+
+## Limitations
+
+Although esbuild can significantly improve the build performance of existing webpack projects, it still has certain limitations that require special attention.
+
+### Compatibility
+
+As a compiler (i.e. `loader` capability), esbuild usually supports at least ES2015 (that is, ES6) syntax, and does not have the ability to automatically inject Polyfill.. If the production environment needs to downgrade to ES5 and below syntax, it is recommended to use SWC compilation.
+
+You can specify the target syntax version by following config:
+
+```ts
+builderPluginEsbuild({
+  loader: {
+    target: 'es2015',
+  },
+});
+```
+
+As a code minify tool (i.e. `minimize` capability), esbuild can minify the code in production environment, and usually supports ES2015 syntax at least.
+
+If you set the compressed `target` to `es5`, you need to ensure that all codes have been compiled to ES5 codes, otherwise it will cause esbuild compilation error: `Transforming 'xxx' to the configured target environment ("es5") is not supported yet `.
+
+Therefore, for projects that need to be compatible with ES5 and below syntax in the production environment, please be careful to enable the minimize capability, and it is recommended to use SWC compression.
+
+You can specify the target syntax version by following config:
+
+```js
+builderPluginEsbuild({
+  minimize: {
+    target: 'es2015',
+  },
+});
+```
+
+:::danger Caution
+Projects that need to be compatible with ES5 and below syntax in the production environment need to be careful to turn on the minimize config.
+:::
+
+### Not support Babel plugins
+
+As a compiler, the syntax transformation function of the original Babel plugins such as `babel-plugin-import` is not available after esbuild is turned on. And since the bottom layer of the plugin uses esbuild's `Transform API`, it does not support esbuild plugins to customize the compilation process.
+
+If you have requirements related to Babel plugins such as `babel-plugin-import`, you can use the SWC plugin.
+
+### Bundle Size
+
+Although the compression speed of esbuild is faster, the compression ratio of esbuild is lower than that of terser, so the bundle size will increase, please use it according to the scenes. Generally speaking, esbuild is more suitable for scenes that are not sensitive to bundle size.
+
+You can refer to [minification-benchmarks](https://github.com/privatenumber/minification-benchmarks) for a detailed comparison between minimizers.