Remove event listeners on dismount for reactive primitives

src/lib/contexts/device.svelte.ts

@@ -1,5 +1,5 @@
 import { DEVICE_PID, DEVICE_VID } from '$lib/constants'
-import { getContext, setContext } from 'svelte'
+import { getContext, onDestroy, setContext } from 'svelte'
 import { toast } from 'svelte-sonner'
 
 function isInkclip(dev: HIDDevice) {
@@ -24,18 +24,26 @@ export function createDeviceContext(): DeviceContext {
     if (dev !== undefined) ctx.device = dev
   })
 
-  navigator.hid.addEventListener('connect', e => {
+  function connectIfIdle(e: HIDConnectionEvent) {
-    if (isInkclip(e.device) && ctx.device === null) {
+    if (!isInkclip(e.device) || ctx.device !== null) return
+
       toast.info('Device connected')
       ctx.device = e.device
     }
-  })
 
-  navigator.hid.addEventListener('disconnect', e => {
+  function disconnectIfSame(e: HIDConnectionEvent) {
-    if (ctx.device === e.device) {
+    if (ctx.device !== e.device) return
+
       toast.info('Device disconnected')
       ctx.device = null
     }
+
+  navigator.hid.addEventListener('connect', connectIfIdle)
+  navigator.hid.addEventListener('disconnect', disconnectIfSame)
+
+  onDestroy(() => {
+    navigator.hid.removeEventListener('connect', connectIfIdle)
+    navigator.hid.removeEventListener('disconnect', disconnectIfSame)
   })
 
   return setContext(DeviceContextToken, ctx)

src/lib/utils/media.svelte.ts

@@ -1,3 +1,5 @@
+import { onDestroy } from 'svelte'
+
 export interface ReactiveMediaQuery {
   readonly matches: boolean
 }
@@ -7,9 +9,10 @@ export function createMediaQuery(query: string): ReactiveMediaQuery {
 
   const queryState = $state({ matches: queryList.matches })
 
-  queryList.addEventListener('change', self => {
+  const updateQueryState = (e: MediaQueryListEvent) => (queryState.matches = e.matches)
-    queryState.matches = self.matches
+
-  })
+  queryList.addEventListener('change', updateQueryState)
+  onDestroy(() => queryList.removeEventListener('change', updateQueryState))
 
   return queryState
 }