vite-plugin-vue-devtools 7.3.5 → 7.3.7

package/dist/vite.mjs

@@ -1,5 +1,6 @@
 import { fileURLToPath } from 'node:url';
 import path$a, { dirname, resolve as resolve$1 } from 'node:path';
+import fs$8 from 'node:fs';
 import { normalizePath } from 'vite';
 import sirv from 'sirv';
 import Inspect from 'vite-plugin-inspect';
@@ -6879,6 +6880,7 @@ function normalizeWindowsPath(input = "") {
 const _UNC_REGEX = /^[/\\]{2}/;
 const _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/;
 const _DRIVE_LETTER_RE = /^[A-Za-z]:$/;
+const _ROOT_FOLDER_RE = /^\/([A-Za-z]:)?$/;
 const normalize = function(path) {
   if (path.length === 0) {
     return ".";
@@ -7013,6 +7015,22 @@ function normalizeString(path, allowAboveRoot) {
 const isAbsolute = function(p) {
   return _IS_ABSOLUTE_RE.test(p);
 };
+const relative = function(from, to) {
+  const _from = resolve(from).replace(_ROOT_FOLDER_RE, "$1").split("/");
+  const _to = resolve(to).replace(_ROOT_FOLDER_RE, "$1").split("/");
+  if (_to[0][1] === ":" && _from[0][1] === ":" && _from[0] !== _to[0]) {
+    return _to.join("/");
+  }
+  const _fromCopy = [..._from];
+  for (const segment of _fromCopy) {
+    if (_to[0] !== segment) {
+      break;
+    }
+    _from.shift();
+    _to.shift();
+  }
+  return [..._from.map(() => ".."), ..._to].join("/");
+};
 
 const decoder = new TextDecoder();
 const toUTF8String = (input, start = 0, end = input.length) => decoder.decode(input.slice(start, end));
@@ -7579,19 +7597,72 @@ const TGA = {
   }
 };
 
+function readIFD(buffer, isBigEndian) {
+  const ifdOffset = readUInt(buffer, 32, 4, isBigEndian);
+  let bufferSize = 1024;
+  const fileSize = buffer.length;
+  if (ifdOffset + bufferSize > fileSize) {
+    bufferSize = fileSize - ifdOffset - 10;
+  }
+  return buffer.slice(ifdOffset + 2, ifdOffset + 2 + bufferSize);
+}
+function readValue(buffer, isBigEndian) {
+  const low = readUInt(buffer, 16, 8, isBigEndian);
+  const high = readUInt(buffer, 16, 10, isBigEndian);
+  return (high << 16) + low;
+}
+function nextTag(buffer) {
+  if (buffer.length > 24) {
+    return buffer.slice(12);
+  }
+}
+function extractTags(buffer, isBigEndian) {
+  const tags = {};
+  let temp = buffer;
+  while (temp && temp.length > 0) {
+    const code = readUInt(temp, 16, 0, isBigEndian);
+    const type = readUInt(temp, 16, 2, isBigEndian);
+    const length = readUInt(temp, 32, 4, isBigEndian);
+    if (code === 0) {
+      break;
+    } else {
+      if (length === 1 && (type === 3 || type === 4)) {
+        tags[code] = readValue(temp, isBigEndian);
+      }
+      temp = nextTag(temp);
+    }
+  }
+  return tags;
+}
+function determineEndianness(input) {
+  const signature = toUTF8String(input, 0, 2);
+  if (signature === "II") {
+    return "LE";
+  } else if (signature === "MM") {
+    return "BE";
+  }
+}
 const signatures = /* @__PURE__ */ new Set([
-  "492049",
-  // ?
+  // '492049', // currently not supported
   "49492a00",
   // Little endian
-  "4d4d002a",
-  // Big Endian
   "4d4d002a"
-  // BigTIFF > 4GB. currently not supported
+  // Big Endian
+  // '4d4d002a', // BigTIFF > 4GB. currently not supported
 ]);
 const TIFF = {
   validate: (input) => signatures.has(toHexString(input, 0, 4)),
-  calculate: () => ({ width: void 0, height: void 0 })
+  calculate(input) {
+    const isBigEndian = determineEndianness(input) === "BE";
+    const ifdBuffer = readIFD(input, isBigEndian);
+    const tags = extractTags(ifdBuffer, isBigEndian);
+    const width = tags[256];
+    const height = tags[257];
+    if (!width || !height) {
+      throw new TypeError("Invalid Tiff. Missing tags");
+    }
+    return { height, width };
+  }
 };
 
 function calculateExtended(input) {
@@ -7643,6 +7714,48 @@ const WEBP = {
   }
 };
 
+const AVIF = {
+  validate: (input) => toUTF8String(input, 8, 12) === "avif",
+  calculate: (input) => {
+    const metaBox = findBox(input, "meta");
+    const iprpBox = findBox(
+      input,
+      "iprp",
+      metaBox.offset + 12,
+      metaBox.offset + metaBox.size
+    );
+    const ipcoBox = findBox(
+      input,
+      "ipco",
+      iprpBox.offset + 8,
+      iprpBox.offset + iprpBox.size
+    );
+    const ispeBox = findBox(
+      input,
+      "ispe",
+      ipcoBox.offset + 8,
+      ipcoBox.offset + ipcoBox.size
+    );
+    const width = readUInt32BE(input, ispeBox.offset + 12);
+    const height = readUInt32BE(input, ispeBox.offset + 16);
+    return { width, height };
+  }
+};
+function findBox(input, type, startOffset = 0, endOffset = input.length) {
+  for (let offset = startOffset; offset < endOffset; ) {
+    const size = readUInt32BE(input, offset);
+    const boxType = toUTF8String(input, offset + 4, offset + 8);
+    if (boxType === type) {
+      return { offset, size };
+    }
+    if (size <= 0 || offset + size > endOffset) {
+      break;
+    }
+    offset += size;
+  }
+  throw new Error(`${type} box not found`);
+}
+
 const typeHandlers = {
   bmp: BMP,
   cur: CUR,
@@ -7660,7 +7773,8 @@ const typeHandlers = {
   svg: SVG,
   tga: TGA,
   tiff: TIFF,
-  webp: WEBP
+  webp: WEBP,
+  avif: AVIF
 };
 
 const keys = Object.keys(typeHandlers);
@@ -7724,6 +7838,8 @@ function getAssetsFunctions(ctx) {
   async function scan() {
     const dir = resolve(config.root);
     const baseURL = config.base;
+    const publicDir = config.publicDir;
+    const relativePublicDir = publicDir === "" ? "" : `${relative(dir, publicDir)}/`;
     const files = await fg([
       // image
       "**/*.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)",
@@ -7749,15 +7865,16 @@ function getAssetsFunctions(ctx) {
         "**/pnpm-workspace.*"
       ]
     });
-    cache = await Promise.all(files.map(async (path) => {
-      const filePath = resolve(dir, path);
+    cache = await Promise.all(files.map(async (relativePath) => {
+      const filePath = resolve(dir, relativePath);
       const stat = await fsp.lstat(filePath);
-      path = path.startsWith("public/") ? path.slice(7) : path;
+      const path = relativePath.replace(relativePublicDir, "");
       return {
         path,
+        relativePath,
         publicPath: join(baseURL, path),
         filePath,
-        type: guessType(path),
+        type: guessType(relativePath),
         size: stat.size,
         mtime: stat.mtimeMs
       };
@@ -7854,6 +7971,10 @@ function getRpcFunctions(ctx) {
   };
 }
 
+function removeUrlQuery(url) {
+  return url.replace(/\?.*$/, "");
+}
+
 function getVueDevtoolsPath() {
   const pluginPath = normalizePath(path$a.dirname(fileURLToPath(import.meta.url)));
   return pluginPath.replace(/\/dist$/, "//src");
@@ -7866,6 +7987,7 @@ const toggleComboKeysMap = {
 function normalizeComboKeyPrint(toggleComboKey) {
   return toggleComboKey.split("-").map((key) => toggleComboKeysMap[key] || key[0].toUpperCase() + key.slice(1)).join(dim("+"));
 }
+const devtoolsNextResourceSymbol = "?__vue-devtools-next-resource";
 const defaultOptions = {
   appendTo: "",
   componentInspector: true,
@@ -7908,6 +8030,8 @@ function VitePluginVueDevTools(options) {
 `);
     };
   }
+  const devtoolsOptionsImportee = "virtual:vue-devtools-options";
+  const resolvedDevtoolsOptions = `\0${devtoolsOptionsImportee}`;
   const plugin = {
     name: "vite-plugin-vue-devtools",
     enforce: "pre",
@@ -7919,16 +8043,20 @@ function VitePluginVueDevTools(options) {
       configureServer(server);
     },
     async resolveId(importee) {
-      if (importee.startsWith("virtual:vue-devtools-options")) {
-        return importee;
+      if (importee === devtoolsOptionsImportee) {
+        return resolvedDevtoolsOptions;
       } else if (importee.startsWith("virtual:vue-devtools-path:")) {
         const resolved = importee.replace("virtual:vue-devtools-path:", `${vueDevtoolsPath}/`);
-        return resolved;
+        return `${resolved}${devtoolsNextResourceSymbol}`;
       }
     },
     async load(id) {
-      if (id === "virtual:vue-devtools-options")
+      if (id === resolvedDevtoolsOptions) {
         return `export default ${JSON.stringify({ base: config.base, componentInspector: pluginOptions.componentInspector })}`;
+      } else if (id.endsWith(devtoolsNextResourceSymbol)) {
+        const filename = removeUrlQuery(id);
+        return await fs$8.promises.readFile(filename, "utf-8");
+      }
     },
     transform(code, id, options2) {
       if (options2?.ssr)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-vue-devtools",
   "type": "module",
-  "version": "7.3.5",
+  "version": "7.3.7",
   "description": "A vite plugin for Vue DevTools",
   "author": "webfansplz",
   "license": "MIT",
@@ -49,15 +49,15 @@
     "execa": "^8.0.1",
     "sirv": "^2.0.4",
     "vite-plugin-inspect": "^0.8.4",
-    "vite-plugin-vue-inspector": "^5.1.2",
-    "@vue/devtools-core": "^7.3.5",
-    "@vue/devtools-kit": "^7.3.5",
-    "@vue/devtools-shared": "^7.3.5"
+    "vite-plugin-vue-inspector": "^5.1.3",
+    "@vue/devtools-shared": "^7.3.7",
+    "@vue/devtools-core": "^7.3.7",
+    "@vue/devtools-kit": "^7.3.7"
   },
   "devDependencies": {
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.10",
     "fast-glob": "^3.3.2",
-    "image-meta": "^0.2.0",
+    "image-meta": "^0.2.1",
     "pathe": "^1.1.2"
   },
   "scripts": {

package/src/overlay/devtools-overlay.css

@@ -1 +1 @@
-.vue-devtools-frame[data-v-df0df9e8]{position:fixed;z-index:2147483645}.vue-devtools-frame[data-v-df0df9e8] 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-df0df9e8]{width:400px!important;height:80px!important}.vue-devtools-frame.view-mode-fullscreen[data-v-df0df9e8]{width:100vw!important;height:100vh!important;z-index:1!important;bottom:0!important;transform:none!important}.vue-devtools-frame.view-mode-fullscreen[data-v-df0df9e8] iframe{border-radius:0!important}.vue-devtools-resize--horizontal[data-v-df0df9e8]{position:absolute;left:6px;right:6px;height:10px;margin:-5px 0;cursor:ns-resize;border-radius:5px}.vue-devtools-resize--vertical[data-v-df0df9e8]{position:absolute;top:6px;bottom:0;width:10px;margin:0 -5px;cursor:ew-resize;border-radius:5px}.vue-devtools-resize-corner[data-v-df0df9e8]{position:absolute;width:14px;height:14px;margin:-6px;border-radius:6px}.vue-devtools-resize[data-v-df0df9e8]:hover{background:#7d7d7d1a}.vue-devtools__anchor[data-v-19b8fd4e]{position:fixed;z-index:2147483645;transform-origin:center center;transform:translate(-50%,-50%) rotate(0)}.vue-devtools__anchor.fullscreen[data-v-19b8fd4e]{transform:none!important;left:0!important}.vue-devtools__anchor-btn[data-v-19b8fd4e]{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-19b8fd4e]:hover{opacity:1}.vue-devtools__anchor-btn svg[data-v-19b8fd4e]{width:14px;height:14px}.vue-devtools__anchor-btn.active[data-v-19b8fd4e]{cursor:pointer}.vue-devtools__anchor .panel-entry-btn[data-v-19b8fd4e]{cursor:pointer;flex:none}.vue-devtools__anchor--vertical .panel-entry-btn[data-v-19b8fd4e]{transform:rotate(-90deg)}.vue-devtools__anchor--vertical .vue-devtools__panel[data-v-19b8fd4e]{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-19b8fd4e]{max-width:32px;padding:2px 0}.vue-devtools__anchor--hide .vue-devtools__panel-content[data-v-19b8fd4e]{opacity:0}.vue-devtools__anchor--glowing[data-v-19b8fd4e]{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-19b8fd4e]{opacity:.6}.vue-devtools__panel[data-v-19b8fd4e]{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-19b8fd4e]{transition:opacity .4s ease}.vue-devtools__panel-divider[data-v-19b8fd4e]{border-left:1px solid rgba(136,136,136,.2);width:1px;height:10px}@keyframes blink-19b8fd4e{0%{opacity:.2}50%{opacity:.6}to{opacity:.2}}@media print{#vue-devtools-anchor[data-v-19b8fd4e]{display:none}}
+.vue-devtools-frame[data-v-df0df9e8]{position:fixed;z-index:2147483645}.vue-devtools-frame[data-v-df0df9e8] 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-df0df9e8]{width:400px!important;height:80px!important}.vue-devtools-frame.view-mode-fullscreen[data-v-df0df9e8]{width:100vw!important;height:100vh!important;z-index:1!important;bottom:0!important;transform:none!important}.vue-devtools-frame.view-mode-fullscreen[data-v-df0df9e8] iframe{border-radius:0!important}.vue-devtools-resize--horizontal[data-v-df0df9e8]{position:absolute;left:6px;right:6px;height:10px;margin:-5px 0;cursor:ns-resize;border-radius:5px}.vue-devtools-resize--vertical[data-v-df0df9e8]{position:absolute;top:6px;bottom:0;width:10px;margin:0 -5px;cursor:ew-resize;border-radius:5px}.vue-devtools-resize-corner[data-v-df0df9e8]{position:absolute;width:14px;height:14px;margin:-6px;border-radius:6px}.vue-devtools-resize[data-v-df0df9e8]:hover{background:#7d7d7d1a}.vue-devtools__anchor[data-v-a5b0a558]{position:fixed;z-index:2147483645;transform-origin:center center;transform:translate(-50%,-50%) rotate(0)}.vue-devtools__anchor.fullscreen[data-v-a5b0a558]{transform:none!important;left:0!important}.vue-devtools__anchor-btn[data-v-a5b0a558]{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-a5b0a558]:hover{opacity:1}.vue-devtools__anchor-btn svg[data-v-a5b0a558]{width:14px;height:14px}.vue-devtools__anchor-btn.active[data-v-a5b0a558]{cursor:pointer}.vue-devtools__anchor .panel-entry-btn[data-v-a5b0a558]{cursor:pointer;flex:none}.vue-devtools__anchor--vertical .panel-entry-btn[data-v-a5b0a558]{transform:rotate(-90deg)}.vue-devtools__anchor--vertical .vue-devtools__panel[data-v-a5b0a558]{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-a5b0a558]{max-width:32px;padding:2px 0}.vue-devtools__anchor--hide .vue-devtools__panel-content[data-v-a5b0a558]{opacity:0}.vue-devtools__anchor--glowing[data-v-a5b0a558]{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-a5b0a558]{opacity:.6}.vue-devtools__panel[data-v-a5b0a558]{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-a5b0a558]{transition:opacity .4s ease}.vue-devtools__panel-divider[data-v-a5b0a558]{border-left:1px solid rgba(136,136,136,.2);width:1px;height:10px}@keyframes blink-a5b0a558{0%{opacity:.2}50%{opacity:.6}to{opacity:.2}}@media print{#vue-devtools-anchor[data-v-a5b0a558]{display:none}}