nuxt-devtools-observatory 0.1.16 → 0.1.18

package/dist/runtime/composables/fetch-registry.js

@@ -1,16 +1,41 @@
 import { ref, readonly } from "vue";
+import { getCurrentInstance } from "vue";
+const MAX_FETCH_ENTRIES = 200;
+const MAX_PAYLOAD_BYTES = 1e4;
+function truncatePayload(payload) {
+  if (payload === void 0 || payload === null) {
+    return payload;
+  }
+  try {
+    const str = JSON.stringify(payload);
+    if (str.length <= MAX_PAYLOAD_BYTES) {
+      return JSON.parse(str);
+    }
+    return str.slice(0, MAX_PAYLOAD_BYTES) + "\u2026 (truncated)";
+  } catch {
+    return "[unserializable]";
+  }
+}
 export function setupFetchRegistry() {
   const entries = ref(/* @__PURE__ */ new Map());
   function register(entry) {
-    entries.value.set(entry.id, entry);
-    emit("fetch:start", entry);
+    if (entries.value.size >= MAX_FETCH_ENTRIES) {
+      const oldestKey = entries.value.keys().next().value;
+      if (oldestKey !== void 0) {
+        entries.value.delete(oldestKey);
+      }
+    }
+    const safeEntry = entry.payload !== void 0 ? { ...entry, payload: truncatePayload(entry.payload) } : entry;
+    entries.value.set(safeEntry.id, safeEntry);
+    emit("fetch:start", safeEntry);
   }
   function update(id, patch) {
     const existing = entries.value.get(id);
     if (!existing) {
       return;
     }
-    const updated = { ...existing, ...patch };
+    const safePatch = patch.payload !== void 0 ? { ...patch, payload: truncatePayload(patch.payload) } : patch;
+    const updated = { ...existing, ...safePatch };
     entries.value.set(id, updated);
     emit("fetch:update", updated);
   }
@@ -54,18 +79,20 @@ export function __devFetchHandler(handler, key, meta) {
       line: meta.line
     });
     return Promise.resolve(handler(...args)).then((result) => {
+      const endTime = performance.now();
       registry.update(id, {
         status: "ok",
-        endTime: performance.now(),
-        ms: Math.round(performance.now() - startTime),
+        endTime,
+        ms: Math.round(endTime - startTime),
         payload: result
       });
       return result;
     }).catch((error) => {
+      const endTime = performance.now();
       registry.update(id, {
         status: "error",
-        endTime: performance.now(),
-        ms: Math.round(performance.now() - startTime),
+        endTime,
+        ms: Math.round(endTime - startTime),
         error
       });
       throw error;
@@ -95,66 +122,123 @@ export function __devFetchCall(originalFn, url, opts, meta) {
   }
   const id = `${meta.key}::${Date.now()}`;
   const startTime = performance.now();
-  const payload = window.__NUXT__?.data ?? {};
-  const fromPayload = Object.prototype.hasOwnProperty.call(payload, meta.key);
-  const origin = fromPayload ? "ssr" : "csr";
   const resolvedUrl = resolveUrl(url);
-  registry.register({
-    id,
-    key: meta.key,
-    url: resolvedUrl,
-    status: fromPayload ? "cached" : "pending",
-    origin,
-    startTime,
-    cached: fromPayload,
-    payload: fromPayload ? payload[meta.key] : void 0,
-    file: meta.file,
-    line: meta.line
-  });
-  if (fromPayload) {
-    const optsWithHooks = {
-      ...opts,
-      onResponse: function(ctx) {
-        const entry = registry.getAll().find((e) => e.id === id);
-        if (entry) {
-          registry.update(id, { payload: ctx.response._data });
-        }
-        if (typeof opts.onResponse === "function") {
-          opts.onResponse(ctx);
-        }
-      },
-      onResponseError: typeof opts.onResponseError === "function" ? opts.onResponseError : () => {
+  if (getCurrentInstance() === null) {
+    registry.register({
+      id,
+      key: meta.key,
+      url: resolvedUrl,
+      status: "pending",
+      origin: "csr",
+      startTime,
+      cached: false,
+      file: meta.file,
+      line: meta.line
+    });
+    fetch(resolvedUrl).then(async (r) => {
+      const endTime = performance.now();
+      const size = Number(r.headers.get("content-length")) || void 0;
+      let payload;
+      try {
+        payload = await r.clone().json();
+      } catch {
       }
-    };
-    return originalFn(url, optsWithHooks);
+      registry.update(id, {
+        status: r.ok ? "ok" : "error",
+        endTime,
+        ms: Math.round(endTime - startTime),
+        size,
+        payload
+      });
+    }).catch(() => {
+      const endTime = performance.now();
+      registry.update(id, { status: "error", endTime, ms: Math.round(endTime - startTime) });
+    });
+    return originalFn(url, opts);
   }
-  return originalFn(url, {
+  let responseCount = 0;
+  let lastCallStart = startTime;
+  let initialWasSsr = false;
+  const result = originalFn(url, {
     ...opts,
+    onRequest() {
+      lastCallStart = performance.now();
+      if (typeof opts.onRequest === "function") {
+        ;
+        opts.onRequest();
+      }
+    },
     onResponse({ response }) {
-      const ms = Math.round(performance.now() - startTime);
+      responseCount++;
+      const endTime = performance.now();
+      const ms = Math.round(endTime - lastCallStart);
       const size = Number(response.headers?.get("content-length")) || void 0;
       const cached = response.headers?.get("x-nuxt-cache") === "HIT";
-      registry.update(id, {
-        status: cached ? "cached" : response.ok ? "ok" : "error",
-        endTime: performance.now(),
-        ms,
-        size,
-        cached,
-        payload: response._data
-      });
+      const status = cached ? "cached" : response.ok ? "ok" : "error";
+      if (responseCount === 1 && !initialWasSsr) {
+        registry.update(id, { status, endTime, ms, size, cached, payload: response._data });
+      } else {
+        registry.register({
+          id: `${id}::refresh::${responseCount}`,
+          key: meta.key,
+          url: resolvedUrl,
+          status,
+          origin: "csr",
+          startTime: lastCallStart,
+          endTime,
+          ms,
+          size,
+          cached,
+          payload: response._data,
+          file: meta.file,
+          line: meta.line
+        });
+      }
       if (typeof opts.onResponse === "function") {
         opts.onResponse({ response });
       }
     },
     onResponseError({ response }) {
-      registry.update(id, {
-        status: "error",
-        endTime: performance.now(),
-        ms: Math.round(performance.now() - startTime)
-      });
       if (typeof opts.onResponseError === "function") {
         opts.onResponseError({ response });
       }
     }
   });
+  const statusValue = result?.status?.value;
+  const isSsrHydrated = statusValue === "success";
+  const isDeduplicatedError = statusValue === "error";
+  registry.register({
+    id,
+    key: meta.key,
+    url: resolvedUrl,
+    status: isSsrHydrated ? "cached" : isDeduplicatedError ? "error" : "pending",
+    origin: isSsrHydrated ? "ssr" : "csr",
+    startTime,
+    endTime: isSsrHydrated || isDeduplicatedError ? startTime : void 0,
+    ms: isSsrHydrated || isDeduplicatedError ? 0 : void 0,
+    cached: isSsrHydrated,
+    payload: isSsrHydrated ? result?.data?.value : void 0,
+    file: meta.file,
+    line: meta.line
+  });
+  if (isSsrHydrated) {
+    initialWasSsr = true;
+  }
+  if (!isSsrHydrated && !isDeduplicatedError && typeof result?.then === "function") {
+    result.then(() => {
+      const endTime = performance.now();
+      const existing = registry.getAll().find((e) => e.id === id);
+      if (existing?.status === "pending") {
+        const settled = result?.status?.value;
+        registry.update(id, {
+          status: settled === "success" ? "ok" : "error",
+          endTime,
+          ms: Math.round(endTime - startTime),
+          payload: settled === "success" ? result?.data?.value : void 0
+        });
+      }
+    }).catch(() => {
+    });
+  }
+  return result;
 }

package/dist/runtime/composables/provide-inject-registry.js

@@ -1,46 +1,20 @@
-import { ref, isRef, isReactive, unref, getCurrentInstance, provide, inject } from "vue";
+import { isRef, isReactive, unref, getCurrentInstance, provide, inject } from "vue";
 export function setupProvideInjectRegistry() {
-  const provides = ref([]);
-  const injects = ref([]);
+  const provides = /* @__PURE__ */ new Map();
+  const injects = /* @__PURE__ */ new Map();
   function registerProvide(entry) {
-    const idx = provides.value.findIndex((e) => e.key === entry.key && e.componentUid === entry.componentUid);
-    if (idx !== -1) {
-      provides.value[idx] = entry;
-    } else {
-      provides.value.push(entry);
-    }
+    provides.set(`${entry.key}:${entry.componentUid}`, entry);
     emit("provide:register", entry);
   }
   function registerInject(entry) {
-    const idx = injects.value.findIndex((e) => e.key === entry.key && e.componentUid === entry.componentUid);
-    if (idx !== -1) {
-      injects.value[idx] = entry;
-    } else {
-      injects.value.push(entry);
-    }
+    injects.set(`${entry.key}:${entry.componentUid}`, entry);
     emit("inject:register", entry);
   }
   function clear() {
-    provides.value = [];
-    injects.value = [];
+    provides.clear();
+    injects.clear();
     emit("provide:clear", {});
   }
-  function safeValue(val) {
-    if (val === void 0 || val === null) {
-      return val;
-    }
-    if (typeof val === "function") {
-      return void 0;
-    }
-    if (typeof val === "object") {
-      try {
-        return JSON.parse(JSON.stringify(val));
-      } catch {
-        return String(val);
-      }
-    }
-    return val;
-  }
   function sanitizeProvide(entry) {
     return {
       key: entry.key,
@@ -50,7 +24,9 @@ export function setupProvideInjectRegistry() {
       parentUid: entry.parentUid,
       parentFile: entry.parentFile,
       isReactive: entry.isReactive,
-      valueSnapshot: safeValue(entry.valueSnapshot),
+      // valueSnapshot is already a plain serializable value captured at provide()
+      // time by safeSnapshot() in the shim — no need to deep-clone it again here.
+      valueSnapshot: entry.valueSnapshot,
       line: entry.line,
       scope: entry.scope,
       isShadowing: entry.isShadowing
@@ -72,8 +48,8 @@ export function setupProvideInjectRegistry() {
   }
   function getAll() {
     return {
-      provides: provides.value.map(sanitizeProvide),
-      injects: injects.value.map(sanitizeInject)
+      provides: [...provides.values()].map(sanitizeProvide),
+      injects: [...injects.values()].map(sanitizeInject)
     };
   }
   function emit(event, data) {

package/dist/runtime/composables/render-registry.js

@@ -3,7 +3,6 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
   const entries = ref(/* @__PURE__ */ new Map());
   const pendingTriggeredRenders = /* @__PURE__ */ new Set();
   const renderStartTimes = /* @__PURE__ */ new Map();
-  let preResetUids = /* @__PURE__ */ new Set();
   let currentRoute = "/";
   const MAX_TIMELINE = 100;
   function setRoute(path) {
@@ -16,17 +15,38 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     }
     return entries.value.get(uid);
   }
-  function syncRect(entry, instance) {
-    const rect = instance.$el?.getBoundingClientRect?.();
-    entry.rect = rect ? {
-      x: Math.round(rect.x),
-      y: Math.round(rect.y),
-      width: Math.round(rect.width),
-      height: Math.round(rect.height),
-      top: Math.round(rect.top),
-      left: Math.round(rect.left)
-    } : void 0;
+  const dirtyRects = /* @__PURE__ */ new Set();
+  function markRectDirty(uid) {
+    dirtyRects.add(uid);
   }
+  function flushDirtyRects() {
+    if (dirtyRects.size === 0) {
+      return;
+    }
+    for (const uid of dirtyRects) {
+      const entry = entries.value.get(uid);
+      if (!entry) {
+        dirtyRects.delete(uid);
+        continue;
+      }
+      const el = _liveElements.get(uid);
+      if (!el) {
+        dirtyRects.delete(uid);
+        continue;
+      }
+      const rect = el.getBoundingClientRect?.();
+      entry.rect = rect ? {
+        x: Math.round(rect.x),
+        y: Math.round(rect.y),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+        top: Math.round(rect.top),
+        left: Math.round(rect.left)
+      } : void 0;
+      dirtyRects.delete(uid);
+    }
+  }
+  const _liveElements = /* @__PURE__ */ new Map();
   function removeEntry(instance) {
     const uid = instance.$.uid;
     entries.value.delete(uid);
@@ -64,10 +84,11 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     }
   }
   function reset() {
-    preResetUids = new Set(entries.value.keys());
     pendingTriggeredRenders.clear();
     renderStartTimes.clear();
+    dirtyRects.clear();
     for (const entry of entries.value.values()) {
+      entry.isPersistent = true;
       entry.rerenders = 0;
       entry.totalMs = 0;
       entry.avgMs = 0;
@@ -82,16 +103,14 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     mounted() {
       const entry = ensureEntry(this);
       entry.mountCount++;
-      if (preResetUids.has(entry.uid)) {
-        entry.isPersistent = true;
-      }
       const isHydration = options.isHydrating?.() ?? false;
       if (isHydration && entry.mountCount === 1) {
         entry.isHydrationMount = true;
       } else if (entry.mountCount > 1) {
         entry.rerenders++;
       }
-      syncRect(entry, this);
+      _liveElements.set(entry.uid, this.$el);
+      markRectDirty(entry.uid);
       if (!entry.isPersistent || entry.mountCount === 1) {
         recordRenderDuration(entry, "mount");
       } else {
@@ -114,15 +133,18 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
       const entry = ensureEntry(this);
       pendingTriggeredRenders.delete(entry.uid);
       entry.rerenders++;
-      syncRect(entry, this);
+      markRectDirty(entry.uid);
       recordRenderDuration(entry, "update");
       emit("render:update", { uid: entry.uid, renders: entry.rerenders });
     },
     unmounted() {
-      pendingTriggeredRenders.delete(this.$.uid);
-      renderStartTimes.delete(this.$.uid);
+      const uid = this.$.uid;
+      pendingTriggeredRenders.delete(uid);
+      renderStartTimes.delete(uid);
+      dirtyRects.delete(uid);
+      _liveElements.delete(uid);
       removeEntry(this);
-      emit("render:remove", { uid: this.$.uid });
+      emit("render:remove", { uid });
     }
   });
   function sanitize(entry) {
@@ -152,6 +174,7 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     };
   }
   function getAll() {
+    flushDirtyRects();
     return [...entries.value.values()].map(sanitize);
   }
   function snapshot() {

package/dist/runtime/composables/transition-registry.d.ts

@@ -15,6 +15,7 @@ export declare function setupTransitionRegistry(): {
     register: (entry: TransitionEntry) => void;
     update: (id: string, patch: Partial<TransitionEntry>) => void;
     getAll: () => TransitionEntry[];
+    clear: () => void;
 };
 export declare function createTrackedTransition(registry: ReturnType<typeof setupTransitionRegistry>): import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;

package/dist/runtime/composables/transition-registry.js

@@ -1,10 +1,21 @@
 import { ref, h, defineComponent, getCurrentInstance, onUnmounted, Transition as VueTransition } from "vue";
+const MAX_TRANSITIONS = 500;
 export function setupTransitionRegistry() {
   const entries = ref(/* @__PURE__ */ new Map());
   function register(entry) {
+    if (entries.value.size >= MAX_TRANSITIONS) {
+      const oldestKey = entries.value.keys().next().value;
+      if (oldestKey !== void 0) {
+        entries.value.delete(oldestKey);
+      }
+    }
     entries.value.set(entry.id, entry);
     emit("transition:register", entry);
   }
+  function clear() {
+    entries.value.clear();
+    emit("transition:clear", {});
+  }
   function update(id, patch) {
     const existing = entries.value.get(id);
     if (!existing) {
@@ -42,8 +53,9 @@ export function setupTransitionRegistry() {
     const channel = window.__nuxt_devtools__?.channel;
     channel?.send(event, data);
   }
-  return { register, update, getAll };
+  return { register, update, getAll, clear };
 }
+let _transitionSeq = 0;
 function mergeHook(original, ours) {
   return (el) => {
     ours(el);
@@ -78,7 +90,7 @@ export function createTrackedTransition(registry) {
           ...attrs,
           onBeforeEnter: mergeHook(attrs.onBeforeEnter, () => {
             const now = performance.now();
-            const id = `${transitionName}::enter::${now}`;
+            const id = `${transitionName}::enter::${now}::${++_transitionSeq}`;
             enterEntryId = id;
             registry.register({
               id,
@@ -106,7 +118,7 @@ export function createTrackedTransition(registry) {
           }),
           onBeforeLeave: mergeHook(attrs.onBeforeLeave, () => {
             const now = performance.now();
-            const id = `${transitionName}::leave::${now}`;
+            const id = `${transitionName}::leave::${now}::${++_transitionSeq}`;
             leaveEntryId = id;
             registry.register({
               id,