nuxt-devtools-observatory 0.1.0

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

@@ -0,0 +1,125 @@
+import { ref, h, defineComponent, getCurrentInstance, onUnmounted, Transition as VueTransition } from "vue";
+export function setupTransitionRegistry() {
+  const entries = ref(/* @__PURE__ */ new Map());
+  function register(entry) {
+    entries.value.set(entry.id, entry);
+    emit("transition:register", entry);
+  }
+  function update(id, patch) {
+    const existing = entries.value.get(id);
+    if (!existing) {
+      return;
+    }
+    const updated = { ...existing, ...patch };
+    if (patch.endTime !== void 0) {
+      updated.durationMs = Math.round((patch.endTime - existing.startTime) * 10) / 10;
+    }
+    entries.value.set(id, updated);
+    emit("transition:update", updated);
+  }
+  function getAll() {
+    return [...entries.value.values()].map((e) => ({ ...e }));
+  }
+  function emit(event, data) {
+    if (!import.meta.client) {
+      return;
+    }
+    const channel = window.__nuxt_devtools__?.channel;
+    channel?.send(event, data);
+  }
+  return { register, update, getAll };
+}
+function mergeHook(original, ours) {
+  return (el) => {
+    ours(el);
+    original?.(el);
+  };
+}
+export function createTrackedTransition(registry) {
+  return defineComponent({
+    name: "Transition",
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      const instance = getCurrentInstance();
+      const parent = instance?.parent;
+      const parentComponent = parent?.type?.__name ?? parent?.type?.name ?? "unknown";
+      let enterEntryId = null;
+      let leaveEntryId = null;
+      onUnmounted(() => {
+        if (enterEntryId) {
+          registry.update(enterEntryId, { phase: "interrupted", endTime: performance.now() });
+          enterEntryId = null;
+        }
+        if (leaveEntryId) {
+          registry.update(leaveEntryId, { phase: "interrupted", endTime: performance.now() });
+          leaveEntryId = null;
+        }
+      });
+      return () => {
+        const transitionName = String(attrs.name ?? "default");
+        const isAppear = Boolean(attrs.appear);
+        const mode = typeof attrs.mode === "string" ? attrs.mode : void 0;
+        const hookedAttrs = {
+          ...attrs,
+          onBeforeEnter: mergeHook(attrs.onBeforeEnter, () => {
+            const now = performance.now();
+            const id = `${transitionName}::enter::${now}`;
+            enterEntryId = id;
+            registry.register({
+              id,
+              transitionName,
+              parentComponent,
+              direction: "enter",
+              phase: "entering",
+              startTime: now,
+              cancelled: false,
+              appear: isAppear,
+              mode
+            });
+          }),
+          onAfterEnter: mergeHook(attrs.onAfterEnter, () => {
+            if (enterEntryId) {
+              registry.update(enterEntryId, { phase: "entered", endTime: performance.now() });
+              enterEntryId = null;
+            }
+          }),
+          onEnterCancelled: mergeHook(attrs.onEnterCancelled, () => {
+            if (enterEntryId) {
+              registry.update(enterEntryId, { phase: "enter-cancelled", cancelled: true, endTime: performance.now() });
+              enterEntryId = null;
+            }
+          }),
+          onBeforeLeave: mergeHook(attrs.onBeforeLeave, () => {
+            const now = performance.now();
+            const id = `${transitionName}::leave::${now}`;
+            leaveEntryId = id;
+            registry.register({
+              id,
+              transitionName,
+              parentComponent,
+              direction: "leave",
+              phase: "leaving",
+              startTime: now,
+              cancelled: false,
+              appear: false,
+              mode
+            });
+          }),
+          onAfterLeave: mergeHook(attrs.onAfterLeave, () => {
+            if (leaveEntryId) {
+              registry.update(leaveEntryId, { phase: "left", endTime: performance.now() });
+              leaveEntryId = null;
+            }
+          }),
+          onLeaveCancelled: mergeHook(attrs.onLeaveCancelled, () => {
+            if (leaveEntryId) {
+              registry.update(leaveEntryId, { phase: "leave-cancelled", cancelled: true, endTime: performance.now() });
+              leaveEntryId = null;
+            }
+          })
+        };
+        return h(VueTransition, hookedAttrs, slots);
+      };
+    }
+  });
+}

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,66 @@
+import { defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from "#app";
+import { setupFetchRegistry } from "./composables/fetch-registry.js";
+import { setupProvideInjectRegistry } from "./composables/provide-inject-registry.js";
+import { setupComposableRegistry } from "./composables/composable-registry.js";
+import { setupRenderRegistry } from "./composables/render-registry.js";
+import { setupTransitionRegistry } from "./composables/transition-registry.js";
+export default defineNuxtPlugin(() => {
+  if (!import.meta.dev) {
+    return;
+  }
+  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, config.heatmapThreshold);
+  const transitionRegistry = setupTransitionRegistry();
+  if (import.meta.client) {
+    ;
+    window.__observatory__ = {
+      fetch: fetchRegistry,
+      provideInject: provideInjectRegistry,
+      composable: composableRegistry,
+      render: renderRegistry,
+      transition: transitionRegistry
+    };
+    window.addEventListener("message", (event) => {
+      if (event.data?.type !== "observatory:request") {
+        return;
+      }
+      const source = event.source;
+      source?.postMessage(
+        {
+          type: "observatory:snapshot",
+          data: {
+            transitions: transitionRegistry.getAll()
+          }
+        },
+        "*"
+      );
+    });
+  }
+  nuxtApp.hook("app:mounted", () => {
+    broadcastAll();
+  });
+  function broadcastAll() {
+    if (!import.meta.client) {
+      return;
+    }
+    const channel = getDevtoolsChannel();
+    if (!channel) {
+      return;
+    }
+    channel.send("observatory:snapshot", {
+      fetch: fetchRegistry.getAll(),
+      provideInject: provideInjectRegistry.getAll(),
+      composables: composableRegistry.getAll(),
+      renders: renderRegistry.getAll(),
+      transitions: transitionRegistry.getAll()
+    });
+  }
+  function getDevtoolsChannel() {
+    return window.__nuxt_devtools__?.channel ?? null;
+  }
+});

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,89 @@
+{
+    "name": "nuxt-devtools-observatory",
+    "version": "0.1.0",
+    "description": "Vue/Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
+    "type": "module",
+    "main": "./dist/module.mjs",
+    "module": "./dist/module.mjs",
+    "exports": {
+        ".": {
+            "import": "./dist/module.mjs"
+        },
+        "./runtime/composable-registry": {
+            "import": "./dist/runtime/composables/composable-registry.js"
+        },
+        "./runtime/provide-inject-registry": {
+            "import": "./dist/runtime/composables/provide-inject-registry.js"
+        },
+        "./runtime/fetch-registry": {
+            "import": "./dist/runtime/composables/fetch-registry.js"
+        }
+    },
+    "files": [
+        "dist",
+        "client"
+    ],
+    "scripts": {
+        "dev": "nuxi dev playground",
+        "build:client": "vite build --config client/vite.config.ts",
+        "build": "npm run build:client && nuxt-module-build 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",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "test:coverage": "vitest run --coverage"
+    },
+    "dependencies": {
+        "@babel/generator": "^7.29.1",
+        "@babel/parser": "^7.29.0",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@nuxt/kit": "^3.0.0"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.39.2",
+        "@nuxt/eslint": "^1.13.0",
+        "@nuxt/kit": "^4.0.0",
+        "@nuxt/module-builder": "^1.0.2",
+        "@nuxt/schema": "^4.0.0",
+        "@types/babel__generator": "^7.27.0",
+        "@types/babel__traverse": "^7.28.0",
+        "@types/node": "^25.5.0",
+        "@vitejs/plugin-vue": "^6.0.0",
+        "@vitest/coverage-v8": "^4.1.0",
+        "eslint": "^9.39.2",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-jsdoc": "^62.5.0",
+        "eslint-plugin-jsonc": "^2.21.0",
+        "eslint-plugin-regexp": "^3.0.0",
+        "eslint-plugin-vue": "^10.7.0",
+        "globals": "^17.3.0",
+        "happy-dom": "^20.8.4",
+        "nuxt": "^3.0.0",
+        "postcss-html": "^1.8.1",
+        "prettier": "^3.8.1",
+        "stylelint": "^17.4.0",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-config-standard-vue": "^1.0.0",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.54.0",
+        "unbuild": "^3.6.1",
+        "vite": "^6.4.1",
+        "vitest": "^4.1.0",
+        "vue": "^3.5.30",
+        "vue-eslint-parser": "^10.2.0"
+    },
+    "keywords": [
+        "nuxt",
+        "devtools",
+        "vue",
+        "performance",
+        "debugging"
+    ],
+    "pnpm": {
+        "patchedDependencies": {
+            "unimport@6.0.1": "patches/unimport@6.0.1.patch"
+        }
+    }
+}