nuxt-devtools-observatory 0.1.10 → 0.1.12

package/client/src/views/RenderHeatmap.vue

@@ -9,12 +9,15 @@ interface ComponentNode {
     element?: string
     depth: number
     path: string[]
-    renders: number
+    rerenders: number
+    mountCount: number
     avgMs: number
     triggers: string[]
     children: ComponentNode[]
     parentId?: string
     parentLabel?: string
+    isPersistent: boolean
+    isHydrationMount: boolean
 }
 
 const TreeNode = defineComponent({
@@ -23,45 +26,19 @@ const TreeNode = defineComponent({
         node: Object as () => ComponentNode,
         mode: String,
         threshold: Number,
-        hotOnly: Boolean,
         selected: String,
-        search: String,
         expandedIds: Object as () => Set<string>,
     },
     emits: ['select', 'toggle'],
     setup(props, { emit }): () => VNode | null {
         function nodeValue(node: ComponentNode) {
-            return props.mode === 'count' ? node.renders : node.avgMs
+            return props.mode === 'count' ? node.rerenders + node.mountCount : node.avgMs
         }
 
         function isHot(node: ComponentNode) {
             return nodeValue(node) >= props.threshold!
         }
 
-        function matchesSearch(node: ComponentNode, search: string): boolean {
-            if (!search) {
-                return true
-            }
-
-            const query = search.toLowerCase()
-
-            return (
-                node.label.toLowerCase().includes(query) ||
-                node.file.toLowerCase().includes(query) ||
-                node.path.some((segment) => segment.toLowerCase().includes(query)) ||
-                node.triggers.some((trigger) => trigger.toLowerCase().includes(query))
-            )
-        }
-
-        function shouldShow(node: ComponentNode, search: string): boolean {
-            const selfMatches = matchesSearch(node, search)
-            const childMatches = node.children.some((child) => shouldShow(child, search))
-            const searchMatches = !search || selfMatches || childMatches
-            const hotMatches = !props.hotOnly || isHot(node) || node.children.some((child) => shouldShow(child, ''))
-
-            return searchMatches && hotMatches
-        }
-
         function rowClass(node: ComponentNode) {
             return {
                 selected: props.selected === node.id,
@@ -71,16 +48,9 @@ const TreeNode = defineComponent({
 
         return () => {
             const node = props.node!
-            const search = props.search?.trim() ?? ''
-
-            if (!shouldShow(node, search)) {
-                return null
-            }
-
             const expanded = props.expandedIds?.has(node.id) ?? false
-            const visibleChildren = node.children.filter((child) => shouldShow(child, search))
-            const canExpand = visibleChildren.length > 0
-            const metric = props.mode === 'count' ? `${node.renders}` : `${node.avgMs.toFixed(1)}ms`
+            const canExpand = node.children.length > 0
+            const metric = props.mode === 'count' ? `${node.rerenders + node.mountCount}` : `${node.avgMs.toFixed(1)}ms`
             const metricLabel = props.mode === 'count' ? 'renders' : 'avg'
             const badges = []
             const normalizedElement = node.element?.toLowerCase()
@@ -90,7 +60,11 @@ const TreeNode = defineComponent({
             }
 
             if (node.file !== 'unknown') {
-                const fileBadge = node.file.split('/').pop()?.replace(/\.vue$/i, '') ?? node.file
+                const fileBadge =
+                    node.file
+                        .split('/')
+                        .pop()
+                        ?.replace(/\.vue$/i, '') ?? node.file
 
                 if (fileBadge !== node.label && !badges.includes(fileBadge)) {
                     badges.push(fileBadge)
@@ -109,10 +83,11 @@ const TreeNode = defineComponent({
                         },
                     },
                     [
+                        h('span', { class: 'tree-rail', 'aria-hidden': 'true' }),
                         h(
                             'button',
                             {
-                                class: 'tree-toggle',
+                                class: ['tree-toggle', { empty: !canExpand }],
                                 disabled: !canExpand,
                                 onClick: (event: MouseEvent) => {
                                     event.stopPropagation()
@@ -122,9 +97,8 @@ const TreeNode = defineComponent({
                                     }
                                 },
                             },
-                            canExpand ? (expanded ? '▾' : '▸') : '·'
+                            canExpand ? (expanded ? '⌄' : '›') : ''
                         ),
-                        h('span', { class: 'tree-rail', 'aria-hidden': 'true' }),
                         h('div', { class: 'tree-copy' }, [
                             h('span', { class: 'tree-name mono', title: node.label }, node.label),
                             badges.length
@@ -135,21 +109,38 @@ const TreeNode = defineComponent({
                                   )
                                 : null,
                         ]),
-                        h('div', { class: 'tree-metrics mono' }, h('span', { class: 'tree-metric-pill' }, `${metric} ${metricLabel}`)),
+                        h('div', { class: 'tree-metrics mono' }, [
+                            node.isPersistent
+                                ? h(
+                                      'span',
+                                      { class: 'tree-persistent-pill', title: 'Layout / persistent component — survives navigation' },
+                                      'persistent'
+                                  )
+                                : null,
+                            node.isHydrationMount
+                                ? h(
+                                      'span',
+                                      {
+                                          class: 'tree-hydration-pill',
+                                          title: 'First mount was SSR hydration — not a user-triggered render',
+                                      },
+                                      'hydrated'
+                                  )
+                                : null,
+                            h('span', { class: 'tree-metric-pill' }, `${metric} ${metricLabel}`),
+                        ]),
                     ]
                 ),
-                expanded && visibleChildren.length
+                expanded && canExpand
                     ? h(
                           'div',
                           { class: 'tree-children' },
-                          visibleChildren.map((child) =>
+                          node.children.map((child) =>
                               h(TreeNode, {
                                   node: child,
                                   mode: props.mode,
                                   threshold: props.threshold,
-                                  hotOnly: props.hotOnly,
                                   selected: props.selected,
-                                  search: props.search,
                                   expandedIds: props.expandedIds,
                                   onSelect: (value: ComponentNode) => emit('select', value),
                                   onToggle: (value: string) => emit('toggle', value),
@@ -165,7 +156,19 @@ const TreeNode = defineComponent({
 const { renders, connected } = useObservatoryData()
 
 const activeMode = ref<'count' | 'time'>('count')
-const activeThreshold = ref(5)
+// Separate thresholds per mode so switching modes doesn't produce nonsense results.
+// Count: flag components that rendered 3+ times (1 hydration mount is normal).
+// Time: flag components averaging 16ms+ (one animation frame budget).
+const countThreshold = ref(3)
+const timeThreshold = ref(16)
+// Writable computed so the threshold slider can use v-model directly.
+const activeThreshold = computed({
+    get: () => (activeMode.value === 'count' ? countThreshold.value : timeThreshold.value),
+    set: (val: number) => {
+        if (activeMode.value === 'count') countThreshold.value = val
+        else timeThreshold.value = val
+    },
+})
 const activeHotOnly = ref(false)
 const frozen = ref(false)
 const search = ref('')
@@ -184,7 +187,10 @@ function displayLabel(entry: RenderEntry) {
         return entry.element
     }
 
-    const basename = entry.file.split('/').pop()?.replace(/\.vue$/i, '')
+    const basename = entry.file
+        .split('/')
+        .pop()
+        ?.replace(/\.vue$/i, '')
 
     if (basename && basename !== 'unknown') {
         return basename
@@ -212,11 +218,14 @@ function buildNodes(entries: RenderEntry[]) {
             element: entry.element,
             depth: 0,
             path: [],
-            renders: entry.renders,
+            rerenders: entry.rerenders ?? 0,
+            mountCount: entry.mountCount ?? 1,
             avgMs: entry.avgMs,
             triggers: entry.triggers.map(formatTrigger),
             children: [],
             parentId: entry.parentUid !== undefined ? String(entry.parentUid) : undefined,
+            isPersistent: Boolean(entry.isPersistent),
+            isHydrationMount: Boolean(entry.isHydrationMount),
         })
     }
 
@@ -291,12 +300,38 @@ function pathToNode(node: ComponentNode, targetId: string, trail: string[] = [])
     return null
 }
 
+function findFirstHotNode(node: ComponentNode): ComponentNode | null {
+    if (isHot(node)) {
+        return node
+    }
+
+    for (const child of node.children) {
+        const match = findFirstHotNode(child)
+
+        if (match) {
+            return match
+        }
+    }
+
+    return null
+}
+
 function defaultExpandedIds(root: ComponentNode | null) {
     if (!root) {
         return new Set<string>()
     }
 
-    return new Set([root.id])
+    // Expand all nodes that have children — gives a fully-open tree on first load.
+    // The user can collapse individual branches as needed.
+    const expanded = new Set<string>()
+    function expandAll(node: ComponentNode) {
+        if (node.children.length > 0) {
+            expanded.add(node.id)
+            node.children.forEach(expandAll)
+        }
+    }
+    expandAll(root)
+    return expanded
 }
 
 function searchExpandedIds(root: ComponentNode | null, term: string) {
@@ -323,7 +358,7 @@ function searchExpandedIds(root: ComponentNode | null, term: string) {
 }
 
 function nodeValue(node: ComponentNode) {
-    return activeMode.value === 'count' ? node.renders : node.avgMs
+    return activeMode.value === 'count' ? node.rerenders + node.mountCount : node.avgMs
 }
 
 function isHot(node: ComponentNode) {
@@ -364,6 +399,24 @@ function isVisibleRoot(node: ComponentNode, searchTerm: string): boolean {
     return matchesCurrentSearch && matchesCurrentHeat
 }
 
+function pruneVisibleTree(node: ComponentNode, searchTerm: string): ComponentNode | null {
+    const visibleChildren = node.children
+        .map((child) => pruneVisibleTree(child, searchTerm))
+        .filter((child): child is ComponentNode => child !== null)
+
+    const matchesCurrentSearch = !searchTerm || matchesSearch(node, searchTerm) || visibleChildren.length > 0
+    const matchesCurrentHeat = !activeHotOnly.value || isHot(node) || visibleChildren.length > 0
+
+    if (!matchesCurrentSearch || !matchesCurrentHeat) {
+        return null
+    }
+
+    return {
+        ...node,
+        children: visibleChildren,
+    }
+}
+
 const displayEntries = computed(() => (frozen.value ? frozenSnapshot.value : renders.value))
 const rootNodes = computed(() => buildNodes(displayEntries.value))
 const rootMap = computed(() => new Map(rootNodes.value.map((node) => [node.id, node])))
@@ -383,12 +436,18 @@ const activeRoot = computed(() => {
     return filteredRoots.value[0] ?? rootNodes.value[0] ?? null
 })
 
+const visibleActiveRoot = computed(() => {
+    const term = search.value.trim()
+
+    return activeRoot.value ? pruneVisibleTree(activeRoot.value, term) : null
+})
+
 const visibleTreeRoots = computed(() => {
-    if (!activeRoot.value) {
+    if (!visibleActiveRoot.value) {
         return []
     }
 
-    return [activeRoot.value]
+    return [visibleActiveRoot.value]
 })
 
 const appEntries = computed(() =>
@@ -401,7 +460,7 @@ const appEntries = computed(() =>
 )
 
 const activeSelected = computed(() => allComponents.value.find((node) => node.id === activeSelectedId.value) ?? null)
-const totalRenders = computed(() => allComponents.value.reduce((sum, node) => sum + node.renders, 0))
+const totalRenders = computed(() => allComponents.value.reduce((sum, node) => sum + node.rerenders + node.mountCount, 0))
 const hotCount = computed(() => allComponents.value.filter((node) => isHot(node)).length)
 const avgTime = computed(() => {
     const components = allComponents.value.filter((node) => node.avgMs > 0)
@@ -476,6 +535,34 @@ watch(search, (term) => {
     expandedIds.value = defaultExpandedIds(activeRoot.value)
 })
 
+watch([activeHotOnly, activeThreshold, activeMode, filteredRoots], () => {
+    if (!activeHotOnly.value) {
+        return
+    }
+
+    const topLevelRoot = filteredRoots.value[0] ?? null
+
+    if (!topLevelRoot) {
+        activeSelectedId.value = null
+        return
+    }
+
+    const firstHot = findFirstHotNode(topLevelRoot)
+
+    if (!firstHot) {
+        activeSelectedId.value = null
+        return
+    }
+
+    activeRootId.value = topLevelRoot.id
+
+    if (activeSelectedId.value !== firstHot.id) {
+        activeSelectedId.value = firstHot.id
+    }
+
+    expandedIds.value = new Set(pathToNode(topLevelRoot, firstHot.id) ?? [topLevelRoot.id])
+})
+
 function selectNode(node: ComponentNode) {
     activeSelectedId.value = node.id
 
@@ -522,7 +609,12 @@ function toggleFreeze() {
 }
 
 function basename(file: string) {
-    return file.split('/').pop()?.replace(/\.vue$/i, '') ?? file
+    return (
+        file
+            .split('/')
+            .pop()
+            ?.replace(/\.vue$/i, '') ?? file
+    )
 }
 
 function pathLabel(node: ComponentNode) {
@@ -539,8 +631,15 @@ function pathLabel(node: ComponentNode) {
             </div>
             <div class="threshold-group">
                 <span class="muted text-sm">threshold</span>
-                <input v-model.number="activeThreshold" type="range" min="1" max="30" step="1" style="width: 90px" />
-                <span class="mono text-sm">{{ activeThreshold }}+</span>
+                <input
+                    v-model.number="activeThreshold"
+                    type="range"
+                    :min="activeMode === 'count' ? 2 : 4"
+                    :max="activeMode === 'count' ? 20 : 100"
+                    :step="activeMode === 'count' ? 1 : 4"
+                    style="width: 90px"
+                />
+                <span class="mono text-sm">{{ activeThreshold }}{{ activeMode === 'count' ? '+ renders' : 'ms+' }}</span>
             </div>
             <button :class="{ active: activeHotOnly }" @click="activeHotOnly = !activeHotOnly">hot only</button>
             <button :class="{ active: frozen }" style="margin-left: auto" @click="toggleFreeze">
@@ -599,9 +698,7 @@ function pathLabel(node: ComponentNode) {
                             :node="root"
                             :mode="activeMode"
                             :threshold="activeThreshold"
-                            :hot-only="activeHotOnly"
                             :selected="activeSelected?.id"
-                            :search="search"
                             :expanded-ids="expandedIds"
                             @select="selectNode"
                             @toggle="toggleNode"
@@ -621,9 +718,23 @@ function pathLabel(node: ComponentNode) {
                     </div>
 
                     <div class="detail-pill-row">
-                        <span class="detail-pill mono">{{ activeSelected.renders }} renders</span>
+                        <span class="detail-pill mono">
+                            {{ activeSelected.rerenders + activeSelected.mountCount }} render{{
+                                activeSelected.rerenders + activeSelected.mountCount !== 1 ? 's' : ''
+                            }}
+                        </span>
+                        <span class="detail-pill mono muted">
+                            {{ activeSelected.mountCount }} mount{{ activeSelected.mountCount !== 1 ? 's' : '' }}
+                        </span>
+                        <span v-if="activeSelected.rerenders" class="detail-pill mono">
+                            {{ activeSelected.rerenders }} re-render{{ activeSelected.rerenders !== 1 ? 's' : '' }}
+                        </span>
+                        <span v-if="activeSelected.isPersistent" class="detail-pill mono persistent">persistent</span>
+                        <span v-if="activeSelected.isHydrationMount" class="detail-pill mono hydrated">hydrated</span>
                         <span class="detail-pill mono">{{ activeSelected.avgMs.toFixed(1) }}ms avg</span>
-                        <span class="detail-pill mono" :class="{ hot: isHot(activeSelected) }">{{ isHot(activeSelected) ? 'hot' : 'cool' }}</span>
+                        <span class="detail-pill mono" :class="{ hot: isHot(activeSelected) }">
+                            {{ isHot(activeSelected) ? 'hot' : 'cool' }}
+                        </span>
                     </div>
 
                     <div class="section-label">identity</div>
@@ -644,12 +755,24 @@ function pathLabel(node: ComponentNode) {
 
                     <div class="section-label">rendering</div>
                     <div class="meta-grid">
-                        <span class="muted text-sm">mode value</span>
-                        <span class="mono text-sm">{{ activeMode === 'count' ? activeSelected.renders : `${activeSelected.avgMs.toFixed(1)}ms` }}</span>
+                        <span class="muted text-sm">total renders</span>
+                        <span class="mono text-sm">{{ activeSelected.rerenders + activeSelected.mountCount }}</span>
+                        <span class="muted text-sm">re-renders</span>
+                        <span class="mono text-sm">{{ activeSelected.rerenders }}</span>
+                        <span class="muted text-sm">mounts</span>
+                        <span class="mono text-sm">{{ activeSelected.mountCount }}</span>
+                        <span class="muted text-sm">persistent</span>
+                        <span class="mono text-sm" :style="{ color: activeSelected.isPersistent ? 'var(--amber)' : 'inherit' }">
+                            {{ activeSelected.isPersistent ? 'yes — survives navigation' : 'no' }}
+                        </span>
+                        <span class="muted text-sm">hydration mount</span>
+                        <span class="mono text-sm">{{ activeSelected.isHydrationMount ? 'yes — SSR hydrated' : 'no' }}</span>
+                        <span class="muted text-sm">avg render time</span>
+                        <span class="mono text-sm">{{ activeSelected.avgMs.toFixed(1) }}ms</span>
                         <span class="muted text-sm">threshold</span>
-                        <span class="mono text-sm">{{ activeThreshold }}</span>
-                        <span class="muted text-sm">selected mode</span>
-                        <span class="mono text-sm">{{ activeMode === 'count' ? 'render count' : 'render time' }}</span>
+                        <span class="mono text-sm">{{ activeThreshold }}{{ activeMode === 'count' ? '+ renders' : 'ms+' }}</span>
+                        <span class="muted text-sm">mode</span>
+                        <span class="mono text-sm">{{ activeMode === 'count' ? 're-render count' : 'render time' }}</span>
                     </div>
 
                     <div class="section-label">triggers</div>
@@ -698,6 +821,12 @@ function pathLabel(node: ComponentNode) {
     flex-shrink: 0;
 }
 
+.stat-sub {
+    margin-top: 4px;
+    font-size: 11px;
+    color: var(--text3);
+}
+
 .inspector {
     display: grid;
     grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(260px, 320px);
@@ -811,7 +940,7 @@ function pathLabel(node: ComponentNode) {
 
 :deep(.tree-row) {
     display: grid;
-    grid-template-columns: 18px 8px minmax(0, 1fr) auto;
+    grid-template-columns: 8px 18px minmax(0, 1fr) auto;
     align-items: center;
     gap: 6px;
     min-width: 0;
@@ -844,17 +973,20 @@ function pathLabel(node: ComponentNode) {
     background: transparent;
     color: var(--text3);
     padding: 0;
-    font-size: 11px;
+    font-size: 14px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }
 
 :deep(.tree-toggle:disabled) {
-    opacity: 0.4;
     cursor: default;
 }
 
+:deep(.tree-toggle.empty) {
+    opacity: 0;
+}
+
 :deep(.tree-rail) {
     display: block;
     width: 2px;
@@ -904,6 +1036,7 @@ function pathLabel(node: ComponentNode) {
     min-width: 92px;
     justify-content: flex-end;
     flex-shrink: 0;
+    gap: 6px;
 }
 
 :deep(.tree-metric-pill) {
@@ -919,6 +1052,28 @@ function pathLabel(node: ComponentNode) {
     color: var(--text3);
 }
 
+:deep(.tree-persistent-pill) {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--border));
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--amber) 10%, var(--bg2));
+    font-size: 10px;
+    color: color-mix(in srgb, var(--amber) 80%, var(--text));
+}
+
+:deep(.tree-hydration-pill) {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border: 1px solid color-mix(in srgb, var(--teal) 55%, var(--border));
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--teal) 10%, var(--bg2));
+    font-size: 10px;
+    color: color-mix(in srgb, var(--teal) 80%, var(--text));
+}
+
 :deep(.tree-children) {
     margin-left: 7px;
     padding-left: 11px;
@@ -965,6 +1120,21 @@ function pathLabel(node: ComponentNode) {
     color: var(--red);
 }
 
+.detail-pill.persistent {
+    border-color: color-mix(in srgb, var(--amber) 55%, var(--border));
+    color: color-mix(in srgb, var(--amber) 80%, var(--text));
+}
+
+.detail-pill.hydrated {
+    border-color: color-mix(in srgb, var(--teal) 55%, var(--border));
+    color: color-mix(in srgb, var(--teal) 80%, var(--text));
+}
+
+.detail-pill.muted {
+    color: var(--text3);
+    border-color: var(--border);
+}
+
 .section-label {
     font-size: 10px;
     font-weight: 500;

package/client/src/views/TransitionTimeline.vue

@@ -56,8 +56,8 @@ const timelineGeometry = computed(() => {
         return []
     }
 
-    const minT = Math.min(...all.map((e) => e.startTime))
-    const maxT = Math.max(...all.map((e) => e.endTime ?? e.startTime + 400))
+    const minT = all.reduce((min, e) => Math.min(min, e.startTime), all[0].startTime)
+    const maxT = all.reduce((max, e) => Math.max(max, e.endTime ?? e.startTime + 400), 0)
     const span = Math.max(maxT - minT, 1)
 
     return all.map((e) => ({

package/dist/module.json

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

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

@@ -1,3 +1,8 @@
+export interface RefChangeEvent {
+    t: number;
+    key: string;
+    value: unknown;
+}
 export interface ComposableEntry {
     id: string;
     name: string;
@@ -10,6 +15,13 @@ export interface ComposableEntry {
         type: 'ref' | 'computed' | 'reactive';
         value: unknown;
     }>;
+    /** Capped at MAX_HISTORY_PER_ENTRY events, newest last */
+    history: RefChangeEvent[];
+    /**
+     * Keys whose underlying ref/reactive object is shared across multiple
+     * instances of this composable — indicates module-level (global) state.
+     */
+    sharedKeys: string[];
     watcherCount: number;
     intervalCount: number;
     lifecycle: {
@@ -20,6 +32,8 @@ export interface ComposableEntry {
     };
     file: string;
     line: number;
+    /** Route path the composable was registered on, e.g. "/products". */
+    route: string;
 }
 /**
  * Registers a new composable entry, updates an existing one, or retrieves all entries.
@@ -31,6 +45,12 @@ export interface ComposableEntry {
  */
 export declare function setupComposableRegistry(): {
     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[];
 };