nuxt-devtools-observatory 0.1.32 → 0.1.34

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

@@ -2,15 +2,18 @@ import { isRef, isReactive, unref, getCurrentInstance, provide, inject } from "v
 export function setupProvideInjectRegistry() {
   let dirty = true;
   let cachedSnapshot = '{"provides":[],"injects":[]}';
+  let hasLiveProvides = false;
   function markDirty() {
     dirty = true;
   }
   const provides = /* @__PURE__ */ new Map();
   const injects = /* @__PURE__ */ new Map();
   function registerProvide(entry) {
-    provides.set(`${entry.key}:${entry.componentUid}`, entry);
+    const internal = entry;
+    provides.set(`${entry.key}:${entry.componentUid}`, internal);
+    hasLiveProvides = hasLiveProvides || internal.__valueSource !== void 0;
     markDirty();
-    emit("provide:register", entry);
+    emit("provide:register", sanitizeProvide(internal));
   }
   function registerInject(entry) {
     injects.set(`${entry.key}:${entry.componentUid}`, entry);
@@ -20,6 +23,7 @@ export function setupProvideInjectRegistry() {
   function clear() {
     provides.clear();
     injects.clear();
+    hasLiveProvides = false;
     markDirty();
     emit("provide:clear", {});
   }
@@ -32,9 +36,8 @@ export function setupProvideInjectRegistry() {
       parentUid: entry.parentUid,
       parentFile: entry.parentFile,
       isReactive: entry.isReactive,
-      // 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,
+      // Reactive values are materialized from their live source on every read.
+      valueSnapshot: entry.__valueSource !== void 0 ? safeSnapshot(unref(entry.__valueSource)) : entry.valueSnapshot,
       line: entry.line,
       scope: entry.scope,
       isShadowing: entry.isShadowing
@@ -61,7 +64,7 @@ export function setupProvideInjectRegistry() {
     };
   }
   function getSnapshot() {
-    if (!dirty) {
+    if (!dirty && !hasLiveProvides) {
       return cachedSnapshot;
     }
     try {
@@ -103,6 +106,7 @@ export function __devProvide(key, value, meta) {
     scope = "layout";
   }
   const isShadowing = findProvider(keyStr, instance) !== null;
+  const reactiveValue = isRef(value) || isReactive(value);
   registry.registerProvide({
     key: keyStr,
     componentName: instance?.type?.__name ?? "unknown",
@@ -110,11 +114,12 @@ export function __devProvide(key, value, meta) {
     componentUid: instance?.uid ?? -1,
     parentUid: instance?.parent?.uid,
     parentFile: instance?.parent?.type?.__file,
-    isReactive: isRef(value) || isReactive(value),
+    isReactive: reactiveValue,
     valueSnapshot: safeSnapshot(unref(value)),
     line: meta.line,
     scope,
-    isShadowing
+    isShadowing,
+    ...reactiveValue ? { __valueSource: value } : {}
   });
 }
 export function __devInject(key, defaultValue, meta) {

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

@@ -74,7 +74,7 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     markDirty();
   }
   function aggregateFromComponentSpans() {
-    const componentSpans = traceStore.getAllTraces().flatMap((trace) => trace.spans).filter((span) => span.type === "component");
+    const componentSpans = traceStore.getAllTraces().flatMap((trace) => trace.spans).filter((span) => span.type === "render" || span.type === "component");
     const allSpansByUid = /* @__PURE__ */ new Map();
     const postResetSpansByUid = /* @__PURE__ */ new Map();
     for (const span of componentSpans) {
@@ -96,7 +96,8 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
       const allSpans = (allSpansByUid.get(uid) ?? []).sort((a, b) => a.startTime - b.startTime);
       const postResetSpans = (postResetSpansByUid.get(uid) ?? []).sort((a, b) => a.startTime - b.startTime);
       const timeline = postResetSpans.slice(-MAX_TIMELINE).map((span) => {
-        const lifecycle = span.metadata?.lifecycle === "mounted" ? "mount" : "update";
+        const isMountLifecycle = span.metadata?.lifecycle === "render:mount" || span.metadata?.lifecycle === "mounted";
+        const lifecycle = isMountLifecycle ? "mount" : "update";
         const routeValue = span.metadata?.route;
         const route = typeof routeValue === "string" && routeValue.length > 0 ? routeValue : entry.route;
         return {
@@ -106,8 +107,9 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
           route
         };
       });
-      const mountCount = allSpans.filter((span) => span.metadata?.lifecycle === "mounted").length;
-      const rerenders = postResetSpans.filter((span) => span.metadata?.lifecycle !== "mounted").length;
+      const isMountSpan = (span) => span.metadata?.lifecycle === "render:mount" || span.metadata?.lifecycle === "mounted";
+      const mountCount = allSpans.filter(isMountSpan).length;
+      const rerenders = postResetSpans.filter((span) => !isMountSpan(span)).length;
       const totalMs = postResetSpans.reduce((sum, span) => sum + (span.durationMs ?? 0), 0);
       const eventsCount = Math.max(postResetSpans.length, 1);
       entry.mountCount = mountCount;

package/dist/runtime/instrumentation/asyncData.d.ts

@@ -4,6 +4,6 @@ interface AsyncDataMeta {
     line: number;
     originalFn?: string;
 }
-type AnyFn = (...args: any[]) => any;
+type AnyFn = (...args: unknown[]) => unknown;
 export declare function useTracedAsyncData<TFn extends AnyFn>(originalFn: TFn, args: unknown[], handlerIndex: number, key: unknown, meta: AsyncDataMeta): ReturnType<TFn>;
 export {};

package/dist/runtime/instrumentation/fetch.d.ts

@@ -1,2 +1,8 @@
 import type { NuxtApp } from '#app';
-export declare function setupFetchInstrumentation(nuxtApp: NuxtApp): void;
+import type { FetchEntry } from '../composables/fetch-registry.js';
+type FetchRegistry = {
+    register: (entry: FetchEntry) => void;
+    update: (id: string, patch: Partial<FetchEntry>) => void;
+};
+export declare function setupFetchInstrumentation(nuxtApp: NuxtApp, fetchRegistry?: FetchRegistry): void;
+export {};

package/dist/runtime/instrumentation/fetch.js

@@ -27,7 +27,7 @@ function resolveErrorStatus(error) {
   return target?.response?.status ?? target?.statusCode ?? target?.status;
 }
 const WRAPPED_FETCH_FLAG = "__observatory_wrapped_fetch__";
-export function setupFetchInstrumentation(nuxtApp) {
+export function setupFetchInstrumentation(nuxtApp, fetchRegistry) {
   const original = nuxtApp.$fetch;
   if (!original) {
     return;
@@ -39,6 +39,7 @@ export function setupFetchInstrumentation(nuxtApp) {
     const url = resolveUrl(request);
     const method = resolveMethod(request, options);
     const startedAt = performance.now();
+    const entryId = `$fetch::${Date.now()}::${Math.random().toString(36).slice(2, 7)}`;
     const span = startSpan({
       name: "$fetch",
       type: "fetch",
@@ -49,6 +50,15 @@ export function setupFetchInstrumentation(nuxtApp) {
         status: "pending"
       }
     });
+    fetchRegistry?.register({
+      id: entryId,
+      key: url,
+      url,
+      status: "pending",
+      origin: "csr",
+      startTime: startedAt,
+      cached: false
+    });
     return Promise.resolve(original(request, options)).then((result) => {
       const durationMs = Math.max(performance.now() - startedAt, 0);
       span.end({
@@ -61,6 +71,11 @@ export function setupFetchInstrumentation(nuxtApp) {
           durationMs: Math.round(durationMs * 10) / 10
         }
       });
+      fetchRegistry?.update(entryId, {
+        status: "ok",
+        endTime: performance.now(),
+        ms: Math.round(durationMs * 10) / 10
+      });
       return result;
     }).catch((error) => {
       const durationMs = Math.max(performance.now() - startedAt, 0);
@@ -76,6 +91,12 @@ export function setupFetchInstrumentation(nuxtApp) {
           durationMs: Math.round(durationMs * 10) / 10
         }
       });
+      fetchRegistry?.update(entryId, {
+        status: "error",
+        endTime: performance.now(),
+        ms: Math.round(durationMs * 10) / 10,
+        error
+      });
       throw error;
     });
   });

package/dist/runtime/plugin.js

@@ -3,11 +3,13 @@ import { nextTick } from "vue";
 import { setupComposableRegistry } from "./composables/composable-registry.js";
 import { setupFetchRegistry } from "./composables/fetch-registry.js";
 import { setupProvideInjectRegistry } from "./composables/provide-inject-registry.js";
+import { setupPiniaStoreRegistry } from "./composables/pinia-store-registry.js";
 import { setupRenderRegistry } from "./composables/render-registry.js";
 import { setupTransitionRegistry } from "./composables/transition-registry.js";
 import { setupComponentInstrumentation } from "./instrumentation/component.js";
 import { setupFetchInstrumentation } from "./instrumentation/fetch.js";
 import { setupRouteInstrumentation } from "./instrumentation/route.js";
+import { injectTestBridge } from "./test-bridge.js";
 import { traceStore } from "./tracing/traceStore.js";
 export default defineNuxtPlugin(() => {
   if (!import.meta.dev) {
@@ -37,6 +39,13 @@ export default defineNuxtPlugin(() => {
   if (config.composableTracker) {
     registries.composable = setupComposableRegistry();
   }
+  if (config.piniaTracker) {
+    registries.pinia = setupPiniaStoreRegistry({
+      pinia: nuxtApp.$pinia,
+      nuxtPayload: nuxtApp.payload,
+      maxTimeline: config.maxPiniaTimeline
+    });
+  }
   if (config.renderHeatmap) {
     registries.render = setupRenderRegistry(nuxtApp, {
       isHydrating: () => (nuxtApp.isHydrating ?? false) && nuxtApp.payload?.serverRendered === true
@@ -91,17 +100,26 @@ export default defineNuxtPlugin(() => {
   if (import.meta.client) {
     if (config.traceViewer) {
       setupComponentInstrumentation(nuxtApp);
-      setupFetchInstrumentation(nuxtApp);
+      setupFetchInstrumentation(nuxtApp, registries.fetch);
       mergeSsrSpans();
+    } else if (config.fetchDashboard) {
+      setupFetchInstrumentation(nuxtApp, registries.fetch);
     }
     delete window.__observatory__;
     window.__observatory__ = registries;
+    injectTestBridge();
     const composableRegistry = registries.composable;
+    const piniaRegistry = registries.pinia;
     if (composableRegistry && composableRegistry.onComposableChange) {
       composableRegistry.onComposableChange(() => {
         broadcastAll("composable:onChange");
       });
     }
+    if (piniaRegistry?.onChange) {
+      piniaRegistry.onChange(() => {
+        broadcastAll("pinia:onChange");
+      });
+    }
     import.meta.hot?.on("observatory:command", (rawPayload) => {
       if (!rawPayload || typeof rawPayload !== "object") {
         return;
@@ -135,10 +153,24 @@ export default defineNuxtPlugin(() => {
       if (payload.cmd === "edit-composable") {
         debugLog("received command: edit-composable", { id: payload.id, key: payload.key });
         composableRegistry?.editValue(payload.id, payload.key, payload.value);
+        return;
+      }
+      if (payload.cmd === "clear-pinia") {
+        debugLog("received command: clear-pinia");
+        piniaRegistry?.clear();
+        broadcastAll("command:clear-pinia");
+        return;
+      }
+      if (payload.cmd === "edit-pinia") {
+        debugLog("received command: edit-pinia", { storeId: payload.storeId, path: payload.path });
+        piniaRegistry?.editState(payload.storeId, payload.path, payload.value);
+        broadcastAll("command:edit-pinia");
       }
     });
     nuxtApp.hook("app:beforeUnmount", () => {
       import.meta.hot?.off("observatory:command");
+      const pinia = registries.pinia;
+      pinia?.teardown?.();
       if (heartbeatId !== null) {
         window.clearInterval(heartbeatId);
         heartbeatId = null;
@@ -231,6 +263,7 @@ export default defineNuxtPlugin(() => {
       reason,
       fetch: Array.isArray(snapshot.fetch) ? snapshot.fetch.length : 0,
       composables: Array.isArray(snapshot.composables) ? snapshot.composables.length : 0,
+      piniaStores: Array.isArray(snapshot.piniaStores) ? snapshot.piniaStores.length : 0,
       renders: Array.isArray(snapshot.renders) ? snapshot.renders.length : 0,
       transitions: Array.isArray(snapshot.transitions) ? snapshot.transitions.length : 0,
       traces: Array.isArray(snapshot.traces) ? snapshot.traces.length : 0
@@ -256,6 +289,7 @@ export default defineNuxtPlugin(() => {
       { key: "fetch", fallback: [] },
       { key: "provideInject", fallback: { provides: [], injects: [] } },
       { key: "composable", fallback: [] },
+      { key: "pinia", fallback: [] },
       { key: "render", fallback: {} },
       { key: "transition", fallback: {} }
     ];
@@ -263,7 +297,8 @@ export default defineNuxtPlugin(() => {
     for (const { key, fallback } of trackerDefs) {
       const reg = registries[key];
       const hasGetSnapshot = reg && typeof reg.getSnapshot === "function";
-      snapshot[key === "composable" ? "composables" : key === "render" ? "renders" : key === "transition" ? "transitions" : key] = hasGetSnapshot ? safeParse(reg.getSnapshot(), fallback) : fallback;
+      const snapshotKey = key === "composable" ? "composables" : key === "pinia" ? "piniaStores" : key === "render" ? "renders" : key === "transition" ? "transitions" : key;
+      snapshot[snapshotKey] = hasGetSnapshot ? safeParse(reg.getSnapshot(), fallback) : fallback;
     }
     snapshot.traces = config.traceViewer ? traceStore.getAllTraces().map((trace) => ({
       id: trace.id,
@@ -290,7 +325,9 @@ export default defineNuxtPlugin(() => {
       fetchDashboard: !!registries.fetch,
       provideInjectGraph: !!registries.provideInject,
       composableTracker: !!registries.composable,
+      piniaTracker: !!registries.pinia,
       composableNavigationMode,
+      fetchPageSize: typeof config.fetchPageSize === "number" ? config.fetchPageSize : 20,
       renderHeatmap: !!registries.render,
       transitionTracker: !!registries.transition,
       traceViewer: !!config.traceViewer

package/dist/runtime/test-bridge.d.ts

@@ -0,0 +1,18 @@
+import type { ObservatoryTestAPI } from '../../tests/verification/types/observatory.types.js';
+interface VueApp {
+    _context?: {
+        app?: {
+            _component?: unknown;
+        };
+    };
+}
+declare global {
+    interface Window {
+        __NUXT__?: {
+            vueApp?: VueApp;
+        };
+        __OBSERVATORY_TEST_BRIDGE?: ObservatoryTestAPI;
+    }
+}
+export declare function injectTestBridge(): void;
+export {};

package/dist/runtime/test-bridge.js

@@ -0,0 +1,100 @@
+function walkComponentTree(instance, counts) {
+  if (!instance) {
+    return;
+  }
+  const componentName = instance.type?.name ?? instance.type?.__name ?? "Anonymous";
+  if (instance.ctx?.__observatoryMountCount) {
+    const currentCount = counts.componentMounts[componentName] ?? 0;
+    counts.componentMounts[componentName] = currentCount + instance.ctx.__observatoryMountCount;
+  }
+  if (instance.subTree?.children) {
+    instance.subTree.children.forEach((child) => walkComponentTree(child, counts));
+  }
+}
+export function injectTestBridge() {
+  if (!import.meta.dev || typeof window === "undefined") {
+    return;
+  }
+  const bridge = {
+    async getTraces() {
+      const { traceStore } = await import("./tracing/traceStore.js");
+      return Array.from(traceStore.entries());
+    },
+    async getHeatmapData() {
+      const { renderRegistry } = await import("./composables/render-registry.js");
+      return renderRegistry.getData();
+    },
+    async getComposableEntries() {
+      const { composableRegistry } = await import("./composables/composable-registry.js");
+      return composableRegistry.getEntries();
+    },
+    async getFetchEntries() {
+      const { fetchRegistry } = await import("./composables/fetch-registry.js");
+      return fetchRegistry.getEntries();
+    },
+    async getProvideInjectGraph() {
+      const { provideInjectRegistry } = await import("./composables/provide-inject-registry.js");
+      return provideInjectRegistry.getGraph();
+    },
+    async getTransitionEntries() {
+      const { transitionRegistry } = await import("./composables/transition-registry.js");
+      return transitionRegistry.getEntries();
+    },
+    async getPiniaStores() {
+      const observatory = window.__observatory__;
+      const registry = observatory?.pinia;
+      if (!registry?.getAll) {
+        return [];
+      }
+      return registry.getAll();
+    },
+    async getInternalCounts() {
+      const counts = {
+        componentMounts: {},
+        renderOperations: {},
+        fetchOperations: {}
+      };
+      const vueApp = window.__NUXT__?.vueApp;
+      if (!vueApp) {
+        return counts;
+      }
+      walkComponentTree(vueApp._context?.app?._component, counts);
+      return counts;
+    },
+    async clearAllData() {
+      const { traceStore } = await import("./tracing/traceStore.js");
+      const { renderRegistry } = await import("./composables/render-registry.js");
+      const { composableRegistry } = await import("./composables/composable-registry.js");
+      const { fetchRegistry } = await import("./composables/fetch-registry.js");
+      const observatory = window.__observatory__;
+      const piniaRegistry = observatory?.pinia;
+      traceStore.clear();
+      renderRegistry?.clear?.();
+      composableRegistry?.clear?.();
+      fetchRegistry?.clear?.();
+      if (piniaRegistry?.clear) {
+        piniaRegistry.clear();
+      }
+    },
+    async startRecording() {
+      const { traceStore } = await import("./tracing/traceStore.js");
+      traceStore.startRecording();
+    },
+    async stopRecording() {
+      const { traceStore } = await import("./tracing/traceStore.js");
+      traceStore.stopRecording();
+    },
+    async exportSnapshot() {
+      const snapshot = {
+        traces: await this.getTraces(),
+        heatmap: await this.getHeatmapData(),
+        composables: await this.getComposableEntries(),
+        fetches: await this.getFetchEntries(),
+        transitions: await this.getTransitionEntries(),
+        piniaStores: await this.getPiniaStores()
+      };
+      return JSON.stringify(snapshot, null, 2);
+    }
+  };
+  window.__OBSERVATORY_TEST_BRIDGE = bridge;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-devtools-observatory",
-    "version": "0.1.32",
+    "version": "0.1.34",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "license": "MIT",
     "repository": {
@@ -49,14 +49,21 @@
         "build": "npm run build:client && nuxt-module-build build",
         "prepack": "npm run build",
         "lint": "eslint .",
-        "format": "prettier --write '**/*.{ts,vue,js,json}' --ignore-path .prettierignore && stylelint '**/*.{css,vue}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --fix && eslint --fix '**/*.{ts,vue,js}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --ignore-pattern 'docs/dist/**'",
+        "format": "prettier --write '**/*.{ts,vue,js,json}' --ignore-path .prettierignore && stylelint '**/*.{css,vue}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --ignore-pattern 'docs/dist/**' --fix && eslint --fix '**/*.{ts,vue,js}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --ignore-pattern 'docs/dist/**'",
         "typecheck": "vue-tsc --noEmit",
         "test": "vitest run",
         "test:watch": "vitest",
         "test:coverage": "vitest run --coverage",
         "test:screenshots": "playwright test scripts/playwright/screenshot-trackers.spec.ts",
         "test:e2e": "playwright test scripts/playwright/playground-pages.spec.ts",
-        "capture:screenshots": "node scripts/playwright/capture-observatory-screenshots.cjs"
+        "capture:screenshots": "node scripts/playwright/capture-observatory-screenshots.cjs",
+        "verify": "tsx scripts/run-verification.ts",
+        "verify:debug": "playwright test --debug",
+        "verify:ui": "playwright test --ui",
+        "verify:trace": "playwright test --trace on",
+        "verify:report": "playwright show-report",
+        "test:accuracy": "vitest run tests/verification/accuracy.test.ts",
+        "type-check": "tsc --noEmit --project tests/verification/tsconfig.json"
     },
     "dependencies": {
         "@babel/generator": "^7.29.1",
@@ -73,11 +80,13 @@
         "@nuxt/schema": "^3.0.0",
         "@pinia/nuxt": "^0.11.3",
         "@playwright/test": "^1.58.2",
+        "@tanstack/vue-virtual": "^3.13.12",
         "@types/babel__generator": "^7.27.0",
         "@types/babel__traverse": "^7.28.0",
         "@types/node": "^25.5.0",
         "@vitejs/plugin-vue": "^6.0.0",
         "@vitest/coverage-v8": "^4.1.0",
+        "@vitest/ui": "^4.1.4",
         "concurrently": "^9.2.1",
         "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
@@ -92,10 +101,12 @@
         "playwright": "^1.58.2",
         "postcss-html": "^1.8.1",
         "prettier": "^3.8.1",
+        "sinon": "^21.1.2",
         "sirv": "^3.0.2",
         "stylelint": "^17.4.0",
         "stylelint-config-standard": "^40.0.0",
         "stylelint-config-standard-vue": "^1.0.0",
+        "tsx": "^4.21.0",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.54.0",
         "unbuild": "^3.6.1",