vite-plugin-vue-devtools 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -23,6 +23,7 @@ import require$$0$3$1 from 'assert';
 import require$$0$5 from 'buffer';
 import { debuglog } from 'node:util';
 import require$$1 from 'tty';
+import { parseComponent } from '@webfansplz/vuedoc-parser';
 
 function createRPCServer(name, ws, functions) {
   const event = `${name}:rpc`;
@@ -13645,6 +13646,22 @@ async function installPackage(packages, options = {}) {
   });
 }
 
+async function getVueSFCList(root) {
+  const files = await fg([
+    "**/*.vue"
+  ], {
+    cwd: root,
+    onlyFiles: true,
+    ignore: ["**/node_modules/**", "**/dist/**"]
+  });
+  return files;
+}
+async function getComponentInfo(root, filename) {
+  return await parseComponent({
+    filename: path$3$1.resolve(root, filename)
+  });
+}
+
 const NAME = "vite-plugin-vue-devtools";
 function getVueDevtoolsPath() {
   const pluginPath = normalizePath(path$3$1.dirname(fileURLToPath(import.meta.url)));
@@ -13669,6 +13686,8 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
       getImageMeta,
       getTextAssetContent,
       getPackages: () => getPackages(config.root),
+      getVueSFCList: () => getVueSFCList(config.root),
+      getComponentInfo: (filename) => getComponentInfo(config.root, filename),
       installPackage: (packages, options2 = {}) => installPackage(packages, {
         ...options2,
         cwd: config.root,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "packageManager": "pnpm@8.4.0",
   "description": "A vite plugin for Vue Devtools",
   "author": "webfansplz",
@@ -56,12 +56,15 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.1.2",
+    "@webfansplz/vuedoc-parser": "^0.0.1",
     "algoliasearch": "^4.17.1",
     "birpc": "^0.2.12",
     "execa": "^7.1.1",
+    "json-editor-vue": "^0.10.6",
     "nanoid": "^4.0.2",
     "sirv": "^2.0.3",
     "splitpanes": "^3.1.5",
+    "vanilla-jsoneditor": "^0.17.5",
     "vite-hot-client": "^0.2.1",
     "vite-plugin-inspect": "^0.7.28",
     "vite-plugin-vue-inspector": "^3.4.2",

package/src/node/Container.vue

@@ -378,42 +378,76 @@ onMounted(() => {
       togglePanel()
   })
 })
+
+const toggleButtonRef = ref(null)
+const modalRef = ref(null)
+
+window.addEventListener('click', (event) => {
+  const modalEl = modalRef.value
+  const toggleButtonEl = toggleButtonRef.value
+  if (!modalEl || !toggleButtonEl || event.composedPath().includes(modalEl) || event.composedPath().includes(toggleButtonEl))
+    return
+  const frameState = localStorage.getItem('__vue-devtools-frame-state__')
+  if (frameState) {
+    const parsedFrameState = JSON.parse(frameState)
+    if (parsedFrameState.closeOnOutsideClick)
+      panelVisible.value = false
+  }
+})
 </script>
 
 <template>
-  <div class="vue-devtools-panel" :style="panelPosition">
+  <div ref="modalRef" class="vue-devtools-panel" :style="panelPosition">
     <!-- client -->
-    <iframe ref="iframe" :src="clientUrl" :style="{
-      'pointer-events': isDragging ? 'none' : 'auto',
-    }" @load="onLoad" />
+    <iframe
+      ref="iframe" :src="clientUrl" :style="{
+        'pointer-events': isDragging ? 'none' : 'auto',
+      }" @load="onLoad"
+    />
     <!-- resize -->
     <template v-if="panelState.viewMode === 'default'">
       <template v-if="panelState.position !== 'top'">
         <div :class="resizeHorizontalClassName" :style="{ top: 0 }" @mousedown.prevent="toggleDragging('horizontal')" />
-        <div v-if="panelState.position !== 'left'" :class="resizeCornerClassName"
-          :style="{ top: 0, left: 0, cursor: 'nwse-resize' }" @mousedown.prevent="toggleDragging('both')" />
-        <div v-if="panelState.position !== 'right'" :class="resizeCornerClassName"
-          :style="{ top: 0, right: 0, cursor: 'nesw-resize' }" @mousedown.prevent="toggleDragging('both')" />
+        <div
+          v-if="panelState.position !== 'left'" :class="resizeCornerClassName"
+          :style="{ top: 0, left: 0, cursor: 'nwse-resize' }" @mousedown.prevent="toggleDragging('both')"
+        />
+        <div
+          v-if="panelState.position !== 'right'" :class="resizeCornerClassName"
+          :style="{ top: 0, right: 0, cursor: 'nesw-resize' }" @mousedown.prevent="toggleDragging('both')"
+        />
       </template>
 
       <template v-if="panelState.position !== 'bottom'">
-        <div :class="resizeHorizontalClassName" :style="{ bottom: 0 }"
-          @mousedown.prevent="toggleDragging('horizontal')" />
-        <div v-if="panelState.position !== 'right'" :class="resizeCornerClassName"
-          :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }" @mousedown.prevent="toggleDragging('both')" />
-        <div v-if="panelState.position !== 'left'" :class="resizeCornerClassName"
-          :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }" @mousedown.prevent="toggleDragging('both')" />
+        <div
+          :class="resizeHorizontalClassName" :style="{ bottom: 0 }"
+          @mousedown.prevent="toggleDragging('horizontal')"
+        />
+        <div
+          v-if="panelState.position !== 'right'" :class="resizeCornerClassName"
+          :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }" @mousedown.prevent="toggleDragging('both')"
+        />
+        <div
+          v-if="panelState.position !== 'left'" :class="resizeCornerClassName"
+          :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }" @mousedown.prevent="toggleDragging('both')"
+        />
       </template>
 
-      <div v-if="panelState.position !== 'left'" :class="resizeVerticalClassName" :style="{ left: 0 }"
-        @mousedown.prevent="toggleDragging('vertical')" />
-      <div v-if="panelState.position !== 'right'" :class="resizeVerticalClassName" :style="{ right: 0 }"
-        @mousedown.prevent="toggleDragging('vertical')" />
+      <div
+        v-if="panelState.position !== 'left'" :class="resizeVerticalClassName" :style="{ left: 0 }"
+        @mousedown.prevent="toggleDragging('vertical')"
+      />
+      <div
+        v-if="panelState.position !== 'right'" :class="resizeVerticalClassName" :style="{ right: 0 }"
+        @mousedown.prevent="toggleDragging('vertical')"
+      />
     </template>
   </div>
   <!-- toggle button -->
-  <button class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition"
-    @click.prevent="togglePanel">
+  <button
+    ref="toggleButtonRef" class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition"
+    @click.prevent="togglePanel"
+  >
     <svg viewBox="0 0 256 198" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z" />
       <path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z" />