@w-lfpup/wctk 0.1.1 → 0.2.2

package/examples/counter/mod.js

@@ -1,41 +1,37 @@
-/*
-    Custom Element with state and interactivity.
-*/
 import { Wc, Events } from "wctk";
 class Counter extends HTMLElement {
     #wc = new Wc({ host: this });
     #ev = new Events({
-        host: this,
-        target: this.#wc.shadowRoot,
         connected: true,
-        callbacks: {
-            click: this.#onClick,
+        target: this.#wc.shadowRoot,
+        listeners: {
+            click: this.#clickHandler.bind(this),
         },
     });
     #state = getStateFromDOM(this.#wc.shadowRoot);
-    #onClick(e) {
-        if (!this.#state)
-            return;
+    #clickHandler(e) {
         let increment = getIncrement(e);
         if (increment) {
             this.#state.count += increment;
-            this.#state.el.textContent = this.#state.count.toString();
+            let el = this.#state.el;
+            if (el)
+                el.textContent = this.#state.count.toString();
         }
     }
 }
 function getStateFromDOM(shadowRoot) {
     let slot = shadowRoot.querySelector("slot");
+    let el;
     if (slot)
-        for (let el of slot.assignedNodes()) {
-            if (el instanceof HTMLSpanElement) {
-                return { el, count: parseInt(el.textContent ?? "0") };
-            }
+        for (let slotted of slot.assignedNodes()) {
+            if (slotted instanceof HTMLSpanElement)
+                el = slotted;
         }
+    return { el, count: parseInt(el?.textContent ?? "0") };
 }
 function getIncrement(e) {
-    let { target } = e;
-    if (target instanceof HTMLButtonElement) {
-        return target.hasAttribute("increase") ? 1 : -1;
+    if (e.target instanceof HTMLButtonElement) {
+        return e.target.hasAttribute("increase") ? 1 : -1;
     }
 }
 customElements.define("counter-wc", Counter);

package/examples/counter/mod.ts

@@ -5,7 +5,7 @@
 import { Wc, Events } from "wctk";
 
 interface State {
-	el: HTMLSpanElement;
+	el: HTMLSpanElement | undefined;
 	count: number;
 }
 
@@ -13,41 +13,39 @@ class Counter extends HTMLElement {
 	#wc = new Wc({ host: this });
 
 	#ev = new Events({
-		host: this,
-		target: this.#wc.shadowRoot,
 		connected: true,
-		callbacks: {
-			click: this.#onClick,
+		target: this.#wc.shadowRoot,
+		listeners: {
+			click: this.#clickHandler.bind(this),
 		},
 	});
 
-	#state?: State = getStateFromDOM(this.#wc.shadowRoot);
-
-	#onClick(e: PointerEvent) {
-		if (!this.#state) return;
+	#state: State = getStateFromDOM(this.#wc.shadowRoot);
 
+	#clickHandler(e: PointerEvent) {
 		let increment = getIncrement(e);
 		if (increment) {
 			this.#state.count += increment;
-			this.#state.el.textContent = this.#state.count.toString();
+			let el = this.#state.el;
+			if (el) el.textContent = this.#state.count.toString();
 		}
 	}
 }
 
-function getStateFromDOM(shadowRoot: ShadowRoot): State | undefined {
+function getStateFromDOM(shadowRoot: ShadowRoot): State {
 	let slot = shadowRoot.querySelector("slot");
+	let el: HTMLSpanElement | undefined;
 	if (slot)
-		for (let el of slot.assignedNodes()) {
-			if (el instanceof HTMLSpanElement) {
-				return { el, count: parseInt(el.textContent ?? "0") };
-			}
+		for (let slotted of slot.assignedNodes()) {
+			if (slotted instanceof HTMLSpanElement) el = slotted;
 		}
+
+	return { el, count: parseInt(el?.textContent ?? "0") };
 }
 
 function getIncrement(e: Event) {
-	let { target } = e;
-	if (target instanceof HTMLButtonElement) {
-		return target.hasAttribute("increase") ? 1 : -1;
+	if (e.target instanceof HTMLButtonElement) {
+		return e.target.hasAttribute("increase") ? 1 : -1;
 	}
 }
 

package/examples/form_associated/mod.js

@@ -7,7 +7,5 @@ document.addEventListener("submit", function (e) {
     e.preventDefault();
     let formdata = new FormData(e.target);
     if (results)
-        results.textContent = JSON.stringify(
-        // @ts-expect-error
-        Object.fromEntries(formdata), undefined, " ");
+        results.textContent = JSON.stringify(Object.fromEntries(formdata), undefined, " ");
 });

package/examples/form_associated/mod.ts

@@ -13,7 +13,6 @@ document.addEventListener("submit", function (e: SubmitEvent) {
 
 	if (results)
 		results.textContent = JSON.stringify(
-			// @ts-expect-error
 			Object.fromEntries(formdata),
 			undefined,
 			" ",

package/examples/form_associated/text_input.js

@@ -1,16 +1,12 @@
-/*
-    Form associated custom element.
-*/
 import { Wc, Events } from "wctk";
 export class TextInput extends HTMLElement {
     static formAssociated = true;
     #wc = new Wc({ host: this });
     #ev = new Events({
-        host: this,
-        target: this.#wc.shadowRoot,
         connected: true,
-        callbacks: {
-            change: this.#changeHandler,
+        target: this.#wc.shadowRoot,
+        listeners: {
+            change: this.#changeHandler.bind(this),
         },
     });
     #changeHandler(event) {
@@ -18,7 +14,6 @@ export class TextInput extends HTMLElement {
         if (target instanceof HTMLInputElement)
             this.#wc.setFormValue(target.value);
     }
-    // lifecycle method
     formStateRestoreCallback(state) {
         let input = this.#wc.shadowRoot.querySelector("input");
         if (input)

package/examples/form_associated/text_input.ts

@@ -8,12 +8,12 @@ export class TextInput extends HTMLElement {
 	static formAssociated = true;
 
 	#wc = new Wc({ host: this });
+
 	#ev = new Events({
-		host: this,
-		target: this.#wc.shadowRoot,
 		connected: true,
-		callbacks: {
-			change: this.#changeHandler,
+		target: this.#wc.shadowRoot,
+		listeners: {
+			change: this.#changeHandler.bind(this),
 		},
 	});
 

package/examples/stopwatch/index.html

@@ -14,16 +14,19 @@
 	</head>
 	<body>
 		<main>
-			<button start>|></button>
-			<button>| |</button>
-
-			<!-- web component -->
+			<!-- webcomponent -->
 			<stopwatch-wc>
 				<template shadowrootmode="closed">
 					<!-- Shadow DOM content -->
 					<span>117.00</span>
 				</template>
 			</stopwatch-wc>
+
+			<section>
+				<button start>|></button>
+				<button pause>| |</button>
+				<button stop>[ ]</button>
+			</section>
 		</main>
 	</body>
 </html>

package/examples/stopwatch/mod.js

@@ -1,23 +1,13 @@
 import { Stopwatch } from "./stopwatch.js";
 customElements.define("stopwatch-wc", Stopwatch);
 const stopwatch = document.querySelector("stopwatch-wc");
-let receipt;
-function draw(timestamp) {
-    if (!stopwatch)
-        return;
-    receipt = requestAnimationFrame(draw);
-    stopwatch.update(timestamp);
-}
-function start() {
-    if (!stopwatch)
-        return;
-    requestAnimationFrame(draw);
-}
-function pause() {
-    cancelAnimationFrame(receipt);
-}
 document.addEventListener("click", function (e) {
-    if (stopwatch && e.target instanceof HTMLButtonElement) {
-        e.target.hasAttribute("start") ? start() : pause();
-    }
+    if (!(stopwatch && e.target instanceof HTMLButtonElement))
+        return;
+    if (e.target.hasAttribute("start"))
+        stopwatch.start();
+    if (e.target.hasAttribute("pause"))
+        stopwatch.pause();
+    if (e.target.hasAttribute("stop"))
+        stopwatch.stop();
 });

package/examples/stopwatch/mod.ts

@@ -1,27 +1,13 @@
 import { Stopwatch } from "./stopwatch.js";
 
 customElements.define("stopwatch-wc", Stopwatch);
-const stopwatch = document.querySelector<Stopwatch>("stopwatch-wc");
-
-let receipt: number;
-function draw(timestamp: DOMHighResTimeStamp) {
-	if (!stopwatch) return;
 
-	receipt = requestAnimationFrame(draw);
-	stopwatch.update(timestamp);
-}
-
-function start() {
-	if (!stopwatch) return;
-	requestAnimationFrame(draw);
-}
+const stopwatch = document.querySelector<Stopwatch>("stopwatch-wc");
 
-function pause() {
-	cancelAnimationFrame(receipt);
-}
+document.addEventListener("click", function (e: PointerEvent) {
+	if (!(stopwatch && e.target instanceof HTMLButtonElement)) return;
 
-document.addEventListener("click", function (e: Event) {
-	if (stopwatch && e.target instanceof HTMLButtonElement) {
-		e.target.hasAttribute("start") ? start() : pause();
-	}
+	if (e.target.hasAttribute("start")) stopwatch.start();
+	if (e.target.hasAttribute("pause")) stopwatch.pause();
+	if (e.target.hasAttribute("stop")) stopwatch.stop();
 });

package/examples/stopwatch/stopwatch.js

@@ -1,34 +1,48 @@
-/*
-    Custom Element with performant and "asynchronous" renders
-    on the microtask queue.
-*/
 import { Wc, Microtask } from "wctk";
-class Stopwatch extends HTMLElement {
+export class Stopwatch extends HTMLElement {
     #wc = new Wc({ host: this });
-    #rc = new Microtask({ host: this, callback: this.#render });
+    #rc = new Microtask(this.#render.bind(this));
     #state = getStateFromShadowDOM(this.#wc.shadowRoot);
-    update(timestamp) {
-        if (!this.#state || timestamp < this.#state.prevTimestamp)
-            return;
-        this.#state.count += (timestamp - this.#state.prevTimestamp) * 0.001;
-        this.#state.prevTimestamp = timestamp;
-        // push render to microtask queue
+    #render() {
+        let { el } = this.#state;
+        if (el)
+            el.textContent = this.#state.count.toFixed(2);
+    }
+    #update = this.#undboundUpdate.bind(this);
+    #undboundUpdate(now) {
+        this.#state.count += (now - this.#state.prevTimestamp) * 0.001;
+        this.#state.prevTimestamp = now;
+        this.#state.receipt = window.requestAnimationFrame(this.#update);
         this.#rc.queue();
     }
-    #render() {
-        if (this.#state)
-            this.#state.el.textContent = this.#state.count.toFixed(2);
+    start() {
+        if (this.#state.receipt)
+            return;
+        this.#state.prevTimestamp = performance.now();
+        this.#state.receipt = window.requestAnimationFrame(this.#update);
+    }
+    pause() {
+        let { receipt } = this.#state;
+        if (receipt)
+            window.cancelAnimationFrame(receipt);
+        this.#state.receipt = undefined;
+    }
+    stop() {
+        this.pause();
+        this.#state.count = 0;
+        this.#rc.queue();
     }
 }
 function getStateFromShadowDOM(shadowRoot) {
     let el = shadowRoot.querySelector("span");
-    if (el instanceof HTMLSpanElement) {
-        return {
-            el,
-            count: parseInt(el.textContent ?? "0"),
-            receipt: 0,
-            prevTimestamp: performance.now(),
-        };
-    }
+    let count = parseInt(el?.textContent ?? "0");
+    if (Number.isNaN(count))
+        count = 0;
+    let prevTimestamp = performance.now();
+    return {
+        count,
+        el,
+        prevTimestamp,
+        receipt: undefined,
+    };
 }
-export { Stopwatch };

package/examples/stopwatch/stopwatch.ts

@@ -3,47 +3,68 @@
 	on the microtask queue.
 */
 
+// This example uses window.requestAnimationFrame.
+// Multiple stopwatches means multiple animation frame requests.
+// This is not terribly performant but it's a quick way to retrieve
+// accurate timestamp data for a stopwatch.
+
 import { Wc, Microtask } from "wctk";
 
 interface State {
-	receipt: number | void;
 	count: number;
+	el: HTMLSpanElement | null;
 	prevTimestamp: DOMHighResTimeStamp;
-	el: HTMLSpanElement;
+	receipt: number | void;
 }
 
-class Stopwatch extends HTMLElement {
+export class Stopwatch extends HTMLElement {
 	#wc = new Wc({ host: this });
-	#rc = new Microtask({ host: this, callback: this.#render });
+	#rc = new Microtask(this.#render.bind(this));
+	#state: State = getStateFromShadowDOM(this.#wc.shadowRoot);
 
-	#state?: State = getStateFromShadowDOM(this.#wc.shadowRoot);
+	#render() {
+		let { el } = this.#state;
+		if (el) el.textContent = this.#state.count.toFixed(2);
+	}
 
-	update(timestamp: DOMHighResTimeStamp) {
-		if (!this.#state || timestamp < this.#state.prevTimestamp) return;
+	#update = this.#undboundUpdate.bind(this);
+	#undboundUpdate(now: DOMHighResTimeStamp) {
+		this.#state.count += (now - this.#state.prevTimestamp) * 0.001;
+		this.#state.prevTimestamp = now;
+		this.#state.receipt = window.requestAnimationFrame(this.#update);
+		this.#rc.queue();
+	}
 
-		this.#state.count += (timestamp - this.#state.prevTimestamp) * 0.001;
-		this.#state.prevTimestamp = timestamp;
+	start() {
+		if (this.#state.receipt) return;
 
-		// push render to microtask queue
-		this.#rc.queue();
+		this.#state.prevTimestamp = performance.now();
+		this.#state.receipt = window.requestAnimationFrame(this.#update);
 	}
 
-	#render() {
-		if (this.#state)
-			this.#state.el.textContent = this.#state.count.toFixed(2);
+	pause() {
+		let { receipt } = this.#state;
+		if (receipt) window.cancelAnimationFrame(receipt);
+		this.#state.receipt = undefined;
 	}
-}
 
-function getStateFromShadowDOM(shadowRoot: ShadowRoot): State | undefined {
-	let el = shadowRoot.querySelector("span");
-	if (el instanceof HTMLSpanElement) {
-		return {
-			el,
-			count: parseInt(el.textContent ?? "0"),
-			receipt: 0,
-			prevTimestamp: performance.now(),
-		};
+	stop() {
+		this.pause();
+		this.#state.count = 0;
+		this.#rc.queue();
 	}
 }
 
-export { Stopwatch };
+function getStateFromShadowDOM(shadowRoot: ShadowRoot): State {
+	let el = shadowRoot.querySelector("span");
+	let count = parseInt(el?.textContent ?? "0");
+	if (Number.isNaN(count)) count = 0;
+	let prevTimestamp = performance.now();
+
+	return {
+		count,
+		el,
+		prevTimestamp,
+		receipt: undefined,
+	};
+}

package/examples/tsconfig.json

@@ -2,6 +2,7 @@
 	"extends": "../tsconfig.json",
 	"compilerOptions": {
 		"declaration": false,
+		"removeComments": true,
 		"paths": {
 			"wctk": ["../dist/mod.d.ts"],
 			"wctk/*": ["../dist/"]

package/jr.json

@@ -0,0 +1,25 @@
+{
+	"jackrabbit_url": "http://localhost:4000",
+	"run_asynchronously": false,
+	"webdrivers": [
+		{
+			"command": "safaridriver -p 4001",
+			"title": "Safari",
+			"timeout_ms": 20000,
+			"webdriver_url": "http://localhost:4001"
+		},
+		{
+			"command": "geckodriver -p 4001",
+			"title": "Firefox",
+			"timeout_ms": 20000,
+			"webdriver_url": "http://localhost:4001",
+			"capabilities": {
+				"alwaysMatch": {
+					"moz:firefoxOptions": {
+						"args": ["-headless"]
+					}
+				}
+			}
+		}
+	]
+}

package/package.json

@@ -2,18 +2,23 @@
 	"name": "@w-lfpup/wctk",
 	"type": "module",
 	"main": "dist/mod.js",
-	"description": "A bare-metal web component toolkit",
+	"description": "A bare-metal webcomponent toolkit",
 	"license": "BSD-3-Clause",
-	"version": "0.1.1",
+	"version": "0.2.2",
 	"scripts": {
 		"prepare": "npm run build",
-		"build": "npx tsc --project ./src",
+		"build": "npm run build:src && npm run build:tests && npm run build:examples",
+		"build:src": "npx tsc --project ./src",
+		"build:tests": "npx tsc --project ./tests",
 		"build:examples": "npx tsc --project ./examples",
+		"test": "npm run test:browsers",
+		"test:browsers": "npx jackrabbit_webdriver jr.json tests/dist/mod.js",
 		"format": "prettier --write ./"
 	},
 	"devDependencies": {
-		"prettier": "^3.3.0",
-		"typescript": "^5.4.5"
+		"@w-lfpup/jackrabbit": "^0.3.2",
+		"prettier": "^3.8.3",
+		"typescript": "^6.0.2"
 	},
 	"repository": {
 		"type": "git",

package/src/events.ts

@@ -1,20 +1,22 @@
-interface GenericEventListener<E> {
+interface GenericEventListener<E extends Event> {
 	(evt: E): void;
 }
 
-interface GenericEventListenerObject<E> {
+interface GenericEventListenerObject<E extends Event> {
 	handleEvent(object: E): void;
 }
 
-type GenericCallbacks<E> =
+type GenericCallbacks<E extends Event> =
 	| GenericEventListener<E>
 	| GenericEventListenerObject<E>;
 
-type EventMap = Partial<{
-	[Property in keyof GlobalEventHandlersEventMap]: GenericCallbacks<
-		GlobalEventHandlersEventMap[Property]
-	>;
-}>;
+type EventMap =
+	| Partial<{
+			[Property in keyof GlobalEventHandlersEventMap]: GenericCallbacks<
+				GlobalEventHandlersEventMap[Property]
+			>;
+	  }>
+	| Record<string, EventListenerOrEventListenerObject>;
 
 type Callbacks = Array<[string, EventListenerOrEventListenerObject]>;
 
@@ -24,10 +26,9 @@ interface EventElementInterface {
 }
 
 export interface EventParamsInterface {
-	callbacks: EventMap;
+	listeners: EventMap;
 	connected?: boolean;
-	host: EventElementInterface;
-	target?: EventElementInterface;
+	target: EventElementInterface;
 }
 
 export interface EventsInterface {
@@ -37,14 +38,14 @@ export interface EventsInterface {
 
 export class Events implements EventsInterface {
 	#connected: boolean = false;
-	#callbacks: Callbacks = [];
+	#listeners: Callbacks = [];
 	#target: EventElementInterface;
 
 	constructor(params: EventParamsInterface) {
-		const { host, target, callbacks, connected } = params;
+		const { target, listeners, connected } = params;
 
-		this.#target = target ?? host;
-		this.#callbacks = getBoundCallbacks(host, callbacks);
+		this.#target = target;
+		this.#listeners = Object.entries(listeners) as Callbacks;
 
 		if (connected) this.connect();
 	}
@@ -53,8 +54,8 @@ export class Events implements EventsInterface {
 		if (this.#connected) return;
 		this.#connected = true;
 
-		for (let [name, callback] of this.#callbacks) {
-			this.#target.addEventListener(name, callback);
+		for (let [name, listener] of this.#listeners) {
+			this.#target.addEventListener(name, listener);
 		}
 	}
 
@@ -62,27 +63,8 @@ export class Events implements EventsInterface {
 		if (!this.#connected) return;
 		this.#connected = false;
 
-		for (let [name, callback] of this.#callbacks) {
-			this.#target.removeEventListener(name, callback);
+		for (let [name, listener] of this.#listeners) {
+			this.#target.removeEventListener(name, listener);
 		}
 	}
 }
-
-function getBoundCallbacks(host: Object, callbacks: EventMap): Callbacks {
-	let boundCallbacks: Callbacks = [];
-	for (let [name, callback] of Object.entries(callbacks)) {
-		if (
-			callback instanceof Function &&
-			!callback.hasOwnProperty("prototype")
-		) {
-			callback = callback.bind(host);
-		}
-
-		boundCallbacks.push([
-			name,
-			callback as EventListenerOrEventListenerObject,
-		]);
-	}
-
-	return boundCallbacks;
-}

package/src/microtask.ts

@@ -1,37 +1,28 @@
-export interface MicrotaskParamsInterface {
-	host: Object;
-	callback: Function;
-}
-
 export interface MicrotaskInterface {
 	queue(): void;
 }
 
+type Callback = () => void;
+
 export class Microtask implements MicrotaskInterface {
 	#queued = false;
-	#callback: Function;
+	#callback: Callback;
 
-	constructor(params: MicrotaskParamsInterface) {
-		let { host, callback } = params;
-
-		this.queue = this.queue.bind(this);
+	constructor(callback: Callback) {
 		this.#callback = callback;
-		if (
-			callback instanceof Function &&
-			!callback.hasOwnProperty("prototype")
-		) {
-			this.#callback = callback.bind(host);
-		}
 	}
 
-	queue() {
+	queue = this.#queue.bind(this);
+	#queue() {
 		if (this.#queued) return;
 		this.#queued = true;
 
-		// could this be a bound function? less function creation
-		queueMicrotask(() => {
-			this.#queued = false;
-			this.#callback();
-		});
+		window.queueMicrotask(this.#microtask);
+	}
+
+	#microtask = this.#unboundMicrotask.bind(this);
+	#unboundMicrotask() {
+		this.#queued = false;
+		this.#callback();
 	}
 }

package/src/mod.ts

@@ -1,6 +1,4 @@
-export * from "./bind.js";
 export * from "./events.js";
 export * from "./microtask.js";
-export * from "./subscription.js";
 export * from "./query_selector.js";
 export * from "./wc.js";