@seahax/elemental 0.1.0

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/README.md

@@ -0,0 +1,166 @@
+# @seahax/elemental
+
+Small building blocks with a lot of potential.
+
+Extremely small reactive web components library, containing everything you really need to build anything up to a full reactive application, with only about 3KB overhead (depending on compression, minification, and tree-shaking).
+
+- No Build Tooling
+- No Dependencies
+- Portable Web Components
+- Global & Local Reactivity
+- Efficient DOM Rendering
+- Functional Hooks
+- Routing
+
+## Define A Web Component
+
+```ts
+import {
+  defineComponent,
+  useRef,
+  useStore,
+  useAttributes,
+  useRoute,
+  useLoading,
+  useEffect,
+  h,
+} from '@seahax/elemental';
+
+export const MyComponent = defineComponent((shadow) => {
+  // This function is run once after the component is created, when it is
+  // first connected to the document.
+
+  // Create HTML elements and save references to them.
+  const myInput = h('input');
+
+  // Render content to the shadow DOM.
+  h(shadow, [
+    h('style', [/* css */]),
+    h('p', { class: 'hello' }, ['Hello, World!']),
+    h('div', { class: 'inputs' }, [
+      myInput,
+    ]),
+  ]);
+
+  // Use reference (reactive state) hooks.
+  const localStateRef = useRef('initial value', (newValue) => {
+    // Handle
+  });
+  const globalStateRef = useStore(myStore, select, mutate);
+  const [dataValueRef, ...] = useAttributes('data-value', ...);
+  const [routeMatchRef, routeStateRef] = useRoute('/path/', {
+    match: 'prefix', // 'exact' | 'prefix' | RegExp
+    source: 'pathname', // 'pathname' | 'hash'
+  });
+
+  // Reactively load async data.
+  const loadingStateRef = useLoading([
+    // dependency references
+  ], async (signal, ...dependencyValues) => {
+    // Reactive async code runs when the component is connected to the
+    // document, and when any of the dependencies change. The signal is
+    // aborted if the dependencies change before the promise returned by
+    // this function is resolved.
+  });
+
+  // React to reference changes.
+  useEffect([
+    // dependency references
+    localStateRef,
+    globalStateRef,
+    dataValueRef,
+    routeMatchRef,
+    routeStateRef,
+    loadingStateRef,
+  ], (...dependencyValues) => {
+    // Reactive code runs when the component is connected to the document,
+    // and when any of the dependencies change.
+
+    return () => {
+      // Cleanup before the next effect callback and after the component
+      // is disconnected from the document.
+    };
+  });
+});
+```
+
+## Customize The Shadow Root
+
+```ts
+const MyComponent = defineComponent(
+  (shadow) => {
+    // Renderer...
+  },
+  {
+    // Shadow root options.
+    shadow: {
+      mode: 'closed',
+      ...
+    }
+  }
+);
+```
+
+## Add Web Component Properties
+
+```ts
+interface Props {
+  checked: boolean;
+}
+
+const MyComponent = defineComponent<Props>(
+  (shadow, propRefs) => {
+    // Get properties (the ref value is initially undefined).
+    const isChecked = propRefs.checked.value ?? shadow.host.hasAttribute('checked');
+
+    // Set properties.
+    propRefs.checked.value = true;
+
+    // Alternatively, access the property on the host element.
+    const isChecked = shadow.host.checked;
+    shadow.host.checked = true;
+
+    // React to property changes.
+    useEffect([propRefs.checked], (checked) => {
+      ...
+    });
+  },
+  {
+    props: {
+      // Return a property descriptor that uses a pre-defined ref and the
+      // host element. The property descriptor must have a `get` function,
+      // `value` is not allowed, and all other properties are optional.
+      // The ref value is initially undefined.
+      checked: (ref, host) => {
+        return {
+          get: () => ref.value ?? host.hasAttribute('checked'),
+          set: (value) => (ref.value = value),
+        };
+      },
+    },
+  }),
+);
+
+const element = new MyComponent();
+
+// Properties are defined publicly on component (`HTMLElement`) instances.
+element.checked = true;
+```
+
+## Render Lists With Keys
+
+```ts
+// Create a reusable root element.
+const parent = h('div');
+
+h(parent, items.map((item) => {
+  // No previous children, so all children will be created.
+  return h('p', { 'data-key': item.id }, [item.text]);
+}));
+
+// Update children with matching keys.
+h(parent, items.map((item) => {
+  // Second render, so reuse (and update) children with matching keys.
+  return h('p', { 'data-key': item.id }, [item.text]);
+}));
+```

package/dist/component.d.ts

