vite-plugin-vue-devtools 0.4.14 → 0.5.1

package/dist/client/assets/{components-81f4a69f.js → components-c141317d.js}

@@ -1,10 +1,10 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-6b407e75.js';
-import { F as Fragment, a$ as ref, b8 as shallowRef, a1 as computed, v as defineComponent, r as resolveComponent, o as openBlock, e as createElementBlock, x as createBaseVNode, z as unref, c as createBlock, q as normalizeClass, y as toDisplayString, l as normalizeStyle, i as renderList, g as createCommentVNode, aP as onMounted, cm as onVueInstanceUpdate, u as createVNode, h as withCtx, aZ as reactive, _ as __unplugin_components_7, cn as instance } from './index-12ebe994.js';
-import { a as _sfc_main$2, _ as _sfc_main$3 } from './StateFields.vue_vue_type_script_setup_true_lang-400324ec.js';
-import { g, M } from './splitpanes.es-56cabd81.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-53acfb91.js';
-import './index-07eaeded.js';
-import './VIconButton.vue_vue_type_script_setup_true_lang-64de857d.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-885eb297.js';
+import { F as Fragment, a$ as ref, a1 as computed, b8 as shallowRef, cj as useDevToolsClient, cm as useThrottleFn, v as defineComponent, r as resolveComponent, o as openBlock, e as createElementBlock, x as createBaseVNode, z as unref, c as createBlock, q as normalizeClass, y as toDisplayString, l as normalizeStyle, i as renderList, g as createCommentVNode, aP as onMounted, cn as onVueInstanceUpdate, u as createVNode, h as withCtx, aZ as reactive, _ as __unplugin_components_7, co as instance } from './index-14f26dd8.js';
+import { a as _sfc_main$2, _ as _sfc_main$3 } from './StateFields.vue_vue_type_script_setup_true_lang-fe7c7e4d.js';
+import { g, M } from './splitpanes.es-34ce2868.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-3e22beca.js';
+import './index-133eebe9.js';
+import './VIconButton.vue_vue_type_script_setup_true_lang-ff741416.js';
 
 function isBeingDestroyed(instance) {
   return instance._isBeingDestroyed || instance.isUnmounted;
@@ -135,6 +135,89 @@ function getFragmentRootElements(vnode) {
   }
   return list;
 }
+function getInstanceOrVnodeRect(instance) {
+  const el = instance.subTree.el;
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (isFragment(instance))
+    return addIframePosition(getFragmentRect(instance.subTree), getElWindow(el));
+  else if (el.nodeType === 1)
+    return addIframePosition(el.getBoundingClientRect(), getElWindow(el));
+  else if (instance.subTree.component)
+    return getInstanceOrVnodeRect(instance.subTree.component);
+}
+function createRect() {
+  const rect = {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    get width() {
+      return rect.right - rect.left;
+    },
+    get height() {
+      return rect.bottom - rect.top;
+    }
+  };
+  return rect;
+}
+function mergeRects(a, b) {
+  if (!a.top || b.top < a.top)
+    a.top = b.top;
+  if (!a.bottom || b.bottom > a.bottom)
+    a.bottom = b.bottom;
+  if (!a.left || b.left < a.left)
+    a.left = b.left;
+  if (!a.right || b.right > a.right)
+    a.right = b.right;
+  return a;
+}
+let range;
+function getTextRect(node) {
+  if (!range)
+    range = document.createRange();
+  range.selectNode(node);
+  return range.getBoundingClientRect();
+}
+function getFragmentRect(vnode) {
+  const rect = createRect();
+  if (!vnode.children)
+    return rect;
+  for (let i = 0, l = vnode.children.length; i < l; i++) {
+    const childVnode = vnode.children[i];
+    let childRect;
+    if (childVnode.component) {
+      childRect = getInstanceOrVnodeRect(childVnode.component);
+    } else if (childVnode.el) {
+      const el = childVnode.el;
+      if (el.nodeType === 1 || el.getBoundingClientRect)
+        childRect = el.getBoundingClientRect();
+      else if (el.nodeType === 3 && el.data.trim())
+        childRect = getTextRect(el);
+    }
+    if (childRect)
+      mergeRects(rect, childRect);
+  }
+  return rect;
+}
+function getElWindow(el) {
+  return el.ownerDocument.defaultView;
+}
+function addIframePosition(bounds, win) {
+  if (win.__VUE_DEVTOOLS_IFRAME__) {
+    const rect = mergeRects(createRect(), bounds);
+    const iframeBounds = win.__VUE_DEVTOOLS_IFRAME__.getBoundingClientRect();
+    rect.top += iframeBounds.top;
+    rect.bottom += iframeBounds.top;
+    rect.left += iframeBounds.left;
+    rect.right += iframeBounds.left;
+    if (win.parent)
+      return addIframePosition(rect, win.parent);
+    return rect;
+  }
+  return bounds;
+}
 
 /* Injected with object hook! */
 
