nuxt-devtools-observatory 0.1.8 → 0.1.9

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addVitePlugin, addPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addServerPlugin } from '@nuxt/kit';
 import { parse } from '@babel/parser';
 import _traverse from '@babel/traverse';
 import _generate from '@babel/generator';
@@ -21,6 +21,9 @@ function extractScriptBlock(code) {
 const traverse$2 = _traverse.default ?? _traverse;
 const generate$2 = _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)));
+}
 function fetchInstrumentPlugin() {
   return {
     name: "vite-plugin-observatory-fetch",
@@ -30,7 +33,7 @@ function fetchInstrumentPlugin() {
       if (!isVue && !id.endsWith(".ts") && !id.endsWith(".js")) {
         return;
       }
-      if (id.includes("node_modules")) {
+      if (id.includes("node_modules") || id.includes("composable-registry") || id.includes("provide-inject-registry") || id.includes("fetch-registry")) {
         return;
       }
       let scriptCode = code;
@@ -52,9 +55,15 @@ function fetchInstrumentPlugin() {
           plugins: ["typescript"]
         });
         let modified = false;
-        const hasImport = scriptCode.includes("__devFetch");
+        let needsFetchCallHelper = false;
+        let needsFetchHandlerHelper = false;
+        const hasFetchCallImport = scriptCode.includes("__devFetchCall");
+        const hasFetchHandlerImport = scriptCode.includes("__devFetchHandler");
         traverse$2(ast, {
           CallExpression(path) {
+            if (path.node.__observatoryTransformed) {
+              return;
+            }
             const callee = path.node.callee;
             if (!t.isIdentifier(callee)) {
               return;
@@ -62,7 +71,7 @@ function fetchInstrumentPlugin() {
             if (!FETCH_FNS.has(callee.name)) {
               return;
             }
-            if (path.parent && t.isCallExpression(path.parent) && t.isIdentifier(path.parent.callee) && path.parent.callee.name === "__devFetch") {
+            if (path.parent && t.isCallExpression(path.parent) && t.isIdentifier(path.parent.callee) && ["__devFetchCall", "__devFetchHandler"].includes(path.parent.callee.name)) {
               return;
             }
             const originalName = callee.name;
@@ -74,22 +83,35 @@ function fetchInstrumentPlugin() {
               return t.isExpression(node) ? node : void 0;
             }
             if (originalName === "useAsyncData" || originalName === "useLazyAsyncData") {
-              if (args.length === 1 && getExpr(args[0])) {
+              if (args.length === 1 && isHandlerExpression(getExpr(args[0]))) {
                 handlerArg = getExpr(args[0]);
-              } else if (args.length >= 2 && getExpr(args[0]) && getExpr(args[1])) {
+              } else if (args.length >= 2 && getExpr(args[0]) && isHandlerExpression(getExpr(args[1]))) {
                 keyArg = getExpr(args[0]);
                 handlerArg = getExpr(args[1]);
                 optsArg = getExpr(args[2]) ?? t.objectExpression([]);
               } else {
-                return;
+                keyArg = getExpr(args[0]) ?? t.stringLiteral("");
+                optsArg = getExpr(args[1]) ?? t.objectExpression([]);
+                handlerArg = void 0;
               }
             } 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, "");
+            if (originalName === "useFetch" || originalName === "useLazyFetch") {
+              if (optsArg && t.isObjectExpression(optsArg)) {
+                const keyProp = optsArg.properties.find(
+                  (property) => t.isObjectProperty(property) && t.isIdentifier(property.key) && property.key.name === "key" && t.isStringLiteral(property.value)
+                );
+                if (keyProp && t.isStringLiteral(keyProp.value)) {
+                  key = keyProp.value.value;
+                } else if (keyArg && t.isStringLiteral(keyArg)) {
+                  key = keyArg.value.replace(/[^a-z0-9]/gi, "-").replace(/^-+|-+$/g, "");
+                }
+              } else if (keyArg && t.isStringLiteral(keyArg)) {
+                key = keyArg.value.replace(/[^a-z0-9]/gi, "-").replace(/^-+|-+$/g, "");
+              }
             }
             const loc = path.node.loc;
             const meta = t.objectExpression([
@@ -98,35 +120,50 @@ function fetchInstrumentPlugin() {
               t.objectProperty(t.identifier("line"), t.numericLiteral(loc?.start.line ?? 0)),
               t.objectProperty(t.identifier("originalFn"), t.stringLiteral(originalName))
             ]);
-            if (originalName === "useAsyncData" || originalName === "useLazyAsyncData") {
+            if ((originalName === "useAsyncData" || originalName === "useLazyAsyncData") && handlerArg) {
               if (handlerArg) {
-                const wrappedHandler = t.callExpression(t.identifier("__devFetch"), [
-                  handlerArg,
-                  keyArg ?? t.stringLiteral(key),
-                  meta
-                ]);
+                const wrappedHandler = t.arrowFunctionExpression(
+                  [t.restElement(t.identifier("args"))],
+                  t.conditionalExpression(
+                    t.logicalExpression(
+                      "&&",
+                      t.memberExpression(t.identifier("process"), t.identifier("dev")),
+                      t.memberExpression(t.identifier("process"), t.identifier("client"))
+                    ),
+                    t.callExpression(
+                      t.callExpression(t.identifier("__devFetchHandler"), [handlerArg, keyArg ?? t.stringLiteral(key), meta]),
+                      [t.spreadElement(t.identifier("args"))]
+                    ),
+                    t.callExpression(handlerArg, [t.spreadElement(t.identifier("args"))])
+                  )
+                );
+                wrappedHandler.__observatoryTransformed = true;
+                needsFetchHandlerHelper = true;
                 if (keyArg) {
-                  path.replaceWith(
-                    t.callExpression(t.identifier(originalName), [
-                      keyArg,
-                      wrappedHandler,
-                      optsArg ?? t.objectExpression([])
-                    ])
-                  );
+                  const newCall = t.callExpression(t.identifier(originalName), [
+                    keyArg,
+                    wrappedHandler,
+                    optsArg ?? t.objectExpression([])
+                  ]);
+                  newCall.__observatoryTransformed = true;
+                  path.replaceWith(newCall);
                 } else {
-                  path.replaceWith(t.callExpression(t.identifier(originalName), [wrappedHandler]));
+                  const newCall = t.callExpression(t.identifier(originalName), [wrappedHandler]);
+                  newCall.__observatoryTransformed = true;
+                  path.replaceWith(newCall);
                 }
                 modified = true;
               }
             } else {
-              path.replaceWith(
-                t.callExpression(t.identifier("__devFetch"), [
-                  t.identifier(originalName),
-                  keyArg ?? t.stringLiteral(""),
-                  optsArg ?? t.objectExpression([]),
-                  meta
-                ])
-              );
+              const newCall = t.callExpression(t.identifier("__devFetchCall"), [
+                t.identifier(originalName),
+                keyArg ?? t.stringLiteral(""),
+                optsArg ?? t.objectExpression([]),
+                meta
+              ]);
+              newCall.__observatoryTransformed = true;
+              needsFetchCallHelper = true;
+              path.replaceWith(newCall);
               modified = true;
             }
           }
@@ -134,8 +171,12 @@ function fetchInstrumentPlugin() {
         if (!modified) {
           return null;
         }
-        const importStatement = hasImport ? "" : `import { __devFetch } from 'nuxt-devtools-observatory/runtime/fetch-registry';
-`;
+        const importNames = [
+          needsFetchCallHelper && !hasFetchCallImport ? "__devFetchCall" : "",
+          needsFetchHandlerHelper && !hasFetchHandlerImport ? "__devFetchHandler" : ""
+        ].filter(Boolean);
+        const importStatement = importNames.length ? `import { ${importNames.join(", ")} } from 'nuxt-devtools-observatory/runtime/fetch-registry';
+` : "";
         const output = generate$2(ast, { retainLines: true }, scriptCode);
         let finalCode;
         if (isVue) {
@@ -505,10 +546,7 @@ const module$1 = defineNuxtModule({
     }
     addPlugin(resolver.resolve("./runtime/plugin"));
     if (options.fetchDashboard) {
-      nuxt.hook("nitro:config", (nitroConfig) => {
-        nitroConfig.plugins = nitroConfig.plugins || [];
-        nitroConfig.plugins.push(resolver.resolve("./nitro/fetch-capture"));
-      });
+      addServerPlugin(resolver.resolve("./runtime/nitro/fetch-capture"));
     }
     const CLIENT_PORT = 4949;
     const clientOrigin = `http://localhost:${CLIENT_PORT}`;

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

@@ -27,6 +27,11 @@ interface FetchOptions {
     }) => void;
     [key: string]: unknown;
 }
+interface FetchMeta {
+    key: string;
+    file: string;
+    line: number;
+}
 /**
  * Sets up the fetch registry, which tracks all fetch requests and their
  * associated metadata (e.g. duration, size, origin).
@@ -69,9 +74,6 @@ export declare function setupFetchRegistry(): {
         readonly line?: number | undefined;
     }>>>;
 };
-export declare function __devFetch(originalFn: (url: string, opts: FetchOptions) => Promise<unknown>, url: string, opts: FetchOptions, meta: {
-    key: string;
-    file: string;
-    line: number;
-}): Promise<unknown>;
+export declare function __devFetchHandler(handler: (...args: unknown[]) => unknown, key: unknown, meta: FetchMeta): (...args: unknown[]) => Promise<unknown>;
+export declare function __devFetchCall(originalFn: (url: string, opts: FetchOptions) => Promise<unknown>, url: string, opts: FetchOptions, meta: FetchMeta): Promise<unknown>;
 export {};

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

@@ -30,7 +30,49 @@ export function setupFetchRegistry() {
   }
   return { register, update, getAll, clear, entries: readonly(entries) };
 }
-export function __devFetch(originalFn, url, opts, meta) {
+export function __devFetchHandler(handler, key, meta) {
+  if (!import.meta.dev || !import.meta.client) {
+    return (...args) => Promise.resolve(handler(...args));
+  }
+  const registry = window.__observatory__?.fetch;
+  if (!registry) {
+    return (...args) => Promise.resolve(handler(...args));
+  }
+  const normalizedKey = typeof key === "string" ? key : "useAsyncData";
+  return (...args) => {
+    const id = `${normalizedKey}::${Date.now()}`;
+    const startTime = performance.now();
+    registry.register({
+      id,
+      key: normalizedKey,
+      url: normalizedKey,
+      status: "pending",
+      origin: "csr",
+      startTime,
+      cached: false,
+      file: meta.file,
+      line: meta.line
+    });
+    return Promise.resolve(handler(...args)).then((result) => {
+      registry.update(id, {
+        status: "ok",
+        endTime: performance.now(),
+        ms: Math.round(performance.now() - startTime),
+        payload: result
+      });
+      return result;
+    }).catch((error) => {
+      registry.update(id, {
+        status: "error",
+        endTime: performance.now(),
+        ms: Math.round(performance.now() - startTime),
+        error
+      });
+      throw error;
+    });
+  };
+}
+export function __devFetchCall(originalFn, url, opts, meta) {
   if (!import.meta.dev || !import.meta.client) {
     return originalFn(url, opts);
   }

package/dist/runtime/nitro/fetch-capture.d.ts

@@ -0,0 +1,8 @@
+import type { H3Event } from 'h3';
+interface NitroAppLike {
+    hooks: {
+        hook: (name: 'request' | 'afterResponse', handler: (event: H3Event) => void) => void;
+    };
+}
+export default function fetchCapturePlugin(nitroApp: NitroAppLike): void;
+export {};

package/dist/runtime/nitro/fetch-capture.js

@@ -0,0 +1,14 @@
+import { setResponseHeader } from "h3";
+export default function fetchCapturePlugin(nitroApp) {
+  nitroApp.hooks.hook("request", (event) => {
+    ;
+    event.__ssrFetchStart = performance.now();
+  });
+  nitroApp.hooks.hook("afterResponse", (event) => {
+    const start = event.__ssrFetchStart;
+    if (start) {
+      const ms = Math.round(performance.now() - start);
+      setResponseHeader(event, "x-observatory-ssr-ms", String(ms));
+    }
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-devtools-observatory",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "type": "module",
     "main": "./dist/module.mjs",
@@ -27,6 +27,7 @@
         "dev": "nuxi dev playground",
         "build:client": "vite build --config client/vite.config.ts",
         "build": "npm run build:client && nuxt-module-build build",
+        "prepack": "npm run build",
         "lint": "eslint .",
         "format": "prettier --write '**/*.{ts,vue,js,json}' --ignore-path .gitignore && stylelint '**/*.{css,vue}' --ignore-pattern '.nuxt/**' --ignore-pattern '.output/**' --ignore-pattern 'coverage/**' --fix && eslint --fix '**/*.{ts,vue,js}' --ignore-pattern 'coverage/**'",
         "typecheck": "vue-tsc --noEmit",