@modern-js/module-tools-docs 2.30.0 → 2.31.0

package/docs/en/api/config/design-system.md

@@ -815,25 +815,24 @@ The `raw` option may be particularly useful if you need to apply different style
 
 All that needs to be done is to add a `print` under `designSystem.extend.screens`.
 
-``js
+```js
 const designSystem = {
-extend: {
-screens: {
-print: { raw: 'print' },
-// => @media print { ... }
-},
-},
+  extend: {
+    screens: {
+      print: { raw: 'print' },
+      // => @media print { ... }
+    },
+  },
 };
+```
 
-````
-
-Then, a class such as ``print:text-black`` can be used to specify a style that is applied only when someone tries to print a page: ``
+Then, a class such as `print:text-black` can be used to specify a style that is applied only when someone tries to print a page: ``
 
 ```html
 <div class="text-gray-700 print:text-black">
   <! -- ... -->
 </div>
-````
+```
 
 ### Dark Mode
 
@@ -925,29 +924,38 @@ The rest of the theme section is used to configure the values available for each
 
 For example, the `borderRadius` property allows you to customize the ``utilities` that will generate the rounded corners.
 
-``js
+```js
 const designSystem = {
-borderRadius: {
-none: '0',
-sm: '.125rem',
-default: '.25rem',
-lg: '.5rem',
-full: '9999px',
-},
+  borderRadius: {
+    none: '0',
+    sm: '.125rem',
+    default: '.25rem',
+    lg: '.5rem',
+    full: '9999px',
+  },
 };
-
-````
+```
 
 ** The attribute 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 classes.
+The example `borderRadius` configuration above will generate the following CSS classes.
 
 ```css
