@w-lfpup/wctk 0.1.0 → 0.2.1

package/examples/counter/mod.js

@@ -1,39 +1,37 @@
 import { Wc, Events } from "wctk";
-/*
-    Custom Element with state and interactivity.
-*/
 class Counter extends HTMLElement {
     #wc = new Wc({ host: this });
     #ev = new Events({
-        host: this,
         target: this.#wc.shadowRoot,
         connected: true,
-        callbacks: [["click", this.#clickHandler]],
+        listeners: {
+            click: this.#clickHandler.bind(this),
+        },
     });
     #state = getStateFromDOM(this.#wc.shadowRoot);
     #clickHandler(e) {
-        if (!this.#state)
-            return;
         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

@@ -1,50 +1,51 @@
+/*
+	Custom Element with state and interactivity.
+*/
+
 import { Wc, Events } from "wctk";
 
 interface State {
-	el: HTMLSpanElement;
+	el: HTMLSpanElement | undefined;
 	count: number;
 }
 
-/*
-	Custom Element with state and interactivity.
-*/
 class Counter extends HTMLElement {
 	#wc = new Wc({ host: this });
 
 	#ev = new Events({
-		host: this,
 		target: this.#wc.shadowRoot,
 		connected: true,
-		callbacks: [["click", this.#clickHandler]],
+		listeners: {
+			click: this.#clickHandler.bind(this),
+		},
 	});
 
-	#state?: State = getStateFromDOM(this.#wc.shadowRoot);
-
-	#clickHandler(e: Event) {
-		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) {
+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,22 +1,19 @@
 import { Wc, Events } from "wctk";
-/*
-    Form associated custom element.
-*/
 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]],
+        listeners: {
+            change: this.#changeHandler.bind(this),
+        },
     });
     #changeHandler(event) {
         let { target } = event;
         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

