nuxt-devtools-observatory 0.1.31 → 0.1.33

package/client/src/composables/useExportImport.ts

@@ -0,0 +1,63 @@
+export interface ObservatoryExportFile<T> {
+    type: 'observatory-traces' | 'observatory-renders'
+    version: '1'
+    exportedAt: number
+    count: number
+    data: T[]
+}
+
+export function exportJson(filename: string, envelope: ObservatoryExportFile<unknown>): void {
+    const json = JSON.stringify(envelope, null, 2)
+    const blob = new Blob([json], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = filename
+    anchor.click()
+    URL.revokeObjectURL(url)
+}
+
+export function importJson(): Promise<unknown> {
+    return new Promise((resolve, reject) => {
+        const input = document.createElement('input')
+        input.type = 'file'
+        input.accept = '.json,application/json'
+
+        input.addEventListener('change', () => {
+            const file = input.files?.[0]
+
+            if (!file) {
+                reject(new Error('No file selected'))
+                return
+            }
+
+            const reader = new FileReader()
+
+            reader.addEventListener('load', () => {
+                try {
+                    resolve(JSON.parse(reader.result as string))
+                } catch {
+                    reject(new Error('Invalid JSON file'))
+                }
+            })
+
+            reader.addEventListener('error', () => reject(new Error('Failed to read file')))
+            reader.readAsText(file)
+        })
+
+        // Reject if the dialog is cancelled (focus returns without a change event)
+        window.addEventListener(
+            'focus',
+            () => {
+                setTimeout(() => {
+                    if (!input.files?.length) {
+                        reject(new Error('cancelled'))
+                    }
+                }, 300)
+            },
+            { once: true }
+        )
+
+        input.click()
+    })
+}

package/client/src/composables/useTraceFilter.ts

@@ -65,11 +65,7 @@ export function useTraceFilter() {
         return false
     }
 
-    function matchesDurationFilter(
-        trace: TraceEntry,
-        min: number,
-        max: number
-    ): boolean {
+    function matchesDurationFilter(trace: TraceEntry, min: number, max: number): boolean {
         const hasExplicitDurationFilter = min > 0 || max < Infinity
 
         if (trace.durationMs === undefined) {

package/client/src/composables/useVirtualizationConfig.ts

@@ -0,0 +1,40 @@
+import { computed, ref } from 'vue'
+
+const DEFAULT_ROW_HEIGHT = 34
+const DEFAULT_OVERSCAN = 10
+const MIN_OVERSCAN = 2
+const MAX_OVERSCAN = 40
+
+function clampOverscan(value: number): number {
+    if (!Number.isFinite(value)) {
+        return DEFAULT_OVERSCAN
+    }
+
+    return Math.max(MIN_OVERSCAN, Math.min(MAX_OVERSCAN, Math.round(value)))
+}
+
+export type VirtualizationPreset = {
+    rowHeight: number
+    overscan: number
+}
+
+export function useVirtualizationConfig(initial?: Partial<VirtualizationPreset>) {
+    const rowHeight = ref(initial?.rowHeight ?? DEFAULT_ROW_HEIGHT)
+    const overscan = ref(clampOverscan(initial?.overscan ?? DEFAULT_OVERSCAN))
+
+    const preset = computed<VirtualizationPreset>(() => ({
+        rowHeight: Math.max(20, rowHeight.value),
+        overscan: clampOverscan(overscan.value),
+    }))
+
+    return {
+        rowHeight,
+        overscan,
+        preset,
+    }
+}
+
+export const VIRTUALIZATION_DEFAULTS = {
+    rowHeight: DEFAULT_ROW_HEIGHT,
+    overscan: DEFAULT_OVERSCAN,
+} as const

package/client/src/composables/useVirtualizationFlags.ts

@@ -0,0 +1,129 @@
+import { computed, ref } from 'vue'
+
+type VirtualizationScreen = 'heatmap' | 'traces' | 'composables' | 'fetch' | 'transitions'
+
+type VirtualizationFlags = {
+    enabled: boolean
+    heatmap: boolean
+    traces: boolean
+    composables: boolean
+    fetch: boolean
+    transitions: boolean
+}
+
+const defaultFlags: VirtualizationFlags = {
+    enabled: false,
+    heatmap: false,
+    traces: false,
+    composables: false,
+    fetch: false,
+    transitions: false,
+}
+
+const flags = ref<VirtualizationFlags>({ ...defaultFlags })
+
+let initialized = false
+
+function parseBooleanParam(value: string | null): boolean | null {
+    if (value == null) {
+        return null
+    }
+
+    if (value === '1' || value === 'true' || value === 'on') {
+        return true
+    }
+
+    if (value === '0' || value === 'false' || value === 'off') {
+        return false
+    }
+
+    return null
+}
+
+function readFromStorage(): VirtualizationFlags {
+    return { ...defaultFlags }
+}
+
+function applyQueryOverrides(current: VirtualizationFlags): VirtualizationFlags {
+    if (typeof window === 'undefined') {
+        return current
+    }
+
+    const params = new URLSearchParams(window.location.search)
+    const globalParam = parseBooleanParam(params.get('virt'))
+
+    const next = { ...current }
+
+    if (globalParam != null) {
+        next.enabled = globalParam
+    }
+
+    const perScreen: Array<[VirtualizationScreen, string]> = [
+        ['heatmap', 'virtHeatmap'],
+        ['traces', 'virtTraces'],
+        ['composables', 'virtComposables'],
+        ['fetch', 'virtFetch'],
+        ['transitions', 'virtTransitions'],
+    ]
+
+    for (const [key, paramName] of perScreen) {
+        const override = parseBooleanParam(params.get(paramName))
+
+        if (override != null) {
+            next[key] = override
+        }
+    }
+
+    return next
+}
+
+function init() {
+    if (initialized) {
+        return
+    }
+
+    initialized = true
+    const stored = readFromStorage()
+    const merged = applyQueryOverrides(stored)
+    flags.value = merged
+}
+
+function setAllEnabled(value: boolean) {
+    const next = {
+        ...flags.value,
+        enabled: value,
+    }
+
+    flags.value = next
+}
+
+function setScreenEnabled(screen: VirtualizationScreen, value: boolean) {
+    const next = {
+        ...flags.value,
+        [screen]: value,
+    }
+
+    flags.value = next
+}
+
+export function useVirtualizationFlags() {
+    init()
+
+    const effective = computed(() => ({
+        enabled: flags.value.enabled,
+        heatmap: flags.value.enabled && flags.value.heatmap,
+        traces: flags.value.enabled && flags.value.traces,
+        composables: flags.value.enabled && flags.value.composables,
+        fetch: flags.value.enabled && flags.value.fetch,
+        transitions: flags.value.enabled && flags.value.transitions,
+    }))
+
+    return {
+        flags,
+        effective,
+        setAllEnabled,
+        setScreenEnabled,
+    }
+}
+
+export type { VirtualizationFlags, VirtualizationScreen }

package/client/src/stores/observatory.ts

@@ -1,7 +1,15 @@
 import { ref } from 'vue'
 import { useDevtoolsClient, onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 import type { ObservatorySnapshot, ObservatoryServerFunctions, ObservatoryClientFunctions } from '@observatory/types/rpc'
-import type { FetchEntry, ProvideEntry, InjectEntry, ComposableEntry, RenderEntry, TransitionEntry, TraceEntry } from '@observatory/types/snapshot'
+import type {
+    FetchEntry,
+    ProvideEntry,
+    InjectEntry,
+    ComposableEntry,
+    RenderEntry,
+    TransitionEntry,
+    TraceEntry,
+} from '@observatory/types/snapshot'
 
 type ProvideInjectSnapshot = { provides: ProvideEntry[]; injects: InjectEntry[] }