npm - vite-plugin-vue-devtools - Versions diffs - 1.0.0-beta.2 → 1.0.0-beta.4 - Mend

vite-plugin-vue-devtools 1.0.0-beta.2 → 1.0.0-beta.4

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 (45) hide show

package/dist/client/assets/{timeline-d5f5f884.js → timeline-252da334.js} RENAMED Viewed

@@ -1,12 +1,12 @@
-import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-eaba3733.js';
-import { _ as __unplugin_components_0 } from './PanelGrids-15f9a979.js';
-import { p as pushScopeId, a as popScopeId, n as nextTick, o as openBlock, c as createBlock, w as withScopeId, m as markRaw, s as shallowReactive, r as resolveComponent, b as resolveDirective, d as withDirectives, e as createElementBlock, f as renderSlot, g as createCommentVNode, h as withCtx, F as Fragment, i as renderList, j as resolveDynamicComponent, k as mergeProps, t as toHandlers, l as normalizeStyle, q as normalizeClass, u as createVNode, v as defineComponent, x as createBaseVNode, y as toDisplayString, z as unref, _ as __unplugin_components_7, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-55dde797.js';
-import { d as dayjs } from './dayjs.min-3c1187ae.js';
-import { g, M } from './splitpanes.es-ca653775.js';
-import './Icon.vue_vue_type_script_setup_true_lang-5b8e75b9.js';
-import './index-ef144caa.js';
-import './IconButton.vue_vue_type_script_setup_true_lang-1af9c374.js';
-import './_commonjsHelpers-d60b99f1.js';
+import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-65d71ce4.js';
+import { _ as __unplugin_components_0 } from './PanelGrids-3cdf73ad.js';
+import { p as pushScopeId, a as popScopeId, n as nextTick, o as openBlock, c as createBlock, w as withScopeId, m as markRaw, s as shallowReactive, r as resolveComponent, b as resolveDirective, d as withDirectives, e as createElementBlock, f as renderSlot, g as createCommentVNode, h as withCtx, F as Fragment, i as renderList, j as resolveDynamicComponent, k as mergeProps, t as toHandlers, l as normalizeStyle, q as normalizeClass, u as createVNode, v as defineComponent, x as createBaseVNode, y as toDisplayString, z as unref, _ as __unplugin_components_7, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-6b2b8b6a.js';
+import { d as dayjs } from './dayjs.min-ff0bd3aa.js';
+import { g, M } from './splitpanes.es-16f3d333.js';
+import './Icon.vue_vue_type_script_setup_true_lang-4a8fe583.js';
+import './index-5266a399.js';
+import './IconButton.vue_vue_type_script_setup_true_lang-7533112d.js';
+import './_commonjsHelpers-7e83dbf2.js';
 function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;

package/dist/client/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <title>Vue DevTools</title>
-  <script type="module" crossorigin src="./assets/index-55dde797.js"></script>
-  <link rel="stylesheet" href="./assets/index-b16c49d4.css">
+  <script type="module" crossorigin src="./assets/index-6b2b8b6a.js"></script>
+  <link rel="stylesheet" href="./assets/index-f4f0a93b.css">
 </head>
 <body>
   <div id="app"></div>

package/dist/vite.cjs CHANGED Viewed

@@ -16,10 +16,10 @@ const require$$0$3 = require('stream');
 const require$$2 = require('events');
 const require$$0$4 = require('fs');
 const fs$1$1 = require('node:fs');
+const process$2 = require('node:process');
 const require$$0$7 = require('readline');
 const node_buffer = require('node:buffer');
 const childProcess = require('node:child_process');
-const process$2 = require('node:process');
 const require$$0$2$1 = require('child_process');
 const os$1$1 = require('node:os');
 const require$$0$3$1 = require('assert');
@@ -42,9 +42,9 @@ const require$$0__default$3 = /*#__PURE__*/_interopDefaultCompat(require$$0$3);
 const require$$2__default = /*#__PURE__*/_interopDefaultCompat(require$$2);
 const require$$0__default$4 = /*#__PURE__*/_interopDefaultCompat(require$$0$4);
 const fs$1__default = /*#__PURE__*/_interopDefaultCompat(fs$1$1);
+const process$2__default = /*#__PURE__*/_interopDefaultCompat(process$2);
 const require$$0$7__default = /*#__PURE__*/_interopDefaultCompat(require$$0$7);
 const childProcess__default = /*#__PURE__*/_interopDefaultCompat(childProcess);
-const process$2__default = /*#__PURE__*/_interopDefaultCompat(process$2);
 const require$$0$2__default = /*#__PURE__*/_interopDefaultCompat(require$$0$2$1);
 const os$1__default = /*#__PURE__*/_interopDefaultCompat(os$1$1);
 const require$$0$3__default = /*#__PURE__*/_interopDefaultCompat(require$$0$3$1);
@@ -6646,6 +6646,8 @@ var settings = {};
 	        if (this.stats) {
 	            this.objectMode = true;
 	        }
+	        // Remove the cast to the array in the next major (#404).
+	        this.ignore = [].concat(this.ignore);
 	    }
 	    _getValue(option, value) {
 	        return option === undefined ? value : option;
@@ -8035,8 +8037,8 @@ async function findUp(name, options = {}) {
 	return matches[0];
 }
-process.env.NI_CONFIG_FILE;
-const home = process.platform === "win32" ? process.env.USERPROFILE : process.env.HOME;
+process$2__default.env.NI_CONFIG_FILE;
+const home = process$2__default.platform === "win32" ? process$2__default.env.USERPROFILE : process$2__default.env.HOME;
 path$3__default.join(home || "~/", ".nirc");
 var crossSpawn$1 = {exports: {}};
@@ -13634,8 +13636,8 @@ async function detect({ autoInstall, programmatic, cwd } = {}) {
     if (!autoInstall) {
       console.warn(`[ni] Detected ${agent} but it doesn't seem to be installed.
 `);
-      if (process.env.CI)
-        process.exit(1);
+      if (process$2__default.env.CI)
+        process$2__default.exit(1);
       const link = terminalLink(agent, INSTALL_PAGE[agent]);
       const { tryInstall } = await prompts$1({
         name: "tryInstall",
@@ -13643,7 +13645,7 @@ async function detect({ autoInstall, programmatic, cwd } = {}) {
         message: `Would you like to globally install ${link}?`
       });
       if (!tryInstall)
-        process.exit(1);
+        process$2__default.exit(1);
     }
     await execaCommand(`npm i -g ${agent}${version ? `@${version}` : ""}`, { stdio: "inherit", cwd });
   }
@@ -13663,7 +13665,8 @@ function getCommand(agent, command, args = []) {
     return c(args);
   if (!c)
     throw new UnsupportedCommand({ agent, command });
-  return c.replace("{0}", args.join(" ")).trim();
+  const quote = (arg) => !arg.startsWith("--") && arg.includes(" ") ? JSON.stringify(arg) : arg;
+  return c.replace("{0}", args.map(quote).join(" ")).trim();
 }
 const parseNi = (agent, args, ctx) => {
   if (agent === "bun")
@@ -13754,7 +13757,8 @@ function getVueDevtoolsPath() {
 }
 const defaultOptions = {
   appendTo: "",
-  analyze: compiler.analyzeOptionsDefault
+  analyze: compiler.analyzeOptionsDefault,
+  openInEditorHost: false
 };
 function mergeOptions(options) {
   return Object.assign({}, defaultOptions, options);
@@ -13865,7 +13869,9 @@ import 'virtual:vue-devtools-path:app.js'`;
     inspect,
     VueInspector__default({
       toggleComboKey: "",
-      toggleButtonVisibility: "never"
+      toggleButtonVisibility: "never",
+      openInEditorHost: pluginOptions.openInEditorHost,
+      ...pluginOptions.appendTo ? { appendTo: pluginOptions.appendTo } : {}
     })
   ];
 }

package/dist/vite.d.ts CHANGED Viewed

@@ -18,6 +18,11 @@ interface VitePluginVueDevToolsOptions {
      * }
     */
     analyze?: Partial<AnalyzeOptions>;
+    /**
+    * Customize openInEditor host (e.g. http://localhost:3000)
+    * @default false
+    */
+    openInEditorHost?: string | false;
 }
 declare function VitePluginVueDevTools(options?: VitePluginVueDevToolsOptions): PluginOption;

package/dist/vite.mjs CHANGED Viewed

@@ -14,10 +14,10 @@ import require$$0$3 from 'stream';
 import require$$2 from 'events';
 import require$$0$4 from 'fs';
 import fs$1$1, { promises, createWriteStream, createReadStream } from 'node:fs';
+import process$2 from 'node:process';
 import require$$0$7 from 'readline';
 import { Buffer as Buffer$1 } from 'node:buffer';
 import childProcess, { ChildProcess } from 'node:child_process';
-import process$2 from 'node:process';
 import require$$0$2$1 from 'child_process';
 import os$1$1, { constants as constants$5 } from 'node:os';
 import require$$0$3$1 from 'assert';
@@ -6620,6 +6620,8 @@ var settings = {};
 	        if (this.stats) {
 	            this.objectMode = true;
 	        }
+	        // Remove the cast to the array in the next major (#404).
+	        this.ignore = [].concat(this.ignore);
 	    }
 	    _getValue(option, value) {
 	        return option === undefined ? value : option;
@@ -8009,8 +8011,8 @@ async function findUp(name, options = {}) {
 	return matches[0];
 }
-process.env.NI_CONFIG_FILE;
-const home = process.platform === "win32" ? process.env.USERPROFILE : process.env.HOME;
+process$2.env.NI_CONFIG_FILE;
+const home = process$2.platform === "win32" ? process$2.env.USERPROFILE : process$2.env.HOME;
 path$3$1.join(home || "~/", ".nirc");
 var crossSpawn$1 = {exports: {}};
@@ -13608,8 +13610,8 @@ async function detect({ autoInstall, programmatic, cwd } = {}) {
     if (!autoInstall) {
       console.warn(`[ni] Detected ${agent} but it doesn't seem to be installed.
 `);
-      if (process.env.CI)
-        process.exit(1);
+      if (process$2.env.CI)
+        process$2.exit(1);
       const link = terminalLink(agent, INSTALL_PAGE[agent]);
       const { tryInstall } = await prompts$1({
         name: "tryInstall",
@@ -13617,7 +13619,7 @@ async function detect({ autoInstall, programmatic, cwd } = {}) {
         message: `Would you like to globally install ${link}?`
       });
       if (!tryInstall)
-        process.exit(1);
+        process$2.exit(1);
     }
     await execaCommand(`npm i -g ${agent}${version ? `@${version}` : ""}`, { stdio: "inherit", cwd });
   }
@@ -13637,7 +13639,8 @@ function getCommand(agent, command, args = []) {
     return c(args);
   if (!c)
     throw new UnsupportedCommand({ agent, command });
-  return c.replace("{0}", args.join(" ")).trim();
+  const quote = (arg) => !arg.startsWith("--") && arg.includes(" ") ? JSON.stringify(arg) : arg;
+  return c.replace("{0}", args.map(quote).join(" ")).trim();
 }
 const parseNi = (agent, args, ctx) => {
   if (agent === "bun")
@@ -13728,7 +13731,8 @@ function getVueDevtoolsPath() {
 }
 const defaultOptions = {
   appendTo: "",
-  analyze: analyzeOptionsDefault
+  analyze: analyzeOptionsDefault,
+  openInEditorHost: false
 };
 function mergeOptions(options) {
   return Object.assign({}, defaultOptions, options);
@@ -13839,7 +13843,9 @@ import 'virtual:vue-devtools-path:app.js'`;
     inspect,
     VueInspector({
       toggleComboKey: "",
-      toggleButtonVisibility: "never"
+      toggleButtonVisibility: "never",
+      openInEditorHost: pluginOptions.openInEditorHost,
+      ...pluginOptions.appendTo ? { appendTo: pluginOptions.appendTo } : {}
     })
   ];
 }

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-vue-devtools",
   "type": "module",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description": "A vite plugin for Vue DevTools",
   "author": "webfansplz",
   "license": "MIT",
@@ -52,12 +52,12 @@
     "execa": "^7.1.1",
     "sirv": "^2.0.3",
     "vite-plugin-inspect": "^0.7.33",
-    "vite-plugin-vue-inspector": "^3.4.2",
-    "@vite-plugin-vue-devtools/core": "1.0.0-beta.2"
+    "vite-plugin-vue-inspector": "^3.5.0",
+    "@vite-plugin-vue-devtools/core": "1.0.0-beta.4"
   },
   "devDependencies": {
-    "@types/node": "^20.4.2",
-    "fast-glob": "^3.3.0",
+    "@types/node": "^20.4.4",
+    "fast-glob": "^3.3.1",
     "image-meta": "^0.1.1",
     "pathe": "^1.1.1"
   },

package/src/views/ComponentInspector.vue CHANGED Viewed

@@ -28,6 +28,7 @@ const inspectorCardStyle = computed(() => ({ top: props.bounds.top < 35 ? 0 : '-
     <span class="vue-devtools-component-inspector-card" :style="inspectorCardStyle">
       &lt;{{ name }}&gt;
       <i>{{ Math.round(bounds.width * 100) / 100 }} x {{ Math.round(bounds.height * 100) / 100 }}</i>
+      <slot name="header-extra" />
     </span>
   </div>
 </template>

package/src/views/Main.vue CHANGED Viewed

@@ -6,8 +6,9 @@ import vueDevToolsOptions from 'virtual:vue-devtools-options'
 import { DevToolsHooks, collectDevToolsHookBuffer } from '@vite-plugin-vue-devtools/core'
 import Frame from './FrameBox.vue'
 import ComponentInspector from './ComponentInspector.vue'
-import { useHighlightComponent, useIframe, useInspector, usePanelVisible, usePiPMode, usePosition } from './composables'
+import { useHighlightComponent, useIframe, useInspector, usePanelVisible, usePiPMode, usePosition, useRerenderHighlight } from './composables'
 import { checkIsSafari, useColorScheme, usePreferredColorScheme, warn } from './utils'
+import RerenderIndicator from './RerenderIndicator.vue'
 const props = defineProps({
   hook: {
@@ -79,6 +80,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
 // Picture-in-Picture mode
 const { popup } = usePiPMode(getIframe, hook)
 const { overlayVisible, name: componentName, bounds, highlight, unHighlight } = useHighlightComponent()
+const { updateRerenderHighlightInfo } = useRerenderHighlight()
 async function setupClient(iframe: HTMLIFrameElement) {
   const injection: any = iframe?.contentWindow?.__VUE_DEVTOOLS_VIEW__
@@ -124,6 +126,9 @@ async function setupClient(iframe: HTMLIFrameElement) {
         }, 2000)
       },
     },
+    rerenderHighlight: {
+      updateInfo: updateRerenderHighlightInfo,
+    },
   })
 }
@@ -284,6 +289,7 @@ collectHookBuffer()
   </div>
   <!-- component inspector -->
   <ComponentInspector v-if="overlayVisible" :bounds="bounds" :name="componentName" />
+  <RerenderIndicator />
 </template>
 <style scoped>

package/src/views/RerenderIndicator.vue ADDED Viewed

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import ComponentInspector from './ComponentInspector.vue'
+import { useRerenderHighlight } from './composables'
+const { rerenderHighlightMap } = useRerenderHighlight()
+const colors = [
+  ['#ff5555', 50],
+  ['#fff888', 20],
+] as const
+function getColors(times: number) {
+  const [color] = colors.find(([_, t]) => times >= t) || '#fff'
+  return color as string
+}
+</script>
+<template>
+  <template v-for="[uid, { bound, rerenderCount, name }] in rerenderHighlightMap.entries()" :key="uid">
+    <ComponentInspector
+      :bounds="bound"
+      :name="name"
+    >
+      <template #header-extra>
+        <span
+          v-if="rerenderCount"
+        >
+          (Rerender Count: <span
+            :style="{
+              color: getColors(rerenderCount),
+            }"
+          >{{ rerenderCount + 1 }})</span>
+        </span>
+      </template>
+    </ComponentInspector>
+  </template>
+</template>

package/src/views/composables.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { computed, onMounted, reactive, ref, shallowRef, watchEffect } from 'vue'
 import type { CSSProperties, Ref } from 'vue'
-import { clamp, useObjectStorage, useScreenSafeArea, useWindowEventListener, warn } from './utils'
+import { clamp, createDebounceFn, useObjectStorage, useScreenSafeArea, useWindowEventListener, warn } from './utils'
 interface DevToolsFrameState {
   width: number
@@ -474,3 +474,45 @@ export function useHighlightComponent() {
     unHighlight,
   }
 }
+// use rerender highlight
+interface RerenderHighlightData {
+  name: string
+  rerenderCount: number
+  bound: {
+    width: number
+    height: number
+    left: number
+    top: number
+  }
+  debounceFn: () => void
+}
+const rerenderHighlightMap = ref<Map</* component instance uid */string, RerenderHighlightData>>(new Map())
+function updateRerenderHighlightInfo(uid: string, name: string, bound: RerenderHighlightData['bound']) {
+  const data = rerenderHighlightMap.value.get(uid)
+  if (!data) {
+    const debounceFn = createDebounceFn(() => {
+      rerenderHighlightMap.value.delete(uid)
+    }, 3000)
+    rerenderHighlightMap.value.set(uid, {
+      rerenderCount: 0,
+      bound,
+      debounceFn,
+      name,
+    })
+    debounceFn()
+    return
+  }
+  data.rerenderCount += 1
+  data.debounceFn()
+}
+export function useRerenderHighlight() {
+  return {
+    rerenderHighlightMap,
+    updateRerenderHighlightInfo,
+  }
+}

package/src/views/utils.ts CHANGED Viewed

@@ -226,3 +226,16 @@ export function usePreferredColorScheme() {
   return computed(() => isDark.value ? 'dark' : 'light')
 }
+export function createDebounceFn<const P, T>(fn: (this: T, ...args: P[]) => void, delay = 100) {
+  let timer: any | null = null
+  return function (this: T, ...args: P[]) {
+    if (timer)
+      clearTimeout(timer)
+    timer = setTimeout(() => {
+      fn.apply(this, args)
+      timer = null
+    }, delay)
+  }
+}