@modern-js/main-doc 2.0.0-beta.0 → 2.0.0-beta.1

package/en/docusaurus-plugin-content-docs/current/configure/app/source/disable-default-entries.md

@@ -0,0 +1,28 @@
+---
+title: source.disableDefaultEntries
+sidebar_label: disableDefaultEntries
+---
+
+- Type: `boolean`
+- Default: `false`
+
+Turn off the function of automatically identifying the application build entry according to the project directory structure. By default, the Modern.js will get the corresponding build entry according to the project directory structure.
+
+:::info
+By default, Modern.js will get the corresponding entry information according to the project directory structure. For details, please refer to [Entry](/docs/guides/concept/entries).
+After configuring the shutdown mechanism, you need to configure the custom entry with [`source.entries`](/docs/configure/app/source/entries).
+:::
+
+:::warning Warning
+Organizing your code according to the catalog specification provided by the Modern.js is recommended to make better use of the framework's capabilities and avoid some redundant configuration.
+:::
+
+Set the following to turn off the default behavior:
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  source: {
+    disableDefaultEntries: true,
+  },
+});
+```

package/en/docusaurus-plugin-content-docs/current/configure/app/source/enable-async-entry.md

@@ -0,0 +1,50 @@
+---
+title: source.enableAsyncEntry
+sidebar_label: enableAsyncEntry
+---
+
+- Type: `boolean`
+- Default: `false`
+
+This option is used in the webpack Module Federation scenario.
+
+When this option is turned on, the Modern.js wraps the automatically generated asynchronous boundary via Dynamic Import, allowing the page code to consume remote modules generated by the module federation.
+
+## Background knowledge
+
+If you don't know webpack module federation, please read the official [Module Federation documentation](https://webpack.js.org/concepts/module-federation) first.
+
+## Example
+
+First, turn this option on in the configuration file:
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  source: {
+    enableAsyncEntry: true,
+  },
+});
+```
+
+Then execute the `dev` or `build` command, and you can see Modern.js automatically generated file becomes the following structure:
+
+```bash
+node_modules
+  └─ .modern-js
+     └─ main
+        ├─ bootstrap.js  #  real entry code
+        ├─ index.js      # asynchronous entry file
+        └─ index.html
+```
+
+The `index.js` reads as follows:
+
+```js
+import('./bootstrap.js');
+```
+
+At this point, you can consume any remote modules in the current page.
+
+:::info
+Modern.js the ModuleFederationPlugin of webpack is not encapsulated, please configure the ModuleFederationPlugin yourself through [tools.webpack Chain](/docs/configure/app/tools/webpack-chain).
+:::

package/en/docusaurus-plugin-content-docs/current/configure/app/source/entries-dir.md

