@w-lfpup/wctk 0.1.1 → 0.2.1

package/src/wc.ts

@@ -3,14 +3,14 @@ export interface WcElementInterface {
 	attachShadow: Element["attachShadow"];
 }
 
-type FormDataArguments = Parameters<ElementInternals["setFormValue"]>;
+type FormValueArgs = Parameters<ElementInternals["setFormValue"]>;
 
 export interface WcParamsInterface {
 	host: WcElementInterface;
 	adoptedStyleSheets?: CSSStyleSheet[];
 	shadowRootInit?: ShadowRootInit;
-	formValue?: FormDataArguments[0];
-	formState?: FormDataArguments[1];
+	formValue?: FormValueArgs[0];
+	formState?: FormValueArgs[1];
 }
 
 export interface WcInterface {
@@ -27,26 +27,26 @@ const shadowRootInitFallback: ShadowRootInit = {
 };
 
 export class Wc implements WcInterface {
-	#declarative: boolean = true;
+	#declarative: boolean = false;
 	#internals: ElementInternals;
 	#shadowRoot: ShadowRoot;
 
 	constructor(params: WcParamsInterface) {
-		let { adoptedStyleSheets, host, formState, formValue, shadowRootInit } = params;
+		let { adoptedStyleSheets, host, formState, formValue, shadowRootInit } =
+			params;
 
 		this.#internals = host.attachInternals();
 
-		let { shadowRoot } = this.#internals;
-		if (shadowRoot) {
-			this.#shadowRoot = shadowRoot;
+		if (this.#internals.shadowRoot) {
+			this.#declarative = true;
+			this.#shadowRoot = this.#internals.shadowRoot;
 		} else {
-			this.#declarative = false;
 			this.#shadowRoot = host.attachShadow(
 				shadowRootInit ?? shadowRootInitFallback,
 			);
 		}
 
-		if (adoptedStyleSheets) this.adoptedStyleSheets = adoptedStyleSheets;
+		this.adoptedStyleSheets = adoptedStyleSheets ?? [];
 		if (formValue) this.setFormValue(formValue, formState);
 	}
 
@@ -74,7 +74,7 @@ export class Wc implements WcInterface {
 		return this.#internals.reportValidity();
 	}
 
-	setFormValue(value: FormDataArguments[0], state?: FormDataArguments[1]) {
+	setFormValue(value: FormValueArgs[0], state?: FormValueArgs[1]) {
 		this.#internals.setFormValue(value, state);
 	}
 

package/tests/dist/events.tests.js

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,52 @@
+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

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

package/dist/bind.d.ts

@@ -1,7 +0,0 @@
-export interface BindParamsInterface {
-    host: Object;
-    callbacks: Function[];
-}
-export declare class Bind {
-    constructor(params: BindParamsInterface);
-}

package/dist/bind.js

@@ -1,14 +0,0 @@
-export class Bind {
-    constructor(params) {
-        let { host, callbacks } = params;
-        for (let callback of callbacks) {
-            // do not bind and replace already bound functions
-            if (callback instanceof Function &&
-                !callback.hasOwnProperty("prototype")) {
-                let { name } = callback;
-                if (!name.startsWith("#"))
-                    host[name] = callback.bind(host);
-            }
-        }
-    }
-}

package/docs/bind.md

@@ -1,26 +0,0 @@
-# Bind Controller
-
-Bind functions to objects.
-
-This utility is mainly designed to avoid using the constructor.
-
-## How to use
-
-Add a `Bind` controller to a web component.
-
-Add a list of methods on instantiation. The methods cannot be `#private`.
-
-```ts
-import { Bind } from "wctk";
-
-class MyElement extends HTMLElement {
-	#bc = new Bind({
-		host: this,
-		callbacks: [this.elementCallback],
-	};
-
-	elementCallback(e: KeyboardEvent) {
-		// This function can be passed as a callback to event listeners now!
-	}
-}
-```

package/docs/subscription.md

@@ -1,85 +0,0 @@
-# Subscribe Controller
-
-Subscribe web components to external state.
-
-## How to use
-
-### Callbacks
-
-Create functions that subscribe and unsubscribe an element from a data store.
-
-The result of the subscribe function is passed as the to the unsubscribe function.
-
-```ts
-import { Datastore } from "./some-datastore.js";
-
-let store = new Datastore();
-
-function subscribe(callback): number {
-	return store.subscribe(callback);
-}
-
-function unsubscribe(results: number): void {
-	store.unsubscribe(results);
-}
-
-export { store, subscribe, unsubscribe };
-```
-
-### Controller
-
-Add a `Subscription` controller to a web component. Pass subscribe, unsubscribe, and a callback function on instantiation.
-
-```ts
-import { Subscription } from "wctk";
-import { getState, subscribe, unsubscribe } from "./datastore.js";
-
-class MyElement extends HTMLElement {
-	#sc = new Subscription({
-		host: this,
-		callback: this.#update,
-		subscribe,
-		unsubscribe,
-	});
-
-	#update() {
-		let state = getState();
-		// do something with state
-	}
-
-	// lifecycle method
-	connectedCallback() {
-		this.#sc.connect();
-		this.#update();
-	}
-
-	// lifecycle method
-	disconnectedCallback() {
-		this.#sc.disconnect();
-	}
-}
-```
-
-### Shortcut life cycle methods
-
-In the example below, the `connected` property is set to true and the component is immediately subscribed on instantiation.
-
-```ts
-import { Subscription } from "wctk";
-import { getState, subscribe, unsubscribe } from "./datastore.js";
-
-class MyElement extends HTMLElement {
-	#sc = new Subscription({
-		host: this,
-		callback: this.#update,
-		connected: true,
-		subscribe,
-		unsubscribe,
-	});
-
-	#update() {
-		let state = getState();
-		// do something with state
-	}
-}
-```

package/src/bind.ts

@@ -1,22 +0,0 @@
-export interface BindParamsInterface {
-	host: Object;
-	callbacks: Function[];
-}
-
-export class Bind {
-	constructor(params: BindParamsInterface) {
-		let { host, callbacks } = params;
-
-		for (let callback of callbacks) {
-			// do not bind and replace already bound functions
-			if (
-				callback instanceof Function &&
-				!callback.hasOwnProperty("prototype")
-			) {
-				let { name } = callback;
-				if (!name.startsWith("#"))
-					host[name as keyof typeof host] = callback.bind(host);
-			}
-		}
-	}
-}