nuxt-devtools-observatory 0.1.5 → 0.1.6

package/client/src/views/RenderHeatmap.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, defineComponent, h, onUnmounted, type VNode } from 'vue'
+import { ref, computed, onUnmounted } from 'vue'
+import ComponentBlock from './ComponentBlock.vue'
+import { useObservatoryData } from '../stores/observatory'
 
 interface ComponentNode {
     id: string
@@ -11,212 +13,16 @@ interface ComponentNode {
     children: ComponentNode[]
 }
 
-// ComponentBlock — recursive inline component
-const ComponentBlock = defineComponent({
-    name: 'ComponentBlock',
-    props: {
-        node: Object as () => ComponentNode,
-        mode: String,
-        threshold: Number,
-        hotOnly: Boolean,
-        selected: String,
-    },
-    emits: ['select'],
-    setup(props, { emit }): () => VNode | null {
-        function getVal(n: ComponentNode) {
-            return props.mode === 'count' ? n.renders : n.avgMs
-        }
-
-        function getMax(): number {
-            let max = 1
-
-            function walk(ns: ComponentNode[]) {
-                ns.forEach((n) => {
-                    const v = getVal(n)
-
-                    if (v > max) {
-                        max = v
-                    }
-
-                    walk(n.children)
-                })
-            }
-
-            walk([props.node!])
-
-            return Math.max(max, props.mode === 'count' ? 40 : 20)
-        }
-        function heatColor(val: number, max: number) {
-            const r = Math.min(val / max, 1)
-
-            if (r < 0.25) {
-                return { bg: '#EAF3DE', text: '#27500A', border: '#97C459' }
-            }
-
-            if (r < 0.55) {
-                return { bg: '#FAEEDA', text: '#633806', border: '#EF9F27' }
-            }
-
-            if (r < 0.8) {
-                return { bg: '#FAECE7', text: '#712B13', border: '#D85A30' }
-            }
-
-            return { bg: '#FCEBEB', text: '#791F1F', border: '#E24B4A' }
-        }
-        function isHot(n: ComponentNode) {
-            return (props.mode === 'count' ? n.renders : n.avgMs) >= props.threshold!
-        }
-
-        return () => {
-            const n = props.node!
-
-            if (props.hotOnly && !isHot(n) && !n.children.some((c) => (props.mode === 'count' ? c.renders : c.avgMs) >= props.threshold!)) {
-                return null
-            }
-
-            const max = getMax()
-            const val = getVal(n)
-            const col = heatColor(val, max)
-            const isSel = props.selected === n.id
-            const unit = props.mode === 'count' ? 'renders' : 'ms avg'
-            const valStr = props.mode === 'count' ? String(val) : val.toFixed(1) + 'ms'
-
-            return h(
-                'div',
-                {
-                    style: {
-                        background: col.bg,
-                        border: isSel ? `2px solid ${col.border}` : `1px solid ${col.border}`,
-                        borderRadius: '6px',
-                        padding: '6px 9px',
-                        marginBottom: '5px',
-                        cursor: 'pointer',
-                    },
-                    onClick: () => emit('select', n),
-                },
-                [
-                    h('div', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, [
-                        h('span', { style: { fontFamily: 'var(--mono)', fontSize: '11px', fontWeight: '500', color: col.text } }, n.label),
-                        h(
-                            'span',
-                            { style: { fontFamily: 'var(--mono)', fontSize: '10px', color: col.text, opacity: '0.7', marginLeft: 'auto' } },
-                            `${valStr} ${unit}`
-                        ),
-                    ]),
-                    n.children.length
-                        ? h(
-                              'div',
-                              {
-                                  style: {
-                                      marginLeft: '10px',
-                                      borderLeft: `1.5px solid ${col.border}40`,
-                                      paddingLeft: '8px',
-                                      marginTop: '5px',
-                                  },
-                              },
-                              n.children.map((child) =>
-                                  h(ComponentBlock, {
-                                      node: child,
-                                      mode: props.mode,
-                                      threshold: props.threshold,
-                                      hotOnly: props.hotOnly,
-                                      selected: props.selected,
-                                      onSelect: (v: ComponentNode) => emit('select', v),
-                                  })
-                              )
-                          )
-                        : null,
-                ]
-            )
-        }
-    },
-})
+const { renders } = useObservatoryData()
+const baseNodes = renders
 
-// Mock data
-const baseNodes = ref<ComponentNode[]>([
-    {
-        id: 'NavBar',
-        label: 'NavBar.vue',
-        file: 'components/NavBar.vue',
-        renders: 3,
-        avgMs: 1.2,
-        triggers: ['props.user changed'],
-        children: [],
-    },
-    {
-        id: 'Sidebar',
-        label: 'Sidebar.vue',
-        file: 'components/Sidebar.vue',
-        renders: 2,
-        avgMs: 0.8,
-        triggers: ['parent re-render'],
-        children: [],
-    },
-    {
-        id: 'ProductGrid',
-        label: 'ProductGrid.vue',
-        file: 'components/ProductGrid.vue',
-        renders: 18,
-        avgMs: 14.3,
-        triggers: ['store: products updated', 'props.filter changed', 'parent re-render (×16)'],
-        children: [
-            {
-                id: 'ProductCard',
-                label: 'ProductCard.vue ×12',
-                file: 'components/ProductCard.vue',
-                renders: 24,
-                avgMs: 3.1,
-                triggers: ['parent re-render (×24)'],
-                children: [],
-            },
-            {
-                id: 'PriceTag',
-                label: 'PriceTag.vue ×12',
-                file: 'components/PriceTag.vue',
-                renders: 36,
-                avgMs: 0.4,
-                triggers: ['props.price changed (×36)'],
-                children: [],
-            },
-        ],
-    },
-    {
-        id: 'CartSummary',
-        label: 'CartSummary.vue',
-        file: 'components/CartSummary.vue',
-        renders: 9,
-        avgMs: 5.7,
-        triggers: ['store: cart updated (×9)'],
-        children: [
-            {
-                id: 'CartItem',
-                label: 'CartItem.vue ×3',
-                file: 'components/CartItem.vue',
-                renders: 12,
-                avgMs: 1.8,
-                triggers: ['parent re-render (×12)'],
-                children: [],
-            },
-        ],
-    },
-    {
-        id: 'FilterBar',
-        label: 'FilterBar.vue',
-        file: 'components/FilterBar.vue',
-        renders: 7,
-        avgMs: 2.1,
-        triggers: ['store: filters changed (×7)'],
-        children: [],
-    },
-    { id: 'Footer', label: 'Footer.vue', file: 'components/Footer.vue', renders: 1, avgMs: 0.3, triggers: ['initial mount'], children: [] },
-])
+let liveInterval: ReturnType<typeof setInterval> | undefined
 
 const activeMode = ref<'count' | 'time'>('count')
 const activeThreshold = ref(5)
 const activeHotOnly = ref(false)
 const frozen = ref(false)
 const activeSelected = ref<ComponentNode | null>(null)
-let liveInterval: ReturnType<typeof setInterval> | null = null
 
 const rootNodes = computed(() => baseNodes.value)
 
@@ -251,6 +57,10 @@ function isHot(n: ComponentNode) {
     return (activeMode.value === 'count' ? n.renders : n.avgMs) >= activeThreshold.value
 }
 
+function toggleFreeze() {
+    frozen.value = !frozen.value
+}
+
 function startLive() {
     liveInterval = setInterval(() => {
         if (frozen.value) {
@@ -263,13 +73,11 @@ function startLive() {
     }, 1800)
 }
 
-function toggleFreeze() {
-    frozen.value = !frozen.value
-}
-
 startLive()
 onUnmounted(() => {
-    if (liveInterval) clearInterval(liveInterval)
+    if (liveInterval) {
+        clearInterval(liveInterval)
+    }
 })
 </script>
 

package/client/src/views/TransitionTimeline.vue

@@ -61,7 +61,7 @@ const timelineGeometry = computed(() => {
     }))
 })
 
