npm - @modern-js/main-doc - Versions diffs - 2.21.1 → 2.22.0 - Mend

@modern-js/main-doc 2.21.1 → 2.22.0

Files changed (253) hide show

package/docs/en/configure/app/source/design-system.mdx CHANGED Viewed

@@ -7,8 +7,8 @@ sidebar_label: designSystem
 - **Type:** `Object`
 - **Default:** See configuration details below.
-:::caution Caution
-You need to enable the Tailwind CSS feature through `pnpm run new` first.
+:::caution
+Tailwind CSS feature needs to be enabled first by running `pnpm run new`.
 :::
@@ -645,22 +645,22 @@ const designSystem = {
 };
 ```
+</details>
 :::tip
-More about: <a href="https://tailwindcss.com/docs/configuration#theme" target="_blank">TailwindCSS configuration</a>.
+For more information on TailwindCSS configuration, please refer to [here](https://tailwindcss.com/docs/configuration#theme).
 :::
-</details>
-`designSystem` is used to define the project's color palette, typographic scale (Typographic Scales or Type Scale), font list, breakpoints, border rounded values, and more. Because Modern.js borrowed the design method of Tailwind Theme, and also integrates Tailwind CSS internally, the `designSystem` is used in the same way as Tailwind CSS Theme.
+The `designSystem` is used to define the project's color palette, typographic scales, font list, breakpoints, border radius values, and more. As Modern.js uses the design approach of Tailwind Theme and also integrates Tailwind CSS internally, the usage of `designSystem` is the same as that of Tailwind CSS Theme.
 ### Structure
-The `designSystem` object contains properties for `screens`, `colors`, and `spacing`, as well as each customizable core plugin.
+The `designSystem` object contains properties for `screens`, `colors`, `spacing`, and each customizable core plugin.
 #### Screens
-Use `screens` to customize response breakpoints in your project:
+Use `screens` to customize the responsive breakpoints in your project:
 ```js
 const designSystem = {
@@ -673,9 +673,9 @@ const designSystem = {
 };
 ```
-Where the property name in the `screens` object is the screen name (used as a prefix for adaptive utility variants generated by `Tailwind CSS`, such as `md:text-center`), and the value is the `min-width` at which the breakpoint should begin.
+The property names in the `screens` object are screen names (used as prefixes for the responsive utility variants generated by TailwindCSS, such as `md:text-center`), and the values are the `min-width` at which the breakpoint should start.
-Default breakpoints are inspired by common device resolutions:
+The default breakpoints are inspired by common device resolutions:
 ```js
 const designSystem = {
@@ -695,7 +695,7 @@ const designSystem = {
 };
 ```
-You can use any name you like as a breakpoint property in your project:
+You can use any names you like as properties for your breakpoints in your project:
 ```js
 const designSystem = {
@@ -712,7 +712,7 @@ const designSystem = {
 };
 ```
-These screen names are reflected in `utilities`, so `text-center` now looks like this:
+These screen names are reflected in `utilities`, so `text-center` would now look like this:
 ```css
 .text-center {
@@ -738,9 +738,9 @@ These screen names are reflected in `utilities`, so `text-center` now looks like
 }
 ```
-##### Max-width breakpoint
+##### Max-width Breakpoint
-If you want to use a `max-width` breakpoint instead of a `min-width`, you can specify the screen as an object with a `max` property:
+If you want to use `max-width` breakpoints instead of `min-width`, you can specify the screen as an object with a `max` property:
 ```js
 const designSystem = {
@@ -760,7 +760,7 @@ const designSystem = {
 };
 ```
-If necessary, to create breakpoints with `min-width` and `max-width` definitions, for example:
+If necessary, you can create breakpoints with both `min-width` and `max-width` definitions, like so:
 ```js
 const designSystem = {
@@ -773,11 +773,11 @@ const designSystem = {
 };
 ```
-##### Multiple ranges of breakpoints
+##### Breakpoints with Multiple Ranges
-Sometimes it is useful to apply a single breakpoint definition to multiple scopes.
+Sometimes it can be useful to apply a single breakpoint definition to multiple ranges.
-For example, let's say you have a `sidebar` and want the breakpoint to be based on the width of the content area rather than the entire viewport. You can simulate this situation, using a smaller breakpoint style when the `sidebar` is visible and shrinks the content area:
+For example, suppose you have a `sidebar` and want to base the breakpoints on the width of the content area rather than the entire viewport. You can simulate this by using a smaller breakpoint style when the `sidebar` is visible and the content area is reduced:
 ```js
 const designSystem = {
@@ -796,9 +796,9 @@ const designSystem = {
 };
 ```
-##### Custom media queries
+##### Custom Media Queries
-If you need to provide a fully customized media query for the breakpoint, you can use an object with a `raw` attribute:
+If you need to provide fully custom media queries for your breakpoints, you can use an object with a `raw` property:
 ```js
 const designSystem = {
@@ -813,9 +813,9 @@ const designSystem = {
 ##### Print Style
-The `raw` option can be especially useful if you need to apply a different style to the print.
+The `raw` option may be especially useful if you need to apply different styles for printing.
-All you need to do is add a `print` in `designSystem.extend.screens`:
+All you need to do is add a `print` under `designSystem.extend.screens`:
 ```js
 const designSystem = {
@@ -828,7 +828,7 @@ const designSystem = {
 };
 ```
-You can then use a class like `print:text-black` to specify styles that are only applied when someone tries to print a page:
+Then, you can use classes like `print:text-black` to specify styles that should only be applied when someone tries to print the page:
 ```html
 <div class="text-gray-700 print:text-black">
@@ -838,7 +838,7 @@ You can then use a class like `print:text-black` to specify styles that are only
 ##### Dark Mode
-The `raw` option can be used to implement the "dark mode" screen:
+The `raw` option can be used to implement "dark mode" screens:
 ```js
 const designSystem = {
@@ -851,7 +851,7 @@ const designSystem = {
 };
 ```
-You can then style the element differently in dark mode using the `dark:` prefix:
+Then, you can use the `dark:` prefix to set different styles for elements in dark mode:
 ```html
 <div class="text-gray-700 dark:text-gray-200">
@@ -859,11 +859,11 @@ You can then style the element differently in dark mode using the `dark:` prefix
 </div>
 ```
-Note that since these `screen variants` are implemented in `Tailwind CSS`, ** you cannot use this method to combine breakpoints with dark modes **, for example `md:dark:text-gray-300` will not work.
+Please note that since these screen variants are implemented in TailwindCSS, **it is not possible to use this method to combine breakpoints with dark mode**, e.g. `md:dark:text-gray-300` will not work.
 #### Colors
-The `colors` property allows you to customize the global palette of your project.
+The `colors` property allows you to customize the global color palette for your project.
 ```js
 const designSystem = {
@@ -884,11 +884,11 @@ const designSystem = {
 By default, these colors are inherited by the `backgroundColor`, `textColor`, and `borderColor` core plugins.
-o learn more, see: [Customizing Colors](https://tailwindcss.com/docs/customizing-colors).
+For more information, see [Customizing Colors](https://tailwindcss.com/docs/customizing-colors).
 #### Spacing
-Using the `space` property, you can customize the global spacing and scaling of items:
+Use the `space` property to customize the global spacing and scale ratios for your project:
 ```js
 const designSystem = {
@@ -918,13 +918,13 @@ const designSystem = {
 By default, these values are inherited by the `padding`, `margin`, `negativeMargin`, `width`, and `height` core plugins.
-To learn more, see: [Customizing Spacing](https://tailwindcss.com/docs/customizing-spacing).
+For more information, see [Customizing Spacing](https://tailwindcss.com/docs/customizing-spacing).
-#### Core plugins
+#### Core Plugins
-The rest of the topic section is used to configure the values available for each core plugin.
+The rest of the theme section is used to configure the values available for each core plugin.
-For example, the `borderRadius` property allows you to customize the `utilities` of the rounded corners that will be generated:
+For example, the `borderRadius` property allows you to customize the `utilities` for the generated border radius:
 ```js
 const designSystem = {
@@ -938,7 +938,7 @@ const designSystem = {
 };
 ```
-** The property name determines the suffix of the generated class, and the value determines the value of the actual CSS declaration. ** The example `borderRadius` configuration above will generate the following CSS class:
+**The property name determines the suffix of the generated classes, and the value determines the value of the actual CSS declaration.** The `borderRadius` configuration example above will generate the following CSS classes:
 ```css
 .rounded-none {
@@ -958,17 +958,17 @@ const designSystem = {
 }
 ```
-You will notice that the `rounded` class is created without the suffix using the `default` property in the theme configuration. This is a common convention in Tailwind CSS supported by many, though not all, core plugins.
+You may notice that the `rounded` class without a suffix is created using the `default` property in the theme configuration. This is a common convention in Tailwind CSS that many (although not all) core plugins support.
-To learn more about customizing a specific core plugin, visit the plugin's documentation.
+For more information on customizing specific core plugins, see the documentation for that plugin.
-### Custom default configuration
+### Customizing the Default Configuration
-Out of the box, your project will automatically inherit values from the default theme configuration. If you want to customize the default theme, you have several different options depending on the target.
+Out of the box, your project will inherit values from the default theme configuration. If you want to customize the default theme, there are a few different options depending on your goals.
-#### Override default configuration
+#### Overriding Default Configuration
-To override the options in the default configuration, add the properties to override in `designSystem`:
+To override an option in the default configuration, add the property you want to override to `designSystem`:
 ```ts title="modern.config.ts"
 const designSystem = {
@@ -990,15 +990,15 @@ export default defineConfig({
 });
 ```
-This completely replaces the default property configuration, so in the example above, the default `opacity utilities` is not generated.
+This will completely replace the default property configuration, so in the example above, the default `opacity utilities` will not be generated.
-Any properties you don't provide will be inherited from the default theme, so in the example above, the default theme configuration for color, spacing, border rounded corners, background position, and more will be preserved.
+Any properties you don't provide will still inherit from the default theme, so in the example above, the default theme configuration for colors, spacing, border radius, background positions, etc. will be preserved.
-#### Extension default configuration
+#### Extending Default Configuration
-If you want to keep the default value for the theme option, but want to add a new value, add the extended content in the `designSystem.extend` property.
+If you want to keep the default values for a theme option but add new values, add the extension under the `designSystem.extend` property.
-For example, if you want to add an additional breakpoint but keep the existing one, you can extend the `screens` property:
+For example, if you want to add an additional breakpoint but keep the existing ones, you can extend the `screens` property:
 ```ts title="modern.config.ts"
 const designSystem = {
@@ -1017,7 +1017,7 @@ export default defineConfig({
 });
 ```
-You can of course override some parts of the default theme and extend other parts of the default theme in the same configuration:
+Of course, you can override some parts of the default theme and extend other parts of the default theme in the same configuration:
 ```ts title="modern.config.ts"
 const designSystem = {
@@ -1043,11 +1043,11 @@ export default defineConfig({
 });
 ```
-#### Reference other values
+#### Referencing Other Values
-If you need to reference another value in the configuration, you can do so by providing a closure function instead of a static value. The function will receive a `theme()` function as an argument, which you can use to look up other values in the configuration using dot notation.
+If you need to reference another value in your configuration, you can do so by providing a closure function instead of a static value. The function will receive the `theme()` function as an argument, which you can use to look up other values in the configuration using dot notation.
-For example, you can generate a `fill` utility for each color in the palette by referencing `theme('colors')` on a `fill` configuration.
+For example, you can generate `fill` utilities for each color in your palette by referencing `theme('colors')` on the `fill` configuration:
 ```ts title="modern.config.ts"
 const designSystem = {
@@ -1064,11 +1064,11 @@ export default defineConfig({
 });
 ```
-The `theme()` function tries to find the value you're looking for from a fully merged configuration object, so it can reference your own custom settings as well as default theme values. It also works recursively, so as long as there's a static value at the end of the chain, it can parse the value you're looking for.
+The `theme()` function attempts to find the value you're looking for from the fully merged configuration object, so it can reference your own custom settings as well as default theme values. It also works recursively, so as long as there's a static value at the end of the chain, it can resolve the value you're looking for.
-**Reference default configuration**
+**Referencing Default Configuration**
-If you want to reference a value in the default configuration for any reason, you can import it from `tailwindcss/defaultTheme`. A useful example is if you want to add one of the fonts provided by the default configuration:
+If you want to reference a value from the default configuration for any reason, you can import it from `tailwindcss/defaultTheme`. A useful example is if you want to add a font from the fonts provided by the default configuration:
 ```ts title="modern.config.ts"
 const defaultTheme = require('tailwindcss/defaultTheme');
@@ -1088,9 +1088,9 @@ export default defineConfig({
 });
 ```
-#### Disable the entire core plugin
+#### Disabling Entire Core Plugins
-If you don't want to generate any classes for a core plugin, it's better to set the plugin to `false` in the `corePlugins` configuration instead of providing an empty object for this property in the configuration:
+If you don't want to generate any classes for a particular core plugin, it's best to set that plugin to `false` in the `corePlugins` configuration rather than providing an empty object for that property in the configuration:
 ```js
 // Don't assign an empty object in your theme configuration
@@ -1107,13 +1107,13 @@ const designSyttem = {
 };
 ```
-The end result is the same, but since many core plugins don't expose any configuration, they can only be disabled using `corePlugins` anyway, and it's best to keep them consistent.
+The end result is the same, but since many core plugins don't expose any configuration, they can only be disabled using `corePlugins`, so it's best to be consistent.
-#### Add your own key
+#### Adding Your Own Keys
-In many cases, it can be useful to add your own properties to the configuration object.
+In many cases, adding your own properties to the configuration object can be useful.
-An example of this is adding new properties for reuse between multiple core plugins. For example, you can extract a `positions` object that both the `backgroundPosition` and `objectPosition` plugins can reference:
+One example of this is adding a new property for reuse between multiple core plugins. For example, you could extract a `positions` object that both the `backgroundPosition` and `objectPosition` plugins could reference:
 ```js
 const designSystem = {
@@ -1133,7 +1133,7 @@ const designSystem = {
 };
 ```
-Another example is adding new attributes to a custom plugin for reference. For example, if you wrote a gradual change plugin for a project, you can add a gradual change attribute to the subject object referenced by the plugin:
+Another example is adding new properties for reference in custom plugins. For example, if you've written a gradient plugin for your project, you could add a `gradients` property to the theme object that the plugin references:
 ```ts title="modern.config.ts"
 const designSystem = {
@@ -1156,20 +1156,20 @@ export default defineConfig({
 });
 ```
-### Configure reference
+### Configuration Reference
-With the exception of `screens`, `colors`, and `spacing`, all properties in the configuration object map to the core plugin of `Tailwind CSS`. Since many plugins are responsible for accepting only CSS properties for static value sets (eg `float`), note that not every plugin has corresponding properties in the theme object.
+In addition to `screens`, `colors`, and `spacing`, all properties in the configuration object map to core plugins in TailwindCSS. Because many plugins are responsible for CSS properties that only accept a set of static values (e.g. `float`), not every plugin has a corresponding property in the theme object.
-All of these properties can also be used in the `designSystem.extend` property to extend the default theme.
+All of these properties can also be extended from the default theme under the `designSystem.extend` property.
-See this [link](https://tailwindcss.com/docs/theme#configuration-reference) for what all properties do.
+For a complete list of all properties and their effects, see this [link](https://tailwindcss.com/docs/theme#configuration-reference).
-### Additional configuration
+### Additional Configuration
-In addition to the same configuration as the Tailwind CSS Theme, there are additional configurations available Modern.js.
+In addition to the configuration that is the same as Tailwind CSS Theme, there is additional configuration provided by Modern.js.
 #### source.designSystem.supportStyledComponents
-The configuration type is `boolean` and defaults to `false`.
+This configuration is of type `boolean` and defaults to `false`.
-When the configuration value is `true`, the runtime provides the `styled-components` `ThemeProvider` component outside the application and will inject it through the `Theme Token` object generated by `designSystem`.
+When this configuration value is `true`, a `styled-components` `ThemeProvider` component is provided at the outermost layer of the application at runtime, and the `Theme Token` object generated through `designSystem` is injected.

package/docs/en/configure/app/source/disable-default-entries.mdx CHANGED Viewed

@@ -7,13 +7,14 @@ sidebar_label: disableDefaultEntries
 - **Type:** `boolean`
 - **Default:** `false`
-Used to disable the function of automatically identifying the page entry according to the project directory structure.
+Used to disable the functionality of automatically identifying page entry points based on directory structure.
 :::info
-By default, Modern.js will get the page entries according to the project directory structure. For details, please refer to [Entry](/guides/concept/entries).
+By default, Modern.js automatically determines the entry points of pages based on directory conventions, as described in [Entries](/guides/concept/entries).
 :::
-Set the following to disable the default behavior:
+To disable this default behavior, set the following:
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -23,9 +24,9 @@ export default defineConfig({
 });
 ```
-After turning off the default behavior, you need to use [`source.entries`](/configure/app/source/entries) to configure custom entries.
+After disabling the default behavior, you will need to use the [`source.entries`](/configure/app/source/entries) configuration to define custom entry points.
 :::warning
-We recommend using the directory convention provided by Modern.js to organize the code, so as to better use the functions of the framework and avoid some redundant configurations.
+We recommend organizing your code using the directory conventions provided by Modern.js to make better use of the framework's functionality and to avoid some redundant configurations.
 :::

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

@@ -7,9 +7,9 @@ sidebar_label: disableEntryDirs
 - **Type:** `string[]`
 - **Default:** `[]`
-By default, application entries are identified based on the `src` directory, you can disable some directories from being identified as application entries with this option.
+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, when the configuration and directory structure is as follows:
+For example, with the following configuration and directory structure:
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -28,11 +28,11 @@ export default defineConfig({
     └── env.d.ts
 ```
-When this option is not set, Modern.js will generate two entries based on the project directory:
+Without setting this configuration option, Modern.js will produce two entries based on the project directory:
 - one
 - two
-When this option is set, `src/one` will not be recognized as an entry directory.
+After setting this configuration option, the `src/one` directory will not be recognized as an entry directory.
-A common usage is to configure the `src/common`, `src/components` directories to this option to avoid these directories being recognized as application entries.
+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-async-entry.mdx CHANGED Viewed

@@ -7,17 +7,17 @@ sidebar_label: enableAsyncEntry
 - **Type:** `boolean`
 - **Default:** `false`
-This option is used in the webpack Module Federation scenario.
+This option is used for 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.
+When this option is enabled, Modern.js will wrap the automatically generated entry files with Dynamic Imports (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
-## Background knowledge
+## Background
-If you don't know webpack module federation, please read the official [Module Federation documentation](https://webpack.js.org/concepts/module-federation) first.
+If you are not familiar with webpack Module Federation, please read the [Module Federation documentation](https://webpack.js.org/concepts/module-federation/).
 ## Example
-First, turn this option on in the configuration file:
+First, enable this option in the configuration file:
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -27,7 +27,7 @@ export default defineConfig({
 });
 ```
-Then execute the `dev` or `build` command, and you can see Modern.js automatically generated file becomes the following structure:
+Then run the `dev` or `build` command, and you will see that the files automatically generated by Modern.js have the following structure:
 ```bash
 node_modules
@@ -38,15 +38,15 @@ node_modules
         └─ index.html
 ```
-The `index.js` reads as follows:
+The contents of `index.js` are as follows:
 ```js
 import('./bootstrap.jsx');
 ```
-At this point, you can consume any remote modules in the current page.
+At this point, you can consume any remote module in the current page.
 :::info
-Modern.js the ModuleFederationPlugin of webpack is not encapsulated, please configure the ModuleFederationPlugin yourself through [tools.webpack Chain](/configure/app/tools/webpack-chain).
+Modern.js does not have webpack's ModuleFederationPlugin plugin built in. Please configure the ModuleFederationPlugin yourself via [tools.webpackChain](/configure/app/tools/webpack-chain).
 :::

package/docs/en/configure/app/source/entries-dir.mdx CHANGED Viewed

@@ -7,9 +7,9 @@ sidebar_label: entriesDir
 - **Type:** `string`
 - **Default:** `./src`
-Modern.js will scan the `src` directory by default to identify the page entries, you can customize the identification directory of the page entries through this option.
+By default, Modern.js scans the `src` directory to identify page entries. You can customize the directory used for identifying page entries with this option.
-For example, when the configuration and directory structure are as follows:
+For example, with the following configuration and directory structure:
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -29,7 +29,7 @@ export default defineConfig({
             └── App.tsx
 ```
-Modern.js will generate the build entry `a` and `b` according to the `./src/pages` directory structure, the result is as follows:
+Modern.js will generate the build entries `a` and `b` based on the `./src/pages` directory structure. The result is as follows:
 ```js
 const entry = {

package/docs/en/configure/app/source/entries.mdx CHANGED Viewed

@@ -18,20 +18,20 @@ type Entries = Record<
 >;
 ```
-- **Default:** An entry object calculated from the directory structure of the current project.
+- **Default:** The entry object calculated based on the directory structure of the current project.
 Used to configure custom page entries.
 :::tip When to use
-For most scenarios, the entries automatically generated by Modern.js according to the directory structure can already meet the requirements. For details, please refer to [entries](/guides/concept/entries).
+For most scenarios, the entry automatically generated by Modern.js based on the directory structure can meet the requirements. For details, please refer to [Entry](/guides/concept/entries).
-If you need to customize the page entry, you can set it through this option.
+If you need to customize page entries, you can set them through this option.
 :::
 ## String
-When the value of `entries` object is `string` type, it means the file path of the entry module:
+When the value of the `entries` object is of type `string`, it represents the file path of the entry module:
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -47,9 +47,9 @@ export default defineConfig({
 });
 ```
-By default, the configured entry is equivalent to `App.[jt]sx`, that is, the specified entry file **only needs to export the root component of the application**.
+By default, the configured entry is equivalent to `App.[jt]sx`, which means that the specified entry file **only needs to export the root component of the application**.
-For example the following directory structure:
+For example, the following directory structure:
 ```bash
 .
@@ -60,9 +60,9 @@ For example the following directory structure:
 └── package.json
 ```
-The above directory does not conform to the directory structure convention of Modern.js, therefore, Modern.js will not get any default entry when analyzing the directory structure.
+The above directory does not conform to the directory structure convention of Modern.js, so Modern.js will not get any default entries when analyzing the directory structure.
-In cases where you do not want to change the directory structure (such as project migration), you can customize the entry through `source.entries`:
+If you do not want to change the directory structure (such as project migration), you can customize the entry through `source.entries`:
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -78,11 +78,11 @@ export default defineConfig({
 ## Object
-When the value is `Object`, the following properties can be configured:
+When the value is `Object`, the following attributes can be configured:
-- `entry`: `string`, entry file path.
-- `disableMount`: `boolean = false`, turn off the entry-scanning behavior of Modern.js.
-- `customBootstrap`: `string = ''`, [Custom Bootstrap](/guides/concept/entries#custom-bootstrap) file path。
+- `entry`: `string`, the entry file path.
+- `disableMount`: `boolean = false`, disable Modern.js's behavior of automatically generating entry code.
+- `customBootstrap`: `string = ''`, specify the file path of [custom Bootstrap](/guides/concept/entries#custom-bootstrap).
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -95,6 +95,7 @@ export default defineConfig({
         entry: './src/home/test/App.tsx',
       },
     },
+    // Disable default entry scanning
     disableDefaultEntries: true,
   },
 });
@@ -102,9 +103,9 @@ export default defineConfig({
 ### Disable entry file generation
-By default, the configured entry is equivalent to `App.[jt]sx`, and Modern.js will automatically generate an entry file to reference your configured entry.
+By default, the configured entry is equivalent to `App.[jt]sx`, and Modern.js will automatically generate an entry file to reference the entry you configured.
-If you want to disable the logic of Modern.js automatically generating the entry file, you can set the `disableMount` property to `true`.
+If you want to disable the logic of Modern.js automatically generating entry files, you can set the `disableMount` property to `true`.
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -115,7 +116,7 @@ export default defineConfig({
         disableMount: true,
       },
     },
-    // Disable default ingress scanning
+    // Disable default entry scanning
     disableDefaultEntries: true,
   },
 });
@@ -137,6 +138,7 @@ export default defineConfig({
         entry: './src/about',
       },
     },
+    // Disable default entry scanning
     disableDefaultEntries: true,
   },
 });
@@ -148,9 +150,9 @@ After setting `source.entries`, if `disableDefaultEntries: true` is not set, Mod
 The merge rule is:
-- Compare the entry path set by the custom entry with the default entry path. When the entry path is consistent, the custom entry will override the default entry.
+- Compare the entry paths set by the custom entry setting and the default entry path. When the entry paths are the same, the custom entry will override the default entry.
-For example the following directory structure:
+For example, the following directory structure:
 ```bash
 .
@@ -162,7 +164,7 @@ For example the following directory structure:
 └── package.json
 ```
-Modern.js will analyze the `src/` directory to get the default entries `chat` and `home`. When the user configures the following in the `modern.config.ts` file:
+Modern.js will analyze the `src/` directory and get the default entries `chat` and `home`. When the user configures as follows in the `modern.config.ts` file:
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -176,7 +178,7 @@ export default defineConfig({
 };
 ```
-You can see that the path of the custom entry `index` is the same as the path of the default entry `home`. During the merging process, `index` will override `home`, and the final entry is as follows:
+It can be seen that the path of the custom entry `index` is the same as the path of the default entry `home`. During the merge process, `index` will override `home`, and the final entry is as follows:
 - `chat -> ./src/chat/App.tsx`
 - `index -> ./src/home/index.ts`

package/docs/en/configure/app/tools/swc.mdx CHANGED Viewed

@@ -22,8 +22,8 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
 First, you need to execute `pnpm run new` to enable the SWC compile:
 ```bash
-? Action: Enable features
-? Enable features: Enable SWC Compile
+? 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.