nuxt-devtools-observatory 0.1.15 → 0.1.17

package/dist/module.mjs

@@ -361,8 +361,9 @@ function composableTrackerPlugin() {
             }
             const args = path.node.arguments;
             const loc = path.node.loc;
+            const fileName = id.split(/[\\/]/).pop() || id;
             const meta = t.objectExpression([
-              t.objectProperty(t.identifier("file"), t.stringLiteral(id)),
+              t.objectProperty(t.identifier("file"), t.stringLiteral(fileName)),
               t.objectProperty(t.identifier("line"), t.numericLiteral(loc?.start.line ?? 0))
             ]);
             path.replaceWith(
@@ -547,7 +548,9 @@ const module$1 = defineNuxtModule({
     if (options.transitionTracker) {
       addVitePlugin(transitionTrackerPlugin());
     }
-    addPlugin(resolver.resolve("./runtime/plugin"));
+    if (options.fetchDashboard || options.provideInjectGraph || options.composableTracker || options.renderHeatmap || options.transitionTracker) {
+      addPlugin(resolver.resolve("./runtime/plugin"));
+    }
     if (options.fetchDashboard) {
       addServerPlugin(resolver.resolve("./runtime/nitro/fetch-capture"));
     }
@@ -616,7 +619,12 @@ const module$1 = defineNuxtModule({
     });
     nuxt.options.runtimeConfig.public.observatory = {
       heatmapThreshold: options.heatmapThreshold ?? 5,
-      clientOrigin
+      clientOrigin,
+      fetchDashboard: options.fetchDashboard,
+      provideInjectGraph: options.provideInjectGraph,
+      composableTracker: options.composableTracker,
+      renderHeatmap: options.renderHeatmap,
+      transitionTracker: options.transitionTracker
     };
   }
 });

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

