@w-lfpup/wctk 0.1.0

package/src/microtask.ts

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

package/src/mod.ts

@@ -0,0 +1,6 @@
+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";

package/src/query_selector.ts

@@ -0,0 +1,46 @@
+export interface QuerySelectorParamsInterface {
+	parent: ParentNode;
+}
+
+export interface QuerySelectorInterface {
+	querySelector(name: string): Element | undefined;
+	querySelectorAll(name: string): Element[] | undefined;
+	deleteAll(): void;
+}
+
+export class QuerySelector implements QuerySelectorInterface {
+	#queries: Map<string, Element[]> = new Map();
+	#params: QuerySelectorParamsInterface;
+
+	constructor(params: QuerySelectorParamsInterface) {
+		this.#params = params;
+	}
+
+	querySelector(selector: string): Element | undefined {
+		return getQuery(this.#params, this.#queries, selector)[0];
+	}
+
+	querySelectorAll(selector: string): Element[] {
+		return getQuery(this.#params, this.#queries, selector);
+	}
+
+	deleteAll() {
+		this.#queries = new Map();
+	}
+}
+
+function getQuery(
+	params: QuerySelectorParamsInterface,
+	queries: Map<string, Element[]>,
+	selector: string,
+): Element[] {
+	const { parent } = params;
+
+	let results = queries.get(selector);
+	if (!results) {
+		results = Array.from(parent.querySelectorAll(selector));
+		queries.set(selector, results);
+	}
+
+	return results;
+}

package/src/subscription.ts

@@ -0,0 +1,47 @@
+export type Subscribe<E, A> = (cb: E) => A;
+export type Unsubscribe<A> = (affect: A) => void;
+
+export interface SubscriptionInterface {
+	connect(): void;
+	disconnect(): void;
+}
+
+export interface SubscriptionParamsInterface<E, A> {
+	host: Object;
+	callback: E;
+	connected?: boolean;
+	subscribe: Subscribe<E, A>;
+	unsubscribe: Unsubscribe<A>;
+}
+
+export class Subscription<E, A> implements SubscriptionInterface {
+	#callback: E;
+	#affect?: A;
+	#subscribe: Subscribe<E, A>;
+	#unsubscribe: Unsubscribe<A>;
+
+	constructor(params: SubscriptionParamsInterface<E, A>) {
+		let { host, callback, connected, subscribe, unsubscribe } = params;
+
+		this.#subscribe = subscribe;
+		this.#unsubscribe = unsubscribe;
+
+		this.#callback = callback;
+		if (
+			callback instanceof Function &&
+			!callback.hasOwnProperty("prototype")
+		) {
+			this.#callback = callback.bind(host);
+		}
+
+		if (connected) this.connect();
+	}
+
+	connect() {
+		if (!this.#affect) this.#affect = this.#subscribe(this.#callback);
+	}
+
+	disconnect() {
+		if (this.#affect) this.#unsubscribe(this.#affect);
+	}
+}

package/src/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"rootDir": "./",
+		"outDir": "../dist"
+	}
+}

package/src/wc.ts

@@ -0,0 +1,87 @@
+export interface WcElementInterface {
+	attachInternals: HTMLElement["attachInternals"];
+	attachShadow: Element["attachShadow"];
+}
+
+type FormDataArguments = Parameters<ElementInternals["setFormValue"]>;
+
+export interface WcParamsInterface {
+	host: WcElementInterface;
+	adoptedStyleSheets?: CSSStyleSheet[];
+	shadowRootInit?: ShadowRootInit;
+	formValue?: FormDataArguments[0];
+	formState?: FormDataArguments[1];
+}
+
+export interface WcInterface {
+	readonly declarative: boolean;
+	readonly shadowRoot: ShadowRoot;
+	adoptedStyleSheets: DocumentOrShadowRoot["adoptedStyleSheets"];
+	setFormValue: ElementInternals["setFormValue"];
+	setValidity: ElementInternals["setValidity"];
+	reportValidity: ElementInternals["reportValidity"];
+}
+
+const shadowRootInitFallback: ShadowRootInit = {
+	mode: "closed",
+};
+
+export class Wc implements WcInterface {
+	#declarative: boolean = true;
+	#internals: ElementInternals;
+	#shadowRoot: ShadowRoot;
+
+	constructor(params: WcParamsInterface) {
+		let { host, shadowRootInit, adoptedStyleSheets, formValue, formState } =
+			params;
+		this.#internals = host.attachInternals();
+
+		let { shadowRoot } = this.#internals;
+		if (!shadowRoot) {
+			this.#declarative = false;
+			shadowRoot = host.attachShadow(
+				shadowRootInit ?? shadowRootInitFallback,
+			);
+		}
+		this.#shadowRoot = shadowRoot;
+
+		if (formValue) this.setFormValue(formValue, formState);
+		if (adoptedStyleSheets) this.adoptedStyleSheets = adoptedStyleSheets;
+	}
+
+	get declarative(): boolean {
+		return this.#declarative;
+	}
+
+	get shadowRoot(): ShadowRoot {
+		return this.#shadowRoot;
+	}
+
+	get adoptedStyleSheets(): CSSStyleSheet[] {
+		return this.#shadowRoot.adoptedStyleSheets ?? [];
+	}
+
+	set adoptedStyleSheets(stylesheets: CSSStyleSheet[]) {
+		this.#shadowRoot.adoptedStyleSheets = stylesheets;
+	}
+
+	checkValidity() {
+		return this.#internals.checkValidity();
+	}
+
+	reportValidity(): boolean {
+		return this.#internals.reportValidity();
+	}
+
+	setFormValue(value: FormDataArguments[0], state?: FormDataArguments[1]) {
+		this.#internals.setFormValue(value, state);
+	}
+
+	setValidity(
+		flags?: ValidityStateFlags,
+		message?: string,
+		anchor?: HTMLElement,
+	) {
+		this.#internals.setValidity(flags, message, anchor);
+	}
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"lib": ["DOM", "ESNext"],
+		"declaration": true,
+		"strict": true,
+		"module": "esnext",
+		"target": "esnext"
+	}
+}