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

package/docs/en/guide/advance/external-dependency.mdx

@@ -6,7 +6,7 @@ sidebar_position: 4
 
 Generally, third-party dependencies required by a project can be installed via the `install` command in the package manager. After the third-party dependencies are successfully installed, they will generally appear under `dependencies` and `devDependencies` in the project `package.json`.
 
-```json pacakge.json
+```json title="pacakge.json"
 {
   "dependencies": {},
   "devDependencies": {}
@@ -25,25 +25,11 @@ This is because when the npm package is installed, its `"dependencies"` will als
 
 If you need to package some dependencies, it is recommended to move them from `"dependencies"` to `"devDependencies"`, which is equivalent to **prebundle** the dependencies and reduces the size of the dependency installation.
 
-<CH.Spotlight>
-
-```json ./v1/package.json
-{
-  "dependencies": {
-    "react": "^17"
-  },
-  // or
-  "peerDependencies": {
-    "react": "^17"
-  }
-}
-```
-
----
+### Example
 
 If the project has a dependency on `react`.
 
-```json ./v1/package.json
+```json title="package.json"
 {
   "dependencies": {
     "react": "^17"
@@ -55,26 +41,20 @@ If the project has a dependency on `react`.
 }
 ```
 
----
+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:
 
-```js dist/index.js
+```js title="dist/index.js"
 import React from 'react';
 console.info(React);
 ```
 
-</CH.Spotlight>
-
 If you want to modify the default processing, you can use the following API.
 
 - [`buildConfig.autoExternal`](/api/config/build-config#autoexternal)

package/docs/en/guide/advance/in-depth-about-build.md

@@ -50,7 +50,7 @@ We know from the defaults: **Bundle builds can generally specify a file path as
 
 In addition to setting `input` to an array, you can also set it to an object during the Bundle build process. **By using the object form, we can modify the name of the file that the build artifacts outputs**. So for the following example, `. /src/index.ts` corresponds to the path of the build artifacts file as `. /dist/main.js`.
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -85,7 +85,7 @@ The [`buildConfig.dts`](/en/api/config/build-config#dts) configuration is mainly
 
 Type generation is turned on by default, if you need to turn it off, you can configure it as follows:
 
-```js modern.config.ts
+```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -112,7 +112,7 @@ The **Module Tools also supports bundling of type files**, although care needs t
 
 During the Bundleless build process, if an alias appears in the source code, e.g.
 
-```js ./src/index.ts
+```js title="./src/index.ts"
 import utils from '@common/utils';
 ```
 
@@ -231,7 +231,7 @@ Note, however: If the project is a TypeScript project, then you may need to add
 
 > If the `.d.ts` file does not exist, then you can create it manually.
 
-```ts env.d.ts
+```ts title="env.d.ts"
 declare const YOUR_ADD_GLOBAL_VAR;
 ```
 

package/docs/en/guide/advance/in-depth-about-dev-command.md

@@ -25,7 +25,7 @@ If you need to extend the dev command, or rather provide your own Module Tools d
 
 In general, the code to implement a debugging tool that does nothing and the associated configuration is as follows.
 
-``` ts do-nothing.ts
+```ts do-nothing.ts
 export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'do-nothing',
   setup() {
@@ -54,7 +54,7 @@ export const myPlugin = (): CliPlugin<ModuleTools> => ({
 
 If this debugging tool plugin is required, it needs to be added to the configuration file.
 
-``` ts
+```ts
 import doNothingPlugin from './plugins/do-nothing';
 
 export default defineConfig({

package/docs/en/guide/advance/theme-config.mdx

@@ -31,7 +31,7 @@ When using tailwindcss, its [`theme`](https://v2.tailwindcss.com/docs/theme#exte
 
 For example, the following configuration extends the original color configuration:
 
-```ts ./modern.config.ts
+```ts title="modern.config.ts"
 export default {
   designSystem: {
     extend: {
@@ -47,7 +47,7 @@ We can have two ways of using tailwindcss in our code.
 
 #### HTML Class
 
-```tsx ./src/index.tsx
+```tsx title="./src/index.tsx"
 import 'tailwindcss/utilities.css';
 
 export default () => {
@@ -61,9 +61,7 @@ export default () => {
 About [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply)。
 :::
 
-<CH.Code>
-
-```tsx ./src/index.tsx
+```tsx title="./src/index.tsx"
 import './index.css';
 
 export default () => {
@@ -71,10 +69,8 @@ export default () => {
 };
 ```
 
-```css ./src/index.css
+```css title="./src/index.css"
 .btn-primary {
   @apply bg-primary;
 }
 ```
-
-</CH.Code>

package/docs/en/guide/basic/before-getting-started.md

@@ -177,7 +177,7 @@ export default defineConfig({
 
 **We recommend using the `defineConfig` function**, but it is not mandatory to use it. So you can also return an object directly in the config file: the
 
-``` ts title="modern.config.ts"
+```ts title="modern.config.ts"
 import { moduleTools } from '@modern-js/module-tools';
 
 export default {

package/docs/en/guide/basic/publish-your-project.md

@@ -41,7 +41,7 @@ $ npx modern change
 
 When executed successfully, the resulting Markdown file containing the change log is saved in the project's `.changeset` directory. The contents will look like the following.
 
-```markdown .changeset/brave-dryers-agree.md
+```markdown title=".changeset/brave-dryers-agree.md"
 ---
 "``module-example'': patch
 ---
@@ -57,7 +57,7 @@ When the project version needs to be updated, execute the following command.
 
 Executing `modern bump` will modify the version number in `package.json` based on the contents of the Markdown file in the `.changeset/` directory where the changes were recorded, and generate the `CHANGELOG.md` file. **These Markdown files are also deleted when the version update is complete, so they are "consumed "**.
 
-```markdown CHANGELOG.md
+```markdown title="CHANGELOG.md"
 # module
 
 ## 0.1.1
@@ -93,16 +93,17 @@ When a pre-release is needed before the official release, the following command
 
 First `modern pre enter <tag>` to enter pre-release mode, `<tag>` can be the same as the `tag` specified with the `modern release --tag` command when releasing the project.
 
-````bash
+```bash
 $ npx modern pre enter next
 🦋 success Entered pre mode with tag next
 🦋 info Run `changeset version` to version packages with prerelease versions
 ✨ Done in 5.30s.
-Done in 5.30s. ```
+Done in 5.30s.
+```
 
-Then you can update the specific version number with the `modern bump` command, **which doesn't actually "consume" the Markdown file that records the changes**: ``` bash
+Then you can update the specific version number with the `modern bump` command, **which doesn't actually "consume" the Markdown file that records the changes**:
 
-``` bash
+```bash
 $ npx modern bump
 🦋 warn ===============================IMPORTANT!===============================
 🦋 warn You are in prerelease mode
@@ -110,7 +111,7 @@ $ npx modern bump
 🦋 warn You can then run `changeset version` again to do a normal release
 🦋 warn ----------------------------------------------------------------------
 🦋 All files have been updated. review them and commit at your leisure
-````
+```
 
 Then you can see that the updated version number in `package.json` will look like this: `0.1.2-next.0`.
 

package/docs/en/guide/basic/test-your-project.mdx

@@ -45,31 +45,17 @@ You can add it in `modern.config.(j|t)s`.
 
 For common modules, we can use the test function as follows:
 
-<CH.Spotlight>
+- First is the code of the module:
 
-```ts ./src/index.ts
+```ts title="./src/index.ts"
 export default function () {
   return 'hello world';
 }
 ```
 
----
-
-First is the code of the module.
-
-```ts ./src/index.ts
-export default function () {
-  return 'hello world';
-}
-```
+- Then in the test file, we can import source code as the following way. Where `@` points to the source directory, defined in `tests/tsconfig.json` in the initialization project.
 
----
-
-Then in the test file, we can do this.
-
-Where `@` points to the source directory, defined in `tests/tsconfig.json` in the initialization project.
-
-```ts ./tests/index.test.ts
+```ts title="./tests/index.test.ts"
 import main from '@/index';
 
 describe('default cases', () => {
@@ -81,9 +67,7 @@ describe('default cases', () => {
 });
 ```
 
----
-
-Finally we can execute `modern test`.
+- Finally we can execute `modern test`.
 
 ```bash
 pnpm test
@@ -93,8 +77,6 @@ yarn test
 npm run test
 ```
 
-</CH.Spotlight>
-
 ### Components
 
 {/* 链接待补充 */}
@@ -105,9 +87,9 @@ For components, Modern.js's Runtime API provides functionality for testing UI co
 If you need to use the Runtime API, then you can turn it on via [microgenerator](/guide/basic/command-preview).
 :::
 
-<CH.Spotlight>
+- First is the code of the component:
 
-```tsx ./src/index.tsx
+```tsx title="./src/index.tsx"
 export const default () {
   return (
     <div>This is a UI Component</div>
@@ -115,25 +97,10 @@ export const default () {
 }
 ```
 
----
 
-First is the code of the component.
+- Then in the test file, we can import source code as the following way. Where `@` points to the source directory, defined in `tests/tsconfig.json` in the initialization project.
 
-```tsx ./src/index.tsx
-export const default () {
-  return (
-    <div>This is a UI Component</div>
-  );
-}
-```
-
----
-
-Then in the test file, we can do this.
-
-Where `@` points to the source directory, defined in `tests/tsconfig.json` in the initialization project.
-
-```tsx ./tests/index.test.tsx
+```tsx title="./tests/index.test.tsx"
 import { render, screen } from '@modern-js/runtime/testing';
 
 import Component from '@/index';
@@ -146,9 +113,7 @@ describe('default cases', () => {
 });
 ```
 
----
-
-Finally we can execute `modern test`.
+- Finally we can execute `modern test`.
 
 ```bash
 pnpm test
@@ -157,5 +122,3 @@ yarn test
 ## or
 npm run test
 ```
-
-</CH.Spotlight>

package/docs/en/guide/basic/use-micro-generator.md

@@ -21,7 +21,7 @@ When we want to test some modules, we can enable the test feature. When this fea
 
 :::tip
 After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
-``` ts
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { testingPlugin } from '@modern-js/plugin-testing';
 
@@ -40,7 +40,7 @@ The **Storybook feature** can be enabled when we want to debug a component or a
 
 :::tip
 After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
-``` ts
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { storybookPlugin } from '@modern-js/plugin-storybook';
 
@@ -70,7 +70,7 @@ For more information on how to use Tailwind CSS in your module projects, check o
 
 :::tip
 After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
-``` ts
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
 
@@ -93,7 +93,7 @@ Also, the Storybook debugging tool will determine if the project needs to use th
 
 :::tip
 After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
-``` ts
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import runtime from '@modern-js/runtime/cli';
 

package/docs/en/guide/basic/using-storybook.mdx

@@ -34,24 +34,9 @@ Next, we will talk about how to use each of these two methods.
 
 ### Referencing component products
 
-If the TypeScript project `foo` exists.
+If the TypeScript project `foo` exists. Make sure the `main` and `types` of `package.json` values are real paths.
 
-<CH.Spotlight>
-
-```json package.json
-{
-  "name": "foo",
-  "main": "./dist/index.js",
-  "types": "./dist/types/index.d.ts"
-}
-```
-
----
-
-Make sure the `main` and `types` of `package.json`
-values are real paths.
-
-```json package.json
+```json title="package.json"
 {
   "name": "foo",
   "main": "./dist/index.js",
@@ -59,20 +44,15 @@ values are real paths.
 }
 ```
 
----
-
-The source code of the `foo` project.
+The source code of the `foo` project:
 
-```ts src/index.ts
+```ts title="src/index.ts"
 export const content = 'hello world';
 ```
 
----
-
-Make sure that the `paths` configuration pointing to the project root is set in `stories/tsconfig.json`.
-The `key` of `paths` is the same as the project name.
+Make sure that the `paths` configuration pointing to the project root is set in `stories/tsconfig.json`. The `key` of `paths` is the same as the project name.
 
-```json stories/tsconfig.json focus=7:9
+```json title="stories/tsconfig.json"
 {
   "extends": "../tsconfig.json",
   "include": ["./"],
@@ -86,11 +66,9 @@ The `key` of `paths` is the same as the project name.
 }
 ```
 
----
-
-Referenced directly in Story code by the project name.
+Referenced directly in Story code by the project name:
 
-```tsx stories/index.stories.tsx focus=1:1
+```tsx title="stories/index.stories.tsx"
 import { content } from 'foo';
 
 const Component = () => <div>this is a Story Component {content}</div>;
@@ -102,33 +80,23 @@ export default {
 };
 ```
 
----
-
 Finally, when executing the command, first start the source build in listening mode and then start Storybook debugging.
 
-<CH.Code>
-
-``` bash terminal-1
+```bash title="terminal-1"
 ## Source Code Build
 modern build --watch
 ```
 
----
-
-``` bash terminal-2
+```bash title="terminal-2"
 ## Storybook Debug
 modern dev storybook
 ```
 
-</CH.Code>
-
-</CH.Spotlight>
-
 If, during development, you encounter a situation where the type definition is not available in real time, at that point.
 
 For `pnpm` projects, `package.json` can be modified as follows.
 
-```ts focus=4:7
+```ts
 {
     "name": "foo",
     "main": "./dist/index.js",
@@ -152,7 +120,7 @@ So why is it possible to reference the product directly?
 
 Referencing component source code can be done by means of relative paths to:
 
-```ts ./stories/index.tsx
+```ts title="./stories/index.tsx"
 import { content } from '../src';
 
 const Component = () => <div>this is a Story Component {content}</div>;