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

package/dist/client/assets/{overview-f7d1a936.js → overview-8f06d8d8.js}

@@ -1,8 +1,8 @@
-import { _ as __unplugin_components_0$1 } from './PanelGrids-09fbe816.js';
-import { a$ as ref, cc as rpc, a1 as computed, cb as routes, v as defineComponent, r as resolveComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, u as createVNode, y as toDisplayString, z as unref, cd as vueVersion, a9 as createTextVNode, e as createElementBlock, F as Fragment, ce as __unplugin_components_0, c3 as __unplugin_components_1, bL as _sfc_main$1 } from './index-056bb29c.js';
-import { i as isMacOS } from './index-57b0b18f.js';
+import { _ as __unplugin_components_0$1 } from './PanelGrids-3cdf73ad.js';
+import { a$ as ref, cc as rpc, a1 as computed, cb as routes, v as defineComponent, r as resolveComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, u as createVNode, y as toDisplayString, z as unref, cd as vueVersion, a9 as createTextVNode, e as createElementBlock, F as Fragment, ce as __unplugin_components_0, c3 as __unplugin_components_1, bL as _sfc_main$1 } from './index-6b2b8b6a.js';
+import { i as isMacOS } from './index-5266a399.js';
 
-const version = "1.0.0-beta.3";
+const version = "1.0.0-beta.4";
 
 /* Injected with object hook! */
 

package/dist/client/assets/{pages-26acd942.js → pages-2ad456d4.js}

