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

package/docs/en/components/reduck-notify.mdx

@@ -1,27 +0,0 @@
-:::warning
-Starting from `MAJOR_VERSION.67.0`, Modern.js no longer provides Reduck state management capabilities by default. If you need to use Reduck, you must install and register the state plugin.
-
-**Installation Steps**
-
-1. Install the `@modern-js/plugin-state` dependency:
-
-```bash
-pnpm add @modern-js/plugin-state
-```
-
-2. Register the state plugin:
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-import { statePlugin } from '@modern-js/plugin-state';
-
-export default defineConfig({
-  ...,
-  plugins: [
-    ...,
-    statePlugin(),
-  ],
-});
-```
-
-:::

package/docs/en/components/reduck-tip.mdx

@@ -1,8 +0,0 @@
-
-
-:::info information
-By default, the export package name for all APIs in this section is: `@modern-js/runtime/model`.
-
-If Reduck is integrated separately from Modern.js, the export package name is: `@modern-js-reduck/react`.
-
-:::

package/docs/en/configure/app/auto-load-plugin.mdx

@@ -1,66 +0,0 @@
----
-sidebar_position: 22
----
-
-# autoLoadPlugins
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-Used to configure whether Modern.js enables auto-registration of plugins.
-
-:::warning
-This configuration is not recommended. Compared with manually registering plugin, this configuration is relatively black box and cannot add custom configurations to plugin.
-:::
-
-### Manual Registration Plugin
-
-By default, installing the plugin requires you to register the plugin manually in the `modern.config.ts`.
-
-```ts title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { bffPlugin } from '@modern-js/plugin-bff';
-
-export default defineConfig({
-  plugins: [appTools(), bffPlugin()],
-});
-```
-
-### Auto Registration plugin
-
-In addition to means registration, Modern.js also provides a way to automatically register plugins: set the `autoLoadPlugin` configuration option to `true`.
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  autoLoadPlugins: true,
-});
-```
-
-Modern.js will help you automatically register the plugin by following these steps
-
-1. Modern.js maintains an official list of plugins internally.
-
-```js
-const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-tailwindcss', ...];
-```
-
-2. Modern.js will read your `package.json` and collect the dependency information.
-
-```json title="package.json"
-"dependencies": {
-  "@modern-js/plugin-tailwindcss": "x.x.x"
-  ...
-},
-"devDependencies": {
-  "@modern-js/app-tools": "x.x.x"
-  ...
-}
-```
-
-3. Modern.js observes that when you install dependencies such as `@modern-js/plugin-tailwindcss` and `@modern-js/app-tools`, automatic plugin registration will be imported.
-
-You can notice that this approach is relatively black-box and you are not even aware of the process of loading the plugin. We want to expose more details to the developer and be able to let the developer control the process.
-
-**Therefore we recommend you to register the plugin manually.**

package/docs/en/configure/app/deploy/microFrontend.mdx

@@ -1,53 +0,0 @@
----
-title: microFrontend
----
-
-# deploy.microFrontend
-
-- **Type:** `object`
-- **Default:** `{ enableHtmlEntry: true, externalBasicLibrary: false }`
-
-```ts
-interface MicroFrontend {
-  enableHtmlEntry?: boolean;
-  externalBasicLibrary?: boolean;
-  moduleApp?: string;
-}
-```
-
-Developers can configure micro-frontend sub-application information using the `deploy.microFrontend` object.
-
-:::caution
-To enable the "Micro Frontend" features, run `pnpm run new` first.
-
-:::
-
-## Example
-
-```ts
-export default defineConfig({
-  deploy: {
-    microFrontend: {
-      enableHtmlEntry: true,
-    },
-  },
-});
-```
-
-## Configuration
-
-### enableHtmlEntry
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-Specifies whether to enable the HTML entry. By default, it is set to `true`, which means the sub-application is built in `HTML` mode. Garfish supports the `html` entry, so you can enable this option to experience the corresponding features. When using the HTML entry, simply point the sub-application entry to the HTML file.
-
-Set it to `false` to indicate that the sub-application is built as `js`. After building the sub-application as `js`, it cannot run independently. When using the `JS` entry, point the entry file of the sub-application to the `JS` file of the sub-application.
-
-### externalBasicLibrary
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-Specifies whether to use the external base library. When set to `true`, the current child application will be externalized for `react` and `react-dom`. The main application of Modern.js will automatically `setExternal` these two base libraries. If you are using other frameworks, please add `react` and `react-dom` dependencies through `Garfish.setExternal`.

