vite-plugin-vue-devtools 0.0.22 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/README.md +15 -1
  2. package/dist/client/assets/{IframeView.vue_vue_type_script_setup_true_lang-7a782b7f.js → IframeView.vue_vue_type_script_setup_true_lang-6fd9a85f.js} +22 -4
  3. package/dist/client/assets/{VCard-1a6832d4.js → VCard-6f5067b2.js} +1 -1
  4. package/dist/client/assets/{VIcon.vue_vue_type_script_setup_true_lang-13ffd017.js → VIcon.vue_vue_type_script_setup_true_lang-6118ca39.js} +3 -3
  5. package/dist/client/assets/{VIconButton.vue_vue_type_script_setup_true_lang-186dde54.js → VIconButton.vue_vue_type_script_setup_true_lang-ae9230b8.js} +5 -5
  6. package/dist/client/assets/{VIconTitle.vue_vue_type_script_setup_true_lang-fc3a2149.js → VIconTitle.vue_vue_type_script_setup_true_lang-b0f889c4.js} +6 -6
  7. package/dist/client/assets/{VPanelGrids-2dc8992e.js → VPanelGrids-99263922.js} +1 -1
  8. package/dist/client/assets/{VTextInput.vue_vue_type_script_setup_true_lang-535b6d73.js → VTextInput.vue_vue_type_script_setup_true_lang-a9a84967.js} +19 -19
  9. package/dist/client/assets/{__inspecting-f04aca07.js → __inspecting-c48a44bd.js} +2 -2
  10. package/dist/client/assets/{assets-e128fa14.js → assets-da7375f2.js} +37 -37
  11. package/dist/client/assets/{components-5a527785.js → components-9088ee32.js} +16 -16
  12. package/dist/client/assets/{documentations-f1b6f767.js → documentations-a53fc5be.js} +20 -20
  13. package/dist/client/assets/{graph-9f30454f.js → graph-1d314269.js} +2 -2
  14. package/dist/client/assets/{index-ee58a812.js → index-2f57441c.js} +5982 -6405
  15. package/dist/client/assets/{index-f8c90594.css → index-673f3336.css} +1 -1
  16. package/dist/client/assets/{index-347d3959.js → index-de9a3e22.js} +1 -1
  17. package/dist/client/assets/{inspect-400c2b70.js → inspect-4dd467ef.js} +3 -3
  18. package/dist/client/assets/{npm-cd00dfa9.js → npm-aa40787f.js} +7 -7
  19. package/dist/client/assets/{overview-57c2cbd3.js → overview-3d7e9cc1.js} +5 -5
  20. package/dist/client/assets/{pages-3d8588ac.js → pages-2a327cb7.js} +12 -12
  21. package/dist/client/assets/{pinia-b4b2eaba.js → pinia-76305a62.js} +5 -5
  22. package/dist/client/assets/{routes-8e26a6ac.js → routes-eb449762.js} +7 -7
  23. package/dist/client/assets/{rpc-e28ef409.js → rpc-0cf10553.js} +3 -2
  24. package/dist/client/assets/{settings-b50a459c.js → settings-16b21837.js} +33 -11
  25. package/dist/client/assets/{splitpanes.es-5f60be7d.js → splitpanes.es-d9f337b4.js} +20 -20
  26. package/dist/client/assets/{timeline-99b31af4.js → timeline-b35c200b.js} +13 -13
  27. package/dist/client/index.html +2 -2
  28. package/dist/index.cjs +15 -4
  29. package/dist/index.d.ts +11 -2
  30. package/dist/index.mjs +15 -4
  31. package/package.json +22 -22
  32. package/src/node/Container.vue +54 -20
package/dist/client/index.html CHANGED
@@ -5,8 +5,8 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
7
7
  <title>Vue DevTools</title>
8
- <script type="module" crossorigin src="./assets/index-ee58a812.js"></script>
9
- <link rel="stylesheet" href="./assets/index-f8c90594.css">
8
+ <script type="module" crossorigin src="./assets/index-2f57441c.js"></script>
9
+ <link rel="stylesheet" href="./assets/index-673f3336.css">
10
10
  </head>
11
11
  <body>
12
12
  <div id="app"></div>
package/dist/index.cjs CHANGED
@@ -13676,7 +13676,7 @@ function getVueDevtoolsPath() {
13676
13676
  const pluginPath = vite.normalizePath(path$3__default.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href)))));
13677
13677
  return pluginPath.replace(/\/dist$/, "//src/node");
13678
13678
  }
