nuxt-devtools-observatory 0.1.6 → 0.1.7

package/client/src/stores/observatory.ts

@@ -1,32 +1,6 @@
-/**
- * useObservatoryData — live bridge between the Nuxt app and the client SPA.
- *
- * The client SPA runs at localhost:4949 (cross-origin from the Nuxt app at
- * localhost:3000). Direct window.top property access is blocked by the browser.
- * However postMessage IS allowed cross-origin:
- *
- *   iframe (4949)  →  window.top.postMessage({ type: 'observatory:request' })  →  Nuxt page (3000)
- *   Nuxt plugin.ts →  event.source.postMessage({ type: 'observatory:snapshot', data })  →  iframe
- *
- * The plugin.ts listener is registered immediately on plugin init (not deferred
- * to app:mounted) so requests sent before full hydration are answered correctly.
- */
-
-import { ref, onUnmounted } from 'vue'
+import { ref } from 'vue'
 
-export interface TransitionEntry {
-    id: string
-    transitionName: string
-    parentComponent: string
-    direction: 'enter' | 'leave'
-    phase: 'entering' | 'entered' | 'leaving' | 'left' | 'enter-cancelled' | 'leave-cancelled' | 'interrupted'
-    startTime: number
-    endTime?: number
-    durationMs?: number
-    cancelled: boolean
-    appear: boolean
-    mode?: string
-}
+const POLL_MS = 500
 
 export interface FetchEntry {
     id: string
@@ -34,130 +8,178 @@ export interface FetchEntry {
     url: string
     status: 'pending' | 'ok' | 'error' | 'cached'
     origin: 'ssr' | 'csr'
+    startTime: number
+    endTime?: number
     ms?: number
     size?: number
     cached: boolean
     payload?: unknown
+    error?: unknown
     file?: string
     line?: number
-    startOffset?: number
 }
 
-interface ComposableEntry {
+export interface ProvideEntry {
+    key: string
+    componentName: string
+    componentFile: string
+    componentUid: number
+    parentUid?: number
+    parentFile?: string
+    isReactive: boolean
+    valueSnapshot: unknown
+    line: number
+}
+
+export interface InjectEntry {
+    key: string
+    componentName: string
+    componentFile: string
+    componentUid: number
+    parentUid?: number
+    parentFile?: string
+    resolved: boolean
+    resolvedFromFile?: string
+    resolvedFromUid?: number
+    line: number
+}
+
+export interface ProvideInjectSnapshot {
+    provides: ProvideEntry[]
+    injects: InjectEntry[]
+}
+
+export interface ComposableEntry {
     id: string
     name: string
-    component: string
-    instances: number
+    componentFile: string
+    componentUid: number
     status: 'mounted' | 'unmounted'
     leak: boolean
     leakReason?: string
-    refs: Array<{ key: string; type: string; val: string }>
-    watchers: number
-    intervals: number
-    lifecycle: { onMounted: boolean; onUnmounted: boolean; watchersCleaned: boolean; intervalsCleaned: boolean }
-}
-
-interface ProvideInjectNode {
-    id: string
-    label: string
-    type: 'provider' | 'consumer' | 'both' | 'error'
-    provides: Array<{ key: string; val: string; reactive: boolean }>
-    injects: Array<{ key: string; from: string | null; ok: boolean }>
-    children: ProvideInjectNode[]
+    refs: Record<string, { type: 'ref' | 'computed' | 'reactive'; value: unknown }>
+    watcherCount: number
+    intervalCount: number
+    lifecycle: {
+        hasOnMounted: boolean
+        hasOnUnmounted: boolean
+        watchersCleaned: boolean
+        intervalsCleaned: boolean
+    }
+    file: string
+    line: number
 }
 
-interface RenderNode {
-    id: string
-    label: string
+export interface RenderEntry {
+    uid: number
+    name: string
     file: string
     renders: number
+    totalMs: number
     avgMs: number
-    triggers: string[]
-    children: RenderNode[]
+    triggers: Array<{ key: string; type: string; timestamp: number }>
+    rect?: { x: number; y: number; width: number; height: number; top: number; left: number }
+    children: number[]
+    parentUid?: number
+}
+
+export interface TransitionEntry {
+    id: string
+    transitionName: string
+    parentComponent: string
+    direction: 'enter' | 'leave'
+    phase: 'entering' | 'entered' | 'leaving' | 'left' | 'enter-cancelled' | 'leave-cancelled' | 'interrupted'
+    startTime: number
+    endTime?: number
+    durationMs?: number
+    cancelled: boolean
+    appear: boolean
+    mode?: string
 }
 
 interface ObservatorySnapshot {
-    transitions?: TransitionEntry[]
     fetch?: FetchEntry[]
+    provideInject?: ProvideInjectSnapshot
     composables?: ComposableEntry[]
-    provideInject?: ProvideInjectNode[]
-    renders?: RenderNode[]
+    renders?: RenderEntry[]
+    transitions?: TransitionEntry[]
 }
 
-const POLL_MS = 500
+const fetchEntries = ref<FetchEntry[]>([])
+const provideInject = ref<ProvideInjectSnapshot>({ provides: [], injects: [] })
+const composables = ref<ComposableEntry[]>([])
+const renders = ref<RenderEntry[]>([])
+const transitions = ref<TransitionEntry[]>([])
+const connected = ref(false)
 
-export function useObservatoryData() {
-    const transitions = ref<TransitionEntry[]>([])
-    const fetches = ref<FetchEntry[]>([])
-    const composables = ref<ComposableEntry[]>([])
-    const provideInject = ref<ProvideInjectNode[]>([])
-    const renders = ref<RenderNode[]>([])
-    const connected = ref(false)
-
-    function request() {
-        window.top?.postMessage({ type: 'observatory:request' }, '*')
+let started = false
+let parentOrigin = '*'
+
+function cloneArray<T>(value: T[] | undefined): T[] {
+    return value ? value.map((item) => ({ ...item })) : []
+}
+
+function getParentOrigin() {
+    if (typeof document === 'undefined' || !document.referrer) {
+        return '*'
     }
 
-    function onMessage(event: MessageEvent) {
-        if (event.data?.type !== 'observatory:snapshot') {
-            return
-        }
-
-        let data: ObservatorySnapshot | null = null
-
-        if (typeof event.data.data === 'string') {
-            try {
-                data = JSON.parse(event.data.data)
-            } catch (err) {
-                console.warn('Failed to parse observatory snapshot:', err)
-
-                data = null
-            }
-        } else {
-            data = event.data.data as ObservatorySnapshot
-        }
-
-        transitions.value = data?.transitions ?? []
-        fetches.value = data?.fetch ?? []
-        composables.value = data?.composables ?? []
-
-        // Always guarantee provideInject.value is an array
-        const pi = data?.provideInject
-
-        if (Array.isArray(pi)) {
-            provideInject.value = pi
-        } else if (pi && typeof pi === 'object') {
-            // If registry returns { provides, injects }, build a single node
-            provideInject.value = [
-                {
-                    provides: Array.isArray(pi.provides) ? pi.provides : [],
-                    injects: Array.isArray(pi.injects) ? pi.injects : [],
-                    id: 'root',
-                    label: 'Provide/Inject Root',
-                    type: 'both',
-                    children: [],
-                },
-            ]
-        } else {
-            provideInject.value = []
-        }
-
-        if (!Array.isArray(provideInject.value)) {
-            provideInject.value = []
-        }
-
-        renders.value = data?.renders ?? []
-        connected.value = true
+    try {
+        return new URL(document.referrer).origin
+    } catch {
+        return '*'
     }
+}
 
-    window.addEventListener('message', onMessage)
-    const timer = setInterval(request, POLL_MS)
-    request() // immediate first request
+function requestSnapshot() {
+    window.top?.postMessage({ type: 'observatory:request' }, parentOrigin)
+}
+
+function onMessage(event: MessageEvent) {
+    if (event.data?.type !== 'observatory:snapshot') {
+        return
+    }
+
+    if (parentOrigin !== '*' && event.origin !== parentOrigin) {
+        return
+    }
 
-    onUnmounted(() => {
-        window.removeEventListener('message', onMessage)
-        clearInterval(timer)
-    })
+    const data = event.data.data as ObservatorySnapshot
+    fetchEntries.value = cloneArray(data.fetch)
+    provideInject.value = data.provideInject
+        ? {
+              provides: cloneArray(data.provideInject.provides),
+              injects: cloneArray(data.provideInject.injects),
+          }
+        : { provides: [], injects: [] }
+    composables.value = cloneArray(data.composables)
+    renders.value = cloneArray(data.renders)
+    transitions.value = cloneArray(data.transitions)
+    connected.value = true
+}
+
+function ensureStarted() {
+    if (started || typeof window === 'undefined') {
+        return
+    }
+
+    started = true
+    parentOrigin = getParentOrigin()
+    window.addEventListener('message', onMessage)
+    window.setInterval(requestSnapshot, POLL_MS)
+    requestSnapshot()
+}
 
-    return { transitions, fetches, composables, provideInject, renders, connected }
+export function useObservatoryData() {
+    ensureStarted()
+
+    return {
+        fetch: fetchEntries,
+        provideInject,
+        composables,
+        renders,
+        transitions,
+        connected,
+        refresh: requestSnapshot,
+    }
 }

package/client/src/views/ComposableTracker.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, computed, type Ref } from 'vue'
-import { useObservatoryData } from '../stores/observatory'
+import { ref, computed } from 'vue'
+import { useObservatoryData, type ComposableEntry as RuntimeComposableEntry } from '../stores/observatory'
 
-interface ComposableEntry {
+interface ComposableViewEntry {
     id: string
     name: string
     component: string
@@ -21,49 +21,89 @@ interface ComposableEntry {
     }
 }
 
-const { composables } = useObservatoryData()
-const entries = composables as Ref<ComposableEntry[]>
+const { composables: rawEntries, connected } = useObservatoryData()
+
+const entries = computed<ComposableViewEntry[]>(() => {
+    const groups = new Map<string, RuntimeComposableEntry[]>()
+
+    for (const entry of rawEntries.value) {
+        const key = `${entry.name}::${entry.componentFile}`
+        const list = groups.get(key) ?? []
+        list.push(entry)
+        groups.set(key, list)
+    }
+
+    return [...groups.entries()].map(([key, group]) => {
+        const latest = [...group].sort((a, b) => b.line - a.line)[0]
+        const leakReasons = [...new Set(group.map((entry) => entry.leakReason).filter(Boolean))]
+
+        return {
+            id: key,
+            name: latest.name,
+            component: latest.componentFile,
+            instances: group.length,
+            status: group.some((entry) => entry.status === 'mounted') ? 'mounted' : 'unmounted',
+            leak: group.some((entry) => entry.leak),
+            leakReason: leakReasons.join(' · ') || undefined,
+            refs: Object.entries(latest.refs).map(([refKey, refValue]) => ({
+                key: refKey,
+                type: refValue.type,
+                val: typeof refValue.value === 'string' ? refValue.value : JSON.stringify(refValue.value),
+            })),
+            watchers: group.reduce((sum, entry) => sum + entry.watcherCount, 0),
+            intervals: group.reduce((sum, entry) => sum + entry.intervalCount, 0),
+            lifecycle: {
+                onMounted: group.some((entry) => entry.lifecycle.hasOnMounted),
+                onUnmounted: group.some((entry) => entry.lifecycle.hasOnUnmounted),
+                watchersCleaned: group.every((entry) => entry.lifecycle.watchersCleaned),
+                intervalsCleaned: group.every((entry) => entry.lifecycle.intervalsCleaned),
+            },
+        }
+    })
+})
 
 const filter = ref('all')
 const search = ref('')
 const expanded = ref<string | null>(null)
 
-const counts = computed<{ mounted: number; leaks: number }>(() => {
-    return {
-        mounted: entries.value.filter((e) => e.status === 'mounted').length,
-        leaks: entries.value.filter((e) => e.leak).length,
-    }
-})
+const counts = computed(() => ({
+    mounted: entries.value.filter((entry) => entry.status === 'mounted').length,
+    leaks: entries.value.filter((entry) => entry.leak).length,
+}))
 
-const filtered = computed<ComposableEntry[]>(() => {
-    return entries.value.filter((e) => {
-        if (filter.value === 'leak' && !e.leak) {
+const filtered = computed(() => {
+    return entries.value.filter((entry) => {
+        if (filter.value === 'leak' && !entry.leak) {
             return false
-        } else {
-            if (filter.value === 'unmounted' && e.status !== 'unmounted') {
-                return false
-            } else {
-                const q = search.value.toLowerCase()
-
-                if (q && !e.name.toLowerCase().includes(q) && !e.component.toLowerCase().includes(q)) {
-                    return false
-                } else {
-                    return true
-                }
-            }
         }
+
+        if (filter.value === 'unmounted' && entry.status !== 'unmounted') {
+            return false
+        }
+
+        const q = search.value.toLowerCase()
+
+        if (q && !entry.name.toLowerCase().includes(q) && !entry.component.toLowerCase().includes(q)) {
+            return false
+        }
+
+        return true
     })
 })
 
-function lifecycleRows(e: ComposableEntry) {
+function lifecycleRows(entry: ComposableViewEntry) {
     return [
-        { label: 'onMounted', ok: e.lifecycle.onMounted, status: e.lifecycle.onMounted ? 'registered' : 'not used' },
-        { label: 'onUnmounted', ok: e.lifecycle.onUnmounted, status: e.lifecycle.onUnmounted ? 'registered' : 'missing' },
-        { label: 'watchers cleaned', ok: e.lifecycle.watchersCleaned, status: e.lifecycle.watchersCleaned ? 'all stopped' : 'NOT stopped' },
+        { label: 'onMounted', ok: entry.lifecycle.onMounted, status: entry.lifecycle.onMounted ? 'registered' : 'not used' },
+        { label: 'onUnmounted', ok: entry.lifecycle.onUnmounted, status: entry.lifecycle.onUnmounted ? 'registered' : 'missing' },
+        {
+            label: 'watchers cleaned',
+            ok: entry.lifecycle.watchersCleaned,
+            status: entry.lifecycle.watchersCleaned ? 'all stopped' : 'NOT stopped',
+        },
         {
             label: 'intervals cleared',
-            ok: e.lifecycle.intervalsCleaned,
-            status: e.lifecycle.intervalsCleaned ? 'all cleared' : 'NOT cleared',
+            ok: entry.lifecycle.intervalsCleaned,
+            status: entry.lifecycle.intervalsCleaned ? 'all cleared' : 'NOT cleared',
         },
     ]
 }
@@ -86,7 +126,7 @@ function lifecycleRows(e: ComposableEntry) {
             </div>
             <div class="stat-card">
                 <div class="stat-label">instances</div>
-                <div class="stat-val">{{ entries.reduce((a, e) => a + e.instances, 0) }}</div>
+                <div class="stat-val">{{ entries.reduce((sum, entry) => sum + entry.instances, 0) }}</div>
             </div>
         </div>
 
@@ -104,52 +144,53 @@ function lifecycleRows(e: ComposableEntry) {
 
         <div class="list">
             <div
-                v-for="e in filtered"
-                :key="e.id"
+                v-for="entry in filtered"
+                :key="entry.id"
                 class="comp-card"
-                :class="{ leak: e.leak, expanded: expanded === e.id }"
-                @click="expanded = expanded === e.id ? null : e.id"
+                :class="{ leak: entry.leak, expanded: expanded === entry.id }"
+                @click="expanded = expanded === entry.id ? null : entry.id"
             >
                 <div class="comp-header">
-                    <span class="mono bold" style="font-size: 12px">{{ e.name }}</span>
-                    <span class="muted text-sm" style="margin-left: 4px">{{ e.component }}</span>
+                    <span class="mono bold" style="font-size: 12px">{{ entry.name }}</span>
+                    <span class="muted text-sm" style="margin-left: 4px">{{ entry.component }}</span>
                     <div class="comp-meta">
-                        <span v-if="e.instances > 1" class="muted text-sm">{{ e.instances }}×</span>
-                        <span v-if="e.watchers > 0 && !e.leak" class="badge badge-warn">
-                            {{ e.watchers }} watcher{{ e.watchers > 1 ? 's' : '' }}
+                        <span v-if="entry.instances > 1" class="muted text-sm">{{ entry.instances }}×</span>
+                        <span v-if="entry.watchers > 0 && !entry.leak" class="badge badge-warn">
+                            {{ entry.watchers }} watcher{{ entry.watchers > 1 ? 's' : '' }}
                         </span>
-                        <span v-if="e.intervals > 0 && !e.leak" class="badge badge-warn">
-                            {{ e.intervals }} interval{{ e.intervals > 1 ? 's' : '' }}
+                        <span v-if="entry.intervals > 0 && !entry.leak" class="badge badge-warn">
+                            {{ entry.intervals }} interval{{ entry.intervals > 1 ? 's' : '' }}
                         </span>
-                        <span v-if="e.leak" class="badge badge-err">leak detected</span>
-                        <span v-else-if="e.status === 'mounted'" class="badge badge-ok">mounted</span>
+                        <span v-if="entry.leak" class="badge badge-err">leak detected</span>
+                        <span v-else-if="entry.status === 'mounted'" class="badge badge-ok">mounted</span>
                         <span v-else class="badge badge-gray">unmounted</span>
                     </div>
                 </div>
 
-                <!-- Expanded detail -->
-                <div v-if="expanded === e.id" class="comp-detail" @click.stop>
-                    <div v-if="e.leak" class="leak-banner">{{ e.leakReason }}</div>
+                <div v-if="expanded === entry.id" class="comp-detail" @click.stop>
+                    <div v-if="entry.leak" class="leak-banner">{{ entry.leakReason }}</div>
 
                     <div class="section-label">reactive state</div>
-                    <div v-for="r in e.refs" :key="r.key" class="ref-row">
-                        <span class="mono text-sm" style="min-width: 90px; color: var(--text2)">{{ r.key }}</span>
+                    <div v-for="refEntry in entry.refs" :key="refEntry.key" class="ref-row">
+                        <span class="mono text-sm" style="min-width: 90px; color: var(--text2)">{{ refEntry.key }}</span>
                         <span class="mono text-sm muted" style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
-                            {{ r.val }}
+                            {{ refEntry.val }}
                         </span>
-                        <span class="badge badge-info text-xs">{{ r.type }}</span>
+                        <span class="badge badge-info text-xs">{{ refEntry.type }}</span>
                     </div>
 
                     <div class="section-label" style="margin-top: 8px">lifecycle</div>
-                    <div v-for="lc in lifecycleRows(e)" :key="lc.label" class="lc-row">
-                        <span class="lc-dot" :style="{ background: lc.ok ? 'var(--teal)' : 'var(--red)' }"></span>
-                        <span class="muted text-sm" style="min-width: 110px">{{ lc.label }}</span>
-                        <span class="text-sm" :style="{ color: lc.ok ? 'var(--teal)' : 'var(--red)' }">{{ lc.status }}</span>
+                    <div v-for="row in lifecycleRows(entry)" :key="row.label" class="lc-row">
+                        <span class="lc-dot" :style="{ background: row.ok ? 'var(--teal)' : 'var(--red)' }"></span>
+                        <span class="muted text-sm" style="min-width: 110px">{{ row.label }}</span>
+                        <span class="text-sm" :style="{ color: row.ok ? 'var(--teal)' : 'var(--red)' }">{{ row.status }}</span>
                     </div>
                 </div>
             </div>
 
-            <div v-if="!filtered.length" class="muted text-sm" style="padding: 16px 0">no composables match</div>
+            <div v-if="!filtered.length" class="muted text-sm" style="padding: 16px 0">
+                {{ connected ? 'No composables recorded yet.' : 'Waiting for connection to the Nuxt app…' }}
+            </div>
         </div>
     </div>
 </template>