nuxt-devtools-observatory 0.1.26 → 0.1.30

package/dist/module.mjs

@@ -1,4 +1,6 @@
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addServerPlugin } from '@nuxt/kit';
+import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
+import sirv from 'sirv';
 import { parse } from '@babel/parser';
 import _traverse from '@babel/traverse';
 import _generate from '@babel/generator';
@@ -22,6 +24,156 @@ function extractScriptBlock(code) {
 
 const traverse$2 = _traverse.default ?? _traverse;
 const generate$2 = _generate.default ?? _generate;
+const COMPOSABLE_RE = /\buse[A-Z]/;
+const SKIP_LIST = /* @__PURE__ */ new Set([
+  // useFetch family — tracked by the fetch dashboard
+  "useFetch",
+  "useAsyncData",
+  "useLazyFetch",
+  "useLazyAsyncData",
+  // Nuxt auto-imports
+  "useCookie",
+  "useRequestEvent",
+  "useRequestHeaders",
+  "useRequestURL",
+  "useResponseHeader",
+  "useNuxtApp",
+  "useRuntimeConfig",
+  "useRoute",
+  "useRouter",
+  "useNuxtData",
+  "useError",
+  "useState",
+  "useAppConfig",
+  // Nuxt head
+  "useHead",
+  "useSeoMeta",
+  "useServerSeoMeta",
+  "useHeadSafe",
+  // Nuxt i18n (common plugin)
+  "useI18n",
+  "useLocalePath",
+  "useLocaleRoute",
+  // Vue built-ins
+  "useSlots",
+  "useAttrs",
+  "useModel",
+  "useTemplateRef",
+  "useId",
+  "useCssModule",
+  "useCssVars"
+]);
+function composableTrackerPlugin() {
+  return {
+    name: "vite-plugin-observatory-composables",
+    enforce: "pre",
+    transform(code, id) {
+      const isVue = id.endsWith(".vue");
+      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")) {
+        return;
+      }
+      let scriptCode = code;
+      let scriptStart = 0;
+      if (isVue) {
+        const block = extractScriptBlock(code);
+        if (!block) {
+          return null;
+        }
+        scriptCode = block.content;
+        scriptStart = block.start;
+      }
+      if (!COMPOSABLE_RE.test(scriptCode)) {
+        return;
+      }
+      try {
+        const ast = parse(scriptCode, {
+          sourceType: "module",
+          plugins: ["typescript"]
+        });
+        let modified = false;
+        traverse$2(ast, {
+          CallExpression(path) {
+            const callee = path.node.callee;
+            if (!t.isIdentifier(callee)) {
+              return;
+            }
+            const name = callee.name;
+            if (!COMPOSABLE_RE.test(name)) {
+              return;
+            }
+            if (SKIP_LIST.has(name)) {
+              return;
+            }
+            const binding = path.scope.getBinding(name);
+            if (binding?.path.isImportSpecifier() || binding?.path.isImportDefaultSpecifier()) {
+              const importDecl = binding.path.parentPath?.node;
+              const source = importDecl?.source?.value ?? "";
+              if (source && !source.startsWith(".") && !source.startsWith("/")) {
+                return;
+              }
+            }
+            let parent = path.parentPath;
+            let isWrapped = false;
+            while (parent) {
+              if (t.isCallExpression(parent.node) && t.isIdentifier(parent.node.callee) && parent.node.callee.name === "__trackComposable") {
+                isWrapped = true;
+                break;
+              }
+              parent = parent.parentPath ?? null;
+            }
+            if (isWrapped) {
+              return;
+            }
+            const comments = (path.node.leadingComments ?? []).concat(path.parentPath?.node?.leadingComments ?? []);
+            const ignored = comments.some((c) => c.value.includes("@devtools-ignore"));
+            if (ignored) {
+              return;
+            }
+            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(fileName)),
+              t.objectProperty(t.identifier("line"), t.numericLiteral(loc?.start.line ?? 0))
+            ]);
+            path.replaceWith(
+              t.callExpression(t.identifier("__trackComposable"), [
+                t.stringLiteral(name),
+                t.arrowFunctionExpression([], t.callExpression(t.identifier(name), args)),
+                meta
+              ])
+            );
+            modified = true;
+          }
+        });
+        if (!modified) {
+          return null;
+        }
+        const importLine = `import { __trackComposable } from 'nuxt-devtools-observatory/runtime/composable-registry';
+`;
+        const output = generate$2(ast, { retainLines: true }, scriptCode);
+        const alreadyImported = output.code.includes("nuxt-devtools-observatory/runtime/composable-registry");
+        const prefix = alreadyImported ? "" : importLine;
+        let finalCode;
+        if (isVue) {
+          finalCode = code.slice(0, scriptStart) + prefix + output.code + code.slice(scriptStart + scriptCode.length);
+        } else {
+          finalCode = prefix + output.code;
+        }
+        return { code: finalCode, map: output.map };
+      } catch (err) {
+        console.warn("[observatory] composable transform error:", err);
+        return null;
+      }
+    }
+  };
+}
+
+const traverse$1 = _traverse.default ?? _traverse;
+const generate$1 = _generate.default ?? _generate;
 const FETCH_FNS = /* @__PURE__ */ new Set(["useFetch", "useAsyncData", "useLazyFetch", "useLazyAsyncData"]);
 function isHandlerExpression(node) {
   return Boolean(node && (t.isIdentifier(node) || t.isArrowFunctionExpression(node) || t.isFunctionExpression(node)));
@@ -61,7 +213,7 @@ function fetchInstrumentPlugin() {
         let needsFetchHandlerHelper = false;
         const hasFetchCallImport = scriptCode.includes("__devFetchCall");
         const hasFetchHandlerImport = scriptCode.includes("__devFetchHandler");
-        traverse$2(ast, {
+        traverse$1(ast, {
           CallExpression(path) {
             if (path.node.__observatoryTransformed) {
               return;
@@ -179,7 +331,7 @@ function fetchInstrumentPlugin() {
         ].filter(Boolean);
         const importStatement = importNames.length ? `import { ${importNames.join(", ")} } from 'nuxt-devtools-observatory/runtime/fetch-registry';
 ` : "";
-        const output = generate$2(ast, { retainLines: true }, scriptCode);
+        const output = generate$1(ast, { retainLines: true }, scriptCode);
         let finalCode;
         if (isVue) {
           finalCode = code.slice(0, scriptStart) + importStatement + output.code + code.slice(scriptStart + scriptCode.length);
@@ -198,8 +350,8 @@ function fetchInstrumentPlugin() {
   };
 }
 
-const traverse$1 = _traverse.default ?? _traverse;
-const generate$1 = _generate.default ?? _generate;
+const traverse = _traverse.default ?? _traverse;
+const generate = _generate.default ?? _generate;
 function provideInjectPlugin() {
   return {
     name: "vite-plugin-observatory-provide-inject",
@@ -231,7 +383,7 @@ function provideInjectPlugin() {
           plugins: ["typescript"]
         });
         let modified = false;
-        traverse$1(ast, {
+        traverse(ast, {
           CallExpression(path) {
             const callee = path.node.callee;
             if (!t.isIdentifier(callee)) {
@@ -265,7 +417,7 @@ function provideInjectPlugin() {
         }
         const importLine = `import { __devProvide, __devInject } from 'nuxt-devtools-observatory/runtime/provide-inject-registry';
 `;
-        const output = generate$1(ast, { retainLines: true }, scriptCode);
+        const output = generate(ast, { retainLines: true }, scriptCode);
         let finalCode;
         if (isVue) {
           finalCode = code.slice(0, scriptStart) + (scriptCode.includes("__devProvide") ? "" : importLine) + output.code + code.slice(scriptStart + scriptCode.length);
@@ -281,156 +433,6 @@ function provideInjectPlugin() {
   };
 }
 
-const traverse = _traverse.default ?? _traverse;
-const generate = _generate.default ?? _generate;
-const COMPOSABLE_RE = /\buse[A-Z]/;
-const SKIP_LIST = /* @__PURE__ */ new Set([
-  // useFetch family — tracked by the fetch dashboard
-  "useFetch",
-  "useAsyncData",
-  "useLazyFetch",
-  "useLazyAsyncData",
-  // Nuxt auto-imports
-  "useCookie",
-  "useRequestEvent",
-  "useRequestHeaders",
-  "useRequestURL",
-  "useResponseHeader",
-  "useNuxtApp",
-  "useRuntimeConfig",
-  "useRoute",
-  "useRouter",
-  "useNuxtData",
-  "useError",
-  "useState",
-  "useAppConfig",
-  // Nuxt head
-  "useHead",
-  "useSeoMeta",
-  "useServerSeoMeta",
-  "useHeadSafe",
-  // Nuxt i18n (common plugin)
-  "useI18n",
-  "useLocalePath",
-  "useLocaleRoute",
-  // Vue built-ins
-  "useSlots",
-  "useAttrs",
-  "useModel",
-  "useTemplateRef",
-  "useId",
-  "useCssModule",
-  "useCssVars"
-]);
-function composableTrackerPlugin() {
-  return {
-    name: "vite-plugin-observatory-composables",
-    enforce: "pre",
-    transform(code, id) {
-      const isVue = id.endsWith(".vue");
-      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")) {
-        return;
-      }
-      let scriptCode = code;
-      let scriptStart = 0;
-      if (isVue) {
-        const block = extractScriptBlock(code);
-        if (!block) {
-          return null;
-        }
-        scriptCode = block.content;
-        scriptStart = block.start;
-      }
-      if (!COMPOSABLE_RE.test(scriptCode)) {
-        return;
-      }
-      try {
-        const ast = parse(scriptCode, {
-          sourceType: "module",
-          plugins: ["typescript"]
-        });
-        let modified = false;
-        traverse(ast, {
-          CallExpression(path) {
-            const callee = path.node.callee;
-            if (!t.isIdentifier(callee)) {
-              return;
-            }
-            const name = callee.name;
-            if (!COMPOSABLE_RE.test(name)) {
-              return;
-            }
-            if (SKIP_LIST.has(name)) {
-              return;
-            }
-            const binding = path.scope.getBinding(name);
-            if (binding?.path.isImportSpecifier() || binding?.path.isImportDefaultSpecifier()) {
-              const importDecl = binding.path.parentPath?.node;
-              const source = importDecl?.source?.value ?? "";
-              if (source && !source.startsWith(".") && !source.startsWith("/")) {
-                return;
-              }
-            }
-            let parent = path.parentPath;
-            let isWrapped = false;
-            while (parent) {
-              if (t.isCallExpression(parent.node) && t.isIdentifier(parent.node.callee) && parent.node.callee.name === "__trackComposable") {
-                isWrapped = true;
-                break;
-              }
-              parent = parent.parentPath ?? null;
-            }
-            if (isWrapped) {
-              return;
-            }
-            const comments = (path.node.leadingComments ?? []).concat(path.parentPath?.node?.leadingComments ?? []);
-            const ignored = comments.some((c) => c.value.includes("@devtools-ignore"));
-            if (ignored) {
-              return;
-            }
-            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(fileName)),
-              t.objectProperty(t.identifier("line"), t.numericLiteral(loc?.start.line ?? 0))
-            ]);
-            path.replaceWith(
-              t.callExpression(t.identifier("__trackComposable"), [
-                t.stringLiteral(name),
-                t.arrowFunctionExpression([], t.callExpression(t.identifier(name), args)),
-                meta
-              ])
-            );
-            modified = true;
-          }
-        });
-        if (!modified) {
-          return null;
-        }
-        const importLine = `import { __trackComposable } from 'nuxt-devtools-observatory/runtime/composable-registry';
-`;
-        const output = generate(ast, { retainLines: true }, scriptCode);
-        const alreadyImported = output.code.includes("nuxt-devtools-observatory/runtime/composable-registry");
-        const prefix = alreadyImported ? "" : importLine;
-        let finalCode;
-        if (isVue) {
-          finalCode = code.slice(0, scriptStart) + prefix + output.code + code.slice(scriptStart + scriptCode.length);
-        } else {
-          finalCode = prefix + output.code;
-        }
-        return { code: finalCode, map: output.map };
-      } catch (err) {
-        console.warn("[observatory] composable transform error:", err);
-        return null;
-      }
-    }
-  };
-}
-
 const VIRTUAL_ID = "\0obs:vue-proxy";
 const PROXY_MODULE = `
 import {
@@ -544,6 +546,8 @@ function transitionTrackerPlugin() {
 }
 
 const defaults = {
+  // Auto-enable server instrumentation for SSR projects unless explicitly overridden.
+  // This ensures initial SSR snapshots include server-side composables/fetch events.
   instrumentServer: process.env.OBSERVATORY_INSTRUMENT_SERVER === "true",
   fetchDashboard: process.env.OBSERVATORY_FETCH_DASHBOARD === "true",
   provideInjectGraph: process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH === "true",
@@ -559,7 +563,8 @@ const defaults = {
   maxComposableEntries: process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300,
   maxRenderTimeline: process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100,
   composableNavigationMode: process.env.OBSERVATORY_COMPOSABLE_NAVIGATION_MODE === "session" ? "session" : "route",
-  heatmapHideInternals: process.env.OBSERVATORY_HEATMAP_HIDE_INTERNALS === "true"
+  heatmapHideInternals: process.env.OBSERVATORY_HEATMAP_HIDE_INTERNALS === "true",
+  debugRpc: process.env.OBSERVATORY_DEBUG_RPC === "true"
 };
 const module$1 = defineNuxtModule({
   meta: {
@@ -586,7 +591,7 @@ const module$1 = defineNuxtModule({
       composableTracker: options.composableTracker ?? (process.env.OBSERVATORY_COMPOSABLE_TRACKER ? process.env.OBSERVATORY_COMPOSABLE_TRACKER === "true" : true),
       renderHeatmap: options.renderHeatmap ?? (process.env.OBSERVATORY_RENDER_HEATMAP ? process.env.OBSERVATORY_RENDER_HEATMAP === "true" : true),
       transitionTracker: options.transitionTracker ?? (process.env.OBSERVATORY_TRANSITION_TRACKER ? process.env.OBSERVATORY_TRANSITION_TRACKER === "true" : true),
-      instrumentServer: options.instrumentServer ?? (process.env.OBSERVATORY_INSTRUMENT_SERVER ? process.env.OBSERVATORY_INSTRUMENT_SERVER === "true" : false),
+      instrumentServer: options.instrumentServer ?? (process.env.OBSERVATORY_INSTRUMENT_SERVER ? process.env.OBSERVATORY_INSTRUMENT_SERVER === "true" : nuxt.options.ssr !== false),
       heatmapThresholdCount: options.heatmapThresholdCount ?? (process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT) : 3),
       heatmapThresholdTime: options.heatmapThresholdTime ?? (process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME) : 1600),
       maxFetchEntries: options.maxFetchEntries ?? (process.env.OBSERVATORY_MAX_FETCH_ENTRIES ? Number(process.env.OBSERVATORY_MAX_FETCH_ENTRIES) : 200),
@@ -595,7 +600,8 @@ const module$1 = defineNuxtModule({
       maxComposableHistory: options.maxComposableHistory ?? (process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY) : 50),
       maxComposableEntries: options.maxComposableEntries ?? (process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300),
       maxRenderTimeline: options.maxRenderTimeline ?? (process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100),
-      composableNavigationMode: options.composableNavigationMode ?? (process.env.OBSERVATORY_COMPOSABLE_NAVIGATION_MODE === "session" ? "session" : "route")
+      composableNavigationMode: options.composableNavigationMode ?? (process.env.OBSERVATORY_COMPOSABLE_NAVIGATION_MODE === "session" ? "session" : "route"),
+      debugRpc: options.debugRpc ?? (process.env.OBSERVATORY_DEBUG_RPC ? process.env.OBSERVATORY_DEBUG_RPC === "true" : false)
     };
     nuxt.hook("vite:extendConfig", (config) => {
       const alias = config.resolve?.alias;
@@ -626,34 +632,80 @@ const module$1 = defineNuxtModule({
     if (resolved.fetchDashboard) {
       addServerPlugin(resolver.resolve("./runtime/nitro/fetch-capture"));
     }
-    const CLIENT_PORT = 4949;
-    const clientOrigin = `http://localhost:${CLIENT_PORT}`;
-    let innerServer = null;
-    nuxt.hook("vite:serverCreated", async (_viteServer, env) => {
-      if (!env.isClient) {
-        return;
+    const base = "/__observatory";
+    const debugRpc = resolved.debugRpc === true;
+    const debugLog = (...args) => {
+      if (debugRpc) {
+        console.info("[observatory][rpc][server]", ...args);
       }
-      if (innerServer) {
+    };
+    let latestSnapshot = {
+      fetch: [],
+      provideInject: { provides: [], injects: [] },
+      composables: [],
+      renders: [],
+      transitions: [],
+      features: {
+        fetchDashboard: !!resolved.fetchDashboard,
+        provideInjectGraph: !!resolved.provideInjectGraph,
+        composableTracker: !!resolved.composableTracker,
+        composableNavigationMode: resolved.composableNavigationMode,
+        renderHeatmap: !!resolved.renderHeatmap,
+        transitionTracker: !!resolved.transitionTracker
+      }
+    };
+    let rpc = null;
+    let viteServer = null;
+    const emitCommand = (command) => {
+      if (!viteServer) {
+        console.warn("[observatory][rpc][server] command dropped (vite ws not ready)", command);
         return;
       }
-      const { createServer } = await import('vite');
-      const { default: vue } = await import('@vitejs/plugin-vue');
-      innerServer = await createServer({
-        root: resolver.resolve("../client"),
-        base: "/",
-        server: { port: CLIENT_PORT, strictPort: true, cors: true },
-        appType: "spa",
-        configFile: false,
-        plugins: [vue()],
-        logLevel: "warn"
-      });
-      await innerServer.listen();
-      nuxt.hook("close", () => {
-        innerServer?.close();
-        innerServer = null;
-      });
+      debugLog("send command", command);
+      viteServer.ws.send("observatory:command", command);
+    };
+    addVitePlugin({
+      name: "nuxt-devtools-observatory:sirv-client",
+      configureServer(server) {
+        viteServer = server;
+        const clientDist = resolver.resolve("../client/dist");
+        server.middlewares.use(base, sirv(clientDist, { dev: true, single: true }));
+        server.ws.on("observatory:snapshot", (snapshot) => {
+          latestSnapshot = snapshot;
+          debugLog("received host snapshot", {
+            fetch: Array.isArray(snapshot.fetch) ? snapshot.fetch.length : 0,
+            composables: Array.isArray(snapshot.composables) ? snapshot.composables.length : 0,
+            renders: Array.isArray(snapshot.renders) ? snapshot.renders.length : 0,
+            transitions: Array.isArray(snapshot.transitions) ? snapshot.transitions.length : 0
+          });
+          rpc?.broadcast.onSnapshot.asEvent(snapshot);
+        });
+      }
     });
-    const base = clientOrigin;
+    onDevToolsInitialized(() => {
+      rpc = extendServerRpc(
+        "observatory",
+        {
+          async getSnapshot() {
+            return latestSnapshot;
+          },
+          async requestSnapshot() {
+            emitCommand({ cmd: "request-snapshot" });
+          },
+          async clearComposables() {
+            emitCommand({ cmd: "clear-composables" });
+          },
+          async setComposableMode(mode) {
+            emitCommand({ cmd: "set-mode", mode });
+          },
+          async editComposableValue(id, key, value) {
+            emitCommand({ cmd: "edit-composable", id, key, value });
+          }
+        },
+        nuxt
+      );
+      rpc.broadcast.onSnapshot.asEvent(latestSnapshot);
+    }, nuxt);
     nuxt.hook("render:response", (response, { url }) => {
       if (url.startsWith("/trackers") || url === "/" || url.startsWith("/index.html")) {
         const configScript = `<script>window.__observatoryConfig = ${JSON.stringify(nuxt.options.runtimeConfig.public.observatory)};<\/script>`;
@@ -667,13 +719,12 @@ ${configScript}`);
           name: "observatory-trackers",
           title: "Observatory Trackers",
           icon: "carbon:heat-map",
-          view: { type: "iframe", src: `${base}/trackers` }
+          view: { type: "iframe", src: `${base}/trackers${resolved.debugRpc ? "?debugRpc=1" : ""}` }
         });
       }
     });
     nuxt.options.runtimeConfig.public.observatory = {
       instrumentServer: resolved.instrumentServer,
-      clientOrigin,
       fetchDashboard: resolved.fetchDashboard,
       provideInjectGraph: resolved.provideInjectGraph,
       composableTracker: resolved.composableTracker,
@@ -688,7 +739,8 @@ ${configScript}`);
       composableNavigationMode: resolved.composableNavigationMode,
       heatmapHideInternals: resolved.heatmapHideInternals,
       heatmapThresholdCount: resolved.heatmapThresholdCount,
-      heatmapThresholdTime: resolved.heatmapThresholdTime
+      heatmapThresholdTime: resolved.heatmapThresholdTime,
+      debugRpc: resolved.debugRpc
     };
   }
 });

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

@@ -218,6 +218,9 @@ export function __devFetchCall(originalFn, url, opts, meta) {
       }
     },
     onResponseError({ response }) {
+      const endTime = performance.now();
+      const ms = Math.round(endTime - lastCallStart);
+      registry.update(id, { status: "error", endTime, ms });
       if (typeof opts.onResponseError === "function") {
         opts.onResponseError({ response });
       }