@w-lfpup/wctk 0.2.3 → 0.2.4

package/LICENSE

@@ -1,6 +1,6 @@
 BSD 3-Clause License
 
-Copyright (c) 2024, Taylor Vann
+Copyright (c) 2024, Brian Taylor Vann
 
 Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:

package/README.md

@@ -6,6 +6,9 @@ An SSR friendly (w)eb(c)omponent (t)ool (k)it without dependencies.
 
 ## About
 
+The `wctk` is a collection of bare-metal facades over vanilla browser apis. They provide the basics for
+events, reactivity, and forms.
+
 There are no base classes, decorators, or mixins.
 
 All features are compositional and designed for SSR and [declarative shadow dom](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html).
@@ -59,9 +62,6 @@ The following examples demonstrate several common SSR use cases:
 
 ## Design Goals
 
-The `wctk` is a collection of bare-metal facades over vanilla browser apis. They provide the basics for
-events, reactivity, and forms.
-
 If you know vanilla javascript and the DOM you are good to go.
 
 The `wctk` is designed with SSR and declarative shadow dom in mind. Developers

package/dist/microtask.d.ts

@@ -1,10 +1,12 @@
 export interface MicrotaskInterface {
     queue(): void;
 }
-type Callback = () => void;
+interface Callback {
+    (): void;
+}
 export declare class Microtask implements MicrotaskInterface {
     #private;
-    constructor(callback: Callback);
     queue: () => void;
+    constructor(callback: Callback);
 }
 export {};

package/dist/microtask.js

