nuxt-devtools-observatory 0.1.24 → 0.1.25

package/client/src/views/ComposableTracker.vue

@@ -2,7 +2,20 @@
 import { ref, computed } from 'vue'
 import { useObservatoryData, getObservatoryOrigin, type ComposableEntry as RuntimeComposableEntry } from '../stores/observatory'
 
-const { composables: rawEntries, connected, clearComposables } = useObservatoryData()
+const { composables: rawEntries, connected, features, clearComposables } = useObservatoryData()
+
+const composableMode = computed<'route' | 'session'>(() => (features.value?.composableNavigationMode === 'session' ? 'session' : 'route'))
+
+function toggleComposableMode() {
+    const origin = getObservatoryOrigin()
+
+    if (!origin) {
+        return
+    }
+
+    const nextMode = composableMode.value === 'route' ? 'session' : 'route'
+    window.top?.postMessage({ type: 'observatory:set-composable-mode', mode: nextMode }, origin)
+}
 
 function clearSession() {
     const origin = getObservatoryOrigin()
@@ -17,17 +30,28 @@ function clearSession() {
 // same composable in different components are two separate rows.
 
 function formatVal(v: unknown): string {
-    if (v === null) return 'null'
-    if (v === undefined) return 'undefined'
-    if (typeof v === 'string') return `"${v}"`
+    if (v === null) {
+        return 'null'
+    }
+
+    if (v === undefined) {
+        return 'undefined'
+    }
+
+    if (typeof v === 'string') {
+        return `"${v}"`
+    }
+
     if (typeof v === 'object') {
         try {
             const s = JSON.stringify(v)
+
             return s.length > 80 ? s.slice(0, 80) + '…' : s
         } catch {
             return String(v)
         }
     }
+
     return String(v)
 }
 
@@ -90,7 +114,11 @@ const counts = computed(() => ({
 }))
 
 const filtered = computed(() => {
-    return entries.value.filter((entry) => {
+    // Newest entries are appended by the runtime registry, so reverse for recency-first UI.
+    const reversed = [...entries.value].reverse()
+
+    // Apply all filters first
+    const filtered = reversed.filter((entry) => {
         if (filter.value === 'leak' && !entry.leak) {
             return false
         }
@@ -124,6 +152,21 @@ const filtered = computed(() => {
 
         return true
     })
+
+    // Partition into layout-level (pinned to top) and regular entries
+    const layoutEntries: RuntimeComposableEntry[] = []
+    const regularEntries: RuntimeComposableEntry[] = []
+
+    for (const entry of filtered) {
+        if (entry.isLayoutComposable) {
+            layoutEntries.push(entry)
+        } else {
+            regularEntries.push(entry)
+        }
+    }
+
+    // Combine: layout entries first (already sorted by recency), then regular entries
+    return [...layoutEntries, ...regularEntries]
 })
 
 function lifecycleRows(entry: RuntimeComposableEntry) {
@@ -175,7 +218,10 @@ function refExpandKey(entryId: string, refKey: string) {
 }
 
 function isLongValue(v: unknown): boolean {
-    if (v === null || v === undefined || typeof v !== 'object') return false
+    if (v === null || v === undefined || typeof v !== 'object') {
+        return false
+    }
+
     try {
         return JSON.stringify(v).length > 60
     } catch {
@@ -190,8 +236,13 @@ function isRefExpanded(entryId: string, refKey: string): boolean {
 function toggleRefExpand(entryId: string, refKey: string) {
     const key = refExpandKey(entryId, refKey)
     const next = new Set(expandedRefs.value)
-    if (next.has(key)) next.delete(key)
-    else next.add(key)
+
+    if (next.has(key)) {
+        next.delete(key)
+    } else {
+        next.add(key)
+    }
+
     expandedRefs.value = next
 }
 
@@ -247,6 +298,7 @@ function applyEdit() {
         editError.value = ''
     } catch (err) {
         editError.value = `Invalid JSON: ${(err as Error).message}`
+
         return
     }
 
@@ -296,8 +348,17 @@ function applyEdit() {
             <button :class="{ active: filter === 'mounted' }" @click="filter = 'mounted'">mounted</button>
             <button :class="{ 'danger-active': filter === 'leak' }" @click="filter = 'leak'">leaks only</button>
             <button :class="{ active: filter === 'unmounted' }" @click="filter = 'unmounted'">unmounted</button>
+            <button
+                class="mode-btn"
+                :title="`switch to ${composableMode === 'route' ? 'session' : 'route'} mode`"
+                @click="toggleComposableMode"
+            >
+                mode: {{ composableMode }}
+            </button>
             <input v-model="search" type="search" placeholder="search name, file, or ref…" style="max-width: 220px; margin-left: auto" />
-            <button class="clear-btn" title="Clear session history" @click="clearSession">clear</button>
+            <button v-if="composableMode === 'session'" class="clear-btn" title="Clear session history" @click="clearSession">
+                clear session
+            </button>
         </div>
 
         <div class="list">
@@ -543,6 +604,16 @@ function applyEdit() {
     background: transparent;
 }
 
+.mode-btn {
+    border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
+    color: var(--blue);
+}
+
+.mode-btn:hover {
+    border-color: var(--blue);
+    background: color-mix(in srgb, var(--blue) 12%, transparent);
+}
+
 .list {
     flex: 1;
     overflow: auto;

package/dist/module.d.mts

@@ -39,6 +39,13 @@ interface ModuleOptions {
      * @default 100
      */
     maxRenderTimeline?: number;
+    /**
+     * Composable tracker navigation mode.
+     * - `route`: clear composable entries on every page navigation
+     * - `session`: keep entries across navigations until manually cleared
+     * @default 'route'
+     */
+    composableNavigationMode?: 'route' | 'session';
     /**
      * Enable the useFetch / useAsyncData dashboard tab
      * @default true

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "0.1.24",
+  "version": "0.1.25",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -558,6 +558,7 @@ const defaults = {
   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,
+  composableNavigationMode: process.env.OBSERVATORY_COMPOSABLE_NAVIGATION_MODE === "session" ? "session" : "route",
   heatmapHideInternals: process.env.OBSERVATORY_HEATMAP_HIDE_INTERNALS === "true"
 };
 const module$1 = defineNuxtModule({
@@ -593,7 +594,8 @@ const module$1 = defineNuxtModule({
       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)
+      maxRenderTimeline: options.maxRenderTimeline ?? (process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100),
+      composableNavigationMode: options.composableNavigationMode ?? (process.env.OBSERVATORY_COMPOSABLE_NAVIGATION_MODE === "session" ? "session" : "route")
     };
     nuxt.hook("vite:extendConfig", (config) => {
       const alias = config.resolve?.alias;
@@ -683,6 +685,7 @@ ${configScript}`);
       maxComposableHistory: resolved.maxComposableHistory,
       maxComposableEntries: resolved.maxComposableEntries,
       maxRenderTimeline: resolved.maxRenderTimeline,
+      composableNavigationMode: resolved.composableNavigationMode,
       heatmapHideInternals: resolved.heatmapHideInternals,
       heatmapThresholdCount: resolved.heatmapThresholdCount,
       heatmapThresholdTime: resolved.heatmapThresholdTime

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

@@ -34,6 +34,10 @@ export interface ComposableEntry {
     line: number;
     /** Route path the composable was registered on, e.g. "/products". */
     route: string;
+    /** File path of the component that called this composable. */
+    callerComponentFile?: string;
+    /** Whether this composable is called from a layout component (persists across pages). */
+    isLayoutComposable?: boolean;
 }
 /**
  * Registers a new composable entry, updates an existing one, or retrieves all entries.
@@ -62,6 +66,7 @@ export declare function setupComposableRegistry(): {
     registerRawRefs: (id: string, refs: Record<string, unknown>) => void;
     onComposableChange: (cb: () => void) => void;
     clear: () => void;
+    clearNonLayout: () => void;
     setRoute: (path: string) => void;
     getRoute: () => string;
     update: (id: string, patch: Partial<ComposableEntry>) => void;

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

@@ -213,7 +213,9 @@ export function setupComposableRegistry() {
       lifecycle: entry.lifecycle,
       file: entry.file,
       line: entry.line,
-      route: entry.route
+      route: entry.route,
+      callerComponentFile: entry.callerComponentFile,
+      isLayoutComposable: entry.isLayoutComposable
     };
   }
   function getAll() {
@@ -254,6 +256,30 @@ export function setupComposableRegistry() {
     markDirty();
     emit("composable:clear", {});
   }
+  function clearNonLayout() {
+    if (_pendingFrame !== null) {
+      cancelAnimationFrame(_pendingFrame);
+      _pendingFrame = null;
+    }
+    const layoutIds = [...entries.entries()].filter(([, entry]) => entry.isLayoutComposable).map(([id]) => id);
+    for (const [id] of entries.entries()) {
+      if (!layoutIds.includes(id)) {
+        const stop = liveRefWatchers.get(id);
+        if (stop) {
+          stop();
+          liveRefWatchers.delete(id);
+        }
+        liveRefs.delete(id);
+        rawRefs.delete(id);
+        prevValues.delete(id);
+        entryHistory.delete(id);
+        entries.delete(id);
+      }
+    }
+    sharedKeysCache.clear();
+    markDirty();
+    emit("composable:clear", {});
+  }
   function editValue(id, key, value) {
     const live = liveRefs.get(id);
     if (!live) {
@@ -278,6 +304,7 @@ export function setupComposableRegistry() {
     registerRawRefs,
     onComposableChange,
     clear,
+    clearNonLayout,
     setRoute,
     getRoute,
     update,
@@ -350,6 +377,21 @@ export function __trackComposable(name, callFn, meta) {
       }
     }
   }
+  const inst = instance;
+  let callerComponentFile;
+  if (inst?.type?.__file) {
+    callerComponentFile = inst.type.__file;
+  } else if (inst?.__vueParentComponent?.type?.__file) {
+    callerComponentFile = inst.__vueParentComponent.type.__file;
+  } else if (inst?.parent?.type?.__file) {
+    callerComponentFile = inst.parent.type.__file;
+  } else if (inst?.__vueParentComponent?.fileName) {
+    callerComponentFile = inst.__vueParentComponent.fileName;
+  } else if (inst?.type?.name && inst?.type?.name.includes("default")) {
+    callerComponentFile = `layouts/${inst.type.name}.vue`;
+  }
+  const normalizedFile = callerComponentFile?.replace(/\\/g, "/") ?? "";
+  const isLayoutComponent = normalizedFile.includes("/layouts/");
   const entry = {
     id,
     name,
@@ -371,7 +413,9 @@ export function __trackComposable(name, callFn, meta) {
     },
     file: meta.file,
     line: meta.line,
-    route: registry.getRoute()
+    route: registry.getRoute(),
+    callerComponentFile,
+    isLayoutComposable: isLayoutComponent
   };
   if (!instance && registry.getAll().some((e) => e.id === id)) {
     registry.update(id, {

package/dist/runtime/plugin.js

@@ -11,6 +11,7 @@ export default defineNuxtPlugin(() => {
   }
   const nuxtApp = useNuxtApp();
   const config = useRuntimeConfig().public.observatory;
+  let composableNavigationMode = config.composableNavigationMode === "session" ? "session" : "route";
   if (config.renderHeatmap) {
     nuxtApp.vueApp.config.performance = true;
   }
@@ -55,6 +56,15 @@ export default defineNuxtPlugin(() => {
         }
         const source = event.source;
         source?.postMessage({ type: "observatory:snapshot", data: buildSnapshot() }, event.origin);
+        return;
+      }
+      if (type === "observatory:set-composable-mode") {
+        const mode = event.data?.mode;
+        if (mode === "route" || mode === "session") {
+          composableNavigationMode = mode;
+        }
+        const source = event.source;
+        source?.postMessage({ type: "observatory:snapshot", data: buildSnapshot() }, event.origin);
       }
       if (type === "observatory:edit-composable") {
         const { id, key, value } = event.data;
@@ -109,8 +119,8 @@ export default defineNuxtPlugin(() => {
         if (provideInject && typeof provideInject.clear === "function")
           provideInject.clear();
         const composable = registries.composable;
-        if (composable && typeof composable.clear === "function")
-          composable.clear();
+        if (composableNavigationMode === "route" && composable && typeof composable.clearNonLayout === "function")
+          composable.clearNonLayout();
         const transition = registries.transition;
         if (transition && typeof transition.clear === "function")
           transition.clear();
@@ -171,6 +181,7 @@ export default defineNuxtPlugin(() => {
       fetchDashboard: !!registries.fetch,
       provideInjectGraph: !!registries.provideInject,
       composableTracker: !!registries.composable,
+      composableNavigationMode,
       renderHeatmap: !!registries.render,
       transitionTracker: !!registries.transition
     };

package/package.json

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