-.rounded-none { border-radius: 0 }
-.rounded-sm { border-radius: .125rem }
-.rounded { border-radius: .25rem }
-.rounded-lg { border-radius: .5rem }
-.rounded-full { border-radius: 9999px }
-````
+.rounded-none {
+  border-radius: 0;
+}
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+```
 
 You will notice that the `rounded` class is created without the suffix in the theme configuration using the `default` attribute. This is a common convention in Tailwind CSS supported by many (though not all) of the core plugins.
 
@@ -961,7 +969,7 @@ Out of the box, your project will automatically inherit values from the default
 
 To override the options in the default configuration, add the properties to be overridden to `designSystem` at
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 const designSystem = {
@@ -991,7 +999,7 @@ If you want to keep the default values of the theme options but add new values,
 
 For example, if you want to add an additional breakpoint but keep the existing one, you can extend the `screens` property with.
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 const designSystem = {
@@ -1010,7 +1018,7 @@ export default defineConfig({
 
 You can certainly override some parts of the default theme and extend other parts of the default theme in the same configuration: the
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 const designSystem = {
@@ -1040,7 +1048,7 @@ If you need to reference another value in the configuration, you can do so by pr
 
 For example, you can generate `fill` utilities for each color in the palette by referring to `theme('colors')` on the `fill` configuration.
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 const designSystem = {
@@ -1061,7 +1069,7 @@ The `theme()` function tries to find the value you are looking for from an alrea
 
 If for any reason you want to reference a value in the default configuration, you can import it from `tailwindcss/defaultTheme`. A useful example would be to add one of the fonts provided by the default configuration to.
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 const defaultTheme = require('tailwindcss/defaultTheme');
@@ -1126,7 +1134,7 @@ const designSystem = {
 
 Another example is to add a new property to a custom plugin for referencing. For example, if you write a gradient plugin for your project, you can add a gradient property to the theme object referenced by that plugin.
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 const designSystem = {

package/docs/en/api/config/plugins.md

@@ -25,7 +25,7 @@ To learn how to write plugins, please refer to the [Plugin Writing Guide](/plugi
 
 To use plugins from npm, you need to install them using a package manager and import them in your configuration file.
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { myPlugin } from 'my-plugin';
 
 export default defineConfig({
@@ -37,7 +37,7 @@ export default defineConfig({
 
 To use plugins from a local code repository, you can directly import them using a relative path.
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { myPlugin } from './plugins/myPlugin';
 
 export default defineConfig({
@@ -49,7 +49,7 @@ export default defineConfig({
 
 If a plugin provides custom configuration options, you can pass the configuration through the plugin function's parameters.
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { myPlugin } from 'my-plugin';
 
 export default defineConfig({

package/docs/en/api/config/testing.md

@@ -17,7 +17,7 @@ You need to enable the unit testing feature with `pnpm run new` first.
 
 The configuration corresponding to [Jest](https://jestjs.io/docs/configuration), when of type `object`, can be configured with all the underlying configurations supported by Jest .
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -31,7 +31,7 @@ export default defineConfig({
 
 When the value is of type `Function`, the default configuration is passed as the first parameter and a new Jest configuration object needs to be returned.
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({

package/docs/en/api/plugin-api/plugin-hooks.md

@@ -21,7 +21,7 @@ The following Hooks are triggered in order when the `build` command is executed.
 
 Triggered before the execution of the overall build process.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -37,7 +37,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 Parameters and return value types.
 
-``` ts
+```ts
 type Options = { options: { config: BuildConfig; cliOptions: BuildCommandOptions } }
 
 export interface BuildCommandOptions {
@@ -58,7 +58,7 @@ type Return = BuildConfig;
 
 Based on the build configuration, Module Tools will split the overall build into multiple sub-build tasks. The Hook will be triggered before each build subtask.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -80,7 +80,7 @@ Parameters and return value types.
 
 Triggered after the end of each build subtask.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -96,7 +96,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 Parameters and return value types.
 
-``` ts
+```ts
 export interface BuildTaskResult {
   status: 'success' | 'fail';
   message?: string;
@@ -108,7 +108,7 @@ export interface BuildTaskResult {
 
 Triggered after the end of the overall build process.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -124,7 +124,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 Parameters and return value types.
 
-``` ts
+```ts
 export interface BuildResult {
   status: 'success' | 'fail';
   message?: string;
@@ -151,7 +151,7 @@ Hooks are triggered in the following order after executing `build --platform`.
 
 Gets information about the tasks that need to be run when executing the `build --platform` command.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -173,7 +173,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 Types of parameters entered and returned.
 
-``` ts
+```ts
 export interface RegisterBuildPlatformResult {
   platform: string | string[];
   build: (
@@ -187,7 +187,7 @@ export interface RegisterBuildPlatformResult {
 
 Triggers all registered build tasks when the `build --platform` command is executed. `beforeBuildPlatform` will be triggered before the execution of the overall build task.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -203,7 +203,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 Types of parameters entered and returned.
 
-``` ts
+```ts
 export interface RegisterBuildPlatformResult {
   platform: string | string[];
   build: (
@@ -217,7 +217,7 @@ export interface RegisterBuildPlatformResult {
 
 When the `build --platform` command is executed, all registered build tasks will be triggered. `buildPlatform` will be triggered before each build task is executed.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -233,7 +233,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 Types of parameters entered and returned.
 
-``` ts
+```ts
 export interface Options {
   platform: string;
 }
@@ -243,7 +243,7 @@ export interface Options {
 
 When the `build --platform` command is executed, all registered build tasks will be triggered. `afterBuildPlatform` will be triggered after the overall platform build task is finished.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -291,7 +291,7 @@ Register dev tool related data. Mainly contains.
 * Whether to execute the source code build before running the dev task
 * The function to execute the dev task.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -320,7 +320,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 Types of parameters entered and returned.
 
-``` ts
+```ts
 export interface DevToolData {
   name: string;
   subCommands?: string[];
@@ -345,7 +345,7 @@ The currently supported Storybook dev supports using source code products as dev
 
 Triggered before the dev task is executed after all dev tool metadata has been collected.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -361,7 +361,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 Types of parameters entered and returned.
 
-``` ts
+```ts
 export interface DevToolData {
   name: string;
   subCommands?: string[];
@@ -380,7 +380,7 @@ export interface DevToolData {
 
 `beforeDevMenu` is triggered before the dev list/menu appears. Receives [inquirer question](https://github.com/SBoudrias/Inquirer.js#question) as argument. Default value is.
 
-``` ts
+```ts
 const question = [
   {
     name: 'choiceDevTool',
@@ -394,7 +394,7 @@ const question = [
 
 `afterDevMenu` Triggered after selecting dev list/menu options.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -414,7 +414,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 Types of parameters entered and returned.
 
-``` ts
+```ts
 export type { QuestionCollection } from 'inquirer';
 
 export interface Options {
@@ -441,7 +441,7 @@ export interface DevToolData {
 
 Triggered before the dev task is executed.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
@@ -457,7 +457,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 Types of parameters entered and returned.
 
-``` ts
+```ts
 export interface DevToolData {
   name: string;
   subCommands?: string[];
@@ -476,7 +476,7 @@ export interface DevToolData {
 
 Triggered when the dev task process is interrupted.
 
-``` ts
+```ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 

package/docs/en/components/register-esbuild-plugin.mdx

@@ -1,11 +1,11 @@
-```js modern.config.ts
+```js title="modern.config.ts"
 import { myEsbuildPlugin } from './myEsbuildPlugin';
 
 export default defineConfig({
   buildConfig: {
     esbuildOptions: options => {
       options.plugins = [myEsbuildPlugin, ...options.plugins];
-      return option;
+      return options;
     },
   },
 });

package/docs/en/guide/advance/asset.mdx

@@ -19,43 +19,30 @@ For the handling of static files, the module project currently supports the foll
 - Set the static resource path to `. /assets`.
 - Files less than **10kb** will be inlined into the code.
 
+### Example
+
 Let us look at the following example:
 
-<CH.Spotlight>
+- Project source code:
 
-```ts ./src/asset.ts
+```ts title="./src/asset.ts"
 import img from './bg.png';
 //...
 ```
 
