nuxt-devtools-observatory 0.1.0

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

@@ -0,0 +1,135 @@
+import { ref, isRef, isReadonly, unref, getCurrentInstance, onUnmounted } from "vue";
+export function setupComposableRegistry() {
+  const entries = ref(/* @__PURE__ */ new Map());
+  function register(entry) {
+    entries.value.set(entry.id, entry);
+    emit("composable:register", entry);
+  }
+  function update(id, patch) {
+    const existing = entries.value.get(id);
+    if (!existing) {
+      return;
+    }
+    const updated = { ...existing, ...patch };
+    entries.value.set(id, updated);
+    emit("composable:update", updated);
+  }
+  function getAll() {
+    return [...entries.value.values()];
+  }
+  function emit(event, data) {
+    if (!import.meta.client) {
+      return;
+    }
+    const channel = window.__nuxt_devtools__?.channel;
+    channel?.send(event, data);
+  }
+  return { register, update, getAll };
+}
+export function __trackComposable(name, callFn, meta) {
+  if (!import.meta.dev) {
+    return callFn();
+  }
+  if (!import.meta.client) {
+    return callFn();
+  }
+  const registry = window.__observatory__?.composable;
+  if (!registry) {
+    return callFn();
+  }
+  const instance = getCurrentInstance();
+  const id = `${name}::${instance?.uid ?? "global"}::${meta.file}:${meta.line}::${Date.now()}`;
+  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 trackedWatchers = [];
+  const result = callFn();
+  window.setInterval = originalSetInterval;
+  window.clearInterval = originalClearInterval;
+  const refs = {};
+  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 entry = {
+    id,
+    name,
+    componentFile: meta.file,
+    componentUid: instance?.uid ?? -1,
+    status: "mounted",
+    leak: false,
+    refs,
+    watcherCount: trackedWatchers.length,
+    intervalCount: trackedIntervals.length,
+    lifecycle: {
+      hasOnMounted: false,
+      hasOnUnmounted: false,
+      watchersCleaned: true,
+      intervalsCleaned: true
+    },
+    file: meta.file,
+    line: meta.line
+  };
+  registry.register(entry);
+  onUnmounted(() => {
+    const leakedWatchers = trackedWatchers.filter((w) => !w.stopped);
+    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
+      }
+    });
+  });
+  return result;
+}
+function safeSnapshot(value) {
+  try {
+    if (value === null || value === void 0) {
+      return value;
+    }
+    if (typeof value === "function") {
+      return "[Function]";
+    }
+    if (Array.isArray(value)) {
+      return `Array(${value.length})`;
+    }
+    if (typeof value === "object") {
+      const str = JSON.stringify(value);
+      return str.length > 120 ? str.slice(0, 120) + "\u2026" : JSON.parse(str);
+    }
+    return value;
+  } catch {
+    return "[unserializable]";
+  }
+}

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

@@ -0,0 +1,63 @@
+export interface FetchEntry {
+    id: string;
+    key: string;
+    url: string;
+    status: 'pending' | 'ok' | 'error' | 'cached';
+    origin: 'ssr' | 'csr';
+    startTime: number;
+    endTime?: number;
+    ms?: number;
+    size?: number;
+    cached: boolean;
+    payload?: unknown;
+    error?: unknown;
+    file?: string;
+    line?: number;
+}
+/**
+ * Sets up the fetch registry, which tracks all fetch requests and their
+ * associated metadata (e.g. duration, size, origin).
+ * @returns {object} The fetch registry with `register`, `update`, `getAll`, `clear`, and `entries` members.
+ */
+export declare function setupFetchRegistry(): {
+    register: (entry: FetchEntry) => void;
+    update: (id: string, patch: Partial<FetchEntry>) => void;
+    getAll: () => FetchEntry[];
+    clear: () => void;
+    entries: Readonly<import("vue").Ref<ReadonlyMap<string, {
+        readonly id: string;
+        readonly key: string;
+        readonly url: string;
+        readonly status: "pending" | "ok" | "error" | "cached";
+        readonly origin: "ssr" | "csr";
+        readonly startTime: number;
+        readonly endTime?: number | undefined;
+        readonly ms?: number | undefined;
+        readonly size?: number | undefined;
+        readonly cached: boolean;
+        readonly payload?: Readonly<unknown> | undefined;
+        readonly error?: Readonly<unknown> | undefined;
+        readonly file?: string | undefined;
+        readonly line?: number | undefined;
+    }>, ReadonlyMap<string, {
+        readonly id: string;
+        readonly key: string;
+        readonly url: string;
+        readonly status: "pending" | "ok" | "error" | "cached";
+        readonly origin: "ssr" | "csr";
+        readonly startTime: number;
+        readonly endTime?: number | undefined;
+        readonly ms?: number | undefined;
+        readonly size?: number | undefined;
+        readonly cached: boolean;
+        readonly payload?: Readonly<unknown> | undefined;
+        readonly error?: Readonly<unknown> | undefined;
+        readonly file?: string | undefined;
+        readonly line?: number | undefined;
+    }>>>;
+};
+export declare function __devFetch(originalFn: (url: string, opts: Record<string, unknown>) => Promise<unknown>, url: string, opts: Record<string, unknown>, meta: {
+    key: string;
+    file: string;
+    line: number;
+}): Promise<unknown>;

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

