nuxt-devtools-observatory 0.1.33 → 0.1.34

package/dist/runtime/composables/pinia-store-registry.js

@@ -0,0 +1,447 @@
+import { getCurrentInstance } from "vue";
+function nowMs() {
+  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+function safeSnapshot(value) {
+  try {
+    return JSON.parse(JSON.stringify(value));
+  } catch {
+    return value;
+  }
+}
+function parsePath(path) {
+  return path.replace(/\[(\d+)\]/g, ".$1").split(".").map((part) => part.trim()).filter(Boolean).map((part) => /^\d+$/.test(part) ? Number(part) : part);
+}
+function setAtPath(target, path, value) {
+  const parts = parsePath(path);
+  if (parts.length === 0) {
+    return;
+  }
+  let cursor = target;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const key = parts[i];
+    if (!cursor || typeof cursor !== "object") {
+      return;
+    }
+    const objectCursor = cursor;
+    const next = objectCursor[String(key)];
+    if (next === void 0 || next === null || typeof next !== "object") {
+      objectCursor[String(key)] = typeof parts[i + 1] === "number" ? [] : {};
+    }
+    cursor = objectCursor[String(key)];
+  }
+  if (!cursor || typeof cursor !== "object") {
+    return;
+  }
+  ;
+  cursor[String(parts[parts.length - 1])] = value;
+}
+function collectDiff(before, after, path = "", depth = 0, out = []) {
+  if (out.length >= 80 || depth > 6) {
+    return out;
+  }
+  if (Object.is(before, after)) {
+    return out;
+  }
+  const beforeIsObj = before !== null && typeof before === "object";
+  const afterIsObj = after !== null && typeof after === "object";
+  if (!beforeIsObj || !afterIsObj) {
+    out.push({ path: path || "$", before, after });
+    return out;
+  }
+  const beforeRec = before;
+  const afterRec = after;
+  const keys = /* @__PURE__ */ new Set([...Object.keys(beforeRec), ...Object.keys(afterRec)]);
+  for (const key of keys) {
+    const nextPath = path ? `${path}.${key}` : key;
+    collectDiff(beforeRec[key], afterRec[key], nextPath, depth + 1, out);
+    if (out.length >= 80) {
+      break;
+    }
+  }
+  return out;
+}
+function stackFromError() {
+  const stack = new Error().stack;
+  if (!stack) {
+    return [];
+  }
+  return stack.split("\n").slice(2, 10).map((line) => line.trim());
+}
+function inferDependencyFromInstance() {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    return null;
+  }
+  const file = instance.type?.__file;
+  const name = instance.type?.__name || instance.type?.name || (file?.split("/").pop() ?? `component:${instance.uid}`);
+  return {
+    id: `component:${instance.uid}`,
+    kind: "component",
+    name,
+    file
+  };
+}
+function parseStackLine(line) {
+  const callsiteMatch = line.match(/^at\s+(.+?)\s+\((.+?):\d+:\d+\)$/);
+  if (callsiteMatch) {
+    return {
+      name: callsiteMatch[1]?.trim(),
+      file: callsiteMatch[2]?.trim()
+    };
+  }
+  const fileOnlyMatch = line.match(/^at\s+(.+?):\d+:\d+$/);
+  if (fileOnlyMatch) {
+    return {
+      file: fileOnlyMatch[1]?.trim()
+    };
+  }
+  return {};
+}
+function inferDependenciesFromStack(stack) {
+  const result = [];
+  for (const line of stack) {
+    const parsed = parseStackLine(line);
+    const file = parsed.file;
+    const rawName = parsed.name;
+    const name = rawName?.includes(".") ? rawName.split(".").pop() : rawName;
+    if (name && /^use[A-Z]/.test(name)) {
+      result.push({
+        id: `composable:${file ?? name}`,
+        kind: "composable",
+        name,
+        file
+      });
+    }
+    if (file?.includes("/composables/")) {
+      const fileName = file.split("/").pop() ?? "";
+      const composableName = fileName.replace(/\.(mjs|cjs|js|ts|tsx|vue)$/i, "");
+      if (/^use[A-Z]/.test(composableName)) {
+        result.push({
+          id: `composable-file:${file}`,
+          kind: "composable",
+          name: composableName,
+          file
+        });
+      }
+    }
+    if (file?.endsWith(".vue")) {
+      const fileName = file.split("/").pop() ?? file;
+      const componentName = fileName.replace(/\.vue$/i, "");
+      result.push({
+        id: `component-file:${file}`,
+        kind: "component",
+        name: componentName,
+        file
+      });
+    }
+  }
+  return result;
+}
+function pushUniqueDependency(deps, dependency) {
+  if (!dependency.id) {
+    return;
+  }
+  if (deps.some((item) => item.id === dependency.id)) {
+    return;
+  }
+  deps.push(dependency);
+}
+export function setupPiniaStoreRegistry(options) {
+  const pinia = options.pinia;
+  const maxTimeline = typeof options.maxTimeline === "number" ? options.maxTimeline : 100;
+  const stackProvider = options.stackProvider ?? stackFromError;
+  const entries = /* @__PURE__ */ new Map();
+  const stores = /* @__PURE__ */ new Map();
+  const stopHandles = /* @__PURE__ */ new Map();
+  const activeActions = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  let dirty = true;
+  let cached = "[]";
+  function notifyChange() {
+    dirty = true;
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+  function inferPersistedStorageDetails(store) {
+    const persistConfig = store.$persist ?? store.$options?.persist ?? store.persist;
+    if (!persistConfig) {
+      return "Persist plugin detected";
+    }
+    const list = Array.isArray(persistConfig) ? persistConfig : [persistConfig];
+    const storageLabels = /* @__PURE__ */ new Set();
+    for (const item of list) {
+      if (!item || typeof item !== "object") {
+        continue;
+      }
+      const storage = item.storage;
+      if (!storage || typeof storage !== "object") {
+        continue;
+      }
+      const candidate = storage;
+      if (typeof localStorage !== "undefined" && candidate.getItem === localStorage.getItem) {
+        storageLabels.add("localStorage");
+      } else if (typeof sessionStorage !== "undefined" && candidate.getItem === sessionStorage.getItem) {
+        storageLabels.add("sessionStorage");
+      } else {
+        storageLabels.add("custom storage");
+      }
+    }
+    if (storageLabels.size === 0) {
+      return "Persist plugin detected";
+    }
+    return `Persist plugin detected (${[...storageLabels].join(", ")})`;
+  }
+  function inferHydrationTimeline(store) {
+    const payload = options.nuxtPayload;
+    const fromPayload = !!payload?.pinia?.[store.$id];
+    const hasPersist = !!store.$persist || !!store.$options?.persist || !!store.persist;
+    const events = [];
+    let at = nowMs();
+    if (fromPayload) {
+      events.push({
+        at,
+        source: "nuxt-payload",
+        details: "Nuxt payload state detected"
+      });
+      at += 0.01;
+    }
+    if (hasPersist) {
+      events.push({
+        at,
+        source: "persistedstate",
+        details: inferPersistedStorageDetails(store)
+      });
+      at += 0.01;
+    }
+    if (events.length === 0) {
+      events.push({
+        at,
+        source: "runtime",
+        details: void 0
+      });
+    }
+    return events;
+  }
+  function trimTimeline(entry) {
+    if (entry.timeline.length <= maxTimeline) {
+      return;
+    }
+    entry.timeline.splice(0, entry.timeline.length - maxTimeline);
+  }
+  function ensureStore(store) {
+    if (!store?.$id || stores.has(store.$id)) {
+      return;
+    }
+    stores.set(store.$id, store);
+    const entry = {
+      id: store.$id,
+      name: store.$id,
+      state: safeSnapshot(store.$state),
+      dependencies: [],
+      timeline: [],
+      hydrationTimeline: inferHydrationTimeline(store),
+      hydration: void 0
+    };
+    entry.hydration = entry.hydrationTimeline[0];
+    entries.set(store.$id, entry);
+    const offAction = store.$onAction(({ name, args, after, onError }) => {
+      const actionId = `${store.$id}:action:${name}:${nowMs()}:${Math.random().toString(36).slice(2, 8)}`;
+      const start = nowMs();
+      const startSnapshot = safeSnapshot(store.$state);
+      const stack = stackProvider();
+      const dependenciesFromStack = inferDependenciesFromStack(stack);
+      const dependencyFromInstance = inferDependencyFromInstance();
+      const current = entries.get(store.$id);
+      if (!current) {
+        return;
+      }
+      if (dependencyFromInstance) {
+        pushUniqueDependency(current.dependencies, dependencyFromInstance);
+      }
+      for (const dependency of dependenciesFromStack) {
+        pushUniqueDependency(current.dependencies, dependency);
+      }
+      const event = {
+        id: actionId,
+        storeId: store.$id,
+        storeName: store.$id,
+        kind: "action",
+        name,
+        startTime: start,
+        status: "active",
+        beforeState: startSnapshot,
+        afterState: startSnapshot,
+        diff: [],
+        payload: safeSnapshot(args),
+        callerStack: stack
+      };
+      current.timeline.push(event);
+      trimTimeline(current);
+      current.lastActionAt = start;
+      activeActions.set(actionId, event);
+      notifyChange();
+      after(() => {
+        const end = nowMs();
+        const done = entries.get(store.$id);
+        if (!done) {
+          return;
+        }
+        const afterState = safeSnapshot(store.$state);
+        event.endTime = end;
+        event.durationMs = end - start;
+        event.status = "ok";
+        event.afterState = afterState;
+        event.diff = collectDiff(event.beforeState, afterState);
+        done.state = afterState;
+        done.lastMutationAt = end;
+        activeActions.delete(actionId);
+        notifyChange();
+      });
+      onError((error) => {
+        const end = nowMs();
+        const done = entries.get(store.$id);
+        if (!done) {
+          return;
+        }
+        const afterState = safeSnapshot(store.$state);
+        event.endTime = end;
+        event.durationMs = end - start;
+        event.status = "error";
+        event.afterState = afterState;
+        event.diff = collectDiff(event.beforeState, afterState);
+        event.error = error instanceof Error ? error.message : String(error);
+        done.state = afterState;
+        done.lastMutationAt = end;
+        activeActions.delete(actionId);
+        notifyChange();
+      });
+    });
+    const offSub = store.$subscribe(
+      (mutation, state) => {
+        const current = entries.get(store.$id);
+        if (!current) {
+          return;
+        }
+        const beforeState = safeSnapshot(current.state);
+        const afterState = safeSnapshot(state);
+        const at = nowMs();
+        const event = {
+          id: `${store.$id}:mutation:${at}:${Math.random().toString(36).slice(2, 8)}`,
+          storeId: store.$id,
+          storeName: store.$id,
+          kind: "mutation",
+          name: mutation.type,
+          startTime: at,
+          endTime: at,
+          durationMs: 0,
+          status: "ok",
+          beforeState,
+          afterState,
+          diff: collectDiff(beforeState, afterState),
+          payload: safeSnapshot(mutation.payload),
+          callerStack: stackProvider()
+        };
+        current.timeline.push(event);
+        trimTimeline(current);
+        current.state = afterState;
+        current.lastMutationAt = at;
+        notifyChange();
+      },
+      { detached: true, flush: "sync" }
+    );
+    stopHandles.set(store.$id, [offAction, offSub]);
+    notifyChange();
+  }
+  function clear() {
+    for (const [id, entry] of entries) {
+      const store = stores.get(id);
+      entry.timeline = [];
+      entry.dependencies = [];
+      entry.state = safeSnapshot(store?.$state ?? entry.state);
+      entry.lastActionAt = void 0;
+      entry.lastMutationAt = void 0;
+    }
+    notifyChange();
+  }
+  function editState(storeId, path, value) {
+    const store = stores.get(storeId);
+    if (!store || !path) {
+      return;
+    }
+    if (typeof store.$patch === "function") {
+      ;
+      store.$patch((state) => {
+        setAtPath(state, path, value);
+      });
+    } else {
+      setAtPath(store.$state, path, value);
+    }
+    notifyChange();
+  }
+  function getAll() {
+    return [...entries.values()].map((entry) => ({
+      ...entry,
+      state: safeSnapshot(entry.state),
+      dependencies: [...entry.dependencies],
+      hydrationTimeline: entry.hydrationTimeline.map((event) => ({ ...event })),
+      timeline: entry.timeline.map((event) => ({
+        ...event,
+        beforeState: safeSnapshot(event.beforeState),
+        afterState: safeSnapshot(event.afterState),
+        diff: [...event.diff]
+      }))
+    }));
+  }
+  function getSnapshot() {
+    if (!dirty) {
+      return cached;
+    }
+    try {
+      cached = JSON.stringify(getAll());
+    } catch {
+      cached = "[]";
+    }
+    dirty = false;
+    return cached;
+  }
+  function onChange(cb) {
+    listeners.add(cb);
+    return () => {
+      listeners.delete(cb);
+    };
+  }
+  function teardown() {
+    for (const handlers of stopHandles.values()) {
+      for (const off of handlers) {
+        off();
+      }
+    }
+    stopHandles.clear();
+    stores.clear();
+    entries.clear();
+    activeActions.clear();
+    listeners.clear();
+    dirty = true;
+    cached = "[]";
+  }
+  if (pinia?._s) {
+    for (const store of pinia._s.values()) {
+      ensureStore(store);
+    }
+  }
+  if (typeof pinia?.use === "function") {
+    pinia.use(({ store }) => {
+      ensureStore(store);
+    });
+  }
+  return {
+    clear,
+    editState,
+    getAll,
+    getSnapshot,
+    onChange,
+    teardown
+  };
+}

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/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
@@ -98,12 +107,19 @@ export default defineNuxtPlugin(() => {
     }
     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;
@@ -137,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;
@@ -233,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
@@ -258,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: {} }
     ];
@@ -265,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,
@@ -292,6 +325,7 @@ 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,

package/dist/runtime/test-bridge.js

@@ -40,6 +40,14 @@ export function injectTestBridge() {
       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: {},
@@ -58,10 +66,15 @@ export function injectTestBridge() {
       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();
+      renderRegistry?.clear?.();
+      composableRegistry?.clear?.();
+      fetchRegistry?.clear?.();
+      if (piniaRegistry?.clear) {
+        piniaRegistry.clear();
+      }
     },
     async startRecording() {
       const { traceStore } = await import("./tracing/traceStore.js");
@@ -77,7 +90,8 @@ export function injectTestBridge() {
         heatmap: await this.getHeatmapData(),
         composables: await this.getComposableEntries(),
         fetches: await this.getFetchEntries(),
-        transitions: await this.getTransitionEntries()
+        transitions: await this.getTransitionEntries(),
+        piniaStores: await this.getPiniaStores()
       };
       return JSON.stringify(snapshot, null, 2);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-devtools-observatory",
-    "version": "0.1.33",
+    "version": "0.1.34",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "license": "MIT",
     "repository": {