----
-
-Project source code.
-
-
----
-
-If the size of `bg.png` is less than 10 kb, then the output directory structure and file content are.
-
-<CH.Code>
+- If the size of `bg.png` is less than 10 kb, then the output directory structure and file content are.
 
 ```bash
 ./dist
 └── asset.js
 ```
 
----
-
-```js ./dist/asset.js
+```js title="./dist/asset.js"
 var bg_default = 'data:image/png;base64,';
 console.info(bg_default);
 ```
 
-</CH.Code>
-
-If the size of `bg.png` is larger than 10 kb, then the output directory structure and file content are.
-
-<CH.Code>
+- If the size of `bg.png` is larger than 10 kb, then the output directory structure and file content are.
 
 ```bash
 ./dist
@@ -64,17 +51,11 @@ If the size of `bg.png` is larger than 10 kb, then the output directory structur
     └── bg.13e2aba2.png
 ```
 
----
-
-```js ./dist/asset.js
+```js title="./dist/asset.js"
 import img from './assets/bg.13e2aba2.png';
 console.info(img);
 ```
 
-</CH.Code>
-
-</CH.Spotlight>
-
 When wanting to modify the default behavior, the following API can be used:
 
 - `asset.path`: modify the output path of the static resource file.

package/docs/en/guide/advance/build-umd.mdx

