From 15f49154ab4f45abfac8abb05a7768dfff81a70b Mon Sep 17 00:00:00 2001
From: shizuku <shizukushq@gmail.com>
Date: Thu, 19 Mar 2026 15:34:44 +0300
Subject: [PATCH] feat(svelte): auto-destroy haptics on unmount

---
 apps/svelte-example/src/App.svelte                  | 6 ++----
 packages/web-haptics/src/svelte/createWebHaptics.ts | 3 +++
 site/src/surfaces/usage/index.tsx                   | 4 +---
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/svelte-example/src/App.svelte b/apps/svelte-example/src/App.svelte
index 5e48f8a..c5ebd5a 100644
--- a/apps/svelte-example/src/App.svelte
+++ b/apps/svelte-example/src/App.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
-  import { createWebHaptics } from 'web-haptics/svelte';
+  import { createWebHaptics } from "web-haptics/svelte";
 
-  const { trigger, destroy } = createWebHaptics();
-  onDestroy(destroy);
+  const { trigger } = createWebHaptics();
 </script>
 
 <div class="container">
diff --git a/packages/web-haptics/src/svelte/createWebHaptics.ts b/packages/web-haptics/src/svelte/createWebHaptics.ts
index db51ac9..3fb04fe 100644
--- a/packages/web-haptics/src/svelte/createWebHaptics.ts
+++ b/packages/web-haptics/src/svelte/createWebHaptics.ts
@@ -1,3 +1,4 @@
+import { onDestroy } from "svelte";
 import { WebHaptics } from "../lib/web-haptics";
 import type {
   HapticInput,
@@ -15,5 +16,7 @@ export function createWebHaptics(options?: WebHapticsOptions) {
   const setDebug = (debug: boolean) => instance.setDebug(debug);
   const isSupported = WebHaptics.isSupported;
 
+  onDestroy(destroy);
+
   return { trigger, cancel, destroy, setDebug, isSupported };
 }
diff --git a/site/src/surfaces/usage/index.tsx b/site/src/surfaces/usage/index.tsx
index bc40168..d3b33da 100644
--- a/site/src/surfaces/usage/index.tsx
+++ b/site/src/surfaces/usage/index.tsx
@@ -29,9 +29,7 @@ const { trigger } = useWebHaptics();
 </template>`,
   svelte: `<script>
   import { createWebHaptics } from "web-haptics/svelte";
-  import { onDestroy } from "svelte";
-  const { trigger, destroy } = createWebHaptics();
-  onDestroy(destroy);
+  const { trigger } = createWebHaptics();
 </script>
 
 <button on:click={() => trigger()}>Tap me</button>`,