nuxt-devtools-observatory 0.1.10 → 0.1.12

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

@@ -1,10 +1,89 @@
-import { ref, isRef, isReadonly, unref, getCurrentInstance, onUnmounted } from "vue";
+import { ref, isRef, isReactive, isReadonly, unref, computed, watchEffect, getCurrentInstance, onUnmounted } from "vue";
 export function setupComposableRegistry() {
   const entries = ref(/* @__PURE__ */ new Map());
+  const liveRefs = /* @__PURE__ */ new Map();
+  const liveRefWatchers = /* @__PURE__ */ new Map();
+  const MAX_HISTORY = 50;
+  const entryHistory = /* @__PURE__ */ new Map();
+  const prevValues = /* @__PURE__ */ new Map();
+  const rawRefs = /* @__PURE__ */ new Map();
+  function computeSharedKeys(id, name) {
+    const ownRaw = rawRefs.get(id);
+    if (!ownRaw) return [];
+    const shared = /* @__PURE__ */ new Set();
+    for (const [otherId, entry] of entries.value.entries()) {
+      if (otherId === id || entry.name !== name) continue;
+      const otherRaw = rawRefs.get(otherId);
+      if (!otherRaw) continue;
+      for (const [key, obj] of Object.entries(ownRaw)) {
+        if (key in otherRaw && otherRaw[key] === obj) {
+          shared.add(key);
+        }
+      }
+    }
+    return [...shared];
+  }
+  let currentRoute = "/";
+  function setRoute(path) {
+    currentRoute = path;
+  }
+  function getRoute() {
+    return currentRoute;
+  }
   function register(entry) {
     entries.value.set(entry.id, entry);
     emit("composable:register", entry);
   }
+  function registerLiveRefs(id, refs) {
+    const prevStop = liveRefWatchers.get(id);
+    if (prevStop) prevStop();
+    liveRefWatchers.delete(id);
+    if (Object.keys(refs).length === 0) {
+      liveRefs.delete(id);
+      rawRefs.delete(id);
+      prevValues.delete(id);
+      return;
+    }
+    liveRefs.set(id, refs);
+    prevValues.set(
+      id,
+      Object.fromEntries(
+        Object.entries(refs).map(([k, r]) => {
+          try {
+            return [k, JSON.stringify(unref(r)) ?? ""];
+          } catch {
+            return [k, ""];
+          }
+        })
+      )
+    );
+    const stop = watchEffect(() => {
+      const prev = prevValues.get(id) ?? {};
+      const now = {};
+      const t = typeof performance !== "undefined" ? performance.now() : Date.now();
+      for (const [k, r] of Object.entries(refs)) {
+        const val = unref(r);
+        const serialised = JSON.stringify(val) ?? "";
+        now[k] = serialised;
+        if (serialised !== prev[k]) {
+          const history = entryHistory.get(id) ?? [];
+          history.push({ t, key: k, value: safeValue(val) });
+          if (history.length > MAX_HISTORY) history.shift();
+          entryHistory.set(id, history);
+        }
+      }
+      prevValues.set(id, now);
+      _onChange?.();
+    });
+    liveRefWatchers.set(id, stop);
+  }
+  function registerRawRefs(id, refs) {
+    rawRefs.set(id, refs);
+  }
+  let _onChange = null;
+  function onComposableChange(cb) {
+    _onChange = cb;
+  }
   function update(id, patch) {
     const existing = entries.value.get(id);
     if (!existing) {
@@ -31,6 +110,25 @@ export function setupComposableRegistry() {
     return val;
   }
   function sanitize(entry) {
+    const live = liveRefs.get(entry.id);
+    const hasLive = live != null && Object.keys(live).length > 0;
+    const freshRefs = hasLive ? Object.fromEntries(
+      Object.entries(live).map(([k, r]) => [
+        k,
+        {
+          type: entry.refs[k]?.type ?? "ref",
+          value: safeValue(unref(r))
+        }
+      ])
+    ) : Object.fromEntries(
+      Object.entries(entry.refs).map(([k, v]) => [
+        k,
+        {
+          type: v.type,
+          value: safeValue(typeof v.value === "object" && v.value !== null && "value" in v.value ? v.value.value : v.value)
+        }
+      ])
+    );
     return {
       id: entry.id,
       name: entry.name,
@@ -39,20 +137,15 @@ export function setupComposableRegistry() {
       status: entry.status,
       leak: entry.leak,
       leakReason: entry.leakReason,
-      refs: Object.fromEntries(
-        Object.entries(entry.refs).map(([k, v]) => [
-          k,
-          {
-            type: v.type,
-            value: safeValue(typeof v.value === "object" && v.value !== null && "value" in v.value ? v.value.value : v.value)
-          }
-        ])
-      ),
+      refs: freshRefs,
+      history: entryHistory.get(entry.id) ?? [],
+      sharedKeys: computeSharedKeys(entry.id, entry.name),
       watcherCount: entry.watcherCount,
       intervalCount: entry.intervalCount,
       lifecycle: entry.lifecycle,
       file: entry.file,
-      line: entry.line
+      line: entry.line,
+      route: entry.route
     };
   }
   function getAll() {
@@ -65,7 +158,17 @@ export function setupComposableRegistry() {
     const channel = window.__nuxt_devtools__?.channel;
     channel?.send(event, data);
   }
-  return { register, update, getAll };
+  function clear() {
+    for (const stop of liveRefWatchers.values()) stop();
+    liveRefWatchers.clear();
+    liveRefs.clear();
+    rawRefs.clear();
+    prevValues.clear();
+    entryHistory.clear();
+    entries.value.clear();
+    emit("composable:clear", {});
+  }
+  return { register, registerLiveRefs, registerRawRefs, onComposableChange, clear, setRoute, getRoute, update, getAll };
 }
 export function __trackComposable(name, callFn, meta) {
   if (!import.meta.dev) {
@@ -79,40 +182,53 @@ export function __trackComposable(name, callFn, meta) {
     return callFn();
   }
   const instance = getCurrentInstance();
-  const id = `${name}::${instance?.uid ?? "global"}::${meta.file}:${meta.line}::${Date.now()}`;
+  const id = `${name}::${instance?.uid ?? "global"}::${meta.file}:${meta.line}::${Date.now()}::${Math.random().toString(36).slice(2, 7)}`;
   const trackedIntervals = [];
-  const originalSetInterval = window.setInterval;
-  const originalClearInterval = window.clearInterval;
   const clearedIntervals = /* @__PURE__ */ new Set();
-  window.setInterval = ((fn, ms, ...rest) => {
-    const id2 = originalSetInterval(fn, ms, ...rest);
-    trackedIntervals.push(id2);
-    return id2;
-  });
-  window.clearInterval = ((id2) => {
-    if (id2 !== void 0) {
-      clearedIntervals.add(id2);
-    }
-    originalClearInterval(id2);
-  });
+  const alreadyPatched = !!window.setInterval.__obs;
+  let originalSetInterval = null;
+  let originalClearInterval = null;
+  if (!alreadyPatched) {
+    originalSetInterval = window.setInterval;
+    originalClearInterval = window.clearInterval;
+    const patchedSetInterval = ((fn, ms, ...rest) => {
+      const timerId = originalSetInterval(fn, ms, ...rest);
+      trackedIntervals.push(timerId);
+      return timerId;
+    });
+    patchedSetInterval.__obs = true;
+    window.setInterval = patchedSetInterval;
+    window.clearInterval = ((timerId) => {
+      if (timerId !== void 0) clearedIntervals.add(timerId);
+      originalClearInterval(timerId);
+    });
+  }
   const effectsBefore = new Set(instance?.scope?.effects ?? []);
   const mountedHooksBefore = instance?.bm?.length ?? 0;
   const unmountedHooksBefore = instance?.um?.length ?? 0;
   const result = callFn();
-  window.setInterval = originalSetInterval;
-  window.clearInterval = originalClearInterval;
+  if (!alreadyPatched && originalSetInterval) {
+    window.setInterval = originalSetInterval;
+    window.clearInterval = originalClearInterval;
+  }
   const trackedWatchers = (instance?.scope?.effects ?? []).filter((effect) => !effectsBefore.has(effect)).map((effect) => ({
     effect,
     stop: () => effect.stop?.()
   }));
   const refs = {};
+  const liveRefMap = {};
+  const rawRefMap = {};
   if (result && typeof result === "object") {
     for (const [key, val] of Object.entries(result)) {
       if (isRef(val)) {
-        refs[key] = {
-          type: isReadonly(val) ? "computed" : "ref",
-          value: safeSnapshot(unref(val))
-        };
+        const type = isReadonly(val) ? "computed" : "ref";
+        refs[key] = { type, value: safeSnapshot(unref(val)) };
+        liveRefMap[key] = val;
+        rawRefMap[key] = val;
+      } else if (isReactive(val)) {
+        refs[key] = { type: "reactive", value: safeSnapshot(val) };
+        liveRefMap[key] = computed(() => val);
+        rawRefMap[key] = val;
       }
     }
   }
@@ -124,6 +240,9 @@ export function __trackComposable(name, callFn, meta) {
     status: "mounted",
     leak: false,
     refs,
+    history: [],
+    sharedKeys: [],
+    // computed lazily in sanitize() after all instances are registered
     watcherCount: trackedWatchers.length,
     intervalCount: trackedIntervals.length,
     lifecycle: {
@@ -133,31 +252,37 @@ export function __trackComposable(name, callFn, meta) {
       intervalsCleaned: true
     },
     file: meta.file,
-    line: meta.line
+    line: meta.line,
+    route: registry.getRoute()
   };
   registry.register(entry);
-  onUnmounted(() => {
-    const leakedWatchers = trackedWatchers.filter((w) => w.effect.active);
-    const leakedIntervals = trackedIntervals.filter((id2) => !clearedIntervals.has(id2));
-    const leak = leakedWatchers.length > 0 || leakedIntervals.length > 0;
-    const reasons = [];
-    if (leakedWatchers.length > 0) {
-      reasons.push(`${leakedWatchers.length} watcher${leakedWatchers.length > 1 ? "s" : ""} still active after unmount`);
-    }
-    if (leakedIntervals.length > 0) {
-      reasons.push(`setInterval #${leakedIntervals.join(", #")} never cleared`);
-    }
-    registry.update(id, {
-      status: "unmounted",
-      leak,
-      leakReason: reasons.join(" \xB7 ") || void 0,
-      lifecycle: {
-        ...entry.lifecycle,
-        watchersCleaned: leakedWatchers.length === 0,
-        intervalsCleaned: leakedIntervals.length === 0
+  registry.registerLiveRefs(id, liveRefMap);
+  registry.registerRawRefs(id, rawRefMap);
+  if (instance) {
+    onUnmounted(() => {
+      const leakedWatchers = trackedWatchers.filter((w) => w.effect.active);
+      const leakedIntervals = trackedIntervals.filter((timerId) => !clearedIntervals.has(timerId));
+      const leak = leakedWatchers.length > 0 || leakedIntervals.length > 0;
+      const reasons = [];
+      if (leakedWatchers.length > 0) {
+        reasons.push(`${leakedWatchers.length} watcher${leakedWatchers.length > 1 ? "s" : ""} still active after unmount`);
+      }
+      if (leakedIntervals.length > 0) {
+        reasons.push(`setInterval #${leakedIntervals.join(", #")} never cleared`);
       }
+      registry.update(id, {
+        status: "unmounted",
+        leak,
+        leakReason: reasons.join(" \xB7 ") || void 0,
+        lifecycle: {
+          ...entry.lifecycle,
+          watchersCleaned: leakedWatchers.length === 0,
+          intervalsCleaned: leakedIntervals.length === 0
+        }
+      });
+      registry.registerLiveRefs(id, {});
     });
-  });
+  }
   return result;
 }
 function safeSnapshot(value) {

package/dist/runtime/composables/provide-inject-registry.d.ts

@@ -8,6 +8,17 @@ export interface ProvideEntry {
     isReactive: boolean;
     valueSnapshot: unknown;
     line: number;
+    /**
+     * Scope of the provide:
+     * - 'global'    — provided via app.provide() or at the app root (no parent component)
+     * - 'layout'    — provided by a layout component (file path contains 'layout')
+     * - 'component' — provided by a regular component
+     */
+    scope: 'global' | 'layout' | 'component';
+    /**
+     * True when a parent component already provides the same key — this provide shadows it.
+     */
+    isShadowing: boolean;
 }
 export interface InjectEntry {
     key: string;
@@ -24,7 +35,7 @@ export interface InjectEntry {
 /**
  * Sets up the provide/inject registry, which tracks all provide/inject calls
  * and their associated metadata (e.g. component name, file, line).
- * @returns {object} The provide/inject registry with `registerProvide`, `registerInject`, and `getAll` members.
+ * @returns {object} The provide/inject registry with `registerProvide`, `registerInject`, `getAll`, and `clear` members.
  */
 export declare function setupProvideInjectRegistry(): {
     registerProvide: (entry: ProvideEntry) => void;
@@ -33,6 +44,7 @@ export declare function setupProvideInjectRegistry(): {
         provides: ProvideEntry[];
         injects: InjectEntry[];
     };
+    clear: () => void;
 };
 export declare function __devProvide(key: string | symbol, value: unknown, meta: {
     file: string;

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

@@ -3,13 +3,28 @@ export function setupProvideInjectRegistry() {
   const provides = ref([]);
   const injects = ref([]);
   function registerProvide(entry) {
-    provides.value.push(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);
+    }
     emit("provide:register", entry);
   }
   function registerInject(entry) {
-    injects.value.push(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);
+    }
     emit("inject:register", entry);
   }
+  function clear() {
+    provides.value = [];
+    injects.value = [];
+    emit("provide:clear", {});
+  }
   function safeValue(val) {
     if (val === void 0 || val === null) {
       return val;
@@ -36,7 +51,9 @@ export function setupProvideInjectRegistry() {
       parentFile: entry.parentFile,
       isReactive: entry.isReactive,
       valueSnapshot: safeValue(entry.valueSnapshot),
-      line: entry.line
+      line: entry.line,
+      scope: entry.scope,
+      isShadowing: entry.isShadowing
     };
   }
   function sanitizeInject(entry) {
@@ -66,7 +83,7 @@ export function setupProvideInjectRegistry() {
     const channel = window.__nuxt_devtools__?.channel;
     channel?.send(event, data);
   }
-  return { registerProvide, registerInject, getAll };
+  return { registerProvide, registerInject, getAll, clear };
 }
 export function __devProvide(key, value, meta) {
   provide(key, value);
@@ -78,8 +95,17 @@ export function __devProvide(key, value, meta) {
     return;
   }
   const instance = getCurrentInstance();
+  const keyStr = String(key);
+  const file = meta.file.toLowerCase();
+  let scope = "component";
+  if (!instance?.parent || instance?.parent?.type === instance?.appContext?.app?._component) {
+    scope = "global";
+  } else if (file.includes("layout") || file.includes("layouts")) {
+    scope = "layout";
+  }
+  const isShadowing = findProvider(keyStr, instance) !== null;
   registry.registerProvide({
-    key: String(key),
+    key: keyStr,
     componentName: instance?.type?.__name ?? "unknown",
     componentFile: meta.file,
     componentUid: instance?.uid ?? -1,
@@ -87,7 +113,9 @@ export function __devProvide(key, value, meta) {
     parentFile: instance?.parent?.type?.__file,
     isReactive: isRef(value) || isReactive(value),
     valueSnapshot: safeSnapshot(unref(value)),
-    line: meta.line
+    line: meta.line,
+    scope,
+    isShadowing
   });
 }
 export function __devInject(key, defaultValue, meta) {

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

@@ -3,7 +3,11 @@ export interface RenderEntry {
     name: string;
     file: string;
     element?: string;
-    renders: number;
+    /** Total times this instance mounted (usually 1, >1 means it was unmounted+remounted) */
+    mountCount: number;
+    /** Re-renders triggered by reactive state changes (excludes initial mount) */
+    rerenders: number;
+    /** Subset of rerenders that happened within 800ms of a navigation */
     totalMs: number;
     avgMs: number;
     triggers: Array<{
@@ -19,18 +23,27 @@ export interface RenderEntry {
         top: number;
         left: number;
     };
-    children: number[];
     parentUid?: number;
+    /** True if this component survived at least one reset() — indicates a layout/persistent component */
+    isPersistent: boolean;
+    /** True if the first mount of this component happened during SSR hydration */
+    isHydrationMount: boolean;
 }
 /**
- * Sets up a render registry for the given Nuxt app.
- * @param {{ vueApp: import('vue').App }} nuxtApp - The Nuxt app object.
- * @param {object} nuxtApp.vueApp - The Vue app instance.
- * @returns {object} The render registry object.
+ * Sets up a render registry for tracking render-related metrics (e.g. rerenders, render time, etc.)
+ * The registry is exposed over the WebSocket channel, and can be accessed from the browser's devtools.
+ * @param {object} nuxtApp - The Nuxt app instance.
+ * @param {import('vue').App} nuxtApp.vueApp - The Vue app instance used to register lifecycle hooks.
+ * @param {object} [options] - Optional configuration object.
+ * @param {function(): boolean} [options.isHydrating] - Function to determine if the current render is during SSR hydration.
+ * @returns {object} An object containing the render registry's API methods: `getAll()`, `snapshot()`, and `reset()`.
  */
 export declare function setupRenderRegistry(nuxtApp: {
     vueApp: import('vue').App;
+}, options?: {
+    isHydrating?: () => boolean;
 }): {
     getAll: () => RenderEntry[];
     snapshot: () => RenderEntry[];
+    reset: () => void;
 };

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

@@ -1,6 +1,9 @@
 import { ref } from "vue";
-export function setupRenderRegistry(nuxtApp) {
+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();
   function ensureEntry(instance) {
     const uid = instance.$.uid;
     if (!entries.value.has(uid)) {
@@ -23,61 +26,90 @@ export function setupRenderRegistry(nuxtApp) {
     const uid = instance.$.uid;
     entries.value.delete(uid);
   }
+  function startRenderTimer(uid) {
+    if (typeof performance === "undefined") {
+      return;
+    }
+    renderStartTimes.set(uid, performance.now());
+  }
+  function recordRenderDuration(entry) {
+    if (typeof performance === "undefined") {
+      return;
+    }
+    const startedAt = renderStartTimes.get(entry.uid);
+    if (startedAt === void 0) {
+      return;
+    }
+    renderStartTimes.delete(entry.uid);
+    entry.totalMs += Math.max(performance.now() - startedAt, 0);
+    const totalEvents = (entry.rerenders ?? 0) + Math.max(entry.mountCount, 1);
+    entry.avgMs = Math.round(entry.totalMs / totalEvents * 10) / 10;
+  }
+  function reset() {
+    preResetUids = new Set(entries.value.keys());
+    pendingTriggeredRenders.clear();
+    renderStartTimes.clear();
+    for (const entry of entries.value.values()) {
+      entry.rerenders = 0;
+      entry.totalMs = 0;
+      entry.avgMs = 0;
+      entry.triggers = [];
+    }
+  }
   nuxtApp.vueApp.mixin({
+    beforeMount() {
+      startRenderTimer(this.$.uid);
+    },
     mounted() {
       const entry = ensureEntry(this);
-      entry.renders++;
+      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);
-      emit("render:update", { uid: entry.uid, renders: entry.renders });
+      recordRenderDuration(entry);
+      emit("render:update", { uid: entry.uid, renders: entry.rerenders });
+    },
+    beforeUpdate() {
+      startRenderTimer(this.$.uid);
     },
     renderTriggered({ key, type }) {
       const entry = ensureEntry(this);
       entry.triggers.push({ key: String(key), type, timestamp: performance.now() });
+      pendingTriggeredRenders.add(entry.uid);
       if (entry.triggers.length > 50) {
         entry.triggers.shift();
       }
     },
     updated() {
       const entry = ensureEntry(this);
-      entry.renders++;
+      pendingTriggeredRenders.delete(entry.uid);
+      entry.rerenders++;
       syncRect(entry, this);
-      emit("render:update", { uid: entry.uid, renders: entry.renders });
+      recordRenderDuration(entry);
+      emit("render:update", { uid: entry.uid, renders: entry.rerenders });
     },
     unmounted() {
+      pendingTriggeredRenders.delete(this.$.uid);
+      renderStartTimes.delete(this.$.uid);
       removeEntry(this);
       emit("render:remove", { uid: this.$.uid });
     }
   });
-  if (import.meta.client && typeof PerformanceObserver !== "undefined") {
-    const observer = new PerformanceObserver((list) => {
-      for (const perf of list.getEntries()) {
-        if (!perf.name.includes("vue-component-render")) {
-          continue;
-        }
-        const uidMatch = perf.name.match(/uid:(\d+)/);
-        if (!uidMatch) {
-          continue;
-        }
-        const uid = Number(uidMatch[1]);
-        const entry = entries.value.get(uid);
-        if (entry) {
-          entry.totalMs += perf.duration;
-          entry.avgMs = Math.round(entry.totalMs / entry.renders * 10) / 10;
-        }
-      }
-    });
-    try {
-      observer.observe({ entryTypes: ["measure"] });
-    } catch {
-    }
-  }
   function sanitize(entry) {
     return {
       uid: entry.uid,
       name: entry.name,
       file: entry.file,
       element: entry.element,
-      renders: entry.renders,
+      mountCount: entry.mountCount,
+      rerenders: entry.rerenders,
       totalMs: entry.totalMs,
       avgMs: entry.avgMs,
       triggers: entry.triggers,
@@ -89,8 +121,9 @@ export function setupRenderRegistry(nuxtApp) {
         top: entry.rect.top,
         left: entry.rect.left
       } : void 0,
-      children: entry.children,
-      parentUid: entry.parentUid
+      parentUid: entry.parentUid,
+      isPersistent: entry.isPersistent,
+      isHydrationMount: entry.isHydrationMount
     };
   }
   function getAll() {
@@ -106,7 +139,7 @@ export function setupRenderRegistry(nuxtApp) {
     const channel = window.__nuxt_devtools__?.channel;
     channel?.send(event, data);
   }
-  return { getAll, snapshot };
+  return { getAll, snapshot, reset };
 }
 function makeEntry(uid, instance) {
   const type = instance.$.type;
@@ -120,12 +153,14 @@ function makeEntry(uid, instance) {
     name: ownLabel ?? inferAnonymousLabel(parentLabel, element) ?? `Component#${uid}`,
     file,
     element,
-    renders: 0,
+    mountCount: 0,
+    rerenders: 0,
     totalMs: 0,
     avgMs: 0,
     triggers: [],
-    children: [],
-    parentUid: instance.$parent?.$.uid
+    parentUid: instance.$parent?.$.uid,
+    isPersistent: false,
+    isHydrationMount: false
   };
 }
 function describeElement(el) {

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

@@ -18,13 +18,19 @@ export function setupTransitionRegistry() {
     emit("transition:update", updated);
   }
   function sanitize(entry) {
-    const clone = { ...entry };
-    for (const key in clone) {
-      if (typeof clone[key] === "function") {
-        delete clone[key];
-      }
-    }
-    return clone;
+    return {
+      id: entry.id,
+      transitionName: entry.transitionName,
+      parentComponent: entry.parentComponent,
+      direction: entry.direction,
+      phase: entry.phase,
+      startTime: entry.startTime,
+      endTime: entry.endTime,
+      durationMs: entry.durationMs,
+      cancelled: entry.cancelled,
+      appear: entry.appear,
+      mode: entry.mode
+    };
   }
   function getAll() {
     return [...entries.value.values()].map(sanitize);