@@ -1,8 +1,8 @@
-import { _ as __unplugin_components_3 } from './SectionBlock-740d82f0.js';
-import { v as defineComponent, a$ as ref, a1 as computed, r as resolveComponent, z as unref, o as openBlock, e as createElementBlock, x as createBaseVNode, y as toDisplayString, c as createBlock, h as withCtx, bG as withModifiers, F as Fragment, i as renderList, g as createCommentVNode, u as createVNode, a9 as createTextVNode, q as normalizeClass, bL as _sfc_main$4, c3 as __unplugin_components_1, aP as onMounted, ca as currentRoute, b_ as router, aC as isRef, bE as withKeys, cb as routes } from './index-056bb29c.js';
-import { _ as _sfc_main$3 } from './TextInput.vue_vue_type_script_setup_true_lang-217531ea.js';
-import './IconTitle.vue_vue_type_script_setup_true_lang-a710fbe0.js';
-import './Icon.vue_vue_type_script_setup_true_lang-bf37ec60.js';
+import { _ as __unplugin_components_3 } from './SectionBlock-0fb75671.js';
+import { v as defineComponent, a$ as ref, a1 as computed, r as resolveComponent, z as unref, o as openBlock, e as createElementBlock, x as createBaseVNode, y as toDisplayString, c as createBlock, h as withCtx, bG as withModifiers, F as Fragment, i as renderList, g as createCommentVNode, u as createVNode, a9 as createTextVNode, q as normalizeClass, bL as _sfc_main$4, c3 as __unplugin_components_1, aP as onMounted, ca as currentRoute, b_ as router, aC as isRef, bE as withKeys, cb as routes } from './index-6b2b8b6a.js';
+import { _ as _sfc_main$3 } from './TextInput.vue_vue_type_script_setup_true_lang-40607e18.js';
+import './IconTitle.vue_vue_type_script_setup_true_lang-bdc080e4.js';
+import './Icon.vue_vue_type_script_setup_true_lang-4a8fe583.js';
 
 const _hoisted_1$2 = {
   block: "",

package/dist/client/assets/{pinia-f75a2b94.js → pinia-1f4baab5.js}

@@ -1,9 +1,9 @@
-import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-ed4f449a.js';
-import { g, M } from './splitpanes.es-166029e0.js';
-import { v as defineComponent, a$ as ref, a1 as computed, c7 as piniaStoresCategory, bd as toRaw, c8 as piniaState, c9 as piniaGetters, z as unref, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, q as normalizeClass, y as toDisplayString, c as createBlock } from './index-056bb29c.js';
-import { p as pick } from './index-57b0b18f.js';
-import './Icon.vue_vue_type_script_setup_true_lang-bf37ec60.js';
-import './IconButton.vue_vue_type_script_setup_true_lang-9417e3da.js';
+import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-65d71ce4.js';
+import { g, M } from './splitpanes.es-16f3d333.js';
+import { v as defineComponent, a$ as ref, a1 as computed, c7 as piniaStoresCategory, bd as toRaw, c8 as piniaState, c9 as piniaGetters, z as unref, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, q as normalizeClass, y as toDisplayString, c as createBlock } from './index-6b2b8b6a.js';
+import { p as pick } from './index-5266a399.js';
+import './Icon.vue_vue_type_script_setup_true_lang-4a8fe583.js';
+import './IconButton.vue_vue_type_script_setup_true_lang-7533112d.js';
 
 const _hoisted_1 = {
   "h-screen": "",

package/dist/client/assets/rerender-trace-a8d6a8df.css

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

package/dist/client/assets/{rerender-trace-a3fe7edb.js → rerender-trace-e2a70cde.js}

@@ -1,9 +1,9 @@
-import { v as defineComponent, a$ as ref, c4 as DevToolsHooks, r as resolveComponent, o as openBlock, e as createElementBlock, x as createBaseVNode, u as createVNode, h as withCtx, z as unref, c as createBlock, a9 as createTextVNode, g as createCommentVNode, F as Fragment, i as renderList, c5 as useDevToolsClient, c6 as rootPath, _ as __unplugin_components_7, c3 as __unplugin_components_1, p as pushScopeId, a as popScopeId, y as toDisplayString, bJ as _export_sfc } from './index-056bb29c.js';
+import { v as defineComponent, a$ as ref, c4 as DevToolsHooks, r as resolveComponent, o as openBlock, e as createElementBlock, x as createBaseVNode, u as createVNode, h as withCtx, z as unref, c as createBlock, a9 as createTextVNode, g as createCommentVNode, F as Fragment, i as renderList, c5 as useDevToolsClient, c6 as rootPath, _ as __unplugin_components_7, c3 as __unplugin_components_1, p as pushScopeId, a as popScopeId, y as toDisplayString, bJ as _export_sfc } from './index-6b2b8b6a.js';
 import { d as dayjs } from './dayjs.min-ff0bd3aa.js';
-import { g as getSetupStateInfo, t as toRaw } from './data-1a736865.js';
+import { g as getInstanceName, a as getSetupStateInfo, t as toRaw } from './data-4774a5dd.js';
 import './_commonjsHelpers-7e83dbf2.js';
 
-const _withScopeId = (n) => (pushScopeId("data-v-c4e9e7b3"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-24f1b68d"), n = n(), popScopeId(), n);
 const _hoisted_1 = {
   "h-full": "",
   "w-full": "",
@@ -19,22 +19,26 @@ const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBase
   "text-xs": "",
   "op-50": ""
 }, " Clear ", -1));
-const _hoisted_5 = {
+const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("p", {
+  "text-xs": "",
+  "op-50": ""
+}, " Capture rerender elements ", -1));
+const _hoisted_6 = {
   key: 0,
   flex: "~ items-center justify-center",
   "h-screen": ""
 };
-const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("i", {
+const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("i", {
   class: "i-fluent:record-12-regular",
   text: "4.7",
   "cursor-pointer": "",
   "text-secondary": "",
   hover: "text-black dark:text-white"
 }, null, -1));
-const _hoisted_7 = [
-  _hoisted_6
+const _hoisted_8 = [
+  _hoisted_7
 ];
-const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("p", { flex: "~ items-center" }, [
+const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("p", { flex: "~ items-center" }, [
   /* @__PURE__ */ createTextVNode(" Click the clear button "),
   /* @__PURE__ */ createBaseVNode("span", {
     border: "~ base",
@@ -52,14 +56,32 @@ const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBase
   ]),
   /* @__PURE__ */ createTextVNode(" to clear the results. ")
 ], -1));
-const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("p", { "lh-5": "" }, [
+const _hoisted_10 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("p", { flex: "~ items-center" }, [
+  /* @__PURE__ */ createTextVNode(" Click the capture button "),
+  /* @__PURE__ */ createBaseVNode("span", {
+    border: "~ base",
+    "mx-1": "",
+    "inline-flex": "",
+    "items-center": "",
+    "justify-center": "",
+    p1: ""
+  }, [
+    /* @__PURE__ */ createBaseVNode("i", {
+      class: "i-tabler:capture",
+      text: "3.8",
+      "text-secondary": ""
+    })
+  ]),
+  /* @__PURE__ */ createTextVNode(" to capture the rerender effect element. ")
+], -1));
+const _hoisted_11 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("p", { "lh-5": "" }, [
   /* @__PURE__ */ createTextVNode(" Start tracing, do something in the page. Then,"),
   /* @__PURE__ */ createBaseVNode("br"),
   /* @__PURE__ */ createTextVNode(" press the stop button to show the resulting triggers for page rerenders. ")
 ], -1));
-const _hoisted_10 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("p", { class: "loading-animation" }, " Tracing... ", -1));
-const _hoisted_11 = { key: 1 };
-const _hoisted_12 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("thead", {
+const _hoisted_12 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("p", { class: "loading-animation" }, " Tracing... ", -1));
+const _hoisted_13 = { key: 1 };
+const _hoisted_14 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("thead", {
   border: "b r base",
   sticky: "",
   display: "table-header-group",
@@ -93,9 +115,9 @@ const _hoisted_12 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBas
     }, " Update Time ")
   ])
 ], -1));
