nuxt-devtools-observatory 0.1.12 → 0.1.14

package/client/src/views/RenderHeatmap.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, defineComponent, h, ref, watch, type VNode } from 'vue'
-import { useObservatoryData, type RenderEntry } from '../stores/observatory'
+import { useObservatoryData, getObservatoryOrigin, type RenderEntry, type RenderEvent } from '../stores/observatory'
 
 interface ComponentNode {
     id: string
@@ -13,11 +13,13 @@ interface ComponentNode {
     mountCount: number
     avgMs: number
     triggers: string[]
+    timeline: RenderEvent[]
     children: ComponentNode[]
     parentId?: string
     parentLabel?: string
     isPersistent: boolean
     isHydrationMount: boolean
+    route: string
 }
 
 const TreeNode = defineComponent({
@@ -128,6 +130,20 @@ const TreeNode = defineComponent({
                                   )
                                 : null,
                             h('span', { class: 'tree-metric-pill' }, `${metric} ${metricLabel}`),
+                            node.file && node.file !== 'unknown'
+                                ? h(
+                                      'button',
+                                      {
+                                          class: 'tree-jump-btn',
+                                          title: `Open ${node.file} in editor`,
+                                          onClick: (e: MouseEvent) => {
+                                              e.stopPropagation()
+                                              openInEditor(node.file)
+                                          },
+                                      },
+                                      '↗'
+                                  )
+                                : null,
                         ]),
                     ]
                 ),
@@ -156,6 +172,8 @@ const TreeNode = defineComponent({
 const { renders, connected } = useObservatoryData()
 
 const activeMode = ref<'count' | 'time'>('count')
+// Route filter — '' means show all routes
+const activeRoute = ref('')
 // 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).
@@ -222,10 +240,12 @@ function buildNodes(entries: RenderEntry[]) {
             mountCount: entry.mountCount ?? 1,
             avgMs: entry.avgMs,
             triggers: entry.triggers.map(formatTrigger),
+            timeline: entry.timeline ?? [],
             children: [],
             parentId: entry.parentUid !== undefined ? String(entry.parentUid) : undefined,
             isPersistent: Boolean(entry.isPersistent),
             isHydrationMount: Boolean(entry.isHydrationMount),
+            route: entry.route ?? '/',
         })
     }
 
@@ -392,11 +412,24 @@ function subtreeHasHotNode(node: ComponentNode): boolean {
     return isHot(node) || node.children.some((child) => subtreeHasHotNode(child))
 }
 
+function nodeMatchesRoute(node: ComponentNode): boolean {
+    if (!activeRoute.value) return true
+    // A component is visible for a route if it was first seen on that route
+    // OR if any of its timeline events happened on that route.
+    if (node.route === activeRoute.value) return true
+    return node.timeline.some((e) => e.route === activeRoute.value)
+}
+
+function subtreeMatchesRoute(node: ComponentNode): boolean {
+    return nodeMatchesRoute(node) || node.children.some((child) => subtreeMatchesRoute(child))
+}
+
 function isVisibleRoot(node: ComponentNode, searchTerm: string): boolean {
     const matchesCurrentSearch = treeMatches(node, searchTerm)
     const matchesCurrentHeat = !activeHotOnly.value || subtreeHasHotNode(node)
+    const matchesCurrentRoute = !activeRoute.value || subtreeMatchesRoute(node)
 
-    return matchesCurrentSearch && matchesCurrentHeat
+    return matchesCurrentSearch && matchesCurrentHeat && matchesCurrentRoute
 }
 
 function pruneVisibleTree(node: ComponentNode, searchTerm: string): ComponentNode | null {
@@ -406,8 +439,9 @@ function pruneVisibleTree(node: ComponentNode, searchTerm: string): ComponentNod
 
     const matchesCurrentSearch = !searchTerm || matchesSearch(node, searchTerm) || visibleChildren.length > 0
     const matchesCurrentHeat = !activeHotOnly.value || isHot(node) || visibleChildren.length > 0
+    const matchesCurrentRoute = !activeRoute.value || nodeMatchesRoute(node) || visibleChildren.length > 0
 
-    if (!matchesCurrentSearch || !matchesCurrentHeat) {
+    if (!matchesCurrentSearch || !matchesCurrentHeat || !matchesCurrentRoute) {
         return null
     }
 
@@ -459,6 +493,17 @@ const appEntries = computed(() =>
     }))
 )
 
