fix(jsx): unsubscribe when removing a parent element (artalar#919)

package.json

@@ -47,7 +47,7 @@
     "core-js": "^3.37.1",
     "history": "^5.3.0",
     "husky": "^8.0.3 ",
-    "linkedom": "^0.16.10",
+    "linkedom": "^0.18.5",
     "lit": "^3.1.2",
     "microbundle": "^0.15.1",
     "react": "^18.2.0",

packages/jsx/package.json

@@ -41,7 +41,7 @@
     "csstype": "^3.1.2"
   },
   "devDependencies": {
-    "linkedom": "^0.16.4"
+    "linkedom": "^0.18.5"
   },
   "author": "artalar",
   "maintainers": [

packages/jsx/src/index.test.tsx

@@ -516,10 +516,11 @@ test('ref mount and unmount callbacks order', async () => {
   )
 
   mount(parent, component)
+  await sleep()
   parent.remove()
   await sleep()
 
-  assert.equal(order, [2, 1, 0, 2, 1, 0])
+  assert.equal(order, [2, 1, 0, 0, 1, 2])
 })
 
 test('style object update', () => {

packages/jsx/src/index.ts

@@ -263,14 +263,20 @@ export const reatomJsx = (ctx: Ctx, DOM: DomApis = globalThis.window) => {
     new DOM.MutationObserver((mutationsList) => {
       for (let mutation of mutationsList) {
         for (let removedNode of mutation.removedNodes) {
-          let list = unsubscribesMap.get(removedNode as any)
-          if (list) {
-            list.forEach((fn) => fn())
-            unsubscribesMap.delete(removedNode as any)
-          }
+          /**
+           * @see https://stackoverflow.com/a/64551276
+           * @note A custom NodeFilter function slows down performance by 1.5 times.
+           */
+          const walker = DOM.document.createTreeWalker(removedNode, 1)
+
+          do {
+            const node = walker.currentNode as Element
+            unsubscribesMap.get(node)?.forEach((fn) => fn())
+            unsubscribesMap.delete(node)
+          } while (walker.nextNode())
         }
       }
-    }).observe(target, {
+    }).observe(target.parentElement!, {
       childList: true,
       subtree: true,
     })