vite-plugin-vue-devtools 0.5.0 → 1.0.0-alpha.1

package/dist/client/assets/{components-c9aae4bc.js → components-fc711123.js}

@@ -1,10 +1,10 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-4b915e62.js';
-import { F as Fragment, a$ as ref, b8 as shallowRef, a1 as computed, cm as useThrottleFn, cj as useDevtoolsClient, 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-197edebf.js';
-import { a as _sfc_main$2, _ as _sfc_main$3 } from './StateFields.vue_vue_type_script_setup_true_lang-617e4d70.js';
-import { g, M } from './splitpanes.es-2f5182b4.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-6cd486d4.js';
-import './index-f977bcde.js';
-import './VIconButton.vue_vue_type_script_setup_true_lang-63abce3f.js';
+import { _ as __unplugin_components_0 } from './PanelGrids-93648569.js';
+import { F as Fragment, a$ as ref, a1 as computed, b8 as shallowRef, cl as useDevToolsClient, cp 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, cq as onVueInstanceUpdate, u as createVNode, h as withCtx, cm as rootPath, aZ as reactive, _ as __unplugin_components_7, cr as instance } from './index-9f1190d8.js';
+import { a as _sfc_main$2, _ as _sfc_main$3 } from './StateFields.vue_vue_type_script_setup_true_lang-019c8d08.js';
+import { g, M } from './splitpanes.es-36fe45c8.js';
+import './Icon.vue_vue_type_script_setup_true_lang-f867c918.js';
+import './index-95398468.js';
+import './IconButton.vue_vue_type_script_setup_true_lang-74db1ae6.js';
 
 function isBeingDestroyed(instance) {
   return instance._isBeingDestroyed || instance.isUnmounted;
@@ -274,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(
@@ -683,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];
@@ -701,7 +714,7 @@ function useComponent(instance) {
   return { isSelected, select, isExpanded, toggleExpand };
 }
 function useHighlightComponent(node) {
-  const client = useDevtoolsClient();
+  const client = useDevToolsClient();
   const highlight = useThrottleFn(() => {
     const instance = node.instance;
     const bounds = getInstanceOrVnodeRect(instance);
@@ -716,6 +729,30 @@ function useHighlightComponent(node) {
     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! */
 
@@ -737,7 +774,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     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_VDExpandIcon = _sfc_main$2;
       const _component_ComponentTreeNode = resolveComponent("ComponentTreeNode", true);
       return openBlock(), createElementBlock(Fragment, null, [
         createBaseVNode("div", {
@@ -746,7 +783,7 @@ 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
@@ -757,7 +794,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.data.hasChildren ? unref(toggleExpand)(_ctx.data.id) : () => {
             })
           }, [
-            _ctx.data.hasChildren ? (openBlock(), createBlock(_component_VExpandIcon, {
+            _ctx.data.hasChildren ? (openBlock(), createBlock(_component_VDExpandIcon, {
               key: 0,
               value: unref(isExpanded)
             }, null, 8, ["value"])) : (openBlock(), createElementBlock("i", _hoisted_1$1)),
@@ -805,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 = {
+  "text-xs": "",
+  "op-50": ""
+};
+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: ""
@@ -856,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(() => {
@@ -866,11 +932,16 @@ 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;
+      const _component_VDCard = __unplugin_components_7;
+      const _component_VDPanelGrids = __unplugin_components_0;
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(unref(M), null, {
           default: withCtx(() => [
@@ -890,6 +961,48 @@ 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(() => [
+                          createBaseVNode("p", _hoisted_8, " Open " + toDisplayString(unref(selectedComponentNodeFilePath).replace(unref(rootPath), "")) + " in editor ", 1)
+                        ]),
+                        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,
@@ -897,19 +1010,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       data: item
                     }, null, 8, ["id", "data"]);
                   }), 128))
-                ])) : (openBlock(), createBlock(_component_VPanelGrids, {
-                  key: 1,
+                ])) : (openBlock(), createBlock(_component_VDPanelGrids, {
+                  key: 2,
                   px5: ""
                 }, {
                   default: withCtx(() => [
-                    createVNode(_component_VCard, {
+                    createVNode(_component_VDCard, {
                       flex: "~ col gap2",
                       "min-w-30": "",
                       "items-center": "",
                       p3: ""
                     }, {
                       default: withCtx(() => [
-                        _hoisted_4
+                        _hoisted_10
                       ]),
                       _: 1
                     })

package/dist/client/assets/{documentations-e0b483de.js → documentations-4d7aa8fe.js}

@@ -1,6 +1,5 @@
-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-197edebf.js';
-import { _ as _sfc_main$2 } from './IframeView.vue_vue_type_script_setup_true_lang-c6f176d1.js';
-import { r as rpc } from './rpc-b9c94a3a.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, c9 as rpc, z as unref, u as createVNode, T as Teleport, F as Fragment, i as renderList } from './index-9f1190d8.js';
+import { _ as _sfc_main$2 } from './IframeView.vue_vue_type_script_setup_true_lang-778923b2.js';
 
 const _hoisted_1$1 = {
   flex: "~ col gap2",
@@ -75,8 +74,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       const _component_VTooltip = resolveComponent("VTooltip");
-      const _component_VCard = __unplugin_components_7;
-      return openBlock(), createBlock(_component_VCard, {
+      const _component_VDCard = __unplugin_components_7;
+      return openBlock(), createBlock(_component_VDCard, {
         flex: "~ gap2",
         "max-h": "50vh",
         "cursor-pointer": "",

package/dist/client/assets/{graph-f081d3a5.js → graph-0860970b.js}

@@ -1,9 +1,8 @@
-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-197edebf.js';
-import { a as _sfc_main$4, _ as _sfc_main$5 } from './VSwitch.vue_vue_type_script_setup_true_lang-ed954339.js';
+import { a$ as ref, ch 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, c9 as rpc, ci as useStorage, d as withDirectives, bu as vModelText, bq as vModelCheckbox, f as renderSlot, cj as useDark, b8 as shallowRef, ck as useMagicKeys, aP as onMounted, by as watch, q as normalizeClass, cl as useDevToolsClient, cm as rootPath } from './index-9f1190d8.js';
+import { a as _sfc_main$4, _ as _sfc_main$5 } from './Switch.vue_vue_type_script_setup_true_lang-3e126052.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-b9c94a3a.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-6cd486d4.js';
+import './Icon.vue_vue_type_script_setup_true_lang-f867c918.js';
 
 const showGraphSetting = ref(false);
 const graphSettingsInStorage = useLocalStorage("__vue-devtools-graph-settings__", {
@@ -63,6 +62,7 @@ function _isSlot(s) {
 const _sfc_main$2 = /*#__PURE__*/defineComponent({
   __name: 'GraphSettings',
   setup(__props) {
+    // @ts-expect-error missing type
     const {
       showGraphSetting,
       graphSettings
@@ -118,8 +118,8 @@ const _sfc_main$2 = /*#__PURE__*/defineComponent({
       }, null)
     }];
     return (_ctx, _cache) => {
-      const _component_VDialog = _sfc_main$3;
-      return openBlock(), createBlock(_component_VDialog, {
+      const _component_VDDialog = _sfc_main$3;
+      return openBlock(), createBlock(_component_VDDialog, {
         modelValue: unref(showGraphSetting),
         "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => isRef(showGraphSetting) ? showGraphSetting.value = $event : null),
         class: "z-2000 min-w-500px w-50vw flex flex-col gap6 p6",
@@ -2196,7 +2196,6 @@ const list = ref(await rpc.componentGraph());
 const searchText = useStorage("vite-inspect-search-text", "");
 const includeNodeModules = useStorage("vite-inspect-include-node-modules", false);
 const includeVirtual = useStorage("vite-inspect-include-virtual", false);
-const rootPath = ref(await rpc.root());
 const userCustomGlobPattern = useStorage("__vue-devtools-graph-glob__", "");
 function getDepsByExactId(data, searchId) {
   const result = /* @__PURE__ */ new Set();
@@ -54444,7 +54443,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":
@@ -54472,7 +54471,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return {
           id,
           label: isInMain ? `<b>${pathSegments.at(-1)}</b>` : pathSegments.at(-1),
-          title: getHoverPath(settings.graphSettings.value.hoverPathLevel, path, rootPath.value),
+          title: getHoverPath(settings.graphSettings.value.hoverPathLevel, path, rootPath),
           group: path.match(/\.(\w+)$/)?.[1] || "unknown",
           size: 15 + Math.min(mod.deps.length / 2, 8),
           font: {

package/dist/client/assets/{index-f977bcde.js → index-95398468.js}

@@ -1,4 +1,4 @@
-import { aC as isRef } from './index-197edebf.js';
+import { aC as isRef } from './index-9f1190d8.js';
 
 const objectToString = Object.prototype.toString;
 function toTypeString(value) {