gracefulerrors 0.1.0 → 0.1.1

package/README.md

@@ -17,12 +17,18 @@ gracefulerrors is a TypeScript library for turning technical errors into consist
 npm install gracefulerrors
 ```
 
-If you use the React SDK or the Sonner adapter, install the matching peer dependencies in your app:
+If you use the React SDK or the Sonner adapter, install the matching peer dependencies:
 
 ```bash
 npm install react react-dom sonner
 ```
 
+If you use the Vue SDK:
+
+```bash
+npm install vue
+```
+
 ## Quick Start
 
 ```ts
@@ -120,6 +126,44 @@ export function App() {
 - `useFieldError(field)` for inline error state
 - `ErrorBoundaryWithEngine` for catching runtime errors and forwarding them to the engine
 
+## Vue Integration
+
+```ts
+import { createErrorEngine } from 'gracefulerrors'
+import { createErrorEnginePlugin, useErrorEngine } from 'gracefulerrors/vue'
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const engine = createErrorEngine({
+  registry: {
+    NETWORK_ERROR: { ui: 'toast', message: 'Network error' },
+  },
+})
+
+const app = createApp(App)
+app.use(createErrorEnginePlugin(engine))
+app.mount('#app')
+```
+
+Inside any component:
+
+```ts
+import { useErrorEngine, useFieldError } from 'gracefulerrors/vue'
+
+// Access the engine
+const engine = useErrorEngine()
+engine?.handle({ code: 'NETWORK_ERROR' })
+
+// Bind inline field errors
+const { error } = useFieldError('email')
+// error is a Ref<AppError | null> that updates reactively
+```
+
+`gracefulerrors/vue` also exports:
+
+- `provideErrorEngine(engine)` for local subtree injection (alternative to the global plugin)
+- `ErrorBoundaryWithEngine` component for catching runtime errors and forwarding them to the engine
+
 ## Sonner Adapter
 
 ```tsx
@@ -161,6 +205,7 @@ Type exports are available from the root package as well.
 Additional entry points:
 
 - `gracefulerrors/react`
+- `gracefulerrors/vue`
 - `gracefulerrors/sonner`
 - `gracefulerrors/internal` for internal testing and low-level integration only
 
@@ -183,7 +228,7 @@ Common engine options include:
 ## Package Notes
 
 - Package format: ESM and CJS via conditional exports
-- Runtime peers: `react`, `react-dom`, and `sonner` are optional peer dependencies
+- Runtime peers: `react`, `react-dom`, `sonner`, and `vue` are optional peer dependencies
 - Current version: `0.1.0`
 
 ## Development

package/dist/vue.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+var vue = require('vue');
+
+// src/vue.ts
+var ErrorEngineKey = /* @__PURE__ */ Symbol("ErrorEngine");
+function createErrorEnginePlugin(engine) {
+  return {
+    install(app) {
+      app.provide(ErrorEngineKey, engine);
+    }
+  };
+}
+function provideErrorEngine(engine) {
+  vue.provide(ErrorEngineKey, engine);
+}
+function useErrorEngine() {
+  const engine = vue.inject(ErrorEngineKey, null);
+  if (!engine && process.env["NODE_ENV"] === "development") {
+    console.error("[gracefulerrors] useErrorEngine called outside of a provider (ErrorEngineKey not found).");
+  }
+  return engine;
+}
+function useFieldError(field) {
+  const engine = useErrorEngine();
+  const error = vue.ref(null);
+  let unsubscribe = null;
+  vue.onMounted(() => {
+    if (!engine) return;
+    unsubscribe = engine.subscribe((event) => {
+      if (event.type === "ERROR_ADDED" && event.action === "inline") {
+        if (event.error.context?.field === field) {
+          error.value = event.error;
+        }
+      } else if (event.type === "ERROR_CLEARED") {
+        if (error.value?.code === event.code) {
+          error.value = null;
+        }
+      } else if (event.type === "ALL_CLEARED") {
+        error.value = null;
+      }
+    });
+  });
+  vue.onUnmounted(() => {
+    unsubscribe?.();
+  });
+  return { error };
+}
+var ErrorBoundaryWithEngine = vue.defineComponent({
+  name: "ErrorBoundaryWithEngine",
+  props: {
+    fallback: {
+      type: [String, Object],
+      default: null
+    }
+  },
+  setup(props, { slots }) {
+    const engine = useErrorEngine();
+    const hasError = vue.ref(false);
+    vue.onErrorCaptured((err) => {
+      engine?.handle(err);
+      hasError.value = true;
+      return false;
+    });
+    return () => {
+      if (hasError.value) {
+        if (slots.fallback) return slots.fallback();
+        if (props.fallback) {
+          return typeof props.fallback === "string" ? vue.h("span", props.fallback) : props.fallback;
+        }
+        return null;
+      }
+      return slots.default?.();
+    };
+  }
+});
+
+exports.ErrorBoundaryWithEngine = ErrorBoundaryWithEngine;
+exports.ErrorEngineKey = ErrorEngineKey;
+exports.createErrorEnginePlugin = createErrorEnginePlugin;
+exports.provideErrorEngine = provideErrorEngine;
+exports.useErrorEngine = useErrorEngine;
+exports.useFieldError = useFieldError;
+//# sourceMappingURL=vue.cjs.map
+//# sourceMappingURL=vue.cjs.map

package/dist/vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vue.ts"],"names":["provide","inject","ref","onMounted","onUnmounted","defineComponent","onErrorCaptured","h"],"mappings":"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","file":"vue.cjs","sourcesContent":["import {\n  inject,\n  provide,\n  ref,\n  onMounted,\n  onUnmounted,\n  defineComponent,\n  h,\n  onErrorCaptured,\n} from 'vue'\nimport type { InjectionKey, Plugin, Ref, VNode } from 'vue'\nimport type { ErrorEngine, AppError, StateListener } from './types'\n\nexport const ErrorEngineKey: InjectionKey<ErrorEngine> = Symbol('ErrorEngine')\n\nexport function createErrorEnginePlugin<TCode extends string = string>(\n  engine: ErrorEngine<TCode>\n): Plugin {\n  return {\n    install(app) {\n      app.provide(ErrorEngineKey, engine)\n    },\n  }\n}\n\nexport function provideErrorEngine<TCode extends string = string>(\n  engine: ErrorEngine<TCode>\n): void {\n  provide(ErrorEngineKey, engine)\n}\n\nexport function useErrorEngine<TCode extends string = string>(): ErrorEngine<TCode> | null {\n  const engine = inject(ErrorEngineKey, null)\n  if (!engine && process.env['NODE_ENV'] === 'development') {\n    console.error('[gracefulerrors] useErrorEngine called outside of a provider (ErrorEngineKey not found).')\n  }\n  return engine as ErrorEngine<TCode> | null\n}\n\nexport function useFieldError<TField extends string = string>(\n  field: TField\n): { error: Ref<AppError<string, TField> | null> } {\n  const engine = useErrorEngine()\n  const error = ref<AppError<string, TField> | null>(null) as Ref<AppError<string, TField> | null>\n  let unsubscribe: (() => void) | null = null\n\n  onMounted(() => {\n    if (!engine) return\n    unsubscribe = engine.subscribe((event: Parameters<StateListener>[0]) => {\n      if (event.type === 'ERROR_ADDED' && event.action === 'inline') {\n        if (event.error.context?.field === field) {\n          error.value = event.error as AppError<string, TField>\n        }\n      } else if (event.type === 'ERROR_CLEARED') {\n        if (error.value?.code === event.code) {\n          error.value = null\n        }\n      } else if (event.type === 'ALL_CLEARED') {\n        error.value = null\n      }\n    })\n  })\n\n  onUnmounted(() => {\n    unsubscribe?.()\n  })\n\n  return { error }\n}\n\nexport const ErrorBoundaryWithEngine = defineComponent({\n  name: 'ErrorBoundaryWithEngine',\n  props: {\n    fallback: {\n      type: [String, Object] as unknown as () => string | VNode,\n      default: null,\n    },\n  },\n  setup(props, { slots }) {\n    const engine = useErrorEngine()\n    const hasError = ref(false)\n\n    onErrorCaptured((err: unknown) => {\n      engine?.handle(err)\n      hasError.value = true\n      return false\n    })\n\n    return () => {\n      if (hasError.value) {\n        if (slots.fallback) return slots.fallback()\n        if (props.fallback) {\n          return typeof props.fallback === 'string'\n            ? h('span', props.fallback)\n            : (props.fallback as VNode)\n        }\n        return null\n      }\n      return slots.default?.()\n    }\n  },\n})\n"]}

package/dist/vue.d.cts

@@ -0,0 +1,32 @@
+import * as vue from 'vue';
+import { VNode, InjectionKey, Plugin, Ref } from 'vue';
+import { a as ErrorEngine, A as AppError } from './types-CsPmpcbL.cjs';
+
+declare const ErrorEngineKey: InjectionKey<ErrorEngine>;
+declare function createErrorEnginePlugin<TCode extends string = string>(engine: ErrorEngine<TCode>): Plugin;
+declare function provideErrorEngine<TCode extends string = string>(engine: ErrorEngine<TCode>): void;
+declare function useErrorEngine<TCode extends string = string>(): ErrorEngine<TCode> | null;
+declare function useFieldError<TField extends string = string>(field: TField): {
+    error: Ref<AppError<string, TField> | null>;
+};
+declare const ErrorBoundaryWithEngine: vue.DefineComponent<vue.ExtractPropTypes<{
+    fallback: {
+        type: () => string | VNode;
+        default: null;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    fallback: {
+        type: () => string | VNode;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    fallback: string | VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { ErrorBoundaryWithEngine, ErrorEngineKey, createErrorEnginePlugin, provideErrorEngine, useErrorEngine, useFieldError };

package/dist/vue.d.ts

@@ -0,0 +1,32 @@
+import * as vue from 'vue';
+import { VNode, InjectionKey, Plugin, Ref } from 'vue';
+import { a as ErrorEngine, A as AppError } from './types-CsPmpcbL.js';
+
+declare const ErrorEngineKey: InjectionKey<ErrorEngine>;
+declare function createErrorEnginePlugin<TCode extends string = string>(engine: ErrorEngine<TCode>): Plugin;
+declare function provideErrorEngine<TCode extends string = string>(engine: ErrorEngine<TCode>): void;
+declare function useErrorEngine<TCode extends string = string>(): ErrorEngine<TCode> | null;
+declare function useFieldError<TField extends string = string>(field: TField): {
+    error: Ref<AppError<string, TField> | null>;
+};
+declare const ErrorBoundaryWithEngine: vue.DefineComponent<vue.ExtractPropTypes<{
+    fallback: {
+        type: () => string | VNode;
+        default: null;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    fallback: {
+        type: () => string | VNode;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    fallback: string | VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { ErrorBoundaryWithEngine, ErrorEngineKey, createErrorEnginePlugin, provideErrorEngine, useErrorEngine, useFieldError };

package/dist/vue.js

@@ -0,0 +1,78 @@
+import { defineComponent, ref, onErrorCaptured, h, inject, provide, onMounted, onUnmounted } from 'vue';
+
+// src/vue.ts
+var ErrorEngineKey = /* @__PURE__ */ Symbol("ErrorEngine");
+function createErrorEnginePlugin(engine) {
+  return {
+    install(app) {
+      app.provide(ErrorEngineKey, engine);
+    }
+  };
+}
+function provideErrorEngine(engine) {
+  provide(ErrorEngineKey, engine);
+}
+function useErrorEngine() {
+  const engine = inject(ErrorEngineKey, null);
+  if (!engine && process.env["NODE_ENV"] === "development") {
+    console.error("[gracefulerrors] useErrorEngine called outside of a provider (ErrorEngineKey not found).");
+  }
+  return engine;
+}
+function useFieldError(field) {
+  const engine = useErrorEngine();
+  const error = ref(null);
+  let unsubscribe = null;
+  onMounted(() => {
+    if (!engine) return;
+    unsubscribe = engine.subscribe((event) => {
+      if (event.type === "ERROR_ADDED" && event.action === "inline") {
+        if (event.error.context?.field === field) {
+          error.value = event.error;
+        }
+      } else if (event.type === "ERROR_CLEARED") {
+        if (error.value?.code === event.code) {
+          error.value = null;
+        }
+      } else if (event.type === "ALL_CLEARED") {
+        error.value = null;
+      }
+    });
+  });
+  onUnmounted(() => {
+    unsubscribe?.();
+  });
+  return { error };
+}
+var ErrorBoundaryWithEngine = defineComponent({
+  name: "ErrorBoundaryWithEngine",
+  props: {
+    fallback: {
+      type: [String, Object],
+      default: null
+    }
+  },
+  setup(props, { slots }) {
+    const engine = useErrorEngine();
+    const hasError = ref(false);
+    onErrorCaptured((err) => {
+      engine?.handle(err);
+      hasError.value = true;
+      return false;
+    });
+    return () => {
+      if (hasError.value) {
+        if (slots.fallback) return slots.fallback();
+        if (props.fallback) {
+          return typeof props.fallback === "string" ? h("span", props.fallback) : props.fallback;
+        }
+        return null;
+      }
+      return slots.default?.();
+    };
+  }
+});
+
+export { ErrorBoundaryWithEngine, ErrorEngineKey, createErrorEnginePlugin, provideErrorEngine, useErrorEngine, useFieldError };
+//# sourceMappingURL=vue.js.map
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vue.ts"],"names":[],"mappings":"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","file":"vue.js","sourcesContent":["import {\n  inject,\n  provide,\n  ref,\n  onMounted,\n  onUnmounted,\n  defineComponent,\n  h,\n  onErrorCaptured,\n} from 'vue'\nimport type { InjectionKey, Plugin, Ref, VNode } from 'vue'\nimport type { ErrorEngine, AppError, StateListener } from './types'\n\nexport const ErrorEngineKey: InjectionKey<ErrorEngine> = Symbol('ErrorEngine')\n\nexport function createErrorEnginePlugin<TCode extends string = string>(\n  engine: ErrorEngine<TCode>\n): Plugin {\n  return {\n    install(app) {\n      app.provide(ErrorEngineKey, engine)\n    },\n  }\n}\n\nexport function provideErrorEngine<TCode extends string = string>(\n  engine: ErrorEngine<TCode>\n): void {\n  provide(ErrorEngineKey, engine)\n}\n\nexport function useErrorEngine<TCode extends string = string>(): ErrorEngine<TCode> | null {\n  const engine = inject(ErrorEngineKey, null)\n  if (!engine && process.env['NODE_ENV'] === 'development') {\n    console.error('[gracefulerrors] useErrorEngine called outside of a provider (ErrorEngineKey not found).')\n  }\n  return engine as ErrorEngine<TCode> | null\n}\n\nexport function useFieldError<TField extends string = string>(\n  field: TField\n): { error: Ref<AppError<string, TField> | null> } {\n  const engine = useErrorEngine()\n  const error = ref<AppError<string, TField> | null>(null) as Ref<AppError<string, TField> | null>\n  let unsubscribe: (() => void) | null = null\n\n  onMounted(() => {\n    if (!engine) return\n    unsubscribe = engine.subscribe((event: Parameters<StateListener>[0]) => {\n      if (event.type === 'ERROR_ADDED' && event.action === 'inline') {\n        if (event.error.context?.field === field) {\n          error.value = event.error as AppError<string, TField>\n        }\n      } else if (event.type === 'ERROR_CLEARED') {\n        if (error.value?.code === event.code) {\n          error.value = null\n        }\n      } else if (event.type === 'ALL_CLEARED') {\n        error.value = null\n      }\n    })\n  })\n\n  onUnmounted(() => {\n    unsubscribe?.()\n  })\n\n  return { error }\n}\n\nexport const ErrorBoundaryWithEngine = defineComponent({\n  name: 'ErrorBoundaryWithEngine',\n  props: {\n    fallback: {\n      type: [String, Object] as unknown as () => string | VNode,\n      default: null,\n    },\n  },\n  setup(props, { slots }) {\n    const engine = useErrorEngine()\n    const hasError = ref(false)\n\n    onErrorCaptured((err: unknown) => {\n      engine?.handle(err)\n      hasError.value = true\n      return false\n    })\n\n    return () => {\n      if (hasError.value) {\n        if (slots.fallback) return slots.fallback()\n        if (props.fallback) {\n          return typeof props.fallback === 'string'\n            ? h('span', props.fallback)\n            : (props.fallback as VNode)\n        }\n        return null\n      }\n      return slots.default?.()\n    }\n  },\n})\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gracefulerrors",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Transform technical errors into consistent, user-friendly experiences",
   "license": "MIT",
   "type": "module",
@@ -24,6 +24,11 @@
       "types": "./dist/internal.d.ts",
       "import": "./dist/internal.mjs",
       "require": "./dist/internal.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.mjs",
+      "require": "./dist/vue.cjs"
     }
   },
   "main": "./dist/index.cjs",
@@ -45,7 +50,8 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "sonner": ">=1"
+    "sonner": ">=1",
+    "vue": ">=3"
   },
   "peerDependenciesMeta": {
     "sonner": {
@@ -56,6 +62,9 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "tsd": {
@@ -68,6 +77,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitest/coverage-v8": "^1.0.0",
+    "@vue/test-utils": "^2.4.6",
     "jsdom": "^24.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -75,6 +85,7 @@
     "tsd": "^0.31.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
-    "vitest": "^1.0.0"
+    "vitest": "^1.0.0",
+    "vue": "^3.5.32"
   }
 }