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

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.
-:::

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