vite-plugin-vue-devtools 7.0.12 → 7.0.14

package/dist/vite.mjs

@@ -105,7 +105,8 @@ function normalizeComboKeyPrint(toggleComboKey) {
 const defaultOptions = {
   appendTo: "",
   openInEditorHost: false,
-  clientHost: false
+  clientHost: false,
+  componentInspector: true
 };
 function mergeOptions(options) {
   return Object.assign({}, defaultOptions, options);
@@ -123,16 +124,23 @@ function VitePluginVueDevTools(options) {
       single: true,
       dev: true
     }));
-    setupViteRPCServer(server.ws, {
+    const rpcServer = setupViteRPCServer(server.ws, {
       root: () => config.root,
       ...setupAssetsRPC({
         root: config.root,
-        base
+        base,
+        server,
+        getRpcServer
       }),
       ...setupGraphRPC({
-        rpc: inspect.api.rpc
+        rpc: inspect.api.rpc,
+        server,
+        getRpcServer
       })
     });
+    function getRpcServer() {
+      return rpcServer;
+    }
     const _printUrls = server.printUrls;
     const colorUrl = (url) => cyan(url.replace(/:(\d+)\//, (_, port) => `:${bold(port)}/`));
     server.printUrls = () => {
@@ -165,7 +173,7 @@ function VitePluginVueDevTools(options) {
     },
     async load(id) {
       if (id === "virtual:vue-devtools-options")
-        return `export default ${JSON.stringify({ base: config.base, clientHost: pluginOptions.clientHost })}`;
+        return `export default ${JSON.stringify({ base: config.base, clientHost: pluginOptions.clientHost, componentInspector: pluginOptions.componentInspector })}`;
     },
     transform(code, id) {
       const { root, base } = config;
@@ -194,7 +202,7 @@ import 'virtual:vue-devtools-path:overlay.js'`;
             }
           },
           // inject inspector script manually to ensure it's loaded after vue-devtools
-          {
+          pluginOptions.componentInspector && {
             tag: "script",
             injectTo: "head-prepend",
             attrs: {
@@ -202,7 +210,7 @@ import 'virtual:vue-devtools-path:overlay.js'`;
               src: `${config.base || "/"}@id/virtual:vue-inspector-path:load.js`
             }
           }
-        ]
+        ].filter(Boolean)
       };
     },
     async buildEnd() {
@@ -210,14 +218,15 @@ import 'virtual:vue-devtools-path:overlay.js'`;
   };
   return [
     inspect,
-    VueInspector({
+    pluginOptions.componentInspector && VueInspector({
       toggleComboKey: "",
       toggleButtonVisibility: "never",
+      ...typeof pluginOptions.componentInspector === "boolean" ? {} : pluginOptions.componentInspector,
       openInEditorHost: pluginOptions.openInEditorHost,
       appendTo: pluginOptions.appendTo || "manually"
     }),
     plugin
-  ];
+  ].filter(Boolean);
 }
 
 export { VitePluginVueDevTools as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-vue-devtools",
   "type": "module",
-  "version": "7.0.12",
+  "version": "7.0.14",
   "description": "A vite plugin for Vue DevTools",
   "author": "webfansplz",
   "license": "MIT",
@@ -45,17 +45,17 @@
     "vite": "^3.1.0 || ^4.0.0-0 || ^5.0.0-0"
   },
   "dependencies": {
-    "birpc": "^0.2.14",
+    "birpc": "^0.2.15",
     "execa": "^8.0.1",
     "sirv": "^2.0.4",
-    "vite-plugin-inspect": "^0.8.2",
+    "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-vue-inspector": "^4.0.2",
-    "@vue/devtools-core": "^7.0.12",
-    "@vue/devtools-shared": "^7.0.12",
-    "@vue/devtools-kit": "^7.0.12"
+    "@vue/devtools-core": "^7.0.14",
+    "@vue/devtools-kit": "^7.0.14",
+    "@vue/devtools-shared": "^7.0.14"
   },
   "devDependencies": {
-    "@types/node": "^20.11.6",
+    "@types/node": "^20.11.10",
     "fast-glob": "^3.3.2",
     "image-meta": "^0.2.0",
     "pathe": "^1.1.2"

package/src/overlay/devtools-overlay.css

@@ -1 +1 @@
-.vue-devtools-frame[data-v-8b2fd87f]{position:fixed;z-index:2147483645}.vue-devtools-frame[data-v-8b2fd87f] iframe{width:100%;height:100%;outline:none;background:var(--vue-devtools-widget-bg);border:1px solid rgba(125,125,125,.2);border-radius:10px}.vue-devtools-frame.view-mode-xs[data-v-8b2fd87f]{width:400px!important;height:80px!important}.vue-devtools-frame.view-mode-fullscreen[data-v-8b2fd87f]{width:100vw!important;height:100vh!important;z-index:1!important;bottom:0!important;transform:none!important}.vue-devtools-frame.view-mode-fullscreen[data-v-8b2fd87f] iframe{border-radius:0!important}.vue-devtools-resize--horizontal[data-v-8b2fd87f]{position:absolute;left:6px;right:6px;height:10px;margin:-5px 0;cursor:ns-resize;border-radius:5px}.vue-devtools-resize--vertical[data-v-8b2fd87f]{position:absolute;top:6px;bottom:0;width:10px;margin:0 -5px;cursor:ew-resize;border-radius:5px}.vue-devtools-resize-corner[data-v-8b2fd87f]{position:absolute;width:14px;height:14px;margin:-6px;border-radius:6px}.vue-devtools-resize[data-v-8b2fd87f]:hover{background:#7d7d7d1a}.vue-devtools__anchor[data-v-1d9c6fa0]{position:fixed;z-index:2147483645;transform-origin:center center;transform:translate(-50%,-50%) rotate(0)}.vue-devtools__anchor.fullscreen[data-v-1d9c6fa0]{transform:none!important;left:0!important}.vue-devtools__anchor-btn[data-v-1d9c6fa0]{border-radius:100%;border-width:0;width:30px;height:30px;display:flex;justify-content:center;align-items:center;opacity:.8;transition:opacity .2s ease-in-out}.vue-devtools__anchor-btn[data-v-1d9c6fa0]:hover{opacity:1}.vue-devtools__anchor-btn svg[data-v-1d9c6fa0]{width:14px;height:14px}.vue-devtools__anchor-btn.active[data-v-1d9c6fa0]{cursor:pointer}.vue-devtools__anchor .panel-entry-btn[data-v-1d9c6fa0]{cursor:pointer;flex:none}.vue-devtools__anchor--vertical .panel-entry-btn[data-v-1d9c6fa0]{transform:rotate(-90deg)}.vue-devtools__anchor--vertical .vue-devtools__panel[data-v-1d9c6fa0]{transform:translate(-50%,-50%) rotate(90deg);box-shadow:2px -2px 8px var(--vue-devtools-widget-shadow)}.vue-devtools__anchor--hide .vue-devtools__panel[data-v-1d9c6fa0]{max-width:32px;padding:2px 0}.vue-devtools__anchor--hide .vue-devtools__panel-content[data-v-1d9c6fa0]{opacity:0}.vue-devtools__anchor--glowing[data-v-1d9c6fa0]{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:160px;height:160px;opacity:0;transition:all 1s ease;pointer-events:none;z-index:-1;border-radius:9999px;background-image:linear-gradient(45deg,#00dc82,#36e4da,#0047e1);filter:blur(60px)}.vue-devtools__anchor:hover .vue-devtools__anchor--glowing[data-v-1d9c6fa0]{opacity:.6}.vue-devtools__panel[data-v-1d9c6fa0]{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;justify-content:flex-start;overflow:hidden;align-items:center;gap:2px;height:30px;padding:4px 4px 4px 5px;box-sizing:border-box;border:1px solid var(--vue-devtools-widget-border);border-radius:20px;background-color:var(--vue-devtools-widget-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--vue-devtools-widget-fg);box-shadow:2px 2px 8px var(--vue-devtools-widget-shadow);-webkit-user-select:none;user-select:none;max-width:150px;transition:max-width .4s ease,padding .5s ease,transform .3s ease,all .4s ease}.vue-devtools__panel-content[data-v-1d9c6fa0]{transition:opacity .4s ease}.vue-devtools__panel-divider[data-v-1d9c6fa0]{border-left:1px solid rgba(136,136,136,.2);width:1px;height:10px}@keyframes blink-1d9c6fa0{0%{opacity:.2}50%{opacity:.6}to{opacity:.2}}@media print{#vue-devtools-anchor[data-v-1d9c6fa0]{display:none}}
+.vue-devtools-frame[data-v-8b2fd87f]{position:fixed;z-index:2147483645}.vue-devtools-frame[data-v-8b2fd87f] iframe{width:100%;height:100%;outline:none;background:var(--vue-devtools-widget-bg);border:1px solid rgba(125,125,125,.2);border-radius:10px}.vue-devtools-frame.view-mode-xs[data-v-8b2fd87f]{width:400px!important;height:80px!important}.vue-devtools-frame.view-mode-fullscreen[data-v-8b2fd87f]{width:100vw!important;height:100vh!important;z-index:1!important;bottom:0!important;transform:none!important}.vue-devtools-frame.view-mode-fullscreen[data-v-8b2fd87f] iframe{border-radius:0!important}.vue-devtools-resize--horizontal[data-v-8b2fd87f]{position:absolute;left:6px;right:6px;height:10px;margin:-5px 0;cursor:ns-resize;border-radius:5px}.vue-devtools-resize--vertical[data-v-8b2fd87f]{position:absolute;top:6px;bottom:0;width:10px;margin:0 -5px;cursor:ew-resize;border-radius:5px}.vue-devtools-resize-corner[data-v-8b2fd87f]{position:absolute;width:14px;height:14px;margin:-6px;border-radius:6px}.vue-devtools-resize[data-v-8b2fd87f]:hover{background:#7d7d7d1a}.vue-devtools__anchor[data-v-187da182]{position:fixed;z-index:2147483645;transform-origin:center center;transform:translate(-50%,-50%) rotate(0)}.vue-devtools__anchor.fullscreen[data-v-187da182]{transform:none!important;left:0!important}.vue-devtools__anchor-btn[data-v-187da182]{border-radius:100%;border-width:0;width:30px;height:30px;display:flex;justify-content:center;align-items:center;opacity:.8;transition:opacity .2s ease-in-out}.vue-devtools__anchor-btn[data-v-187da182]:hover{opacity:1}.vue-devtools__anchor-btn svg[data-v-187da182]{width:14px;height:14px}.vue-devtools__anchor-btn.active[data-v-187da182]{cursor:pointer}.vue-devtools__anchor .panel-entry-btn[data-v-187da182]{cursor:pointer;flex:none}.vue-devtools__anchor--vertical .panel-entry-btn[data-v-187da182]{transform:rotate(-90deg)}.vue-devtools__anchor--vertical .vue-devtools__panel[data-v-187da182]{transform:translate(-50%,-50%) rotate(90deg);box-shadow:2px -2px 8px var(--vue-devtools-widget-shadow)}.vue-devtools__anchor--hide .vue-devtools__panel[data-v-187da182]{max-width:32px;padding:2px 0}.vue-devtools__anchor--hide .vue-devtools__panel-content[data-v-187da182]{opacity:0}.vue-devtools__anchor--glowing[data-v-187da182]{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:160px;height:160px;opacity:0;transition:all 1s ease;pointer-events:none;z-index:-1;border-radius:9999px;background-image:linear-gradient(45deg,#00dc82,#36e4da,#0047e1);filter:blur(60px)}.vue-devtools__anchor:hover .vue-devtools__anchor--glowing[data-v-187da182]{opacity:.6}.vue-devtools__panel[data-v-187da182]{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;justify-content:flex-start;overflow:hidden;align-items:center;gap:2px;height:30px;padding:4px 4px 4px 5px;box-sizing:border-box;border:1px solid var(--vue-devtools-widget-border);border-radius:20px;background-color:var(--vue-devtools-widget-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--vue-devtools-widget-fg);box-shadow:2px 2px 8px var(--vue-devtools-widget-shadow);-webkit-user-select:none;user-select:none;max-width:150px;transition:max-width .4s ease,padding .5s ease,transform .3s ease,all .4s ease}.vue-devtools__panel-content[data-v-187da182]{transition:opacity .4s ease}.vue-devtools__panel-divider[data-v-187da182]{border-left:1px solid rgba(136,136,136,.2);width:1px;height:10px}@keyframes blink-187da182{0%{opacity:.2}50%{opacity:.6}to{opacity:.2}}@media print{#vue-devtools-anchor[data-v-187da182]{display:none}}