@@ -0,0 +1,53 @@
+import { type Callbacks } from './internal/callbacks.ts';
+import { $$ref, $$renderContextStack } from './internal/constants.ts';
+type SafeProps<TProps> = any extends any ? {
+    [P in keyof TProps as P extends keyof HTMLElement ? never : P]: TProps[P];
+} : never;
+export interface ComponentConstructor<TProps extends object> {
+    new (): ComponentWithProps<TProps>;
+}
+export interface ComponentOptions<TProps extends object> {
+    readonly shadow?: Partial<ShadowRootInit>;
+    readonly props?: ComponentPropDescriptors<TProps>;
+}
+export type ComponentPropDescriptors<TProps extends object> = {
+    readonly [P in keyof SafeProps<TProps>]: ComponentPropDescriptorFactory<TProps[P]>;
+};
+export type ComponentPropDescriptorFactory<TType> = (ref: Ref<TType | undefined>, host: HTMLElement) => ComponentPropDescriptor<TType>;
+export interface ComponentPropDescriptor<T> extends Omit<PropertyDescriptor, 'value' | 'get' | 'set'> {
+    get(): T;
+    set?(value: T): void;
+}
+export type ComponentWithProps<TProps extends object> = HTMLElement & {
+    -readonly [P in keyof SafeProps<TProps>]: TProps[P];
+};
+export type ComponentShadowRoot<TProps extends object> = Omit<ShadowRoot, 'host'> & {
+    readonly host: ComponentWithProps<TProps>;
+};
+export type ComponentPropRefs<TProps extends object> = {
+    readonly [P in keyof SafeProps<TProps>]: Ref<TProps[P] | undefined>;
+};
+export interface Ref<T> extends ReadonlyRef<T> {
+    value: T;
+}
+export interface ReadonlyRef<T> {
+    /** @hidden */
+    [$$ref]: unknown;
+    readonly value: T;
+}
+export type RefValues<T> = T extends readonly any[] ? {
+    [K in keyof T]: T[K] extends ReadonlyRef<infer V> ? V : never;
+} : never;
+declare global {
+    interface Window {
+        readonly [$$renderContextStack]: {
+            readonly host: HTMLElement;
+            readonly onDisconnect: Callbacks;
+            readonly onSetRef: Callbacks;
+            readonly useRef: <T>(initialValue: T, onChange?: (value: T) => void) => Ref<T>;
+        }[];
+    }
+}
+/** Define a custom `HTMLElement` that is functional and reactive. */
+export declare function defineComponent<TProps extends object = {}>(render: (shadow: ComponentShadowRoot<TProps>, props: ComponentPropRefs<TProps>) => void, options?: ComponentOptions<TProps>): ComponentConstructor<TProps>;
+export {};

package/dist/hooks/core.d.ts

@@ -0,0 +1,7 @@
+import { type ReadonlyRef, type Ref, type RefValues } from '../component.ts';
+/** Create an observable value. */
+export declare function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T>;
+/** React to observable (reference) changes. */
+export declare function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(deps: TDeps, callback: (...values: RefValues<TDeps>) => (() => void) | void): void;
+/** Observe attribute changes. */
+export declare function useAttributes<TName extends string>(...names: TName[]): Readonly<Record<TName, Ref<string | null>>>;

package/dist/hooks/loading.d.ts

@@ -0,0 +1,11 @@
+import type { ReadonlyRef, Ref, RefValues } from '../component.ts';
+export interface LoadingValue<TValue> {
+    readonly loading: boolean;
+    readonly value: TValue | undefined;
+    readonly error: unknown;
+}
+export interface LoadingOptions {
+    readonly debounceMs?: number;
+}
+/** Load data asynchronously. */
+export declare function useLoading<const TDeps extends readonly ReadonlyRef<any>[], TValue>(deps: TDeps, callback: (signal: AbortSignal, ...values: RefValues<TDeps>) => Promise<TValue>, { debounceMs }?: LoadingOptions): Ref<LoadingValue<TValue>>;

package/dist/hooks/route.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from '../component.ts';
+export interface RouteOptions {
+    readonly match?: 'prefix' | 'exact' | RegExp;
+    readonly source?: 'pathname' | 'hash';
+}
+export type RouteMatchArray = readonly [string, ...string[]] & {
+    readonly groups: Record<string, string>;
+};
+/** Observe route (window.history) changes. */
+export declare function useRoute(path: string | readonly string[], { match, source }?: RouteOptions): [match: Ref<RouteMatchArray | null>, state: Ref<unknown>];

package/dist/hooks/store.d.ts

@@ -0,0 +1,5 @@
+import type { ReadonlyRef, Ref } from '../component.ts';
+import type { Store } from '../store.ts';
+/** Observe store (external state) changes. */
+export declare function useStore<TState, TValue = TState>(store: Store<TState>, select: (state: TState) => TValue, mutate: (store: Store<TState>, value: TValue) => void): Ref<TValue>;
+export declare function useStore<TState, TValue = TState>(store: Store<TState>, select?: (state: TState) => TValue): ReadonlyRef<TValue>;

package/dist/html.d.ts

@@ -0,0 +1,33 @@
+type TagMap = HTMLElementTagNameMap & HTMLElementDeprecatedTagNameMap;
+type TagType<TTag extends string> = TTag extends keyof TagMap ? TagMap[TTag] : HTMLElement;
+type ChildValue = Node | HtmlDeferred | string | number | bigint | false | null | undefined;
+type AttrValue = string | number | bigint | boolean | null | undefined;
+export interface HtmlDeferred<TTag extends keyof TagMap | (string & {}) = string> {
+    readonly tag: TTag;
+    readonly key: string;
+    readonly attrs: Readonly<Record<string, AttrValue>>;
+    readonly children: readonly ChildValue[] | undefined;
+    resolve: () => TagType<TTag>;
+}
+/**
+ * Create a deferred HTML element with a key. Final element creation is
+ * deferred until the element is used as a child, when it can be determined if
+ * a new element should be created, or an existing element with the same key
+ * should be updated.
+ */
+export declare function html<const TTag extends keyof TagMap | (string & {})>(tag: TTag | CustomElementConstructor, attrs: {
+    readonly $key: string;
+} & Readonly<Record<string, AttrValue>>, children?: readonly ChildValue[]): HtmlDeferred<TTag>;
+/** Create an HTML element with attributes and children. */
+export declare function html<const TTag extends keyof TagMap | (string & {})>(tag: TTag | CustomElementConstructor, attrs?: Readonly<Record<string, AttrValue>>, children?: readonly ChildValue[]): TagType<TTag>;
+/** Create an HTML element with children. */
+export declare function html<const TTag extends keyof TagMap | (string & {})>(tag: TTag | CustomElementConstructor, children?: readonly ChildValue[]): TagType<TTag>;
+/** Update element attributes and replace children. */
+export declare function html<TElement extends Element | Document | ShadowRoot>(element: TElement, attrs?: TElement extends {
+    setAttribute: (...args: any[]) => any;
+} ? Readonly<Record<string, AttrValue>> : undefined, children?: readonly ChildValue[]): TElement;
+/** Replace element children. */
+export declare function html<TElement extends Element | Document | ShadowRoot>(element: TElement, children?: readonly ChildValue[]): TElement;
+/** Parse a raw HTML string into a `DocumentFragment`. */
+export declare function parseHTML(htmlString: string): DocumentFragment;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './component.ts';
+export * from './hooks/core.ts';
+export * from './hooks/loading.ts';
+export * from './hooks/route.ts';
+export * from './hooks/store.ts';
+export * from './html.ts';
+export { html as h } from './html.ts';
+export * from './router.ts';
+export * from './store.ts';

