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

package/dist/client/assets/{timeline-34b2c182.js → timeline-8ce18510.js}

@@ -1,11 +1,11 @@
-import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-fe7c7e4d.js';
-import { _ as __unplugin_components_0 } from './VPanelGrids-885eb297.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-14f26dd8.js';
+import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-019c8d08.js';
+import { _ as __unplugin_components_0 } from './PanelGrids-93648569.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-9f1190d8.js';
 import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-65004790.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';
+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';
 
 var dayjs_min = {exports: {}};/* Injected with object hook! */
 
@@ -1329,8 +1329,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   emits: ["update-selected"],
   setup(__props, { emit: emits }) {
     return (_ctx, _cache) => {
-      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 _ctx.data.length ? (openBlock(), createElementBlock("ul", _hoisted_1$1, [
         createVNode(unref(script$2), {
           items: _ctx.data,
@@ -1365,12 +1365,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["items"])
-      ])) : (openBlock(), createBlock(_component_VPanelGrids, {
+      ])) : (openBlock(), createBlock(_component_VDPanelGrids, {
         key: 1,
         px5: ""
       }, {
         default: withCtx(() => [
-          createVNode(_component_VCard, {
+          createVNode(_component_VDCard, {
             flex: "~ col gap2",
             "min-w-30": "",
             "items-center": "",

package/dist/client/index.html

@@ -5,7 +5,7 @@
   <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-14f26dd8.js"></script>
+  <script type="module" crossorigin src="./assets/index-9f1190d8.js"></script>
   <link rel="stylesheet" href="./assets/index-d3dcbe9e.css">
 </head>
 <body>

package/dist/{index.cjs → vite.cjs}

@@ -6,7 +6,7 @@ const vite = require('vite');
 const sirv = require('sirv');
 const Inspect = require('vite-plugin-inspect');
 const VueInspector = require('vite-plugin-vue-inspector');
-const birpc = require('birpc');
+const core$1 = require('@vite-plugin-vue-devtools/core');
 const fs$9 = require('node:fs/promises');
 const require$$0 = require('os');
 const require$$0$1 = require('path');
@@ -50,37 +50,7 @@ const require$$0$3__default = /*#__PURE__*/_interopDefaultCompat(require$$0$3$1)
 const require$$0$5__default = /*#__PURE__*/_interopDefaultCompat(require$$0$5);
 const require$$1__default = /*#__PURE__*/_interopDefaultCompat(require$$1);
 
-function createRPCServer(name, ws, functions) {
-  const event = `${name}:rpc`;
-  const group = birpc.createBirpcGroup(
-    functions,
-    () => birpc.cachedMap(
-      Array.from(ws?.clients || []),
-      (socket) => {
-        return {
-          on: (fn) => {
-            ws.on(event, (data, source) => {
-              if (socket === source)
-                fn(data);
-            });
-          },
-          post: (data) => {
-            socket.send(event, data);
-          }
-        };
-      }
-    ),
-    {
-      timeout: -1
-    }
-  );
-  ws.on("connection", () => {
-    group.updateChannels();
-  });
-  return group.broadcast;
-}
-
-const DIR_DIST = typeof __dirname !== "undefined" ? __dirname : path$3$1.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href))));
+const DIR_DIST = typeof __dirname !== "undefined" ? __dirname : path$3$1.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('vite.cjs', document.baseURI).href))));
 const DIR_CLIENT = path$3$1.resolve(DIR_DIST, "../dist/client");
 
 async function getComponentsRelationships(rpc) {
@@ -13777,10 +13747,9 @@ async function getComponentInfo(root, filename) {
   });
 }
 
-const NAME = "vite-plugin-vue-devtools";
 function getVueDevtoolsPath() {
-  const pluginPath = vite.normalizePath(path$3__default.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href)))));
-  return pluginPath.replace(/\/dist$/, "//src/node");
+  const pluginPath = vite.normalizePath(path$3__default.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('vite.cjs', document.baseURI).href)))));
+  return pluginPath.replace(/\/dist$/, "//src");
 }
 function VitePluginVueDevTools(options = { appendTo: "" }) {
   const vueDevtoolsPath = getVueDevtoolsPath();
@@ -13794,9 +13763,10 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
       single: true,
       dev: true
     }));
