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

package/docs/en/configure/app/output/disable-node-polyfill.mdx

@@ -1,22 +0,0 @@
----
-title: disableNodePolyfill
----
-
-# output.disableNodePolyfill
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-This config is used to control whether to inject the Polyfill of the Node module into the code.
-
-By default, we will not inject Node Polyfill into the code to avoid bundle size increase. If you need to inject Node Polyfill, you can set `output.disableNodePolyfill` to `false`:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  output: {
-    disableNodePolyfill: false,
-  },
-});
-```
-
-This config is implemented based on the Node Polyfill plugin of Rsbuild, you can read [Rsbuild - Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) documentation for details.

package/docs/en/configure/app/output/disable-source-map.mdx

@@ -1,31 +0,0 @@
----
-title: disableSourceMap
----
-
-# output.disableSourceMap
-
-- **Type:**
-
-```ts
-type DisableSourceMap =
-  | boolean
-  | {
-      js?: boolean;
-      css?: boolean;
-    };
-```
-
-- **Default:**
-
-```ts
-const defaultDisableSourceMap = {
-  js: false,
-  css: process.env.NODE_ENV === 'production',
-};
-```
-
-Whether to disable Source Map generation.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the boolean usage of `output.sourceMap` instead.
-:::

package/docs/en/configure/app/output/enable-asset-fallback.mdx

@@ -1,36 +0,0 @@
----
-title: enableAssetFallback
----
-
-# output.enableAssetFallback
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-If this option is enabled, all unrecognized files will be emitted to the dist directory; otherwise, an exception will be thrown.
-
-### Example
-
-Enable the config:
-
-```js
-export default {
-  output: {
-    enableAssetFallback: true,
-  },
-};
-```
-
-Import a module of unknown type in code:
-
-```js
-import './foo.xxx';
-```
-
-After compilation, `foo.xxx` will be output to the `dist/static/media` directory.
-
-You can control the output path and filename after fallback through the `output.distPath.media` and `output.filename.media` configs.
-
-:::tip
-Enabling this config will change the rules structure in the webpack config. In most cases, we do not recommend using this config.
-:::

package/docs/en/configure/app/output/enable-inline-scripts.mdx

@@ -1,22 +0,0 @@
----
-title: enableInlineScripts
----
-
-# output.enableInlineScripts
-
-- **Type:**
-
-```ts
-type EnableInlineScripts =
-  | boolean
-  | RegExp
-  | ((params: { size: number; name: string }) => boolean);
-```
-
-- **Default:** `false`
-
-Whether to inline output scripts files (.js files) into HTML with `<script>` tags in production mode.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the boolean usage of `output.inlineScripts` instead.
-:::

package/docs/en/configure/app/output/enable-inline-styles.mdx

@@ -1,22 +0,0 @@
----
-title: enableInlineStyles
----
-
-# output.enableInlineStyles
-
-- **Type:**
-
-```ts
-type EnableInlineStyles =
-  | boolean
-  | RegExp
-  | ((params: { size: number; name: string }) => boolean);
-```
-
-- **Default:** `false`
-
-Whether to inline output style files (.css files) into HTML with `<style>` tags in production mode.
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use the boolean usage of `output.inlineStyles` instead.
-:::

package/docs/en/configure/app/output/enable-latest-decorators.mdx

@@ -1,14 +0,0 @@
----
-title: enableLatestDecorators
----
-
-# output.enableLatestDecorators
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-Whether to use [the new decorator proposal](https://github.com/tc39/proposal-decorators/tree/7fa580b40f2c19c561511ea2c978e307ae689a1b).
-
-:::warning
-**Deprecated**: This configuration is deprecated, please use `source.decorators` instead.
-:::

package/docs/en/configure/app/performance/bundle-analyze.mdx

@@ -1,24 +0,0 @@
----
-title: bundleAnalyze
----
-
-# performance.bundleAnalyze
-
-- **Type:** `Object | undefined`
-
-Used to enable the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) plugin to analyze the size of the output.
-
-By default, Modern.js does not enable `webpack-bundle-analyzer`. When this feature is enabled, the default configuration is as follows:
-
-```js
-const defaultConfig = {
-  analyzerMode: 'static',
-  openAnalyzer: false,
-  // Distinguish by target names, such as `web`, `node`, etc.
-  reportFilename: `report-${target}.html`,
-};
-```
-
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
-
-<RsbuildConfig configName="performance.bundleAnalyze" />

package/docs/en/configure/app/performance/transform-lodash.mdx

@@ -1,52 +0,0 @@
----
-title: transformLodash
----
-
-# performance.transformLodash
-
-import { Badge } from '@theme';
-
-<Badge type="danger" >Webpack Only</Badge>
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-Specifies whether to modularize the import of [lodash](https://www.npmjs.com/package/lodash) and remove unused lodash modules to reduce the code size of lodash.
-
-This optimization is implemented using [babel-plugin-lodash](https://www.npmjs.com/package/babel-plugin-lodash) and [swc-plugin-lodash](https://github.com/web-infra-dev/swc-plugins/tree/main/crates/plugin_lodash) under the hood.
-
-### Example
-
-This option is enabled by default, and Modern.js will automatically redirects the code references of `lodash` to sub-paths.
-
-For example:
-
-```ts title="input.js"
-import _ from 'lodash';
-import { add } from 'lodash/fp';
-
-const addOne = add(1);
-_.map([1, 2, 3], addOne);
-```
-
-The transformed code will be:
-
-```ts title="output.js"
-import _add from 'lodash/fp/add';
-import _map from 'lodash/map';
-
-const addOne = _add(1);
-_map([1, 2, 3], addOne);
-```
-
-### Disabling the Transformation
-
-In some cases, the import transformation of `lodash` may generate unexpected code. In such cases, you can manually disable this optimization:
-
-```js
-export default {
-  performance: {
-    transformLodash: false,
-  },
-};
-```

package/docs/en/configure/app/runtime/master-app.mdx

@@ -1,36 +0,0 @@
-# masterApp
-
-- **Type:** `Object`
-
-:::info
-First you need to enable the "micro frontend" function using [new command](/apis/app/commands#modern-new).
-:::
-
-## Example
-
-import EnableMicroFrontend from "@site-docs-en/components/enable-micro-frontend";
-import MasterManifestAppConfig from "@site-docs-en/components/micro-master-manifest-config";
-
-<EnableMicroFrontend />
-<MasterManifestAppConfig />
-
-### apps
-
-When `apps` is an object, it represents the information of the child application module `Array<AppInfo>`.
-
-```ts
-interface AppInfo {
-  name: string;
-  entry: string;
-  activeWhen?: string | ()=> boolean;
-}
-```
-
-- name: The name of the module.
-- entry: The entry of the module.
-
-### Other Config
-
-In the `masterApp` configuration, developers can pass through options supported by Garfish
-
-All supported configuration options [see here](https://www.garfishjs.org/api/run.html).

package/docs/en/configure/app/runtime/state.mdx

@@ -1,52 +0,0 @@
----
-title: state
----
-
-# state
-
-- **Type:** `boolean | object`
-- **Default:** `false`
-
-Once `state` is enabled, you can use [Model](/guides/topic-detail/model/quick-start) for state management.
-
-## models
-
-- **Type:** `Array<Model>`
-- **Default:** `[]`
-
-Register model objects that are mounted in advance, and these models will be mounted immediately after the Reduck store is created. Generally, there is no need to mount in advance.
-
-## initialState
-
-- **Type:** `Object`
-- **Default:** `{}`
-
-Used to set the initial state of the global store. Generally used for SSR to initialize data during the hydration phase.
-
-## immer
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-Whether to enable to update the state with mutable, it is enabled by default, and set to `false` if you want to disable it.
-
-## effects
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-Whether to enable the side effect management feature, it is enabled by default, and set to `false` if you want to disable it.
-
-## autoActions
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-Whether to enable the auto-generated actions feature, it is enabled by default, and set to `false` if you want to disable it.
-
-## devtools
-
-- **Type:** `boolean | EnhancerOptions`
-- **Default:** `true`
-
-Whether to enable devtools, it is enabled by default, and all parameters of [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md) are supported at the same time. If you want to disable it, set it to `false`.

package/docs/en/configure/app/source/disable-entry-dirs.mdx

@@ -1,38 +0,0 @@
----
-title: disableEntryDirs
----
-
-# source.disableEntryDirs
-
-- **Type:** `string[]`
-- **Default:** `[]`
-
-By default, Modern.js identifies the application entry point based on the `src` directory. You can use this option to prevent some directories from being recognized as application entry points.
-
-For example, with the following configuration and directory structure:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    disableEntryDirs: ['./src/one'],
-  },
-});
-```
-
-```bash title="Project directory structure"
-└── src/
-    ├── one/
-    |    └── App.tsx
-    ├── two/
-    |    └── routes/
-    └── env.d.ts
-```
-
-Without setting this configuration option, Modern.js will produce two entries based on the project directory:
-
-- one
-- two
-
-After setting this configuration option, the `src/one` directory will not be recognized as an entry directory.
-
-A common use case is to configure the `src/common` and `src/components` directories in this option to prevent them from being recognized as application entry points.

