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

package/docs/en/components/enable-micro-frontend.mdx

@@ -1,30 +0,0 @@
-```ts title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { garfishPlugin } from '@modern-js/plugin-garfish';
-
-export default defineConfig({
-  runtime: {
-    router: true,
-  },
-  plugins: [appTools(), garfishPlugin()],
-});
-
-```
-
-```ts title="src/modern.runtime.ts"
-import { defineRuntimeConfig } from '@modern-js/runtime';
-
-export default defineRuntimeConfig({
-  masterApp: {
-    apps: [{
-      name: 'Table',
-      entry: 'http://localhost:8081',
-      // activeWhen: '/table'
-    }, {
-      name: 'Dashboard',
-      entry: 'http://localhost:8082'
-      // activeWhen: '/dashboard'
-    }]
-  },
-});
-```

package/docs/en/components/enableSwc.mdx

@@ -1,17 +0,0 @@
-First, you need to execute `pnpm run new` to enable the SWC compile:
-
-```bash
-? Please select the operation you want: Enable features
-? Please select the feature name: Enable SWC Compile
-```
-
-After the installation, please register the SWC plugin in the `modern.config.ts` file, then the SWC compilation and compression will be enabled.
-
-```ts title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { swcPlugin } from '@modern-js/plugin-swc';
-
-export default defineConfig({
-  plugins: [appTools(), swcPlugin()],
-});
-```

package/docs/en/components/global-proxy-config.mdx

@@ -1,85 +0,0 @@
-- **Type:** `string | Object`
-- **Default:** `null`
-
-This option is used to configure a global proxy based on [whistle](https://wproxy.org/whistle/) in the development environment, which can be used to view and modify HTTP/HTTPS requests, responses, and can also be used as a proxy server.
-
-### Register Plugin
-
-Before using this option, you need to install and register the `@modern-js/plugin-proxy` plugin:
-
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command="add @modern-js/plugin-proxy -D" />
-
-After the installation, please register the plugin in the `modern.config.ts` file:
-
-```ts title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { proxyPlugin } from '@modern-js/plugin-proxy';
-
-export default defineConfig({
-  plugins: [appTools(), proxyPlugin()],
-});
-```
-
-### Object Type
-
-When the value of `dev.proxy` is object type, the `key` of the object corresponds to the matching `pattern`, and the `value` of the object corresponds to the matching `target`.
-
-Example:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  dev: {
-    proxy: {
-      'https://www.baidu.com': 'https://google.com.hk',
-      // Static files can be returned directly via the file protocol
-      'https://example.com/api': 'file://./data.json',
-    },
-  },
-});
-```
-
-Please refer to [whistle - Matching Patterns](https://wproxy.org/whistle/pattern.html) for detailed usage.
-
-### String Type
-
-When the value of `dev.proxy` is string type, it can be used to specify a separate proxy file, for example:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  dev: {
-    proxy: './proxy.js',
-  },
-});
-```
-
-```js title="proxy.js"
-module.exports = {
-  name: 'my-app',
-  rules: `
-    ^example.com:8080/api/***   http://localhost:3001/api/$
-  `,
-};
-```
-
-### Start Proxy
-
-Execute `dev`, when the prompt is as follows, the proxy server starts successfully:
-
-```bash
-  Local:    http://localhost:8080/
-  Network:  http://192.168.0.1:8080/
-
-info      Starting proxy server.....
-success   Proxy server start on localhost:8899
-```
-
-Access the `localhost:8899` to view the Network and configure proxy rules on the UI interface:
-
-![proxy UI](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/dev-proxy.png)
-
-:::info
-The https agent automatically installs the certificate to obtain root privileges. Please enter the password as prompted. ** The password is only used when the certificate is trusted and will not be leaked or used for other links **.
-
-:::

package/docs/en/components/global-proxy.mdx

@@ -1,29 +0,0 @@
-:::warning
-`@modern-js/plugin-proxy` is no longer maintained and new versions will no longer be released. Please consider migrating to other proxy tools, such as [whistle](https://github.com/avwo/whistle).
-:::
-
-Modern.js provides an out-of-the-box global proxy plugin `@modern-js/plugin-proxy`, which is based on [whistle](https://github.com/avwo/whistle) and can be used to view and modify the requests and responses of HTTP/HTTPS, as well as be used as an HTTP proxy server.
-
-### Setting Proxy Rules
-
-After installing the proxy plugin and configuring the rules, run `pnpm run dev`. Modern.js will automatically enable the proxy server when the development server is started.
-
-Specific proxy rules can be set via the [`dev.proxy`](/configure/app/dev/proxy) or the `config/proxy.js` file.
-
-### Proxy Dashboard
-
-After installing the proxy plugin and configuring the proxy rules, run the `pnpm run dev` command:
-
-```bash
-  Local:    http://localhost:8080/
-  Network:  http://192.168.0.1:8080/
-
-info      Starting proxy server.....
-success   Proxy server start on localhost:8899
-```
-
-You can see that the proxy server has started successfully in the console.
-
-Access `http://localhost:8899`, and you can set the rules through the dashboard.
-
-![debug-proxy-ui](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/debug/debug-proxy-ui.png)

package/docs/en/components/package-manager.mdx

@@ -1,11 +0,0 @@
-### packageManager
-
-Question: Please select the package manager.
-
-Options:
-
-- pnpm -- pnpm
-
-- Yarn -- yarn
-
-- npm -- npm

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>
-```
-