package/dist/index.js

@@ -0,0 +1,257 @@
+//#region src/internal/callbacks.ts
+function e() {
+	let e = /* @__PURE__ */ new Set(), t = {
+		push: (t) => (e.add(t), () => e.delete(t)),
+		run: ({ clear: n = !1 } = {}) => {
+			let r = [], i = [...e];
+			for (let e of i) try {
+				e();
+			} catch (e) {
+				r.push(e);
+			}
+			if (n && e.clear(), r.length > 0) throw AggregateError(r);
+			return t;
+		},
+		clear: () => e.clear()
+	};
+	return t;
+}
+//#endregion
+//#region src/internal/constants.ts
+var t = Symbol(), n = Symbol();
+//#endregion
+//#region src/component.ts
+Object.assign(window, { [n]: [] });
+function r(r, i = {}) {
+	return class extends HTMLElement {
+		#e = e();
+		#t = e();
+		#n = i;
+		#r;
+		#i = !1;
+		constructor() {
+			super();
+			let e = this.#r = {};
+			if (this.#n.props) {
+				let t = this.#n.props;
+				for (let [n, r] of Object.entries(t)) {
+					if (n in this) continue;
+					let t = r(e[n] = this.#a(void 0), this);
+					Object.defineProperty(this, n, t);
+				}
+			}
+		}
+		connectedCallback() {
+			let e = this.attachShadow({
+				...this.#n.shadow,
+				mode: this.#n.shadow?.mode ?? "open"
+			});
+			try {
+				window[n].push({
+					host: this,
+					onDisconnect: this.#e,
+					onSetRef: this.#t,
+					useRef: this.#a
+				}), r(e, this.#r);
+			} finally {
+				window[n].pop();
+			}
+			this.#t.run();
+		}
+		disconnectedCallback() {
+			this.#t.clear(), this.#e.run({ clear: !0 });
+		}
+		#a = (e, n) => {
+			let r = this.#o, i = e;
+			return {
+				[t]: !0,
+				get value() {
+					return i;
+				},
+				set value(e) {
+					e !== i && (i = e, n?.(i), r());
+				}
+			};
+		};
+		#o = () => {
+			this.#i || (this.#i = !0, queueMicrotask(() => {
+				this.#i = !1, this.#t.run();
+			}));
+		};
+	};
+}
+//#endregion
+//#region src/hooks/core.ts
+function i(e, t) {
+	return s().useRef(e, t);
+}
+function a(t, n) {
+	let { onSetRef: r, onDisconnect: i } = s(), a = e(), o = () => a.run({ clear: !0 }), c;
+	r.push(() => {
+		let e = t.map((e) => e.value);
+		if (c?.length === e.length && c?.every((t, n) => t === e[n])) return;
+		c = e, o();
+		let r = n(...c);
+		r && a.push(() => r());
+	}), i.push(o);
+}
+function o(...e) {
+	if (e.length === 0) return {};
+	let { host: t } = s(), n = Object.fromEntries(e.map((e) => [e, i(t.getAttribute(e), (n) => {
+		n == null ? t.removeAttribute(e) : t.setAttribute(e, n);
+	})])), r = new MutationObserver((e) => {
+		for (let { attributeName: r } of e) r != null && Object.hasOwn(n, r) && (n[r].value = t.getAttribute(r));
+	});
+	return a([], () => (r.observe(t, {
+		attributeFilter: e,
+		attributes: !0
+	}), () => r.disconnect())), n;
+}
+function s() {
+	let e = window[n].at(-1);
+	if (!e) throw Error("hooks must be called inside a render function");
+	return e;
+}
+//#endregion
+//#region src/hooks/loading.ts
+function c(e, t, { debounceMs: n } = {}) {
+	let r = i({
+		loading: !0,
+		value: void 0,
+		error: void 0
+	}), o = !0;
+	return a(e, () => (...e) => {
+		let i = new AbortController();
+		return Promise.race(o ? [Promise.resolve()] : [new Promise((e) => setTimeout(e, n)), new Promise((e) => i.signal.addEventListener("abort", e, { once: !0 }))]).then(() => {
+			if (!i.signal.aborted) return t(i.signal, ...e);
+		}).then((e) => {
+			i.signal.aborted || (r.value = {
+				loading: !1,
+				value: e,
+				error: void 0
+			});
+		}).catch((e) => {
+			i.signal.aborted || (r.value = {
+				loading: !1,
+				value: void 0,
+				error: e
+			});
+		}), o = !1, () => i.abort();
+	}), a([], () => () => o = !0), r;
+}
+//#endregion
+//#region src/store.ts
+function l(t) {
+	let n = e(), r = t;
+	return {
+		get state() {
+			return r;
+		},
+		set state(e) {
+			e !== r && (r = e, n.run());
+		},
+		subscribe: (e) => n.push(() => e(r))
+	};
+}
+//#endregion
+//#region src/router.ts
+function u() {
+	return d ??= f();
+}
+var d;
+function f() {
+	let e = l({
+		url: window.location.href,
+		pathname: window.location.pathname,
+		hash: window.location.hash,
+		state: window.history.state
+	}), t = () => {
+		let t = e.state;
+		t.url !== window.location.href && (t = {
+			...t,
+			url: window.location.href,
+			pathname: window.location.pathname,
+			hash: window.location.hash
+		}), t.state !== window.history.state && (t = {
+			...t,
+			state: window.history.state
+		}), e.state = t;
+	};
+	return Object.defineProperties(history, Object.fromEntries(["pushState", "replaceState"].map((e) => {
+		let n = history[e].bind(history);
+		return [e, {
+			value: (...e) => {
+				n(...e), t();
+			},
+			enumerable: !0,
+			configurable: !0
+		}];
+	}))), window.addEventListener("popstate", t), e;
+}
+//#endregion
+//#region src/hooks/route.ts
+function p(e, { match: t = "prefix", source: n = "pathname" } = {}) {
+	let r = t === "exact" ? /^$/u : t === "prefix" ? /^.*$/u : t, o = Array.isArray(e) ? e : [e], s = (e) => {
+		let t = new URL(e)[n], i = o.find((e) => t.endsWith(e)) ?? null;
+		return i == null ? null : (t = t.slice(i.length), t.match(r));
+	}, c = i(window.location.href), l = i(s(window.location.href)), d = i(window.history.state);
+	return a([], () => u().subscribe(({ url: e, state: t }) => {
+		c.value = e, d.value = t;
+	})), a([c], (e) => {
+		l.value = s(e);
+	}), [l, d];
+}
+//#endregion
+//#region src/hooks/store.ts
+function m(e, t = (e) => e, n) {
+	let r = i(t(e.state), n && ((t) => n(e, t)));
+	return a([], () => e.subscribe((e) => r.value = t(e))), r;
+}
+//#endregion
+//#region src/html.ts
+var h = "data-key";
+function g(e, t = {}, n = []) {
+	if (typeof e == "function") {
+		let t = customElements.getName(e);
+		t ?? (t = `ce-${crypto.randomUUID()}`, customElements.define(t, e)), e = t;
+	}
+	let r;
+	if ([r, n] = Array.isArray(t) ? [{}, t] : [t, n], typeof e == "string") {
+		let { [h]: t, ...i } = r;
+		return typeof t == "string" ? {
+			tag: e,
+			key: t,
+			attrs: i,
+			children: n,
+			resolve: () => g(document.createElement(e), i, n)
+		} : g(document.createElement(e), r, n);
+	}
+	if ("setAttribute" in e) {
+		let t = new Set(e.getAttributeNames());
+		for (let [n, i] of Object.entries(r)) {
+			if (t?.delete(n), i == null || i == 0) continue;
+			let r = i == 1 ? "" : String(i);
+			e.getAttribute(n) !== r && e.setAttribute(n, r);
+		}
+		for (let n of t) e.removeAttribute(n);
+	}
+	let i;
+	return e.replaceChildren(...n.filter((e) => e != null && e !== !1).map((t) => {
+		if (typeof t != "object") return document.createTextNode(String(t));
+		if (t instanceof Node) return t;
+		i ??= new Map([...e.children].flatMap((e) => {
+			let t = e.getAttribute(h);
+			return t == null ? [] : [[t, e]];
+		}));
+		let n = i.get(t.key);
+		return n && n.tagName.toLowerCase() === t.tag ? (i.delete(t.key), g(n, t.attrs, t.children)) : t.resolve();
+	})), e;
+}
+function _(e) {
+	let t = g("template");
+	return t.innerHTML = e, t.content;
+}
+//#endregion
+export { l as createStore, r as defineComponent, u as getRouter, g as h, g as html, _ as parseHTML, o as useAttributes, a as useEffect, c as useLoading, i as useRef, p as useRoute, m as useStore };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["#onDisconnect","#onSetRef","#options","#refs","#useRef","#notify","#notifying"],"sources":["../src/internal/callbacks.ts","../src/internal/constants.ts","../src/component.ts","../src/hooks/core.ts","../src/hooks/loading.ts","../src/store.ts","../src/router.ts","../src/hooks/route.ts","../src/hooks/store.ts","../src/html.ts"],"sourcesContent":["export interface Callbacks {\n  readonly push: (callback: () => void) => () => void;\n  readonly run: (options?: { readonly clear?: boolean }) => void;\n  readonly clear: () => void;\n}\n\nexport function createCallbacks(): Callbacks {\n  const callbacks = new Set<() => void>();\n\n  const self: Callbacks = {\n    push: (callback) => {\n      callbacks.add(callback);\n      return () => callbacks.delete(callback);\n    },\n    run: ({ clear = false } = {}) => {\n      const errors: unknown[] = [];\n      const callbacksCopy = [...callbacks];\n\n      for (const callback of callbacksCopy) {\n        try {\n          callback();\n        } catch (error: unknown) {\n          errors.push(error);\n        }\n      }\n\n      if (clear) callbacks.clear();\n      if (errors.length > 0) throw new AggregateError(errors);\n      return self;\n    },\n    clear: () => callbacks.clear(),\n  };\n\n  return self;\n}\n","export const $$ref = Symbol();\nexport const $$renderContextStack = Symbol();\n","import { type Callbacks, createCallbacks } from './internal/callbacks.ts';\nimport { $$ref, $$renderContextStack } from './internal/constants.ts';\n\ntype SafeProps<TProps> = any extends any\n  ? { [P in keyof TProps as P extends keyof HTMLElement ? never : P]: TProps[P] }\n  : never;\n\nexport interface ComponentConstructor<TProps extends object> {\n  new (): ComponentWithProps<TProps>;\n}\n\nexport interface ComponentOptions<TProps extends object> {\n  readonly shadow?: Partial<ShadowRootInit>;\n  readonly props?: ComponentPropDescriptors<TProps>;\n}\n\nexport type ComponentPropDescriptors<TProps extends object> = {\n  readonly [P in keyof SafeProps<TProps>]: ComponentPropDescriptorFactory<TProps[P]>;\n};\n\nexport type ComponentPropDescriptorFactory<TType> = (\n  ref: Ref<TType | undefined>,\n  host: HTMLElement,\n) => ComponentPropDescriptor<TType>;\n\nexport interface ComponentPropDescriptor<T> extends Omit<PropertyDescriptor, 'value' | 'get' | 'set'> {\n  get(): T;\n  set?(value: T): void;\n}\n\nexport type ComponentWithProps<TProps extends object> = HTMLElement & {\n  -readonly [P in keyof SafeProps<TProps>]: TProps[P];\n};\n\nexport type ComponentShadowRoot<TProps extends object> = Omit<ShadowRoot, 'host'> & {\n  readonly host: ComponentWithProps<TProps>;\n};\n\nexport type ComponentPropRefs<TProps extends object> = {\n  readonly [P in keyof SafeProps<TProps>]: Ref<TProps[P] | undefined>;\n};\n\nexport interface Ref<T> extends ReadonlyRef<T> {\n  value: T;\n}\n\nexport interface ReadonlyRef<T> {\n  /** @hidden */\n  [$$ref]: unknown;\n  readonly value: T;\n}\n\nexport type RefValues<T> = T extends readonly any[]\n  ? { [K in keyof T]: T[K] extends ReadonlyRef<infer V> ? V : never }\n  : never;\n\ndeclare global {\n  interface Window {\n    readonly [$$renderContextStack]: {\n      readonly host: HTMLElement;\n      readonly onDisconnect: Callbacks;\n      readonly onSetRef: Callbacks;\n      readonly useRef: <T>(initialValue: T, onChange?: (value: T) => void) => Ref<T>;\n    }[];\n  }\n}\n\nObject.assign(window, { [$$renderContextStack]: [] });\n\n/** Define a custom `HTMLElement` that is functional and reactive. */\nexport function defineComponent<TProps extends object = {}>(\n  render: (shadow: ComponentShadowRoot<TProps>, props: ComponentPropRefs<TProps>) => void,\n  options?: ComponentOptions<TProps>,\n): ComponentConstructor<TProps>;\nexport function defineComponent(\n  render: (\n    shadow: ComponentShadowRoot<Record<string, unknown>>,\n    props: ComponentPropRefs<Record<string, unknown>>,\n  ) => void,\n  options: ComponentOptions<Record<string, unknown>> = {},\n): new () => HTMLElement {\n  return class extends HTMLElement {\n    readonly #onDisconnect = createCallbacks();\n    readonly #onSetRef = createCallbacks();\n    readonly #options = options;\n    readonly #refs: ComponentPropRefs<Record<string, unknown>>;\n    #notifying = false;\n\n    constructor() {\n      super();\n      const refs: Record<string, Ref<unknown>> = (this.#refs = {});\n\n      if (this.#options.props) {\n        const descriptors = this.#options.props;\n\n        for (const [key, getDescriptor] of Object.entries(descriptors)) {\n          if (key in this) continue;\n          const ref = (refs[key] = this.#useRef<any>(undefined));\n          const descriptor = getDescriptor(ref, this);\n          Object.defineProperty(this, key, descriptor);\n        }\n      }\n    }\n\n    protected connectedCallback(): void {\n      const shadow = this.attachShadow({ ...this.#options.shadow, mode: this.#options.shadow?.mode ?? 'open' });\n\n      try {\n        window[$$renderContextStack].push({\n          host: this,\n          onDisconnect: this.#onDisconnect,\n          onSetRef: this.#onSetRef,\n          useRef: this.#useRef,\n        });\n\n        render(shadow as ComponentShadowRoot<Record<string, unknown>>, this.#refs);\n      } finally {\n        window[$$renderContextStack].pop();\n      }\n\n      this.#onSetRef.run();\n    }\n\n    protected disconnectedCallback(): void {\n      this.#onSetRef.clear();\n      this.#onDisconnect.run({ clear: true });\n    }\n\n    readonly #useRef = <T>(initialValue: T, onChange?: (value: T) => void): Ref<T> => {\n      const notify = this.#notify;\n      let value = initialValue;\n\n      return {\n        [$$ref]: true,\n        get value() {\n          return value;\n        },\n        set value(newValue) {\n          if (newValue === value) return;\n          value = newValue;\n          onChange?.(value);\n          notify();\n        },\n      };\n    };\n\n    readonly #notify = (): void => {\n      if (this.#notifying) return;\n      this.#notifying = true;\n\n      queueMicrotask(() => {\n        this.#notifying = false;\n        this.#onSetRef.run();\n      });\n    };\n  };\n}\n","import { type ReadonlyRef, type Ref, type RefValues } from '../component.ts';\nimport { createCallbacks } from '../internal/callbacks.ts';\nimport { $$renderContextStack } from '../internal/constants.ts';\n\n/** Create an observable value. */\nexport function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T> {\n  return getHookContext().useRef(initialValue, onChange);\n}\n\n/** React to observable (reference) changes. */\nexport function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(\n  deps: TDeps,\n  callback: (...values: RefValues<TDeps>) => (() => void) | void,\n): void {\n  const { onSetRef, onDisconnect } = getHookContext();\n  const cleanupCallback = createCallbacks();\n  const cleanup = (): void => cleanupCallback.run({ clear: true });\n  let values: any[] | undefined;\n\n  onSetRef.push((): void => {\n    const newValues = deps.map((dep) => dep.value);\n    if (values?.length === newValues.length && values?.every((value, i) => value === newValues[i])) return;\n    values = newValues;\n    cleanup();\n    const maybeCleanup = callback(...(values as any));\n    if (maybeCleanup) cleanupCallback.push(() => maybeCleanup());\n  });\n\n  onDisconnect.push(cleanup);\n}\n\n/** Observe attribute changes. */\nexport function useAttributes<TName extends string>(...names: TName[]): Readonly<Record<TName, Ref<string | null>>> {\n  if (names.length === 0) return {} as any;\n  const { host } = getHookContext();\n\n  const refs = Object.fromEntries(\n    names.map((name) => [\n      name,\n      useRef(host.getAttribute(name), (value) => {\n        if (value == null) host.removeAttribute(name);\n        else host.setAttribute(name, value);\n      }),\n    ]),\n  );\n\n  const observer = new MutationObserver((mutation) => {\n    for (const { attributeName } of mutation) {\n      if (attributeName != null && Object.hasOwn(refs, attributeName)) {\n        refs[attributeName]!.value = host.getAttribute(attributeName);\n      }\n    }\n  });\n\n  useEffect([], () => {\n    observer.observe(host, { attributeFilter: names, attributes: true });\n    return () => observer.disconnect();\n  });\n\n  return refs as Readonly<Record<TName, Ref<string | null>>>;\n}\n\nfunction getHookContext(): (typeof window)[typeof $$renderContextStack][0] {\n  const context = window[$$renderContextStack].at(-1);\n  if (!context) throw new Error('hooks must be called inside a render function');\n  return context;\n}\n","import type { ReadonlyRef, Ref, RefValues } from '../component.ts';\nimport { useEffect, useRef } from './core.ts';\n\nexport interface LoadingValue<TValue> {\n  readonly loading: boolean;\n  readonly value: TValue | undefined;\n  readonly error: unknown;\n}\n\nexport interface LoadingOptions {\n  readonly debounceMs?: number;\n}\n\n/** Load data asynchronously. */\nexport function useLoading<const TDeps extends readonly ReadonlyRef<any>[], TValue>(\n  deps: TDeps,\n  callback: (signal: AbortSignal, ...values: RefValues<TDeps>) => Promise<TValue>,\n  { debounceMs }: LoadingOptions = {},\n): Ref<LoadingValue<TValue>> {\n  const ref = useRef<LoadingValue<TValue>>({ loading: true, value: undefined, error: undefined });\n  let skipDebounce = true;\n\n  useEffect(deps, () => (...values) => {\n    const ac = new AbortController();\n\n    Promise.race(\n      skipDebounce\n        ? [Promise.resolve()]\n        : [\n            new Promise((resolve) => setTimeout(resolve, debounceMs)),\n            new Promise((resolve) => ac.signal.addEventListener('abort', resolve, { once: true })),\n          ],\n    )\n      .then(() => {\n        if (ac.signal.aborted) return;\n        return callback(ac.signal, ...(values as any));\n      })\n      .then((value) => {\n        if (ac.signal.aborted) return;\n        ref.value = { loading: false, value, error: undefined };\n      })\n      .catch((error: unknown) => {\n        if (ac.signal.aborted) return;\n        ref.value = { loading: false, value: undefined, error };\n      });\n\n    skipDebounce = false;\n    return () => ac.abort();\n  });\n\n  // Skip the debounce again if the component unmounts.\n  useEffect([], () => () => (skipDebounce = true));\n\n  return ref;\n}\n","import { createCallbacks } from './internal/callbacks.ts';\n\nexport interface Store<TState> {\n  state: TState;\n  subscribe: (callback: (state: TState) => void) => () => void;\n}\n\n/** Create a new store containing an observable state. */\nexport function createStore<TState>(initialState: TState): Store<TState> {\n  const callbacks = createCallbacks();\n  let state = initialState;\n\n  return {\n    get state() {\n      return state;\n    },\n    set state(newState) {\n      if (newState === state) return;\n      state = newState;\n      callbacks.run();\n    },\n    subscribe: (callback) => callbacks.push(() => callback(state)),\n  };\n}\n","import { createStore, type Store } from './store.ts';\n\nexport interface RouterState {\n  readonly url: string;\n  readonly pathname: string;\n  readonly hash: string;\n  readonly state: unknown;\n}\n\n/**\n * Get a router {@link Store} that is updated when the client side route (aka:\n * `History`) changes. This method returns the same store every time it is\n * called (ie. a singleton).\n */\nexport function getRouter(): Store<RouterState> {\n  return (singleton ??= createRouter());\n}\n\nlet singleton: Store<RouterState> | undefined;\n\nfunction createRouter(): Store<RouterState> {\n  const store = createStore<RouterState>({\n    url: window.location.href,\n    pathname: window.location.pathname,\n    hash: window.location.hash,\n    state: window.history.state,\n  });\n\n  const onUpdate = (): void => {\n    let state = store.state;\n\n    if (state.url !== window.location.href) {\n      state = {\n        ...state,\n        url: window.location.href,\n        pathname: window.location.pathname,\n        hash: window.location.hash,\n      };\n    }\n\n    if (state.state !== window.history.state) {\n      state = { ...state, state: window.history.state };\n    }\n\n    store.state = state;\n  };\n\n  Object.defineProperties(\n    history,\n    Object.fromEntries(\n      (['pushState', 'replaceState'] as const).map((method: 'pushState' | 'replaceState') => {\n        const original = history[method].bind(history) as History['pushState'] & History['replaceState'];\n        const descriptor: PropertyDescriptor = {\n          value: (...args: Parameters<typeof original>) => {\n            original(...args);\n            onUpdate();\n          },\n          enumerable: true,\n          configurable: true,\n        };\n\n        return [method, descriptor];\n      }),\n    ),\n  );\n\n  window.addEventListener('popstate', onUpdate);\n\n  return store;\n}\n","import type { Ref } from '../component.ts';\nimport { getRouter } from '../router.ts';\nimport { useEffect, useRef } from './core.ts';\n\nexport interface RouteOptions {\n  readonly match?: 'prefix' | 'exact' | RegExp;\n  readonly source?: 'pathname' | 'hash';\n}\n\nexport type RouteMatchArray = readonly [string, ...string[]] & { readonly groups: Record<string, string> };\n\n/** Observe route (window.history) changes. */\nexport function useRoute(\n  path: string | readonly string[],\n  { match = 'prefix', source = 'pathname' }: RouteOptions = {},\n): [match: Ref<RouteMatchArray | null>, state: Ref<unknown>] {\n  const matchRx = match === 'exact' ? /^$/u : match === 'prefix' ? /^.*$/u : match;\n  const paths = Array.isArray(path) ? (path as readonly string[]) : [path as string];\n\n  const getMatch = (url: string): RouteMatchArray | null => {\n    let value = new URL(url)[source];\n    const prefix = paths.find((path) => value.endsWith(path)) ?? null;\n    if (prefix == null) return null;\n    value = value.slice(prefix.length);\n    return value.match(matchRx) as RouteMatchArray | null;\n  };\n\n  const refUrl = useRef<string>(window.location.href);\n  const refMatch = useRef<RouteMatchArray | null>(getMatch(window.location.href));\n  const refState = useRef<unknown>(window.history.state);\n\n  useEffect([], () => {\n    return getRouter().subscribe(({ url, state }) => {\n      refUrl.value = url;\n      refState.value = state;\n    });\n  });\n\n  useEffect([refUrl], (url) => {\n    refMatch.value = getMatch(url);\n  });\n\n  return [refMatch, refState];\n}\n","import type { ReadonlyRef, Ref } from '../component.ts';\nimport type { Store } from '../store.ts';\nimport { useEffect, useRef } from './core.ts';\n\n/** Observe store (external state) changes. */\nexport function useStore<TState, TValue = TState>(\n  store: Store<TState>,\n  select: (state: TState) => TValue,\n  mutate: (store: Store<TState>, value: TValue) => void,\n): Ref<TValue>;\nexport function useStore<TState, TValue = TState>(\n  store: Store<TState>,\n  select?: (state: TState) => TValue,\n): ReadonlyRef<TValue>;\nexport function useStore<TState, TValue = TState>(\n  store: Store<TState>,\n  select: (state: TState) => TValue = (state) => state as unknown as TValue,\n  mutate?: (store: Store<TState>, value: TValue) => void,\n): Ref<TValue> {\n  const ref = useRef(select(store.state), mutate && ((value) => mutate(store, value)));\n  useEffect([], () => store.subscribe((state) => (ref.value = select(state))));\n  return ref;\n}\n","type TagMap = HTMLElementTagNameMap & HTMLElementDeprecatedTagNameMap;\ntype TagType<TTag extends string> = TTag extends keyof TagMap ? TagMap[TTag] : HTMLElement;\ntype ChildValue = Node | HtmlDeferred | string | number | bigint | false | null | undefined;\ntype AttrValue = string | number | bigint | boolean | null | undefined;\n\nexport interface HtmlDeferred<TTag extends keyof TagMap | (string & {}) = string> {\n  readonly tag: TTag;\n  readonly key: string;\n  readonly attrs: Readonly<Record<string, AttrValue>>;\n  readonly children: readonly ChildValue[] | undefined;\n  resolve: () => TagType<TTag>;\n}\n\nconst DATA_KEY = 'data-key';\n\n/**\n * Create a deferred HTML element with a key. Final element creation is\n * deferred until the element is used as a child, when it can be determined if\n * a new element should be created, or an existing element with the same key\n * should be updated.\n */\nexport function html<const TTag extends keyof TagMap | (string & {})>(\n  tag: TTag | CustomElementConstructor,\n  attrs: { readonly $key: string } & Readonly<Record<string, AttrValue>>,\n  children?: readonly ChildValue[],\n): HtmlDeferred<TTag>;\n\n/** Create an HTML element with attributes and children. */\nexport function html<const TTag extends keyof TagMap | (string & {})>(\n  tag: TTag | CustomElementConstructor,\n  attrs?: Readonly<Record<string, AttrValue>>,\n  children?: readonly ChildValue[],\n): TagType<TTag>;\n\n/** Create an HTML element with children. */\nexport function html<const TTag extends keyof TagMap | (string & {})>(\n  tag: TTag | CustomElementConstructor,\n  children?: readonly ChildValue[],\n): TagType<TTag>;\n\n/** Update element attributes and replace children. */\nexport function html<TElement extends Element | Document | ShadowRoot>(\n  element: TElement,\n  attrs?: TElement extends { setAttribute: (...args: any[]) => any } ? Readonly<Record<string, AttrValue>> : undefined,\n  children?: readonly ChildValue[],\n): TElement;\n\n/** Replace element children. */\nexport function html<TElement extends Element | Document | ShadowRoot>(\n  element: TElement,\n  children?: readonly ChildValue[],\n): TElement;\n\nexport function html(\n  el: string | CustomElementConstructor | Element | Document | ShadowRoot,\n  attrsOrChildren: Readonly<Record<string, AttrValue>> | readonly ChildValue[] = {},\n  children: readonly ChildValue[] = [],\n): Node | HtmlDeferred {\n  if (typeof el === 'function') {\n    let name = customElements.getName(el);\n\n    if (name == null) {\n      name = `ce-${crypto.randomUUID()}`;\n      customElements.define(name, el);\n    }\n\n    el = name;\n  }\n\n  let attrs: Readonly<Record<string, AttrValue>>;\n  [attrs, children] = Array.isArray(attrsOrChildren)\n    ? [{}, attrsOrChildren as readonly ChildValue[]]\n    : [attrsOrChildren as Readonly<Record<string, AttrValue>>, children];\n\n  if (typeof el === 'string') {\n    const { [DATA_KEY]: key, ...otherAttrs } = attrs;\n\n    return typeof key === 'string'\n      ? {\n          tag: el,\n          key,\n          attrs: otherAttrs,\n          children,\n          resolve: () => html(document.createElement(el), otherAttrs, children),\n        }\n      : html(document.createElement(el), attrs, children);\n  }\n\n  if ('setAttribute' in el) {\n    const oldAttrs = new Set(el.getAttributeNames());\n\n    for (const [name, rawValue] of Object.entries(attrs)) {\n      oldAttrs?.delete(name);\n      if (rawValue == null || rawValue == false) continue;\n      const value = rawValue == true ? '' : String(rawValue);\n      if (el.getAttribute(name) === value) continue;\n      el.setAttribute(name, value);\n    }\n\n    for (const name of oldAttrs) {\n      el.removeAttribute(name);\n    }\n  }\n\n  let keyElements: Map<string, Element> | undefined;\n\n  el.replaceChildren(\n    ...children\n      .filter((child) => child != null && child !== false)\n      .map((child) => {\n        if (typeof child !== 'object') return document.createTextNode(String(child));\n        if (child instanceof Node) return child;\n\n        keyElements ??= new Map(\n          [...el.children].flatMap((child) => {\n            const key = child.getAttribute(DATA_KEY);\n            return key == null ? [] : [[key, child] as const];\n          }),\n        );\n\n        const reused = keyElements.get(child.key);\n\n        if (reused && reused.tagName.toLowerCase() === child.tag) {\n          keyElements.delete(child.key);\n          return html(reused, child.attrs, child.children);\n        }\n\n        return child.resolve();\n      }),\n  );\n\n  return el;\n}\n\n/** Parse a raw HTML string into a `DocumentFragment`. */\nexport function parseHTML(htmlString: string): DocumentFragment {\n  const template = html('template');\n  template.innerHTML = htmlString;\n  return template.content;\n}\n"],"mappings":"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"}