@@ -1,20 +1,22 @@
-import { Wc, Events } from "wctk";
-
 /*
 	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]],
+		listeners: {
+			change: this.#changeHandler.bind(this),
+		},
 	});
 
-	#changeHandler(event: Event) {
+	#changeHandler(event: Event): void {
 		let { target } = event;
 		if (target instanceof HTMLInputElement)
 			this.#wc.setFormValue(target.value);

package/examples/stopwatch/index.html

@@ -14,9 +14,6 @@
 	</head>
 	<body>
 		<main>
-			<button start>|></button>
-			<button>| |</button>
-
 			<!-- web component -->
 			<stopwatch-wc>
 				<template shadowrootmode="closed">
@@ -24,6 +21,12 @@
 					<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

@@ -2,7 +2,12 @@ import { Stopwatch } from "./stopwatch.js";
 customElements.define("stopwatch-wc", Stopwatch);
 const stopwatch = document.querySelector("stopwatch-wc");
 document.addEventListener("click", function (e) {
-    if (stopwatch && e.target instanceof HTMLButtonElement) {
-        e.target.hasAttribute("start") ? stopwatch.start() : stopwatch.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

@@ -4,8 +4,10 @@ customElements.define("stopwatch-wc", Stopwatch);
 
 const stopwatch = document.querySelector<Stopwatch>("stopwatch-wc");
 
-document.addEventListener("click", function (e: Event) {
-	if (stopwatch && e.target instanceof HTMLButtonElement) {
-		e.target.hasAttribute("start") ? stopwatch.start() : stopwatch.pause();
-	}
+document.addEventListener("click", function (e: PointerEvent) {
+	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/stopwatch.js

@@ -1,45 +1,48 @@
 import { Wc, Microtask } from "wctk";
-/*
-    Custom Element with performant and "asynchronous" renders
-    on the microtask queue.
-*/
 export class Stopwatch extends HTMLElement {
     #wc = new Wc({ host: this });
-    #rc = new Microtask({ host: this, callback: this.#render });
-    #boundUpdate = this.#update.bind(this);
+    #rc = new Microtask(this.#render.bind(this));
     #state = getStateFromShadowDOM(this.#wc.shadowRoot);
     #render() {
-        if (this.#state)
-            this.#state.el.textContent = this.#state.count.toFixed(2);
+        let { el } = this.#state;
+        if (el)
+            el.textContent = this.#state.count.toFixed(2);
     }
-    #update(timestamp) {
-        if (!this.#state)
-            return;
-        this.#state.receipt = requestAnimationFrame(this.#boundUpdate);
-        this.#state.count += (timestamp - this.#state.prevTimestamp) * 0.001;
-        this.#state.prevTimestamp = timestamp;
-        // push render to microtask queue
+    #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();
     }
     start() {
-        if (!this.#state || this.#state?.receipt)
+        if (this.#state.receipt)
             return;
-        this.#state.receipt = requestAnimationFrame(this.#boundUpdate);
         this.#state.prevTimestamp = performance.now();
+        this.#state.receipt = window.requestAnimationFrame(this.#update);
     }
     pause() {
-        if (this.#state && this.#state.receipt)
-            this.#state.receipt = cancelAnimationFrame(this.#state.receipt);
+        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,
+    };
 }

package/examples/stopwatch/stopwatch.ts

@@ -1,61 +1,70 @@
-import { Bind, Wc, Microtask } from "wctk";
+/*
+	Custom Element with performant and "asynchronous" renders
+	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 get
+// 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;
 }
 
-/*
-	Custom Element with performant and "asynchronous" renders
-	on the microtask queue.
-*/
 export class Stopwatch extends HTMLElement {
 	#wc = new Wc({ host: this });
-	#rc = new Microtask({ host: this, callback: this.#render });
-
-	#boundUpdate = this.#update.bind(this);
-	#state?: State = getStateFromShadowDOM(this.#wc.shadowRoot);
+	#rc = new Microtask(this.#render.bind(this));
+	#state: State = getStateFromShadowDOM(this.#wc.shadowRoot);
 
 	#render() {
-		if (this.#state)
-			this.#state.el.textContent = this.#state.count.toFixed(2);
+		let { el } = this.#state;
+		if (el) el.textContent = this.#state.count.toFixed(2);
 	}
 
-	#update(timestamp: DOMHighResTimeStamp) {
-		if (!this.#state) return;
-
-		this.#state.receipt = requestAnimationFrame(this.#boundUpdate);
-
-		this.#state.count += (timestamp - this.#state.prevTimestamp) * 0.001;
-		this.#state.prevTimestamp = timestamp;
-
-		// push render to microtask queue
+	#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();
 	}
 
 	start() {
-		if (!this.#state || this.#state?.receipt) return;
+		if (this.#state.receipt) return;
 
-		this.#state.receipt = requestAnimationFrame(this.#boundUpdate);
 		this.#state.prevTimestamp = performance.now();
+		this.#state.receipt = window.requestAnimationFrame(this.#update);
 	}
 
 	pause() {
-		if (this.#state && this.#state.receipt)
-			this.#state.receipt = cancelAnimationFrame(this.#state.receipt);
+		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: ShadowRoot): State | undefined {
+function getStateFromShadowDOM(shadowRoot: ShadowRoot): State {
 	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,
+	};
 }

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,22 @@
 	"name": "@w-lfpup/wctk",
 	"type": "module",
 	"main": "dist/mod.js",
-	"description": "A bare-metal web component toolkit",
+	"description": "A bare-metal toolkit for web components",
 	"license": "BSD-3-Clause",
-	"version": "0.1.0",
+	"version": "0.2.1",
 	"scripts": {
-		"prepare": "npm run build && npm run build:examples",
-		"build": "npx tsc --project ./src",
+		"prepare": "npm run build",
+		"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": "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,32 +1,49 @@
-export type Callbacks = Array<[string, EventListenerOrEventListenerObject]>;
+interface GenericEventListener<E> {
+	(evt: E): void;
+}
 
-export interface EventsInterface {
-	connect(): void;
-	disconnect(): void;
+interface GenericEventListenerObject<E> {
+	handleEvent(object: E): void;
 }
 
-export interface EventElementInterface {
-	addEventListener: EventTarget["addEventListener"];
-	removeEventListener: EventTarget["removeEventListener"];
+type GenericCallbacks<E> =
+	| GenericEventListener<E>
+	| GenericEventListenerObject<E>;
+
+type EventMap = Partial<{
+	[Property in keyof GlobalEventHandlersEventMap]: GenericCallbacks<
+		GlobalEventHandlersEventMap[Property]
+	>;
+}>;
+
+type Callbacks = Array<[string, EventListenerOrEventListenerObject]>;
+
+interface EventElementInterface {
+	addEventListener: Element["addEventListener"];
+	removeEventListener: Element["removeEventListener"];
 }
 
 export interface EventParamsInterface {
-	host: EventElementInterface;
+	listeners: EventMap;
 	connected?: boolean;
-	target?: EventElementInterface;
-	callbacks: Callbacks;
+	target: EventElementInterface;
+}
+
+export interface EventsInterface {
+	connect(): void;
+	disconnect(): void;
 }
 
 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();
 	}
@@ -35,8 +52,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);
 		}
 	}
 
@@ -44,24 +61,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: Callbacks): Callbacks {
-	let boundCallbacks: Callbacks = [];
-	for (let [name, callback] of callbacks) {
-		if (
-			callback instanceof Function &&
-			!callback.hasOwnProperty("prototype")
-		) {
-			callback = callback.bind(host);
-		}
-
-		boundCallbacks.push([name, callback]);
-	}
-
-	return boundCallbacks;
-}

package/src/microtask.ts

@@ -1,30 +1,19 @@
-export interface MicrotaskParamsInterface {
-	host: Object;
-	callback: Function;
-}
-
 export interface MicrotaskInterface {
 	queue(): void;
 }
 
+type Callback = () => void;
+
 export class Microtask implements MicrotaskInterface {
 	#queued = false;
-	#callback: Function;
-
-	constructor(params: MicrotaskParamsInterface) {
-		let { host, callback } = params;
+	#callback: Callback;
+	queue = this.#queue.bind(this);
 
-		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() {
 		if (this.#queued) return;
 		this.#queued = true;
 

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";