-    const rpc = createRPCServer("vite-plugin-vue-devtools", server.ws, {
-      componentGraph: () => getComponentsRelationships(inspect.api.rpc),
+    const rpc = core$1.createRPCServer(server.ws, {
+      root: () => config.root,
       inspectClientUrl: () => `${config.base || "/"}__inspect/`,
+      componentGraph: () => getComponentsRelationships(inspect.api.rpc),
       staticAssets: () => getStaticAssets(config),
       getImageMeta,
       getTextAssetContent,
@@ -13824,12 +13794,11 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
           else if (type === "exit")
             rpc.onTerminalExit({ data });
         }
-      }),
-      root: () => config.root
+      })
     });
   }
   const plugin = {
-    name: NAME,
+    name: core$1.PLUGIN_NAME,
     enforce: "pre",
     apply: "serve",
     configResolved(resolvedConfig) {

package/dist/{index.mjs → vite.mjs}

@@ -4,7 +4,7 @@ import { normalizePath } from 'vite';
 import sirv from 'sirv';
 import Inspect from 'vite-plugin-inspect';
 import VueInspector from 'vite-plugin-vue-inspector';
-import { createBirpcGroup, cachedMap } from 'birpc';
+import { PLUGIN_NAME, createRPCServer } from '@vite-plugin-vue-devtools/core';
 import fs$9 from 'node:fs/promises';
 import require$$0 from 'os';
 import require$$0$1 from 'path';
@@ -24,36 +24,6 @@ import require$$0$5 from 'buffer';
 import { debuglog } from 'node:util';
 import require$$1 from 'tty';
 
-function createRPCServer(name, ws, functions) {
-  const event = `${name}:rpc`;
-  const group = createBirpcGroup(
-    functions,
-    () => cachedMap(
-      Array.from(ws?.clients || []),
-      (socket) => {
-        return {
-          on: (fn) => {
-            ws.on(event, (data, source) => {
-              if (socket === source)
-                fn(data);
-            });
-          },
-          post: (data) => {
-            socket.send(event, data);
-          }
-        };
-      }
-    ),
-    {
-      timeout: -1
-    }
-  );
-  ws.on("connection", () => {
-    group.updateChannels();
-  });
-  return group.broadcast;
-}
-
 const DIR_DIST = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
 const DIR_CLIENT = resolve$1(DIR_DIST, "../dist/client");
 
@@ -13751,10 +13721,9 @@ async function getComponentInfo(root, filename) {
   });
 }
 
-const NAME = "vite-plugin-vue-devtools";
 function getVueDevtoolsPath() {
   const pluginPath = normalizePath(path$3$1.dirname(fileURLToPath(import.meta.url)));
-  return pluginPath.replace(/\/dist$/, "//src/node");
+  return pluginPath.replace(/\/dist$/, "//src");
 }
 function VitePluginVueDevTools(options = { appendTo: "" }) {
   const vueDevtoolsPath = getVueDevtoolsPath();
@@ -13768,9 +13737,10 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
       single: true,
       dev: true
     }));
