nuxt-devtools-observatory 0.1.0

package/dist/module.mjs

@@ -0,0 +1,562 @@
+import { defineNuxtModule, createResolver, addVitePlugin, addPlugin } from '@nuxt/kit';
+import { parse } from '@babel/parser';
+import _traverse from '@babel/traverse';
+import _generate from '@babel/generator';
+import * as t from '@babel/types';
+
+const traverse$2 = _traverse.default ?? _traverse;
+const generate$2 = _generate.default ?? _generate;
+function extractScriptBlock$2(code) {
+  const openTagRE = /<script(\s[^>]*)?>/i;
+  const openMatch = openTagRE.exec(code);
+  if (!openMatch) {
+    return null;
+  }
+  const start = openMatch.index + openMatch[0].length;
+  const end = code.indexOf("<\/script>", start);
+  if (end === -1) {
+    return null;
+  }
+  return { content: code.slice(start, end), start, end };
+}
+const FETCH_FNS = /* @__PURE__ */ new Set(["useFetch", "useAsyncData", "useLazyFetch", "useLazyAsyncData"]);
+function fetchInstrumentPlugin() {
+  return {
+    name: "vite-plugin-observatory-fetch",
+    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$2(code);
+        if (!block) {
+          return null;
+        }
+        scriptCode = block.content;
+        scriptStart = block.start;
+      }
+      if (![...FETCH_FNS].some((fn) => scriptCode.includes(fn))) {
+        return;
+      }
+      try {
+        const ast = parse(scriptCode, {
+          sourceType: "module",
+          plugins: ["typescript"]
+        });
+        let modified = false;
+        const hasImport = scriptCode.includes("__devFetch");
+        traverse$2(ast, {
+          CallExpression(path) {
+            const callee = path.node.callee;
+            if (!t.isIdentifier(callee)) {
+              return;
+            }
+            if (!FETCH_FNS.has(callee.name)) {
+              return;
+            }
+            if (path.parent && t.isCallExpression(path.parent) && t.isIdentifier(path.parent.callee) && path.parent.callee.name === "__devFetch") {
+              return;
+            }
+            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;
+              } else {
+                if (t.isStringLiteral(urlArg)) {
+                  key = urlArg.value.replace(/[^a-z0-9]/gi, "-").replace(/^-+|-+$/g, "");
+                }
+              }
+            }
+            const loc = path.node.loc;
+            const meta = t.objectExpression([
+              t.objectProperty(t.identifier("key"), t.stringLiteral(key)),
+              t.objectProperty(t.identifier("file"), t.stringLiteral(id.split("/").pop() ?? id)),
+              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 (!modified) {
+          return null;
+        }
+        const importStatement = hasImport ? "" : `import { __devFetch } from 'nuxt-devtools-observatory/runtime/fetch-registry';
+`;
+        const output = generate$2(ast, { retainLines: true }, scriptCode);
+        if (isVue) {
+          const newCode = code.slice(0, scriptStart) + importStatement + output.code + code.slice(scriptStart + scriptCode.length);
+          return { code: newCode };
+        }
+        return {
+          code: importStatement + output.code,
+          map: output.map
+        };
+      } catch (err) {
+        console.warn("[observatory] fetch transform error:", err);
+        return null;
+      }
+    }
+  };
+}
+
+const traverse$1 = _traverse.default ?? _traverse;
+const generate$1 = _generate.default ?? _generate;
+function extractScriptBlock$1(code) {
+  const openTagRE = /<script(\s[^>]*)?>/i;
+  const openMatch = openTagRE.exec(code);
+  if (!openMatch) {
+    return null;
+  }
+  const start = openMatch.index + openMatch[0].length;
+  const end = code.indexOf("<\/script>", start);
+  if (end === -1) {
+    return null;
+  }
+  return { content: code.slice(start, end), start, end };
+}
+function provideInjectPlugin() {
+  return {
+    name: "vite-plugin-observatory-provide-inject",
+    enforce: "pre",
+    transform(code, id) {
+      const isVue = id.endsWith(".vue");
+      if (!isVue && !id.endsWith(".ts")) {
+        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$1(code);
+        if (!block) {
+          return null;
+        }
+        scriptCode = block.content;
+        scriptStart = block.start;
+      }
+      if (!scriptCode.includes("provide(") && !scriptCode.includes("inject(")) {
+        return;
+      }
+      try {
+        const ast = parse(scriptCode, {
+          sourceType: "module",
+          plugins: ["typescript"]
+        });
+        let modified = false;
+        traverse$1(ast, {
+          CallExpression(path) {
+            const callee = path.node.callee;
+            if (!t.isIdentifier(callee)) {
+              return;
+            }
+            const name = callee.name;
+            if (name !== "provide" && name !== "inject") {
+              return;
+            }
+            if (path.parent && t.isCallExpression(path.parent) && t.isIdentifier(path.parent.callee) && (path.parent.callee.name === "__devProvide" || path.parent.callee.name === "__devInject")) {
+              return;
+            }
+            const args = path.node.arguments;
+            const loc = path.node.loc;
+            const meta = t.objectExpression([
+              t.objectProperty(t.identifier("file"), t.stringLiteral(id.split("/").pop() ?? id)),
+              t.objectProperty(t.identifier("line"), t.numericLiteral(loc?.start.line ?? 0))
+            ]);
+            if (name === "provide") {
+              path.replaceWith(t.callExpression(t.identifier("__devProvide"), [...args, meta]));
+            } else {
+              const injectArgs = args.length >= 2 ? args : [...args, t.identifier("undefined")];
+              path.replaceWith(t.callExpression(t.identifier("__devInject"), [...injectArgs, meta]));
+            }
+            modified = true;
+          }
+        });
+        if (!modified) {
+          return null;
+        }
+        const importLine = `import { __devProvide, __devInject } from 'nuxt-devtools-observatory/runtime/provide-inject-registry';
+`;
+        const output = generate$1(ast, { retainLines: true }, scriptCode);
+        if (isVue) {
+          const newCode = code.slice(0, scriptStart) + importLine + output.code + code.slice(scriptStart + scriptCode.length);
+          return { code: newCode };
+        }
+        return { code: importLine + output.code, map: output.map };
+      } catch (err) {
+        console.warn("[observatory] provide/inject transform error:", err);
+        return null;
+      }
+    }
+  };
+}
+
+const traverse = _traverse.default ?? _traverse;
+const generate = _generate.default ?? _generate;
+function extractScriptBlock(code) {
+  const openTagRE = /<script(\s[^>]*)?>/i;
+  const openMatch = openTagRE.exec(code);
+  if (!openMatch) {
+    return null;
+  }
+  const start = openMatch.index + openMatch[0].length;
+  const end = code.indexOf("<\/script>", start);
+  if (end === -1) {
+    return null;
+  }
+  return { content: code.slice(start, end), start, end };
+}
+const COMPOSABLE_RE = /\buse[A-Z]/;
+const SKIP_LIST = /* @__PURE__ */ new Set([
+  "useFetch",
+  "useAsyncData",
+  "useLazyFetch",
+  "useLazyAsyncData",
+  "useState",
+  "useRoute",
+  "useRouter",
+  "useNuxtApp",
+  "useRuntimeConfig",
+  "useHead",
+  "useSeoMeta",
+  "useServerSeoMeta",
+  "useNuxtData",
+  "useError",
+  "useRequestHeaders"
+]);
+function composableTrackerPlugin() {
+  return {
+    name: "vite-plugin-observatory-composables",
+    enforce: "pre",
+    transform(code, id) {
+      const isVue = id.endsWith(".vue");
+      if (!isVue && !id.endsWith(".ts")) {
+        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;
+            }
+            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 meta = t.objectExpression([
+              t.objectProperty(t.identifier("file"), t.stringLiteral(id.split("/").pop() ?? id)),
+              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);
+        if (isVue) {
+          const newCode = code.slice(0, scriptStart) + importLine + output.code + code.slice(scriptStart + scriptCode.length);
+          return { code: newCode };
+        }
+        return { code: importLine + output.code, map: output.map };
+      } catch (err) {
+        console.warn("[observatory] composable transform error:", err);
+        return null;
+      }
+    }
+  };
+}
+
+const VIRTUAL_ID = "\0obs:vue-proxy";
+const PROXY_MODULE = `
+import {
+  defineComponent as _obsDefineComponent,
+  h as _obsH,
+  getCurrentInstance as _obsGetCurrentInstance,
+  onUnmounted as _obsOnUnmounted,
+  Transition as _ObsRealTransition
+} from 'vue'
+
+function _obsRegistry() {
+  if (typeof window === 'undefined') return undefined
+  return window.__observatory__ && window.__observatory__.transition
+}
+
+function _obsMergeHook(original, fn) {
+  return function(el) { fn(el); if (original) original(el) }
+}
+
+const _ObservedTransition = _obsDefineComponent({
+  name: 'Transition',
+  inheritAttrs: false,
+  setup(_, ctx) {
+    const inst = _obsGetCurrentInstance()
+    const par = inst && inst.parent
+    const parentComponent = (par && par.type && (par.type.__name || par.type.name)) || 'unknown'
+    let enterEntryId = null
+    let leaveEntryId = null
+    _obsOnUnmounted(function() {
+      const r = _obsRegistry()
+      if (!r) return
+      if (enterEntryId) { r.update(enterEntryId, { phase: 'interrupted', endTime: performance.now() }); enterEntryId = null }
+      if (leaveEntryId) { r.update(leaveEntryId, { phase: 'interrupted', endTime: performance.now() }); leaveEntryId = null }
+    })
+    return function() {
+      const attrs = ctx.attrs
+      const slots = ctx.slots
+      const r = _obsRegistry()
+      if (!r) return _obsH(_ObsRealTransition, attrs, slots)
+      const transitionName = String(attrs.name != null ? attrs.name : 'default')
+      const isAppear = Boolean(attrs.appear)
+      const mode = typeof attrs.mode === 'string' ? attrs.mode : undefined
+      const hookedAttrs = Object.assign({}, attrs, {
+        onBeforeEnter: _obsMergeHook(attrs.onBeforeEnter, function() {
+          const t = performance.now()
+          const id = transitionName + '::enter::' + t
+          enterEntryId = id
+          r.register({ id, transitionName, parentComponent, direction: 'enter', phase: 'entering', startTime: t, cancelled: false, appear: isAppear, mode })
+        }),
+        onAfterEnter: _obsMergeHook(attrs.onAfterEnter, function() {
+          if (enterEntryId) { r.update(enterEntryId, { phase: 'entered', endTime: performance.now() }); enterEntryId = null }
+        }),
+        onEnterCancelled: _obsMergeHook(attrs.onEnterCancelled, function() {
+          if (enterEntryId) { r.update(enterEntryId, { phase: 'enter-cancelled', cancelled: true, endTime: performance.now() }); enterEntryId = null }
+        }),
+        onBeforeLeave: _obsMergeHook(attrs.onBeforeLeave, function() {
+          const t = performance.now()
+          const id = transitionName + '::leave::' + t
+          leaveEntryId = id
+          r.register({ id, transitionName, parentComponent, direction: 'leave', phase: 'leaving', startTime: t, cancelled: false, appear: false, mode })
+        }),
+        onAfterLeave: _obsMergeHook(attrs.onAfterLeave, function() {
+          if (leaveEntryId) { r.update(leaveEntryId, { phase: 'left', endTime: performance.now() }); leaveEntryId = null }
+        }),
+        onLeaveCancelled: _obsMergeHook(attrs.onLeaveCancelled, function() {
+          if (leaveEntryId) { r.update(leaveEntryId, { phase: 'leave-cancelled', cancelled: true, endTime: performance.now() }); leaveEntryId = null }
+        }),
+      })
+      return _obsH(_ObsRealTransition, hookedAttrs, slots)
+    }
+  }
+})
+
+export * from 'vue'
+export { _ObservedTransition as Transition }
+`.trim();
+function transitionTrackerPlugin() {
+  return {
+    name: "observatory:transition-tracker",
+    enforce: "pre",
+    resolveId(id, importer) {
+      if (id !== "vue") {
+        return;
+      }
+      if (!importer) {
+        return;
+      }
+      if (importer.includes("node_modules")) {
+        return;
+      }
+      if (importer.includes("obs:vue-proxy")) {
+        return;
+      }
+      if (importer.includes("/src/runtime/") || importer.includes("/dist/runtime/")) {
+        return;
+      }
+      return VIRTUAL_ID;
+    },
+    load(id) {
+      if (id !== VIRTUAL_ID && id !== "obs:vue-proxy") {
+        return null;
+      }
+      return PROXY_MODULE;
+    }
+  };
+}
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "nuxt-devtools-observatory",
+    configKey: "observatory",
+    compatibility: { nuxt: "^3.0.0" }
+  },
+  defaults: {
+    fetchDashboard: true,
+    provideInjectGraph: true,
+    composableTracker: true,
+    renderHeatmap: true,
+    transitionTracker: true,
+    heatmapThreshold: 5
+  },
+  setup(options, nuxt) {
+    if (!nuxt.options.dev) {
+      return;
+    }
+    const resolver = createResolver(import.meta.url);
+    nuxt.hook("vite:extendConfig", (config) => {
+      const alias = config.resolve?.alias;
+      const aliases = Array.isArray(alias) ? {} : alias ?? {};
+      aliases["nuxt-devtools-observatory/runtime/composable-registry"] = resolver.resolve("./runtime/composables/composable-registry");
+      aliases["nuxt-devtools-observatory/runtime/provide-inject-registry"] = resolver.resolve(
+        "./runtime/composables/provide-inject-registry"
+      );
+      aliases["nuxt-devtools-observatory/runtime/fetch-registry"] = resolver.resolve("./runtime/composables/fetch-registry");
+      config.resolve = { ...config.resolve, alias: aliases };
+    });
+    if (options.fetchDashboard) {
+      addVitePlugin(fetchInstrumentPlugin());
+    }
+    if (options.provideInjectGraph) {
+      addVitePlugin(provideInjectPlugin());
+    }
+    if (options.composableTracker) {
+      addVitePlugin(composableTrackerPlugin());
+    }
+    if (options.transitionTracker) {
+      addVitePlugin(transitionTrackerPlugin());
+    }
+    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"));
+      });
+    }
+    const CLIENT_PORT = 4949;
+    nuxt.hook("vite:serverCreated", async (_viteServer, env) => {
+      if (!env.isClient) {
+        return;
+      }
+      const { createServer } = await import('vite');
+      const { default: vue } = await import('@vitejs/plugin-vue');
+      const inner = await createServer({
+        root: resolver.resolve("../client"),
+        base: "/",
+        server: { port: CLIENT_PORT, strictPort: false, cors: true },
+        appType: "spa",
+        configFile: false,
+        plugins: [vue()],
+        logLevel: "warn"
+      });
+      await inner.listen();
+      nuxt.hook("close", () => inner.close());
+    });
+    const base = `http://localhost:${CLIENT_PORT}`;
+    nuxt.hook("devtools:customTabs", (tabs) => {
+      if (options.fetchDashboard) {
+        tabs.push({
+          name: "observatory-fetch",
+          title: "useFetch",
+          icon: "carbon:radio-button",
+          view: { type: "iframe", src: `${base}/fetch` }
+        });
+      }
+      if (options.provideInjectGraph) {
+        tabs.push({
+          name: "observatory-provide",
+          title: "provide/inject",
+          icon: "carbon:branch",
+          view: { type: "iframe", src: `${base}/provide` }
+        });
+      }
+      if (options.composableTracker) {
+        tabs.push({
+          name: "observatory-composables",
+          title: "Composables",
+          icon: "carbon:function",
+          view: { type: "iframe", src: `${base}/composables` }
+        });
+      }
+      if (options.renderHeatmap) {
+        tabs.push({
+          name: "observatory-heatmap",
+          title: "Heatmap",
+          icon: "carbon:heat-map",
+          view: { type: "iframe", src: `${base}/heatmap` }
+        });
+      }
+      if (options.transitionTracker) {
+        tabs.push({
+          name: "observatory-transitions",
+          title: "Transitions",
+          icon: "carbon:movement",
+          view: { type: "iframe", src: `${base}/transitions` }
+        });
+      }
+    });
+    nuxt.options.runtimeConfig.public.observatory = {
+      heatmapThreshold: options.heatmapThreshold ?? 5
+    };
+  }
+});
+
+export { module$1 as default };

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

