more htmx standardization

Author: 1cg

src/core/config.js

@@ -5,4 +5,5 @@ export const config = {
     defaultTransition: "all 500ms ease-in",
     disableSelector: "[disable-scripting], [data-disable-scripting]",
     hideShowStrategies: {},
+    logAll: false,
 }

src/core/runtime/runtime.js

@@ -515,6 +515,9 @@ export class Runtime {
             detail = detail || {};
             detail["sender"] = sender;
             var event = this.makeEvent(eventName, detail);
+            if (config.logAll) {
+                console.log(eventName, detail, elt);
+            }
             var eventResult = elt.dispatchEvent(event);
             return eventResult;
         }
@@ -590,6 +593,9 @@ export class Runtime {
 
         cleanup(elt) {
             if (!elt._hyperscript) return;
+
+            this.triggerEvent(elt, "hyperscript:before:cleanup");
+
             var data = elt._hyperscript;
 
             // Remove registered event listeners
@@ -615,11 +621,14 @@ export class Runtime {
 
             // Recursively clean children
             if (elt.querySelectorAll) {
-                for (var child of elt.querySelectorAll('[_], [data-hs], [hyperscript]')) {
+                for (var child of elt.querySelectorAll('[data-hyperscript-powered]')) {
                     this.cleanup(child);
                 }
             }
 
+            this.triggerEvent(elt, "hyperscript:after:cleanup");
+
+            elt.removeAttribute('data-hyperscript-powered');
             delete elt._hyperscript;
         }
 
@@ -637,13 +646,18 @@ export class Runtime {
                 this.cleanup(elt);
                 internalData = this.getInternalData(elt);
             }
+
+            if (!this.triggerEvent(elt, "hyperscript:before:init")) return;
+
             internalData.initialized = true;
             internalData.scriptHash = hash;
             try {
                 var tokens = this.#tokenizer.tokenize(src);
                 var hyperScript = this.#kernel.parseHyperScript(tokens);
                 if (!hyperScript) return;
                 hyperScript.apply(target || elt, elt, null, this);
+                elt.setAttribute('data-hyperscript-powered', 'true');
+                this.triggerEvent(elt, "hyperscript:after:init");
                 setTimeout(() => {
                     this.triggerEvent(target || elt, "load", {
                         hyperscript: true,

test/core/bootstrap.js

@@ -213,4 +213,79 @@ test.describe("_hyperscript bootstrapping", () => {
 		});
 		expect(hasState).toBe(false);
 	});
+
+	test("sets data-hyperscript-powered on initialized elements", async ({html, find}) => {
+		await html("<div _='on click add .foo'></div>");
+		await expect(find('div')).toHaveAttribute('data-hyperscript-powered', 'true');
+	});
+
+	test("cleanup removes data-hyperscript-powered", async ({html, find, evaluate}) => {
+		await html("<div _='on click add .foo'></div>");
+		await expect(find('div')).toHaveAttribute('data-hyperscript-powered', 'true');
+		await evaluate(() => {
+			_hyperscript.cleanup(document.querySelector('#work-area div'));
+		});
+		expect(await find('div').getAttribute('data-hyperscript-powered')).toBeNull();
+	});
+
+	test("fires hyperscript:before:init and hyperscript:after:init", async ({html, find, evaluate}) => {
+		var events = await evaluate(() => {
+			var events = [];
+			var wa = document.getElementById('work-area');
+			wa.addEventListener('hyperscript:before:init', () => events.push('before:init'));
+			wa.addEventListener('hyperscript:after:init', () => events.push('after:init'));
+			wa.innerHTML = "<div _='on click add .foo'></div>";
+			_hyperscript.processNode(wa);
+			return events;
+		});
+		expect(events).toEqual(['before:init', 'after:init']);
+	});
+
+	test("hyperscript:before:init can cancel initialization", async ({html, find, evaluate}) => {
+		var result = await evaluate(() => {
+			var wa = document.getElementById('work-area');
+			wa.addEventListener('hyperscript:before:init', (e) => e.preventDefault(), { once: true });
+			wa.innerHTML = "<div _='on click add .foo'></div>";
+			_hyperscript.processNode(wa);
+			var div = wa.querySelector('div');
+			return {
+				initialized: !!div._hyperscript?.initialized,
+				hasPowered: div.hasAttribute('data-hyperscript-powered'),
+			};
+		});
+		expect(result.initialized).toBe(false);
+		expect(result.hasPowered).toBe(false);
+	});
+
+	test("fires hyperscript:before:cleanup and hyperscript:after:cleanup", async ({html, find, evaluate}) => {
+		await html("<div _='on click add .foo'></div>");
+		var events = await evaluate(() => {
+			var events = [];
+			var div = document.querySelector('#work-area div');
+			div.addEventListener('hyperscript:before:cleanup', () => events.push('before:cleanup'));
+			div.addEventListener('hyperscript:after:cleanup', () => events.push('after:cleanup'));
+			_hyperscript.cleanup(div);
+			return events;
+		});
+		expect(events).toEqual(['before:cleanup', 'after:cleanup']);
+	});
+
+	test("logAll config logs events to console", async ({html, find, evaluate}) => {
+		var logged = await evaluate(() => {
+			var logs = [];
+			var origLog = console.log;
+			console.log = (...args) => logs.push(args[0]);
+			_hyperscript.config.logAll = true;
+			try {
+				var wa = document.getElementById('work-area');
+				wa.innerHTML = "<div _='on click add .foo'></div>";
+				_hyperscript.processNode(wa);
+			} finally {
+				_hyperscript.config.logAll = false;
+				console.log = origLog;
+			}
+			return logs.some(l => typeof l === 'string' && l.includes('hyperscript:'));
+		});
+		expect(logged).toBe(true);
+	});
 });