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

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

@@ -10,7 +10,7 @@ sidebar_position: 6
 
 想要使用项目的测试功能，需要确保项目中包含依赖：`"@modern-js/plugin-testing"`，以及按照类似下面的内容进行配置：
 
-``` ts
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { testingPlugin } from '@modern-js/plugin-testing';
 
@@ -59,31 +59,17 @@ modern test --updateSnapshot
 
 对于普通的模块，我们可以按照如下方式使用测试功能：
 
-<CH.Spotlight>
+- 首先是模块的代码：
 
-```ts ./src/index.ts
+```ts title="./src/index.ts"
 export default function () {
   return 'hello world';
 }
 ```
 
----
-
-首先是模块的代码。
-
-```ts ./src/index.ts
-export default function () {
-  return 'hello world';
-}
-```
+- 然后在测试文件中，我们可以按以下方式引用，其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 的 `paths` 中定义了。
 
----
-
-然后在测试文件中，我们可以这样。
-
-其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 的 `paths` 中定义了。
-
-```ts ./tests/index.test.ts
+```ts title="./tests/index.test.ts"
 import main from '@/index';
 
 describe('默认值 cases', () => {
@@ -95,9 +81,7 @@ describe('默认值 cases', () => {
 });
 ```
 
----
-
-最后我们可以执行 `modern test`。
+- 最后我们可以执行 `modern test`：
 
 ```bash
 pnpm test
@@ -107,8 +91,6 @@ yarn test
 npm run test
 ```
 
-</CH.Spotlight>
-
 ### 组件
 
 {/* 链接待补充 */}
@@ -119,21 +101,9 @@ npm run test
 如果需要使用 Runtime API，那么可以通过 [微生成器](/guide/basic/command-preview) 开启。
 :::
 
-<CH.Spotlight>
-
-```tsx ./src/index.tsx
-export const default () {
-  return (
-    <div>This is a UI Component</div>
-  );
-}
-```
-
----
+- 首先是组件的代码：
 
-首先是组件的代码。
-
-```tsx ./src/index.tsx
+```tsx title="./src/index.tsx"
 export const default () {
   return (
     <div>This is a UI Component</div>
@@ -141,13 +111,9 @@ export const default () {
 }
 ```
 
----
-
-然后在测试文件中，我们可以这样。
-
-其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 的 `paths` 中定义了。
+- 然后在测试文件中，我们可以按以下方式引用，其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 的 `paths` 中定义了。
 
-```tsx ./tests/index.test.tsx
+```tsx title="./tests/index.test.tsx"
 import { render, screen } from '@modern-js/runtime/testing';
 
 import Component from '@/index';
@@ -160,9 +126,7 @@ describe('默认值 cases', () => {
 });
 ```
 
----
-
-最后我们可以执行 `modern test`。
+- 最后我们可以执行 `modern test`。
 
 ```bash
 pnpm test
@@ -171,5 +135,3 @@ yarn test
 ## or
 npm run test
 ```
-
-</CH.Spotlight>

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

@@ -20,7 +20,7 @@ sidebar_position: 4
 
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
-``` ts
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { testingPlugin } from '@modern-js/plugin-testing';
 
@@ -39,7 +39,7 @@ export default defineConfig({
 
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
-``` ts
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { storybookPlugin } from '@modern-js/plugin-storybook';
 
@@ -67,7 +67,7 @@ export default defineConfig({
 
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
-``` ts
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
 
@@ -88,7 +88,7 @@ export default defineConfig({
 
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
-``` ts
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import runtime from '@modern-js/runtime/cli';
 

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

@@ -34,24 +34,9 @@ Module Tools 集成了 Storybook，因此你几乎可以按照 Storybook 官方
 
 ### 引用组件产物
 
-假如存在 TypeScript 项目 `foo`：
+假如存在 TypeScript 项目 `foo`，首先要确保 `package.json` 的 `main` 和 `types` 的值为正确的产物路径。
 
-<CH.Spotlight>
-
-```json package.json
-{
-  "name": "foo",
-  "main": "./dist/index.js",
-  "types": "./dist/types/index.d.ts"
-}
-```
-
----
-
-确保 `package.json` 的 `main` 和 `types`
-的值为正确的产物路径。
-
-```json package.json
+```json title="package.json"
 {
   "name": "foo",
   "main": "./dist/index.js",
@@ -59,20 +44,15 @@ Module Tools 集成了 Storybook，因此你几乎可以按照 Storybook 官方
 }
 ```
 
----
-
-`foo` 项目的源码。
+`foo` 项目的源码：
 
-```ts src/index.ts
+```ts title="src/index.ts"
 export const content = 'hello world';
 ```
 
----
-
-确保在 `stories/tsconfig.json` 中设置了指向项目根目录的 `paths` 配置。
-`paths` 的 `key` 与项目名称相同，这样在编译过程中以及在代码中不会出现问题。
+请确保在 `stories/tsconfig.json` 中设置了指向项目根目录的 `paths` 配置。`paths` 的 `key` 与项目名称相同，这样在编译过程中以及在代码中不会出现问题。
 
-```json stories/tsconfig.json focus=5:7
+```json title="stories/tsconfig.json"
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
@@ -88,11 +68,9 @@ export const content = 'hello world';
 }
 ```
 
----
-
-在 Story 代码中直接以项目名称的方式引用。
+在 Story 代码中直接以项目名称的方式引用：
 
-```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>;
@@ -104,34 +82,24 @@ export default {
 };
 ```
 
----
-
-最后在执行命令的时候，先启动监听模式的源码构建，然后启动 Storybook 调试。
-
-<CH.Code>
+最后在执行命令的时候，先启动监听模式的源码构建，然后启动 Storybook 调试即可：
 
-``` bash terminal-1
+```bash title="terminal-1"
 ## 源码构建
 modern build --watch
 ```
 
----
-
-``` bash terminal-2
+```bash title="terminal-2"
 ## Storybook 调试
 modern dev storybook
 ```
 
-</CH.Code>
-
-</CH.Spotlight>
-
 :::info
 在开发过程中，可能会遇到无法实时获得类型定义的情况。因为只有当保存代码后，产物目录下的类型文件才会更新。此时：
 
 对于 `pnpm` 的项目，可以按照下面的内容对 `package.json` 进行修改：
 
-```ts focus=4:7
+```ts
 {
     "name": "foo",
     "main": "./dist/index.js",
@@ -156,7 +124,7 @@ modern dev storybook
 
 引用组件的源码可以通过相对路径的方式：
 
-```ts ./stories/index.tsx
+```ts title="./stories/index.tsx"
 import { content } from '../src';
 
 const Component = () => <div>this is a Story Component {content}</div>;