13679
- function PluginVueDevtools() {
13679
+ function VitePluginVueDevTools(options = { appendTo: "" }) {
13680
13680
  const vueDevtoolsPath = getVueDevtoolsPath();
13681
13681
  const inspect = Inspect__default({
13682
13682
  silent: true
@@ -13695,8 +13695,8 @@ function PluginVueDevtools() {
13695
13695
  getImageMeta,
13696
13696
  getTextAssetContent,
13697
13697
  getPackages: () => getPackages(config.root),
13698
- installPackage: (packages, options = {}) => installPackage(packages, {
13699
- ...options,
13698
+ installPackage: (packages, options2 = {}) => installPackage(packages, {
13699
+ ...options2,
13700
13700
  cwd: config.root,
13701
13701
  callback: (type, data) => {
13702
13702
  if (type === "data")
@@ -13729,7 +13729,18 @@ function PluginVueDevtools() {
13729
13729
  if (id === "virtual:vue-devtools-options")
13730
13730
  return `export default ${JSON.stringify({ base: config.base })}`;
13731
13731
  },
13732
+ transform(code, id) {
13733
+ const { appendTo } = options;
13734
+ if (!appendTo)
13735
+ return;
13736
+ const [filename] = id.split("?", 2);
13737
+ if (typeof appendTo === "string" && filename.endsWith(appendTo) || appendTo instanceof RegExp && appendTo.test(filename))
13738
+ return { code: `${code}
13739
+ import 'virtual:vue-devtools-path:app.js'` };
13740
+ },
13732
13741
  transformIndexHtml(html) {
13742
+ if (options.appendTo)
13743
+ return;
13733
13744
  return {
13734
13745
  html,
13735
13746
  tags: [
@@ -13757,4 +13768,4 @@ function PluginVueDevtools() {
13757
13768
  ];
13758
13769
  }
13759
13770
 
13760
- module.exports = PluginVueDevtools;
13771
+ module.exports = VitePluginVueDevTools;
package/dist/index.d.ts CHANGED
@@ -1,5 +1,14 @@
1
1
  import { PluginOption } from 'vite';
2
2
 
3
- declare function PluginVueDevtools(): PluginOption;
3
+ interface VitePluginVueDevToolsOptions {
4
+ /**
5
+ * append an import to the module id ending with `appendTo` instead of adding a script into body
6
+ * useful for projects that do not use html file as an entry
7
+ *
8
+ * WARNING: only set this if you know exactly what it does.
9
+ */
10
+ appendTo?: string | RegExp;
11
+ }
12
+ declare function VitePluginVueDevTools(options?: VitePluginVueDevToolsOptions): PluginOption;
4
13
 
5
- export { PluginVueDevtools as default };
14
+ export { VitePluginVueDevToolsOptions, VitePluginVueDevTools as default };
package/dist/index.mjs CHANGED
@@ -13650,7 +13650,7 @@ function getVueDevtoolsPath() {
13650
13650
  const pluginPath = normalizePath(path$3$1.dirname(fileURLToPath(import.meta.url)));
13651
13651
  return pluginPath.replace(/\/dist$/, "//src/node");
13652
13652
  }
13653
- function PluginVueDevtools() {
13653
+ function VitePluginVueDevTools(options = { appendTo: "" }) {
13654
13654
  const vueDevtoolsPath = getVueDevtoolsPath();
13655
13655
  const inspect = Inspect({
13656
13656
  silent: true
@@ -13669,8 +13669,8 @@ function PluginVueDevtools() {
13669
13669
  getImageMeta,
13670
13670
  getTextAssetContent,
13671
13671
  getPackages: () => getPackages(config.root),
13672
- installPackage: (packages, options = {}) => installPackage(packages, {
13673
- ...options,
13672
+ installPackage: (packages, options2 = {}) => installPackage(packages, {
13673
+ ...options2,
13674
13674
  cwd: config.root,
13675
13675
  callback: (type, data) => {
13676
13676
  if (type === "data")
@@ -13703,7 +13703,18 @@ function PluginVueDevtools() {
13703
13703
  if (id === "virtual:vue-devtools-options")
13704
13704
  return `export default ${JSON.stringify({ base: config.base })}`;
13705
13705
  },
13706
+ transform(code, id) {
13707
+ const { appendTo } = options;
13708
+ if (!appendTo)
13709
+ return;
13710
+ const [filename] = id.split("?", 2);
13711
+ if (typeof appendTo === "string" && filename.endsWith(appendTo) || appendTo instanceof RegExp && appendTo.test(filename))
13712
+ return { code: `${code}
13713
+ import 'virtual:vue-devtools-path:app.js'` };
13714
+ },
13706
13715
  transformIndexHtml(html) {
13716
+ if (options.appendTo)
13717
+ return;
13707
13718
  return {
13708
13719
  html,
13709
13720
  tags: [
@@ -13731,4 +13742,4 @@ function PluginVueDevtools() {
13731
13742
  ];
13732
13743
  }
13733
13744
 
13734
- export { PluginVueDevtools as default };
13745
+ export { VitePluginVueDevTools as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-vue-devtools",
3
- "version": "0.0.22",
3
+ "version": "0.1.1",
4
4
  "packageManager": "pnpm@8.4.0",
5
5
  "description": "A vite plugin for Vue Devtools",
6
6
  "author": "webfansplz",
@@ -56,31 +56,31 @@
56
56
  },
57
57
  "dependencies": {
58
58
  "@vueuse/core": "^10.1.2",
59
- "algoliasearch": "^4.17.0",
60
- "birpc": "^0.2.11",
59
+ "algoliasearch": "^4.17.1",
60
+ "birpc": "^0.2.12",
61
61
  "execa": "^7.1.1",
62
62
  "nanoid": "^4.0.2",
63
63
  "sirv": "^2.0.3",
64
64
  "splitpanes": "^3.1.5",
65
65
  "vite-hot-client": "^0.2.1",
66
- "vite-plugin-inspect": "^0.7.26",
67
- "vite-plugin-vue-inspector": "^3.4.1",
68
- "vue-router": "^4.1.6",
66
+ "vite-plugin-inspect": "^0.7.28",
67
+ "vite-plugin-vue-inspector": "^3.4.2",
68
+ "vue-router": "^4.2.2",
69
69
  "xterm": "^5.1.0",
70
70
  "xterm-addon-fit": "^0.7.0"
71
71
  },
72
72
  "devDependencies": {
73
- "@algolia/client-search": "^4.17.0",
73
+ "@algolia/client-search": "^4.17.1",
74
74
  "@antfu/eslint-config": "^0.38.5",
75
75
  "@antfu/ni": "^0.21.3",
76
- "@iconify/json": "^2.2.61",
77
- "@nuxt/devtools-ui-kit": "^0.4.5",
76
+ "@iconify/json": "^2.2.71",
77
+ "@nuxt/devtools-ui-kit": "^0.5.5",
78
78
  "@types/codemirror": "^5.60.7",
79
- "@types/node": "^20.1.0",
79
+ "@types/node": "^20.2.5",
80
80
  "@types/splitpanes": "^2.2.1",
81
- "@unocss/eslint-config": "^0.51.12",
82
- "@unocss/reset": "^0.51.12",
83
- "@vitejs/plugin-vue": "^4.2.1",
81
+ "@unocss/eslint-config": "^0.52.5",
82
+ "@unocss/reset": "^0.52.5",
83
+ "@vitejs/plugin-vue": "^4.2.3",
84
84
  "bumpp": "^9.1.0",
85
85
  "codemirror": "^6.0.1",
86
86
  "codemirror-theme-vars": "^0.1.2",
@@ -94,21 +94,21 @@
94
94
  "npm-run-all": "^4.1.5",
95
95
  "ohash": "^1.1.2",
96
96
  "pathe": "^1.1.0",
97
- "pinia": "^2.0.35",
98
- "pnpm": "^8.4.0",
99
- "rimraf": "^5.0.0",
97
+ "pinia": "^2.1.3",
98
+ "pnpm": "^8.6.0",
99
+ "rimraf": "^5.0.1",
100
100
  "simple-git-hooks": "^2.8.1",
101
101
  "typescript": "^5.0.4",
102
102
  "unbuild": "^1.2.1",
103
- "unocss": "^0.51.12",
104
- "unplugin-auto-import": "^0.15.3",
105
- "unplugin-vue-components": "^0.24.1",
103
+ "unocss": "^0.52.5",
104
+ "unplugin-auto-import": "^0.16.4",
105
+ "unplugin-vue-components": "^0.25.0",
106
106
  "vis-data": "^7.1.6",
107
107
  "vis-network": "^9.1.6",
108
- "vite": "^4.3.5",
108
+ "vite": "^4.3.9",
109
109
  "vite-dev-rpc": "^0.1.2",
110
- "vite-plugin-pages": "^0.29.0",
111
- "vue": "^3.2.47",
110
+ "vite-plugin-pages": "^0.30.1",
111
+ "vue": "^3.3.4",
112
112
  "vue-virtual-scroller": "2.0.0-beta.8"
113
113
  },
114
114
  "simple-git-hooks": {
package/src/node/Container.vue CHANGED
@@ -378,42 +378,76 @@ onMounted(() => {
378
378
  togglePanel()
379
379
  })
380
380
  })
381
+
382
+ const toggleButtonRef = ref(null)
383
+ const modalRef = ref(null)
384
+
385
+ window.addEventListener('click', (event) => {
386
+ const modalEl = modalRef.value
387
+ const toggleButtonEl = toggleButtonRef.value
388
+ if (!modalEl || !toggleButtonEl || event.composedPath().includes(modalEl) || event.composedPath().includes(toggleButtonEl))
389
+ return
390
+ const frameState = localStorage.getItem('__vue-devtools-frame-state__')
391
+ if (frameState) {
392
+ const parsedFrameState = JSON.parse(frameState)
393
+ if (parsedFrameState.closeOnOutsideClick)
394
+ panelVisible.value = false
395
+ }
396
+ })
381
397
  </script>
382
398
 
383
399
  <template>
384
- <div class="vue-devtools-panel" :style="panelPosition">
400
+ <div ref="modalRef" class="vue-devtools-panel" :style="panelPosition">
385
401
  <!-- client -->
386
- <iframe ref="iframe" :src="clientUrl" :style="{
387
- 'pointer-events': isDragging ? 'none' : 'auto',
388
- }" @load="onLoad" />
402
+ <iframe
403
+ ref="iframe" :src="clientUrl" :style="{
404
+ 'pointer-events': isDragging ? 'none' : 'auto',
405
+ }" @load="onLoad"
406
+ />
389
407
  <!-- resize -->
390
408
  <template v-if="panelState.viewMode === 'default'">
391
409
  <template v-if="panelState.position !== 'top'">
392
410
  <div :class="resizeHorizontalClassName" :style="{ top: 0 }" @mousedown.prevent="toggleDragging('horizontal')" />
393
- <div v-if="panelState.position !== 'left'" :class="resizeCornerClassName"
394
- :style="{ top: 0, left: 0, cursor: 'nwse-resize' }" @mousedown.prevent="toggleDragging('both')" />
395
- <div v-if="panelState.position !== 'right'" :class="resizeCornerClassName"
396
- :style="{ top: 0, right: 0, cursor: 'nesw-resize' }" @mousedown.prevent="toggleDragging('both')" />
411
+ <div
412
+ v-if="panelState.position !== 'left'" :class="resizeCornerClassName"
413
+ :style="{ top: 0, left: 0, cursor: 'nwse-resize' }" @mousedown.prevent="toggleDragging('both')"
414
+ />
415
+ <div
416
+ v-if="panelState.position !== 'right'" :class="resizeCornerClassName"
417
+ :style="{ top: 0, right: 0, cursor: 'nesw-resize' }" @mousedown.prevent="toggleDragging('both')"
418
+ />
397
419
  </template>
398
420
 
399
421
  <template v-if="panelState.position !== 'bottom'">
400
- <div :class="resizeHorizontalClassName" :style="{ bottom: 0 }"
401
- @mousedown.prevent="toggleDragging('horizontal')" />
402
- <div v-if="panelState.position !== 'right'" :class="resizeCornerClassName"
403
- :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }" @mousedown.prevent="toggleDragging('both')" />
404
- <div v-if="panelState.position !== 'left'" :class="resizeCornerClassName"
405
- :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }" @mousedown.prevent="toggleDragging('both')" />
422
+ <div
423
+ :class="resizeHorizontalClassName" :style="{ bottom: 0 }"
424
+ @mousedown.prevent="toggleDragging('horizontal')"
425
+ />
426
+ <div
427
+ v-if="panelState.position !== 'right'" :class="resizeCornerClassName"
428
+ :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }" @mousedown.prevent="toggleDragging('both')"
429
+ />
430
+ <div
431
+ v-if="panelState.position !== 'left'" :class="resizeCornerClassName"
432
+ :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }" @mousedown.prevent="toggleDragging('both')"
433
+ />
406
434
  </template>
407
435
 
408
- <div v-if="panelState.position !== 'left'" :class="resizeVerticalClassName" :style="{ left: 0 }"
409
- @mousedown.prevent="toggleDragging('vertical')" />
410
- <div v-if="panelState.position !== 'right'" :class="resizeVerticalClassName" :style="{ right: 0 }"
411
- @mousedown.prevent="toggleDragging('vertical')" />
436
+ <div
437
+ v-if="panelState.position !== 'left'" :class="resizeVerticalClassName" :style="{ left: 0 }"
438
+ @mousedown.prevent="toggleDragging('vertical')"
439
+ />
440
+ <div
441
+ v-if="panelState.position !== 'right'" :class="resizeVerticalClassName" :style="{ right: 0 }"
442
+ @mousedown.prevent="toggleDragging('vertical')"
443
+ />
412
444
  </template>
413
445
  </div>
414
446
  <!-- toggle button -->
415
- <button class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition"
416
- @click.prevent="togglePanel">
447
+ <button
448
+ ref="toggleButtonRef" class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition"
449
+ @click.prevent="togglePanel"
450
+ >
417
451
  <svg viewBox="0 0 256 198" fill="none" xmlns="http://www.w3.org/2000/svg">
418
452
  <path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z" />
419
453
  <path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z" />