@@ -0,0 +1,83 @@
+import { ref, readonly } from "vue";
+export function setupFetchRegistry() {
+  const entries = ref(/* @__PURE__ */ new Map());
+  function register(entry) {
+    entries.value.set(entry.id, entry);
+    emit("fetch:start", entry);
+  }
+  function update(id, patch) {
+    const existing = entries.value.get(id);
+    if (!existing) {
+      return;
+    }
+    const updated = { ...existing, ...patch };
+    entries.value.set(id, updated);
+    emit("fetch:update", updated);
+  }
+  function getAll() {
+    return [...entries.value.values()];
+  }
+  function clear() {
+    entries.value.clear();
+    emit("fetch:clear", {});
+  }
+  function emit(event, data) {
+    if (!import.meta.client) {
+      return;
+    }
+    const channel = window.__nuxt_devtools__?.channel;
+    channel?.send(event, data);
+  }
+  return { register, update, getAll, clear, entries: readonly(entries) };
+}
+export function __devFetch(originalFn, url, opts, meta) {
+  if (!import.meta.dev || !import.meta.client) {
+    return originalFn(url, opts);
+  }
+  const registry = window.__observatory__?.fetch;
+  if (!registry) {
+    return originalFn(url, opts);
+  }
+  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 });
+      }
+    }
+  });
+}

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

@@ -0,0 +1,57 @@
+export interface ProvideEntry {
+    key: string;
+    componentName: string;
+    componentFile: string;
+    componentUid: number;
+    isReactive: boolean;
+    valueSnapshot: unknown;
+    line: number;
+}
+export interface InjectEntry {
+    key: string;
+    componentName: string;
+    componentFile: string;
+    componentUid: number;
+    resolved: boolean;
+    resolvedFromFile?: string;
+    resolvedFromUid?: number;
+    line: number;
+}
+/**
+ * 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.
+ */
+export declare function setupProvideInjectRegistry(): {
+    registerProvide: (entry: ProvideEntry) => void;
+    registerInject: (entry: InjectEntry) => void;
+    getAll: () => {
+        provides: {
+            key: string;
+            componentName: string;
+            componentFile: string;
+            componentUid: number;
+            isReactive: boolean;
+            valueSnapshot: unknown;
+            line: number;
+        }[];
+        injects: {
+            key: string;
+            componentName: string;
+            componentFile: string;
+            componentUid: number;
+            resolved: boolean;
+            resolvedFromFile?: string | undefined;
+            resolvedFromUid?: number | undefined;
+            line: number;
+        }[];
+    };
+};
+export declare function __devProvide(key: string | symbol, value: unknown, meta: {
+    file: string;
+    line: number;
+}): void;
+export declare function __devInject<T>(key: string | symbol, defaultValue: T | undefined, meta: {
+    file: string;
+    line: number;
+}): T | undefined;

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