@@ -0,0 +1,38 @@
+---
+title: source.entriesDir
+sidebar_label: entriesDir
+---
+
+* Type:  `string`
+* Default: `./src`
+
+By default, the application entry will be identified according to the `src` directory. You can customize the identification directory of the application entry through this option.
+
+For example, when the configuration and directory structure are as follows:
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  source: {
+    entriesDir: './src/pages'
+  }
+})
+```
+
+``` title="Project directory structure"
+.
+└── src
+    └── pages
+        ├── a
+        │   └── App.jsx
+        └── b
+            └── App.jsx
+```
+
+Modern.js will generate the build entry `a` and entry `b` according to the `./src/pages` directory structure, the result is as follows:
+
+```js
+ {
+   a: './src/pages/a/App.jsx',
+   b: './src/pages/b/App.jsx'
+ }
+```

package/en/docusaurus-plugin-content-docs/current/configure/app/source/entries.md

@@ -0,0 +1,62 @@
+---
+title: source.entries
+sidebar_label: entries
+---
+
+* Type: `Object = { [ entryName: string ]: string | Object }`
+* Default: Default entry object dynamically settled according to the current project directory structure.
+
+For most scenarios, Modern.js automatically generated entries according to the directory structure can meet most business requirements. For details, please refer to [Entries](/docs/guides/concept/entries)。
+
+If you need to customize the build entry, you can specify it with this option.
+
+## String
+
+When the value is of type `string`, the file path of the entry:
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  source: {
+    entries: {
+      // Specify a new entry named entry_customize
+      entry_customize: './src/home/test/index.js',
+    },
+  },
+});
+```
+
+Customized entry, only need to export `App` by default, Modern.js will generate a real entry file.
+
+When this behavior needs to be turned off, the value can be set to `Object` and the property `disableMount` can be set to `true`.
+
+
+## Object
+
+When the value is `Object`, the following properties can be configured:
+
+* `entry`：`string`，entry file path。
+* `disableMount`：`boolean = false`，turn off Modern.js generate entry code。
+* `enableFileSystemRoutes`：`boolean = false`，[Use Conventional Routing](/docs/apis/app/hooks/src/pages)。
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  source: {
+    entries: {
+      entry_customize: {
+        // entry file path
+        entry: './src/home/test/App.jsx',
+      },
+      // Use Conventional Routing
+      entry_spa: {
+        // The entry path of a conventional route must be set to a directory
+        entry: './src/about',
+        enableFileSystemRoutes: true,
+      },
+    },
+  },
+});
+```

package/en/docusaurus-plugin-content-docs/current/configure/app/source/exclude.md

@@ -0,0 +1,12 @@
+---
+title: source.exclude
+sidebar_label: exclude
+---
+
+:::info BUILDER
+This configuration is Modern.js Builder configuration, there may be links that cannot be redirected. for details, please refer to [source.exclude](https://modernjs.dev/builder/zh/api/config-source.html#source-exclude)。
+:::
+
+import Main from '@modern-js/builder-doc/en/config/source/exclude.md'
+
+<Main />

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/source/global-vars.md

@@ -1,7 +1,6 @@
 ---
 title: source.globalVars
 sidebar_label: globalVars
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/source/include.md

@@ -1,7 +1,6 @@
 ---
 title: source.include
 sidebar_label: include
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/source/module-scopes.md

@@ -1,7 +1,6 @@
 ---
 title: source.moduleScopes
 sidebar_label: moduleScopes
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/source/pre-entry.md

@@ -1,7 +1,6 @@
 ---
 title: source.preEntry
 sidebar_label: preEntry
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/source/resolve-extension-prefix.md

@@ -1,7 +1,6 @@
 ---
 title: source.resolveExtensionPrefix
 sidebar_label: resolveExtensionPrefix
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/source/resolve-main-fields.md

@@ -1,7 +1,6 @@
 ---
 title: source.resolveMainFields
 sidebar_label: resolveMainFields
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/docusaurus-plugin-content-docs/current/configure/app/testing/transformer.md

@@ -0,0 +1,18 @@
+---
+title: testing.transformer
+sidebar_label: transformer
+sidebar_position: 1
+---
+
+- Type: `'babel-jest' | 'ts-jest'`
+- Default: `babel-jest`
+
+:::caution Caution
+First you need to enable the "Unit Test" function using [new](/docs/apis/app/commands/new) command.
+:::
+
+Configure the compiler for source code when executing tests: [babel-jest](https://www.npmjs.com/package/babel-jest) or [ts-jest](https://github.com/kulshekhar/ts-jest). `babel-jest` is used by default.
+
+:::info Additional information
+`Babel-jest` can also compile TS files, but there is no type error. If you need to check the TS type when running tests, then use `ts-jest`.
+:::

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/autoprefixer.md

@@ -1,7 +1,6 @@
 ---
 title: tools.autoprefixer
 sidebar_label: autoprefixer
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/babel.md

@@ -1,7 +1,6 @@
 ---
 title: tools.babel
 sidebar_label: babel
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/css-extract.md

@@ -1,7 +1,6 @@
 ---
 title: tools.cssExtract
 sidebar_label: cssExtract
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/css-loader.md

@@ -1,7 +1,6 @@
 ---
 title: tools.cssLoader
 sidebar_label: cssLoader
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/dev-server.md

@@ -1,7 +1,6 @@
 ---
 title: tools.devServer
 sidebar_label: devServer
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/docusaurus-plugin-content-docs/current/configure/app/tools/esbuild.md

@@ -0,0 +1,61 @@
+---
+title: tools.esbuild
+sidebar_label: esbuild
+---
+
+* Type: `Object`
+* Default: `undefined`
+
+## Introduction
+
+Esbuild is a JavaScript Bundler/Minifier written in Go language, which is characterized by extremely fast speed. In terms of code compression, esbuild has dozens of times the performance improvement compared to webpack's built-in terser compressor.
+
+Modern.js provides the ability to compile and compress code based on esbuild. After opening it in a large project, ** can greatly reduce the time required for code compression, while effectively avoiding OOM (heap out of memory) problems **.
+
+Although the use of esbuild compression has brought about an improvement in construction efficiency, the compression ratio of esbuild is lower than that of terser, so the size of the ** bundle will increase **, please use it according to the business situation (more suitable for middle and back-end scenarios).
+
+For a detailed comparison between compression tools, see [mining-benchmarks](https://github.com/privatenumber/minification-benchmarks).
+
+:::info
+In addition to code compression, esbuild can also replace babel for code compilation. The advantage is that it can improve the compilation speed, but the disadvantage is that it cannot use the rich babel plug-in capabilities.
+:::
+
+## Configuration
+
+### target
+
+* Type: `string | string[]`
+* Default `'esnext'`
+
+Set the target environment for the generated JavaScript and CSS code.
+
+Can be set directly to the JavaScript language version, such as `es5`, `es6`, `es2020`. It can also be set to several target environments, each target environment is an environment name followed by a version number. For example: `['chrome58', 'edge16', 'firefox57']`.
+
+The following environments are supported:
+
+- chrome
+- edge
+- firefox
+- ie
+- ios
+- node
+- opera
+- safari
+
+By default, ES6 code, such as template string, is introduced into the esbuild compression process. If you need to be ES5 compatible, you can set `target` to `es5`.
+
+```typescript title="modern.config.ts"
+export default defineConfig({
+  tools: {
+    esbuild: {
+      target: 'es5',
+    },
+  },
+});
+```
+
+:::info
+When setting `target` to `es5`, you need to ensure that all code is escaped to es5 code by babel, otherwise it will cause an esbuild compilation error: `Transforming 'xxx' to the configured target environment ("es5") is not supported yet`.
+
+A detailed description of the `target` field can be found in [esbuild-target](https://esbuild.github.io/api/#target).
+:::

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/html-plugin.md

@@ -1,7 +1,6 @@
 ---
 title: tools.htmlPlugin
 sidebar_label: htmlPlugin
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/inspector.md

@@ -1,7 +1,6 @@
 ---
 title: tools.inspector
 sidebar_label: inspector
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/docusaurus-plugin-content-docs/current/configure/app/tools/jest.md

@@ -0,0 +1,39 @@
+---
+title: tools.jest
+
+sidebar_label: jest
+---
+
+* Type: `Object | Function`
+* Default: `{}`
+
+:::caution Caution
+First you need to enable the "Unit Test" function using [new](/docs/apis/app/commands/new) command.
+:::
+
+Corresponding to the configuration of [Jest](https://jestjs.io/docs/configuration), when of type `Object`, all underlying configurations supported by Jest can be configured.
+
+```js title=modern.config.js
+export default defineConfig({
+  tools: {
+    jest: {
+      testTimeout: 10000
+    }
+  }
+});
+```
+
+When the value is of type `Function`, the default configuration is passed in as the first parameter and a new Jest configuration object needs to be returned.
+
+```js title=modern.config.js
+export default defineConfig({
+  tools: {
+    jest: options => {
+      return {
+        ...options,
+        testTimeout: 10000
+      }
+    }
+  }
+});
+```

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/less.md

@@ -1,7 +1,6 @@
 ---
 title: tools.less
 sidebar_label: less
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/minify-css.md

@@ -1,7 +1,6 @@
 ---
 title: tools.minifyCss
 sidebar_label: minifyCss
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/postcss.md

@@ -1,7 +1,6 @@
 ---
 title: tools.postcss
 sidebar_label: postcss
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/pug.md

@@ -1,7 +1,6 @@
 ---
 title: tools.pug
 sidebar_label: pug
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/sass.md

@@ -1,7 +1,6 @@
 ---
 title: tools.sass
 sidebar_label: sass
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/style-loader.md

@@ -1,7 +1,6 @@
 ---
 title: tools.styleLoader
 sidebar_label: styleLoader
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/styled-components.md

@@ -1,7 +1,6 @@
 ---
 title: tools.styledComponents
 sidebar_label: styledComponents
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/docusaurus-plugin-content-docs/current/configure/app/tools/tailwindcss.md

@@ -0,0 +1,47 @@
+---
+title: tools.tailwindcss
+
+sidebar_label: tailwindcss
+---
+
+* Type: `Object | Function`
+* Default: See configuration details below.
+
+<details>
+  <summary>TailwindCSS configuration details</summary>
+
+```js
+  const tailwind = {
+    purge: {
+        enabled: options.env === 'production',
+        content: [
+          './config/html/**/*.html',
+          './config/html/**/*.ejs',
+          './config/html/**/*.hbs',
+          './src/**/*',
+        ],
+        layers: ['utilities'],
+    },
+    // https://tailwindcss.com/docs/upcoming-changes
+    future: {
+      removeDeprecatedGapUtilities: false,
+      purgeLayersByDefault: true,
+      defaultLineHeights: false,
+      standardFontWeights: false,
+    },
+    theme: source.designSystem // Use source.design System configuration as Tailwind CSS Theme configuration
+  }
+```
+
+:::tip Tips
+More about: <a href="https://tailwindcss.com/docs/configuration" target="_blank">TailwindCSS configuration</a>。
+:::
+</details>
+
+When the value is of type `Object`, rhe configuration corresponding to [TailwindCSS](https://tailwindcss.com/docs/configuration) is merged with the default configuration through `Object.assign`.
+
+When the value is of type `Function`, the object returned by the function is merged with the default configuration by `Object.assign`.
+
+The `theme` attribute is not allowed, otherwise the build will fail. Modern.js use [`source.designSystem`](/docs/configure/app/source/design-system) as the Tailwind CSS Theme configuration.
+
+Other uses are consistent with [Tailwind CSS](https://tailwindcss.com/docs/configuration)。

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/terser.md

@@ -1,7 +1,6 @@
 ---
 title: tools.terser
 sidebar_label: terser
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/ts-checker.md

@@ -1,7 +1,6 @@
 ---
 title: tools.tsChecker
 sidebar_label: tsChecker
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/ts-loader.md

@@ -1,7 +1,6 @@
 ---
 title: tools.tsLoader
 sidebar_label: tsLoader
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/webpack-chain.md

@@ -1,7 +1,6 @@
 ---
 title: tools.webpackChain
 sidebar_label: webpackChain
-sidebar_position: 1
 ---
 
 :::info BUILDER

package/en/{configure → docusaurus-plugin-content-docs/current/configure}/app/tools/webpack.md

@@ -1,7 +1,6 @@
 ---
 title: tools.webpack
 sidebar_label: webpack
-sidebar_position: 1
 ---
 
 :::info BUILDER