+const knownRoutes = computed(() => {
+    const routes = new Set<string>()
+    for (const node of allComponents.value) {
+        if (node.route) routes.add(node.route)
+        for (const event of node.timeline) {
+            if (event.route) routes.add(event.route)
+        }
+    }
+    return [...routes].sort()
+})
+
 const activeSelected = computed(() => allComponents.value.find((node) => node.id === activeSelectedId.value) ?? null)
 const totalRenders = computed(() => allComponents.value.reduce((sum, node) => sum + node.rerenders + node.mountCount, 0))
 const hotCount = computed(() => allComponents.value.filter((node) => isHot(node)).length)
@@ -617,9 +662,25 @@ function basename(file: string) {
     )
 }
 
+function openInEditor(file: string) {
+    if (!file || file === 'unknown') return
+    const origin = getObservatoryOrigin()
+    if (!origin) return
+    window.top?.postMessage({ type: 'observatory:open-in-editor', file }, origin)
+}
+
 function pathLabel(node: ComponentNode) {
     return node.path.join(' / ')
 }
+
+function formatMs(ms: number): string {
+    return ms < 1 ? '<1ms' : `${ms.toFixed(1)}ms`
+}
+
+function formatTimestamp(t: number): string {
+    // t is performance.now() — show as relative seconds from page load
+    return `+${(t / 1000).toFixed(2)}s`
+}
 </script>
 
 <template>