package/docs/en/configure/app/source/enable-custom-entry.mdx

@@ -1,68 +0,0 @@
----
-title: enableCustomEntry
----
-
-# source.enableCustomEntry
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-This option is used for custom Modern.js entries. When this option is enabled, Modern.js will try to use the `src/entry.[jt]sx` file and `src/entry.server.[jt]sx` as the project's entry point.
-
-## Example
-
-First, enable this option in the configuration file:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    enableCustomEntry: true,
-  },
-});
-```
-
-Create the `src/entry.tsx` file:
-
-```tsx
-import { createRoot } from '@modern-js/runtime/react';
-import { render } from '@modern-js/runtime/browser';
-
-const ModernRoot = createRoot();
-
-async function beforeRender() {
-   // todo
-}
-
-beforeRender().then(() => {
-  render(<ModernRoot />);
-});
-```
-
-:::info
-For more browser entry details, refer to [Entries](/guides/concept/entries.html).
-:::
-
-
-create `src/entry.server.tsx` file，add custom behavior for rendering responses：
-
-```tsx
-import { renderString, createRequestHandler } from '@modern-js/runtime/ssr/server';
-import type { HandleRequest } from '@modern-js/runtime/ssr/server';
-
-const handleRequest: HandleRequest = async (request, ServerRoot, options) => {
-  // do something before rendering
-  const body = await renderString(request, <ServerRoot />, options);
-
-  const newBody = body + '<div>Byte-Dance</div>';
-
-  return new Response(newBody, {
-    headers: {
-      'content-type': 'text/html; charset=UTF-8',
-      'x-custom-header': 'abc',
-    },
-  });
-};
-
-export default createRequestHandler(handleRequest);
-```
-

package/docs/en/configure/app/source/module-scopes.mdx

@@ -1,72 +0,0 @@
----
-title: moduleScopes
----
-
-# source.moduleScopes
-
-import { Badge } from '@theme';
-
-<Badge type="danger" >Webpack Only</Badge>
-
-- **Type:** `Array<string | Regexp> | Function`
-- **Default:** `undefined`
-
-Restrict importing paths. After configuring this option, all source files can only import code from the specific paths, and import code from other paths is not allowed.
-
-### Example
-
-First, we configure `moduleScopes` to only include the `src` directory:
-
-```js
-export default {
-  source: {
-    moduleScopes: ['./src'],
-  },
-};
-```
-
-Then we import the `utils/a` module outside the `src` directory in `src/App.tsx`:
-
-```js
-import a from '../utils/a';
-```
-
-After compiling, there will be a reference path error:
-
-![scopes-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/module-scopes-error.png)
-
-If we configure the `utils` directory in `moduleScopes`, the error will disappear.
-
-```js
-export default {
-  source: {
-    moduleScopes: ['./src', './utils'],
-  },
-};
-```
-
-### Array Type
-
-You can directly set several paths like this:
-
-```js
-export default {
-  source: {
-    moduleScopes: ['./src', './shared', './utils'],
-  },
-};
-```
-
-### Function Type
-
-`moduleScopes` also supports setting as a function, which can be modified instead of overriding the default value:
-
-```js
-export default {
-  source: {
-    moduleScopes: scopes => {
-      scopes.push('./shared');
-    },
-  },
-};
-```

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'],
-      },
-    },
-  },
-};
-```