@@ -191,6 +274,14 @@ const vueBuiltins = [
   "withDirectives",
   "withModifiers"
 ];
+function getInstanceDetails(instance) {
+  return {
+    id: getUniqueComponentId(instance),
+    name: getInstanceName(instance),
+    file: instance?.type?.__file,
+    state: getInstanceState(instance)
+  };
+}
 function getInstanceState(instance) {
   const mergedType = resolveMergedOptions(instance);
   return processProps(instance).concat(
@@ -600,15 +691,20 @@ class ComponentWalker {
 /* Injected with object hook! */
 
 const selected = ref("vue-devtools:root");
+const selectedComponentName = ref("");
+const selectedComponentNode = ref();
+const selectedComponentNodeFilePath = computed(() => selectedComponentNode.value?.instance ? getInstanceDetails(selectedComponentNode.value.instance)?.file : null);
 const expandedMap = ref({
   "vue-devtools:root": true
 });
 const selectedComponent = ref();
 const selectedComponentState = shallowRef([]);
 function useComponent(instance) {
-  function select(id) {
-    selected.value = id;
-    selectedComponentState.value = InstanceMap.get(id);
+  function select(data) {
+    selected.value = data.id;
+    selectedComponentName.value = data.name;
+    selectedComponentState.value = InstanceMap.get(data.id);
+    selectedComponentNode.value = data;
   }
   function toggleExpand(id) {
     expandedMap.value[id] = !expandedMap.value[id];
@@ -617,6 +713,46 @@ function useComponent(instance) {
   const isExpanded = computed(() => expandedMap.value[instance.id]);
   return { isSelected, select, isExpanded, toggleExpand };
 }
+function useHighlightComponent(node) {
+  const client = useDevToolsClient();
+  const highlight = useThrottleFn(() => {
+    const instance = node.instance;
+    const bounds = getInstanceOrVnodeRect(instance);
+    const name = getInstanceName(instance);
+    client.value?.componentInspector.highlight(name, bounds);
+  }, 300);
+  const unhighlight = () => {
+    client.value?.componentInspector.unHighlight();
+  };
+  return {
+    highlight,
+    unhighlight
+  };
+}
+scrollToComponent.timer = null;
+function scrollToComponent() {
+  if (scrollToComponent.timer)
+    clearTimeout(scrollToComponent.timer);
+  const client = useDevToolsClient();
+  const { highlight, unhighlight } = useHighlightComponent(selectedComponentNode.value);
+  const instance = selectedComponentNode.value.instance;
+  const [el] = getRootElementsFromComponentInstance(instance);
+  if (typeof el.scrollIntoView === "function") {
+    el.scrollIntoView({
+      behavior: "smooth"
+    });
+  } else {
+    const _bounds = getInstanceOrVnodeRect(instance);
+    client.value.componentInspector.scrollToComponent(_bounds);
+  }
+  scrollToComponent.timer = setTimeout(() => {
+    highlight();
+    scrollToComponent.timer = setTimeout(() => {
+      unhighlight();
+      scrollToComponent.timer = null;
+    }, 1500);
+  }, 1200);
+}
 
 /* Injected with object hook! */
 
@@ -636,6 +772,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const { isSelected, select, isExpanded, toggleExpand } = useComponent(props.data);
+    const { highlight, unhighlight } = useHighlightComponent(props.data);
     return (_ctx, _cache) => {
       const _component_VExpandIcon = _sfc_main$2;
       const _component_ComponentTreeNode = resolveComponent("ComponentTreeNode", true);
@@ -646,7 +783,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           }),
           "vue-block": "",
           class: normalizeClass([unref(isSelected) ? "vue-block-active" : "vue-block-hover"]),
-          onClick: _cache[1] || (_cache[1] = ($event) => unref(select)(_ctx.data.id))
+          onClick: _cache[1] || (_cache[1] = ($event) => unref(select)(_ctx.data)),
+          onMouseover: _cache[2] || (_cache[2] = //@ts-ignore
+          (...args) => unref(highlight) && unref(highlight)(...args)),
+          onMouseleave: _cache[3] || (_cache[3] = //@ts-ignore
+          (...args) => unref(unhighlight) && unref(unhighlight)(...args))
         }, [
           createBaseVNode("h3", {
             "vue-block-title": "",
@@ -671,7 +812,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ])
             }, ">", 2)
           ])
-        ], 6),
+        ], 38),
         unref(isExpanded) && _ctx.data.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.children, (item) => {
             return openBlock(), createBlock(_component_ComponentTreeNode, {
@@ -701,13 +842,40 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = {
   key: 0,
+  border: "b base",
+  flex: "",
+  "justify-between": "",
+  "px-4": "",
+  "py-2": ""
+};
+const _hoisted_4 = {
+  key: 0,
+  "text-sm": "",
+  "text-primary": "",
+  op90: ""
+};
+const _hoisted_5 = { flex: "" };
+const _hoisted_6 = /* @__PURE__ */ createBaseVNode("p", {
+  "text-xs": "",
+  "op-50": ""
+}, " Scroll to component ", -1);
+const _hoisted_7 = {
+  key: 0,
+  "pl-2": ""
+};
+const _hoisted_8 = /* @__PURE__ */ createBaseVNode("p", {
+  "text-xs": "",
+  "op-50": ""
+}, " Open component in editor ", -1);
+const _hoisted_9 = {
+  key: 1,
   "h-screen": "",
   "select-none": "",
   "overflow-scroll": "",
   "p-2": "",
   class: "no-scrollbar"
 };
-const _hoisted_4 = /* @__PURE__ */ createBaseVNode("h1", {
+const _hoisted_10 = /* @__PURE__ */ createBaseVNode("h1", {
   "text-sm": "",
   italic: "",
   op50: ""
@@ -752,6 +920,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       selectedComponentState.value = getInstanceState(instance.value);
       walker.getComponentTree(instance.value).then((res) => {
         componentTree.value = res;
+        selectedComponentName.value = res?.[0]?.name ?? "";
+        selectedComponentNode.value = res?.[0];
       });
     }
     onMounted(() => {
@@ -762,8 +932,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     });
+    function openInEditor() {
+      const client = useDevToolsClient();
+      client.value.openInEditor(selectedComponentNodeFilePath.value);
+    }
     return (_ctx, _cache) => {
       const _component_ComponentTreeNode = _sfc_main$1;
+      const _component_VTooltip = resolveComponent("VTooltip");
       const _component_StateFields = _sfc_main$3;
       const _component_VCard = __unplugin_components_7;
       const _component_VPanelGrids = __unplugin_components_0;
@@ -786,15 +961,57 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(unref(g), null, {
               default: withCtx(() => [
                 unref(normalizedComponentState).length ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  unref(selectedComponentName) ? (openBlock(), createElementBlock("span", _hoisted_4, "<" + toDisplayString(unref(selectedComponentName)) + ">", 1)) : createCommentVNode("", true),
+                  createBaseVNode("p", _hoisted_5, [
+                    createBaseVNode("span", null, [
+                      createVNode(_component_VTooltip, { placement: "bottom" }, {
+                        popper: withCtx(() => [
+                          _hoisted_6
+                        ]),
+                        default: withCtx(() => [
+                          createBaseVNode("i", {
+                            "gg:scroll-h": "",
+                            "cursor-pointer": "",
+                            "text-xl": "",
+                            op70: "",
+                            hover: "op100",
+                            onClick: _cache[0] || (_cache[0] = //@ts-ignore
+                            (...args) => unref(scrollToComponent) && unref(scrollToComponent)(...args))
+                          })
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    unref(selectedComponentNodeFilePath) ? (openBlock(), createElementBlock("span", _hoisted_7, [
+                      createVNode(_component_VTooltip, { placement: "bottom" }, {
+                        popper: withCtx(() => [
+                          _hoisted_8
+                        ]),
+                        default: withCtx(() => [
+                          createBaseVNode("i", {
+                            "carbon-launch": "",
+                            "cursor-pointer": "",
+                            "text-sm": "",
+                            op70: "",
+                            hover: "op100",
+                            onClick: openInEditor
+                          })
+                        ]),
+                        _: 1
+                      })
+                    ])) : createCommentVNode("", true)
+                  ])
+                ])) : createCommentVNode("", true),
+                unref(normalizedComponentState).length ? (openBlock(), createElementBlock("div", _hoisted_9, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(unref(normalizedComponentState), (item, index) => {
                     return openBlock(), createBlock(_component_StateFields, {
                       id: index,
-                      key: item.value,
+                      key: item.key,
                       data: item
                     }, null, 8, ["id", "data"]);
                   }), 128))
                 ])) : (openBlock(), createBlock(_component_VPanelGrids, {
-                  key: 1,
+                  key: 2,
                   px5: ""
                 }, {
                   default: withCtx(() => [
@@ -805,7 +1022,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       p3: ""
                     }, {
                       default: withCtx(() => [
-                        _hoisted_4
+                        _hoisted_10
                       ]),
                       _: 1
                     })

package/dist/client/assets/{documentations-cee1b26d.js → documentations-30350ca6.js}

@@ -1,6 +1,6 @@
-import { v as defineComponent, r as resolveComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, a9 as createTextVNode, y as toDisplayString, g as createCommentVNode, e as createElementBlock, bG as withModifiers, f as renderSlot, _ as __unplugin_components_7, a$ as ref, z as unref, u as createVNode, T as Teleport, F as Fragment, i as renderList } from './index-12ebe994.js';
-import { _ as _sfc_main$2 } from './IframeView.vue_vue_type_script_setup_true_lang-a1185393.js';
-import { r as rpc } from './rpc-97467545.js';
+import { v as defineComponent, r as resolveComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, a9 as createTextVNode, y as toDisplayString, g as createCommentVNode, e as createElementBlock, bG as withModifiers, f as renderSlot, _ as __unplugin_components_7, a$ as ref, z as unref, u as createVNode, T as Teleport, F as Fragment, i as renderList } from './index-14f26dd8.js';
+import { _ as _sfc_main$2 } from './IframeView.vue_vue_type_script_setup_true_lang-8e5b8335.js';
+import { r as rpc } from './rpc-acb85b35.js';
 
 const _hoisted_1$1 = {
   flex: "~ col gap2",

package/dist/client/assets/{graph-b9e616a5.js → graph-ca7151be.js}

@@ -1,9 +1,9 @@
-import { a$ as ref, cf as useLocalStorage, a1 as computed, aN as onDeactivated, aL as onBeforeUnmount, v as defineComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, e as createElementBlock, i as renderList, F as Fragment, z as unref, aC as isRef, bM as _sfc_main$3, y as toDisplayString, g as createCommentVNode, j as resolveDynamicComponent, u as createVNode, aF as isVNode, cg as useStorage, d as withDirectives, bu as vModelText, bq as vModelCheckbox, f as renderSlot, ch as useDark, b8 as shallowRef, ci as useMagicKeys, aP as onMounted, by as watch, q as normalizeClass, cj as useDevtoolsClient } from './index-12ebe994.js';
-import { a as _sfc_main$4, _ as _sfc_main$5 } from './VSwitch.vue_vue_type_script_setup_true_lang-9db804e8.js';
+import { a$ as ref, cf as useLocalStorage, a1 as computed, aN as onDeactivated, aL as onBeforeUnmount, v as defineComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, e as createElementBlock, i as renderList, F as Fragment, z as unref, aC as isRef, bM as _sfc_main$3, y as toDisplayString, g as createCommentVNode, j as resolveDynamicComponent, u as createVNode, aF as isVNode, cg as useStorage, d as withDirectives, bu as vModelText, bq as vModelCheckbox, f as renderSlot, ch as useDark, b8 as shallowRef, ci as useMagicKeys, aP as onMounted, by as watch, q as normalizeClass, cj as useDevToolsClient } from './index-14f26dd8.js';
+import { a as _sfc_main$4, _ as _sfc_main$5 } from './VSwitch.vue_vue_type_script_setup_true_lang-a0d66c22.js';
 import { F as Fuse } from './fuse.esm-c317b696.js';
 import { g as getDefaultExportFromCjs$2 } from './_commonjsHelpers-65004790.js';
-import { r as rpc } from './rpc-97467545.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-53acfb91.js';
+import { r as rpc } from './rpc-acb85b35.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-3e22beca.js';
 
 const showGraphSetting = ref(false);
 const graphSettingsInStorage = useLocalStorage("__vue-devtools-graph-settings__", {
@@ -54444,7 +54444,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const isHoveringNode = ref(false);
     const lastSelectedNode = ref();
-    const client = useDevtoolsClient();
+    const client = useDevToolsClient();
     function getHoverPath(level, fullPath, rootPath2) {
       switch (level) {
         case "absolute":

package/dist/client/assets/{index-07eaeded.js → index-133eebe9.js}

@@ -1,4 +1,4 @@
-import { aC as isRef } from './index-12ebe994.js';
+import { aC as isRef } from './index-14f26dd8.js';
 
 const objectToString = Object.prototype.toString;
 function toTypeString(value) {