├── .changeset
├── README.md
└── config.json
├── .eslintignore
├── .eslintrc
├── .github
└── FUNDING.yml
├── .gitignore
├── LICENSE
├── README.md
├── logo.svg
├── package.json
├── packages
├── core
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ ├── src
│ │ ├── Overlay.vue
│ │ ├── compiler
│ │ │ ├── index.ts
│ │ │ └── template.ts
│ │ ├── index.ts
│ │ ├── load.js
│ │ └── utils
│ │ │ └── index.ts
│ └── tsup.config.ts
├── playground
│ ├── nuxt
│ │ ├── .gitignore
│ │ ├── .npmrc
│ │ ├── App.vue
│ │ ├── components
│ │ │ └── Hi.vue
│ │ ├── nuxt.config.ts
│ │ ├── package.json
│ │ └── tsconfig.json
│ ├── vue2
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── App.vue
│ │ │ ├── Count.vue
│ │ │ ├── Hi.vue
│ │ │ ├── Welcome.tsx
│ │ │ ├── main.ts
│ │ │ ├── shim-tsx.d.ts
│ │ │ └── shims-vue.d.ts
│ │ ├── tsconfig.json
│ │ ├── vite.config.ts
│ │ └── yarn.lock
│ └── vue3
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src
│ │ ├── App.vue
│ │ ├── ExternalComp.vue
│ │ ├── Hi.vue
│ │ ├── Welcome.tsx
│ │ ├── index.css
│ │ ├── main.ts
│ │ └── shims-vue.d.ts
│ │ └── vite.config.ts
└── unplugin
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ ├── scripts
│ └── postbuild.ts
│ ├── src
│ ├── index.ts
│ ├── nuxt.ts
│ ├── types.ts
│ └── vite.ts
│ └── tsup.config.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── public
├── install-vscode-cli.png
└── preview.gif
└── tsconfig.json
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 |
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 |
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 |
--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
3 | "changelog": "@changesets/cli/changelog",
4 | "commit": false,
5 | "fixed": [],
6 | "linked": [],
7 | "access": "public",
8 | "baseBranch": "main",
9 | "updateInternalDependencies": "patch",
10 | "ignore": [
11 | "playground-nuxt",
12 | "playground-vue2",
13 | "playground-vue3"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .output
4 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@antfu",
3 | "rules":{
4 | "no-console":0,
5 | "prefer-const":0,
6 | "no-prototype-builtins":0,
7 | "vue/no-parsing-error": ["error", {
8 | "invalid-first-character-of-tag-name": false
9 | }]
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [webfansplz]
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/
3 | pnpm-lock.yaml
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 webfansplz
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | ## 📖 Introduction
17 |
18 | A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3 & SSR.
19 |
20 |
21 |
22 |
23 |
24 | ## 📦 Installation
25 |
26 | ```bash
27 |
28 | # vite-plugin-vue-inspector
29 |
30 | pnpm install vite-plugin-vue-inspector -D
31 |
32 | # unplugin-vue-inspector
33 |
34 | pnpm install unplugin-vue-inspector -D
35 |
36 | ```
37 |
38 | ## 🦄 Usage
39 |
40 | ### Configuration Vite
41 |
42 | ```ts
43 | // for Vue2
44 |
45 | import { defineConfig, } from 'vite'
46 | import { createVuePlugin, } from 'vite-plugin-vue2'
47 |
48 | import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
49 |
50 | export default defineConfig({
51 | plugins: [
52 | createVuePlugin(),
53 | Inspector({
54 | vue: 2
55 | }),
56 | ],
57 | })
58 | ```
59 |
60 | ```ts
61 | // for Vue3
62 |
63 | import { defineConfig } from 'vite'
64 | import Vue from '@vitejs/plugin-vue'
65 |
66 | import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
67 |
68 | export default defineConfig({
69 | plugins: [Vue(), Inspector()],
70 | })
71 | ```
72 |
73 | ```ts
74 | // for Nuxt3
75 | // nuxt.config.ts
76 | import { defineNuxtConfig } from 'nuxt/config'
77 | import Inspector from 'vite-plugin-vue-inspector'
78 |
79 | export default defineNuxtConfig({
80 | modules: [
81 | ['unplugin-vue-inspector/nuxt', {
82 | enabled: true,
83 | toggleButtonVisibility: 'always',
84 | }],
85 | ],
86 | })
87 | ```
88 |
89 | ### Options
90 |
91 |
92 | ```ts
93 | interface VitePluginInspectorOptions {
94 | /**
95 | * Vue version
96 | * @default 3
97 | */
98 | vue?: 2 | 3
99 |
100 | /**
101 | * Default enable state
102 | * @default false
103 | */
104 | enabled?: boolean
105 |
106 | /**
107 | * Define a combo key to toggle inspector
108 | * @default 'control-shift' on windows, 'meta-shift' on other os
109 | *
110 | * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
111 | * examples: control-shift, control-o, control-alt-s meta-x control-meta
112 | * Some keys have native behavior (e.g. alt-s opens history menu on firefox).
113 | * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
114 | * You can also disable it by setting `false`.
115 | */
116 | toggleComboKey?: string | false
117 |
118 | /**
119 | * Toggle button visibility
120 | * @default 'active'
121 | */
122 | toggleButtonVisibility?: 'always' | 'active' | 'never'
123 |
124 | /**
125 | * Toggle button display position
126 | * @default top-right
127 | */
128 | toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
129 |
130 | /**
131 | * append an import to the module id ending with `appendTo` instead of adding a script into body
132 | * useful for frameworks that do not support transformIndexHtml hook (e.g. Nuxt3)
133 | *
134 | * WARNING: only set this if you know exactly what it does.
135 | */
136 | appendTo?: string | RegExp
137 |
138 | /**
139 | * Customize openInEditor host (e.g. http://localhost:3000)
140 | * @default false
141 | * @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
142 | */
143 | openInEditorHost?: string | false
144 |
145 | /**
146 | * lazy load inspector times (ms)
147 | * @default false
148 | */
149 | lazyLoad?: number | false
150 |
151 | /**
152 | * disable inspector on editor open
153 | * @default false
154 | */
155 | disableInspectorOnEditorOpen?: boolean
156 |
157 | /**
158 | * Hide information in VNode and produce clean html in DevTools
159 | *
160 | * Currently, it only works for Vue 3
161 | *
162 | * @default true
163 | */
164 | cleanHtml?: boolean
165 |
166 | /**
167 | * Target editor when open in editor (v5.1.0+)
168 | *
169 | * @default code (Visual Studio Code)
170 | */
171 | launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'cursor'
172 | }
173 | ```
174 |
175 | ### Example
176 |
177 | - [Vue2](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue2)
178 | - [Vue3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue3)
179 | - [Nuxt3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/nuxt)
180 |
181 | ## Supported editors
182 |
183 | | Value | Editor | Linux | Windows | OSX |
184 | |--------|------|:------:|:------:|:------:|
185 | | `appcode` | [AppCode](https://www.jetbrains.com/objc/) | | |✓|
186 | | `atom` | [Atom](https://atom.io/) |✓|✓|✓|
187 | | `atom-beta` | [Atom Beta](https://atom.io/beta) | | |✓|
188 | | `brackets` | [Brackets](http://brackets.io/) |✓|✓|✓|
189 | | `clion` | [Clion](https://www.jetbrains.com/clion/) | |✓|✓|
190 | | `code` | [Visual Studio Code](https://code.visualstudio.com/) |✓|✓|✓|
191 | | `code-insiders` | [Visual Studio Code Insiders](https://code.visualstudio.com/insiders/) |✓|✓|✓|
192 | | `codium` | [VSCodium](https://github.com/VSCodium/vscodium) |✓|✓|✓|
193 | | `emacs` | [Emacs](https://www.gnu.org/software/emacs/) |✓| | |
194 | | `idea` | [IDEA](https://www.jetbrains.com/idea/) |✓|✓|✓|
195 | | `notepad++` | [Notepad++](https://notepad-plus-plus.org/download/v7.5.4.html) | |✓| |
196 | | `pycharm` | [PyCharm](https://www.jetbrains.com/pycharm/) |✓|✓|✓|
197 | | `phpstorm` | [PhpStorm](https://www.jetbrains.com/phpstorm/) |✓|✓|✓|
198 | | `rubymine` | [RubyMine](https://www.jetbrains.com/ruby/) |✓|✓|✓|
199 | | `sublime` | [Sublime Text](https://www.sublimetext.com/) |✓|✓|✓|
200 | | `vim` | [Vim](http://www.vim.org/) |✓| | |
201 | | `visualstudio` | [Visual Studio](https://www.visualstudio.com/vs/) | | |✓|
202 | | `webstorm` | [WebStorm](https://www.jetbrains.com/webstorm/) |✓|✓|✓|
203 | | `cursor` | [Cursor](https://www.cursor.com/) |✓|✓|✓|
204 |
205 | ## 🔌 Configuration IDE / Editor
206 |
207 | **Starting from v5.1.0, We recommend using the `launchEditor` option configuration to specify the IDE** (Please ensure that the editor's environment variables are correctly configured beforehand.)
208 |
209 | It uses an **environment variable** named **`LAUNCH_EDITOR`** to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.
210 |
211 | For example, if you want it always open VS Code when inspection clicked, set `export LAUNCH_EDITOR=code` in your shell.
212 |
213 |
214 | ### VS Code
215 |
216 | - install VS Code command line tools, [see the official docs](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)
217 | 
218 |
219 | - set env to shell, like `.bashrc` or `.zshrc`
220 |
221 | ```bash
222 | export LAUNCH_EDITOR=code
223 | ```
224 |
225 |
226 |
227 |
228 | ### VS Code with WSL (Windows)
229 |
230 | - add the configuration in the `settings.json`
231 |
232 | - restart the VS Code (All Windows should be closed to take effect)
233 |
234 | ```json
235 | {
236 | // other config...
237 |
238 | "terminal.integrated.env.linux": {
239 | "EDITOR": "code"
240 | }
241 | }
242 | ```
243 |
244 |
245 | ### WebStorm
246 |
247 | - just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
248 |
249 | ```bash
250 | export LAUNCH_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
251 | ```
252 |
253 | **OR**
254 |
255 | - install WebStorm command line tools
256 |
257 | - then set env to shell, like `.bashrc` or `.zshrc`
258 |
259 | ```bash
260 | export LAUNCH_EDITOR=webstorm
261 | ```
262 |
263 |
264 |
265 | ### PhpStorm
266 |
267 | - just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
268 |
269 | ```bash
270 | export LAUNCH_EDITOR='/Applications/PhpStorm.app/Contents/MacOS/phpstorm'
271 | ```
272 |
273 | **OR**
274 |
275 | - install PhpStorm command line tools
276 |
277 | - then set env to shell, like `.bashrc` or `.zshrc`
278 |
279 | ```bash
280 | export LAUNCH_EDITOR=phpstorm
281 | ```
282 |
283 |
284 |
285 | ### Vim
286 |
287 | Yes! you can also use vim if you want, just set env to shell
288 |
289 | ```bash
290 | export LAUNCH_EDITOR=vim
291 | ```
292 |
293 |
294 |
295 | ## 💡 Notice
296 |
297 | - **[BREAKING CHANGE] From v1.0, `enabled` option default value changed from `true` to `false` .**
298 | - It only work in develop mode .
299 | - It does not currently support `Template Engine (e.g. pug)` .
300 |
301 | ## 👨💻 Programmatic Usage
302 |
303 | You can also use control inspector programmatically, by accessing the `__VUE_INSPECTOR__` global variable.
304 |
305 | ```ts
306 | import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
307 |
308 | const inspector: VueInspectorClient = window.__VUE_INSPECTOR__
309 |
310 | if (inspector) {
311 | // enable inspector
312 | inspector.enable()
313 | // or
314 | inspector.disable()
315 | }
316 | ```
317 |
318 | ## 🌸 Credits
319 |
320 | This project is inspired by [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) .
321 |
322 | Partially implementation is inspired by [vite-plugin-svelte-inspector](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte/src/ui/inspector) .
323 |
324 | ## 🤖️ Analysis of Theory
325 |
326 | [Chinese] [点击页面元素,这个Vite插件帮我打开了Vue组件](https://juejin.cn/post/7077347158545924127)
327 | ## 📄 License
328 |
329 | [MIT LICENSE](./LICENSE)
330 |
--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "author": "webfansplz",
4 | "license": "MIT",
5 | "homepage": "https://github.com/webfansplz/vite-plugin-vue-inspector#readme",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/webfansplz/vite-plugin-vue-inspector.git"
9 | },
10 | "bugs": {
11 | "url": "https://github.com/webfansplz/vite-plugin-vue-inspector/issues"
12 | },
13 | "scripts": {
14 | "play:nuxt": "pnpm run -r --filter=./packages/playground/nuxt dev",
15 | "play:vue3": "pnpm run -r --filter=./packages/playground/vue3 dev",
16 | "play:vue2": "pnpm run -r --filter=./packages/playground/vue2 dev",
17 | "lint": "eslint --fix --ext .js,.ts,.vue .",
18 | "dev": "pnpm run -r --filter=./packages/core dev",
19 | "build": "pnpm run -r --filter=./packages/{core,unplugin} build",
20 | "release": "pnpm build && changeset && changeset version && changeset publish"
21 | },
22 | "devDependencies": {
23 | "@antfu/eslint-config": "^0.43.1",
24 | "@changesets/cli": "^2.26.2",
25 | "@types/node": "^20.8.0",
26 | "eslint": "^8.50.0",
27 | "esmo": "^0.17.0",
28 | "fs-extra": "^11.1.1",
29 | "nodemon": "^3.0.1",
30 | "tsup": "^7.2.0",
31 | "tsx": "^3.13.0",
32 | "typescript": "^5.2.2",
33 | "vite": "^5.4.11",
34 | "vite-plugin-inspect": "^0.7.40",
35 | "vue": "^3.3.4"
36 | },
37 | "pnpm": {
38 | "packageExtensions": {
39 | "vue-template-compiler": {
40 | "peerDependencies": {
41 | "vue": "^2.6.14"
42 | }
43 | }
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/packages/core/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # vite-plugin-vue-inspector
2 |
3 | ## 5.3.1
4 |
5 | ### Patch Changes
6 |
7 | - chore: support vite6
8 |
9 | ## 5.3.0
10 |
11 | ### Minor Changes
12 |
13 | - feat: cursor support
14 |
15 | ## 5.2.0
16 |
17 | ### Minor Changes
18 |
19 | - feat: inspect external component (#91)
20 | - feat: introduce reduceMotion option (#102)
21 | - chore: adjust the position of floating elements on the x-axis (#105)
22 | - feat: exclude template tag to support jsx-directive (#106)
23 |
24 | ## 5.1.3
25 |
26 | ### Patch Changes
27 |
28 | - fix: escaping special characters
29 |
30 | ## 5.1.2
31 |
32 | ### Patch Changes
33 |
34 | - fix: remove the available launch editors limit
35 |
36 | ## 5.1.1
37 |
38 | ### Patch Changes
39 |
40 | - feat: respect user `process.env.LAUNCH_EDITOR` setting (#93)
41 |
42 | - feat: add `onEnabled / onDisabled` callbacks (#94)
43 |
44 | ## 5.1.0
45 |
46 | ### Minor Changes
47 |
48 | - feat: introducing launchEditor option
49 |
50 | ## 5.0.1
51 |
52 | ### Patch Changes
53 |
54 | - fix: `openInEditor` types
55 |
56 | ## 5.0.0
57 |
58 | ### Major Changes
59 |
60 | - fix: open-in-editor base url, deprecated `openInEditorHost` option
61 |
62 | ## 4.0.2
63 |
64 | ### Patch Changes
65 |
66 | - feat: respect vite base path option
67 |
68 | ## 4.0.1
69 |
70 | ### Patch Changes
71 |
72 | - feat: support vite5
73 |
74 | ## 4.0.0
75 |
76 | ### Major Changes
77 |
78 | - feat!: hide data-v-inspector in html (#81)
79 |
80 | ## 3.7.2
81 |
82 | ### Patch Changes
83 |
84 | - perf: remove unnecessary dependencies (#80)
85 |
86 | ## 3.7.1
87 |
88 | ### Patch Changes
89 |
90 | - fix: respect `server.port` when setting custom host (#74)
91 |
92 | ## 3.7.0
93 |
94 | ### Minor Changes
95 |
96 | - feat: close overlay when resizing the window (#71)
97 |
98 | - feat: introducing `disableInspectorOnEditorOpen` option (#77)
99 |
100 | - feat: support `decorators` and `import-attributes` syntax (#79)
101 |
102 | ## 3.6.0
103 |
104 | ### Minor Changes
105 |
106 | - feat: introducing `lazyLoad` option
107 |
108 | ## 3.5.0
109 |
110 | ### Minor Changes
111 |
112 | - chore: release
113 |
114 | ## 3.4.2
115 |
116 | ### Patch Changes
117 |
118 | - fix: normalize path in `data-v-inspector` attribute
119 |
120 | ## 3.4.1
121 |
122 | ### Patch Changes
123 |
124 | - fix: inspector path and hide injected app in Vue devtools
125 |
126 | ## 3.4.0
127 |
128 | ### Minor Changes
129 |
130 | - fix: compactible with Nuxt 3.3
131 |
132 | ## 3.3.2
133 |
134 | ### Patch Changes
135 |
136 | - fix: jsx self-closing tags handle
137 |
138 | ## 3.3.1
139 |
140 | ### Patch Changes
141 |
142 | - fix: combo key name
143 |
144 | ## 3.3.0
145 |
146 | ### Minor Changes
147 |
148 | - feat: disable toggleComboKey option
149 |
150 | ## 3.2.2
151 |
152 | ### Patch Changes
153 |
154 | - feat: append attribute at the end
155 |
156 | ## 3.2.1
157 |
158 | ### Patch Changes
159 |
160 | - introduce `data-v-inspector-ignore` options
161 |
162 | ## 3.2.0
163 |
164 | ### Minor Changes
165 |
166 | - release
167 |
168 | ## 3.1.3
169 |
170 | ### Patch Changes
171 |
172 | - docs: readme
173 |
174 | ## 3.1.2
175 |
176 | ### Patch Changes
177 |
178 | - feat: unplugin package
179 |
--------------------------------------------------------------------------------
/packages/core/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | ## 📖 Introduction
17 |
18 | A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3 & SSR.
19 |
20 |
21 |
22 |
23 |
24 | ## 📦 Installation
25 |
26 | ```bash
27 |
28 | # vite-plugin-vue-inspector
29 |
30 | pnpm install vite-plugin-vue-inspector -D
31 |
32 | # unplugin-vue-inspector
33 |
34 | pnpm install unplugin-vue-inspector -D
35 |
36 | ```
37 |
38 | ## 🦄 Usage
39 |
40 | ### Configuration Vite
41 |
42 | ```ts
43 | // for Vue2
44 |
45 | import { defineConfig, } from 'vite'
46 | import { createVuePlugin, } from 'vite-plugin-vue2'
47 |
48 | import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
49 |
50 | export default defineConfig({
51 | plugins: [
52 | createVuePlugin(),
53 | Inspector({
54 | vue: 2
55 | }),
56 | ],
57 | })
58 | ```
59 |
60 | ```ts
61 | // for Vue3
62 |
63 | import { defineConfig } from 'vite'
64 | import Vue from '@vitejs/plugin-vue'
65 |
66 | import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
67 |
68 | export default defineConfig({
69 | plugins: [Vue(), Inspector()],
70 | })
71 | ```
72 |
73 | ```ts
74 | // for Nuxt3
75 | // nuxt.config.ts
76 | import { defineNuxtConfig } from 'nuxt/config'
77 | import Inspector from 'vite-plugin-vue-inspector'
78 |
79 | export default defineNuxtConfig({
80 | modules: [
81 | ['unplugin-vue-inspector/nuxt', {
82 | enabled: true,
83 | toggleButtonVisibility: 'always',
84 | }],
85 | ],
86 | })
87 | ```
88 |
89 | ### Options
90 |
91 |
92 | ```ts
93 | interface VitePluginInspectorOptions {
94 | /**
95 | * Vue version
96 | * @default 3
97 | */
98 | vue?: 2 | 3
99 |
100 | /**
101 | * Default enable state
102 | * @default false
103 | */
104 | enabled?: boolean
105 |
106 | /**
107 | * Define a combo key to toggle inspector
108 | * @default 'control-shift' on windows, 'meta-shift' on other os
109 | *
110 | * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
111 | * examples: control-shift, control-o, control-alt-s meta-x control-meta
112 | * Some keys have native behavior (e.g. alt-s opens history menu on firefox).
113 | * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
114 | * You can also disable it by setting `false`.
115 | */
116 | toggleComboKey?: string | false
117 |
118 | /**
119 | * Toggle button visibility
120 | * @default 'active'
121 | */
122 | toggleButtonVisibility?: 'always' | 'active' | 'never'
123 |
124 | /**
125 | * Toggle button display position
126 | * @default top-right
127 | */
128 | toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
129 |
130 | /**
131 | * append an import to the module id ending with `appendTo` instead of adding a script into body
132 | * useful for frameworks that do not support transformIndexHtml hook (e.g. Nuxt3)
133 | *
134 | * WARNING: only set this if you know exactly what it does.
135 | */
136 | appendTo?: string | RegExp
137 |
138 | /**
139 | * Customize openInEditor host (e.g. http://localhost:3000)
140 | * @default false
141 | * @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
142 | */
143 | openInEditorHost?: string | false
144 |
145 | /**
146 | * lazy load inspector times (ms)
147 | * @default false
148 | */
149 | lazyLoad?: number | false
150 |
151 | /**
152 | * disable inspector on editor open
153 | * @default false
154 | */
155 | disableInspectorOnEditorOpen?: boolean
156 |
157 | /**
158 | * Hide information in VNode and produce clean html in DevTools
159 | *
160 | * Currently, it only works for Vue 3
161 | *
162 | * @default true
163 | */
164 | cleanHtml?: boolean
165 |
166 | /**
167 | * Target editor when open in editor (v5.1.0+)
168 | *
169 | * @default code (Visual Studio Code)
170 | */
171 | launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'cursor'
172 | }
173 | ```
174 |
175 | ### Example
176 |
177 | - [Vue2](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue2)
178 | - [Vue3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue3)
179 | - [Nuxt3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/nuxt)
180 |
181 | ## Supported editors
182 |
183 | | Value | Editor | Linux | Windows | OSX |
184 | |--------|------|:------:|:------:|:------:|
185 | | `appcode` | [AppCode](https://www.jetbrains.com/objc/) | | |✓|
186 | | `atom` | [Atom](https://atom.io/) |✓|✓|✓|
187 | | `atom-beta` | [Atom Beta](https://atom.io/beta) | | |✓|
188 | | `brackets` | [Brackets](http://brackets.io/) |✓|✓|✓|
189 | | `clion` | [Clion](https://www.jetbrains.com/clion/) | |✓|✓|
190 | | `code` | [Visual Studio Code](https://code.visualstudio.com/) |✓|✓|✓|
191 | | `code-insiders` | [Visual Studio Code Insiders](https://code.visualstudio.com/insiders/) |✓|✓|✓|
192 | | `codium` | [VSCodium](https://github.com/VSCodium/vscodium) |✓|✓|✓|
193 | | `emacs` | [Emacs](https://www.gnu.org/software/emacs/) |✓| | |
194 | | `idea` | [IDEA](https://www.jetbrains.com/idea/) |✓|✓|✓|
195 | | `notepad++` | [Notepad++](https://notepad-plus-plus.org/download/v7.5.4.html) | |✓| |
196 | | `pycharm` | [PyCharm](https://www.jetbrains.com/pycharm/) |✓|✓|✓|
197 | | `phpstorm` | [PhpStorm](https://www.jetbrains.com/phpstorm/) |✓|✓|✓|
198 | | `rubymine` | [RubyMine](https://www.jetbrains.com/ruby/) |✓|✓|✓|
199 | | `sublime` | [Sublime Text](https://www.sublimetext.com/) |✓|✓|✓|
200 | | `vim` | [Vim](http://www.vim.org/) |✓| | |
201 | | `visualstudio` | [Visual Studio](https://www.visualstudio.com/vs/) | | |✓|
202 | | `webstorm` | [WebStorm](https://www.jetbrains.com/webstorm/) |✓|✓|✓|
203 | | `cursor` | [Cursor](https://www.cursor.com/) |✓|✓|✓|
204 |
205 | ## 🔌 Configuration IDE / Editor
206 |
207 | **Starting from v5.1.0, We recommend using the `launchEditor` option configuration to specify the IDE** (Please ensure that the editor's environment variables are correctly configured beforehand.)
208 |
209 | It uses an **environment variable** named **`LAUNCH_EDITOR`** to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.
210 |
211 | For example, if you want it always open VS Code when inspection clicked, set `export LAUNCH_EDITOR=code` in your shell.
212 |
213 |
214 | ### VS Code
215 |
216 | - install VS Code command line tools, [see the official docs](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)
217 | 
218 |
219 | - set env to shell, like `.bashrc` or `.zshrc`
220 |
221 | ```bash
222 | export LAUNCH_EDITOR=code
223 | ```
224 |
225 |
226 |
227 |
228 | ### VS Code with WSL (Windows)
229 |
230 | - add the configuration in the `settings.json`
231 |
232 | - restart the VS Code (All Windows should be closed to take effect)
233 |
234 | ```json
235 | {
236 | // other config...
237 |
238 | "terminal.integrated.env.linux": {
239 | "EDITOR": "code"
240 | }
241 | }
242 | ```
243 |
244 |
245 | ### WebStorm
246 |
247 | - just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
248 |
249 | ```bash
250 | export LAUNCH_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
251 | ```
252 |
253 | **OR**
254 |
255 | - install WebStorm command line tools
256 |
257 | - then set env to shell, like `.bashrc` or `.zshrc`
258 |
259 | ```bash
260 | export LAUNCH_EDITOR=webstorm
261 | ```
262 |
263 |
264 |
265 | ### PhpStorm
266 |
267 | - just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
268 |
269 | ```bash
270 | export LAUNCH_EDITOR='/Applications/PhpStorm.app/Contents/MacOS/phpstorm'
271 | ```
272 |
273 | **OR**
274 |
275 | - install PhpStorm command line tools
276 |
277 | - then set env to shell, like `.bashrc` or `.zshrc`
278 |
279 | ```bash
280 | export LAUNCH_EDITOR=phpstorm
281 | ```
282 |
283 |
284 |
285 | ### Vim
286 |
287 | Yes! you can also use vim if you want, just set env to shell
288 |
289 | ```bash
290 | export LAUNCH_EDITOR=vim
291 | ```
292 |
293 |
294 |
295 | ## 💡 Notice
296 |
297 | - **[BREAKING CHANGE] From v1.0, `enabled` option default value changed from `true` to `false` .**
298 | - It only work in develop mode .
299 | - It does not currently support `Template Engine (e.g. pug)` .
300 |
301 | ## 👨💻 Programmatic Usage
302 |
303 | You can also use control inspector programmatically, by accessing the `__VUE_INSPECTOR__` global variable.
304 |
305 | ```ts
306 | import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
307 |
308 | const inspector: VueInspectorClient = window.__VUE_INSPECTOR__
309 |
310 | if (inspector) {
311 | // enable inspector
312 | inspector.enable()
313 | // or
314 | inspector.disable()
315 | }
316 | ```
317 |
318 | ## 🌸 Credits
319 |
320 | This project is inspired by [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) .
321 |
322 | Partially implementation is inspired by [vite-plugin-svelte-inspector](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte/src/ui/inspector) .
323 |
324 | ## 🤖️ Analysis of Theory
325 |
326 | [Chinese] [点击页面元素,这个Vite插件帮我打开了Vue组件](https://juejin.cn/post/7077347158545924127)
327 | ## 📄 License
328 |
329 | [MIT LICENSE](./LICENSE)
330 |
--------------------------------------------------------------------------------
/packages/core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vite-plugin-vue-inspector",
3 | "version": "5.3.1",
4 | "description": "jump to local IDE source code while click the element of browser automatically.",
5 | "author": "webfansplz",
6 | "license": "MIT",
7 | "homepage": "https://github.com/webfansplz/vite-plugin-vue-inspector#readme",
8 | "repository": {
9 | "type": "git",
10 | "url": "git+https://github.com/webfansplz/vite-plugin-vue-inspector.git"
11 | },
12 | "bugs": {
13 | "url": "https://github.com/webfansplz/vite-plugin-vue-inspector/issues"
14 | },
15 | "keywords": [
16 | "vue",
17 | "vite",
18 | "vscode",
19 | "vite-plugin",
20 | "inspector",
21 | "debug"
22 | ],
23 | "exports": {
24 | ".": {
25 | "types": "./dist/index.d.ts",
26 | "require": "./dist/index.cjs",
27 | "import": "./dist/index.mjs"
28 | },
29 | "./src/*": "./src/*"
30 | },
31 | "main": "./dist/index.cjs",
32 | "module": "./dist/index.mjs",
33 | "types": "./dist/index.d.ts",
34 | "files": [
35 | "dist",
36 | "src/load.js",
37 | "src/Overlay.vue"
38 | ],
39 | "scripts": {
40 | "lint": "eslint --fix --ext .js,.ts,.vue .",
41 | "dev": "tsup --watch",
42 | "build": "tsup"
43 | },
44 | "peerDependencies": {
45 | "vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0"
46 | },
47 | "dependencies": {
48 | "@babel/core": "^7.23.0",
49 | "@babel/plugin-proposal-decorators": "^7.23.0",
50 | "@babel/plugin-syntax-import-attributes": "^7.22.5",
51 | "@babel/plugin-syntax-import-meta": "^7.10.4",
52 | "@babel/plugin-transform-typescript": "^7.22.15",
53 | "@vue/babel-plugin-jsx": "^1.1.5",
54 | "@vue/compiler-dom": "^3.3.4",
55 | "kolorist": "^1.8.0",
56 | "magic-string": "^0.30.4"
57 | },
58 | "devDependencies": {
59 | "@types/babel__core": "^7.20.2",
60 | "unplugin": "^1.5.0"
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/packages/core/src/Overlay.vue:
--------------------------------------------------------------------------------
1 |
266 |
267 |
268 |
15 |
16 | ## 📖 Introduction
17 |
18 | A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3 & SSR.
19 |
20 |
21 |
22 |
23 |
24 | ## 📦 Installation
25 |
26 | ```bash
27 |
28 | # vite-plugin-vue-inspector
29 |
30 | pnpm install vite-plugin-vue-inspector -D
31 |
32 | # unplugin-vue-inspector
33 |
34 | pnpm install unplugin-vue-inspector -D
35 |
36 | ```
37 |
38 | ## 🦄 Usage
39 |
40 | ### Configuration Vite
41 |
42 | ```ts
43 | // for Vue2
44 |
45 | import { defineConfig, } from 'vite'
46 | import { createVuePlugin, } from 'vite-plugin-vue2'
47 |
48 | import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
49 |
50 | export default defineConfig({
51 | plugins: [
52 | createVuePlugin(),
53 | Inspector({
54 | vue: 2
55 | }),
56 | ],
57 | })
58 | ```
59 |
60 | ```ts
61 | // for Vue3
62 |
63 | import { defineConfig } from 'vite'
64 | import Vue from '@vitejs/plugin-vue'
65 |
66 | import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
67 |
68 | export default defineConfig({
69 | plugins: [Vue(), Inspector()],
70 | })
71 | ```
72 |
73 | ```ts
74 | // for Nuxt3
75 | // nuxt.config.ts
76 | import { defineNuxtConfig } from 'nuxt/config'
77 | import Inspector from 'vite-plugin-vue-inspector'
78 |
79 | export default defineNuxtConfig({
80 | modules: [
81 | ['unplugin-vue-inspector/nuxt', {
82 | enabled: true,
83 | toggleButtonVisibility: 'always',
84 | }],
85 | ],
86 | })
87 | ```
88 |
89 | ### Options
90 |
91 |
92 | ```ts
93 | interface VitePluginInspectorOptions {
94 | /**
95 | * Vue version
96 | * @default 3
97 | */
98 | vue?: 2 | 3
99 |
100 | /**
101 | * Default enable state
102 | * @default false
103 | */
104 | enabled?: boolean
105 |
106 | /**
107 | * Define a combo key to toggle inspector
108 | * @default 'control-shift' on windows, 'meta-shift' on other os
109 | *
110 | * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
111 | * examples: control-shift, control-o, control-alt-s meta-x control-meta
112 | * Some keys have native behavior (e.g. alt-s opens history menu on firefox).
113 | * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
114 | * You can also disable it by setting `false`.
115 | */
116 | toggleComboKey?: string | false
117 |
118 | /**
119 | * Toggle button visibility
120 | * @default 'active'
121 | */
122 | toggleButtonVisibility?: 'always' | 'active' | 'never'
123 |
124 | /**
125 | * Toggle button display position
126 | * @default top-right
127 | */
128 | toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
129 |
130 | /**
131 | * append an import to the module id ending with `appendTo` instead of adding a script into body
132 | * useful for frameworks that do not support transformIndexHtml hook (e.g. Nuxt3)
133 | *
134 | * WARNING: only set this if you know exactly what it does.
135 | */
136 | appendTo?: string | RegExp
137 |
138 | /**
139 | * Customize openInEditor host (e.g. http://localhost:3000)
140 | * @default false
141 | * @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
142 | */
143 | openInEditorHost?: string | false
144 |
145 | /**
146 | * lazy load inspector times (ms)
147 | * @default false
148 | */
149 | lazyLoad?: number | false
150 |
151 | /**
152 | * disable inspector on editor open
153 | * @default false
154 | */
155 | disableInspectorOnEditorOpen?: boolean
156 |
157 | /**
158 | * Hide information in VNode and produce clean html in DevTools
159 | *
160 | * Currently, it only works for Vue 3
161 | *
162 | * @default true
163 | */
164 | cleanHtml?: boolean
165 |
166 | /**
167 | * Target editor when open in editor (v2.1.0+)
168 | *
169 | * @default code (Visual Studio Code)
170 | */
171 | launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'cursor'
172 | }
173 | ```
174 |
175 | ### Example
176 |
177 | - [Vue2](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue2)
178 | - [Vue3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue3)
179 | - [Nuxt3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/nuxt)
180 |
181 | ## Supported editors
182 |
183 | | Value | Editor | Linux | Windows | OSX |
184 | |--------|------|:------:|:------:|:------:|
185 | | `appcode` | [AppCode](https://www.jetbrains.com/objc/) | | |✓|
186 | | `atom` | [Atom](https://atom.io/) |✓|✓|✓|
187 | | `atom-beta` | [Atom Beta](https://atom.io/beta) | | |✓|
188 | | `brackets` | [Brackets](http://brackets.io/) |✓|✓|✓|
189 | | `clion` | [Clion](https://www.jetbrains.com/clion/) | |✓|✓|
190 | | `code` | [Visual Studio Code](https://code.visualstudio.com/) |✓|✓|✓|
191 | | `code-insiders` | [Visual Studio Code Insiders](https://code.visualstudio.com/insiders/) |✓|✓|✓|
192 | | `codium` | [VSCodium](https://github.com/VSCodium/vscodium) |✓|✓|✓|
193 | | `emacs` | [Emacs](https://www.gnu.org/software/emacs/) |✓| | |
194 | | `idea` | [IDEA](https://www.jetbrains.com/idea/) |✓|✓|✓|
195 | | `notepad++` | [Notepad++](https://notepad-plus-plus.org/download/v7.5.4.html) | |✓| |
196 | | `pycharm` | [PyCharm](https://www.jetbrains.com/pycharm/) |✓|✓|✓|
197 | | `phpstorm` | [PhpStorm](https://www.jetbrains.com/phpstorm/) |✓|✓|✓|
198 | | `rubymine` | [RubyMine](https://www.jetbrains.com/ruby/) |✓|✓|✓|
199 | | `sublime` | [Sublime Text](https://www.sublimetext.com/) |✓|✓|✓|
200 | | `vim` | [Vim](http://www.vim.org/) |✓| | |
201 | | `visualstudio` | [Visual Studio](https://www.visualstudio.com/vs/) | | |✓|
202 | | `webstorm` | [WebStorm](https://www.jetbrains.com/webstorm/) |✓|✓|✓|
203 | | `cursor` | [Cursor](https://www.cursor.com/) |✓|✓|✓|
204 |
205 |
206 | ## 🔌 Configuration IDE / Editor
207 |
208 | **Starting from v2.1.0, We recommend using the `launchEditor` option configuration to specify the IDE** (Please ensure that the editor's environment variables are correctly configured beforehand.)
209 |
210 | It uses an **environment variable** named **`LAUNCH_EDITOR`** to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.
211 |
212 | For example, if you want it always open VS Code when inspection clicked, set `export LAUNCH_EDITOR=code` in your shell.
213 |
214 |
215 | ### VS Code
216 |
217 | - install VS Code command line tools, [see the official docs](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)
218 | 
219 |
220 | - set env to shell, like `.bashrc` or `.zshrc`
221 |
222 | ```bash
223 | export LAUNCH_EDITOR=code
224 | ```
225 |
226 |
227 |
228 |
229 | ### VS Code with WSL (Windows)
230 |
231 | - add the configuration in the `settings.json`
232 |
233 | - restart the VS Code (All Windows should be closed to take effect)
234 |
235 | ```json
236 | {
237 | // other config...
238 |
239 | "terminal.integrated.env.linux": {
240 | "EDITOR": "code"
241 | }
242 | }
243 | ```
244 |
245 |
246 | ### WebStorm
247 |
248 | - just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
249 |
250 | ```bash
251 | export LAUNCH_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
252 | ```
253 |
254 | **OR**
255 |
256 | - install WebStorm command line tools
257 |
258 | - then set env to shell, like `.bashrc` or `.zshrc`
259 |
260 | ```bash
261 | export LAUNCH_EDITOR=webstorm
262 | ```
263 |
264 |
265 |
266 | ### PhpStorm
267 |
268 | - just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
269 |
270 | ```bash
271 | export LAUNCH_EDITOR='/Applications/PhpStorm.app/Contents/MacOS/phpstorm'
272 | ```
273 |
274 | **OR**
275 |
276 | - install PhpStorm command line tools
277 |
278 | - then set env to shell, like `.bashrc` or `.zshrc`
279 |
280 | ```bash
281 | export LAUNCH_EDITOR=phpstorm
282 | ```
283 |
284 |
285 |
286 | ### Vim
287 |
288 | Yes! you can also use vim if you want, just set env to shell
289 |
290 | ```bash
291 | export LAUNCH_EDITOR=vim
292 | ```
293 |
294 |
295 |
296 | ## 💡 Notice
297 |
298 | - **[BREAKING CHANGE] From v1.0, `enabled` option default value changed from `true` to `false` .**
299 | - It only work in develop mode .
300 | - It does not currently support `Template Engine (e.g. pug)` .
301 |
302 | ## 👨💻 Programmatic Usage
303 |
304 | You can also use control inspector programmatically, by accessing the `__VUE_INSPECTOR__` global variable.
305 |
306 | ```ts
307 | import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
308 |
309 | const inspector: VueInspectorClient = window.__VUE_INSPECTOR__
310 |
311 | if (inspector) {
312 | // enable inspector
313 | inspector.enable()
314 | // or
315 | inspector.disable()
316 | }
317 | ```
318 |
319 | ## 🌸 Credits
320 |
321 | This project is inspired by [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) .
322 |
323 | Partially implementation is inspired by [vite-plugin-svelte-inspector](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte/src/ui/inspector) .
324 |
325 | ## 🤖️ Analysis of Theory
326 |
327 | [Chinese] [点击页面元素,这个Vite插件帮我打开了Vue组件](https://juejin.cn/post/7077347158545924127)
328 | ## 📄 License
329 |
330 | [MIT LICENSE](./LICENSE)
331 |
--------------------------------------------------------------------------------
/packages/unplugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "unplugin-vue-inspector",
3 | "version": "2.3.1",
4 | "description": "jump to local IDE source code while click the element of browser automatically.",
5 | "author": "webfansplz",
6 | "license": "MIT",
7 | "homepage": "https://github.com/webfansplz/vite-plugin-vue-inspector#readme",
8 | "repository": {
9 | "type": "git",
10 | "url": "git+https://github.com/webfansplz/vite-plugin-vue-inspector.git"
11 | },
12 | "bugs": {
13 | "url": "https://github.com/webfansplz/vite-plugin-vue-inspector/issues"
14 | },
15 | "keywords": [
16 | "vue",
17 | "vite",
18 | "vscode",
19 | "unplugin",
20 | "inspector",
21 | "debug"
22 | ],
23 | "exports": {
24 | ".": {
25 | "types": "./dist/index.d.ts",
26 | "require": "./dist/index.js",
27 | "import": "./dist/index.mjs"
28 | },
29 | "./vite": {
30 | "types": "./dist/vite.d.ts",
31 | "require": "./dist/vite.js",
32 | "import": "./dist/vite.mjs"
33 | },
34 | "./nuxt": {
35 | "types": "./dist/nuxt.d.ts",
36 | "require": "./dist/nuxt.js",
37 | "import": "./dist/nuxt.mjs"
38 | },
39 | "./types": {
40 | "types": "./dist/types.d.ts",
41 | "require": "./dist/types.cjs",
42 | "import": "./dist/types.js"
43 | }
44 | },
45 | "main": "dist/index.js",
46 | "module": "dist/index.mjs",
47 | "types": "index.d.ts",
48 | "typesVersions": {
49 | "*": {
50 | "*": [
51 | "./dist/*"
52 | ]
53 | }
54 | },
55 | "files": [
56 | "dist"
57 | ],
58 | "scripts": {
59 | "build": "tsup",
60 | "build:fix": "tsx scripts/postbuild.ts"
61 | },
62 | "dependencies": {
63 | "kolorist": "^1.8.0",
64 | "unplugin": "^1.5.0",
65 | "vite-plugin-vue-inspector": "workspace:*"
66 | },
67 | "devDependencies": {
68 | "chalk": "^5.3.0",
69 | "fast-glob": "^3.3.1"
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/packages/unplugin/scripts/postbuild.ts:
--------------------------------------------------------------------------------
1 | import { basename, dirname, resolve } from 'path'
2 | import { promises as fs } from 'fs'
3 | import { fileURLToPath } from 'url'
4 | import fg from 'fast-glob'
5 | import chalk from 'chalk'
6 |
7 | async function run() {
8 | // fix cjs exports
9 | const files = await fg('*.cjs', {
10 | ignore: ['chunk-*'],
11 | absolute: true,
12 | cwd: resolve(dirname(fileURLToPath(import.meta.url)), '../dist'),
13 | })
14 | for (const file of files) {
15 | console.log(chalk.cyan.inverse(' POST '), `Fix ${basename(file)}`)
16 | let code = await fs.readFile(file, 'utf8')
17 | code = code.replace('exports.default =', 'module.exports =')
18 | code += 'exports.default = module.exports;'
19 | await fs.writeFile(file, code)
20 | }
21 | }
22 |
23 | run()
24 |
--------------------------------------------------------------------------------
/packages/unplugin/src/index.ts:
--------------------------------------------------------------------------------
1 | import { createUnplugin } from 'unplugin'
2 | import VitePluginInspector from 'vite-plugin-vue-inspector'
3 | import type { Options } from './types'
4 |
5 | export default createUnplugin((options) => {
6 | const plugins = VitePluginInspector(options) as any
7 | return [
8 | {
9 | name: 'unplugin-vue-inspector',
10 | vite: plugins[0],
11 | },
12 | {
13 | name: 'unplugin-vue-inspector:post',
14 | vite: plugins[1],
15 | },
16 | ]
17 | })
18 |
--------------------------------------------------------------------------------
/packages/unplugin/src/nuxt.ts:
--------------------------------------------------------------------------------
1 | import { green, yellow } from 'kolorist'
2 | import { DEFAULT_INSPECTOR_OPTIONS, normalizeComboKeyPrint } from 'vite-plugin-vue-inspector'
3 | import type { Options } from './types'
4 | import unplugin from '.'
5 |
6 | export default (options: Options, nuxt: any) => {
7 | nuxt.hook('vite:extendConfig', async (config: any) => {
8 | config.plugins = config.plugins || []
9 | config.plugins.push(...unplugin.vite({
10 | appendTo: /\/entry\.m?js$/,
11 | ...options,
12 | }))
13 | })
14 | let printed = false
15 | nuxt.hook('vite:serverCreated', () => {
16 | const normalizedOptions = { ...DEFAULT_INSPECTOR_OPTIONS, ...options }
17 | const { toggleComboKey } = normalizedOptions
18 | if (printed || !toggleComboKey)
19 | return
20 | const keys = normalizeComboKeyPrint(toggleComboKey)
21 | console.log(` ${'> Vue Inspector'}: ${green(`Press ${yellow(keys)} in App to toggle the Inspector`)}\n`)
22 | printed = true
23 | })
24 | }
25 |
--------------------------------------------------------------------------------
/packages/unplugin/src/types.ts:
--------------------------------------------------------------------------------
1 | import type { VitePluginInspectorOptions } from 'vite-plugin-vue-inspector'
2 | export interface Options extends VitePluginInspectorOptions {
3 | }
4 |
--------------------------------------------------------------------------------
/packages/unplugin/src/vite.ts:
--------------------------------------------------------------------------------
1 | import unplugin from '.'
2 |
3 | export default unplugin.vite
4 |
--------------------------------------------------------------------------------
/packages/unplugin/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import type { Options } from 'tsup'
2 |
3 | export default {
4 | entryPoints: [
5 | 'src/*.ts',
6 | ],
7 | clean: true,
8 | format: ['cjs', 'esm'],
9 | dts: true,
10 | shims: true,
11 | onSuccess: 'npm run build:fix',
12 | }
13 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'packages/**/*'
3 |
4 |
--------------------------------------------------------------------------------
/public/install-vscode-cli.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webfansplz/vite-plugin-vue-inspector/d02c0569aaf4623b2f5391b4739b1188941f82af/public/install-vscode-cli.png
--------------------------------------------------------------------------------
/public/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webfansplz/vite-plugin-vue-inspector/d02c0569aaf4623b2f5391b4739b1188941f82af/public/preview.gif
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "preserve",
4 | "target": "esnext",
5 | "module": "esnext",
6 | "esModuleInterop": true,
7 | "moduleResolution": "node",
8 | "resolveJsonModule": true,
9 | "allowJs": true
10 | }
11 | }
12 |
--------------------------------------------------------------------------------