Merge branch 'main' of github.com:zh-lx/code-inspector into main

zh-lx · Sep 25, 2023 · 2985aee · 2985aee
2 parents d316011 + f20c877
commit 2985aee
Show file tree

Hide file tree

Showing 38 changed files with 448 additions and 140 deletions.
diff --git a/.github/workflows/reademe-contributors.yml b/.github/workflows/reademe-contributors.yml
@@ -0,0 +1,19 @@
+# 监听 master 分支
+on:
+  push:
+    branches:
+      - main
+
+# action 名称
+name: Contributes
+
+jobs:
+  # 任务
+  contrib-readme-en-job:
+    runs-on: ubuntu-latest
+    name: A job to automate contrib in readme
+    steps:
+      - name: Contribute List
+        uses: akhilmhdh/contributors-readme-action@v2.3.4
+        env:
+          GITHUB_TOKEN: ${{ secrets.CONTRIBUTORS_TOKEN }}
diff --git a/README.md b/README.md
@@ -22,6 +22,18 @@
 
 ![code-inspector](https://user-images.githubusercontent.com/73059627/227070438-6e40e112-6f1d-4f67-9f26-53986bff77c3.gif)
 
+## 💻 在线体验
+
+<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)
+
 ## 🚀 安装
 
 ```perl
@@ -50,11 +62,43 @@ pnpm add code-inspector-plugin -D
 - 当前支持以下代码编辑器<br />
   [VSCode](https://code.visualstudio.com/) | [Visual Studio Code - Insiders](https://code.visualstudio.com/insiders/) | [WebStorm](https://www.jetbrains.com/webstorm/) | [Atom](https://atom.io/) | [HBuilderX](https://www.dcloud.io/hbuilderx.html) | [PhpStorm](https://www.jetbrains.com/phpstorm/) | [PyCharm](https://www.jetbrains.com/pycharm/) | [IntelliJ IDEA](https://www.jetbrains.com/idea/)
 
+## 👨‍💻 Contributors
+
+特别鸣谢本项目的贡献者：
+
+<!-- readme: collaborators,contributors -start -->
+<table>
+<tr>
+    <td align="center">
+        <a href="https://github.com/zh-lx">
+            <img src="https://avatars.githubusercontent.com/u/73059627?v=4" width="100;" alt="zh-lx"/>
+            <br />
+            <sub><b>Zhoulixiang</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/zcf0508">
+            <img src="https://avatars.githubusercontent.com/u/21942252?v=4" width="100;" alt="zcf0508"/>
+            <br />
+            <sub><b>周财发</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/1070152533">
+            <img src="https://avatars.githubusercontent.com/u/40099031?v=4" width="100;" alt="1070152533"/>
+            <br />
+            <sub><b>1070152533</b></sub>
+        </a>
+    </td></tr>
+</table>
+<!-- readme: collaborators,contributors -end -->
+
 ## 📧 交流与反馈
 
-任何使用问题可以加入 QQ 群 `769748484` 或者添加作者微信 `zhoulx1688888` 进行咨询与反馈:
+任何使用问题可以加入 QQ 群 `769748484`、微信群或者添加作者微信 `zhoulx1688888` 进行咨询与反馈:
 
-<div style="display: flex;">
-  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/1ffb57e0-d511-4981-bc06-cf16f8793fd8" width="200" />
-  <img src="https://user-images.githubusercontent.com/73059627/226233691-848b2a40-f1a9-414e-a80f-3fc6c6209eb1.png" width="200" />
+<div style="display: flex; column-gap: 16px; row-gap: 16px; flex-wrap: wrap;">
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/6f0c8197-21e3-48d7-b9db-ffeb0e0d4ba7" width="200" height="272" />
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/acd7dafb-b47a-480c-8ab0-93801f39477f" width="200" height="272" />
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/28ebb97a-a114-4598-a6f2-0e45103284cc" width="200" height="272" />
 </div>
diff --git a/demos/webpack-react/config/webpack.config.js b/demos/webpack-react/config/webpack.config.js
@@ -1,5 +1,3 @@
-'use strict';
-
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
@@ -29,6 +27,8 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 const { CodeInspectorPlugin } = require('code-inspector-plugin');
 
+console.log(1111);
+
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 

diff --git a/demos/webpack-react/src/App.tsx b/demos/webpack-react/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
@@ -19,6 +19,10 @@ function App() {
           Learn React
         </a>
       </header>
+      <React.Fragment>
+        <p>p1</p>
+        <p>p2</p>
+      </React.Fragment>
     </div>
   );
 }

diff --git a/docs/README-EN.md b/docs/README-EN.md
@@ -0,0 +1,72 @@
+<div align="center">
+<img src="https://github.com/zh-lx/code-inspector/assets/73059627/842c3e88-dca7-4743-854c-d61093d3d34f" width=160px" style="margin-bottom: 12px;" />
+
+<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://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)
+[![GITHUB star](https://img.shields.io/github/stars/zh-lx/code-inspector.svg)](https://github.com/zh-lx/code-inspector)
+[![MIT-license](https://img.shields.io/npm/l/code-inspector.svg)](https://opensource.org/licenses/MIT)
+
+</div>
+
+<hr />
+
+## 📖 Introduction
+
+Click the element on the page, it can automatically open the code editor and position the cursor to the source code of the element.
+
+![code-inspector](https://user-images.githubusercontent.com/73059627/227070438-6e40e112-6f1d-4f67-9f26-53986bff77c3.gif)
+
+## 💻 Try it out 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)
+
+## 🚀 Install
+
+```perl
+npm i webpack-code-inspector-plugin -D
+# or
+yarn add webpack-code-inspector-plugin -D
+# or
+pnpm add webpack-code-inspector-plugin -D
+```
+
+## 🌈 Usage
+
+Please check here for complete access and usage information: [code-inspector-plugin configuration](https://en.inspector.fe-dev.cn/guide/start.html#configuration)
+
+## 🎨 Support
+
+The following are which compilers, web frameworks and editors we supported now:
+
+- The following bundlers are currently supported:<br />
+  ✅ webpack(4.x/5.x)<br />
+  ✅ vite
+- The following Web frameworks are currently supported:<br />
+  ✅ vue2<br />
+  ✅ vue3<br />
+  ✅ react
+- The following code editors are currently supported:<br />
+  [VSCode](https://code.visualstudio.com/) | [Visual Studio Code - Insiders](https://code.visualstudio.com/insiders/) | [WebStorm](https://www.jetbrains.com/webstorm/) | [Atom](https://atom.io/) | [HBuilderX](https://www.dcloud.io/hbuilderx.html) | [PhpStorm](https://www.jetbrains.com/phpstorm/) | [PyCharm](https://www.jetbrains.com/pycharm/) | [IntelliJ IDEA](https://www.jetbrains.com/idea/)
+
+## 📧 Communication and Feedback
+
+For any usage issues, you can join the QQ group `769748484`、wechat group or add the author's WeChat account `zhoulx1688888` for consultation and feedback:
+
+<div style="display: flex; column-gap: 16px; row-gap: 16px; flex-wrap: wrap;">
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/6f0c8197-21e3-48d7-b9db-ffeb0e0d4ba7" width="200" height="272" />
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/acd7dafb-b47a-480c-8ab0-93801f39477f" width="200" height="272" />
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/28ebb97a-a114-4598-a6f2-0e45103284cc" width="200" height="272" />
+</div>
diff --git a/docs/README-ZH.md b/docs/README-ZH.md
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/changelog.md b/docs/en/more/changelog.md
@@ -1,9 +1,25 @@
 # Changelog
 
+## 0.1.12
+
+- 【feat】Add parameters: `hideConsole` and `editor`
+
+## 0.1.11
+
+- 【optimize】Optimize dependencies version
+
+## 0.1.10
+
+- 【fix】Fix the issue of injecting path information into the React built-in component, which will cause an error to be reported on the console
+
+## 0.1.9
+
+- 【optimize】Removing file path verification for Windows systems
+
 ## 0.1.8
 
-【feature】Added the `needEnvInspector` parameter to support scenarios where the plugin only takes effect when `CODE_INSPECTOR=true` is configured in `.local.env`
-【fix】Fix the issue of full page refresh during hot updates when used in webpack
+- 【feature】Added the `needEnvInspector` parameter to support scenarios where the plugin only takes effect when `CODE_INSPECTOR=true` is configured in `.local.env`
+- 【fix】Fix the issue of full page refresh during hot updates when used in webpack
 
 ## 0.1.7
 

diff --git a/docs/en/more/feedback.md b/docs/en/more/feedback.md
@@ -2,9 +2,10 @@
 
 ## Join User Group
 
-For any usage problems, you can join the QQ group `769748484` or add the author's WeChat account `zhoulx1688888` for consultation and feedback:
+For any usage issues, you can join the QQ group `769748484`、wechat group or add the author's WeChat account `zhoulx1688888` for consultation and feedback:
 
-<div style="display: flex;">
-  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/1ffb57e0-d511-4981-bc06-cf16f8793fd8" width="200" />
-  <img src="https://user-images.githubusercontent.com/73059627/226233691-848b2a40-f1a9-414e-a80f-3fc6c6209eb1.png" width="200" />
+<div style="display: flex; column-gap: 16px; row-gap: 16px; flex-wrap: wrap;">
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/6f0c8197-21e3-48d7-b9db-ffeb0e0d4ba7" width="200" height="272" />
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/acd7dafb-b47a-480c-8ab0-93801f39477f" width="200" height="272" />
+  <img src="https://github.com/zh-lx/code-inspector/assets/73059627/28ebb97a-a114-4598-a6f2-0e45103284cc" width="200" height="272" />
 </div>