-    const rpc = createRPCServer("vite-plugin-vue-devtools", server.ws, {
-      componentGraph: () => getComponentsRelationships(inspect.api.rpc),
+    const rpc = createRPCServer(server.ws, {
+      root: () => config.root,
       inspectClientUrl: () => `${config.base || "/"}__inspect/`,
+      componentGraph: () => getComponentsRelationships(inspect.api.rpc),
       staticAssets: () => getStaticAssets(config),
       getImageMeta,
       getTextAssetContent,
@@ -13798,12 +13768,11 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
           else if (type === "exit")
             rpc.onTerminalExit({ data });
         }
-      }),
-      root: () => config.root
+      })
     });
   }
   const plugin = {
-    name: NAME,
+    name: PLUGIN_NAME,
     enforce: "pre",
     apply: "serve",
     configResolved(resolvedConfig) {

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.5.1",
-  "packageManager": "pnpm@8.6.7",
+  "type": "module",
+  "version": "1.0.0-alpha.1",
   "description": "A vite plugin for Vue DevTools",
   "author": "webfansplz",
   "license": "MIT",
   "homepage": "https://github.com/webfansplz/vite-plugin-vue-devtools#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/webfansplz/vite-plugin-vue-devtools.git"
+    "url": "git+https://github.com/webfansplz/vite-plugin-vue-devtools.git",
+    "directory": "packages/node"
   },
   "bugs": {
     "url": "https://github.com/webfansplz/vite-plugin-vue-devtools/issues"
@@ -21,111 +22,47 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "types": "./dist/vite.d.ts",
+      "require": "./dist/vite.cjs",
+      "import": "./dist/vite.mjs"
     },
-    "./*": "./*"
+    "./*": "./*",
+    "./client": {
+      "types": "./client.d.ts"
+    }
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "dist/vite.cjs",
+  "module": "dist/vite.mjs",
+  "types": "dist/vite.d.ts",
   "files": [
     "dist",
-    "src/node/views/*",
-    "src/node/app.js",
+    "./src/views/*",
+    "./src/app.js",
     "*.d.ts"
   ],
   "engines": {
-    "node": ">=v14"
-  },
-  "scripts": {
-    "build": "rimraf dist && run-s build:*",
-    "build:client": "vite build src/client",
-    "build:js": "unbuild",
-    "dev": "nr stub && pnpm dev:client",
-    "dev:client": "vite build src/client --watch",
-    "play": "nr -C playground dev",
-    "stub": "unbuild --stub",
-    "lint": "eslint .",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "prepublishOnly": "npm run build",
-    "release": "bumpp && nr changelog && npm publish",
-    "dep:up": "taze -I major"
+    "node": ">=v14.21.3"
   },
   "peerDependencies": {
     "vite": "^3.1.0 || ^4.0.0-0"
   },
   "dependencies": {
-    "@vueuse/core": "^10.2.1",
-    "@vueuse/integrations": "^10.2.1",
     "@webfansplz/vuedoc-parser": "^0.0.3",
-    "algoliasearch": "^4.18.0",
     "birpc": "^0.2.12",
     "execa": "^7.1.1",
-    "json-editor-vue": "^0.10.6",
-    "minimatch": "^9.0.3",
-    "nanoid": "^4.0.2",
     "sirv": "^2.0.3",
-    "splitpanes": "^3.1.5",
-    "vanilla-jsoneditor": "^0.17.8",
-    "vite-hot-client": "^0.2.1",
-    "vite-plugin-inspect": "^0.7.32",
+    "vite-plugin-inspect": "^0.7.33",
     "vite-plugin-vue-inspector": "^3.4.2",
-    "vue-router": "^4.2.4",
-    "vuedraggable": "^4.1.0",
-    "xterm": "^5.2.1",
-    "xterm-addon-fit": "^0.7.0"
+    "@vite-plugin-vue-devtools/core": "1.0.0-alpha.1"
   },
   "devDependencies": {
-    "@algolia/client-search": "^4.18.0",
-    "@antfu/eslint-config": "^0.39.7",
-    "@antfu/ni": "^0.21.4",
-    "@iconify/json": "^2.2.88",
-    "@nuxt/devtools-ui-kit": "^0.6.7",
-    "@types/codemirror": "^5.60.8",
-    "@types/node": "^20.4.1",
-    "@types/splitpanes": "^2.2.1",
-    "@unocss/eslint-config": "^0.53.5",
-    "@unocss/reset": "^0.53.5",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "bumpp": "^9.1.1",
-    "codemirror": "^6.0.1",
-    "codemirror-theme-vars": "^0.1.2",
-    "conventional-changelog-cli": "^3.0.0",
-    "dayjs": "^1.11.9",
-    "eslint": "8.44.0",
+    "@types/node": "^20.4.2",
     "fast-glob": "^3.3.0",
-    "floating-vue": "2.0.0-beta.24",
-    "fuse.js": "^6.6.2",
     "image-meta": "^0.1.1",
-    "lint-staged": "^13.2.3",
-    "npm-run-all": "^4.1.5",
-    "ohash": "^1.1.2",
-    "pathe": "^1.1.1",
-    "pinia": "^2.1.4",
-    "pnpm": "^8.6.7",
-    "rimraf": "^5.0.1",
-    "simple-git-hooks": "^2.8.1",
-    "taze": "^0.11.2",
-    "typescript": "^5.1.6",
-    "unbuild": "^1.2.1",
-    "unocss": "^0.53.5",
-    "unplugin-auto-import": "^0.16.6",
-    "unplugin-vue-components": "^0.25.1",
-    "vis-data": "^7.1.6",
-    "vis-network": "^9.1.6",
-    "vite": "^4.4.2",
-    "vite-dev-rpc": "^0.1.2",
-    "vite-plugin-pages": "^0.31.0",
-    "vue": "^3.3.4",
-    "vue-virtual-scroller": "2.0.0-beta.8"
+    "pathe": "^1.1.1"
   },
-  "simple-git-hooks": {
-    "pre-commit": "pnpm lint-staged"
-  },
-  "lint-staged": {
-    "*": "eslint --fix"
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
   }
-}
+}

package/src/app.js

@@ -0,0 +1,4 @@
+import { createDevToolsContainer } from '@vite-plugin-vue-devtools/core'
+import App from 'virtual:vue-devtools-path:views/Main.vue'
+
+createDevToolsContainer(App)

package/src/{node/views → views}/Main.vue

@@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
 
 // @ts-expect-error virtual module
 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'