package/dist/internal/callbacks.d.ts

@@ -0,0 +1,8 @@
+export interface Callbacks {
+    readonly push: (callback: () => void) => () => void;
+    readonly run: (options?: {
+        readonly clear?: boolean;
+    }) => void;
+    readonly clear: () => void;
+}
+export declare function createCallbacks(): Callbacks;

package/dist/internal/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const $$ref: unique symbol;
+export declare const $$renderContextStack: unique symbol;

package/dist/router.d.ts

@@ -0,0 +1,13 @@
+import { type Store } from './store.ts';
+export interface RouterState {
+    readonly url: string;
+    readonly pathname: string;
+    readonly hash: string;
+    readonly state: unknown;
+}
+/**
+ * Get a router {@link Store} that is updated when the client side route (aka:
+ * `History`) changes. This method returns the same store every time it is
+ * called (ie. a singleton).
+ */
+export declare function getRouter(): Store<RouterState>;

package/dist/store.d.ts

@@ -0,0 +1,6 @@
+export interface Store<TState> {
+    state: TState;
+    subscribe: (callback: (state: TState) => void) => () => void;
+}
+/** Create a new store containing an observable state. */
+export declare function createStore<TState>(initialState: TState): Store<TState>;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@seahax/elemental",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Extremely small reactive web components library.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seahax/workshop.git",
+    "directory": "packages/elemental"
+  },
+  "license": "Unlicense",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -b -f tsconfig.lib.json",
+    "clean": "rm -rf dist",
+    "diff": "npm run build >/dev/null && npm diff 'dist/**.mjs' 'dist/**.cjs' 'dist/**.js' 'dist/**.d.ts'",
+    "start": "vite dev",
+    "test": "eslint src && vitest run --coverage"
+  },
+  "devDependencies": {
+    "@seahax/eslint": "^0.2.27",
+    "@seahax/vitest": "^0.1.8",
+    "@vitest/coverage-v8": "^4.0.16",
+    "eslint": "^9.39.4",
+    "vite": "^8.0.8",
+    "vite-bundle-analyzer": "^1.3.7",
+    "vitest": "^4.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}