@@ -0,0 +1,40 @@
+export interface ComposableEntry {
+    id: string;
+    name: string;
+    componentFile: string;
+    componentUid: number;
+    status: 'mounted' | 'unmounted';
+    leak: boolean;
+    leakReason?: string;
+    refs: Record<string, {
+        type: 'ref' | 'computed' | 'reactive';
+        value: unknown;
+    }>;
+    watcherCount: number;
+    intervalCount: number;
+    lifecycle: {
+        hasOnMounted: boolean;
+        hasOnUnmounted: boolean;
+        watchersCleaned: boolean;
+        intervalsCleaned: boolean;
+    };
+    file: string;
+    line: number;
+}
+/**
+ * Registers a new composable entry, updates an existing one, or retrieves all entries.
+ * @remarks The returned object exposes the following methods:
+ * - `register`: Registers a new composable entry.
+ * - `update`: Updates an existing composable entry.
+ * - `getAll`: Retrieves all composable entries.
+ * @returns {{ register: (entry: ComposableEntry) => void, update: (id: string, patch: Partial<ComposableEntry>) => void, getAll: () => ComposableEntry[] }} An object with `register`, `update`, and `getAll` methods.
+ */
+export declare function setupComposableRegistry(): {
+    register: (entry: ComposableEntry) => void;
+    update: (id: string, patch: Partial<ComposableEntry>) => void;
+    getAll: () => ComposableEntry[];
+};
+export declare function __trackComposable<T>(name: string, callFn: () => T, meta: {
+    file: string;
+    line: number;
+}): T;