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 1/3] 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>`,

From c4d99b16366c76bf171384fe578777f4803d3b55 Mon Sep 17 00:00:00 2001
From: shizuku <shizukushq@gmail.com>
Date: Thu, 30 Apr 2026 14:23:38 +0300
Subject: [PATCH 2/3] fix(site): use svelte 5 syntax in example

Co-authored-by: Mathias Picker <48158184+MathiasWP@users.noreply.github.com>
---
 site/src/surfaces/usage/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/surfaces/usage/index.tsx b/site/src/surfaces/usage/index.tsx
index d3b33da..eeb3b75 100644
--- a/site/src/surfaces/usage/index.tsx
+++ b/site/src/surfaces/usage/index.tsx
@@ -32,7 +32,7 @@ const { trigger } = useWebHaptics();
   const { trigger } = createWebHaptics();
 </script>
 
-<button on:click={() => trigger()}>Tap me</button>`,
+<button onclick={() => trigger()}>Tap me</button>`,
 };
 
 const frameworks = [

From 627e0380b8a305c62ea6cc844a27248e219f30fb Mon Sep 17 00:00:00 2001
From: shizuku <shizukushq@gmail.com>
Date: Thu, 30 Apr 2026 14:27:13 +0300
Subject: [PATCH 3/3] fix(examples): use svelte 5 syntax

Co-authored-by: Mathias Picker <48158184+MathiasWP@users.noreply.github.com>
---
 apps/svelte-example/src/App.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte-example/src/App.svelte b/apps/svelte-example/src/App.svelte
index c5ebd5a..6c76cf7 100644
--- a/apps/svelte-example/src/App.svelte
+++ b/apps/svelte-example/src/App.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <div class="container">
-  <button on:click={() => trigger()}>Tap me</button>
+  <button onclick={() => trigger()}>Tap me</button>
 </div>
 
 <style>