@@ -1,17 +1,17 @@
 export class Microtask {
     #queued = false;
     #callback;
+    #microtask = this.#unboundMicrotask.bind(this);
+    queue = this.#queue.bind(this);
     constructor(callback) {
         this.#callback = callback;
     }
-    queue = this.#queue.bind(this);
     #queue() {
         if (this.#queued)
             return;
         this.#queued = true;
         window.queueMicrotask(this.#microtask);
     }
-    #microtask = this.#unboundMicrotask.bind(this);
     #unboundMicrotask() {
         this.#queued = false;
         this.#callback();

package/dist/query_selector.js

@@ -13,11 +13,11 @@ export class QuerySelector {
         return query;
     }
     querySelectorAll(selector) {
-        let results = this.#queryAlls.get(selector);
-        if (results)
-            return results;
-        let query = Array.from(this.#parentNode.querySelectorAll(selector));
-        this.#queryAlls.set(selector, query);
+        let query = this.#queryAlls.get(selector);
+        if (!query) {
+            query = Array.from(this.#parentNode.querySelectorAll(selector));
+            this.#queryAlls.set(selector, query);
+        }
         return query;
     }
     deleteAll() {

package/dist/wc.js

@@ -8,13 +8,10 @@ export class Wc {
     constructor(params) {
         let { adoptedStyleSheets, host, formState, formValue, shadowRootInit } = params;
         this.#internals = host.attachInternals();
-        if (this.#internals.shadowRoot) {
-            this.#declarative = true;
-            this.#shadowRoot = this.#internals.shadowRoot;
-        }
-        else {
-            this.#shadowRoot = host.attachShadow(shadowRootInit ?? shadowRootInitFallback);
-        }
+        this.#declarative = null !== this.#internals.shadowRoot;
+        this.#shadowRoot =
+            this.#internals.shadowRoot ??
+                host.attachShadow(shadowRootInit ?? shadowRootInitFallback);
         this.adoptedStyleSheets = adoptedStyleSheets ?? [];
         if (formValue)
             this.setFormValue(formValue, formState);

package/package.json

@@ -4,7 +4,7 @@
 	"main": "dist/mod.js",
 	"description": "A bare-metal webcomponent toolkit",
 	"license": "BSD-3-Clause",
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"scripts": {
 		"prepare": "npm run build",
 		"build": "npm run build:src && npm run build:tests && npm run build:examples",
@@ -15,13 +15,13 @@
 		"test:browsers": "npx jackrabbit_webdriver jr.json tests/dist/mod.js",
 		"format": "prettier --write ./"
 	},
-	"devDependencies": {
-		"@w-lfpup/jackrabbit": "^0.3.2",
-		"prettier": "^3.8.3",
-		"typescript": "^6.0.2"
-	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/w-lfpup/wctk-js.git"
+	},
+	"devDependencies": {
+		"@w-lfpup/jackrabbit": "^0.3.3",
+		"prettier": "^3.8.4",
+		"typescript": "^6.0.3"
 	}
 }

package/src/microtask.ts

@@ -2,17 +2,20 @@ export interface MicrotaskInterface {
 	queue(): void;
 }
 
-type Callback = () => void;
+interface Callback {
+	(): void;
+}
 
 export class Microtask implements MicrotaskInterface {
 	#queued = false;
 	#callback: Callback;
+	#microtask = this.#unboundMicrotask.bind(this);
+	queue = this.#queue.bind(this);
 
 	constructor(callback: Callback) {
 		this.#callback = callback;
 	}
 
-	queue = this.#queue.bind(this);
 	#queue() {
 		if (this.#queued) return;
 		this.#queued = true;
@@ -20,7 +23,6 @@ export class Microtask implements MicrotaskInterface {
 		window.queueMicrotask(this.#microtask);
 	}
 
-	#microtask = this.#unboundMicrotask.bind(this);
 	#unboundMicrotask() {
 		this.#queued = false;
 		this.#callback();

package/src/query_selector.ts

@@ -18,15 +18,17 @@ export class QuerySelector implements QuerySelectorInterface {
 
 		let query = this.#parentNode.querySelector(selector) ?? undefined;
 		this.#queries.set(selector, query);
+
 		return query;
 	}
 
 	querySelectorAll(selector: string): Element[] {
-		let results = this.#queryAlls.get(selector);
-		if (results) return results;
+		let query = this.#queryAlls.get(selector);
+		if (!query) {
+			query = Array.from(this.#parentNode.querySelectorAll(selector));
+			this.#queryAlls.set(selector, query);
+		}
 
-		let query = Array.from(this.#parentNode.querySelectorAll(selector));
-		this.#queryAlls.set(selector, query);
 		return query;
 	}
 

package/src/wc.ts

@@ -36,15 +36,10 @@ export class Wc implements WcInterface {
 			params;
 
 		this.#internals = host.attachInternals();
-
-		if (this.#internals.shadowRoot) {
-			this.#declarative = true;
-			this.#shadowRoot = this.#internals.shadowRoot;
-		} else {
-			this.#shadowRoot = host.attachShadow(
-				shadowRootInit ?? shadowRootInitFallback,
-			);
-		}
+		this.#declarative = null !== this.#internals.shadowRoot;
+		this.#shadowRoot =
+			this.#internals.shadowRoot ??
+			host.attachShadow(shadowRootInit ?? shadowRootInitFallback);
 
 		this.adoptedStyleSheets = adoptedStyleSheets ?? [];
 		if (formValue) this.setFormValue(formValue, formState);

package/docs/events.md

@@ -1,93 +0,0 @@
-# Events Controller
-
-Add event listeners to webcomponents.
-
-## How to use
-
-Add an `Events` controller to a webcomponent. Use a params object on instantiation.
-
-### Params
-
-An Events `params` object has three properties:
-
-```ts
-interface EventParams {
-	connected?: boolean;
-	listeners: Record<string, EventListenerOrEventListenerObject>;
-	target: EventTarget;
-}
-```
-
-The `Events` controller adds event listeners on a `target` node.
-
-The `target` node can be a shadowRoot, a document, or the custom element itself.
-
-### Controller
-
-Here is an example of using the `Events` controller.
-
-```ts
-import { Events, Wc } from "wctk";
-
-class MyElement extends HTMLElement {
-	#wc = new Wc({ this: host });
-
-	#ec = new Events({
-		target: this.#wc.shadowRoot,
-		listeners: {
-			click: this.#onClick.bind(this),
-			keydown: this.#onKeyDown.bind(this),
-		},
-	});
-
-	#onClick(e: PointerEvent) {
-		// do something with pointer events here!
-	}
-
-	#onKeyDown(e: KeyboardEvent) {
-		// do something with key events here!
-	}
-
-	// lifecycle method
-	connectedCallback() {
-		this.#ec.connect();
-	}
-
-	// lifecycle method
-	disconnectedCallback() {
-		this.#ec.disconnect();
-	}
-}
-```
-
-### Shortcut life-cycle methods
-
-In the example below, the `connected` property is set to true and listeners are immediately added to the `target`.
-
-```ts
-import { Events, Wc } from "wctk";
-
-class MyElement extends HTMLElement {
-	#wc = new Wc({ this: host });
-	#ec = new Events({
-		connected: true,
-		target: this.#wc.shadowRoot,
-		listeners: {
-			click: this.#onClick.bind(this),
-			keydown: this.#onKeyDown.bind(this),
-		},
-	});
-
-	#onClick(e: PointerEvent) {
-		// do something with pointer events here!
-	}
-
-	#onKeyDown(e: KeyEvent) {
-		// do something with key events here!
-	}
-}
-```
-
-### More complex interactions
-
-If your component requires more complex declarative interactions, consider [superaction](https://github.com/w-lfpup/superaction-js/)

package/docs/microtask.md

@@ -1,32 +0,0 @@
-# Microtask Controller
-
-Add callbacks to the `microtask queue`.
-
-## How to use
-
-Add a `Microtask` controller to a webcomponent. Provide a callback.
-
-Call `Microtask.queue()` to push the callback to the microtask queue.
-
-In the example below, a `Microtask` controller queues a render when the `width` attribute changes.
-
-```ts
-import { Microtask } from "wctk";
-
-class MyElement extends HTMLElement {
-	static observedAttributes = ["width"];
-
-	#rc = new Microtask(this.#render.bind(this));
-
-	#render() {
-		// update DOM here!
-	}
-
-	// lifecycle method
-	attributeChangedCallback() {
-		this.#rc.queue();
-	}
-}
-```
-
-The `Microtask.queue()` method can be called multiple times per event loop but the callback will only be called _once_ during the microtaskqueue phase of the event-loop.

package/docs/query_selector.md

@@ -1,37 +0,0 @@
-# QuerySelector Controller
-
-Lazily map selector queries.
-
-## How to use
-
-Add a `QuerySelector` controller to a webcomponent.
-
-```html
-<my-element>
-	<template shadowrootmode="closed">
-		<span greeting>UwU</span>
-	</template>
-</my-element>
-```
-
-Every query is cached. Call `<QuerySelector>.deleteAll()` to reset the cache (helpful after a new render).
-
-```ts
-import { QuerySelector } from "wctk";
-
-class MyElement extends HTMLElement {
-	#wc = new Wc({ host: this });
-	#qc = new QuerySelector(this.#wc.shadowRoot);
-
-	showcaseApi() {
-		// first Element or undefined
-		let greeting = this.#qc.querySelector("[greeting]");
-
-		// Element[]
-		let greetings = this.#qc.querySelectorAll("[greeting]");
-
-		// create new cache
-		this.#qc.deleteAll();
-	}
-}
-```

package/docs/wc.md

@@ -1,55 +0,0 @@
-# Wc Controller
-
-Build a webcomponent.
-
-## How to use
-
-Add a `Wc` controller to a custom element:
-
-```ts
-import { Wc } from "wctk";
-
-class MyElement extends HTMLElement {
-	#wc = new Wc({ host: this });
-}
-```
-
-## Adopted stylesheets and form values
-
-The `Wc` controller interfaces with core web componet APIs like adopted stylesheets and form values.
-
-```ts
-class MyElement extends HTMLElement {
-	#wc = new Wc({
-		host: this,
-		// https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options
-		shadowRootInit: { mode: "open" },
-		adoptedStyleSheets: [],
-		formValue: "^_^",
-		formState: ":3",
-	});
-
-	showcaseApi() {
-		// true if declarative shadow dom is present
-		this.#wc.delcarative;
-
-		// https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
-		this.#wc.shadowRoot;
-
-		// https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets
-		this.#wc.adopedStylesheets;
-
-		// https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue
-		this.#wc.setFormValue(value, state);
-
-		// https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity
-		this.#wc.checkValidity();
-
-		// https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity
-		this.#wc.reportValidity();
-
-		// https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setValidity
-		this.#wc.setValidity(flags, message);
-	}
-}
-```

package/examples/counter/index.html

@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-us">
-	<head>
-		<meta charset=utf-8>
-		<meta name=viewport content="width=device-width, initial-scale=1">
-		<script type="importmap">
-			{
-				"imports": {
-					"wctk": "../../dist/mod.js"
-				}
-			}
-		</script>
-		<script src="./mod.js" type=module></script>
-	</head>
-	<body>
-		<main>
-			<!-- webcomponent -->
-			<counter-wc>
-				<template shadowrootmode="closed">
-					<button decrease>-</button>
-					<slot></slot>
-					<button increase>+</button>				
-				</template>
-
-				<!-- DOM content -->
-				<span>42</span>
-			</counter-wc>
-		</main>
-	</body>
-</html>

package/examples/counter/mod.js

@@ -1,37 +0,0 @@
-import { Wc, Events } from "wctk";
-class Counter extends HTMLElement {
-    #wc = new Wc({ host: this });
-    #ev = new Events({
-        connected: true,
-        target: this.#wc.shadowRoot,
-        listeners: {
-            click: this.#clickHandler.bind(this),
-        },
-    });
-    #state = getStateFromDOM(this.#wc.shadowRoot);
-    #clickHandler(e) {
-        let increment = getIncrement(e);
-        if (increment) {
-            this.#state.count += increment;
-            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 slotted of slot.assignedNodes()) {
-            if (slotted instanceof HTMLSpanElement)
-                el = slotted;
-        }
-    return { el, count: parseInt(el?.textContent ?? "0") };
-}
-function getIncrement(e) {
-    if (e.target instanceof HTMLButtonElement) {
-        return e.target.hasAttribute("increase") ? 1 : -1;
-    }
-}
-customElements.define("counter-wc", Counter);

package/examples/counter/mod.ts

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

package/examples/form_associated/index.html

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-us">
-	<head>
-		<meta charset=utf-8>
-		<meta name=viewport content="width=device-width, initial-scale=1">
-		<script type="importmap">
-			{
-				"imports": {
-					"wctk": "../../dist/mod.js"
-				}
-			}
-		</script>
-		<script src="./mod.js" type=module></script>
-	</head>
-	<body>
-		<main>
-			<form>
-				<!-- html component input -->
-				<input name="html_element">
-				<!-- custom element input -->
-				<text-input name="web_component">
-					<template shadowrootmode="closed">
-						<input>
-					</template>
-				</text-input>
-				<button type="submit">submit !</button>
-			</form>
-			<pre results></pre>
-		</main>
-	</body>
-</html>

package/examples/form_associated/mod.js

@@ -1,11 +0,0 @@
-import { TextInput } from "./text_input.js";
-customElements.define("text-input", TextInput);
-const results = document.querySelector("[results]");
-document.addEventListener("submit", function (e) {
-    if (!(e.target instanceof HTMLFormElement))
-        return;
-    e.preventDefault();
-    let formdata = new FormData(e.target);
-    if (results)
-        results.textContent = JSON.stringify(Object.fromEntries(formdata), undefined, " ");
-});

package/examples/form_associated/mod.ts

@@ -1,20 +0,0 @@
-import { TextInput } from "./text_input.js";
-
-customElements.define("text-input", TextInput);
-
-const results = document.querySelector("[results]");
-
-document.addEventListener("submit", function (e: SubmitEvent) {
-	if (!(e.target instanceof HTMLFormElement)) return;
-
-	e.preventDefault();
-
-	let formdata: FormData = new FormData(e.target);
-
-	if (results)
-		results.textContent = JSON.stringify(
-			Object.fromEntries(formdata),
-			undefined,
-			" ",
-		);
-});

package/examples/form_associated/text_input.js

@@ -1,22 +0,0 @@
-import { Wc, Events } from "wctk";
-export class TextInput extends HTMLElement {
-    static formAssociated = true;
-    #wc = new Wc({ host: this });
-    #ev = new Events({
-        connected: true,
-        target: this.#wc.shadowRoot,
-        listeners: {
-            change: this.#changeHandler.bind(this),
-        },
-    });
-    #changeHandler(event) {
-        let { target } = event;
-        if (target instanceof HTMLInputElement)
-            this.#wc.setFormValue(target.value);
-    }
-    formStateRestoreCallback(state) {
-        let input = this.#wc.shadowRoot.querySelector("input");
-        if (input)
-            input.value = state;
-    }
-}

package/examples/form_associated/text_input.ts

@@ -1,31 +0,0 @@
-/*
-	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({
-		connected: true,
-		target: this.#wc.shadowRoot,
-		listeners: {
-			change: this.#changeHandler.bind(this),
-		},
-	});
-
-	#changeHandler(event: Event): void {
-		let { target } = event;
-		if (target instanceof HTMLInputElement)
-			this.#wc.setFormValue(target.value);
-	}
-
-	// lifecycle method
-	formStateRestoreCallback(state: string) {
-		let input = this.#wc.shadowRoot.querySelector("input");
-		if (input) input.value = state;
-	}
-}

package/examples/stopwatch/index.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-us">
-	<head>
-		<meta charset=utf-8>
-		<meta name=viewport content="width=device-width, initial-scale=1">
-		<script type="importmap">
-			{
-				"imports": {
-					"wctk": "../../dist/mod.js"
-				}
-			}
-		</script>
-		<script src="./mod.js" type=module></script>
-	</head>
-	<body>
-		<main>
-			<!-- 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,13 +0,0 @@
-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))
-        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,13 +0,0 @@
-import { Stopwatch } from "./stopwatch.js";
-
-customElements.define("stopwatch-wc", Stopwatch);
-
-const stopwatch = document.querySelector<Stopwatch>("stopwatch-wc");
-
-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,48 +0,0 @@
-import { Wc, Microtask } from "wctk";
-export class Stopwatch extends HTMLElement {
-    #wc = new Wc({ host: this });
-    #rc = new Microtask(this.#render.bind(this));
-    #state = getStateFromShadowDOM(this.#wc.shadowRoot);
-    #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();
-    }
-    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");
-    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,70 +0,0 @@
-/*
-	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 retrieve
-// accurate timestamp data for a stopwatch.
-
-import { Wc, Microtask } from "wctk";
-
-interface State {
-	count: number;
-	el: HTMLSpanElement | null;
-	prevTimestamp: DOMHighResTimeStamp;
-	receipt: number | void;
-}
-
-export class Stopwatch extends HTMLElement {
-	#wc = new Wc({ host: this });
-	#rc = new Microtask(this.#render.bind(this));
-	#state: State = getStateFromShadowDOM(this.#wc.shadowRoot);
-
-	#render() {
-		let { el } = this.#state;
-		if (el) el.textContent = this.#state.count.toFixed(2);
-	}
-
-	#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.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: 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

@@ -1,11 +0,0 @@
-{
-	"extends": "../tsconfig.json",
-	"compilerOptions": {
-		"declaration": false,
-		"removeComments": true,
-		"paths": {
-			"wctk": ["../dist/mod.d.ts"],
-			"wctk/*": ["../dist/"]
-		}
-	}
-}

package/tests/dist/events.tests.js

@@ -1,60 +0,0 @@
-import { findElement, elementClick, elementSendKeys, } from "@w-lfpup/jackrabbit/browser/dist/commands.js";
-import { Events } from "../../dist/mod.js";
-let eventController;
-let eventReceipts = [];
-function setup() {
-    eventController = new Events({
-        target: document.body,
-        connected: true,
-        listeners: {
-            click: function (e) {
-                eventReceipts.push(e);
-            },
-            input: function (e) {
-                eventReceipts.push(e);
-            },
-        },
-    });
-    document.body.setHTMLUnsafe(`
-		<input>
-		<button>
-	`);
-}
-async function testClickEvents() {
-    let buttonId = await findElement("button");
-    if (!buttonId)
-        return "failed to query button";
-    await elementClick(buttonId);
-    await elementClick(buttonId);
-    let clicks = [];
-    for (let event of eventReceipts) {
-        if ("click" === event.type)
-            clicks.push(event);
-    }
-    if (2 !== clicks.length)
-        return `incorrect number of clicks: ${clicks.length}/2`;
-}
-async function testInputEvents() {
-    const expectedMessage = "UwU";
-    let inputId = await findElement("input");
-    if (!inputId)
-        return "failed to query input element";
-    await elementSendKeys(inputId, expectedMessage);
-    let inputs = [];
-    for (let event of eventReceipts) {
-        if ("input" === event.type)
-            inputs.push(event);
-    }
-    if (3 !== inputs.length)
-        return `incorrect number of input events: ${inputs.length}/1`;
-    let input = document.body.querySelector("input");
-    if (expectedMessage !== input?.value)
-        return `expected input: ${expectedMessage}, found: ${input?.value}`;
-}
-function tearDown() {
-    eventController.disconnect();
-}
-export const tests = [setup, testClickEvents, testInputEvents, tearDown];
-export const options = {
-    title: import.meta.url,
-};

package/tests/dist/microtask.tests.js

@@ -1,38 +0,0 @@
-import { Microtask } from "../../dist/mod.js";
-let microtaskController;
-let expectedSleepy = "-_-";
-let expectedHappy = "^_^";
-let span;
-function nextFrame() {
-    return new Promise((resolve, reject) => {
-        window.queueMicrotask(function () {
-            resolve();
-        });
-    });
-}
-function updateExpression() {
-    if (!span)
-        return;
-    span.textContent = expectedHappy;
-}
-function setup() {
-    microtaskController = new Microtask(updateExpression);
-    document.body.setHTMLUnsafe(`
-		<span>-_-</span>
-	`);
-    span = document.querySelector("span");
-}
-async function testTaskCycle() {
-    if (expectedSleepy !== span?.textContent)
-        return "wrong expression, expected sleepy -_-";
-    microtaskController.queue();
-    if (expectedSleepy !== span?.textContent)
-        return "still wrong expression, still expected sleepy -_-";
-    await nextFrame();
-    if (expectedHappy !== span?.textContent)
-        return "wrong expression after frame, expected happy ^_^";
-}
-export const tests = [setup, testTaskCycle];
-export const options = {
-    title: import.meta.url,
-};

package/tests/dist/mod.js

@@ -1,10 +0,0 @@
-import * as EventTests from "./events.tests.js";
-import * as MicrotaskQueueTests from "./microtask.tests.js";
-import * as QuerySelectorTests from "./query_selector.tests.js";
-import * as WcTests from "./wc.tests.js";
-export const testModules = [
-    EventTests,
-    MicrotaskQueueTests,
-    QuerySelectorTests,
-    WcTests,
-];

package/tests/dist/query_selector.tests.js

@@ -1,43 +0,0 @@
-import { QuerySelector } from "../../dist/mod.js";
-let qs;
-function setup() {
-    qs = new QuerySelector(document.body);
-    document.body.setHTMLUnsafe(`
-		<p>
-			<span data-first>hello</span>
-			<span data-second>hai :3</span>
-		</p>
-	`);
-}
-function testQuerySelector() {
-    let p = qs.querySelector("p");
-    let span = qs.querySelector("[data-second]");
-    if (!p)
-        return "failed to query p";
-    if (!span)
-        return "failed to query span";
-}
-function testQuerySelectorAll() {
-    let peas = qs.querySelectorAll("p");
-    let spans = qs.querySelectorAll("span");
-    if (!peas.length)
-        return "failed to query peas";
-    if (!spans.length)
-        return "failed to query spans";
-    if (1 !== peas.length)
-        return `failed to query ${peas.length}/1 peas`;
-    if (2 !== spans.length)
-        return `failed to query ${spans.length}/2 spans`;
-}
-function testDeleteAll() {
-    qs.deleteAll();
-}
-export const tests = [
-    setup,
-    testQuerySelector,
-    testQuerySelectorAll,
-    testDeleteAll,
-];
-export const options = {
-    title: import.meta.url,
-};

package/tests/dist/wc.tests.js

@@ -1,41 +0,0 @@
-import { Wc } from "../../dist/mod.js";
-class WcDeclarativeElement extends HTMLElement {
-    #wc = new Wc({ host: this });
-    get delcarative() {
-        return this.#wc.declarative;
-    }
-}
-window.customElements.define("declarative-element", WcDeclarativeElement);
-let testEl;
-let declarativeEl;
-function setup() {
-    document.body.setHTMLUnsafe(`
-		<declarative-element></declarative-element>
-		<declarative-element data-declarative>
-			<template shadowrootmode="open">
-				<p>howdy!</p>
-			</template>
-		</declarative-element>
-	`);
-    [testEl, declarativeEl] = document.querySelectorAll("declarative-element");
-}
-function testDeclarativeShadowDomDoesNotExist() {
-    if (!testEl)
-        return "failed to query declarative-element";
-    if (testEl.delcarative)
-        return "element incorrectly labelled as declarative";
-}
-function testDeclarativeShadowDomExists() {
-    if (!declarativeEl)
-        return "failed to query declarative-element with declarative shadow dom";
-    if (!declarativeEl.delcarative)
-        return "element incorrectly labelled as not declarative";
-}
-export const tests = [
-    setup,
-    testDeclarativeShadowDomExists,
-    testDeclarativeShadowDomDoesNotExist,
-];
-export const options = {
-    title: import.meta.url,
-};

package/tests/src/events.tests.ts

@@ -1,73 +0,0 @@
-import {
-	findElement,
-	elementClick,
-	elementSendKeys,
-} from "@w-lfpup/jackrabbit/browser/dist/commands.js";
-import { Events } from "../../dist/mod.js";
-
-let eventController: Events;
-let eventReceipts: Event[] = [];
-
-function setup() {
-	eventController = new Events({
-		target: document.body,
-		connected: true,
-		listeners: {
-			click: function (e: PointerEvent) {
-				eventReceipts.push(e);
-			},
-			input: function (e: InputEvent) {
-				eventReceipts.push(e);
-			},
-		},
-	});
-
-	document.body.setHTMLUnsafe(`
-		<input>
-		<button>
-	`);
-}
-
-async function testClickEvents() {
-	let buttonId = await findElement("button");
-	if (!buttonId) return "failed to query button";
-	await elementClick(buttonId);
-	await elementClick(buttonId);
-
-	let clicks = [];
-	for (let event of eventReceipts) {
-		if ("click" === event.type) clicks.push(event);
-	}
-
-	if (2 !== clicks.length)
-		return `incorrect number of clicks: ${clicks.length}/2`;
-}
-
-async function testInputEvents() {
-	const expectedMessage = "UwU";
-	let inputId = await findElement("input");
-	if (!inputId) return "failed to query input element";
-
-	await elementSendKeys(inputId, expectedMessage);
-	let inputs = [];
-	for (let event of eventReceipts) {
-		if ("input" === event.type) inputs.push(event);
-	}
-
-	if (3 !== inputs.length)
-		return `incorrect number of input events: ${inputs.length}/1`;
-
-	let input = document.body.querySelector("input");
-	if (expectedMessage !== input?.value)
-		return `expected input: ${expectedMessage}, found: ${input?.value}`;
-}
-
-function tearDown() {
-	eventController.disconnect();
-}
-
-export const tests = [setup, testClickEvents, testInputEvents, tearDown];
-
-export const options = {
-	title: import.meta.url,
-};

package/tests/src/microtask.tests.ts

@@ -1,54 +0,0 @@
-import { findElement, log } from "@w-lfpup/jackrabbit/browser/dist/commands.js";
-import { Microtask } from "../../dist/mod.js";
-
-let microtaskController: Microtask;
-
-let expectedSleepy = "-_-";
-let expectedHappy = "^_^";
-
-let span: HTMLSpanElement | null;
-
-function nextFrame() {
-	return new Promise<void>((resolve, reject) => {
-		window.queueMicrotask(function () {
-			resolve();
-		});
-	});
-}
-
-function updateExpression() {
-	if (!span) return;
-
-	span.textContent = expectedHappy;
-}
-
-function setup() {
-	microtaskController = new Microtask(updateExpression);
-
-	document.body.setHTMLUnsafe(`
-		<span>-_-</span>
-	`);
-
-	span = document.querySelector("span");
-}
-
-async function testTaskCycle() {
-	if (expectedSleepy !== span?.textContent)
-		return "wrong expression, expected sleepy -_-";
-
-	microtaskController.queue();
-
-	if (expectedSleepy !== span?.textContent)
-		return "still wrong expression, still expected sleepy -_-";
-
-	await nextFrame();
-
-	if (expectedHappy !== span?.textContent)
-		return "wrong expression after frame, expected happy ^_^";
-}
-
-export const tests = [setup, testTaskCycle];
-
-export const options = {
-	title: import.meta.url,
-};

package/tests/src/mod.ts

@@ -1,11 +0,0 @@
-import * as EventTests from "./events.tests.js";
-import * as MicrotaskQueueTests from "./microtask.tests.js";
-import * as QuerySelectorTests from "./query_selector.tests.js";
-import * as WcTests from "./wc.tests.js";
-
-export const testModules = [
-	EventTests,
-	MicrotaskQueueTests,
-	QuerySelectorTests,
-	WcTests,
-];

package/tests/src/query_selector.tests.ts

@@ -1,46 +0,0 @@
-import { QuerySelector } from "../../dist/mod.js";
-
-let qs: QuerySelector;
-function setup() {
-	qs = new QuerySelector(document.body);
-
-	document.body.setHTMLUnsafe(`
-		<p>
-			<span data-first>hello</span>
-			<span data-second>hai :3</span>
-		</p>
-	`);
-}
-
-function testQuerySelector() {
-	let p = qs.querySelector("p");
-	let span = qs.querySelector("[data-second]");
-
-	if (!p) return "failed to query p";
-	if (!span) return "failed to query span";
-}
-
-function testQuerySelectorAll() {
-	let peas = qs.querySelectorAll("p");
-	let spans = qs.querySelectorAll("span");
-
-	if (!peas.length) return "failed to query peas";
-	if (!spans.length) return "failed to query spans";
-	if (1 !== peas.length) return `failed to query ${peas.length}/1 peas`;
-	if (2 !== spans.length) return `failed to query ${spans.length}/2 spans`;
-}
-
-function testDeleteAll() {
-	qs.deleteAll();
-}
-
-export const tests = [
-	setup,
-	testQuerySelector,
-	testQuerySelectorAll,
-	testDeleteAll,
-];
-
-export const options = {
-	title: import.meta.url,
-};

package/tests/src/wc.tests.ts

@@ -1,52 +0,0 @@
-import { Wc } from "../../dist/mod.js";
-
-class WcDeclarativeElement extends HTMLElement {
-	#wc = new Wc({ host: this });
-
-	get delcarative(): boolean {
-		return this.#wc.declarative;
-	}
-}
-
-window.customElements.define("declarative-element", WcDeclarativeElement);
-
-let testEl: WcDeclarativeElement | undefined;
-let declarativeEl: WcDeclarativeElement | undefined;
-
-function setup() {
-	document.body.setHTMLUnsafe(`
-		<declarative-element></declarative-element>
-		<declarative-element data-declarative>
-			<template shadowrootmode="open">
-				<p>howdy!</p>
-			</template>
-		</declarative-element>
-	`);
-
-	[testEl, declarativeEl] = document.querySelectorAll<WcDeclarativeElement>(
-		"declarative-element",
-	);
-}
-
-function testDeclarativeShadowDomDoesNotExist() {
-	if (!testEl) return "failed to query declarative-element";
-	if (testEl.delcarative)
-		return "element incorrectly labelled as declarative";
-}
-
-function testDeclarativeShadowDomExists() {
-	if (!declarativeEl)
-		return "failed to query declarative-element with declarative shadow dom";
-	if (!declarativeEl.delcarative)
-		return "element incorrectly labelled as not declarative";
-}
-
-export const tests = [
-	setup,
-	testDeclarativeShadowDomExists,
-	testDeclarativeShadowDomDoesNotExist,
-];
-
-export const options = {
-	title: import.meta.url,
-};

package/tests/tsconfig.json

@@ -1,8 +0,0 @@
-{
-	"extends": "../tsconfig.json",
-	"compilerOptions": {
-		"declaration": false,
-		"rootDir": "src/",
-		"outDir": "dist/"
-	}
-}