@@ -80,15 +80,29 @@ export function __devFetchCall(originalFn, url, opts, meta) {
   if (!registry) {
     return originalFn(url, opts);
   }
+  function resolveUrl(u) {
+    if (u && typeof u === "object" && "value" in u) {
+      return resolveUrl(u.value);
+    }
+    if (typeof u === "function") {
+      try {
+        return resolveUrl(u());
+      } catch {
+        return String(u);
+      }
+    }
+    return typeof u === "string" ? u : String(u);
+  }
   const id = `${meta.key}::${Date.now()}`;
   const startTime = performance.now();
   const payload = window.__NUXT__?.data ?? {};
   const fromPayload = Object.prototype.hasOwnProperty.call(payload, meta.key);
   const origin = fromPayload ? "ssr" : "csr";
+  const resolvedUrl = resolveUrl(url);
   registry.register({
     id,
     key: meta.key,
-    url: typeof url === "string" ? url : String(url),
+    url: resolvedUrl,
     status: fromPayload ? "cached" : "pending",
     origin,
     startTime,
@@ -98,7 +112,21 @@ export function __devFetchCall(originalFn, url, opts, meta) {
     line: meta.line
   });
   if (fromPayload) {
-    return originalFn(url, opts);
+    const optsWithHooks = {
+      ...opts,
+      onResponse: function(ctx) {
+        const entry = registry.getAll().find((e) => e.id === id);
+        if (entry) {
+          registry.update(id, { payload: ctx.response._data });
+        }
+        if (typeof opts.onResponse === "function") {
+          opts.onResponse(ctx);
+        }
+      },
+      onResponseError: typeof opts.onResponseError === "function" ? opts.onResponseError : () => {
+      }
+    };
+    return originalFn(url, optsWithHooks);
   }
   return originalFn(url, {
     ...opts,

package/dist/runtime/plugin.js

@@ -44,26 +44,40 @@ export default defineNuxtPlugin(() => {
   }
   const nuxtApp = useNuxtApp();
   const config = useRuntimeConfig().public.observatory;
-  nuxtApp.vueApp.config.performance = true;
-  const fetchRegistry = setupFetchRegistry();
-  const provideInjectRegistry = setupProvideInjectRegistry();
-  const composableRegistry = setupComposableRegistry();
-  const renderRegistry = setupRenderRegistry(nuxtApp, {
-    // Only flag as hydration when the page was actually server-rendered.
-    // nuxtApp.isHydrating is true on ALL initial mounts (including CSR-only),
-    // so we gate on payload.serverRendered to avoid false positives.
-    isHydrating: () => (nuxtApp.isHydrating ?? false) && nuxtApp.payload?.serverRendered === true
-  });
-  const transitionRegistry = setupTransitionRegistry();
+  if (config.renderHeatmap) {
+    nuxtApp.vueApp.config.performance = true;
+  }
+  const registries = {};
+  let fetchRegistry;
+  let provideInjectRegistry;
+  let composableRegistry;
+  let renderRegistry;
+  let transitionRegistry;
+  if (config.fetchDashboard) {
+    fetchRegistry = setupFetchRegistry();
+    registries.fetch = fetchRegistry;
+  }
+  if (config.provideInjectGraph) {
+    provideInjectRegistry = setupProvideInjectRegistry();
+    registries.provideInject = provideInjectRegistry;
+  }
+  if (config.composableTracker) {
+    composableRegistry = setupComposableRegistry();
+    registries.composable = composableRegistry;
+  }
+  if (config.renderHeatmap) {
+    renderRegistry = setupRenderRegistry(nuxtApp, {
+      isHydrating: () => (nuxtApp.isHydrating ?? false) && nuxtApp.payload?.serverRendered === true
+    });
+    registries.render = renderRegistry;
+  }
+  if (config.transitionTracker) {
+    transitionRegistry = setupTransitionRegistry();
+    registries.transition = transitionRegistry;
+  }
   if (import.meta.client) {
     delete window.__observatory__;
-    window.__observatory__ = {
-      fetch: fetchRegistry,
-      provideInject: provideInjectRegistry,
-      composable: composableRegistry,
-      render: renderRegistry,
-      transition: transitionRegistry
-    };
+    window.__observatory__ = registries;
     let lastMessageSource = null;
     let lastMessageOrigin = "";
     window.addEventListener("message", (event) => {
@@ -79,13 +93,17 @@ export default defineNuxtPlugin(() => {
         return;
       }
       if (type === "observatory:clear-composables") {
-        composableRegistry.clear();
+        if (composableRegistry) {
+          composableRegistry.clear();
+        }
         const source = event.source;
         source?.postMessage({ type: "observatory:snapshot", data: buildSnapshot() }, event.origin);
       }
       if (type === "observatory:edit-composable") {
         const { id, key, value } = event.data;
-        composableRegistry.editValue(id, key, value);
+        if (composableRegistry) {
+          composableRegistry.editValue(id, key, value);
+        }
       }
       if (type === "observatory:open-in-editor") {
         const { file } = event.data;
@@ -96,18 +114,20 @@ export default defineNuxtPlugin(() => {
         }
       }
     });
-    composableRegistry.onComposableChange(() => {
-      if (!lastMessageSource || !lastMessageOrigin) {
-        return;
-      }
-      lastMessageSource.postMessage(
-        {
-          type: "observatory:snapshot",
-          data: buildSnapshot()
-        },
-        lastMessageOrigin
-      );
-    });
+    if (composableRegistry && composableRegistry.onComposableChange) {
+      composableRegistry.onComposableChange(() => {
+        if (!lastMessageSource || !lastMessageOrigin) {
+          return;
+        }
+        lastMessageSource.postMessage(
+          {
+            type: "observatory:snapshot",
+            data: buildSnapshot()
+          },
+          lastMessageOrigin
+        );
+      });
+    }
   }
   nuxtApp.hook("app:mounted", () => {
     broadcastAll();
@@ -119,14 +139,23 @@ export default defineNuxtPlugin(() => {
         if (!from || from.name === void 0) {
           return;
         }
-        renderRegistry.reset();
-        provideInjectRegistry.clear?.();
-        composableRegistry.clear();
+        if (renderRegistry) {
+          renderRegistry.reset();
+        }
+        ;
+        provideInjectRegistry?.clear?.();
+        if (composableRegistry) {
+          composableRegistry.clear();
+        }
       }
     );
     router.afterEach((to) => {
-      composableRegistry.setRoute(to.path ?? "/");
-      renderRegistry.setRoute(to.path ?? "/");
+      if (composableRegistry) {
+        composableRegistry.setRoute(to.path ?? "/");
+      }
+      if (renderRegistry) {
+        renderRegistry.setRoute(to.path ?? "/");
+      }
       nextTick(() => broadcastAll());
     });
   }
@@ -141,13 +170,30 @@ export default defineNuxtPlugin(() => {
     channel.send("observatory:snapshot", buildSnapshot());
   }
   function buildSnapshot() {
-    return toSerializable({
-      fetch: fetchRegistry.getAll(),
-      provideInject: provideInjectRegistry.getAll(),
-      composables: composableRegistry.getAll(),
-      renders: renderRegistry.getAll(),
-      transitions: transitionRegistry.getAll()
-    });
+    const snap = {};
+    if (fetchRegistry) {
+      snap.fetch = fetchRegistry.getAll();
+    }
+    if (provideInjectRegistry) {
+      snap.provideInject = provideInjectRegistry.getAll();
+    }
+    if (composableRegistry) {
+      snap.composables = composableRegistry.getAll();
+    }
+    if (renderRegistry) {
+      snap.renders = renderRegistry.getAll();
+    }
+    if (transitionRegistry) {
+      snap.transitions = transitionRegistry.getAll();
+    }
+    snap.features = {
+      fetchDashboard: !!fetchRegistry,
+      provideInjectGraph: !!provideInjectRegistry,
+      composableTracker: !!composableRegistry,
+      renderHeatmap: !!renderRegistry,
+      transitionTracker: !!transitionRegistry
+    };
+    return toSerializable(snap);
   }
   function getDevtoolsChannel() {
     return window.__nuxt_devtools__?.channel ?? null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-devtools-observatory",
-    "version": "0.1.15",
+    "version": "0.1.17",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "type": "module",
     "main": "./dist/module.mjs",
@@ -37,7 +37,9 @@
         "typecheck": "vue-tsc --noEmit",
         "test": "vitest run",
         "test:watch": "vitest",
-        "test:coverage": "vitest run --coverage"
+        "test:coverage": "vitest run --coverage",
+        "test:screenshots": "playwright test scripts/playwright/screenshot-trackers.spec.ts",
+        "capture:screenshots": "node scripts/playwright/capture-observatory-screenshots.cjs"
     },
     "dependencies": {
         "@babel/generator": "^7.29.1",
@@ -51,6 +53,7 @@
         "@nuxt/kit": "^3.0.0",
         "@nuxt/module-builder": "^1.0.2",
         "@nuxt/schema": "^3.0.0",
+        "@playwright/test": "^1.58.2",
         "@types/babel__generator": "^7.27.0",
         "@types/babel__traverse": "^7.28.0",
         "@types/node": "^25.5.0",
@@ -65,6 +68,7 @@
         "globals": "^17.3.0",
         "happy-dom": "^20.8.4",
         "nuxt": "^3.0.0 || ^4.0.0",
+        "playwright": "^1.58.2",
         "postcss-html": "^1.8.1",
         "prettier": "^3.8.1",
         "stylelint": "^17.4.0",