@@ -642,6 +703,10 @@ function pathLabel(node: ComponentNode) {
                 <span class="mono text-sm">{{ activeThreshold }}{{ activeMode === 'count' ? '+ renders' : 'ms+' }}</span>
             </div>
             <button :class="{ active: activeHotOnly }" @click="activeHotOnly = !activeHotOnly">hot only</button>
+            <select v-model="activeRoute" class="route-select mono text-sm" title="Filter by route">
+                <option value="">all routes</option>
+                <option v-for="r in knownRoutes" :key="r" :value="r">{{ r }}</option>
+            </select>
             <button :class="{ active: frozen }" style="margin-left: auto" @click="toggleFreeze">
                 {{ frozen ? 'unfreeze' : 'freeze snapshot' }}
             </button>
@@ -744,7 +809,17 @@ function pathLabel(node: ComponentNode) {
                         <span class="muted text-sm">path</span>
                         <span class="mono text-sm">{{ pathLabel(activeSelected) }}</span>
                         <span class="muted text-sm">file</span>
-                        <span class="mono text-sm muted">{{ activeSelected.file }}</span>
+                        <span class="mono text-sm muted" style="display: flex; align-items: center; gap: 6px">
+                            {{ activeSelected.file }}
+                            <button
+                                v-if="activeSelected.file && activeSelected.file !== 'unknown'"
+                                class="jump-btn"
+                                title="Open in editor"
+                                @click="openInEditor(activeSelected.file)"
+                            >
+                                open ↗
+                            </button>
+                        </span>
                         <span class="muted text-sm">file name</span>
                         <span class="mono text-sm">{{ basename(activeSelected.file) }}</span>
                         <span class="muted text-sm">parent</span>
@@ -778,6 +853,26 @@ function pathLabel(node: ComponentNode) {
                     <div class="section-label">triggers</div>
                     <div v-for="trigger in activeSelected.triggers" :key="trigger" class="trigger-item mono text-sm">{{ trigger }}</div>
                     <div v-if="!activeSelected.triggers.length" class="muted text-sm">no triggers recorded</div>
+
+                    <div class="section-label" style="margin-top: 8px">
+                        render timeline
+                        <span class="muted" style="font-weight: 400; text-transform: none; letter-spacing: 0">
+                            ({{ activeSelected.timeline.length }})
+                        </span>
+                    </div>
+                    <div v-if="!activeSelected.timeline.length" class="muted text-sm">no timeline events yet</div>
+                    <div v-else class="timeline-list">
+                        <div v-for="(event, idx) in [...activeSelected.timeline].reverse().slice(0, 30)" :key="idx" class="timeline-row">
+                            <span class="timeline-kind mono" :class="event.kind">{{ event.kind }}</span>
+                            <span class="timeline-time mono muted">{{ formatTimestamp(event.t) }}</span>
+                            <span class="timeline-dur mono">{{ formatMs(event.durationMs) }}</span>
+                            <span v-if="event.triggerKey" class="timeline-trigger mono muted">{{ event.triggerKey }}</span>
+                            <span class="timeline-route mono muted" style="margin-left: auto">{{ event.route }}</span>
+                        </div>
+                        <div v-if="activeSelected.timeline.length > 30" class="muted text-sm" style="padding: 2px 0">
+                            … {{ activeSelected.timeline.length - 30 }} earlier events
+                        </div>
+                    </div>
                 </template>
                 <div v-else class="detail-empty">click a component to inspect</div>
             </aside>
@@ -1153,6 +1248,123 @@ function pathLabel(node: ComponentNode) {
     color: var(--text2);
 }
 
+:deep(.tree-jump-btn) {
+    display: none;
+    padding: 0 4px;
+    border: none;
+    background: transparent;
+    color: var(--text3);
+    font-size: 11px;
+    cursor: pointer;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+:deep(.tree-row:hover .tree-jump-btn),
+:deep(.tree-row.selected .tree-jump-btn) {
+    display: inline-flex;
+}
+
+:deep(.tree-jump-btn:hover) {
+    color: var(--teal);
+}
+
+.jump-btn {
+    font-size: 10px;
+    padding: 1px 6px;
+    border: 0.5px solid var(--border);
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--text3);
+    cursor: pointer;
+    flex-shrink: 0;
+    font-family: var(--mono);
+}
+
+.jump-btn:hover {
+    border-color: var(--teal);
+    color: var(--teal);
+    background: color-mix(in srgb, var(--teal) 8%, transparent);
+}
+
+.route-select {
+    padding: 3px 7px;
+    border: 0.5px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg2);
+    color: var(--text);
+    font-size: 11px;
+    cursor: pointer;
+    max-width: 140px;
+}
+
+.timeline-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    background: var(--bg2);
+    border-radius: var(--radius);
+    padding: 4px 8px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.timeline-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 0;
+    font-size: 11px;
+    border-bottom: 0.5px solid var(--border);
+    min-width: 0;
+}
+
+.timeline-row:last-child {
+    border-bottom: none;
+}
+
+.timeline-kind {
+    flex-shrink: 0;
+    font-size: 10px;
+    font-weight: 500;
+    min-width: 40px;
+}
+
+.timeline-kind.mount {
+    color: var(--teal);
+}
+
+.timeline-kind.update {
+    color: var(--amber);
+}
+
+.timeline-time {
+    flex-shrink: 0;
+    min-width: 52px;
+    color: var(--text3);
+}
+
+.timeline-dur {
+    flex-shrink: 0;
+    min-width: 38px;
+    color: var(--text2);
+}
+
+.timeline-trigger {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text3);
+    flex: 1;
+    min-width: 0;
+}
+
+.timeline-route {
+    flex-shrink: 0;
+    color: var(--text3);
+    font-size: 10px;
+}
+
 @media (max-width: 1180px) {
     .inspector {
         grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);

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.12",
+  "version": "0.1.14",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -362,7 +362,7 @@ function composableTrackerPlugin() {
             const args = path.node.arguments;
             const loc = path.node.loc;
             const meta = t.objectExpression([
-              t.objectProperty(t.identifier("file"), t.stringLiteral(id.split("/").pop() ?? id)),
+              t.objectProperty(t.identifier("file"), t.stringLiteral(id)),
               t.objectProperty(t.identifier("line"), t.numericLiteral(loc?.start.line ?? 0))
             ]);
             path.replaceWith(
@@ -521,6 +521,9 @@ const module$1 = defineNuxtModule({
     if (!nuxt.options.dev) {
       return;
     }
+    if (!process.env.LAUNCH_EDITOR && !process.env.VITE_EDITOR) {
+      process.env.LAUNCH_EDITOR = "code";
+    }
     const resolver = createResolver(import.meta.url);
     nuxt.hook("vite:extendConfig", (config) => {
       const alias = config.resolve?.alias;

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

@@ -53,6 +53,7 @@ export declare function setupComposableRegistry(): {
     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;

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

@@ -9,12 +9,18 @@ export function setupComposableRegistry() {
   const rawRefs = /* @__PURE__ */ new Map();
   function computeSharedKeys(id, name) {
     const ownRaw = rawRefs.get(id);
-    if (!ownRaw) return [];
+    if (!ownRaw) {
+      return [];
+    }
     const shared = /* @__PURE__ */ new Set();
     for (const [otherId, entry] of entries.value.entries()) {
-      if (otherId === id || entry.name !== name) continue;
+      if (otherId === id || entry.name !== name) {
+        continue;
+      }
       const otherRaw = rawRefs.get(otherId);
-      if (!otherRaw) continue;
+      if (!otherRaw) {
+        continue;
+      }
       for (const [key, obj] of Object.entries(ownRaw)) {
         if (key in otherRaw && otherRaw[key] === obj) {
           shared.add(key);
@@ -36,7 +42,9 @@ export function setupComposableRegistry() {
   }
   function registerLiveRefs(id, refs) {
     const prevStop = liveRefWatchers.get(id);
-    if (prevStop) prevStop();
+    if (prevStop) {
+      prevStop();
+    }
     liveRefWatchers.delete(id);
     if (Object.keys(refs).length === 0) {
       liveRefs.delete(id);
@@ -68,7 +76,9 @@ export function setupComposableRegistry() {
         if (serialised !== prev[k]) {
           const history = entryHistory.get(id) ?? [];
           history.push({ t, key: k, value: safeValue(val) });
-          if (history.length > MAX_HISTORY) history.shift();
+          if (history.length > MAX_HISTORY) {
+            history.shift();
+          }
           entryHistory.set(id, history);
         }
       }
@@ -168,7 +178,25 @@ export function setupComposableRegistry() {
     entries.value.clear();
     emit("composable:clear", {});
   }
-  return { register, registerLiveRefs, registerRawRefs, onComposableChange, clear, setRoute, getRoute, update, getAll };
+  function editValue(id, key, value) {
+    const live = liveRefs.get(id);
+    if (!live) {
+      return;
+    }
+    const r = live[key];
+    if (!r) {
+      return;
+    }
+    const entry = entries.value.get(id);
+    if (!entry) {
+      return;
+    }
+    if (entry.refs[key]?.type === "computed") {
+      return;
+    }
+    r.value = value;
+  }
+  return { register, registerLiveRefs, registerRawRefs, onComposableChange, clear, setRoute, getRoute, update, getAll, editValue };
 }
 export function __trackComposable(name, callFn, meta) {
   if (!import.meta.dev) {
@@ -199,7 +227,9 @@ export function __trackComposable(name, callFn, meta) {
     patchedSetInterval.__obs = true;
     window.setInterval = patchedSetInterval;
     window.clearInterval = ((timerId) => {
-      if (timerId !== void 0) clearedIntervals.add(timerId);
+      if (timerId !== void 0) {
+        clearedIntervals.add(timerId);
+      }
       originalClearInterval(timerId);
     });
   }

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

@@ -1,3 +1,15 @@
+export interface RenderEvent {
+    /** 'mount' for initial mount, 'update' for reactive re-renders */
+    kind: 'mount' | 'update';
+    /** performance.now() timestamp */
+    t: number;
+    /** Duration in ms */
+    durationMs: number;
+    /** Reactive dep key that triggered this update, if known */
+    triggerKey?: string;
+    /** Route path this render happened on */
+    route: string;
+}
 export interface RenderEntry {
     uid: number;
     name: string;
@@ -15,6 +27,8 @@ export interface RenderEntry {
         type: string;
         timestamp: number;
     }>;
+    /** Per-render timeline, capped at MAX_TIMELINE events (newest last) */
+    timeline: RenderEvent[];
     rect?: {
         x: number;
         y: number;
@@ -28,6 +42,8 @@ export interface RenderEntry {
     isPersistent: boolean;
     /** True if the first mount of this component happened during SSR hydration */
     isHydrationMount: boolean;
+    /** Route path this component was first seen on */
+    route: string;
 }
 /**
  * Sets up a render registry for tracking render-related metrics (e.g. rerenders, render time, etc.)
@@ -46,4 +62,5 @@ export declare function setupRenderRegistry(nuxtApp: {
     getAll: () => RenderEntry[];
     snapshot: () => RenderEntry[];
     reset: () => void;
+    setRoute: (path: string) => void;
 };