fix: pass domRef to onDestroyed / onBeforeDestroyed hooks (#1636)

* fix: pass domRef to onDestroyed / onBeforeDestroyed hooks

callDestroyed and callBeforeDestroyed invoked the destroy hooks with no
argument, so the DOMRef parameter of onDestroyedWith /
onBeforeDestroyedWith (Miso.Event) was always undefined on the Haskell
side. onBeforeDestroyedWith is documented as receiving the element's
DOMRef for teardown of third-party widgets, mirroring onCreatedWith,
which does receive it.

Pass c.domRef at both call sites (the element is still alive at
before-destroy time and just-detached at destroy time, matching the
documented semantics), update the VNode hook signatures in types.ts,
and rebuild js/miso.js and js/miso.prod.js. Zero-argument hook users
are unaffected.

Adds a regression test asserting both hooks receive the element that
was created.

* feat: add onDestroyedWith

Completes the lifecycle hook family: onCreated / onCreatedWith,
onBeforeDestroyed / onBeforeDestroyedWith existed, but onDestroyed had
no DOMRef-receiving variant. The docs note the element is already
detached from the DOM when the hook fires (no parent, zero bounding
rect), so it is suited to cleaning up out-of-band references rather
than in-document teardown, which belongs in onBeforeDestroyedWith.

Author: dmjio

js/miso.js

@@ -449,7 +449,7 @@ function callDestroyedRecursive(c) {
 }
 function callDestroyed(c) {
   if (c.type === 1 /* VNode */ && c.onDestroyed)
-    c.onDestroyed();
+    c.onDestroyed(c.domRef);
   if (c.type === 0 /* VComp */)
     unmountComponent(c);
 }
@@ -459,7 +459,7 @@ function callBeforeDestroyed(c) {
       break;
     case 1 /* VNode */:
       if (c.onBeforeDestroyed)
-        c.onBeforeDestroyed();
+        c.onBeforeDestroyed(c.domRef);
       break;
     default:
       break;

js/miso.prod.js

@@ -40,6 +40,7 @@ module Miso.Event
    , onCreatedWith
    , onBeforeCreated
    , onDestroyed
+   , onDestroyedWith
    , onBeforeDestroyed
    , onBeforeDestroyedWith
     -- *** Exports
@@ -287,6 +288,25 @@ onDestroyed action =
     callback <- FFI.syncCallback (sink action)
     FFI.set "onDestroyed" callback object
 -----------------------------------------------------------------------------
+-- | Like 'onDestroyed' but also receives the element's 'DOMRef'.
+--
+-- The element has already been detached from the DOM when this fires: the
+-- 'DOMRef' has no parent and reports a zero bounding rect. Use it to clean
+-- up out-of-band references to the element (unregister it from a JS
+-- library, drop it from a lookup table) — for teardown that needs the
+-- element still live in the document, use 'onBeforeDestroyedWith'.
+--
+-- @since 1.13.0.0
+--
+onDestroyedWith
+  :: (DOMRef -> action)
+  -- ^ Callback receiving the element's (detached) 'DOMRef' after it is removed from the DOM
+  -> Attribute model action
+onDestroyedWith action =
+  On $ \_model sink (VTree object) _ _ -> do
+    callback <- FFI.syncCallback1 (sink . action)
+    FFI.set "onDestroyed" callback object
+-----------------------------------------------------------------------------
 -- | Fire an action just before the DOM element is removed from the document.
 --
 -- The element is still present in the DOM when this fires, making it suitable

src/Miso/Event.hs

@@ -155,7 +155,7 @@ function callDestroyedRecursive<T>(c: VNode<T> | VComp<T> | VFrag<T>): void {
 }
 
 function callDestroyed<T>(c: VNode<T> | VComp<T>): void {
-  if (c.type === VTreeType.VNode && c.onDestroyed) c.onDestroyed();
+  if (c.type === VTreeType.VNode && c.onDestroyed) c.onDestroyed(c.domRef);
   if (c.type === VTreeType.VComp) unmountComponent(c);
 }
 
@@ -164,7 +164,7 @@ function callBeforeDestroyed<T>(c: VNode<T> | VComp<T>): void {
       case VTreeType.VComp:
           break;
       case VTreeType.VNode:
-          if (c.onBeforeDestroyed) c.onBeforeDestroyed();
+          if (c.onBeforeDestroyed) c.onBeforeDestroyed(c.domRef);
           break;
       default:
           break;

ts/miso/dom.ts

@@ -58,8 +58,8 @@ export type VNode<T> = {
    *  component events that don't bubble). Absent on browser/WASM. */
   directEvents?: Array<string>;
   children: Array<VTree<T>>;
-  onDestroyed: () => void;
-  onBeforeDestroyed: () => void;
+  onDestroyed: (domRef: T) => void;
+  onBeforeDestroyed: (domRef: T) => void;
   onCreated: (domRef: T) => void;
   onBeforeCreated: () => void;
   draw?: (T) => void;

ts/miso/types.ts

@@ -468,6 +468,27 @@ describe('DOM tests', () => {
     expect(destroy).toBe(1);
   });
 
+  test('Should pass the domRef to onDestroyed and onBeforeDestroyed', () => {
+    let beforeRef: DOMRef | undefined;
+    let destroyedRef: DOMRef | undefined;
+    const currentNode = vnode<DOMRef>({
+      onBeforeDestroyed: (domRef) => {
+        beforeRef = domRef;
+      },
+      onDestroyed: (domRef) => {
+        destroyedRef = domRef;
+      },
+    });
+
+    diff<DOMRef>(null, currentNode, document.body, drawingContext);
+    const el = currentNode.domRef;
+    expect(el).not.toBeNull();
+
+    diff<DOMRef>(currentNode, null, document.body, drawingContext);
+    expect(beforeRef).toBe(el);
+    expect(destroyedRef).toBe(el);
+  });
+
   test('Should call onDestroyed recursively', () => {
     let destroy = 0,
       childDestroy = 0;