vite-plugin-vue-devtools 0.0.1-alpha.0 → 0.0.1-alpha.2

package/dist/client/assets/components-f04eb68e.js

@@ -0,0 +1,699 @@
+import { a as _sfc_main$2, g, M, _ as _sfc_main$3 } from './splitpanes.es-f2ab0d30.js';
+import { ab as getInstanceName, ac as classify, ad as kebabize, ae as isFragment, af as camelize, ag as returnError, ah as isBeingDestroyed, ai as getUniqueComponentId, aj as getRenderKey, P as ref, ak as shallowRef, Q as computed, d as defineComponent, X as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, u as unref, a as createBlock, n as normalizeClass, t as toDisplayString, N as normalizeStyle, F as Fragment, r as renderList, m as createCommentVNode, f as onMounted, al as onVueInstanceUpdate, b as createVNode, w as withCtx, a3 as reactive, am as instance } from './index-ab9e9151.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-c622c694.js';
+
+class ComponentFilter {
+  filter;
+  constructor(filter) {
+    this.filter = filter || "";
+  }
+  /**
+   * Check if an instance is qualified.
+   *
+   * @param {Vue|Vnode} instance
+   * @return {Boolean}
+   */
+  isQualified(instance) {
+    const name = getInstanceName(instance);
+    return classify(name).toLowerCase().includes(this.filter) || kebabize(name).toLowerCase().includes(this.filter);
+  }
+}
+
+/* Injected with object hook! */
+
+function getRootElementsFromComponentInstance(instance) {
+  if (isFragment(instance))
+    return getFragmentRootElements(instance.subTree);
+  if (!instance.subTree)
+    return [];
+  return [instance.subTree.el];
+}
+function getFragmentRootElements(vnode) {
+  if (!vnode.children)
+    return [];
+  const list = [];
+  for (let i = 0, l = vnode.children.length; i < l; i++) {
+    const childVnode = vnode.children[i];
+    if (childVnode.component)
+      list.push(...getRootElementsFromComponentInstance(childVnode.component));
+    else if (childVnode.el)
+      list.push(childVnode.el);
+  }
+  return list;
+}
+
+/* Injected with object hook! */
+
+const vueBuiltins = [
+  "nextTick",
+  "defineComponent",
+  "defineAsyncComponent",
+  "defineCustomElement",
+  "ref",
+  "computed",
+  "reactive",
+  "readonly",
+  "watchEffect",
+  "watchPostEffect",
+  "watchSyncEffect",
+  "watch",
+  "isRef",
+  "unref",
+  "toRef",
+  "toRefs",
+  "isProxy",
+  "isReactive",
+  "isReadonly",
+  "shallowRef",
+  "triggerRef",
+  "customRef",
+  "shallowReactive",
+  "shallowReadonly",
+  "toRaw",
+  "markRaw",
+  "effectScope",
+  "getCurrentScope",
+  "onScopeDispose",
+  "onMounted",
+  "onUpdated",
+  "onUnmounted",
+  "onBeforeMount",
+  "onBeforeUpdate",
+  "onBeforeUnmount",
+  "onErrorCaptured",
+  "onRenderTracked",
+  "onRenderTriggered",
+  "onActivated",
+  "onDeactivated",
+  "onServerPrefetch",
+  "provide",
+  "inject",
+  "h",
+  "mergeProps",
+  "cloneVNode",
+  "isVNode",
+  "resolveComponent",
+  "resolveDirective",
+  "withDirectives",
+  "withModifiers"
+];
+function getInstanceState(instance) {
+  const mergedType = resolveMergedOptions(instance);
+  return processProps(instance).concat(
+    processState(instance),
+    processSetupState(instance),
+    processComputed(instance, mergedType),
+    processAttrs(instance),
+    processProvide(instance),
+    processInject(instance, mergedType),
+    processRefs(instance),
+    processEventListeners(instance)
+  );
+}
+function processProps(instance) {
+  const propsData = [];
+  const propDefinitions = instance.type.props;
+  for (let key in instance.props) {
+    const propDefinition = propDefinitions ? propDefinitions[key] : null;
+    key = camelize(key);
+    propsData.push({
+      type: "props",
+      key,
+      value: returnError(() => instance.props[key]),
+      meta: propDefinition ? {
+        type: propDefinition.type ? getPropType(propDefinition.type) : "any",
+        required: !!propDefinition.required,
+        ...propDefinition.default != null ? { default: propDefinition.default.toString() } : {}
+      } : {
+        type: "invalid"
+      },
+      editable: false
+    });
+  }
+  return propsData;
+}
+const fnTypeRE = /^(?:function|class) (\w+)/;
+function getPropType(type) {
+  if (Array.isArray(type))
+    return type.map((t) => getPropType(t)).join(" or ");
+  if (type == null)
+    return "null";
+  const match = type.toString().match(fnTypeRE);
+  return typeof type === "function" ? match && match[1] || "any" : "any";
+}
+function processState(instance) {
+  const type = instance.type;
+  const props = type.props;
+  const getters = type.vuex && type.vuex.getters;
+  const computedDefs = type.computed;
+  const data = {
+    ...instance.data,
+    ...instance.renderContext
+  };
+  return Object.keys(data).filter((key) => !(props && key in props) && !(getters && key in getters) && !(computedDefs && key in computedDefs)).map((key) => ({
+    key,
+    type: "data",
+    value: returnError(() => data[key]),
+    editable: true
+  }));
+}
+function processSetupState(instance) {
+  const raw = instance.devtoolsRawSetupState || {};
+  return Object.keys(instance.setupState).filter((key) => !vueBuiltins.includes(key) && key.split(/(?=[A-Z])/)[0] !== "use").map((key) => {
+    const value = returnError(() => toRaw(instance.setupState[key]));
+    const rawData = raw[key];
+    let result;
+    let isOther = typeof value === "function" || typeof value?.render === "function" || typeof value?.__asyncLoader === "function";
+    if (rawData) {
+      const info = getSetupStateInfo(rawData);
+      const objectType = info.computed ? "Computed" : info.ref ? "Ref" : info.reactive ? "Reactive" : null;
+      const isState = info.ref || info.computed || info.reactive;
+      const raw2 = rawData.effect?.raw?.toString() || rawData.effect?.fn?.toString();
+      if (objectType)
+        isOther = false;
+      result = {
+        ...objectType ? { objectType } : {},
+        ...raw2 ? { raw: raw2 } : {},
+        editable: isState && !info.readonly
+      };
+    }
+    const type = isOther ? "setup (other)" : "setup";
+    return {
+      key,
+      value,
+      type,
+      ...result
+    };
+  });
+}
+function isRef(raw) {
+  return !!raw.__v_isRef;
+}
+function isComputed(raw) {
+  return isRef(raw) && !!raw.effect;
+}
+function isReactive(raw) {
+  return !!raw.__v_isReactive;
+}
+function isReadOnly(raw) {
+  return !!raw.__v_isReadonly;
+}
+function toRaw(value) {
+  if (value?.__v_raw)
+    return value.__v_raw;
+  return value;
+}
+function getSetupStateInfo(raw) {
+  return {
+    ref: isRef(raw),
+    computed: isComputed(raw),
+    reactive: isReactive(raw),
+    readonly: isReadOnly(raw)
+  };
+}
+function processComputed(instance, mergedType) {
+  const type = mergedType;
+  const computed = [];
+  const defs = type.computed || {};
+  for (const key in defs) {
+    const def = defs[key];
+    const type2 = typeof def === "function" && def.vuex ? "vuex bindings" : "computed";
+    computed.push({
+      type: type2,
+      key,
+      value: returnError(() => instance.proxy[key]),
+      editable: typeof def.set === "function"
+    });
+  }
+  return computed;
+}
+function processAttrs(instance) {
+  return Object.keys(instance.attrs).map((key) => ({
+    type: "attrs",
+    key,
+    value: returnError(() => instance.attrs[key])
+  }));
+}
+function processProvide(instance) {
+  return Reflect.ownKeys(instance.provides).map((key) => ({
+    type: "provided",
+    key: key.toString(),
+    value: returnError(() => instance.provides[key])
+  }));
+}
+function processInject(instance, mergedType) {
+  if (!mergedType?.inject)
+    return [];
+  let keys = [];
+  let defaultValue;
+  if (Array.isArray(mergedType.inject)) {
+    keys = mergedType.inject.map((key) => ({
+      key,
+      originalKey: key
+    }));
+  } else {
+    keys = Reflect.ownKeys(mergedType.inject).map((key) => {
+      const value = mergedType.inject[key];
+      let originalKey;
+      if (typeof value === "string" || typeof value === "symbol") {
+        originalKey = value;
+      } else {
+        originalKey = value.from;
+        defaultValue = value.default;
+      }
+      return {
+        key,
+        originalKey
+      };
+    });
+  }
+  return keys.map(({ key, originalKey }) => ({
+    type: "injected",
+    key: originalKey && key !== originalKey ? `${originalKey.toString()} ➞ ${key.toString()}` : key.toString(),
+    // eslint-disable-next-line no-prototype-builtins
+    value: returnError(() => instance.ctx.hasOwnProperty(key) ? instance.ctx[key] : instance.provides.hasOwnProperty(originalKey) ? instance.provides[originalKey] : defaultValue)
+  }));
+}
+function processRefs(instance) {
+  return Object.keys(instance.refs).map((key) => ({
+    type: "refs",
+    key,
+    value: returnError(() => instance.refs[key])
+  }));
+}
+function processEventListeners(instance) {
+  const emitsDefinition = instance.type.emits;
+  const declaredEmits = Array.isArray(emitsDefinition) ? emitsDefinition : Object.keys(emitsDefinition ?? {});
+  const keys = Object.keys(instance.vnode.props ?? {});
+  const result = [];
+  for (const key of keys) {
+    const [prefix, ...eventNameParts] = key.split(/(?=[A-Z])/);
+    if (prefix === "on") {
+      const eventName = eventNameParts.join("-").toLowerCase();
+      const isDeclared = declaredEmits.includes(eventName);
+      result.push({
+        type: "event listeners",
+        key: eventName,
+        value: {
+          _custom: {
+            display: isDeclared ? "✅ Declared" : "⚠️ Not declared",
+            tooltip: !isDeclared ? `The event <code>${eventName}</code> is not declared in the <code>emits</code> option. It will leak into the component's attributes (<code>$attrs</code>).` : null
+          }
+        }
+      });
+    }
+  }
+  return result;
+}
+function resolveMergedOptions(instance) {
+  const raw = instance.type;
+  const { mixins, extends: extendsOptions } = raw;
+  const globalMixins = instance.appContext.mixins;
+  if (!globalMixins.length && !mixins && !extendsOptions)
+    return raw;
+  const options = {};
+  globalMixins.forEach((m) => mergeOptions(options, m));
+  mergeOptions(options, raw);
+  return options;
+}
+function mergeOptions(to, from, instance) {
+  if (typeof from === "function")
+    from = from.options;
+  if (!from)
+    return to;
+  const { mixins, extends: extendsOptions } = from;
+  extendsOptions && mergeOptions(to, extendsOptions);
+  mixins && mixins.forEach(
+    (m) => mergeOptions(to, m)
+  );
+  for (const key of ["computed", "inject"]) {
+    if (Object.prototype.hasOwnProperty.call(from, key)) {
+      if (!to[key])
+        to[key] = from[key];
+      else
+        Object.assign(to[key], from[key]);
+    }
+  }
+  return to;
+}
+
+/* Injected with object hook! */
+
+const InstanceMap = /* @__PURE__ */ new Map();
+class ComponentWalker {
+  maxDepth;
+  recursively;
+  componentFilter;
+  // Dedupe instances
+  // Some instances may be both on a component and on a child abstract/functional component
+  captureIds;
+  constructor(maxDepth, filter, recursively) {
+    this.maxDepth = maxDepth;
+    this.recursively = recursively;
+    this.componentFilter = new ComponentFilter(filter);
+    this.captureIds = /* @__PURE__ */ new Map();
+  }
+  getComponentTree(instance) {
+    this.captureIds = /* @__PURE__ */ new Map();
+    return this.findQualifiedChildren(instance, 0);
+  }
+  getComponentParents(instance) {
+    this.captureIds = /* @__PURE__ */ new Map();
+    const parents = [];
+    this.captureId(instance);
+    let parent = instance;
+    while (parent = parent.parent) {
+      this.captureId(parent);
+      parents.push(parent);
+    }
+    return parents;
+  }
+  /**
+   * Find qualified children from a single instance.
+   * If the instance itself is qualified, just return itself.
+   * This is ok because [].concat works in both cases.
+   *
+   * @param {Vue|Vnode} instance
+   * @return {Vue|Array}
+   */
+  async findQualifiedChildren(instance, depth) {
+    if (this.componentFilter.isQualified(instance) && !instance.type.devtools?.hide) {
+      return [await this.capture(instance, [], depth)];
+    } else if (instance.subTree) {
+      const list = this.isKeepAlive(instance) ? this.getKeepAliveCachedInstances(instance) : this.getInternalInstanceChildren(instance.subTree);
+      return this.findQualifiedChildrenFromList(list, depth);
+    } else {
+      return [];
+    }
+  }
+  /**
+   * Iterate through an array of instances and flatten it into
+   * an array of qualified instances. This is a depth-first
+   * traversal - e.g. if an instance is not matched, we will
+   * recursively go deeper until a qualified child is found.
+   *
+   * @param {Array} instances
+   * @return {Array}
+   */
+  async findQualifiedChildrenFromList(instances, depth) {
+    instances = instances.filter((child) => !isBeingDestroyed(child));
+    if (!this.componentFilter.filter)
+      return Promise.all(instances.map((child, index, list) => this.capture(child, list, depth)));
+    else
+      return Array.prototype.concat.apply([], await Promise.all(instances.map((i) => this.findQualifiedChildren(i, depth))));
+  }
+  /**
+   * Get children from a component instance.
+   */
+  getInternalInstanceChildren(subTree, suspense = null) {
+    const list = [];
+    if (subTree) {
+      if (subTree.component) {
+        !suspense ? list.push(subTree.component) : list.push({ ...subTree.component, suspense });
+      } else if (subTree.suspense) {
+        const suspenseKey = !subTree.suspense.isInFallback ? "suspense default" : "suspense fallback";
+        list.push(...this.getInternalInstanceChildren(subTree.suspense.activeBranch, { ...subTree.suspense, suspenseKey }));
+      } else if (Array.isArray(subTree.children)) {
+        subTree.children.forEach((childSubTree) => {
+          if (childSubTree?.component)
+            !suspense ? list.push(childSubTree.component) : list.push({ ...childSubTree.component, suspense });
+          else
+            list.push(...this.getInternalInstanceChildren(childSubTree, suspense));
+        });
+      }
+    }
+    return list.filter((child) => !isBeingDestroyed(child));
+  }
+  captureId(instance) {
+    if (!instance)
+      return null;
+    const id = getUniqueComponentId(instance);
+    if (this.captureIds.has(id))
+      return null;
+    else
+      this.captureIds.set(id, void 0);
+    return id;
+  }
+  /**
+   * Capture the meta information of an instance. (recursive)
+   *
+   * @param {Vue} instance
+   * @return {Object}
+   */
+  async capture(instance, list, depth) {
+    if (!instance)
+      return null;
+    const id = this.captureId(instance);
+    const name = getInstanceName(instance);
+    const children = this.getInternalInstanceChildren(instance.subTree).filter((child) => !isBeingDestroyed(child));
+    const parents = this.getComponentParents(instance) || [];
+    const inactive = !!instance.isDeactivated || parents.some((parent) => parent.isDeactivated);
+    const treeNode = {
+      uid: instance.uid,
+      id,
+      name,
+      renderKey: getRenderKey(instance.vnode ? instance.vnode.key : null),
+      inactive,
+      hasChildren: !!children.length,
+      children: [],
+      isFragment: isFragment(instance),
+      // TODO: functional components, suspense
+      tags: [],
+      autoOpen: this.recursively,
+      instance: null
+    };
+    if (depth < this.maxDepth || instance.type.__isKeepAlive || parents.some((parent) => parent.type.__isKeepAlive)) {
+      treeNode.children = await Promise.all(children.map((child, index, list2) => this.capture(child, list2, depth + 1)).filter(Boolean));
+    }
+    if (this.isKeepAlive(instance)) {
+      const cachedComponents = this.getKeepAliveCachedInstances(instance);
+      for (const cachedChild of cachedComponents) {
+        const node = await this.capture({ ...cachedChild, isDeactivated: true }, [], depth + 1);
+        if (node)
+          treeNode.children.push(node);
+      }
+    }
+    const rootElements = getRootElementsFromComponentInstance(instance);
+    const firstElement = rootElements[0];
+    if (firstElement?.parentElement) {
+      const parentInstance = instance.parent;
+      const parentRootElements = parentInstance ? getRootElementsFromComponentInstance(parentInstance) : [];
+      let el = firstElement;
+      const indexList = [];
+      do {
+        indexList.push(Array.from(el.parentElement.childNodes).indexOf(el));
+        el = el.parentElement;
+      } while (el.parentElement && parentRootElements.length && !parentRootElements.includes(el));
+      treeNode.domOrder = indexList.reverse();
+    } else {
+      treeNode.domOrder = [-1];
+    }
+    InstanceMap.set(treeNode.id, getInstanceState(instance));
+    treeNode.instance = instance;
+    return treeNode;
+  }
+  isKeepAlive(instance) {
+    return instance.type.__isKeepAlive && instance.__v_cache;
+  }
+  getKeepAliveCachedInstances(instance) {
+    return Array.from(instance.__v_cache.values()).map((vnode) => vnode.component).filter(Boolean);
+  }
+}
+
+/* Injected with object hook! */
+
+const selected = ref("vue-devtools:root");
+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 toggleExpand(id) {
+    expandedMap.value[id] = !expandedMap.value[id];
+  }
+  const isSelected = computed(() => selected.value === instance.id);
+  const isExpanded = computed(() => expandedMap.value[instance.id]);
+  return { isSelected, select, isExpanded, toggleExpand };
+}
+
+/* Injected with object hook! */
+
+const _hoisted_1$1 = {
+  key: 1,
+  "inline-block": "",
+  "h-6": "",
+  "w-6": ""
+};
+const _hoisted_2$1 = { key: 0 };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ComponentTreeNode",
+  props: {
+    data: null,
+    depth: { default: 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const { isSelected, select, isExpanded, toggleExpand } = useComponent(props.data);
+    return (_ctx, _cache) => {
+      const _component_VExpandIcon = _sfc_main$2;
+      const _component_ComponentTreeNode = resolveComponent("ComponentTreeNode", true);
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            paddingLeft: `${__props.depth * 15 + 4}px`
+          }),
+          "vue-block": "",
+          class: normalizeClass([unref(isSelected) ? "vue-block-active" : "vue-block-hover"]),
+          onClick: _cache[1] || (_cache[1] = ($event) => unref(select)(__props.data.id))
+        }, [
+          createBaseVNode("h3", {
+            "vue-block-title": "",
+            onClick: _cache[0] || (_cache[0] = ($event) => __props.data.hasChildren ? unref(toggleExpand)(__props.data.id) : () => {
+            })
+          }, [
+            __props.data.hasChildren ? (openBlock(), createBlock(_component_VExpandIcon, {
+              key: 0,
+              value: unref(isExpanded)
+            }, null, 8, ["value"])) : (openBlock(), createElementBlock("i", _hoisted_1$1)),
+            createBaseVNode("span", {
+              class: normalizeClass([
+                unref(isSelected) ? "vue-tag-symbol-active" : "vue-tag-symbol"
+              ])
+            }, "<", 2),
+            createBaseVNode("span", {
+              class: normalizeClass([unref(isSelected) ? "text-white" : "vue-block-text"])
+            }, toDisplayString(__props.data.name), 3),
+            createBaseVNode("span", {
+              class: normalizeClass([
+                unref(isSelected) ? "vue-tag-symbol-active" : "vue-tag-symbol"
+              ])
+            }, ">", 2)
+          ])
+        ], 6),
+        unref(isExpanded) && __props.data.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.children, (item) => {
+            return openBlock(), createBlock(_component_ComponentTreeNode, {
+              key: item.id,
+              data: item,
+              depth: __props.depth + 1
+            }, null, 8, ["data", "depth"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+
+/* Injected with object hook! */
+
+const _hoisted_1 = {
+  "h-screen": "",
+  "n-panel-grids": ""
+};
+const _hoisted_2 = { "p-2": "" };
+const _hoisted_3 = {
+  "h-screen": "",
+  "select-none": "",
+  "overflow-scroll": "",
+  "p-2": "",
+  class: "no-scrollbar"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "components",
+  setup(__props) {
+    const componentTree = ref([]);
+    function normalizeComponentState(value, type) {
+      if (type === "Reactive")
+        return reactive(value);
+      else if (type === "Computed")
+        return computed(() => value);
+      else if (type === "Ref")
+        return ref(value);
+      else
+        return value;
+    }
+    const normalizedComponentState = computed(() => {
+      const list = [];
+      selectedComponentState.value.forEach((item) => {
+        if (list.some((i) => i.key === item.type)) {
+          const index = list.findIndex((i) => i.key === item.type);
+          list[index].value = {
+            ...list[index].value,
+            [item.key]: normalizeComponentState(item.value, item.objectType)
+          };
+        } else {
+          list.push({
+            key: item.type,
+            value: {
+              [item.key]: normalizeComponentState(item.value, item.objectType)
+            }
+          });
+        }
+      });
+      return list;
+    });
+    function init() {
+      const walker = new ComponentWalker(500, null, true);
+      selectedComponent.value = instance.value;
+      selectedComponentState.value = getInstanceState(instance.value);
+      walker.getComponentTree(instance.value).then((res) => {
+        componentTree.value = res;
+      });
+    }
+    onMounted(() => {
+      onVueInstanceUpdate(() => {
+        init();
+        selected.value = "vue-devtools:root";
+      });
+    });
+    return (_ctx, _cache) => {
+      const _component_ComponentTreeNode = _sfc_main$1;
+      const _component_StateFields = _sfc_main$3;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(M), null, {
+          default: withCtx(() => [
+            createVNode(unref(g), { border: "r base" }, {
+              default: withCtx(() => [
+                createBaseVNode("div", _hoisted_2, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(componentTree), (item) => {
+                    return openBlock(), createBlock(_component_ComponentTreeNode, {
+                      key: item.id,
+                      data: item
+                    }, null, 8, ["data"]);
+                  }), 128))
+                ])
+              ]),
+              _: 1
+            }),
+            createVNode(unref(g), null, {
+              default: withCtx(() => [
+                createBaseVNode("div", _hoisted_3, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(normalizedComponentState), (item, index) => {
+                    return openBlock(), createBlock(_component_StateFields, {
+                      id: index,
+                      key: item.value,
+                      data: item
+                    }, null, 8, ["id", "data"]);
+                  }), 128))
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+
+/* Injected with object hook! */
+
+/* Injected with object hook! */
+
+export { _sfc_main as default };