vite-plugin-vue-devtools 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/vite.cjs

@@ -13757,7 +13757,8 @@ function getVueDevtoolsPath() {
 }
 const defaultOptions = {
   appendTo: "",
-  analyze: compiler.analyzeOptionsDefault
+  analyze: compiler.analyzeOptionsDefault,
+  openInEditorHost: false
 };
 function mergeOptions(options) {
   return Object.assign({}, defaultOptions, options);
@@ -13868,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

@@ -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

@@ -13731,7 +13731,8 @@ function getVueDevtoolsPath() {
 }
 const defaultOptions = {
   appendTo: "",
-  analyze: analyzeOptionsDefault
+  analyze: analyzeOptionsDefault,
+  openInEditorHost: false
 };
 function mergeOptions(options) {
   return Object.assign({}, defaultOptions, options);
@@ -13842,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

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-vue-devtools",
   "type": "module",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "A vite plugin for Vue DevTools",
   "author": "webfansplz",
   "license": "MIT",
@@ -52,8 +52,8 @@
     "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.3"
+    "vite-plugin-vue-inspector": "^3.5.0",
+    "@vite-plugin-vue-devtools/core": "1.0.0-beta.5"
   },
   "devDependencies": {
     "@types/node": "^20.4.4",

package/src/views/ComponentInspector.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)
+  }
+}

package/dist/client/assets/rerender-trace-6c5229c1.css

@@ -1,14 +0,0 @@
-
-@keyframes loading-c4e9e7b3 {
-0%,
-  100% {
-    opacity: 1;
-    transform: scale(1);
-}
-50% {
-    opacity: 0.3;
-}
-}
-.loading-animation[data-v-c4e9e7b3] {
-  animation: loading-c4e9e7b3 1.5s infinite;
-}