-const _hoisted_13 = { border: "b r base" };
-const _hoisted_14 = ["onClick"];
-const _hoisted_15 = {
+const _hoisted_15 = { border: "b r base" };
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = {
   "max-w-30": "",
   "w-30": "",
   "of-hidden": "",
@@ -107,7 +129,7 @@ const _hoisted_15 = {
   "font-mono": "",
   op70: ""
 };
-const _hoisted_16 = {
+const _hoisted_18 = {
   "max-w-30": "",
   "w-30": "",
   "of-hidden": "",
@@ -119,7 +141,7 @@ const _hoisted_16 = {
   "font-mono": "",
   op70: ""
 };
-const _hoisted_17 = {
+const _hoisted_19 = {
   "max-w-30": "",
   "w-30": "",
   "of-hidden": "",
@@ -131,7 +153,7 @@ const _hoisted_17 = {
   "font-mono": "",
   op70: ""
 };
-const _hoisted_18 = {
+const _hoisted_20 = {
   "max-w-30": "",
   "w-30": "",
   "of-hidden": "",
@@ -143,7 +165,7 @@ const _hoisted_18 = {
   "font-mono": "",
   op70: ""
 };
-const _hoisted_19 = {
+const _hoisted_21 = {
   "max-w-30": "",
   "w-30": "",
   "of-hidden": "",
@@ -163,6 +185,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isTracing = ref(false);
     const result = ref([]);
     const traceBuffer = ref([]);
+    const highlightEnabled = ref(true);
     function normalizeEventInfo(e, instance) {
       const info = getSetupStateInfo(e.target);
       const file = instance.type.__file?.replace?.(rootPath, "") ?? "-";
@@ -184,7 +207,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isTracing.value && traceBuffer.value.push(normalizeEventInfo(e, instance));
     });
     hook.on(DevToolsHooks.RENDER_TRIGGERED, (e, instance) => {
-      isTracing.value && traceBuffer.value.push(normalizeEventInfo(e, instance));
+      if (isTracing.value) {
+        traceBuffer.value.push(normalizeEventInfo(e, instance));
+        if (highlightEnabled.value) {
+          let el = null;
+          const instanceEl = instance.vnode.el;
+          if (instanceEl?.nodeType === Node.TEXT_NODE)
+            el = instanceEl?.parentElement;
+          else if (instanceEl?.nodeType === Node.ELEMENT_NODE)
+            el = instanceEl;
+          if (el)
+            client.value.rerenderHighlight.updateInfo(instance.uid.toString(), getInstanceName(instance), el.getBoundingClientRect());
+        }
+      }
     });
     function start() {
       result.value = [];
@@ -270,11 +305,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 _: 1
+              }),
+              createVNode(_component_VTooltip, {
+                placement: "bottom",
+                distance: 12,
+                "text-center": ""
+              }, {
+                popper: withCtx(() => [
+                  _hoisted_5
+                ]),
+                default: withCtx(() => [
+                  !unref(highlightEnabled) ? (openBlock(), createElementBlock("i", {
+                    key: 0,
+                    class: "i-tabler:capture",
+                    text: "4.7",
+                    "cursor-pointer": "",
+                    "text-secondary": "",
+                    hover: "text-black dark:text-white",
+                    onClick: _cache[0] || (_cache[0] = ($event) => highlightEnabled.value = true)
+                  })) : (openBlock(), createElementBlock("i", {
+                    key: 1,
+                    class: "i-tabler:capture",
+                    text: "4.7",
+                    "cursor-pointer": "",
+                    "text-green-600": "",
+                    hover: "text-green-800",
+                    onClick: _cache[1] || (_cache[1] = ($event) => highlightEnabled.value = false)
+                  }))
+                ]),
+                _: 1
               })
             ]),
             _: 1
           }),
-          !unref(result).length ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          !unref(result).length ? (openBlock(), createElementBlock("div", _hoisted_6, [
             !unref(isTracing) && !unref(result).length ? (openBlock(), createBlock(_component_VDCard, {
               key: 0,
               flex: "~ col gap2",
@@ -293,11 +357,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     "justify-center": "",
                     p: "0.5",
                     onClick: start
-                  }, _hoisted_7),
+                  }, _hoisted_8),
                   createTextVNode(" to start a new tracing. ")
                 ]),
-                _hoisted_8,
                 _hoisted_9,
+                _hoisted_10,
+                _hoisted_11,
                 createVNode(_component_VDBadge, {
                   absolute: "",
                   "right--0.5": "",
@@ -316,14 +381,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               p3: ""
             }, {
               default: withCtx(() => [
-                _hoisted_10
+                _hoisted_12
               ]),
               _: 1
             })) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
-          unref(result).length && !unref(isTracing) ? (openBlock(), createElementBlock("table", _hoisted_11, [
-            _hoisted_12,
-            createBaseVNode("tbody", _hoisted_13, [
+          unref(result).length && !unref(isTracing) ? (openBlock(), createElementBlock("table", _hoisted_13, [
+            _hoisted_14,
+            createBaseVNode("tbody", _hoisted_15, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(result), (item, index) => {
                 return openBlock(), createElementBlock("tr", {
                   key: index,
@@ -342,12 +407,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     op70: "",
                     hover: "text-primary",
                     onClick: ($event) => openInEditor(item.fullFilePath)
-                  }, toDisplayString(item.componentFile), 9, _hoisted_14),
-                  createBaseVNode("td", _hoisted_15, toDisplayString(item.key), 1),
-                  createBaseVNode("td", _hoisted_16, toDisplayString(item.value), 1),
-                  createBaseVNode("td", _hoisted_17, toDisplayString(item.dataType), 1),
-                  createBaseVNode("td", _hoisted_18, toDisplayString(item.updateType), 1),
-                  createBaseVNode("td", _hoisted_19, toDisplayString(unref(dayjs)(item.updateTime).format("HH:mm:ss")), 1)
+                  }, toDisplayString(item.componentFile), 9, _hoisted_16),
+                  createBaseVNode("td", _hoisted_17, toDisplayString(item.key), 1),
+                  createBaseVNode("td", _hoisted_18, toDisplayString(item.value), 1),
+                  createBaseVNode("td", _hoisted_19, toDisplayString(item.dataType), 1),
+                  createBaseVNode("td", _hoisted_20, toDisplayString(item.updateType), 1),
+                  createBaseVNode("td", _hoisted_21, toDisplayString(unref(dayjs)(item.updateTime).format("HH:mm:ss")), 1)
                 ]);
               }), 128))
             ])
@@ -360,10 +425,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 /* Injected with object hook! */
 
-/* unplugin-vue-components disabled */const rerenderTrace_vue_vue_type_style_index_0_scoped_c4e9e7b3_lang = '';
+/* unplugin-vue-components disabled */const rerenderTrace_vue_vue_type_style_index_0_scoped_24f1b68d_lang = '';
 /* Injected with object hook! */
 
-const rerenderTrace = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c4e9e7b3"]]);
+const rerenderTrace = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-24f1b68d"]]);
 
 /* Injected with object hook! */
 

package/dist/client/assets/{routes-f320ef35.js → routes-cc654c70.js}

@@ -1,10 +1,10 @@
-import { _ as __unplugin_components_0 } from './PanelGrids-09fbe816.js';
-import { v as defineComponent, z as unref, b_ as router, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, b$ as routeRecordMatcherState, c0 as activeRouteRecordMatcherState, c as createBlock, bZ as _sfc_main$2, _ as __unplugin_components_7, q as normalizeClass, c1 as activeRouteRecordIndex, c2 as toggleRouteRecordMatcher, a9 as createTextVNode, y as toDisplayString, l as normalizeStyle, g as createCommentVNode, c3 as __unplugin_components_1 } from './index-056bb29c.js';
-import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-ed4f449a.js';
-import { g, M } from './splitpanes.es-166029e0.js';
-import './Icon.vue_vue_type_script_setup_true_lang-bf37ec60.js';
-import './index-57b0b18f.js';
-import './IconButton.vue_vue_type_script_setup_true_lang-9417e3da.js';
+import { _ as __unplugin_components_0 } from './PanelGrids-3cdf73ad.js';
+import { v as defineComponent, z as unref, b_ as router, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, b$ as routeRecordMatcherState, c0 as activeRouteRecordMatcherState, c as createBlock, bZ as _sfc_main$2, _ as __unplugin_components_7, q as normalizeClass, c1 as activeRouteRecordIndex, c2 as toggleRouteRecordMatcher, a9 as createTextVNode, y as toDisplayString, l as normalizeStyle, g as createCommentVNode, c3 as __unplugin_components_1 } from './index-6b2b8b6a.js';
+import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-65d71ce4.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';
 
 const _hoisted_1 = {
   key: 0,

package/dist/client/assets/{settings-b70ac3bb.js → settings-0c6c179d.js}

@@ -1,10 +1,10 @@
-import { _ as _sfc_main$a, a as _sfc_main$c } from './Switch.vue_vue_type_script_setup_true_lang-86be5e4b.js';
-import { I as BaseTransition, J as BaseTransitionPropsValidators, K as Comment, L as EffectScope, F as Fragment, M as KeepAlive, R as ReactiveEffect, S as Static, N as Suspense, T as Teleport, O as Text, P as Transition, Q as TransitionGroup, V as VueElement, U as assertNumber, W as callWithAsyncErrorHandling, X as callWithErrorHandling, Y as camelize, Z as capitalize, $ as cloneVNode, a0 as compatUtils, a1 as computed, a2 as createApp, c as createBlock, g as createCommentVNode, e as createElementBlock, x as createBaseVNode, a3 as createHydrationRenderer, a4 as createPropsRestProxy, a5 as createRenderer, a6 as createSSRApp, a7 as createSlots, a8 as createStaticVNode, a9 as createTextVNode, u as createVNode, aa as customRef, ab as defineAsyncComponent, v as defineComponent, ac as defineCustomElement, ad as defineEmits, ae as defineExpose, af as defineModel, ag as defineOptions, ah as defineProps, ai as defineSSRCustomElement, aj as defineSlots, ak as devtools, al as effect, am as effectScope, an as getCurrentInstance, ao as getCurrentScope, ap as getTransitionRawChildren, aq as guardReactiveProps, ar as h, as as handleError, at as hasInjectionContext, au as hydrate, av as initCustomFormatter, aw as initDirectivesForSSR, ax as inject, ay as isMemoSame, az as isProxy, aA as isReactive, aB as isReadonly, aC as isRef, aD as isRuntimeOnly, aE as isShallow, aF as isVNode, m as markRaw, aG as mergeDefaults, aH as mergeModels, k as mergeProps, n as nextTick, q as normalizeClass, aI as normalizeProps, l as normalizeStyle, aJ as onActivated, aK as onBeforeMount, aL as onBeforeUnmount, aM as onBeforeUpdate, aN as onDeactivated, aO as onErrorCaptured, aP as onMounted, aQ as onRenderTracked, aR as onRenderTriggered, aS as onScopeDispose, aT as onServerPrefetch, aU as onUnmounted, aV as onUpdated, o as openBlock, a as popScopeId, aW as provide, aX as proxyRefs, p as pushScopeId, aY as queuePostFlushCb, aZ as reactive, a_ as readonly, a$ as ref, b0 as registerRuntimeCompiler, b1 as render, i as renderList, f as renderSlot, r as resolveComponent, b as resolveDirective, j as resolveDynamicComponent, b2 as resolveFilter, b3 as resolveTransitionHooks, b4 as setBlockTracking, b5 as setDevtoolsHook, b6 as setTransitionHooks, s as shallowReactive, b7 as shallowReadonly, b8 as shallowRef, b9 as ssrContextKey, ba as ssrUtils, bb as stop, y as toDisplayString, bc as toHandlerKey, t as toHandlers, bd as toRaw, be as toRef, bf as toRefs, bg as toValue, bh as transformVNodeArgs, bi as triggerRef, z as unref, bj as useAttrs, bk as useCssModule, bl as useCssVars, bm as useModel, bn as useSSRContext, bo as useSlots, bp as useTransitionState, bq as vModelCheckbox, br as vModelDynamic, bs as vModelRadio, bt as vModelSelect, bu as vModelText, bv as vShow, bw as version$1, bx as warn, by as watch, bz as watchEffect, bA as watchPostEffect, bB as watchSyncEffect, bC as withAsyncContext, h as withCtx, bD as withDefaults, d as withDirectives, bE as withKeys, bF as withMemo, bG as withModifiers, w as withScopeId, bH as getSortedTabs, bI as updateTabsPosition, bJ as _export_sfc, bK as useVModel, bL as _sfc_main$5, bM as _sfc_main$6, bN as useToggle, bO as shouldHideTabGroup, bP as DEFAULT_TAB_GROUP, bQ as useGroupedTabs, bR as ungroupAllTabs, bS as resetAllTabs, bT as removeTabGroup, bU as checkGroupExist, bV as createGroup, bW as useDevToolsSettings, bX as useFrameState, bY as _sfc_main$b, bZ as _sfc_main$d } from './index-056bb29c.js';
-import { _ as _sfc_main$4 } from './Icon.vue_vue_type_script_setup_true_lang-bf37ec60.js';
+import { _ as _sfc_main$a, a as _sfc_main$c } from './Switch.vue_vue_type_script_setup_true_lang-3983cd12.js';
+import { I as BaseTransition, J as BaseTransitionPropsValidators, K as Comment, L as EffectScope, F as Fragment, M as KeepAlive, R as ReactiveEffect, S as Static, N as Suspense, T as Teleport, O as Text, P as Transition, Q as TransitionGroup, V as VueElement, U as assertNumber, W as callWithAsyncErrorHandling, X as callWithErrorHandling, Y as camelize, Z as capitalize, $ as cloneVNode, a0 as compatUtils, a1 as computed, a2 as createApp, c as createBlock, g as createCommentVNode, e as createElementBlock, x as createBaseVNode, a3 as createHydrationRenderer, a4 as createPropsRestProxy, a5 as createRenderer, a6 as createSSRApp, a7 as createSlots, a8 as createStaticVNode, a9 as createTextVNode, u as createVNode, aa as customRef, ab as defineAsyncComponent, v as defineComponent, ac as defineCustomElement, ad as defineEmits, ae as defineExpose, af as defineModel, ag as defineOptions, ah as defineProps, ai as defineSSRCustomElement, aj as defineSlots, ak as devtools, al as effect, am as effectScope, an as getCurrentInstance, ao as getCurrentScope, ap as getTransitionRawChildren, aq as guardReactiveProps, ar as h, as as handleError, at as hasInjectionContext, au as hydrate, av as initCustomFormatter, aw as initDirectivesForSSR, ax as inject, ay as isMemoSame, az as isProxy, aA as isReactive, aB as isReadonly, aC as isRef, aD as isRuntimeOnly, aE as isShallow, aF as isVNode, m as markRaw, aG as mergeDefaults, aH as mergeModels, k as mergeProps, n as nextTick, q as normalizeClass, aI as normalizeProps, l as normalizeStyle, aJ as onActivated, aK as onBeforeMount, aL as onBeforeUnmount, aM as onBeforeUpdate, aN as onDeactivated, aO as onErrorCaptured, aP as onMounted, aQ as onRenderTracked, aR as onRenderTriggered, aS as onScopeDispose, aT as onServerPrefetch, aU as onUnmounted, aV as onUpdated, o as openBlock, a as popScopeId, aW as provide, aX as proxyRefs, p as pushScopeId, aY as queuePostFlushCb, aZ as reactive, a_ as readonly, a$ as ref, b0 as registerRuntimeCompiler, b1 as render, i as renderList, f as renderSlot, r as resolveComponent, b as resolveDirective, j as resolveDynamicComponent, b2 as resolveFilter, b3 as resolveTransitionHooks, b4 as setBlockTracking, b5 as setDevtoolsHook, b6 as setTransitionHooks, s as shallowReactive, b7 as shallowReadonly, b8 as shallowRef, b9 as ssrContextKey, ba as ssrUtils, bb as stop, y as toDisplayString, bc as toHandlerKey, t as toHandlers, bd as toRaw, be as toRef, bf as toRefs, bg as toValue, bh as transformVNodeArgs, bi as triggerRef, z as unref, bj as useAttrs, bk as useCssModule, bl as useCssVars, bm as useModel, bn as useSSRContext, bo as useSlots, bp as useTransitionState, bq as vModelCheckbox, br as vModelDynamic, bs as vModelRadio, bt as vModelSelect, bu as vModelText, bv as vShow, bw as version$1, bx as warn, by as watch, bz as watchEffect, bA as watchPostEffect, bB as watchSyncEffect, bC as withAsyncContext, h as withCtx, bD as withDefaults, d as withDirectives, bE as withKeys, bF as withMemo, bG as withModifiers, w as withScopeId, bH as getSortedTabs, bI as updateTabsPosition, bJ as _export_sfc, bK as useVModel, bL as _sfc_main$5, bM as _sfc_main$6, bN as useToggle, bO as shouldHideTabGroup, bP as DEFAULT_TAB_GROUP, bQ as useGroupedTabs, bR as ungroupAllTabs, bS as resetAllTabs, bT as removeTabGroup, bU as checkGroupExist, bV as createGroup, bW as useDevToolsSettings, bX as useFrameState, bY as _sfc_main$b, bZ as _sfc_main$d } from './index-6b2b8b6a.js';
+import { _ as _sfc_main$4 } from './Icon.vue_vue_type_script_setup_true_lang-4a8fe583.js';
 import { g as getAugmentedNamespace, c as commonjsGlobal, a as getDefaultExportFromCjs } from './_commonjsHelpers-7e83dbf2.js';
-import { _ as _sfc_main$8 } from './IconButton.vue_vue_type_script_setup_true_lang-9417e3da.js';
-import { _ as _sfc_main$7 } from './TextInput.vue_vue_type_script_setup_true_lang-217531ea.js';
-import { _ as _sfc_main$9 } from './IconTitle.vue_vue_type_script_setup_true_lang-a710fbe0.js';
+import { _ as _sfc_main$8 } from './IconButton.vue_vue_type_script_setup_true_lang-7533112d.js';
+import { _ as _sfc_main$7 } from './TextInput.vue_vue_type_script_setup_true_lang-40607e18.js';
+import { _ as _sfc_main$9 } from './IconTitle.vue_vue_type_script_setup_true_lang-bdc080e4.js';
 
 const compile = () => {
 };

package/dist/client/assets/{splitpanes.es-166029e0.js → splitpanes.es-16f3d333.js}

@@ -1,4 +1,4 @@
-import { ar as h, o as openBlock, e as createElementBlock, f as renderSlot, l as normalizeStyle } from './index-056bb29c.js';
+import { ar as h, o as openBlock, e as createElementBlock, f as renderSlot, l as normalizeStyle } from './index-6b2b8b6a.js';
 
 const M = {
   name: "splitpanes",

package/dist/client/assets/{timeline-92a66364.js → timeline-252da334.js}

@@ -1,11 +1,11 @@
-import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-ed4f449a.js';
-import { _ as __unplugin_components_0 } from './PanelGrids-09fbe816.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-056bb29c.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-166029e0.js';
-import './Icon.vue_vue_type_script_setup_true_lang-bf37ec60.js';
-import './index-57b0b18f.js';
-import './IconButton.vue_vue_type_script_setup_true_lang-9417e3da.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() {

package/dist/client/index.html

@@ -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-056bb29c.js"></script>
-  <link rel="stylesheet" href="./assets/index-c3d74b48.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

@@ -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.4",
   "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.4"
   },
   "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,
+  }
+}