@@ -25,33 +25,19 @@ export default defineConfig({
 In the ["How to handle third-party dependencies"](/en/guide/advance/external-dependency) chapter, we know that we can control whether or not the project packages third-party dependencies via the [`autoExternals`](/en/api/config/build-config#autoexternal) and [`externals`](/en/api/config/build-config#externals) APIs.
 So when building umd artifacts, we can also use it like this:
 
-<CH.Spotlight>
+### Example
 
-```json package.json
-{
-  "dependencies": {
-    "react": "^17"
-    //...other dependencies
-  }
-}
-```
-
----
+- If the project depends on `react`:
 
-If the project depends on `react`.
-
-```json package.json
+```json title="package.json"
 {
   "dependencies": {
     "react": "^17"
-    //...other dependencies
   }
 }
 ```
 
----
-
-`modern.config.ts`.
+- `modern.config.ts`:
 
 ```ts
 export default defineConfig({
@@ -63,20 +49,16 @@ export default defineConfig({
 });
 ```
 
----
-
-When a `react` dependency is used in the source code.
+- When a `react` dependency is used in the source code:
 
-```tsx src/index.ts
+```tsx title="src/index.ts"
 import React from 'react';
 console.info(React);
 ```
 
----
-
-The `react` code is not bundled into the artifact at this point.
+- The `react` code is not bundled into the artifact at this point:
 
-```js dist/index.js focus=1:7
+```js title="dist/index.js"
 (function (global, factory) {
   if (typeof module === 'object' && typeof module.exports === 'object')
     factory(exports, require('react'));
@@ -103,42 +85,18 @@ The `react` code is not bundled into the artifact at this point.
 });
 ```
 
-</CH.Spotlight>
-
 We know from the above example that when using the `autoExternal` and `externals` APIs.
 
 - In a Node.js environment, you can get the react dependency with `require('react')`.
 - In a browser environment, you can get the react dependency via `global.react`.
 
+### Global variable names of third-party dependencies
+
 However, in the browser environment, when getting third-party dependencies, **global variable names are not necessarily identical to the dependency names**, so you have to use the [`buildConfig.umdGlobals`](/en/api/config/build-config#umdglobals) API.
 
 Again using the previous example, when the `react` dependency exists in the browser environment as a `windows.React` or `global.React` global variable, then:
 
-<CH.Spotlight>
-
-```json package.json
-{
-  "devDependencies": {
-    "react": "^17"
-  }
-}
-```
-
----
-
-If the project depends on `react`.
-
-```json package.json
-{
-  "devDependencies": {
-    "react": "^17"
-  }
-}
-```
-
----
-
-`modern.config.ts` config file。
+- `modern.config.ts` config file:
 
 ```ts
 export default defineConfig({
@@ -151,20 +109,16 @@ export default defineConfig({
 });
 ```
 
----
-
-When a `react` dependency is used in the source code.
+When a `react` dependency is used in the source code:
 
-```tsx src/index.ts
+```tsx title="src/index.ts"
 import React from 'react';
 console.info(React);
 ```
 
----
+At this point we will see the output code like this:
 
-At this point we will see the output code like this.
-
-```js dist/index.js focus=12:18
+```js title="dist/index.js"
 (function (global, factory) {
   if (typeof module === 'object' && typeof module.exports === 'object')
     factory();
@@ -187,15 +141,13 @@ At this point we will see the output code like this.
 });
 ```
 
-</CH.Spotlight>
-
 The project can then run in the browser and use the `React` variables that exist on the global object.
 
 ## Changing the name of a global variable in a project
 
 When we package the following code into an umd artifact and run it in the browser, we can use the module via `window.index`.
 
-```ts ./src/index.ts
+```ts title="./src/index.ts"
 export default () => {
   console.info('hello world');
 };
@@ -203,7 +155,7 @@ export default () => {
 
 ** By default, the name of the source file is used as the name of the module's global variable in the browser. **For the above example, the artifact would read as follows:
 
-```js ./dist/index.js focus=9:9
+```js title="./dist/index.js"
 (function (global, factory) {
   if (typeof module === 'object' && typeof module.exports === 'object')
     factory(exports);
@@ -233,7 +185,7 @@ export default defineConfig({
 
 The build artifact at this point are:
 
-```js ./dist/index.js focus=9:9
+```js title="./dist/index.js"
 (function (global, factory) {
   if (typeof module === 'object' && typeof module.exports === 'object')
     factory(exports);