-function phaseColor(phase: TransitionEntry['phase'], direction: TransitionEntry['direction']): string {
+function phaseColor(phase: TransitionEntry['phase']): string {
     if (phase === 'entering' || phase === 'leaving') {
         return '#7f77dd'
     }
@@ -204,7 +204,7 @@ function directionColor(e: TransitionEntry): string {
                                         :style="{
                                             left: timelineGeometry[i]?.left + '%',
                                             width: Math.max(timelineGeometry[i]?.width ?? 1, 1) + '%',
-                                            background: phaseColor(entry.phase, entry.direction),
+                                            background: phaseColor(entry.phase),
                                             opacity: entry.phase === 'entering' || entry.phase === 'leaving' ? '0.55' : '1',
                                         }"
                                     />
@@ -267,7 +267,13 @@ function directionColor(e: TransitionEntry): string {
                         <div class="panel-row">
                             <span class="panel-key">Duration</span>
                             <span class="panel-val mono" style="font-weight: 500">
-                                {{ selected.durationMs !== undefined ? selected.durationMs + 'ms' : selected.phase === 'interrupted' ? 'interrupted' : 'in progress' }}
+                                {{
+                                    selected.durationMs !== undefined
+                                        ? selected.durationMs + 'ms'
+                                        : selected.phase === 'interrupted'
+                                          ? 'interrupted'
+                                          : 'in progress'
+                                }}
                             </span>
                         </div>
                     </div>

package/dist/module.d.mts

@@ -1,4 +1,4 @@
-import * as nuxt_schema from 'nuxt/schema';
+import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
     /**
@@ -32,7 +32,7 @@ interface ModuleOptions {
      */
     heatmapThreshold?: number;
 }
-declare const _default: nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
 export type { ModuleOptions };

package/dist/module.json

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

package/dist/module.mjs

@@ -29,7 +29,7 @@ function fetchInstrumentPlugin() {
       if (!isVue && !id.endsWith(".ts") && !id.endsWith(".js")) {
         return;
       }
-      if (id.includes("node_modules") || id.includes("composable-registry") || id.includes("provide-inject-registry") || id.includes("fetch-registry")) {
+      if (id.includes("node_modules")) {
         return;
       }
       let scriptCode = code;
@@ -66,20 +66,29 @@ function fetchInstrumentPlugin() {
             }
             const originalName = callee.name;
             const args = path.node.arguments;
-            const urlArg = args[0] ?? t.stringLiteral("");
-            const optsArg = args[1] ?? t.objectExpression([]);
-            let key = originalName;
-            if (t.isObjectExpression(optsArg)) {
-              const keyProp = optsArg.properties.find(
-                (p) => t.isObjectProperty(p) && t.isIdentifier(p.key) && p.key.name === "key"
-              );
-              if (keyProp && t.isStringLiteral(keyProp.value)) {
-                key = keyProp.value.value;
+            let keyArg = void 0;
+            let handlerArg = void 0;
+            let optsArg = void 0;
+            function getExpr(node) {
+              return t.isExpression(node) ? node : void 0;
+            }
+            if (originalName === "useAsyncData" || originalName === "useLazyAsyncData") {
+              if (args.length === 1 && getExpr(args[0])) {
+                handlerArg = getExpr(args[0]);
+              } else if (args.length >= 2 && getExpr(args[0]) && getExpr(args[1])) {
+                keyArg = getExpr(args[0]);
+                handlerArg = getExpr(args[1]);
+                optsArg = getExpr(args[2]) ?? t.objectExpression([]);
               } else {
-                if (t.isStringLiteral(urlArg)) {
-                  key = urlArg.value.replace(/[^a-z0-9]/gi, "-").replace(/^-+|-+$/g, "");
-                }
+                return;
               }
+            } else {
+              keyArg = getExpr(args[0]) ?? t.stringLiteral("");
+              optsArg = getExpr(args[1]) ?? t.objectExpression([]);
+            }
+            let key = originalName;
+            if (keyArg && t.isStringLiteral(keyArg)) {
+              key = keyArg.value.replace(/[^a-z0-9]/gi, "-").replace(/^-+|-+$/g, "");
             }
             const loc = path.node.loc;
             const meta = t.objectExpression([
@@ -88,8 +97,37 @@ function fetchInstrumentPlugin() {
               t.objectProperty(t.identifier("line"), t.numericLiteral(loc?.start.line ?? 0)),
               t.objectProperty(t.identifier("originalFn"), t.stringLiteral(originalName))
             ]);
-            path.replaceWith(t.callExpression(t.identifier("__devFetch"), [t.identifier(originalName), urlArg, optsArg, meta]));
-            modified = true;
+            if (originalName === "useAsyncData" || originalName === "useLazyAsyncData") {
+              if (handlerArg) {
+                const wrappedHandler = t.callExpression(t.identifier("__devFetch"), [
+                  handlerArg,
+                  keyArg ?? t.stringLiteral(key),
+                  meta
+                ]);
+                if (keyArg) {
+                  path.replaceWith(
+                    t.callExpression(t.identifier(originalName), [
+                      keyArg,
+                      wrappedHandler,
+                      optsArg ?? t.objectExpression([])
+                    ])
+                  );
+                } else {
+                  path.replaceWith(t.callExpression(t.identifier(originalName), [wrappedHandler]));
+                }
+                modified = true;
+              }
+            } else {
+              path.replaceWith(
+                t.callExpression(t.identifier("__devFetch"), [
+                  t.identifier(originalName),
+                  keyArg ?? t.stringLiteral(""),
+                  optsArg ?? t.objectExpression([]),
+                  meta
+                ])
+              );
+              modified = true;
+            }
           }
         });
         if (!modified) {
@@ -98,12 +136,14 @@ function fetchInstrumentPlugin() {
         const importStatement = hasImport ? "" : `import { __devFetch } from 'nuxt-devtools-observatory/runtime/fetch-registry';
 `;
         const output = generate$2(ast, { retainLines: true }, scriptCode);
+        let finalCode;
         if (isVue) {
-          const newCode = code.slice(0, scriptStart) + importStatement + output.code + code.slice(scriptStart + scriptCode.length);
-          return { code: newCode };
+          finalCode = code.slice(0, scriptStart) + importStatement + output.code + code.slice(scriptStart + scriptCode.length);
+        } else {
+          finalCode = importStatement + output.code;
         }
         return {
-          code: importStatement + output.code,
+          code: finalCode,
           map: output.map
         };
       } catch (err) {
@@ -194,11 +234,13 @@ function provideInjectPlugin() {
         const importLine = `import { __devProvide, __devInject } from 'nuxt-devtools-observatory/runtime/provide-inject-registry';
 `;
         const output = generate$1(ast, { retainLines: true }, scriptCode);
+        let finalCode;
         if (isVue) {
-          const newCode = code.slice(0, scriptStart) + importLine + output.code + code.slice(scriptStart + scriptCode.length);
-          return { code: newCode };
+          finalCode = code.slice(0, scriptStart) + (scriptCode.includes("__devProvide") ? "" : importLine) + output.code + code.slice(scriptStart + scriptCode.length);
+        } else {
+          finalCode = (scriptCode.includes("__devProvide") ? "" : importLine) + output.code;
         }
-        return { code: importLine + output.code, map: output.map };
+        return { code: finalCode, map: output.map };
       } catch (err) {
         console.warn("[observatory] provide/inject transform error:", err);
         return null;
@@ -323,11 +365,13 @@ function composableTrackerPlugin() {
         const importLine = `import { __trackComposable } from 'nuxt-devtools-observatory/runtime/composable-registry';
 `;
         const output = generate(ast, { retainLines: true }, scriptCode);
+        let finalCode;
         if (isVue) {
-          const newCode = code.slice(0, scriptStart) + importLine + output.code + code.slice(scriptStart + scriptCode.length);
-          return { code: newCode };
+          finalCode = code.slice(0, scriptStart) + (scriptCode.includes("__trackComposable") ? "" : importLine) + output.code + code.slice(scriptStart + scriptCode.length);
+        } else {
+          finalCode = (scriptCode.includes("__trackComposable") ? "" : importLine) + output.code;
         }
-        return { code: importLine + output.code, map: output.map };
+        return { code: finalCode, map: output.map };
       } catch (err) {
         console.warn("[observatory] composable transform error:", err);
         return null;

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

@@ -14,8 +14,49 @@ export function setupComposableRegistry() {
     entries.value.set(id, updated);
     emit("composable:update", updated);
   }
+  function safeValue(val) {
+    if (val === void 0 || val === null) {
+      return val;
+    }
+    if (typeof val === "function") {
+      return void 0;
+    }
+    if (typeof val === "object") {
+      try {
+        return JSON.parse(JSON.stringify(val));
+      } catch {
+        return String(val);
+      }
+    }
+    return val;
+  }
+  function sanitize(entry) {
+    return {
+      id: entry.id,
+      name: entry.name,
+      componentFile: entry.componentFile,
+      componentUid: entry.componentUid,
+      status: entry.status,
+      leak: entry.leak,
+      leakReason: entry.leakReason,
+      refs: Object.fromEntries(
+        Object.entries(entry.refs).map(([k, v]) => [
+          k,
+          {
+            type: v.type,
+            value: safeValue(typeof v.value === "object" && v.value !== null && "value" in v.value ? v.value.value : v.value)
+          }
+        ])
+      ),
+      watcherCount: entry.watcherCount,
+      intervalCount: entry.intervalCount,
+      lifecycle: entry.lifecycle,
+      file: entry.file,
+      line: entry.line
+    };
+  }
   function getAll() {
-    return [...entries.value.values()];
+    return [...entries.value.values()].map(sanitize);
   }
   function emit(event, data) {
     if (!import.meta.client) {

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

@@ -56,8 +56,8 @@ export declare function setupFetchRegistry(): {
         readonly line?: number | undefined;
     }>>>;
 };
-export declare function __devFetch(originalFn: (url: string, opts: Record<string, unknown>) => Promise<unknown>, url: string, opts: Record<string, unknown>, meta: {
+export declare function __devFetch(originalFn: (...args: unknown[]) => unknown, arg1: ((...args: unknown[]) => unknown) | string, arg2: Record<string, unknown>, meta: {
     key: string;
     file: string;
     line: number;
-}): Promise<unknown>;
+}): unknown;