nuxt-devtools-observatory 0.1.17 → 0.1.19

package/dist/module.mjs

@@ -5,17 +5,19 @@ import _generate from '@babel/generator';
 import * as t from '@babel/types';
 
 function extractScriptBlock(code) {
-  const openTagRE = /<script(\s[^>]*)?>/i;
-  const openMatch = openTagRE.exec(code);
-  if (!openMatch) {
-    return null;
-  }
-  const start = openMatch.index + openMatch[0].length;
-  const end = code.indexOf("<\/script>", start);
-  if (end === -1) {
+  try {
+    const { parse } = require("@vue/compiler-sfc");
+    const { descriptor } = parse(code, { ignoreEmpty: false });
+    const block = descriptor.scriptSetup ?? descriptor.script ?? null;
+    if (!block) {
+      return null;
+    }
+    const start = block.loc.start.offset;
+    const end = block.loc.end.offset;
+    return { content: block.content, start, end };
+  } catch {
     return null;
   }
-  return { content: code.slice(start, end), start, end };
 }
 
 const traverse$2 = _traverse.default ?? _traverse;
@@ -90,9 +92,7 @@ function fetchInstrumentPlugin() {
                 handlerArg = getExpr(args[1]);
                 optsArg = getExpr(args[2]) ?? t.objectExpression([]);
               } else {
-                keyArg = getExpr(args[0]) ?? t.stringLiteral("");
-                optsArg = getExpr(args[1]) ?? t.objectExpression([]);
-                handlerArg = void 0;
+                return;
               }
             } else {
               keyArg = getExpr(args[0]) ?? t.stringLiteral("");
@@ -121,39 +121,41 @@ function fetchInstrumentPlugin() {
               t.objectProperty(t.identifier("originalFn"), t.stringLiteral(originalName))
             ]);
             if ((originalName === "useAsyncData" || originalName === "useLazyAsyncData") && handlerArg) {
-              if (handlerArg) {
-                const wrappedHandler = t.arrowFunctionExpression(
-                  [t.restElement(t.identifier("args"))],
-                  t.conditionalExpression(
-                    t.logicalExpression(
-                      "&&",
-                      t.memberExpression(t.identifier("process"), t.identifier("dev")),
-                      t.memberExpression(t.identifier("process"), t.identifier("client"))
-                    ),
-                    t.callExpression(
-                      t.callExpression(t.identifier("__devFetchHandler"), [handlerArg, keyArg ?? t.stringLiteral(key), meta]),
-                      [t.spreadElement(t.identifier("args"))]
-                    ),
-                    t.callExpression(handlerArg, [t.spreadElement(t.identifier("args"))])
-                  )
-                );
-                wrappedHandler.__observatoryTransformed = true;
-                needsFetchHandlerHelper = true;
-                if (keyArg) {
-                  const newCall = t.callExpression(t.identifier(originalName), [
-                    keyArg,
-                    wrappedHandler,
-                    optsArg ?? t.objectExpression([])
-                  ]);
-                  newCall.__observatoryTransformed = true;
-                  path.replaceWith(newCall);
-                } else {
-                  const newCall = t.callExpression(t.identifier(originalName), [wrappedHandler]);
-                  newCall.__observatoryTransformed = true;
-                  path.replaceWith(newCall);
-                }
-                modified = true;
+              const wrappedHandler = t.arrowFunctionExpression(
+                [t.restElement(t.identifier("args"))],
+                t.conditionalExpression(
+                  t.logicalExpression(
+                    "&&",
+                    t.memberExpression(t.identifier("process"), t.identifier("dev")),
+                    t.memberExpression(t.identifier("process"), t.identifier("client"))
+                  ),
+                  t.callExpression(
+                    t.callExpression(t.identifier("__devFetchHandler"), [
+                      handlerArg,
+                      keyArg ?? t.stringLiteral(key),
+                      meta
+                    ]),
+                    [t.spreadElement(t.identifier("args"))]
+                  ),
+                  t.callExpression(handlerArg, [t.spreadElement(t.identifier("args"))])
+                )
+              );
+              wrappedHandler.__observatoryTransformed = true;
+              needsFetchHandlerHelper = true;
+              if (keyArg) {
+                const newCall = t.callExpression(t.identifier(originalName), [
+                  keyArg,
+                  wrappedHandler,
+                  optsArg ?? t.objectExpression([])
+                ]);
+                newCall.__observatoryTransformed = true;
+                path.replaceWith(newCall);
+              } else {
+                const newCall = t.callExpression(t.identifier(originalName), [wrappedHandler]);
+                newCall.__observatoryTransformed = true;
+                path.replaceWith(newCall);
               }
+              modified = true;
             } else {
               const newCall = t.callExpression(t.identifier("__devFetchCall"), [
                 t.identifier(originalName),
@@ -244,8 +246,9 @@ function provideInjectPlugin() {
             }
             const args = path.node.arguments;
             const loc = path.node.loc;
+            const fileName = id.split(/[\\/]/).pop() || id;
             const meta = t.objectExpression([
-              t.objectProperty(t.identifier("file"), t.stringLiteral(id.split("/").pop() ?? id)),
+              t.objectProperty(t.identifier("file"), t.stringLiteral(fileName)),
               t.objectProperty(t.identifier("line"), t.numericLiteral(loc?.start.line ?? 0))
             ]);
             if (name === "provide") {
@@ -416,6 +419,11 @@ function _obsMergeHook(original, fn) {
   return function(el) { fn(el); if (original) original(el) }
 }
 
+// Monotonically increasing counter used to make transition IDs unique even
+// when multiple transitions fire within the same performance.now() millisecond
+// (e.g. rapid-toggle stress tests, or simultaneous enter + leave on a swap).
+let _obsSeq = 0
+
 const _ObservedTransition = _obsDefineComponent({
   name: 'Transition',
   inheritAttrs: false,
@@ -442,7 +450,7 @@ const _ObservedTransition = _obsDefineComponent({
       const hookedAttrs = Object.assign({}, attrs, {
         onBeforeEnter: _obsMergeHook(attrs.onBeforeEnter, function() {
           const t = performance.now()
-          const id = transitionName + '::enter::' + t
+          const id = transitionName + '::enter::' + t + '::' + (++_obsSeq)
           enterEntryId = id
           r.register({ id, transitionName, parentComponent, direction: 'enter', phase: 'entering', startTime: t, cancelled: false, appear: isAppear, mode })
         }),
@@ -454,7 +462,7 @@ const _ObservedTransition = _obsDefineComponent({
         }),
         onBeforeLeave: _obsMergeHook(attrs.onBeforeLeave, function() {
           const t = performance.now()
-          const id = transitionName + '::leave::' + t
+          const id = transitionName + '::leave::' + t + '::' + (++_obsSeq)
           leaveEntryId = id
           r.register({ id, transitionName, parentComponent, direction: 'leave', phase: 'leaving', startTime: t, cancelled: false, appear: false, mode })
         }),
@@ -516,7 +524,14 @@ const module$1 = defineNuxtModule({
     composableTracker: true,
     renderHeatmap: true,
     transitionTracker: true,
-    heatmapThreshold: 5
+    heatmapThresholdCount: process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT) : 3,
+    heatmapThresholdTime: process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME) : 1600,
+    maxFetchEntries: process.env.OBSERVATORY_MAX_FETCH_ENTRIES ? Number(process.env.OBSERVATORY_MAX_FETCH_ENTRIES) : 200,
+    maxPayloadBytes: process.env.OBSERVATORY_MAX_PAYLOAD_BYTES ? Number(process.env.OBSERVATORY_MAX_PAYLOAD_BYTES) : 1e4,
+    maxTransitions: process.env.OBSERVATORY_MAX_TRANSITIONS ? Number(process.env.OBSERVATORY_MAX_TRANSITIONS) : 500,
+    maxComposableHistory: process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY) : 50,
+    maxComposableEntries: process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300,
+    maxRenderTimeline: process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100
   },
   setup(options, nuxt) {
     if (!nuxt.options.dev) {
@@ -526,6 +541,21 @@ const module$1 = defineNuxtModule({
       process.env.LAUNCH_EDITOR = "code";
     }
     const resolver = createResolver(import.meta.url);
+    const resolved = {
+      fetchDashboard: options.fetchDashboard ?? (process.env.OBSERVATORY_FETCH_DASHBOARD ? process.env.OBSERVATORY_FETCH_DASHBOARD === "true" : true),
+      provideInjectGraph: options.provideInjectGraph ?? (process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH ? process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH === "true" : true),
+      composableTracker: options.composableTracker ?? (process.env.OBSERVATORY_COMPOSABLE_TRACKER ? process.env.OBSERVATORY_COMPOSABLE_TRACKER === "true" : true),
+      renderHeatmap: options.renderHeatmap ?? (process.env.OBSERVATORY_RENDER_HEATMAP ? process.env.OBSERVATORY_RENDER_HEATMAP === "true" : true),
+      transitionTracker: options.transitionTracker ?? (process.env.OBSERVATORY_TRANSITION_TRACKER ? process.env.OBSERVATORY_TRANSITION_TRACKER === "true" : true),
+      heatmapThresholdCount: options.heatmapThresholdCount ?? (process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT) : 3),
+      heatmapThresholdTime: options.heatmapThresholdTime ?? (process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME) : 1600),
+      maxFetchEntries: options.maxFetchEntries ?? (process.env.OBSERVATORY_MAX_FETCH_ENTRIES ? Number(process.env.OBSERVATORY_MAX_FETCH_ENTRIES) : 200),
+      maxPayloadBytes: options.maxPayloadBytes ?? (process.env.OBSERVATORY_MAX_PAYLOAD_BYTES ? Number(process.env.OBSERVATORY_MAX_PAYLOAD_BYTES) : 1e4),
+      maxTransitions: options.maxTransitions ?? (process.env.OBSERVATORY_MAX_TRANSITIONS ? Number(process.env.OBSERVATORY_MAX_TRANSITIONS) : 500),
+      maxComposableHistory: options.maxComposableHistory ?? (process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY) : 50),
+      maxComposableEntries: options.maxComposableEntries ?? (process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300),
+      maxRenderTimeline: options.maxRenderTimeline ?? (process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100)
+    };
     nuxt.hook("vite:extendConfig", (config) => {
       const alias = config.resolve?.alias;
       const aliases = Array.isArray(alias) ? {} : alias ?? {};
@@ -536,33 +566,37 @@ const module$1 = defineNuxtModule({
       aliases["nuxt-devtools-observatory/runtime/fetch-registry"] = resolver.resolve("./runtime/composables/fetch-registry");
       config.resolve = { ...config.resolve, alias: aliases };
     });
-    if (options.fetchDashboard) {
+    if (resolved.fetchDashboard) {
       addVitePlugin(fetchInstrumentPlugin());
     }
-    if (options.provideInjectGraph) {
+    if (resolved.provideInjectGraph) {
       addVitePlugin(provideInjectPlugin());
     }
-    if (options.composableTracker) {
+    if (resolved.composableTracker) {
       addVitePlugin(composableTrackerPlugin());
     }
-    if (options.transitionTracker) {
+    if (resolved.transitionTracker) {
       addVitePlugin(transitionTrackerPlugin());
     }
-    if (options.fetchDashboard || options.provideInjectGraph || options.composableTracker || options.renderHeatmap || options.transitionTracker) {
+    if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.renderHeatmap || resolved.transitionTracker) {
       addPlugin(resolver.resolve("./runtime/plugin"));
     }
-    if (options.fetchDashboard) {
+    if (resolved.fetchDashboard) {
       addServerPlugin(resolver.resolve("./runtime/nitro/fetch-capture"));
     }
     const CLIENT_PORT = 4949;
     const clientOrigin = `http://localhost:${CLIENT_PORT}`;
+    let innerServer = null;
     nuxt.hook("vite:serverCreated", async (_viteServer, env) => {
       if (!env.isClient) {
         return;
       }
+      if (innerServer) {
+        return;
+      }
       const { createServer } = await import('vite');
       const { default: vue } = await import('@vitejs/plugin-vue');
-      const inner = await createServer({
+      innerServer = await createServer({
         root: resolver.resolve("../client"),
         base: "/",
         server: { port: CLIENT_PORT, strictPort: true, cors: true },
@@ -571,60 +605,45 @@ const module$1 = defineNuxtModule({
         plugins: [vue()],
         logLevel: "warn"
       });
-      await inner.listen();
-      nuxt.hook("close", () => inner.close());
+      await innerServer.listen();
+      nuxt.hook("close", () => {
+        innerServer?.close();
+        innerServer = null;
+      });
     });
     const base = clientOrigin;
-    nuxt.hook("devtools:customTabs", (tabs) => {
-      if (options.fetchDashboard) {
-        tabs.push({
-          name: "observatory-fetch",
-          title: "useFetch",
-          icon: "carbon:radio-button",
-          view: { type: "iframe", src: `${base}/fetch` }
-        });
-      }
-      if (options.provideInjectGraph) {
-        tabs.push({
-          name: "observatory-provide",
-          title: "provide/inject",
-          icon: "carbon:branch",
-          view: { type: "iframe", src: `${base}/provide` }
-        });
-      }
-      if (options.composableTracker) {
-        tabs.push({
-          name: "observatory-composables",
-          title: "Composables",
-          icon: "carbon:function",
-          view: { type: "iframe", src: `${base}/composables` }
-        });
+    nuxt.hook("render:response", (response, { url }) => {
+      if (url.startsWith("/trackers") || url === "/" || url.startsWith("/index.html")) {
+        const configScript = `<script>window.__observatoryConfig = ${JSON.stringify(nuxt.options.runtimeConfig.public.observatory)};<\/script>`;
+        response.body = response.body.replace("<head>", `<head>
+${configScript}`);
       }
-      if (options.renderHeatmap) {
+    });
+    nuxt.hook("devtools:customTabs", (tabs) => {
+      if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.renderHeatmap || resolved.transitionTracker) {
         tabs.push({
-          name: "observatory-heatmap",
-          title: "Heatmap",
+          name: "observatory-trackers",
+          title: "Observatory Trackers",
           icon: "carbon:heat-map",
-          view: { type: "iframe", src: `${base}/heatmap` }
-        });
-      }
-      if (options.transitionTracker) {
-        tabs.push({
-          name: "observatory-transitions",
-          title: "Transitions",
-          icon: "carbon:movement",
-          view: { type: "iframe", src: `${base}/transitions` }
+          view: { type: "iframe", src: `${base}/trackers` }
         });
       }
     });
     nuxt.options.runtimeConfig.public.observatory = {
-      heatmapThreshold: options.heatmapThreshold ?? 5,
+      heatmapThresholdCount: resolved.heatmapThresholdCount,
+      heatmapThresholdTime: resolved.heatmapThresholdTime,
       clientOrigin,
-      fetchDashboard: options.fetchDashboard,
-      provideInjectGraph: options.provideInjectGraph,
-      composableTracker: options.composableTracker,
-      renderHeatmap: options.renderHeatmap,
-      transitionTracker: options.transitionTracker
+      fetchDashboard: resolved.fetchDashboard,
+      provideInjectGraph: resolved.provideInjectGraph,
+      composableTracker: resolved.composableTracker,
+      renderHeatmap: resolved.renderHeatmap,
+      transitionTracker: resolved.transitionTracker,
+      maxFetchEntries: resolved.maxFetchEntries,
+      maxPayloadBytes: resolved.maxPayloadBytes,
+      maxTransitions: resolved.maxTransitions,
+      maxComposableHistory: resolved.maxComposableHistory,
+      maxComposableEntries: resolved.maxComposableEntries,
+      maxRenderTimeline: resolved.maxRenderTimeline
     };
   }
 });

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

@@ -41,7 +41,20 @@ export interface ComposableEntry {
  * - `register`: Registers a new composable entry.
  * - `update`: Updates an existing composable entry.
  * - `getAll`: Retrieves all composable entries.
- * @returns {{ register: (entry: ComposableEntry) => void, update: (id: string, patch: Partial<ComposableEntry>) => void, getAll: () => ComposableEntry[] }} An object with `register`, `update`, and `getAll` methods.
+ * - `getSnapshot`: Returns a cached pre-serialized JSON string, rebuilt only when dirty.
+ * @returns {{
+ *   register: (entry: ComposableEntry) => void,
+ *   registerLiveRefs: (id: string, refs: Record<string, import('vue').Ref<unknown>>) => void,
+ *   registerRawRefs: (id: string, refs: Record<string, unknown>) => void,
+ *   onComposableChange: (cb: () => void) => void,
+ *   clear: () => void,
+ *   setRoute: (path: string) => void,
+ *   getRoute: () => string,
+ *   update: (id: string, patch: Partial<ComposableEntry>) => void,
+ *   getAll: () => ComposableEntry[],
+ *   getSnapshot: () => string,
+ *   editValue: (id: string, key: string, value: unknown) => void
+ * }} An object with `register`, `update`, `getAll`, `getSnapshot`, and related methods.
  */
 export declare function setupComposableRegistry(): {
     register: (entry: ComposableEntry) => void;
@@ -53,6 +66,7 @@ export declare function setupComposableRegistry(): {
     getRoute: () => string;
     update: (id: string, patch: Partial<ComposableEntry>) => void;
     getAll: () => ComposableEntry[];
+    getSnapshot: () => string;
     editValue: (id: string, key: string, value: unknown) => void;
 };
 export declare function __trackComposable<T>(name: string, callFn: () => T, meta: {

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

@@ -1,33 +1,68 @@
-import { ref, isRef, isReactive, isReadonly, unref, computed, watchEffect, getCurrentInstance, onUnmounted } from "vue";
+import { isRef, isReactive, isReadonly, unref, computed, watchEffect, getCurrentInstance, onUnmounted } from "vue";
 export function setupComposableRegistry() {
-  const entries = ref(/* @__PURE__ */ new Map());
+  const entries = /* @__PURE__ */ new Map();
   const liveRefs = /* @__PURE__ */ new Map();
   const liveRefWatchers = /* @__PURE__ */ new Map();
-  const MAX_HISTORY = 50;
+  const MAX_HISTORY = typeof process !== "undefined" && process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY) : 50;
+  const MAX_COMPOSABLE_ENTRIES = typeof process !== "undefined" && process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300;
   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 sharedKeysCache = /* @__PURE__ */ new Map();
+  let dirty = true;
+  let cachedSnapshot = "[]";
+  function markDirty() {
+    dirty = true;
+  }
+  function invalidateSharedKeysForName(name) {
+    sharedKeysCache.delete(name);
+    markDirty();
+  }
+  function deleteEntry(entryId, entryName) {
+    const stop = liveRefWatchers.get(entryId);
+    if (stop) {
+      stop();
+      liveRefWatchers.delete(entryId);
     }
-    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) {
+    liveRefs.delete(entryId);
+    rawRefs.delete(entryId);
+    prevValues.delete(entryId);
+    entryHistory.delete(entryId);
+    entries.delete(entryId);
+    invalidateSharedKeysForName(entryName);
+  }
+  function getSharedKeys(id, name) {
+    let nameCache = sharedKeysCache.get(name);
+    if (nameCache && nameCache.has(id)) {
+      return nameCache.get(id);
+    }
+    nameCache = /* @__PURE__ */ new Map();
+    sharedKeysCache.set(name, nameCache);
+    const peers = [...entries.entries()].filter(([, e]) => e.name === name);
+    for (const [eid] of peers) {
+      const ownRaw = rawRefs.get(eid);
+      if (!ownRaw) {
+        nameCache.set(eid, []);
         continue;
       }
-      for (const [key, obj] of Object.entries(ownRaw)) {
-        if (key in otherRaw && otherRaw[key] === obj) {
-          shared.add(key);
+      const shared = /* @__PURE__ */ new Set();
+      for (const [otherId] of peers) {
+        if (otherId === eid) {
+          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);
+          }
         }
       }
+      nameCache.set(eid, [...shared]);
     }
-    return [...shared];
+    return nameCache.get(id) ?? [];
   }
   let currentRoute = "/";
   function setRoute(path) {
@@ -37,7 +72,17 @@ export function setupComposableRegistry() {
     return currentRoute;
   }
   function register(entry) {
-    entries.value.set(entry.id, entry);
+    if (entries.size >= MAX_COMPOSABLE_ENTRIES) {
+      const unmountedId = [...entries.entries()].find(([, e]) => e.status === "unmounted")?.[0];
+      const evictId = unmountedId ?? entries.keys().next().value;
+      if (evictId !== void 0) {
+        const evictName = entries.get(evictId)?.name ?? "";
+        deleteEntry(evictId, evictName);
+      }
+    }
+    entries.set(entry.id, entry);
+    invalidateSharedKeysForName(entry.name);
+    markDirty();
     emit("composable:register", entry);
   }
   function registerLiveRefs(id, refs) {
@@ -53,54 +98,67 @@ export function setupComposableRegistry() {
       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 stopFns = [];
+    for (const [k, r] of Object.entries(refs)) {
+      if (!prevValues.has(id)) {
+        prevValues.set(id, {});
+      }
+      try {
+        prevValues.get(id)[k] = JSON.stringify(unref(r)) ?? "";
+      } catch {
+        prevValues.get(id)[k] = "";
+      }
+      const stopK = watchEffect(() => {
         const val = unref(r);
-        const serialised = JSON.stringify(val) ?? "";
-        now[k] = serialised;
-        if (serialised !== prev[k]) {
+        let serialised = "";
+        try {
+          serialised = JSON.stringify(val) ?? "";
+        } catch {
+        }
+        const prev = prevValues.get(id);
+        if (prev && serialised !== prev[k]) {
+          const t = typeof performance !== "undefined" ? performance.now() : Date.now();
           const history = entryHistory.get(id) ?? [];
           history.push({ t, key: k, value: safeValue(val) });
           if (history.length > MAX_HISTORY) {
             history.shift();
           }
           entryHistory.set(id, history);
+          prev[k] = serialised;
+          markDirty();
+          _scheduleOnChange();
         }
-      }
-      prevValues.set(id, now);
-      _onChange?.();
-    });
+      });
+      stopFns.push(stopK);
+    }
+    const stop = () => stopFns.forEach((s) => s());
     liveRefWatchers.set(id, stop);
   }
   function registerRawRefs(id, refs) {
     rawRefs.set(id, refs);
   }
   let _onChange = null;
+  let _pendingFrame = null;
+  function _scheduleOnChange() {
+    if (_pendingFrame !== null) {
+      return;
+    }
+    _pendingFrame = requestAnimationFrame(() => {
+      _pendingFrame = null;
+      _onChange?.();
+    });
+  }
   function onComposableChange(cb) {
     _onChange = cb;
   }
   function update(id, patch) {
-    const existing = entries.value.get(id);
+    const existing = entries.get(id);
     if (!existing) {
       return;
     }
     const updated = { ...existing, ...patch };
-    entries.value.set(id, updated);
+    entries.set(id, updated);
+    markDirty();
     emit("composable:update", updated);
   }
   function safeValue(val) {
@@ -149,7 +207,7 @@ export function setupComposableRegistry() {
       leakReason: entry.leakReason,
       refs: freshRefs,
       history: entryHistory.get(entry.id) ?? [],
-      sharedKeys: computeSharedKeys(entry.id, entry.name),
+      sharedKeys: getSharedKeys(entry.id, entry.name),
       watcherCount: entry.watcherCount,
       intervalCount: entry.intervalCount,
       lifecycle: entry.lifecycle,
@@ -159,7 +217,19 @@ export function setupComposableRegistry() {
     };
   }
   function getAll() {
-    return [...entries.value.values()].map(sanitize);
+    return [...entries.values()].map(sanitize);
+  }
+  function getSnapshot() {
+    if (!dirty) {
+      return cachedSnapshot;
+    }
+    try {
+      cachedSnapshot = JSON.stringify([...entries.values()].map(sanitize)) ?? "[]";
+    } catch {
+      cachedSnapshot = "[]";
+    }
+    dirty = false;
+    return cachedSnapshot;
   }
   function emit(event, data) {
     if (!import.meta.client) {
@@ -169,13 +239,19 @@ export function setupComposableRegistry() {
     channel?.send(event, data);
   }
   function clear() {
+    if (_pendingFrame !== null) {
+      cancelAnimationFrame(_pendingFrame);
+      _pendingFrame = null;
+    }
     for (const stop of liveRefWatchers.values()) stop();
     liveRefWatchers.clear();
     liveRefs.clear();
     rawRefs.clear();
     prevValues.clear();
     entryHistory.clear();
-    entries.value.clear();
+    sharedKeysCache.clear();
+    entries.clear();
+    markDirty();
     emit("composable:clear", {});
   }
   function editValue(id, key, value) {
@@ -187,7 +263,7 @@ export function setupComposableRegistry() {
     if (!r) {
       return;
     }
-    const entry = entries.value.get(id);
+    const entry = entries.get(id);
     if (!entry) {
       return;
     }
@@ -196,7 +272,19 @@ export function setupComposableRegistry() {
     }
     r.value = value;
   }
-  return { register, registerLiveRefs, registerRawRefs, onComposableChange, clear, setRoute, getRoute, update, getAll, editValue };
+  return {
+    register,
+    registerLiveRefs,
+    registerRawRefs,
+    onComposableChange,
+    clear,
+    setRoute,
+    getRoute,
+    update,
+    getAll,
+    getSnapshot,
+    editValue
+  };
 }
 export function __trackComposable(name, callFn, meta) {
   if (!import.meta.dev) {
@@ -286,8 +374,10 @@ export function __trackComposable(name, callFn, meta) {
     route: registry.getRoute()
   };
   registry.register(entry);
-  registry.registerLiveRefs(id, liveRefMap);
-  registry.registerRawRefs(id, rawRefMap);
+  if (instance) {
+    registry.registerLiveRefs(id, liveRefMap);
+    registry.registerRawRefs(id, rawRefMap);
+  }
   if (instance) {
     onUnmounted(() => {
       const leakedWatchers = trackedWatchers.filter((w) => w.effect.active);