vite-plugin-vue-devtools 0.1.6 → 0.2.0

package/dist/index.mjs

@@ -23,7 +23,6 @@ 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`;
@@ -7566,7 +7565,10 @@ async function getPackages(root) {
   for (const type in categorizedPackages) {
     for (const name in categorizedPackages[type]) {
       const version = categorizedPackages[type][name];
-      packages[name] = version;
+      packages[name] = {
+        version,
+        type
+      };
     }
   }
   return {
@@ -13606,22 +13608,29 @@ const parseNi = (agent, args, ctx) => {
     return getCommand(agent, "install", args);
   return getCommand(agent, "add", args);
 };
+const parseNun = (agent, args) => {
+  if (args.includes("-g"))
+    return getCommand(agent, "global_uninstall", exclude(args, "-g"));
+  return getCommand(agent, "uninstall", args);
+};
 if (typeof process !== 'undefined') {
 	(process.env || {});
 	process.stdout && process.stdout.isTTY;
 }
 
-async function installPackage(packages, options = {}) {
+async function execNpmScript(packages, options = {}) {
   const {
     isDev = false,
     cwd = process.cwd(),
     callback = () => {
-    }
+    },
+    type = "install"
   } = options;
   const agent = await detect({});
-  const command = await parseNi(agent, [...packages, ...isDev ? ["-D"] : [], "--ignore-scripts"]);
-  const { execaCommand: execaCommand2 } = await import('execa');
-  const _process = execaCommand2(command, {
+  const fn = type === "install" ? parseNi : parseNun;
+  const command = await fn(agent, [...packages, ...isDev ? ["-D"] : [], type === "install" ? "--ignore-scripts" : ""]);
+  const { execaCommand } = await import('execa');
+  const _process = execaCommand(command, {
     encoding: "utf-8",
     cwd,
     env: {
@@ -13641,7 +13650,11 @@ async function installPackage(packages, options = {}) {
     callback("data", data.toString());
   });
   _process.on("exit", (code) => {
-    callback("data", "\n\n> Successfully installed. \n\n");
+    callback("data", `
+
+> Successfully ${type === "install" ? "installed" : "removed"}. 
+
+`);
     callback("exit", `${code}`);
   });
 }
@@ -13657,6 +13670,7 @@ async function getVueSFCList(root) {
   return files;
 }
 async function getComponentInfo(root, filename) {
+  const { parseComponent } = await import('@webfansplz/vuedoc-parser');
   return await parseComponent({
     filename: path$3$1.resolve(root, filename)
   });
@@ -13688,8 +13702,20 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
       getPackages: () => getPackages(config.root),
       getVueSFCList: () => getVueSFCList(config.root),
       getComponentInfo: (filename) => getComponentInfo(config.root, filename),
-      installPackage: (packages, options2 = {}) => installPackage(packages, {
+      installPackage: (packages, options2 = {}) => execNpmScript(packages, {
+        ...options2,
+        type: "install",
+        cwd: config.root,
+        callback: (type, data) => {
+          if (type === "data")
+            rpc.onTerminalData({ data });
+          else if (type === "exit")
+            rpc.onTerminalExit({ data });
+        }
+      }),
+      uninstallPackage: (packages, options2 = {}) => execNpmScript(packages, {
         ...options2,
+        type: "uninstall",
         cwd: config.root,
         callback: (type, data) => {
           if (type === "data")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "packageManager": "pnpm@8.4.0",
   "description": "A vite plugin for Vue Devtools",
   "author": "webfansplz",

package/src/node/Container.vue

@@ -45,7 +45,7 @@ const panelState = ref({
 const panelStyle = computed(() => {
   const height = `calc(${panelState.value.height}vh - ${PANEL_PADDING}px)`
   const width = `calc(${panelState.value.width}vw - ${PANEL_PADDING}px)`
-  if (panelState.value.viewMode === 'component-inspector') {
+  if (panelState.value.viewMode === 'xs') {
     return {
       bottom: `${PANEL_PADDING}px`,
       left: '50%',
@@ -199,15 +199,27 @@ document.addEventListener('mousemove', (e) => {
 
 /** -----inspector end-----**/
 
+function toggleViewMode(state) {
+  if (state) {
+    panelState.value.viewMode = state
+    return
+  }
+  if (panelState.value.viewMode === 'xs')
+    panelState.value.viewMode = 'default'
+
+  else
+    panelState.value.viewMode = 'xs'
+}
+
 function enableComponentInspector() {
   window.__VUE_INSPECTOR__?.enable()
-  panelState.value.viewMode = 'component-inspector'
+  panelState.value.viewMode = 'xs'
 }
 
 function disableComponentInspector() {
   window.__VUE_INSPECTOR__?.disable()
   hook.emit('host:inspector:close')
-  if (panelState.value.viewMode === 'component-inspector')
+  if (panelState.value.viewMode === 'xs')
     panelState.value.viewMode = 'default'
 }
 /** -----inspector end-----**/
@@ -251,6 +263,7 @@ function setupClient() {
       disable: disableComponentInspector,
     },
     panel: {
+      toggleViewMode,
       toggle: togglePanel,
       togglePosition(position) {
         panelState.value.position = position
@@ -445,8 +458,8 @@ window.addEventListener('click', (event) => {
   </div>
   <!-- toggle button -->
   <button
-    ref="toggleButtonRef" class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition"
-    @click.prevent="togglePanel"
+    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" />