nuxt-devtools-observatory 0.1.7 → 0.1.8

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

@@ -95,10 +95,16 @@ export function __trackComposable(name, callFn, meta) {
     }
     originalClearInterval(id2);
   });
-  const trackedWatchers = [];
+  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;
+  const trackedWatchers = (instance?.scope?.effects ?? []).filter((effect) => !effectsBefore.has(effect)).map((effect) => ({
+    effect,
+    stop: () => effect.stop?.()
+  }));
   const refs = {};
   if (result && typeof result === "object") {
     for (const [key, val] of Object.entries(result)) {
@@ -121,8 +127,8 @@ export function __trackComposable(name, callFn, meta) {
     watcherCount: trackedWatchers.length,
     intervalCount: trackedIntervals.length,
     lifecycle: {
-      hasOnMounted: false,
-      hasOnUnmounted: false,
+      hasOnMounted: (instance?.bm?.length ?? 0) > mountedHooksBefore,
+      hasOnUnmounted: (instance?.um?.length ?? 0) > unmountedHooksBefore,
       watchersCleaned: true,
       intervalsCleaned: true
     },
@@ -131,7 +137,7 @@ export function __trackComposable(name, callFn, meta) {
   };
   registry.register(entry);
   onUnmounted(() => {
-    const leakedWatchers = trackedWatchers.filter((w) => !w.stopped);
+    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 = [];

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

@@ -14,6 +14,19 @@ export interface FetchEntry {
     file?: string;
     line?: number;
 }
+interface FetchResponse extends Response {
+    _data?: unknown;
+}
+interface FetchOptions {
+    server?: boolean;
+    onResponse?: (ctx: {
+        response: FetchResponse;
+    }) => void;
+    onResponseError?: (ctx: {
+        response: FetchResponse;
+    }) => void;
+    [key: string]: unknown;
+}
 /**
  * Sets up the fetch registry, which tracks all fetch requests and their
  * associated metadata (e.g. duration, size, origin).
@@ -56,8 +69,9 @@ export declare function setupFetchRegistry(): {
         readonly line?: number | undefined;
     }>>>;
 };
-export declare function __devFetch(originalFn: (...args: unknown[]) => unknown, arg1: ((...args: unknown[]) => unknown) | string, arg2: Record<string, unknown>, meta: {
+export declare function __devFetch(originalFn: (url: string, opts: FetchOptions) => Promise<unknown>, url: string, opts: FetchOptions, meta: {
     key: string;
     file: string;
     line: number;
-}): unknown;
+}): Promise<unknown>;
+export {};

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

@@ -14,42 +14,8 @@ export function setupFetchRegistry() {
     entries.value.set(id, updated);
     emit("fetch:update", updated);
   }
-  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 sanitize(entry) {
-    return {
-      id: entry.id,
-      key: entry.key,
-      url: entry.url,
-      status: entry.status,
-      origin: entry.origin,
-      startTime: entry.startTime,
-      endTime: entry.endTime,
-      ms: entry.ms,
-      size: entry.size,
-      cached: entry.cached,
-      payload: safeValue(entry.payload),
-      error: safeValue(entry.error),
-      file: entry.file,
-      line: entry.line
-    };
-  }
   function getAll() {
-    return [...entries.value.values()].map(sanitize);
+    return [...entries.value.values()];
   }
   function clear() {
     entries.value.clear();
@@ -64,97 +30,61 @@ export function setupFetchRegistry() {
   }
   return { register, update, getAll, clear, entries: readonly(entries) };
 }
-export function __devFetch(originalFn, arg1, arg2, meta) {
+export function __devFetch(originalFn, url, opts, meta) {
   if (!import.meta.dev || !import.meta.client) {
-    if (typeof arg1 === "function") {
-      return (...args) => arg1(...args);
-    }
-    return originalFn(arg1, arg2);
+    return originalFn(url, opts);
   }
   const registry = window.__observatory__?.fetch;
   if (!registry) {
-    return typeof arg1 === "function" ? originalFn(arg1, arg2) : originalFn(arg1, arg2);
+    return originalFn(url, opts);
+  }
+  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";
+  registry.register({
+    id,
+    key: meta.key,
+    url: typeof url === "string" ? url : String(url),
+    status: fromPayload ? "cached" : "pending",
+    origin,
+    startTime,
+    cached: fromPayload,
+    payload: fromPayload ? payload[meta.key] : void 0,
+    file: meta.file,
+    line: meta.line
+  });
+  if (fromPayload) {
+    return originalFn(url, opts);
   }
-  if (typeof arg1 === "function") {
-    const handler = arg1;
-    return function wrappedHandler(...handlerArgs) {
-      const id = `${meta.key}::${Date.now()}`;
-      const startTime = performance.now();
-      const origin = import.meta.server ? "ssr" : "csr";
-      registry.register({
-        id,
-        key: meta.key,
-        url: meta.key,
-        // No URL in useAsyncData, use key as identifier
-        status: "pending",
-        origin,
-        startTime,
-        cached: false,
-        file: meta.file,
-        line: meta.line
+  return originalFn(url, {
+    ...opts,
+    onResponse({ response }) {
+      const ms = Math.round(performance.now() - startTime);
+      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
       });
-      return Promise.resolve(handler(...handlerArgs)).then((result) => {
-        registry.update(id, {
-          status: "ok",
-          endTime: performance.now(),
-          ms: Math.round(performance.now() - startTime),
-          payload: result
-        });
-        return result;
-      }).catch((error) => {
-        registry.update(id, {
-          status: "error",
-          endTime: performance.now(),
-          ms: Math.round(performance.now() - startTime),
-          error
-        });
-        throw error;
+      if (typeof opts.onResponse === "function") {
+        opts.onResponse({ response });
+      }
+    },
+    onResponseError({ response }) {
+      registry.update(id, {
+        status: "error",
+        endTime: performance.now(),
+        ms: Math.round(performance.now() - startTime)
       });
-    };
-  } else {
-    const url = arg1;
-    const opts = arg2 || {};
-    const id = `${meta.key}::${Date.now()}`;
-    const startTime = performance.now();
-    const origin = import.meta.server ? "ssr" : "csr";
-    registry.register({
-      id,
-      key: meta.key,
-      url: typeof url === "string" ? url : String(url),
-      status: "pending",
-      origin,
-      startTime,
-      cached: false,
-      file: meta.file,
-      line: meta.line
-    });
-    return originalFn(url, {
-      ...opts,
-      onResponse({ response }) {
-        const ms = Math.round(performance.now() - startTime);
-        const size = Number(response.headers?.get("content-length")) || void 0;
-        const cached = response.headers?.get("x-nuxt-cache") === "HIT";
-        registry.update(id, {
-          status: response.ok ? "ok" : "error",
-          endTime: performance.now(),
-          ms,
-          size,
-          cached
-        });
-        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 });
-        }
+      if (typeof opts.onResponseError === "function") {
+        opts.onResponseError({ response });
       }
-    });
-  }
+    }
+  });
 }

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

@@ -3,6 +3,8 @@ export interface ProvideEntry {
     componentName: string;
     componentFile: string;
     componentUid: number;
+    parentUid?: number;
+    parentFile?: string;
     isReactive: boolean;
     valueSnapshot: unknown;
     line: number;
@@ -12,6 +14,8 @@ export interface InjectEntry {
     componentName: string;
     componentFile: string;
     componentUid: number;
+    parentUid?: number;
+    parentFile?: string;
     resolved: boolean;
     resolvedFromFile?: string;
     resolvedFromUid?: number;

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

@@ -79,6 +79,8 @@ export function __devProvide(key, value, meta) {
     componentName: instance?.type?.__name ?? "unknown",
     componentFile: meta.file,
     componentUid: instance?.uid ?? -1,
+    parentUid: instance?.parent?.uid,
+    parentFile: instance?.parent?.type?.__file,
     isReactive: isRef(value) || isReactive(value),
     valueSnapshot: safeSnapshot(unref(value)),
     line: meta.line
@@ -100,6 +102,8 @@ export function __devInject(key, defaultValue, meta) {
     componentName: instance?.type?.__name ?? "unknown",
     componentFile: meta.file,
     componentUid: instance?.uid ?? -1,
+    parentUid: instance?.parent?.uid,
+    parentFile: instance?.parent?.type?.__file,
     resolved: resolved !== void 0,
     resolvedFromFile: providerInfo?.file,
     resolvedFromUid: providerInfo?.uid,

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

@@ -25,12 +25,11 @@ export interface RenderEntry {
  * 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.
- * @param {number} threshold - The minimum number of renders required for a component to be tracked.
  * @returns {object} The render registry object.
  */
 export declare function setupRenderRegistry(nuxtApp: {
     vueApp: import('vue').App;
-}, threshold: number): {
+}): {
     getAll: () => RenderEntry[];
     snapshot: () => RenderEntry[];
 };

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

@@ -1,62 +1,42 @@
 import { ref } from "vue";
-export function setupRenderRegistry(nuxtApp, threshold) {
+export function setupRenderRegistry(nuxtApp) {
   const entries = ref(/* @__PURE__ */ new Map());
-  function ensureEntryAndParent() {
-    const uid = this.$.uid;
-    let isFirstRender = false;
+  function ensureEntry(instance) {
+    const uid = instance.$.uid;
     if (!entries.value.has(uid)) {
-      entries.value.set(uid, makeEntry(uid, this));
-      isFirstRender = true;
-    }
-    if (isFirstRender) {
-      const parent = this.$parent?.$;
-      if (parent) {
-        const parentUid = parent.uid;
-        if (!entries.value.has(parentUid)) {
-          entries.value.set(parentUid, makeEntry(parentUid, this.$parent));
-        }
-        const parentEntry = entries.value.get(parentUid);
-        if (!parentEntry.children.includes(uid)) {
-          parentEntry.children.push(uid);
-        }
-      }
+      entries.value.set(uid, makeEntry(uid, instance));
     }
     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;
+  }
   nuxtApp.vueApp.mixin({
     mounted() {
-      ensureEntryAndParent.call(this);
+      const entry = ensureEntry(this);
+      entry.renders++;
+      syncRect(entry, this);
+      emit("render:update", { uid: entry.uid, renders: entry.renders });
     },
     renderTriggered({ key, type }) {
-      const uid = this.$.uid;
-      if (!entries.value.has(uid)) {
-        entries.value.set(uid, makeEntry(uid, this));
-      }
-      const entry = entries.value.get(uid);
+      const entry = ensureEntry(this);
       entry.triggers.push({ key: String(key), type, timestamp: performance.now() });
       if (entry.triggers.length > 50) {
         entry.triggers.shift();
       }
     },
     updated() {
-      const entry = ensureEntryAndParent.call(this);
+      const entry = ensureEntry(this);
       entry.renders++;
-      console.log("[Observatory] render:", {
-        name: entry.name,
-        uid: entry.uid,
-        file: entry.file,
-        renders: entry.renders,
-        instance: this
-      });
-      const r = this.$el?.getBoundingClientRect?.();
-      entry.rect = r ? {
-        x: Math.round(r.x),
-        y: Math.round(r.y),
-        width: Math.round(r.width),
-        height: Math.round(r.height),
-        top: Math.round(r.top),
-        left: Math.round(r.left)
-      } : void 0;
+      syncRect(entry, this);
       emit("render:update", { uid: entry.uid, renders: entry.renders });
     }
   });
@@ -120,23 +100,10 @@ export function setupRenderRegistry(nuxtApp, threshold) {
   return { getAll, snapshot };
 }
 function makeEntry(uid, instance) {
-  const type = instance.$.type;
-  let name = "";
-  if (typeof type.__name === "string" && type.__name.trim()) {
-    name = type.__name;
-  } else if (typeof type.name === "string" && type.name.trim()) {
-    name = type.name;
-  } else if (typeof type.__file === "string" && type.__file.trim()) {
-    name = type.__file.split("/").pop()?.replace(/\.vue$/, "") || "";
-  }
-  if (!name) {
-    name = `Component#${uid}`;
-  }
-  console.log("[Observatory] makeEntry:", { uid, name, file: type.__file, type });
   return {
     uid,
-    name,
-    file: type.__file ?? "unknown",
+    name: instance.$.type.__name ?? instance.$.type.__file?.split("/").pop() ?? `Component#${uid}`,
+    file: instance.$.type.__file ?? "unknown",
     renders: 0,
     totalMs: 0,
     avgMs: 0,

package/dist/runtime/plugin.js

@@ -4,6 +4,39 @@ import { setupProvideInjectRegistry } from "./composables/provide-inject-registr
 import { setupComposableRegistry } from "./composables/composable-registry.js";
 import { setupRenderRegistry } from "./composables/render-registry.js";
 import { setupTransitionRegistry } from "./composables/transition-registry.js";
+function toSerializable(value, seen = /* @__PURE__ */ new WeakSet()) {
+  if (value === null || value === void 0) {
+    return value;
+  }
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return value;
+  }
+  if (typeof value === "bigint") {
+    return value.toString();
+  }
+  if (typeof value === "function" || typeof value === "symbol") {
+    return `[${typeof value}]`;
+  }
+  if (Array.isArray(value)) {
+    return value.map((entry) => toSerializable(entry, seen));
+  }
+  if (typeof value === "object") {
+    if (seen.has(value)) {
+      return "[circular]";
+    }
+    seen.add(value);
+    if (value instanceof Date) {
+      return value.toISOString();
+    }
+    const plain = {};
+    for (const [key, entry] of Object.entries(value)) {
+      plain[key] = toSerializable(entry, seen);
+    }
+    seen.delete(value);
+    return plain;
+  }
+  return String(value);
+}
 export default defineNuxtPlugin(() => {
   if (!import.meta.dev) {
     return;
@@ -14,7 +47,7 @@ export default defineNuxtPlugin(() => {
   const fetchRegistry = setupFetchRegistry();
   const provideInjectRegistry = setupProvideInjectRegistry();
   const composableRegistry = setupComposableRegistry();
-  const renderRegistry = setupRenderRegistry(nuxtApp, config.heatmapThreshold);
+  const renderRegistry = setupRenderRegistry(nuxtApp);
   const transitionRegistry = setupTransitionRegistry();
   if (import.meta.client) {
     delete window.__observatory__;
@@ -29,26 +62,18 @@ export default defineNuxtPlugin(() => {
       if (event.data?.type !== "observatory:request") {
         return;
       }
-      const source = event.source;
-      try {
-        const snapshot = {
-          fetch: fetchRegistry.getAll(),
-          provideInject: provideInjectRegistry.getAll(),
-          composables: composableRegistry.getAll(),
-          renders: renderRegistry.getAll(),
-          transitions: transitionRegistry.getAll()
-        };
-        const payload = JSON.stringify(snapshot);
-        source?.postMessage(
-          {
-            type: "observatory:snapshot",
-            data: payload
-          },
-          "*"
-        );
-      } catch (err) {
-        console.warn("Observatory snapshot serialization failed:", err);
+      if (config.clientOrigin && event.origin !== config.clientOrigin) {
+        return;
       }
+      const source = event.source;
+      const snapshot = buildSnapshot();
+      source?.postMessage(
+        {
+          type: "observatory:snapshot",
+          data: snapshot
+        },
+        event.origin
+      );
     });
   }
   nuxtApp.hook("app:mounted", () => {
@@ -67,7 +92,10 @@ export default defineNuxtPlugin(() => {
     if (!channel) {
       return;
     }
-    channel.send("observatory:snapshot", {
+    channel.send("observatory:snapshot", buildSnapshot());
+  }
+  function buildSnapshot() {
+    return toSerializable({
       fetch: fetchRegistry.getAll(),
       provideInject: provideInjectRegistry.getAll(),
       composables: composableRegistry.getAll(),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-devtools-observatory",
-    "version": "0.1.7",
+    "version": "0.1.8",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "type": "module",
     "main": "./dist/module.mjs",