@@ -0,0 +1,96 @@
+import { ref, isRef, isReactive, unref, getCurrentInstance, provide, inject } from "vue";
+export function setupProvideInjectRegistry() {
+  const provides = ref([]);
+  const injects = ref([]);
+  function registerProvide(entry) {
+    provides.value.push(entry);
+    emit("provide:register", entry);
+  }
+  function registerInject(entry) {
+    injects.value.push(entry);
+    emit("inject:register", entry);
+  }
+  function getAll() {
+    return { provides: provides.value, injects: injects.value };
+  }
+  function emit(event, data) {
+    if (!import.meta.client) {
+      return;
+    }
+    const channel = window.__nuxt_devtools__?.channel;
+    channel?.send(event, data);
+  }
+  return { registerProvide, registerInject, getAll };
+}
+export function __devProvide(key, value, meta) {
+  provide(key, value);
+  if (!import.meta.dev || !import.meta.client) {
+    return;
+  }
+  const registry = window.__observatory__?.provideInject;
+  if (!registry) {
+    return;
+  }
+  const instance = getCurrentInstance();
+  registry.registerProvide({
+    key: String(key),
+    componentName: instance?.type?.__name ?? "unknown",
+    componentFile: meta.file,
+    componentUid: instance?.uid ?? -1,
+    isReactive: isRef(value) || isReactive(value),
+    valueSnapshot: safeSnapshot(unref(value)),
+    line: meta.line
+  });
+}
+export function __devInject(key, defaultValue, meta) {
+  const resolved = inject(key, defaultValue);
+  if (!import.meta.dev || !import.meta.client) {
+    return resolved;
+  }
+  const registry = window.__observatory__?.provideInject;
+  if (!registry) {
+    return resolved;
+  }
+  const instance = getCurrentInstance();
+  const providerInfo = findProvider(String(key), instance);
+  registry.registerInject({
+    key: String(key),
+    componentName: instance?.type?.__name ?? "unknown",
+    componentFile: meta.file,
+    componentUid: instance?.uid ?? -1,
+    resolved: resolved !== void 0,
+    resolvedFromFile: providerInfo?.file,
+    resolvedFromUid: providerInfo?.uid,
+    line: meta.line
+  });
+  return resolved;
+}
+function findProvider(key, instance) {
+  let cur = instance?.parent;
+  while (cur) {
+    if (cur.appContext?.provides && key in cur.appContext.provides) {
+      return { file: cur.type?.__file ?? "unknown", uid: cur.uid };
+    }
+    if (cur.provides && key in (cur.provides ?? {})) {
+      return { file: cur.type?.__file ?? "unknown", uid: cur.uid };
+    }
+    cur = cur.parent;
+  }
+  return null;
+}
+function safeSnapshot(value) {
+  try {
+    if (value === null || value === void 0) {
+      return value;
+    }
+    if (typeof value === "function") {
+      return "[Function]";
+    }
+    if (typeof value === "object") {
+      return JSON.parse(JSON.stringify(value));
+    }
+    return value;
+  } catch {
+    return "[unserializable]";
+  }
+}

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

@@ -0,0 +1,36 @@
+export interface RenderEntry {
+    uid: number;
+    name: string;
+    file: string;
+    renders: number;
+    totalMs: number;
+    avgMs: number;
+    triggers: Array<{
+        key: string;
+        type: string;
+        timestamp: number;
+    }>;
+    rect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        top: number;
+        left: number;
+    };
+    children: number[];
+    parentUid?: number;
+}
+/**
+ * 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

@@ -0,0 +1,85 @@
+import { ref } from "vue";
+export function setupRenderRegistry(nuxtApp, threshold) {
+  const entries = ref(/* @__PURE__ */ new Map());
+  nuxtApp.vueApp.mixin({
+    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);
+      entry.triggers.push({ key: String(key), type, timestamp: performance.now() });
+      if (entry.triggers.length > 50) {
+        entry.triggers.shift();
+      }
+    },
+    updated() {
+      const uid = this.$.uid;
+      if (!entries.value.has(uid)) {
+        entries.value.set(uid, makeEntry(uid, this));
+      }
+      const entry = entries.value.get(uid);
+      entry.renders++;
+      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;
+      emit("render:update", { uid, renders: entry.renders });
+    }
+  });
+  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 getAll() {
+    return [...entries.value.values()].filter((e) => e.renders >= threshold);
+  }
+  function snapshot() {
+    return getAll();
+  }
+  function emit(event, data) {
+    if (!import.meta.client) {
+      return;
+    }
+    const channel = window.__nuxt_devtools__?.channel;
+    channel?.send(event, data);
+  }
+  return { getAll, snapshot };
+}
+function makeEntry(uid, instance) {
+  return {
+    uid,
+    name: instance.$.type.__name ?? instance.$.type.__file?.split("/").pop() ?? `Component#${uid}`,
+    file: instance.$.type.__file ?? "unknown",
+    renders: 0,
+    totalMs: 0,
+    avgMs: 0,
+    triggers: [],
+    children: [],
+    parentUid: instance.$parent?.$.uid
+  };
+}

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

@@ -0,0 +1,21 @@
+export interface TransitionEntry {
+    id: string;
+    transitionName: string;
+    parentComponent: string;
+    direction: 'enter' | 'leave';
+    phase: 'entering' | 'entered' | 'leaving' | 'left' | 'enter-cancelled' | 'leave-cancelled' | 'interrupted';
+    startTime: number;
+    endTime?: number;
+    durationMs?: number;
+    cancelled: boolean;
+    appear: boolean;
+    mode?: string;
+}
+export declare function setupTransitionRegistry(): {
+    register: (entry: TransitionEntry) => void;
+    update: (id: string, patch: Partial<TransitionEntry>) => void;
+    getAll: () => TransitionEntry[];
+};
+export declare function createTrackedTransition(registry: ReturnType<typeof setupTransitionRegistry>): import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;