@@ -17,19 +18,7 @@ const props = defineProps({
 
 const hook = props.hook
 
-const DevToolsHooks = {
-  APP_INIT: 'app:init',
-  COMPONENT_UPDATED: 'component:updated',
-  COMPONENT_ADDED: 'component:added',
-  COMPONENT_REMOVED: 'component:removed',
-  COMPONENT_EMIT: 'component:emit',
-  PERF_START: 'perf:start',
-  PERF_END: 'perf:end',
-  ADD_ROUTE: 'router:add-route',
-  REMOVE_ROUTE: 'router:remove-route',
-}
-
-const hookBuffer: [string, { args: any[] }][] = []
+const { hookBuffer, collect } = collectDevToolsHookBuffer()
 
 let isAppCreated = false
 const panelState = ref<{
@@ -138,10 +127,6 @@ async function setupClient(iframe: HTMLIFrameElement) {
   })
 }
 
-function updateHookBuffer(type, args) {
-  hookBuffer.push([type, args])
-}
-
 function collectDynamicRoute(app) {
   const router = app?.config?.globalProperties?.$router
   if (!router)
@@ -152,7 +137,7 @@ function collectDynamicRoute(app) {
     const res = _addRoute(...args)
 
     if (!iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__?.loaded) {
-      updateHookBuffer(DevToolsHooks.ADD_ROUTE, {
+      collect(DevToolsHooks.ADD_ROUTE, {
         args: [...args],
       })
     }
@@ -165,7 +150,7 @@ function collectDynamicRoute(app) {
     const res = _removeRoute(...args)
 
     if (!iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__?.loaded) {
-      updateHookBuffer(DevToolsHooks.REMOVE_ROUTE, {
+      collect(DevToolsHooks.REMOVE_ROUTE, {
         args: [...args],
       })
     }
@@ -186,7 +171,7 @@ function collectHookBuffer() {
       return
 
     collectDynamicRoute(app)
-    updateHookBuffer(DevToolsHooks.APP_INIT, {
+    collect(DevToolsHooks.APP_INIT, {
       app,
     })
     setTimeout(() => {
@@ -199,7 +184,7 @@ function collectHookBuffer() {
   //   if (stopCollect(component))
   //     return
 
-  //   updateHookBuffer(DevToolsHooks.COMPONENT_EMIT, {
+  //   collect(DevToolsHooks.COMPONENT_EMIT, {
   //     now: Date.now(),
   //     app,
   //     uid,
@@ -213,7 +198,7 @@ function collectHookBuffer() {
   //   if (stopCollect(component))
   //     return
 
-  //   updateHookBuffer(DevToolsHooks.PERF_END, {
+  //   collect(DevToolsHooks.PERF_END, {
   //     now: Date.now(),
   //     app,
   //     uid,
@@ -234,7 +219,7 @@ function collectHookBuffer() {
       if (!app || (typeof uid !== 'number' && !uid) || !component || stopCollect(component))
         return
 
-      updateHookBuffer(item, {
+      collect(item, {
         app, uid, parentUid, component,
       })
     })
@@ -407,4 +392,10 @@ collectHookBuffer()
     opacity: 0.2;
   }
 }
+
+@media print {
+  #vue-devtools-anchor {
+    display: none;
+  }
+}
 </style>

package/README.md

@@ -1,166 +0,0 @@
-<p align="center">
-  <img src="./assets/bg.png" />
-</p>
-<h1 align="center">
-Vue DevTools <sup>Preview</sup>
-</h1>
-
-
-<p align="center">
-  <a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/v/vite-plugin-vue-devtools" alt="NPM Version" /></a>
-  <a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/dt/vite-plugin-vue-devtools" alt="NPM Downloads" /></a>
- <a href="https://github.com/webfansplz/vite-plugin-vue-devtools/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/github/license/webfansplz/vite-plugin-vue-devtools" alt="License" /></a>
-</p>
-
-<p align="center">
-  <a href="https://github.com/webfansplz/vite-plugin-vue-devtools/discussions/1">💡 Ideas & Suggestions</a> |
-  <a href="https://github.com/webfansplz/vite-plugin-vue-devtools/discussions/2">🗺️ Project Roadmap</a> 
-</p>
-
-<p align="center">
-<a href="https://stackblitz.com/edit/vitejs-vite-oxbwzk?file=vite.config.ts&view=preview"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
-</p>
-
-
-## 📖 Introduction
-
-`vite-plugin-vue-devtools` is a Vite plugin designed to enhance the Vue developer experience.
-
-
-
-## 🎉 Features
-
-### Pages
-
-The pages tab shows your current routes and provide a quick way to navigate to them. For dynamic routes, it also provide a form to fill with each params interactively. You can also use the textbox to play and test how each route is matched.
-
-<img src="./assets/pages.png" />
-
-
-### Components
-
-Components tab show all the components you are using in your app and hierarchy. You can also select them to see the details of the component (e.g. data,props).
-
-<img src="./assets/components.png" />
-
-### Assets
-
-Assets tab that shows all your static assets and their information. You can open the asset in the browser or download it.
-
-<img src="./assets/assets.png" />
-
-### Timeline
-
-Timeline tab has three categories: Performance, Router Navigations, and Pinia. You can switch between them to see the state changes and timelines.
-
-<img src="./assets/timeline.png" />
-
-### Routes
-
-Routes tab is a feature integrated with [Vue Router](https://github.com/vuejs/router), allowing you to view the registered routes and their details.
-
-<img src="./assets/routes.png" />
-
-### Pinia
-
-Pinia tab is a feature integrated with [Pinia](https://github.com/vuejs/pinia), allowing you to view the registered modules and their details.
-
-<img src="./assets/pinia.png" />
-
-### Graph
-
-Graph tab provides a graph view that show the relationship between components. 
-
-<img src="./assets/graph.png" />
-
-### Inspect
-
-Inspect expose the [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) integration, allowing you to inspect transformation steps of Vite. It can be helpful to understand how each plugin is transforming your code and spot potential issues.
-
-<img src="./assets/inspect.png" />
-
-### Inspector
-
-You can also use the "Inspector" feature to inspect the DOM tree and see which component is rendering it. Click to go to your editor of the specific line. Making it much easier to make changes, without the requirement of understanding the project structure thoroughly. (This feature is implemented based on the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector))
-
-<img src="./assets/inspector.png" height=450 />
-
-## 📦 Installation
-
-```
-
-# vite-plugin-vue-devtools 
-
-pnpm install vite-plugin-vue-devtools -D
-
-```
-
-## 🦄 Usage
-
-### Configuration Vite
-
-```ts
-import { defineConfig } from 'vite'
-import VueDevTools from 'vite-plugin-vue-devtools'
-
-export default defineConfig({
-  plugins: [
-    VueDevTools(),
-    vue(),
-  ],
-})
-```
-
-### Options
-
-```ts
-interface VitePluginVueDevToolsOptions {
-  /**
-  * append an import to the module id ending with `appendTo` instead of adding a script into body
-  * useful for projects that do not use html file as an entry
-  *
-  * WARNING: only set this if you know exactly what it does.
-  */
-  appendTo?: string | RegExp
-}
-```
-
-## 💡 Notice
-
-- Only available in development mode.
-- Only support Vue3.0+.
-- Currently only supports single-instance Vue applications (multi-instance support is coming soon).
-- Doesn't support SSR (If you're using Nuxt, use [nuxt/devtools](https://github.com/nuxt/devtools) directly).
-- The plugin follows Vue's DevTools configuration, so if you have configured the `hide` option, it will also be applied in this plugin. e.g.
-
-  ```js
-  // This Vue instance will be ignored by the plugin.
-  createApp({
-    render: () => h(App),
-    devtools: {
-      hide: true,
-    },
-  })
-  ```
-
-## 📖 Blog Post
-
-- [Introducing Vue DevTools (Vite Plugin)](https://gist.github.com/webfansplz/bc90a773a0dd474a34e043ab2d2a37a4)
-
-## 🌸 Credits
-
-- This project is highly inspired by [nuxt/devtools](https://github.com/nuxt/devtools). Kudos to Anthony Fu and Nuxt team for the awesome work!
-
-- [vuejs/devtools](https://github.com/vuejs/devtools)
-
-
-## 👨‍💻 Contributors
-
-<a href="https://github.com/webfansplz/vite-plugin-vue-devtools/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=webfansplz/vite-plugin-vue-devtools" />   
-</a>    
-
-## 📄 License
-
-[MIT LICENSE](./LICENSE)
-

package/dist/client/assets/VSectionBlock-52804693.css

@@ -1,18 +0,0 @@
-
-details[data-v-cf2e46eb] {
-  border-style:none;;
-}
-summary[data-v-cf2e46eb] {
-  border-style:none;;
-  list-style: none;
-}
-details[open] summary[data-v-cf2e46eb] {
-  border-style:none;;
-}
-details summary[data-v-cf2e46eb]::-webkit-details-marker {
-  display:none;
-}
-details[open] .chevron[data-v-cf2e46eb] {
-  transform: rotate(180deg);
-  opacity: 0.75;
-}