package/docs/en/configure/app/dev/port.mdx

@@ -1,25 +0,0 @@
----
-title: port
----
-
-# dev.port
-
-- **Type:** `number`
-- **Default:** `8080`
-
-Specify a port number for Dev Server to listen.
-
-By default, Dev Server listens on port `8080` and automatically increments the port number when the port is occupied.
-
-### Example
-
-Set the port to `3000`:
-
-```ts
-export default {
-  dev: {
-    port: 3000,
-  },
-};
-```
-

package/docs/en/configure/app/dev/proxy.mdx

@@ -1,9 +0,0 @@
----
-title: proxy
----
-
-# dev.proxy
-
-import GlobalProxyConfig from "@site-docs-en/components/global-proxy-config"
-
-<GlobalProxyConfig />

package/docs/en/configure/app/experiments/lazy-compilation.mdx

@@ -1,106 +0,0 @@
----
-title: lazyCompilation
----
-
-# experiments.lazyCompilation
-
-- **Type:**
-
-```ts
-type LazyCompilationOptions =
-  | boolean
-  | {
-      // Whether to enable lazy compilation for entries
-      entries?: boolean;
-      // Whether to enable lazy compilation for dynamic imports
-      imports?: boolean;
-      // Specify which imported modules should be lazily compiled.
-      test?: RegExp | ((m: Module) => boolean);
-    };
-```
-
-- **Default:** `false`
-
-Used to enable the lazy compilation (i.e. compile on demand). When this config is enabled, Modern.js will compile entrypoints and dynamic imports only when they are used. It will improve the compilation startup time of the project.
-
-Lazy compilation only takes effect in the development.
-
-## Rspack
-
-In Rsbuild, Lazy Compilation is enabled by default. But in Modern.js, some features of Modern.js may conflict with Lazy Compilation, so we disabled it by default.
-
-If your project uses SSR or [Prefetch Link](/guides/basic-features/routes.html#prefetching), we recommended you to disable Lazy Compilation.
-
-import RsbuildLink from '@site/src/components/RsbuildLink';
-
-:::info
-The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to <RsbuildLink configName="dev.lazyCompilation"/>。
-In Rspack build mode,
-:::
-
-## Webapck
-
-### Lazy Compilation for Dynamic Imports
-
-Lazy compile async modules introduced by [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import):
-
-```ts
-export default {
-  experiments: {
-    lazyCompilation: {
-      imports: true,
-      entries: false,
-    },
-  },
-};
-```
-
-When `imports` option is enabled, all async modules will only be compiled when requested. If your project is a single-page application, and routing is split through dynamic import, there will be a significant effect of speeding up compilation.
-
-### Lazy Compilation for Entires
-
-In addition to lazy compilation for async modules, you can also choose to lazily compile both entries and async modules at the same time.
-
-```ts
-export default {
-  experiments: {
-    lazyCompilation: {
-      imports: true,
-      entries: true,
-    },
-  },
-};
-```
-
-The above config can also be simplified to:
-
-```ts
-export default {
-  experiments: {
-    lazyCompilation: true,
-  },
-};
-```
-
-When `entries` option is enabled, all pages will not be compiled when the compilation is started, and the page will be compiled only when you visit it.
-
-When using lazy compilation for entries, there are some considerations:
-
-- Only work for multi-page applications, no work for single-page applications.
-- when you visit a page, there will be a white screen for a period of time due to waiting for the page to be compiled.
-
-### Limitations
-
-#### Disable split chunks
-
-When you enable lazy compilation, in order to ensure the compilation results, Modern.js will disable split chunks in the development. This will not affect the build results in the production, but will cause a difference between the build results of the development and production.
-
-#### Use proxy
-
-Lazy Compilation relies on the local development server of webpack. When you proxy a domain name to localhost, Lazy Compilation will not work properly. Therefore, if you need to develop with proxy, please disable Lazy Compilation.
-
-#### Other Potential Issues
-
-Considering that Lazy Compilation is still an experimental feature of webpack, you may encounter some potential issues while using it, such as changes in the behavior of compiled artifacts or compilation errors.
-
-When you encounter these issues, you can refer to [webpack Issues](https://github.com/webpack/webpack/issues) to find solutions or disable the `lazyCompilation` configuration option.

package/docs/en/configure/app/html/disable-html-folder.mdx

@@ -1,46 +0,0 @@
----
-title: disableHtmlFolder
----
-
-# html.disableHtmlFolder
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-Remove the folder of the HTML files. When this option is enabled, the generated HTML file path will change from `[name]/index.html` to `[name].html`.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use `html.outputStructure` instead.
-:::
-
-### Example
-
-By default, the structure of HTML files in the `dist` directory is:
-
-```bash
-/dist
-└── html
-    └── main
-        └── index.html
-```
-
-Enable the `html.disableHtmlFolder` config:
-
-```js
-export default {
-  html: {
-    disableHtmlFolder: true,
-  },
-};
-```
-
-After recompiling, the directory structure of the HTML files in dist is:
-
-```bash
-/dist
-└── html
-    └── main.html
-```
-
-> If you want to set the path of the HTML files, use the `output.distPath.html` config.
-

package/docs/en/configure/app/html/favicon-by-entries.mdx

@@ -1,36 +0,0 @@
----
-title: faviconByEntries
----
-
-# html.faviconByEntries
-
-- **Type:** `Record<string, string>`
-- **Default:** `undefined`
-
-Set different favicon for different pages.
-
-The usage is same as `favicon`, and you can use the "entry name" as the key to set each page individually.
-
-`faviconByEntries` will overrides the value set in `favicon`.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the function usage of `html.favicon` instead.
-:::
-
-### Example
-
-```js
-export default {
-  html: {
-    favicon: './src/assets/default.png',
-    faviconByEntries: {
-      foo: './src/assets/foo.png',
-    },
-  },
-};
-```
-
-After recompiling, you will see:
-
-- The favicon for page `foo` is `./src/assets/foo.png`.
-- The favicon for other pages is `./src/assets/default.png`.

package/docs/en/configure/app/html/inject-by-entries.mdx

@@ -1,36 +0,0 @@
----
-title: injectByEntries
----
-
-# html.injectByEntries
-
-- **Type:** `Record<string, boolean | string>`
-- **Default:** `undefined`
-
-Set different script tag inject positions for different pages.
-
-The usage is same as `inject`, and you can use the "entry name" as the key to set each page individually.
-
-`injectByEntries` will overrides the value set in `inject`.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the function usage of `html.inject` instead.
-:::
-
-### Example
-
-```js
-export default {
-  html: {
-    inject: 'head',
-    injectByEntries: {
-      foo: 'body',
-    },
-  },
-};
-```
-
-After recompiling, you will see:
-
-- The script tag of the page `foo` will be injected inside the `body` tag.
-- The script tag of other pages will be injected inside the `head` tag.

package/docs/en/configure/app/html/meta-by-entries.mdx

@@ -1,48 +0,0 @@
----
-title: metaByEntries
----
-
-# html.metaByEntries
-
-- **Type:** `Record<string, Meta>`
-- **Default:** `undefined`
-
-Set different meta tags for different pages.
-
-The usage is same as `meta`, and you can use the "entry name" as the key to set each page individually.
-
-`metaByEntries` will overrides the value set in `meta`.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the function usage of `html.meta` instead.
-:::
-
-### Example
-
-```js
-export default {
-  html: {
-    meta: {
-      description: 'ByteDance',
-    },
-    metaByEntries: {
-      foo: {
-        description: 'TikTok',
-      },
-    },
-  },
-};
-```
-
-After compiling, you can see that the meta of the page `foo` is:
-
-```html
-<meta name="description" content="TikTok" />
-```
-
-The meta of other pages is:
-
-```html
-<meta name="description" content="ByteDance" />
-```
-

package/docs/en/configure/app/html/tags-by-entries.mdx

@@ -1,44 +0,0 @@
----
-title: tagsByEntries
----
-
-# html.tagsByEntries
-
-- **Type:** `Record<string, ArrayOrNot<HtmlInjectTag | HtmlInjectTagHandler>>`
-- **Default:** `undefined`
-
-Used for multiple entry applications, injecting different tags for each entry.
-
-The usage is the same as `tags`, and you can use the "entry name" as the key to set each page individually.
-
-`tagsByEntries` will override the value set in `tags`.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the function usage of `html.tags` instead.
-:::
-
-### Example
-
-```js
-export default {
-  html: {
-    tags: [{ tag: 'script', attrs: { src: 'a.js' } }],
-    tagsByEntries: {
-      foo: [{ tag: 'script', attrs: { src: 'b.js' } }],
-    },
-  },
-};
-```
-
-Compile the application and you can see a tag injected on the `foo` page:
-
-```html
-<script src="b.js"></script>
-```
-
-And for any other pages:
-
-```html
-<script src="a.js"></script>
-```
-

package/docs/en/configure/app/html/template-by-entries.mdx

@@ -1,33 +0,0 @@
----
-title: templateByEntries
----
-
-# html.templateByEntries
-
-- **Type:** `Object`
-- **Default:** `undefined`
-
-Set different template file for different pages.
-
-The usage is same as `template`, and you can use the "entry name" as the key to set each page individually.
-
-`templateByEntries` will overrides the value set in `template`.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the function usage of `html.template` instead.
-:::
-
-### Example
-
-```js
-export default {
-  html: {
-    template: './static/index.html',
-    templateByEntries: {
-      foo: './src/pages/foo/index.html',
-      bar: './src/pages/bar/index.html',
-    },
-  },
-};
-```
-

package/docs/en/configure/app/html/template-parameters-by-entries.mdx

@@ -1,35 +0,0 @@
----
-title: templateParametersByEntries
----
-
-# html.templateParametersByEntries
-
-- **Type:** `Object`
-- **Default:** `undefined`
-
-Set different template parameters for different pages.
-
-The usage is same as `templateParameters`, and you can use the "entry name" as the key to set each page individually.
-
-`templateParametersByEntries` will overrides the value set in `templateParameters`.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the function usage of `html.templateParameters` instead.
-:::
-
-### Example
-
-```js
-export default {
-  html: {
-    templateParametersByEntries: {
-      foo: {
-        type: 'a',
-      },
-      bar: {
-        type: 'b',
-      },
-    },
-  },
-};
-```

package/docs/en/configure/app/html/title-by-entries.mdx

@@ -1,37 +0,0 @@
----
-title: titleByEntries
----
-
-# html.titleByEntries
-
-- **Type:** `Record<string, string>`
-- **Default:** `undefined`
-
-Set different title for different pages.
-
-The usage is same as `title`, and you can use the "entry name" as the key to set each page individually.
-
-`titleByEntries` will overrides the value set in `title`.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the function usage of `html.title` instead.
-:::
-
-### Example
-
-```js
-export default {
-  html: {
-    title: 'ByteDance',
-    titleByEntries: {
-      foo: 'TikTok',
-    },
-  },
-};
-```
-
-After recompiling, you can see:
-
-- The title of the page `foo` is `TikTok`.
-- The title of other pages is `ByteDance`.
-

package/docs/en/configure/app/output/css-module-local-ident-name.mdx

@@ -1,21 +0,0 @@
----
-title: cssModuleLocalIdentName
----
-
-# output.cssModuleLocalIdentName
-
-- **Type:** `string`
-- **Default:**
-
-```ts
-// isProd indicates that the production build
-const localIdentName = isProd
-  ? '[local]-[hash:base64:6]'
-  : '[path][name]__[local]-[hash:base64:6]';
-```
-
-Sets the format of the className generated by CSS Modules after compilation.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the `cssModules.localIdentName` instead.
-:::

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

@@ -1,16 +0,0 @@
----
-title: disableCssExtract
----
-
-# output.disableCssExtract
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-Whether to disable CSS extract and inline CSS files into JS files.
-
-By default, Modern.js will extract CSS into a separate `.css` file and output it to the dist directory. When this option is set to `true`, CSS files will be inlined into JS files and inserted on the page at runtime via `<style>` tags.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the `output.injectStyles` instead.
-:::

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

@@ -1,16 +0,0 @@
----
-title: disableFilenameHash
----
-
-# output.disableFilenameHash
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-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-minimize.mdx

@@ -1,14 +0,0 @@
----
-title: disableMinimize
----
-
-# output.disableMinimize
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-Whether to disable code minification on production builds.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the boolean usage of `output.minify` instead.
-:::