nuxt-devtools-observatory 0.1.11 → 0.1.13

package/client/src/views/RenderHeatmap.vue

@@ -9,13 +9,15 @@ interface ComponentNode {
     element?: string
     depth: number
     path: string[]
-    renders: number
-    navigationRenders: number
+    rerenders: number
+    mountCount: number
     avgMs: number
     triggers: string[]
     children: ComponentNode[]
     parentId?: string
     parentLabel?: string
+    isPersistent: boolean
+    isHydrationMount: boolean
 }
 
 const TreeNode = defineComponent({
@@ -30,7 +32,7 @@ const TreeNode = defineComponent({
     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) {
@@ -48,7 +50,7 @@ const TreeNode = defineComponent({
             const node = props.node!
             const expanded = props.expandedIds?.has(node.id) ?? false
             const canExpand = node.children.length > 0
-            const metric = props.mode === 'count' ? `${node.renders}` : `${node.avgMs.toFixed(1)}ms`
+            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()
@@ -58,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)
@@ -104,7 +110,23 @@ const TreeNode = defineComponent({
                                 : null,
                         ]),
                         h('div', { class: 'tree-metrics mono' }, [
-                            node.navigationRenders ? h('span', { class: 'tree-nav-pill' }, `${node.navigationRenders} nav`) : null,
+                            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}`),
                         ]),
                     ]
@@ -134,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('')
@@ -153,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
@@ -181,12 +218,14 @@ function buildNodes(entries: RenderEntry[]) {
             element: entry.element,
             depth: 0,
             path: [],
-            renders: entry.renders,
-            navigationRenders: Number.isFinite(entry.navigationRenders) ? entry.navigationRenders : 0,
+            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),
         })
     }
 
@@ -282,7 +321,17 @@ function defaultExpandedIds(root: ComponentNode | null) {
         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) {
@@ -309,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) {
@@ -411,8 +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 totalNavigationRenders = computed(() => allComponents.value.reduce((sum, node) => sum + (Number.isFinite(node.navigationRenders) ? node.navigationRenders : 0), 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)
@@ -561,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) {
@@ -578,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">
@@ -595,7 +655,6 @@ function pathLabel(node: ComponentNode) {
             <div class="stat-card">
                 <div class="stat-label">total renders</div>
                 <div class="stat-val">{{ totalRenders }}</div>
-                <div class="stat-sub mono">{{ totalNavigationRenders }} nav</div>
             </div>
             <div class="stat-card">
                 <div class="stat-label">hot</div>
@@ -659,10 +718,23 @@ function pathLabel(node: ComponentNode) {
                     </div>
 
                     <div class="detail-pill-row">
-                        <span class="detail-pill mono">{{ activeSelected.renders }} renders</span>
-                        <span v-if="activeSelected.navigationRenders" class="detail-pill mono nav">{{ activeSelected.navigationRenders }} nav</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>
@@ -683,14 +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">navigation renders</span>
-                        <span class="mono text-sm">{{ activeSelected.navigationRenders }}</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>
@@ -970,17 +1052,26 @@ function pathLabel(node: ComponentNode) {
     color: var(--text3);
 }
 
-:deep(.tree-nav-pill) {
+:deep(.tree-persistent-pill) {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    min-width: 54px;
     padding: 2px 8px;
-    border: 1px solid color-mix(in srgb, var(--purple) 55%, var(--border));
+    border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--border));
     border-radius: 999px;
-    background: color-mix(in srgb, var(--purple) 10%, var(--bg2));
+    background: color-mix(in srgb, var(--amber) 10%, var(--bg2));
     font-size: 10px;
-    color: color-mix(in srgb, var(--purple) 70%, white);
+    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) {
@@ -1029,9 +1120,19 @@ function pathLabel(node: ComponentNode) {
     color: var(--red);
 }
 
-.detail-pill.nav {
-    border-color: color-mix(in srgb, var(--purple) 55%, var(--border));
-    color: color-mix(in srgb, var(--purple) 70%, white);
+.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 {

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/client/src/views/ValueInspector.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+    value: unknown
+    compact?: boolean
+}>()
+
+const open = ref(false)
+
+function truncate(s: string, max: number) {
+    return s.length > max ? s.slice(0, max) + '…' : s
+}
+</script>
+
+<template>
+    <span class="vi">
+        <!-- null / undefined -->
+        <span v-if="value === null || value === undefined" class="vi-null">{{ String(value) }}</span>
+
+        <!-- boolean -->
+        <span v-else-if="typeof value === 'boolean'" class="vi-bool">{{ value }}</span>
+
+        <!-- number -->
+        <span v-else-if="typeof value === 'number'" class="vi-num">{{ value }}</span>
+
+        <!-- string -->
+        <span v-else-if="typeof value === 'string'" class="vi-str">"{{ compact ? truncate(value, 40) : value }}"</span>
+
+        <!-- array -->
+        <span v-else-if="Array.isArray(value)">
+            <span v-if="compact || !open">
+                <span class="vi-punc">[</span>
+                <span class="vi-dim">{{ value.length }} item{{ value.length !== 1 ? 's' : '' }}</span>
+                <span class="vi-punc">]</span>
+                <button v-if="!compact" class="vi-toggle" @click.stop="open = true">▸</button>
+            </span>
+            <span v-else class="vi-block">
+                <button class="vi-toggle" @click.stop="open = false">▾</button>
+                <span class="vi-punc">[</span>
+                <span v-for="(item, i) in value" :key="i" class="vi-indent">
+                    <ValueInspector :value="item" />
+                    <span v-if="i < value.length - 1" class="vi-punc">,</span>
+                </span>
+                <span class="vi-punc">]</span>
+            </span>
+        </span>
+
+        <!-- object -->
+        <span v-else-if="typeof value === 'object'">
+            <span v-if="compact || !open">
+                <span class="vi-punc">{</span>
+                <span class="vi-dim">
+                    {{
+                        Object.keys(value as object)
+                            .slice(0, 3)
+                            .join(', ')
+                    }}{{ Object.keys(value as object).length > 3 ? '…' : '' }}
+                </span>
+                <span class="vi-punc">}</span>
+                <button v-if="!compact" class="vi-toggle" @click.stop="open = true">▸</button>
+            </span>
+            <span v-else class="vi-block">
+                <button class="vi-toggle" @click.stop="open = false">▾</button>
+                <span class="vi-punc">{</span>
+                <span v-for="(v, k, i) in value as Record<string, unknown>" :key="k" class="vi-indent">
+                    <span class="vi-key">{{ k }}</span>
+                    <span class="vi-punc">:</span>
+                    <ValueInspector :value="v" />
+                    <span v-if="i < Object.keys(value as object).length - 1" class="vi-punc">,</span>
+                </span>
+                <span class="vi-punc">}</span>
+            </span>
+        </span>
+
+        <!-- fallback -->
+        <span v-else class="vi-dim">{{ String(value) }}</span>
+    </span>
+</template>
+
+<style scoped>
+.vi {
+    font-family: var(--font-mono);
+    font-size: 12px;
+}
+.vi-null {
+    color: #888;
+}
+.vi-bool {
+    color: #534ab7;
+}
+.vi-num {
+    color: #ba7517;
+}
+.vi-str {
+    color: #0f6e56;
+}
+.vi-key {
+    color: #185195;
+}
+.vi-punc {
+    color: #888;
+}
+.vi-dim {
+    color: #888;
+    font-style: italic;
+}
+.vi-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 10px;
+    color: #888;
+    padding: 0 2px;
+}
+.vi-block {
+    display: inline-flex;
+    flex-direction: column;
+}
+.vi-indent {
+    padding-left: 12px;
+    display: block;
+}
+</style>

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "0.1.11",
+  "version": "0.1.13",
   "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,8 +45,15 @@ 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[];
+    editValue: (id: string, key: string, value: unknown) => void;
 };
 export declare function __trackComposable<T>(name: string, callFn: () => T, meta: {
     file: string;