fix: clean up toast listeners with the hook lifecycle

assets/js/live_toast/live_toast.ts

@@ -446,13 +446,13 @@ export function createLiveToastHook(duration = 6000, maxItems = 3) {
         }
       }
 
-      window.addEventListener('phx:clear-flash', e => {
+      this.handleEvent('clear-flash', payload => {
         this.pushEvent('lv:clear-flash', {
-          key: (e as CustomEvent<{ key: string }>).detail.key
+          key: (payload as { key: string }).key
         })
       })
 
-      window.addEventListener('flash-leave', async event => {
+      this.el.addEventListener('flash-leave', async event => {
         if (event.target === this.el) {
           // animate this flash sliding out
           doAnimations.bind(this, duration, maxItems, this.el)()
@@ -466,9 +466,8 @@ export function createLiveToastHook(duration = 6000, maxItems = 3) {
         await dismissToast.bind(this)(duration, maxItems)
       })
 
-      window.addEventListener(`phx:${dismissEvent}`, async event => {
-        const detail = (event as CustomEvent<{ id?: string; uuid?: string }>)
-          .detail
+      this.handleEvent(dismissEvent, async payload => {
+        const detail = payload as { id?: string; uuid?: string }
         const id = detail.id || `toast-${detail.uuid}`
 
         if (id === this.el.id) {

assets/test/live_toast.test.ts

@@ -70,6 +70,8 @@ function mountToast(duration: number | 'Infinity' = 1000, countdown = false) {
   const el = document.getElementById('toast-one') as HTMLElement
   const group = document.getElementById('toast-group') as HTMLElement
   const pushes: Array<[Element | string, string, Record<string, string>]> = []
+  const flashPushes: Array<[string, Record<string, string>]> = []
+  const serverListeners: Array<[string, EventListener]> = []
   let hovered = false
   let focused = false
 
@@ -87,7 +89,19 @@ function mountToast(duration: number | 'Infinity' = 1000, countdown = false) {
   const callbacks = createLiveToastHook(1000, 3)
   const hook = {
     el,
-    pushEvent: () => undefined,
+    handleEvent(
+      event: string,
+      callback: (payload: Record<string, string>) => void
+    ) {
+      const listener: EventListener = event => {
+        callback((event as CustomEvent<Record<string, string>>).detail)
+      }
+      serverListeners.push([`phx:${event}`, listener])
+      window.addEventListener(`phx:${event}`, listener)
+    },
+    pushEvent: (event: string, payload: Record<string, string>) => {
+      flashPushes.push([event, payload])
+    },
     pushEventTo: (
       target: Element | string,
       event: string,
@@ -106,6 +120,15 @@ function mountToast(duration: number | 'Infinity' = 1000, countdown = false) {
     group,
     hook,
     pushes,
+    flashPushes,
+    destroy() {
+      callbacks.destroyed.call(hook as never)
+      // LiveView removes listeners registered through handleEvent after destroyed.
+      for (const [event, listener] of serverListeners) {
+        window.removeEventListener(event, listener)
+      }
+      el.remove()
+    },
     setFocused(value: boolean) {
       focused = value
       el.dispatchEvent(new Event(value ? 'focusin' : 'focusout'))
@@ -285,6 +308,38 @@ describe('LiveToast timed dismissal', () => {
     expect(toast.pushes).toHaveLength(1)
   })
 
+  test('stops handling server events after the hook is destroyed', async () => {
+    const toast = mountToast(0)
+
+    window.dispatchEvent(
+      new CustomEvent('phx:clear-flash', { detail: { key: 'info' } })
+    )
+    expect(toast.flashPushes).toEqual([['lv:clear-flash', { key: 'info' }]])
+
+    toast.destroy()
+    window.dispatchEvent(
+      new CustomEvent('phx:clear-flash', { detail: { key: 'info' } })
+    )
+    window.dispatchEvent(
+      new CustomEvent('phx:live-toast-dismiss', { detail: { id: toast.el.id } })
+    )
+    await settle()
+
+    expect(toast.flashPushes).toHaveLength(1)
+    expect(toast.pushes).toHaveLength(0)
+  })
+
+  test('handles flash-leave on the toast element', async () => {
+    const toast = mountToast(0)
+    toast.el.dataset.component = 'flash'
+    animationEvents.length = 0
+
+    toast.el.dispatchEvent(new Event('flash-leave'))
+    await settle()
+
+    expect(animationEvents).toContain('animate')
+  })
+
 })
 
 describe('LiveToast client API', () => {

priv/static/live_toast.js

@@ -1051,12 +1051,12 @@ var LiveMotion = (() => {
             return;
           }
         }
-        window.addEventListener("phx:clear-flash", (e) => {
+        this.handleEvent("clear-flash", (payload) => {
           this.pushEvent("lv:clear-flash", {
-            key: e.detail.key
+            key: payload.key
           });
         });
-        window.addEventListener("flash-leave", (event) => __async(this, null, function* () {
+        this.el.addEventListener("flash-leave", (event) => __async(this, null, function* () {
           if (event.target === this.el) {
             doAnimations.bind(this, duration, maxItems, this.el)();
             yield animateOut.bind(this)();
@@ -1066,8 +1066,8 @@ var LiveMotion = (() => {
           event.stopPropagation();
           yield dismissToast.bind(this)(duration, maxItems);
         }));
-        window.addEventListener(`phx:${dismissEvent}`, (event) => __async(this, null, function* () {
-          const detail = event.detail;
+        this.handleEvent(dismissEvent, (payload) => __async(this, null, function* () {
+          const detail = payload;
           const id = detail.id || `toast-${detail.uuid}`;
           if (id === this.el.id) {
             yield dismissToast.bind(this)(duration, maxItems);