add cleanup mechanism like htmx

Author: 1cg

src/_hyperscript.js

@@ -123,6 +123,7 @@ const _hyperscript = Object.assign(
         parse: (src) => kernel.parse(tokenizer, src),
         process: (elt) => runtime.processNode(elt),
         processNode: (elt) => runtime.processNode(elt), // deprecated alias
+        cleanup: (elt) => runtime.cleanup(elt),
         version: "0.9.90",
     }
 );

src/core/runtime/runtime.js

@@ -588,6 +588,41 @@ export class Runtime {
             return hash;
         }
 
+        cleanup(elt) {
+            if (!elt._hyperscript) return;
+            var data = elt._hyperscript;
+
+            // Remove registered event listeners
+            if (data.listeners) {
+                for (var info of data.listeners) {
+                    info.target.removeEventListener(info.event, info.handler);
+                }
+            }
+
+            // Disconnect observers
+            if (data.observers) {
+                for (var observer of data.observers) {
+                    observer.disconnect();
+                }
+            }
+
+            // Clear debounce/throttle timers
+            if (data.eventState) {
+                for (var state of data.eventState.values()) {
+                    if (state.debounced) clearTimeout(state.debounced);
+                }
+            }
+
+            // Recursively clean children
+            if (elt.querySelectorAll) {
+                for (var child of elt.querySelectorAll('[_], [data-hs], [hyperscript]')) {
+                    this.cleanup(child);
+                }
+            }
+
+            delete elt._hyperscript;
+        }
+
         #initElement(elt, target) {
             if (elt.closest && elt.closest(config.disableSelector)) {
                 return;
@@ -598,6 +633,9 @@ export class Runtime {
             var hash = this.#hashScript(src);
             if (internalData.initialized) {
                 if (internalData.scriptHash === hash) return;
+                // Script changed (e.g. morph swap) — clean up and reinitialize
+                this.cleanup(elt);
+                internalData = this.getInternalData(elt);
             }
             internalData.initialized = true;
             internalData.scriptHash = hash;

src/parsetree/features/on.js

@@ -111,6 +111,10 @@ export class OnFeature extends Feature {
                   return;
                 }
 
+                var eltData = runtime.getInternalData(elt);
+                if (!eltData.listeners) eltData.listeners = [];
+                if (!eltData.observers) eltData.observers = [];
+
                 if (eventSpec.mutationSpec) {
                     eventName = "hyperscript:mutation";
                     const observer = new MutationObserver(function (mutationList, observer) {
@@ -122,6 +126,7 @@ export class OnFeature extends Feature {
                         }
                     });
                     observer.observe(target, eventSpec.mutationSpec);
+                    eltData.observers.push(observer);
                 }
 
                 if (eventSpec.intersectionSpec) {
@@ -137,10 +142,12 @@ export class OnFeature extends Feature {
                         }
                     }, eventSpec.intersectionSpec);
                     observer.observe(target);
+                    eltData.observers.push(observer);
                 }
 
                 var addEventListener = target.addEventListener || target.on;
-                addEventListener.call(target, eventName, function listener(evt) {
+                var handler;
+                addEventListener.call(target, eventName, handler = function listener(evt) {
                     // OK NO PROMISE
                     if (typeof Node !== 'undefined' && elt instanceof Node && target !== elt && !elt.isConnected) {
                         target.removeEventListener(eventName, listener);
@@ -246,6 +253,7 @@ export class OnFeature extends Feature {
                     // apply execute
                     onFeature.execute(ctx);
                 });
+                eltData.listeners.push({ target: target, event: eventName, handler: handler });
             });
         }
     }

test/core/bootstrap.js

@@ -155,4 +155,62 @@ test.describe("_hyperscript bootstrapping", () => {
 		await find('div').dispatchEvent('click');
 		await expect(find('div')).toHaveClass(/bar/);
 	});
+
+	test("cleanup removes event listeners on the element", async ({html, find, evaluate}) => {
+		await html("<div _='on click add .foo'></div>");
+		await find('div').dispatchEvent('click');
+		await expect(find('div')).toHaveClass(/foo/);
+
+		// Cleanup and verify listener is gone
+		await evaluate(() => {
+			var div = document.querySelector('#work-area div');
+			_hyperscript.cleanup(div);
+			div.classList.remove('foo');
+			div.click();
+		});
+		await expect(find('div')).not.toHaveClass(/foo/);
+	});
+
+	test("cleanup removes cross-element event listeners", async ({html, find, evaluate}) => {
+		await html("<div id='source'></div><div id='target' _='on click from #source add .foo'></div>");
+
+		// Verify the cross-element listener works
+		await find('#source').dispatchEvent('click');
+		await expect(find('#target')).toHaveClass(/foo/);
+
+		// Cleanup target and verify listener on source is removed
+		var listenerRemoved = await evaluate(() => {
+			var source = document.getElementById('source');
+			var target = document.getElementById('target');
+			_hyperscript.cleanup(target);
+			target.classList.remove('foo');
+			source.click();
+			// If cleanup worked, target should NOT get .foo again
+			return !target.classList.contains('foo');
+		});
+		expect(listenerRemoved).toBe(true);
+	});
+
+	test("cleanup tracks listeners in elt._hyperscript", async ({html, find, evaluate}) => {
+		await html("<div _='on click add .foo'></div>");
+		var info = await evaluate(() => {
+			var div = document.querySelector('#work-area div');
+			return {
+				hasListeners: Array.isArray(div._hyperscript.listeners),
+				listenerCount: div._hyperscript.listeners.length,
+			};
+		});
+		expect(info.hasListeners).toBe(true);
+		expect(info.listenerCount).toBeGreaterThan(0);
+	});
+
+	test("cleanup clears elt._hyperscript", async ({html, find, evaluate}) => {
+		await html("<div _='on click add .foo'></div>");
+		var hasState = await evaluate(() => {
+			var div = document.querySelector('#work-area div');
+			_hyperscript.cleanup(div);
+			return '_hyperscript' in div;
+		});
+		expect(hasState).toBe(false);
+	});
 });