Merge pull request #49 from zh-lx/release-0.1.12

Release 0.1.12
zh-lx · Sep 20, 2023 · f20c877 · f20c877
2 parents 8fc8d11 + 4812a8b
commit f20c877
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 23 deletions.
diff --git a/docs/README-EN.md b/docs/README-EN.md
@@ -4,7 +4,7 @@
 <p align="center">
   <h2>code-inspector</h2>
   <a href="https://github.com/zh-lx/code-inspector/blob/main/README.md">中文文档</a>
-  | <span>English Doc</span> | <a href="https://en.inspector.fe-dev.cn">Online Docs</a>
+  | <span>English Doc</span> | <a href="https://inspector.fe-dev.cn/en">Online Docs</a>
 </p>
 
 [![NPM version](https://img.shields.io/npm/v/code-inspector-plugin.svg)](https://www.npmjs.com/package/code-inspector-plugin)

diff --git a/docs/en/.vitepress/config.ts b/docs/en/.vitepress/config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vitepress';
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: 'Code Inspector',
+  base: '/en/',
   description: "Locate dom's source code in IDE",
   themeConfig: {
     logo: '/logo.svg',
@@ -25,6 +26,7 @@ export default defineConfig({
       {
         text: 'More',
         items: [
+          { text: 'Try it online', link: '/more/try' },
           { text: 'Changelog', link: '/more/changelog' },
           { text: 'Common Problems', link: '/more/question' },
           { text: 'Feedback', link: '/more/feedback' },

diff --git a/docs/en/guide/api.md b/docs/en/guide/api.md
@@ -2,20 +2,53 @@
 
 ## Parameters
 
-`CodeInspectorPlugin` receiving a parameter named `options`:
+The parameters of `CodeInspectorPlugin` are as follows:
 
 ```typescript
 import { CodeInspectorPlugin } from 'code-inspector-plugin';
 
-CodeInspectorPlugin(options);
+CodeInspectorPlugin({
+  bundler: 'vite',
+  showSwitch: false,
+  hotKeys: ['altKey', 'shiftKey'],
+  autoToggle: true,
+  needEnvInspector: false,
+  hideConsole: false,
+});
 ```
 
-The attributes and descriptions of `options` are shown in the table below:
+## bundler
 
-| Parameter        | Description                                                                                                        | Required | Type                | Optional Values                                                      | Default Value            |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ------------------- | -------------------------------------------------------------------- | ------------------------ |
-| bundler          | Specify your bundler                                                                                               | required | -                   | `webpack/vite`                                                       |
-| showSwitch       | The combination keys that triggers the DOM locating function                                                       | optional | `boolean`           | `true/false`                                                         | `false`                  |
-| hotKeys          | The combination keys that triggers the DOM positioning function                                                    | optional | `string[] \| false` | Array<`'ctrlKey'`\|`'altKey'`\|`'metaKey'`\|`'shiftKey'`> \| `false` | `['altKey', 'shiftKey']` |
-| autoToggle       | When opening the function switch, whether automatically close the switch when triggering the jump editor function. | optional | `boolean`           | `true/false`                                                         | `true`                   |
-| needEnvInspector | When the value is `true`, the plugin only takes effect when `CODE_INSPECTOR=true` is configured in `.local.env`    | optional | `boolean`           | `true/false`                                                         | `false`                  |
+- Required
+- Type: `string`, the optional value includes `vite` / `webpack`
+- Description: specify your bundler
+
+## showSwitch
+
+- Optional. Default value is `false`
+- Type: `boolean`
+- Description: Whether display a switch on the page that controls the source code positioning function (the effect is the same as holding down the combination key when the switch is turned on)
+
+## hotKeys
+
+- Optional. Default value is `['altKey', 'shiftKey']`
+- Type: `false` or `string[]`. When the type is `string[]`, the item of the array belongs to one or more of `ctrlKey`、`altKey`、`metaKey`、`shiftKey`.
+- Description: The combination keys that triggers the source code positioning function. When the value is `false` or `[]`，the function will be closed.(`ctrlKey` corresponds to `control` in Mac；`altKey` corresponds to `option` in Mac；`metaKey` corresponds to `command` in Mac,)
+
+## autoToggle
+
+- Optional. Default value is `true`
+- Type: `boolean`
+- Description: When `showSwitch` is `true`, whether to automatically turn off the switch after triggering the source code positioning function and jump to the IDE.(mainly for user experience)
+
+## needEnvInspector
+
+- Optional. Default value is `false`
+- Type: `boolean`
+- Description: When the value is `true`, the plugin only takes effect when `CODE_INSPECTOR=true` is configured in `.local.env`
+
+## hideConsole
+
+- Optional. Default value is `false`
+- Type: `boolean`
+- Description: By default, the code-inspector-plugin will print a line of hotKeys prompts on the console when the project is first launched. Set this to 'true' to disable printing
diff --git a/docs/en/index.md b/docs/en/index.md
@@ -16,6 +16,12 @@ hero:
     - theme: alt
       text: Join User Group
       link: /more/feedback
+    - theme: alt
+      text: Try it Online(React)
+      link: https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts
+    - theme: alt
+      text: Try it Online(Vue)
+      link: https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts
 
 features:
   - icon: 🚀

diff --git a/docs/en/more/try.md b/docs/en/more/try.md
@@ -0,0 +1,11 @@
+## Try it online
+
+<b>vue online demo:</b><br/>
+[
+![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)
+](https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts)
+
+<b>react online demo:</b><br/>
+[
+![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)
+](https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts)
diff --git a/docs/zh/.vitepress/config.ts b/docs/zh/.vitepress/config.ts
@@ -25,6 +25,7 @@ export default defineConfig({
       {
         text: '更多',
         items: [
+          { text: '在线体验', link: '/more/try' },
           { text: '更新日志', link: '/more/changelog' },
           { text: '常见问题', link: '/more/question' },
           { text: '交流与反馈', link: '/more/feedback' },

diff --git a/docs/zh/guide/api.md b/docs/zh/guide/api.md
@@ -1,21 +1,52 @@
 # API
 
-## 参数
-
-`CodeInspectorPlugin` 接收一个名为 `options` 的参数：
+`CodeInspectorPlugin` 的详细参数配置如下所示：
 
 ```typescript
 import { CodeInspectorPlugin } from 'code-inspector-plugin';
 
-CodeInspectorPlugin(options);
+CodeInspectorPlugin({
+  bundler: 'vite',
+  showSwitch: false,
+  hotKeys: ['altKey', 'shiftKey'],
+  autoToggle: true,
+  needEnvInspector: false,
+  hideConsole: false,
+});
 ```
 
-`options` 的属性及说明如下表：
+## bundler
+
+- 必传项
+- 类型：`string`，可选值有 `vite` / `webpack`
+- 说明：指定的打包工具类型
+
+## showSwitch
+
+- 可选项。默认值为 `false`
+- 类型：`boolean`
+- 说明: 是否在页面展示一个控制源码定位功能的开关(开关打开时和按住组合键的效果是相同的)
+
+## hotKeys
+
+- 可选项。默认值为 `['altKey', 'shiftKey']`
+- 类型：`false` 或 `string[]`。类型为数组时，数组项为 `ctrlKey`、`altKey`、`metaKey`、`shiftKey` 中的一个或多个。
+- 说明：触发源码定位功能的组合键，为 `false` 或者空数组则关闭组合键触发。(`ctrlKey` 对应 Mac 中的 `control` 键；`altKey` 对应 Mac 中的 `option` 键；`metaKey` 对应 Mac 中的 `command` 键)
+
+## autoToggle
+
+- 可选项。默认值为 `true`
+- 类型：`boolean`
+- 说明：`showSwitch` 为 `true` 的情况下，点击触发源码定位功能跳转 IDE 后是否自动关闭开关(主要是为了用户体验)
+
+## needEnvInspector
+
+- 可选项。默认值为 `false`
+- 类型：`boolean`
+- 说明：为 `true` 时，仅当 `.env.local` 文件存在且其包含 `CODE_INSPECTOR=true` 时插件生效。（主要是解决团队内有部分成员不想使用该插件的需求）
+
+## hideConsole
 
-| 参数             | 描述                                                                            | 是否必传        | 类型                | 可选值                                                               | 默认值                   |
-| ---------------- | ------------------------------------------------------------------------------- | --------------- | ------------------- | -------------------------------------------------------------------- | ------------------------ |
-| bundler          | 指定的打包工具                                                                  | 是　　　.　　　 | `string`            | `vite/webpack`                                                       | -                        |
-| showSwitch       | 是否在页面展示功能开关按钮                                                      | 否              | `boolean`           | `true/false`                                                         | `false`                  |
-| hotKeys          | 触发功能的组合键，为 `false` 或者空数组则关闭组合键触发                         | 否              | `string[] \| false` | Array<`'ctrlKey'`\|`'altKey'`\|`'metaKey'`\|`'shiftKey'`> \| `false` | `['altKey', 'shiftKey']` |
-| autoToggle       | 打开功能开关的情况下，点击触发跳转编辑器时是否自动关闭开关                      | 否              | `boolean`           | `true/false`                                                         | `true`                   |
-| needEnvInspector | 为 true 时，仅当 `.env.local` 文件存在且其包含 `CODE_INSPECTOR=true` 时插件生效 | 否              | `boolean`           | `true/false`                                                         | `false`                  |
+- 可选项。默认值为 `false`
+- 类型：`boolean`
+- 说明：默认情况下，插件在项目首次启动时在控制台打印一行按键提示，设置此项为 `true` 可禁用打印
diff --git a/docs/zh/index.md b/docs/zh/index.md
@@ -18,6 +18,12 @@ hero:
     - theme: alt
       text: 加入用户群
       link: /more/feedback
+    - theme: alt
+      text: 在线体验(React)
+      link: https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts
+    - theme: alt
+      text: 在线体验(Vue)
+      link: https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts
 
 features:
   - icon: 🚀

diff --git a/docs/zh/more/try.md b/docs/zh/more/try.md
@@ -0,0 +1,9 @@
+## 在线体验
+
+<b>vue online demo:</b><br/>
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)
+](https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts)
+
+<b>react online demo:</b><br/>
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)
+](https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts)