@devlens/vue 1.0.0

package/README.md

@@ -0,0 +1,76 @@
+# @devlens/vue
+
+DevLens Vue 3 integration -- automatic runtime error detection for Vue applications.
+
+## Installation
+
+```bash
+npm install @devlens/core @devlens/vue
+```
+
+**Peer dependencies:** Vue >= 3.3.0
+
+## Quick Start
+
+```ts
+import { createApp } from 'vue';
+import { createDevLensPlugin } from '@devlens/vue';
+
+const app = createApp(App);
+
+app.use(createDevLensPlugin({
+  enabled: true,
+  minSeverity: 'warn',
+}));
+
+app.mount('#app');
+```
+
+The plugin automatically installs `app.config.errorHandler` and `app.config.warnHandler` to capture Vue errors and warnings.
+
+## Guarded Ref
+
+Reactive ref with null/undefined detection:
+
+```ts
+import { useGuardedRef } from '@devlens/vue';
+
+const user = useGuardedRef(initialUser, 'UserProfile');
+
+// Accessing null/undefined properties on user.value triggers detection
+```
+
+## Watch Data
+
+Monitor data for null/undefined values:
+
+```ts
+import { useGuardedWatch } from '@devlens/vue';
+
+useGuardedWatch({ user, posts, settings }, 'Dashboard');
+
+// [RENDER] DevLens [WARN] render-data: "posts" is undefined in Dashboard
+```
+
+## API Reference
+
+| Export | Description |
+|--------|-------------|
+| `createDevLensPlugin(options?)` | Vue 3 plugin with auto error/warn handlers |
+| `useDevLens()` | Inject the engine instance |
+| `useGuardedRef(initialValue, label?)` | Reactive ref with null/undefined detection |
+| `useGuardedWatch(data, label?)` | Watch data for null/undefined |
+
+## Details
+
+- ~5KB ESM bundle
+- Auto error handler: `app.config.errorHandler`
+- Auto warn handler: `app.config.warnHandler`
+- Network interceptor and global catcher auto-installed
+- Dual ESM + CJS output
+- Full TypeScript declarations
+- Production-safe -- auto-disabled in production
+
+## License
+
+MIT -- [github.com/crashsense/devlens](https://github.com/crashsense/devlens)

package/dist/index.d.mts

@@ -0,0 +1,18 @@
+import { InjectionKey, App, Ref } from 'vue';
+import { DevLensEngine, DevLensConfig } from '@devlens/core';
+export { DetectedIssue, DevLensConfig, IssueCategory, Severity } from '@devlens/core';
+
+declare const DevLensKey: InjectionKey<DevLensEngine>;
+interface DevLensPluginOptions extends DevLensConfig {
+}
+declare function createDevLensPlugin(options?: DevLensPluginOptions): {
+    install(app: App): void;
+    uninstall(): void;
+    getEngine(): DevLensEngine | null;
+};
+
+declare function useDevLens(): DevLensEngine | null;
+declare function useGuardedRef<T extends object>(initialValue: T, label?: string): Ref<T>;
+declare function useGuardedWatch(data: Record<string, unknown>, label?: string): void;
+
+export { DevLensKey, type DevLensPluginOptions, createDevLensPlugin, useDevLens, useGuardedRef, useGuardedWatch };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { InjectionKey, App, Ref } from 'vue';
+import { DevLensEngine, DevLensConfig } from '@devlens/core';
+export { DetectedIssue, DevLensConfig, IssueCategory, Severity } from '@devlens/core';
+
+declare const DevLensKey: InjectionKey<DevLensEngine>;
+interface DevLensPluginOptions extends DevLensConfig {
+}
+declare function createDevLensPlugin(options?: DevLensPluginOptions): {
+    install(app: App): void;
+    uninstall(): void;
+    getEngine(): DevLensEngine | null;
+};
+
+declare function useDevLens(): DevLensEngine | null;
+declare function useGuardedRef<T extends object>(initialValue: T, label?: string): Ref<T>;
+declare function useGuardedWatch(data: Record<string, unknown>, label?: string): void;
+
+export { DevLensKey, type DevLensPluginOptions, createDevLensPlugin, useDevLens, useGuardedRef, useGuardedWatch };

package/dist/index.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var core = require('@devlens/core');
+var vue = require('vue');
+
+// src/plugin.ts
+var DevLensKey = /* @__PURE__ */ Symbol("devlens");
+function isProductionEnv() {
+  try {
+    return typeof process !== "undefined" && process.env?.NODE_ENV === "production";
+  } catch {
+    return false;
+  }
+}
+function createDevLensPlugin(options = {}) {
+  let engine = null;
+  const cleanups = [];
+  return {
+    install(app) {
+      if (options.enabled === false || isProductionEnv()) {
+        return;
+      }
+      engine = core.createDetectionEngine(options);
+      app.provide(DevLensKey, engine);
+      const networkConfig = options.modules?.network === false ? void 0 : options.modules?.network;
+      const catcherConfig = options.modules?.catcher === false ? void 0 : options.modules?.catcher;
+      if (networkConfig !== void 0 || options.modules?.network !== false) {
+        const network = core.createNetworkInterceptor(engine, networkConfig);
+        network.install();
+        cleanups.push(network);
+      }
+      if (catcherConfig !== void 0 || options.modules?.catcher !== false) {
+        const catcher = core.createGlobalCatcher(engine, catcherConfig);
+        catcher.install();
+        cleanups.push(catcher);
+      }
+      app.config.errorHandler = (err, instance, info) => {
+        if (!engine?.isEnabled()) return;
+        const error = err instanceof Error ? err : new Error(String(err));
+        const componentName = instance?.$options?.name ?? instance?.$options?.__name ?? "AnonymousComponent";
+        engine.report({
+          id: `unhandled-error:vue:${error.message}`,
+          timestamp: Date.now(),
+          severity: "error",
+          category: "unhandled-error",
+          message: `Vue error in ${componentName}: ${error.message}`,
+          details: {
+            component: componentName,
+            lifecycleHook: info
+          },
+          stack: error.stack,
+          source: `Vue:${componentName}`,
+          suggestion: `Error in ${info} of ${componentName} \u2014 check the component logic`
+        });
+      };
+      app.config.warnHandler = (msg, instance, trace) => {
+        if (!engine?.isEnabled()) return;
+        const componentName = instance?.$options?.name ?? instance?.$options?.__name ?? "AnonymousComponent";
+        engine.report({
+          id: `unhandled-error:vue-warn:${msg.slice(0, 80)}`,
+          timestamp: Date.now(),
+          severity: "warn",
+          category: "unhandled-error",
+          message: `Vue warning in ${componentName}: ${msg}`,
+          details: {
+            component: componentName,
+            trace
+          },
+          source: `Vue:${componentName}`,
+          suggestion: "Check the Vue warning above \u2014 it may indicate a potential issue"
+        });
+      };
+    },
+    uninstall() {
+      for (const cleanup of cleanups) {
+        cleanup.uninstall();
+      }
+      cleanups.length = 0;
+      engine = null;
+    },
+    getEngine() {
+      return engine;
+    }
+  };
+}
+function useDevLens() {
+  return vue.inject(DevLensKey, null);
+}
+function useGuardedRef(initialValue, label) {
+  const engine = useDevLens();
+  const source = vue.ref(initialValue);
+  if (!engine || !engine.isEnabled()) {
+    return source;
+  }
+  const guardian = core.createDataGuardian(engine);
+  const guarded = vue.ref(guardian.guard(source.value, label));
+  vue.watch(source, (newVal) => {
+    if (newVal === null || newVal === void 0 || typeof newVal !== "object") {
+      guarded.value = newVal;
+      return;
+    }
+    const freshGuardian = core.createDataGuardian(engine);
+    guarded.value = freshGuardian.guard(newVal, label);
+  }, { deep: true });
+  return guarded;
+}
+function useGuardedWatch(data, label) {
+  const engine = useDevLens();
+  if (!engine || !engine.isEnabled()) return;
+  const resolvedLabel = label ?? "useGuardedWatch";
+  const dataRef = vue.ref(data);
+  vue.watch(dataRef, (current) => {
+    for (const [key, value] of Object.entries(current)) {
+      if (value === null || value === void 0) {
+        const issue = {
+          id: `render-data:${resolvedLabel}:${key}`,
+          timestamp: Date.now(),
+          severity: "warn",
+          category: "render-data",
+          message: `"${key}" is ${value === null ? "null" : "undefined"} in ${resolvedLabel}`,
+          path: `${resolvedLabel}.${key}`,
+          foundValue: value,
+          expectedType: "non-nullish value",
+          source: resolvedLabel,
+          suggestion: `"${key}" is ${value === null ? "null" : "undefined"} \u2014 check data loading in ${resolvedLabel}`
+        };
+        engine.report(issue);
+      }
+    }
+  }, { immediate: true, deep: true });
+}
+
+exports.DevLensKey = DevLensKey;
+exports.createDevLensPlugin = createDevLensPlugin;
+exports.useDevLens = useDevLens;
+exports.useGuardedRef = useGuardedRef;
+exports.useGuardedWatch = useGuardedWatch;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin.ts","../src/composables.ts"],"names":["createDetectionEngine","createNetworkInterceptor","createGlobalCatcher","inject","ref","createDataGuardian","watch"],"mappings":"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","file":"index.js","sourcesContent":["import type { App, InjectionKey } from 'vue';\nimport type { DevLensConfig, DevLensEngine } from '@devlens/core';\nimport {\n  createDetectionEngine,\n  createNetworkInterceptor,\n  createGlobalCatcher,\n} from '@devlens/core';\n\nexport const DevLensKey: InjectionKey<DevLensEngine> = Symbol('devlens');\n\nfunction isProductionEnv(): boolean {\n  try {\n    return (\n      typeof process !== 'undefined' &&\n      process.env?.NODE_ENV === 'production'\n    );\n  } catch {\n    return false;\n  }\n}\n\nexport interface DevLensPluginOptions extends DevLensConfig {}\n\nexport function createDevLensPlugin(options: DevLensPluginOptions = {}) {\n  let engine: DevLensEngine | null = null;\n  const cleanups: Array<{ uninstall(): void }> = [];\n\n  return {\n    install(app: App): void {\n      if (options.enabled === false || isProductionEnv()) {\n        return;\n      }\n\n      engine = createDetectionEngine(options);\n      app.provide(DevLensKey, engine);\n\n      const networkConfig =\n        options.modules?.network === false ? undefined : options.modules?.network;\n      const catcherConfig =\n        options.modules?.catcher === false ? undefined : options.modules?.catcher;\n\n      if (networkConfig !== undefined || options.modules?.network !== false) {\n        const network = createNetworkInterceptor(engine, networkConfig);\n        network.install();\n        cleanups.push(network);\n      }\n\n      if (catcherConfig !== undefined || options.modules?.catcher !== false) {\n        const catcher = createGlobalCatcher(engine, catcherConfig);\n        catcher.install();\n        cleanups.push(catcher);\n      }\n\n      app.config.errorHandler = (err, instance, info) => {\n        if (!engine?.isEnabled()) return;\n\n        const error = err instanceof Error ? err : new Error(String(err));\n        const componentName =\n          (instance?.$options?.name) ??\n          (instance?.$options?.__name) ??\n          'AnonymousComponent';\n\n        engine.report({\n          id: `unhandled-error:vue:${error.message}`,\n          timestamp: Date.now(),\n          severity: 'error',\n          category: 'unhandled-error',\n          message: `Vue error in ${componentName}: ${error.message}`,\n          details: {\n            component: componentName,\n            lifecycleHook: info,\n          },\n          stack: error.stack,\n          source: `Vue:${componentName}`,\n          suggestion: `Error in ${info} of ${componentName} — check the component logic`,\n        });\n      };\n\n      app.config.warnHandler = (msg, instance, trace) => {\n        if (!engine?.isEnabled()) return;\n\n        const componentName =\n          (instance?.$options?.name) ??\n          (instance?.$options?.__name) ??\n          'AnonymousComponent';\n\n        engine.report({\n          id: `unhandled-error:vue-warn:${msg.slice(0, 80)}`,\n          timestamp: Date.now(),\n          severity: 'warn',\n          category: 'unhandled-error',\n          message: `Vue warning in ${componentName}: ${msg}`,\n          details: {\n            component: componentName,\n            trace,\n          },\n          source: `Vue:${componentName}`,\n          suggestion: 'Check the Vue warning above — it may indicate a potential issue',\n        });\n      };\n    },\n\n    uninstall(): void {\n      for (const cleanup of cleanups) {\n        cleanup.uninstall();\n      }\n      cleanups.length = 0;\n      engine = null;\n    },\n\n    getEngine(): DevLensEngine | null {\n      return engine;\n    },\n  };\n}\n","import { inject, ref, watch, type Ref } from 'vue';\nimport type { DevLensEngine, DetectedIssue } from '@devlens/core';\nimport { createDataGuardian } from '@devlens/core';\nimport { DevLensKey } from './plugin';\n\nexport function useDevLens(): DevLensEngine | null {\n  return inject(DevLensKey, null);\n}\n\nexport function useGuardedRef<T extends object>(\n  initialValue: T,\n  label?: string,\n): Ref<T> {\n  const engine = useDevLens();\n  const source = ref(initialValue) as Ref<T>;\n\n  if (!engine || !engine.isEnabled()) {\n    return source;\n  }\n\n  const guardian = createDataGuardian(engine);\n  const guarded = ref(guardian.guard(source.value, label)) as Ref<T>;\n\n  watch(source, (newVal) => {\n    if (newVal === null || newVal === undefined || typeof newVal !== 'object') {\n      guarded.value = newVal;\n      return;\n    }\n    const freshGuardian = createDataGuardian(engine);\n    guarded.value = freshGuardian.guard(newVal, label);\n  }, { deep: true });\n\n  return guarded;\n}\n\nexport function useGuardedWatch(\n  data: Record<string, unknown>,\n  label?: string,\n): void {\n  const engine = useDevLens();\n  if (!engine || !engine.isEnabled()) return;\n\n  const resolvedLabel = label ?? 'useGuardedWatch';\n\n  const dataRef = ref(data);\n\n  watch(dataRef, (current) => {\n    for (const [key, value] of Object.entries(current)) {\n      if (value === null || value === undefined) {\n        const issue: DetectedIssue = {\n          id: `render-data:${resolvedLabel}:${key}`,\n          timestamp: Date.now(),\n          severity: 'warn',\n          category: 'render-data',\n          message: `\"${key}\" is ${value === null ? 'null' : 'undefined'} in ${resolvedLabel}`,\n          path: `${resolvedLabel}.${key}`,\n          foundValue: value,\n          expectedType: 'non-nullish value',\n          source: resolvedLabel,\n          suggestion: `\"${key}\" is ${value === null ? 'null' : 'undefined'} — check data loading in ${resolvedLabel}`,\n        };\n        engine.report(issue);\n      }\n    }\n  }, { immediate: true, deep: true });\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,133 @@
+import { createDetectionEngine, createNetworkInterceptor, createGlobalCatcher, createDataGuardian } from '@devlens/core';
+import { inject, ref, watch } from 'vue';
+
+// src/plugin.ts
+var DevLensKey = /* @__PURE__ */ Symbol("devlens");
+function isProductionEnv() {
+  try {
+    return typeof process !== "undefined" && process.env?.NODE_ENV === "production";
+  } catch {
+    return false;
+  }
+}
+function createDevLensPlugin(options = {}) {
+  let engine = null;
+  const cleanups = [];
+  return {
+    install(app) {
+      if (options.enabled === false || isProductionEnv()) {
+        return;
+      }
+      engine = createDetectionEngine(options);
+      app.provide(DevLensKey, engine);
+      const networkConfig = options.modules?.network === false ? void 0 : options.modules?.network;
+      const catcherConfig = options.modules?.catcher === false ? void 0 : options.modules?.catcher;
+      if (networkConfig !== void 0 || options.modules?.network !== false) {
+        const network = createNetworkInterceptor(engine, networkConfig);
+        network.install();
+        cleanups.push(network);
+      }
+      if (catcherConfig !== void 0 || options.modules?.catcher !== false) {
+        const catcher = createGlobalCatcher(engine, catcherConfig);
+        catcher.install();
+        cleanups.push(catcher);
+      }
+      app.config.errorHandler = (err, instance, info) => {
+        if (!engine?.isEnabled()) return;
+        const error = err instanceof Error ? err : new Error(String(err));
+        const componentName = instance?.$options?.name ?? instance?.$options?.__name ?? "AnonymousComponent";
+        engine.report({
+          id: `unhandled-error:vue:${error.message}`,
+          timestamp: Date.now(),
+          severity: "error",
+          category: "unhandled-error",
+          message: `Vue error in ${componentName}: ${error.message}`,
+          details: {
+            component: componentName,
+            lifecycleHook: info
+          },
+          stack: error.stack,
+          source: `Vue:${componentName}`,
+          suggestion: `Error in ${info} of ${componentName} \u2014 check the component logic`
+        });
+      };
+      app.config.warnHandler = (msg, instance, trace) => {
+        if (!engine?.isEnabled()) return;
+        const componentName = instance?.$options?.name ?? instance?.$options?.__name ?? "AnonymousComponent";
+        engine.report({
+          id: `unhandled-error:vue-warn:${msg.slice(0, 80)}`,
+          timestamp: Date.now(),
+          severity: "warn",
+          category: "unhandled-error",
+          message: `Vue warning in ${componentName}: ${msg}`,
+          details: {
+            component: componentName,
+            trace
+          },
+          source: `Vue:${componentName}`,
+          suggestion: "Check the Vue warning above \u2014 it may indicate a potential issue"
+        });
+      };
+    },
+    uninstall() {
+      for (const cleanup of cleanups) {
+        cleanup.uninstall();
+      }
+      cleanups.length = 0;
+      engine = null;
+    },
+    getEngine() {
+      return engine;
+    }
+  };
+}
+function useDevLens() {
+  return inject(DevLensKey, null);
+}
+function useGuardedRef(initialValue, label) {
+  const engine = useDevLens();
+  const source = ref(initialValue);
+  if (!engine || !engine.isEnabled()) {
+    return source;
+  }
+  const guardian = createDataGuardian(engine);
+  const guarded = ref(guardian.guard(source.value, label));
+  watch(source, (newVal) => {
+    if (newVal === null || newVal === void 0 || typeof newVal !== "object") {
+      guarded.value = newVal;
+      return;
+    }
+    const freshGuardian = createDataGuardian(engine);
+    guarded.value = freshGuardian.guard(newVal, label);
+  }, { deep: true });
+  return guarded;
+}
+function useGuardedWatch(data, label) {
+  const engine = useDevLens();
+  if (!engine || !engine.isEnabled()) return;
+  const resolvedLabel = label ?? "useGuardedWatch";
+  const dataRef = ref(data);
+  watch(dataRef, (current) => {
+    for (const [key, value] of Object.entries(current)) {
+      if (value === null || value === void 0) {
+        const issue = {
+          id: `render-data:${resolvedLabel}:${key}`,
+          timestamp: Date.now(),
+          severity: "warn",
+          category: "render-data",
+          message: `"${key}" is ${value === null ? "null" : "undefined"} in ${resolvedLabel}`,
+          path: `${resolvedLabel}.${key}`,
+          foundValue: value,
+          expectedType: "non-nullish value",
+          source: resolvedLabel,
+          suggestion: `"${key}" is ${value === null ? "null" : "undefined"} \u2014 check data loading in ${resolvedLabel}`
+        };
+        engine.report(issue);
+      }
+    }
+  }, { immediate: true, deep: true });
+}
+
+export { DevLensKey, createDevLensPlugin, useDevLens, useGuardedRef, useGuardedWatch };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin.ts","../src/composables.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import type { App, InjectionKey } from 'vue';\nimport type { DevLensConfig, DevLensEngine } from '@devlens/core';\nimport {\n  createDetectionEngine,\n  createNetworkInterceptor,\n  createGlobalCatcher,\n} from '@devlens/core';\n\nexport const DevLensKey: InjectionKey<DevLensEngine> = Symbol('devlens');\n\nfunction isProductionEnv(): boolean {\n  try {\n    return (\n      typeof process !== 'undefined' &&\n      process.env?.NODE_ENV === 'production'\n    );\n  } catch {\n    return false;\n  }\n}\n\nexport interface DevLensPluginOptions extends DevLensConfig {}\n\nexport function createDevLensPlugin(options: DevLensPluginOptions = {}) {\n  let engine: DevLensEngine | null = null;\n  const cleanups: Array<{ uninstall(): void }> = [];\n\n  return {\n    install(app: App): void {\n      if (options.enabled === false || isProductionEnv()) {\n        return;\n      }\n\n      engine = createDetectionEngine(options);\n      app.provide(DevLensKey, engine);\n\n      const networkConfig =\n        options.modules?.network === false ? undefined : options.modules?.network;\n      const catcherConfig =\n        options.modules?.catcher === false ? undefined : options.modules?.catcher;\n\n      if (networkConfig !== undefined || options.modules?.network !== false) {\n        const network = createNetworkInterceptor(engine, networkConfig);\n        network.install();\n        cleanups.push(network);\n      }\n\n      if (catcherConfig !== undefined || options.modules?.catcher !== false) {\n        const catcher = createGlobalCatcher(engine, catcherConfig);\n        catcher.install();\n        cleanups.push(catcher);\n      }\n\n      app.config.errorHandler = (err, instance, info) => {\n        if (!engine?.isEnabled()) return;\n\n        const error = err instanceof Error ? err : new Error(String(err));\n        const componentName =\n          (instance?.$options?.name) ??\n          (instance?.$options?.__name) ??\n          'AnonymousComponent';\n\n        engine.report({\n          id: `unhandled-error:vue:${error.message}`,\n          timestamp: Date.now(),\n          severity: 'error',\n          category: 'unhandled-error',\n          message: `Vue error in ${componentName}: ${error.message}`,\n          details: {\n            component: componentName,\n            lifecycleHook: info,\n          },\n          stack: error.stack,\n          source: `Vue:${componentName}`,\n          suggestion: `Error in ${info} of ${componentName} — check the component logic`,\n        });\n      };\n\n      app.config.warnHandler = (msg, instance, trace) => {\n        if (!engine?.isEnabled()) return;\n\n        const componentName =\n          (instance?.$options?.name) ??\n          (instance?.$options?.__name) ??\n          'AnonymousComponent';\n\n        engine.report({\n          id: `unhandled-error:vue-warn:${msg.slice(0, 80)}`,\n          timestamp: Date.now(),\n          severity: 'warn',\n          category: 'unhandled-error',\n          message: `Vue warning in ${componentName}: ${msg}`,\n          details: {\n            component: componentName,\n            trace,\n          },\n          source: `Vue:${componentName}`,\n          suggestion: 'Check the Vue warning above — it may indicate a potential issue',\n        });\n      };\n    },\n\n    uninstall(): void {\n      for (const cleanup of cleanups) {\n        cleanup.uninstall();\n      }\n      cleanups.length = 0;\n      engine = null;\n    },\n\n    getEngine(): DevLensEngine | null {\n      return engine;\n    },\n  };\n}\n","import { inject, ref, watch, type Ref } from 'vue';\nimport type { DevLensEngine, DetectedIssue } from '@devlens/core';\nimport { createDataGuardian } from '@devlens/core';\nimport { DevLensKey } from './plugin';\n\nexport function useDevLens(): DevLensEngine | null {\n  return inject(DevLensKey, null);\n}\n\nexport function useGuardedRef<T extends object>(\n  initialValue: T,\n  label?: string,\n): Ref<T> {\n  const engine = useDevLens();\n  const source = ref(initialValue) as Ref<T>;\n\n  if (!engine || !engine.isEnabled()) {\n    return source;\n  }\n\n  const guardian = createDataGuardian(engine);\n  const guarded = ref(guardian.guard(source.value, label)) as Ref<T>;\n\n  watch(source, (newVal) => {\n    if (newVal === null || newVal === undefined || typeof newVal !== 'object') {\n      guarded.value = newVal;\n      return;\n    }\n    const freshGuardian = createDataGuardian(engine);\n    guarded.value = freshGuardian.guard(newVal, label);\n  }, { deep: true });\n\n  return guarded;\n}\n\nexport function useGuardedWatch(\n  data: Record<string, unknown>,\n  label?: string,\n): void {\n  const engine = useDevLens();\n  if (!engine || !engine.isEnabled()) return;\n\n  const resolvedLabel = label ?? 'useGuardedWatch';\n\n  const dataRef = ref(data);\n\n  watch(dataRef, (current) => {\n    for (const [key, value] of Object.entries(current)) {\n      if (value === null || value === undefined) {\n        const issue: DetectedIssue = {\n          id: `render-data:${resolvedLabel}:${key}`,\n          timestamp: Date.now(),\n          severity: 'warn',\n          category: 'render-data',\n          message: `\"${key}\" is ${value === null ? 'null' : 'undefined'} in ${resolvedLabel}`,\n          path: `${resolvedLabel}.${key}`,\n          foundValue: value,\n          expectedType: 'non-nullish value',\n          source: resolvedLabel,\n          suggestion: `\"${key}\" is ${value === null ? 'null' : 'undefined'} — check data loading in ${resolvedLabel}`,\n        };\n        engine.report(issue);\n      }\n    }\n  }, { immediate: true, deep: true });\n}\n"]}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@devlens/vue",
+  "version": "1.0.0",
+  "description": "DevLens Vue integration - automatic error detection for Vue apps",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "devlens",
+    "crashsense",
+    "vue",
+    "debug",
+    "error-detection",
+    "developer-tools"
+  ],
+  "author": "crashsense",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/crashsense/devlens.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/crashsense/devlens#readme",
+  "bugs": {
+    "url": "https://github.com/crashsense/devlens/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "dependencies": {
+    "@devlens/core": "2.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.0",
+    "tsup": "^8.4.0",
+    "vitest": "^3.0.0",
+    "vue": "^3.5.0"
+  }
+}