@seahax/elemental 0.4.2 → 0.5.1

package/dist/hooks/useParent.js

@@ -0,0 +1,9 @@
+import { useInternalController as e } from "./useInternalController.js";
+//#region src/hooks/useParent.ts
+function t() {
+	return e().refParent;
+}
+//#endregion
+export { t as useParent };
+
+//# sourceMappingURL=useParent.js.map

package/dist/hooks/useParent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParent.js","names":[],"sources":["../../src/hooks/useParent.ts"],"sourcesContent":["import { useInternalController } from './useInternalController.ts';\nimport type { ReadonlyRef } from './useRef.ts';\n\n/** Use a reference (reactive state) bound to the parent node. */\nexport function useParent(): ReadonlyRef<ParentNode | null> {\n  return useInternalController().refParent;\n}\n"],"mappings":";;AAIA,SAAgB,IAA4C;AAC1D,QAAO,GAAuB,CAAC"}

package/dist/hooks/{ref.d.ts → useRef.d.ts}

@@ -1,3 +1,4 @@
+import type { $$ref } from '../internal/constants.ts';
 export interface Ref<T> extends ReadonlyRef<T> {
     value: T;
 }
@@ -9,7 +10,5 @@ export interface ReadonlyRef<T> {
 export type RefValues<T> = T extends readonly any[] ? {
     [K in keyof T]: T[K] extends ReadonlyRef<infer V> ? V : never;
 } : never;
-declare const $$ref: unique symbol;
 /** Use a reference (reactive state) value. */
 export declare function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T>;
-export {};

package/dist/hooks/useRef.js

@@ -0,0 +1,9 @@
+import { useInternalController as e } from "./useInternalController.js";
+//#region src/hooks/useRef.ts
+function t(t, n) {
+	return e().createRef(t, n);
+}
+//#endregion
+export { t as useRef };
+
+//# sourceMappingURL=useRef.js.map

package/dist/hooks/useRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRef.js","names":[],"sources":["../../src/hooks/useRef.ts"],"sourcesContent":["import type { $$ref } from '../internal/constants.ts';\nimport { useInternalController } from './useInternalController.ts';\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\n/** Use a reference (reactive state) value. */\nexport function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T> {\n  return useInternalController().createRef(initialValue, onChange);\n}\n"],"mappings":";;AAkBA,SAAgB,EAAU,GAAiB,GAAuC;AAChF,QAAO,GAAuB,CAAC,UAAU,GAAc,EAAS"}

package/dist/hooks/{route.d.ts → useRoute.d.ts}

@@ -1,10 +1,10 @@
-import { type Ref } from './ref.ts';
+import { type Ref } from './useRef.ts';
 export interface RouteOptions {
     readonly match?: 'prefix' | 'exact' | RegExp;
     readonly source?: 'pathname' | 'hash';
 }
-export type RouteMatchArray = readonly [string, ...string[]] & {
+export type RouteMatch = readonly [string, ...string[]] & {
     readonly groups: Record<string, string>;
 };
 /** Use a reference (reactive state) bound to route matching. */
-export declare function useRoute(path: string | readonly string[], { match, source }?: RouteOptions): Ref<RouteMatchArray | null>;
+export declare function useRoute(path: string | readonly string[], { match, source }?: RouteOptions): Ref<RouteMatch | null>;

package/dist/hooks/{route.js → useRoute.js}

@@ -1,8 +1,8 @@
-import { useRef as e } from "./ref.js";
-import { useEffect as t } from "./effect.js";
-import { getRouter as n } from "../router.js";
-import { useStore as r } from "./store.js";
-//#region src/hooks/route.ts
+import { useRef as e } from "./useRef.js";
+import { useEffect as t } from "./useEffect.js";
+import { getRouter as n } from "../getRouter.js";
+import { useStore as r } from "./useStore.js";
+//#region src/hooks/useRoute.ts
 function i(i, { match: a = "prefix", source: o = "pathname" } = {}) {
 	let s = a === "exact" ? /^$/u : a === "prefix" ? /^.*$/u : a, c = Array.isArray(i) ? i : [i], l = r(n(), (e) => e[o]), u = e(d(l.value));
 	return t([l], (e) => {
@@ -16,4 +16,4 @@ function i(i, { match: a = "prefix", source: o = "pathname" } = {}) {
 //#endregion
 export { i as useRoute };
 
-//# sourceMappingURL=route.js.map
+//# sourceMappingURL=useRoute.js.map

package/dist/hooks/useRoute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRoute.js","names":[],"sources":["../../src/hooks/useRoute.ts"],"sourcesContent":["import { getRouter } from '../getRouter.ts';\nimport { useEffect } from './useEffect.ts';\nimport { type Ref, useRef } from './useRef.ts';\nimport { useStore } from './useStore.ts';\n\nexport interface RouteOptions {\n  readonly match?: 'prefix' | 'exact' | RegExp;\n  readonly source?: 'pathname' | 'hash';\n}\n\nexport type RouteMatch = readonly [string, ...string[]] & { readonly groups: Record<string, string> };\n\n/** Use a reference (reactive state) bound to route matching. */\nexport function useRoute(\n  path: string | readonly string[],\n  { match = 'prefix', source = 'pathname' }: RouteOptions = {},\n): Ref<RouteMatch | null> {\n  const matchRx = match === 'exact' ? /^$/u : match === 'prefix' ? /^.*$/u : match;\n  const paths = Array.isArray(path) ? (path as readonly string[]) : [path as string];\n  const refRoute = useStore(getRouter(), (state) => state[source]);\n  const refMatch = useRef<RouteMatch | null>(getMatch(refRoute.value));\n\n  useEffect([refRoute], (route) => {\n    refMatch.value = getMatch(route);\n  });\n\n  return refMatch;\n\n  function getMatch(route: string): RouteMatch | null {\n    const prefix = paths.find((path) => route.endsWith(path)) ?? null;\n    if (prefix == null) return null;\n    route = route.slice(prefix.length);\n    return route.match(matchRx) as RouteMatch | null;\n  }\n}\n"],"mappings":";;;;;AAaA,SAAgB,EACd,GACA,EAAE,WAAQ,UAAU,YAAS,eAA6B,EAAE,EACpC;CACxB,IAAM,IAAU,MAAU,UAAU,QAAQ,MAAU,WAAW,UAAU,GACrE,IAAQ,MAAM,QAAQ,EAAK,GAAI,IAA6B,CAAC,EAAe,EAC5E,IAAW,EAAS,GAAW,GAAG,MAAU,EAAM,GAAQ,EAC1D,IAAW,EAA0B,EAAS,EAAS,MAAM,CAAC;AAMpE,QAJA,EAAU,CAAC,EAAS,GAAG,MAAU;AAC/B,IAAS,QAAQ,EAAS,EAAM;GAChC,EAEK;CAEP,SAAS,EAAS,GAAkC;EAClD,IAAM,IAAS,EAAM,MAAM,MAAS,EAAM,SAAS,EAAK,CAAC,IAAI;AAG7D,SAFI,KAAU,OAAa,QAC3B,IAAQ,EAAM,MAAM,EAAO,OAAO,EAC3B,EAAM,MAAM,EAAQ"}

package/dist/hooks/{store.d.ts → useStore.d.ts}

@@ -1,5 +1,5 @@
-import type { Store } from '../store.ts';
-import { type ReadonlyRef, type Ref } from './ref.ts';
+import type { Store } from '../createStore.ts';
+import { type ReadonlyRef, type Ref } from './useRef.ts';
 /** Use a reference (reactive state) bound to a (shared) store. */
 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/hooks/{store.js → useStore.js}

@@ -1,6 +1,6 @@
-import { useRef as e } from "./ref.js";
-import { useEffect as t } from "./effect.js";
-//#region src/hooks/store.ts
+import { useRef as e } from "./useRef.js";
+import { useEffect as t } from "./useEffect.js";
+//#region src/hooks/useStore.ts
 function n(n, r = (e) => e, i) {
 	let a = e(r(n.state), i && ((e) => i(n, e)));
 	return t([], () => n.subscribe((e) => a.value = r(e))), a;
@@ -8,4 +8,4 @@ function n(n, r = (e) => e, i) {
 //#endregion
 export { n as useStore };
 
-//# sourceMappingURL=store.js.map
+//# sourceMappingURL=useStore.js.map

package/dist/hooks/useStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStore.js","names":[],"sources":["../../src/hooks/useStore.ts"],"sourcesContent":["import type { Store } from '../createStore.ts';\nimport { useEffect } from './useEffect.ts';\nimport { type ReadonlyRef, type Ref, useRef } from './useRef.ts';\n\n/** Use a reference (reactive state) bound to a (shared) store. */\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"],"mappings":";;;AAcA,SAAgB,EACd,GACA,KAAqC,MAAU,GAC/C,GACa;CACb,IAAM,IAAM,EAAO,EAAO,EAAM,MAAM,EAAE,OAAY,MAAU,EAAO,GAAO,EAAM,EAAE;AAEpF,QADA,EAAU,EAAE,QAAQ,EAAM,WAAW,MAAW,EAAI,QAAQ,EAAO,EAAM,CAAE,CAAC,EACrE"}

package/dist/html.d.ts

@@ -7,7 +7,7 @@ type ElementType<TElement> = TElement extends string ? TElement extends keyof Ta
 type ElementProps<TElement> = {
     readonly [P in keyof TElement & string as TElement[P] extends ((...args: any[]) => any) | null | undefined ? never : IfEquals<Record<P, TElement[P]>, Pick<TElement, P>, `:${P}`, never>]?: TElement[P];
 };
-type ElementAttrs<TElement> = TElement extends string | CustomElementConstructor | Element ? {} : Readonly<Record<`${Alpha}${string}`, AttrValue>>;
+type ElementAttrs<TElement> = TElement extends string | CustomElementConstructor | Element ? Readonly<Record<`${Alpha}${string}`, AttrValue>> : {};
 export type HtmlConfig<TElement> = ElementAttrs<TElement> & ElementProps<ElementType<TElement>>;
 export type HtmlConfigWithKey<TElement> = {
     readonly [DATA_KEY]: string;

package/dist/html.js.map

@@ -1 +1 @@
-{"version":3,"file":"html.js","names":[],"sources":["../src/html.ts"],"sourcesContent":["// prettier-ignore\ntype Alpha = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z';\ntype ChildValue = Node | HtmlDeferredElement | string | number | bigint | false | null | undefined;\ntype AttrValue = string | number | bigint | boolean | null | undefined;\ntype TagMap = HTMLElementTagNameMap & HTMLElementDeprecatedTagNameMap;\n\ntype IfEquals<T, U, Y = unknown, N = never> =\n  (<G>() => G extends T ? 1 : 2) extends <G>() => G extends U ? 1 : 2 ? Y : N;\n\ntype ElementType<TElement> = TElement extends string\n  ? TElement extends keyof TagMap\n    ? TagMap[TElement]\n    : HTMLElement\n  : TElement extends CustomElementConstructor\n    ? InstanceType<TElement>\n    : TElement extends Element | Document | ShadowRoot\n      ? TElement\n      : never;\n\ntype ElementProps<TElement> = {\n  readonly [P in keyof TElement & string as TElement[P] extends ((...args: any[]) => any) | null | undefined\n    ? never\n    : IfEquals<Record<P, TElement[P]>, Pick<TElement, P>, `:${P}`, never>]?: TElement[P];\n};\n\ntype ElementAttrs<TElement> = TElement extends string | CustomElementConstructor | Element\n  ? {}\n  : Readonly<Record<`${Alpha}${string}`, AttrValue>>;\n\nexport type HtmlConfig<TElement> = ElementAttrs<TElement> & ElementProps<ElementType<TElement>>;\nexport type HtmlConfigWithKey<TElement> = { readonly [DATA_KEY]: string } & HtmlConfig<TElement>;\n\nexport interface HtmlDeferredElement<TElement extends HTMLElement = HTMLElement> {\n  readonly tag: string;\n  readonly config: { readonly [DATA_KEY]: string } & HtmlConfig<TElement>;\n  readonly children: readonly ChildValue[] | undefined;\n  toElement: () => TElement;\n}\n\nconst DATA_KEY = 'data-key';\n\n/**\n * Create a deferred HTML element with a key.\n *\n * Final element creation is deferred until the element is used as a child,\n * when it can be determined if a new element should be created, or an existing\n * element with the same key and tag-name should be updated.\n */\nexport function html<const TElement extends keyof TagMap | (string & {}) | CustomElementConstructor>(\n  el: TElement,\n  config: HtmlConfigWithKey<TElement>,\n  children?: readonly ChildValue[],\n): HtmlDeferredElement<ElementType<TElement>>;\n\n/**\n * Create or update an HTML element.\n */\nexport function html<\n  TElement extends keyof TagMap | (string & {}) | CustomElementConstructor | Element | Document | ShadowRoot,\n>(el: TElement, attrs?: HtmlConfig<TElement>, children?: readonly ChildValue[]): ElementType<NoInfer<TElement>>;\nexport function html<\n  TElement extends keyof TagMap | (string & {}) | CustomElementConstructor | Element | Document | ShadowRoot,\n>(el: TElement, children?: readonly ChildValue[]): ElementType<TElement>;\n\nexport function html(\n  el: string | CustomElementConstructor | Element | Document | ShadowRoot,\n  attrsOrChildren: readonly ChildValue[] | Readonly<Record<string, any>> = {},\n  children: readonly ChildValue[] = [],\n): Node | HtmlDeferredElement {\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, any>>;\n  [attrs, children] = Array.isArray(attrsOrChildren)\n    ? [{}, attrsOrChildren as readonly ChildValue[]]\n    : [attrsOrChildren as Readonly<Record<string, any>>, children];\n\n  if (typeof el === 'string') {\n    return DATA_KEY in attrs\n      ? {\n          tag: el,\n          config: attrs as HtmlDeferredElement['config'],\n          children,\n          toElement: () => html(document.createElement(el), attrs, children),\n        }\n      : html(document.createElement(el), attrs, children);\n  }\n\n  if ('setAttribute' in el) {\n    for (const [name, rawValue] of Object.entries(attrs)) {\n      if (rawValue === undefined || name.startsWith(':')) continue;\n\n      if (rawValue === null || rawValue === false) {\n        if (el.hasAttribute(name)) el.removeAttribute(name);\n      } else {\n        const value = rawValue == true ? '' : String(rawValue);\n        if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n      }\n    }\n  }\n\n  for (const [rawName, value] of Object.entries(attrs)) {\n    if (value === undefined || !rawName.startsWith(':')) continue;\n    const name = rawName.slice(1);\n    if (Reflect.get(el, name) !== value) Reflect.set(el, name, value);\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 key = child.config[DATA_KEY];\n        const reused = keyElements.get(key);\n\n        if (reused && reused.tagName.toLowerCase() === child.tag) {\n          keyElements.delete(key);\n          return html(reused, child.config, child.children);\n        }\n\n        return child.toElement();\n      }),\n  );\n\n  return el;\n}\n"],"mappings":";AAuCA,IAAM,IAAW;AAyBjB,SAAgB,EACd,GACA,IAAyE,EAAE,EAC3E,IAAkC,EAAE,EACR;AAC5B,KAAI,OAAO,KAAO,YAAY;EAC5B,IAAI,IAAO,eAAe,QAAQ,EAAG;AAOrC,EALI,MACF,IAAO,MAAM,OAAO,YAAY,IAChC,eAAe,OAAO,GAAM,EAAG,GAGjC,IAAK;;CAGP,IAAI;AAKJ,KAJA,CAAC,GAAO,KAAY,MAAM,QAAQ,EAAgB,GAC9C,CAAC,EAAE,EAAE,EAAyC,GAC9C,CAAC,GAAkD,EAAS,EAE5D,OAAO,KAAO,SAChB,QAAO,KAAY,IACf;EACE,KAAK;EACL,QAAQ;EACR;EACA,iBAAiB,EAAK,SAAS,cAAc,EAAG,EAAE,GAAO,EAAS;EACnE,GACD,EAAK,SAAS,cAAc,EAAG,EAAE,GAAO,EAAS;AAGvD,KAAI,kBAAkB,GACpB;OAAK,IAAM,CAAC,GAAM,MAAa,OAAO,QAAQ,EAAM,CAC9C,aAAa,KAAA,KAAa,EAAK,WAAW,IAAI,EAElD,KAAI,MAAa,QAAQ,MAAa,IAChC,EAAG,aAAa,EAAK,IAAE,EAAG,gBAAgB,EAAK;OAC9C;GACL,IAAM,IAAQ,KAAY,IAAO,KAAK,OAAO,EAAS;AACtD,GAAI,EAAG,aAAa,EAAK,KAAK,KAAO,EAAG,aAAa,GAAM,EAAM;;;AAKvE,MAAK,IAAM,CAAC,GAAS,MAAU,OAAO,QAAQ,EAAM,EAAE;AACpD,MAAI,MAAU,KAAA,KAAa,CAAC,EAAQ,WAAW,IAAI,CAAE;EACrD,IAAM,IAAO,EAAQ,MAAM,EAAE;AAC7B,EAAI,QAAQ,IAAI,GAAI,EAAK,KAAK,KAAO,QAAQ,IAAI,GAAI,GAAM,EAAM;;CAGnE,IAAI;AA4BJ,QA1BA,EAAG,gBACD,GAAG,EACA,QAAQ,MAAU,KAAS,QAAQ,MAAU,GAAM,CACnD,KAAK,MAAU;AACd,MAAI,OAAO,KAAU,SAAU,QAAO,SAAS,eAAe,OAAO,EAAM,CAAC;AAC5E,MAAI,aAAiB,KAAM,QAAO;AAElC,QAAgB,IAAI,IAClB,CAAC,GAAG,EAAG,SAAS,CAAC,SAAS,MAAU;GAClC,IAAM,IAAM,EAAM,aAAa,EAAS;AACxC,UAAO,KAAO,OAAO,EAAE,GAAG,CAAC,CAAC,GAAK,EAAM,CAAU;IACjD,CACH;EAED,IAAM,IAAM,EAAM,OAAO,IACnB,IAAS,EAAY,IAAI,EAAI;AAOnC,SALI,KAAU,EAAO,QAAQ,aAAa,KAAK,EAAM,OACnD,EAAY,OAAO,EAAI,EAChB,EAAK,GAAQ,EAAM,QAAQ,EAAM,SAAS,IAG5C,EAAM,WAAW;GACxB,CACL,EAEM"}
+{"version":3,"file":"html.js","names":[],"sources":["../src/html.ts"],"sourcesContent":["// prettier-ignore\ntype Alpha = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z';\ntype ChildValue = Node | HtmlDeferredElement | string | number | bigint | false | null | undefined;\ntype AttrValue = string | number | bigint | boolean | null | undefined;\ntype TagMap = HTMLElementTagNameMap & HTMLElementDeprecatedTagNameMap;\n\ntype IfEquals<T, U, Y = unknown, N = never> =\n  (<G>() => G extends T ? 1 : 2) extends <G>() => G extends U ? 1 : 2 ? Y : N;\n\ntype ElementType<TElement> = TElement extends string\n  ? TElement extends keyof TagMap\n    ? TagMap[TElement]\n    : HTMLElement\n  : TElement extends CustomElementConstructor\n    ? InstanceType<TElement>\n    : TElement extends Element | Document | ShadowRoot\n      ? TElement\n      : never;\n\ntype ElementProps<TElement> = {\n  readonly [P in keyof TElement & string as TElement[P] extends ((...args: any[]) => any) | null | undefined\n    ? never\n    : IfEquals<Record<P, TElement[P]>, Pick<TElement, P>, `:${P}`, never>]?: TElement[P];\n};\n\ntype ElementAttrs<TElement> = TElement extends string | CustomElementConstructor | Element\n  ? Readonly<Record<`${Alpha}${string}`, AttrValue>>\n  : {};\n\nexport type HtmlConfig<TElement> = ElementAttrs<TElement> & ElementProps<ElementType<TElement>>;\nexport type HtmlConfigWithKey<TElement> = { readonly [DATA_KEY]: string } & HtmlConfig<TElement>;\n\nexport interface HtmlDeferredElement<TElement extends HTMLElement = HTMLElement> {\n  readonly tag: string;\n  readonly config: { readonly [DATA_KEY]: string } & HtmlConfig<TElement>;\n  readonly children: readonly ChildValue[] | undefined;\n  toElement: () => TElement;\n}\n\nconst DATA_KEY = 'data-key';\n\n/**\n * Create a deferred HTML element with a key.\n *\n * Final element creation is deferred until the element is used as a child,\n * when it can be determined if a new element should be created, or an existing\n * element with the same key and tag-name should be updated.\n */\nexport function html<const TElement extends keyof TagMap | (string & {}) | CustomElementConstructor>(\n  el: TElement,\n  config: HtmlConfigWithKey<TElement>,\n  children?: readonly ChildValue[],\n): HtmlDeferredElement<ElementType<TElement>>;\n\n/**\n * Create or update an HTML element.\n */\nexport function html<\n  TElement extends keyof TagMap | (string & {}) | CustomElementConstructor | Element | Document | ShadowRoot,\n>(el: TElement, attrs?: HtmlConfig<TElement>, children?: readonly ChildValue[]): ElementType<NoInfer<TElement>>;\nexport function html<\n  TElement extends keyof TagMap | (string & {}) | CustomElementConstructor | Element | Document | ShadowRoot,\n>(el: TElement, children?: readonly ChildValue[]): ElementType<TElement>;\n\nexport function html(\n  el: string | CustomElementConstructor | Element | Document | ShadowRoot,\n  attrsOrChildren: readonly ChildValue[] | Readonly<Record<string, any>> = {},\n  children: readonly ChildValue[] = [],\n): Node | HtmlDeferredElement {\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, any>>;\n  [attrs, children] = Array.isArray(attrsOrChildren)\n    ? [{}, attrsOrChildren as readonly ChildValue[]]\n    : [attrsOrChildren as Readonly<Record<string, any>>, children];\n\n  if (typeof el === 'string') {\n    return DATA_KEY in attrs\n      ? {\n          tag: el,\n          config: attrs as HtmlDeferredElement['config'],\n          children,\n          toElement: () => html(document.createElement(el), attrs, children),\n        }\n      : html(document.createElement(el), attrs, children);\n  }\n\n  if ('setAttribute' in el) {\n    for (const [name, rawValue] of Object.entries(attrs)) {\n      if (rawValue === undefined || name.startsWith(':')) continue;\n\n      if (rawValue === null || rawValue === false) {\n        if (el.hasAttribute(name)) el.removeAttribute(name);\n      } else {\n        const value = rawValue == true ? '' : String(rawValue);\n        if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n      }\n    }\n  }\n\n  for (const [rawName, value] of Object.entries(attrs)) {\n    if (value === undefined || !rawName.startsWith(':')) continue;\n    const name = rawName.slice(1);\n    if (Reflect.get(el, name) !== value) Reflect.set(el, name, value);\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 key = child.config[DATA_KEY];\n        const reused = keyElements.get(key);\n\n        if (reused && reused.tagName.toLowerCase() === child.tag) {\n          keyElements.delete(key);\n          return html(reused, child.config, child.children);\n        }\n\n        return child.toElement();\n      }),\n  );\n\n  return el;\n}\n"],"mappings":";AAuCA,IAAM,IAAW;AAyBjB,SAAgB,EACd,GACA,IAAyE,EAAE,EAC3E,IAAkC,EAAE,EACR;AAC5B,KAAI,OAAO,KAAO,YAAY;EAC5B,IAAI,IAAO,eAAe,QAAQ,EAAG;AAOrC,EALI,MACF,IAAO,MAAM,OAAO,YAAY,IAChC,eAAe,OAAO,GAAM,EAAG,GAGjC,IAAK;;CAGP,IAAI;AAKJ,KAJA,CAAC,GAAO,KAAY,MAAM,QAAQ,EAAgB,GAC9C,CAAC,EAAE,EAAE,EAAyC,GAC9C,CAAC,GAAkD,EAAS,EAE5D,OAAO,KAAO,SAChB,QAAO,KAAY,IACf;EACE,KAAK;EACL,QAAQ;EACR;EACA,iBAAiB,EAAK,SAAS,cAAc,EAAG,EAAE,GAAO,EAAS;EACnE,GACD,EAAK,SAAS,cAAc,EAAG,EAAE,GAAO,EAAS;AAGvD,KAAI,kBAAkB,GACpB;OAAK,IAAM,CAAC,GAAM,MAAa,OAAO,QAAQ,EAAM,CAC9C,aAAa,KAAA,KAAa,EAAK,WAAW,IAAI,EAElD,KAAI,MAAa,QAAQ,MAAa,IAChC,EAAG,aAAa,EAAK,IAAE,EAAG,gBAAgB,EAAK;OAC9C;GACL,IAAM,IAAQ,KAAY,IAAO,KAAK,OAAO,EAAS;AACtD,GAAI,EAAG,aAAa,EAAK,KAAK,KAAO,EAAG,aAAa,GAAM,EAAM;;;AAKvE,MAAK,IAAM,CAAC,GAAS,MAAU,OAAO,QAAQ,EAAM,EAAE;AACpD,MAAI,MAAU,KAAA,KAAa,CAAC,EAAQ,WAAW,IAAI,CAAE;EACrD,IAAM,IAAO,EAAQ,MAAM,EAAE;AAC7B,EAAI,QAAQ,IAAI,GAAI,EAAK,KAAK,KAAO,QAAQ,IAAI,GAAI,GAAM,EAAM;;CAGnE,IAAI;AA4BJ,QA1BA,EAAG,gBACD,GAAG,EACA,QAAQ,MAAU,KAAS,QAAQ,MAAU,GAAM,CACnD,KAAK,MAAU;AACd,MAAI,OAAO,KAAU,SAAU,QAAO,SAAS,eAAe,OAAO,EAAM,CAAC;AAC5E,MAAI,aAAiB,KAAM,QAAO;AAElC,QAAgB,IAAI,IAClB,CAAC,GAAG,EAAG,SAAS,CAAC,SAAS,MAAU;GAClC,IAAM,IAAM,EAAM,aAAa,EAAS;AACxC,UAAO,KAAO,OAAO,EAAE,GAAG,CAAC,CAAC,GAAK,EAAM,CAAU;IACjD,CACH;EAED,IAAM,IAAM,EAAM,OAAO,IACnB,IAAS,EAAY,IAAI,EAAI;AAOnC,SALI,KAAU,EAAO,QAAQ,aAAa,KAAK,EAAM,OACnD,EAAY,OAAO,EAAI,EAChB,EAAK,GAAQ,EAAM,QAAQ,EAAM,SAAS,IAG5C,EAAM,WAAW;GACxB,CACL,EAEM"}

package/dist/index.d.ts

@@ -1,13 +1,17 @@
-export * from './component.ts';
-export * from './hooks/attributes.ts';
-export * from './hooks/child-effect.ts';
-export * from './hooks/effect.ts';
-export * from './hooks/host.ts';
-export * from './hooks/loading.ts';
-export * from './hooks/ref.ts';
-export * from './hooks/route.ts';
-export * from './hooks/store.ts';
+export * from './createStore.ts';
+export * from './defineComponent.ts';
+export * from './hooks/useAsync.ts';
+export * from './hooks/useAttributes.ts';
+export * from './hooks/useChildEffect.ts';
+export * from './hooks/useDisconnect.ts';
+export * from './hooks/useDocument.ts';
+export * from './hooks/useEffect.ts';
+export * from './hooks/useElementInternals.ts';
+export * from './hooks/useForm.ts';
+export * from './hooks/useHost.ts';
+export * from './hooks/useParent.ts';
+export * from './hooks/useRef.ts';
+export * from './hooks/useRoute.ts';
+export * from './hooks/useStore.ts';
 export * from './html.ts';
 export { html as h } from './html.ts';
-export * from './router.ts';
-export * from './store.ts';

package/dist/index.js

@@ -1,13 +1,17 @@
-import { useRef as e } from "./hooks/ref.js";
-import { defineComponent as t } from "./component.js";
-import { useDisconnectEffect as n, useEffect as r } from "./hooks/effect.js";
-import { useHost as i } from "./hooks/host.js";
-import { useAttributes as a } from "./hooks/attributes.js";
-import { useChildEffect as o } from "./hooks/child-effect.js";
-import { useLoading as s } from "./hooks/loading.js";
-import { createStore as c } from "./store.js";
-import { getRouter as l } from "./router.js";
-import { useStore as u } from "./hooks/store.js";
-import { useRoute as d } from "./hooks/route.js";
-import { html as f } from "./html.js";
-export { c as createStore, t as defineComponent, l as getRouter, f as h, f as html, a as useAttributes, o as useChildEffect, n as useDisconnectEffect, r as useEffect, i as useHost, s as useLoading, e as useRef, d as useRoute, u as useStore };
+import { createStore as e } from "./createStore.js";
+import { useRef as t } from "./hooks/useRef.js";
+import { defineComponent as n } from "./defineComponent.js";
+import { useDisconnectCallback as r } from "./hooks/useDisconnect.js";
+import { useEffect as i } from "./hooks/useEffect.js";
+import { useAsync as a } from "./hooks/useAsync.js";
+import { useHost as o } from "./hooks/useHost.js";
+import { useAttributes as s } from "./hooks/useAttributes.js";
+import { useChildEffect as c } from "./hooks/useChildEffect.js";
+import { useDocument as l } from "./hooks/useDocument.js";
+import { useElementInternals as u } from "./hooks/useElementInternals.js";
+import { useForm as d, useFormDisabled as f, useFormResetCallback as p, useFormRestoreCallback as m } from "./hooks/useForm.js";
+import { useParent as h } from "./hooks/useParent.js";
+import { useStore as g } from "./hooks/useStore.js";
+import { useRoute as _ } from "./hooks/useRoute.js";
+import { html as v } from "./html.js";
+export { e as createStore, n as defineComponent, v as h, v as html, a as useAsync, s as useAttributes, c as useChildEffect, r as useDisconnectCallback, l as useDocument, i as useEffect, u as useElementInternals, d as useForm, f as useFormDisabled, p as useFormResetCallback, m as useFormRestoreCallback, o as useHost, h as useParent, t as useRef, _ as useRoute, g as useStore };

package/dist/internal/constants.d.ts

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

package/dist/internal/constants.js

@@ -0,0 +1,6 @@
+//#region src/internal/constants.ts
+var e = Symbol();
+//#endregion
+export { e as $$ref };
+
+//# sourceMappingURL=constants.js.map

package/dist/internal/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../src/internal/constants.ts"],"sourcesContent":["export const $$ref = Symbol();\n"],"mappings":";AAAA,IAAa,IAAQ,QAAQ"}

package/dist/internal/controllers.d.ts

@@ -0,0 +1,2 @@
+import type { Controller } from './createController.ts';
+export declare const controllers: Controller[];

package/dist/internal/controllers.js

@@ -0,0 +1,6 @@
+//#region src/internal/controllers.ts
+var e = [];
+//#endregion
+export { e as controllers };
+
+//# sourceMappingURL=controllers.js.map

package/dist/internal/controllers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controllers.js","names":[],"sources":["../../src/internal/controllers.ts"],"sourcesContent":["import type { Controller } from './createController.ts';\n\nexport const controllers: Controller[] = [];\n"],"mappings":";AAEA,IAAa,IAA4B,EAAE"}

package/dist/internal/{callbacks.js → createCallbacks.js}

@@ -1,4 +1,4 @@
-//#region src/internal/callbacks.ts
+//#region src/internal/createCallbacks.ts
 function e() {
 	let e = /* @__PURE__ */ new Set(), t = {
 		push: (t) => (e.add(t), () => e.delete(t)),
@@ -27,4 +27,4 @@ function e() {
 //#endregion
 export { e as createCallbacks };
 
-//# sourceMappingURL=callbacks.js.map
+//# sourceMappingURL=createCallbacks.js.map

package/dist/internal/createCallbacks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCallbacks.js","names":[],"sources":["../../src/internal/createCallbacks.ts"],"sourcesContent":["export interface Callbacks<TArgs extends unknown[] = []> {\n  readonly push: (callback: (...args: TArgs) => void) => () => void;\n  readonly run: (...args: TArgs) => void;\n  readonly runAndClear: (...args: TArgs) => void;\n  readonly clear: () => void;\n}\n\nexport function createCallbacks<TArgs extends unknown[] = []>(): Callbacks<TArgs> {\n  const callbacks = new Set<(...args: TArgs) => void>();\n\n  const self: Callbacks<TArgs> = {\n    push: (callback) => {\n      callbacks.add(callback);\n      return () => callbacks.delete(callback);\n    },\n    run: (...args) => {\n      const errors: unknown[] = [];\n      const callbacksCopy = [...callbacks];\n\n      for (const callback of callbacksCopy) {\n        try {\n          callback(...args);\n        } catch (error: unknown) {\n          errors.push(error);\n        }\n      }\n\n      if (errors.length > 0) throw new AggregateError(errors);\n    },\n    runAndClear: (...args: TArgs) => {\n      try {\n        self.run(...args);\n      } finally {\n        self.clear();\n      }\n    },\n    clear: () => {\n      callbacks.clear();\n    },\n  };\n\n  return self;\n}\n"],"mappings":";AAOA,SAAgB,IAAkE;CAChF,IAAM,oBAAY,IAAI,KAA+B,EAE/C,IAAyB;EAC7B,OAAO,OACL,EAAU,IAAI,EAAS,QACV,EAAU,OAAO,EAAS;EAEzC,MAAM,GAAG,MAAS;GAChB,IAAM,IAAoB,EAAE,EACtB,IAAgB,CAAC,GAAG,EAAU;AAEpC,QAAK,IAAM,KAAY,EACrB,KAAI;AACF,MAAS,GAAG,EAAK;YACV,GAAgB;AACvB,MAAO,KAAK,EAAM;;AAItB,OAAI,EAAO,SAAS,EAAG,OAAU,eAAe,EAAO;;EAEzD,cAAc,GAAG,MAAgB;AAC/B,OAAI;AACF,MAAK,IAAI,GAAG,EAAK;aACT;AACR,MAAK,OAAO;;;EAGhB,aAAa;AACX,KAAU,OAAO;;EAEpB;AAED,QAAO"}

package/dist/internal/createController.d.ts

@@ -0,0 +1,33 @@
+import { type ReadonlyRef, type Ref } from '../hooks/useRef.ts';
+import { type Callbacks } from './createCallbacks.ts';
+export interface Controller {
+    readonly host: HTMLElement;
+    readonly onNotify: Callbacks;
+    readonly onAfterRender: Callbacks;
+    readonly onDisconnect: Callbacks;
+    readonly refDocument: ReadonlyRef<Document>;
+    readonly refParent: ReadonlyRef<ParentNode | null>;
+    readonly formAssociated: {
+        readonly refForm: ReadonlyRef<HTMLFormElement | null>;
+        readonly refDisabled: ReadonlyRef<boolean>;
+        readonly onReset: Callbacks;
+        readonly onRestore: Callbacks<[state: string | File | FormData, reason: 'restore' | 'autocomplete']>;
+    } | undefined;
+    readonly createRef: <T>(value: T, onChange?: (value: T) => void) => Ref<T>;
+    readonly attachInternals: () => ElementInternals;
+    readonly connectedCallback: () => void;
+    readonly connectedMoveCallback: () => void;
+    readonly disconnectedCallback: () => void;
+    readonly adoptedCallback: () => void;
+    readonly formDisabledCallback: (disabled: boolean) => void;
+    readonly formResetCallback: () => void;
+    readonly formStateRestoreCallback: (state: string | File | FormData, reason: 'restore' | 'autocomplete') => void;
+}
+interface ControllerConfig {
+    readonly host: HTMLElement;
+    readonly formAssociated: boolean;
+    readonly render: (controller: Controller) => void;
+    readonly attachInternals: () => ElementInternals;
+}
+export declare function createController({ host, formAssociated, render, attachInternals }: ControllerConfig): Controller;
+export {};

package/dist/internal/createController.js

@@ -0,0 +1,73 @@
+import { createCallbacks as e } from "./createCallbacks.js";
+import { controllers as t } from "./controllers.js";
+import { $$ref as n } from "./constants.js";
+//#region src/internal/createController.ts
+function r({ host: r, formAssociated: i, render: a, attachInternals: o }) {
+	let s = !1, c = !1, l, u, d = e(), f = (e, t) => {
+		let r = e;
+		return {
+			[n]: !0,
+			get value() {
+				return r;
+			},
+			set value(e) {
+				e !== r && (r = e, t?.(r), !(!c || s) && (s = !0, queueMicrotask(() => {
+					s = !1, d.run();
+				})));
+			}
+		};
+	}, p = {
+		host: r,
+		onNotify: d,
+		onAfterRender: e(),
+		onDisconnect: e(),
+		refDocument: f(r.ownerDocument),
+		refParent: f(r.parentNode),
+		formAssociated: i ? {
+			refForm: f(null),
+			refDisabled: f(!1),
+			onReset: e(),
+			onRestore: e()
+		} : void 0,
+		createRef: f,
+		attachInternals: () => l ??= o(),
+		connectedCallback: () => {
+			if (!c) {
+				c = !0, p.refParent.value = r.parentNode;
+				try {
+					t.push(p), a(p);
+				} finally {
+					t.pop();
+				}
+				p.onAfterRender.runAndClear(), u?.type === "reset" ? p.formAssociated?.onReset.run() : u?.type === "restore" && p.formAssociated?.onRestore.run(u.state, u.reason), p.onNotify.run();
+			}
+		},
+		connectedMoveCallback: () => {
+			c && (p.refParent.value = r.parentNode, p.onNotify.run());
+		},
+		disconnectedCallback: () => {
+			c && (p.onNotify.clear(), p.formAssociated?.onReset.clear(), p.formAssociated?.onRestore.clear(), p.onDisconnect.runAndClear());
+		},
+		adoptedCallback: () => {
+			p.refDocument.value = r.ownerDocument, p.onNotify.run();
+		},
+		formDisabledCallback: (e) => {
+			p.formAssociated && (p.formAssociated.refDisabled.value = e, p.onNotify.run());
+		},
+		formResetCallback: () => {
+			p.formAssociated && (c ? p.formAssociated.onReset.run() : u = { type: "reset" });
+		},
+		formStateRestoreCallback: (e, t) => {
+			p.formAssociated && (c ? p.formAssociated.onRestore.run(e, t) : u = {
+				type: "restore",
+				state: e,
+				reason: t
+			});
+		}
+	};
+	return p;
+}
+//#endregion
+export { r as createController };
+
+//# sourceMappingURL=createController.js.map

package/dist/internal/createController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createController.js","names":[],"sources":["../../src/internal/createController.ts"],"sourcesContent":["import { type ReadonlyRef, type Ref } from '../hooks/useRef.ts';\nimport { $$ref } from './constants.ts';\nimport { controllers } from './controllers.ts';\nimport { type Callbacks, createCallbacks } from './createCallbacks.ts';\n\nexport interface Controller {\n  readonly host: HTMLElement;\n  readonly onNotify: Callbacks;\n  readonly onAfterRender: Callbacks;\n  readonly onDisconnect: Callbacks;\n  readonly refDocument: ReadonlyRef<Document>;\n  readonly refParent: ReadonlyRef<ParentNode | null>;\n  readonly formAssociated:\n    | {\n        readonly refForm: ReadonlyRef<HTMLFormElement | null>;\n        readonly refDisabled: ReadonlyRef<boolean>;\n        readonly onReset: Callbacks;\n        readonly onRestore: Callbacks<[state: string | File | FormData, reason: 'restore' | 'autocomplete']>;\n      }\n    | undefined;\n  readonly createRef: <T>(value: T, onChange?: (value: T) => void) => Ref<T>;\n  readonly attachInternals: () => ElementInternals;\n  readonly connectedCallback: () => void;\n  readonly connectedMoveCallback: () => void;\n  readonly disconnectedCallback: () => void;\n  readonly adoptedCallback: () => void;\n  readonly formDisabledCallback: (disabled: boolean) => void;\n  readonly formResetCallback: () => void;\n  readonly formStateRestoreCallback: (state: string | File | FormData, reason: 'restore' | 'autocomplete') => void;\n}\n\ninterface ControllerConfig {\n  readonly host: HTMLElement;\n  readonly formAssociated: boolean;\n  readonly render: (controller: Controller) => void;\n  readonly attachInternals: () => ElementInternals;\n}\n\nexport function createController({ host, formAssociated, render, attachInternals }: ControllerConfig): Controller {\n  let notifying = false;\n  let connected = false;\n  let internals: ElementInternals | undefined;\n\n  let deferredFormUpdate:\n    | { readonly type: 'reset' }\n    | { readonly type: 'restore'; state: string | File | FormData; reason: 'restore' | 'autocomplete' }\n    | undefined;\n\n  const onNotify = createCallbacks();\n\n  const createRef = <T>(initialValue: T, onChange?: (value: T) => void): Ref<T> => {\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        if (!connected || notifying) return;\n        notifying = true;\n\n        queueMicrotask(() => {\n          notifying = false;\n          onNotify.run();\n        });\n      },\n    };\n  };\n\n  const controller = {\n    host,\n    onNotify,\n    onAfterRender: createCallbacks(),\n    onDisconnect: createCallbacks(),\n    refDocument: createRef(host.ownerDocument),\n    refParent: createRef(host.parentNode),\n    formAssociated: formAssociated\n      ? {\n          refForm: createRef<HTMLFormElement | null>(null),\n          refDisabled: createRef(false),\n          onReset: createCallbacks(),\n          onRestore: createCallbacks(),\n        }\n      : undefined,\n    createRef,\n    attachInternals: () => {\n      return (internals ??= attachInternals());\n    },\n    connectedCallback: () => {\n      if (connected) return;\n      connected = true;\n      controller.refParent.value = host.parentNode;\n\n      try {\n        controllers.push(controller);\n        render(controller);\n      } finally {\n        controllers.pop();\n      }\n\n      controller.onAfterRender.runAndClear();\n\n      if (deferredFormUpdate?.type === 'reset') {\n        controller.formAssociated?.onReset.run();\n      } else if (deferredFormUpdate?.type === 'restore') {\n        controller.formAssociated?.onRestore.run(deferredFormUpdate.state, deferredFormUpdate.reason);\n      }\n\n      controller.onNotify.run();\n    },\n    connectedMoveCallback: () => {\n      if (!connected) return;\n      controller.refParent.value = host.parentNode;\n      controller.onNotify.run();\n    },\n    disconnectedCallback: () => {\n      if (!connected) return;\n      controller.onNotify.clear();\n      controller.formAssociated?.onReset.clear();\n      controller.formAssociated?.onRestore.clear();\n      controller.onDisconnect.runAndClear();\n    },\n    adoptedCallback: () => {\n      controller.refDocument.value = host.ownerDocument;\n      controller.onNotify.run();\n    },\n    formDisabledCallback: (disabled: boolean) => {\n      if (!controller.formAssociated) return;\n      controller.formAssociated.refDisabled.value = disabled;\n      controller.onNotify.run();\n    },\n    formResetCallback: () => {\n      if (!controller.formAssociated) return;\n      if (connected) controller.formAssociated.onReset.run();\n      else deferredFormUpdate = { type: 'reset' };\n    },\n    formStateRestoreCallback: (state, reason) => {\n      if (!controller.formAssociated) return;\n      if (connected) controller.formAssociated.onRestore.run(state, reason);\n      else deferredFormUpdate = { type: 'restore', state, reason };\n    },\n  } satisfies Controller;\n\n  return controller;\n}\n"],"mappings":";;;;AAsCA,SAAgB,EAAiB,EAAE,SAAM,mBAAgB,WAAQ,sBAAiD;CAChH,IAAI,IAAY,IACZ,IAAY,IACZ,GAEA,GAKE,IAAW,GAAiB,EAE5B,KAAgB,GAAiB,MAA0C;EAC/E,IAAI,IAAQ;AAEZ,SAAO;IACJ,IAAQ;GACT,IAAI,QAAQ;AACV,WAAO;;GAET,IAAI,MAAM,GAAU;AACd,UAAa,MACjB,IAAQ,GACR,IAAW,EAAM,EACb,GAAC,KAAa,OAClB,IAAY,IAEZ,qBAAqB;AAEnB,KADA,IAAY,IACZ,EAAS,KAAK;MACd;;GAEL;IAGG,IAAa;EACjB;EACA;EACA,eAAe,GAAiB;EAChC,cAAc,GAAiB;EAC/B,aAAa,EAAU,EAAK,cAAc;EAC1C,WAAW,EAAU,EAAK,WAAW;EACrC,gBAAgB,IACZ;GACE,SAAS,EAAkC,KAAK;GAChD,aAAa,EAAU,GAAM;GAC7B,SAAS,GAAiB;GAC1B,WAAW,GAAiB;GAC7B,GACD,KAAA;EACJ;EACA,uBACU,MAAc,GAAiB;EAEzC,yBAAyB;AACnB,WAEJ;IADA,IAAY,IACZ,EAAW,UAAU,QAAQ,EAAK;AAElC,QAAI;AAEF,KADA,EAAY,KAAK,EAAW,EAC5B,EAAO,EAAW;cACV;AACR,OAAY,KAAK;;AAWnB,IARA,EAAW,cAAc,aAAa,EAElC,GAAoB,SAAS,UAC/B,EAAW,gBAAgB,QAAQ,KAAK,GAC/B,GAAoB,SAAS,aACtC,EAAW,gBAAgB,UAAU,IAAI,EAAmB,OAAO,EAAmB,OAAO,EAG/F,EAAW,SAAS,KAAK;;;EAE3B,6BAA6B;AACtB,SACL,EAAW,UAAU,QAAQ,EAAK,YAClC,EAAW,SAAS,KAAK;;EAE3B,4BAA4B;AACrB,SACL,EAAW,SAAS,OAAO,EAC3B,EAAW,gBAAgB,QAAQ,OAAO,EAC1C,EAAW,gBAAgB,UAAU,OAAO,EAC5C,EAAW,aAAa,aAAa;;EAEvC,uBAAuB;AAErB,GADA,EAAW,YAAY,QAAQ,EAAK,eACpC,EAAW,SAAS,KAAK;;EAE3B,uBAAuB,MAAsB;AACtC,KAAW,mBAChB,EAAW,eAAe,YAAY,QAAQ,GAC9C,EAAW,SAAS,KAAK;;EAE3B,yBAAyB;AAClB,KAAW,mBACZ,IAAW,EAAW,eAAe,QAAQ,KAAK,GACjD,IAAqB,EAAE,MAAM,SAAS;;EAE7C,2BAA2B,GAAO,MAAW;AACtC,KAAW,mBACZ,IAAW,EAAW,eAAe,UAAU,IAAI,GAAO,EAAO,GAChE,IAAqB;IAAE,MAAM;IAAW;IAAO;IAAQ;;EAE/D;AAED,QAAO"}

package/dist/internal/getOrInsert.d.ts

@@ -0,0 +1,4 @@
+type MapKey<T> = T extends Map<infer TKey, any> ? TKey : T extends WeakMap<infer TKey, any> ? TKey : never;
+type MapValue<T> = T extends Map<any, infer TValue> ? TValue : T extends WeakMap<any, infer TValue> ? TValue : never;
+export declare function getOrInsert<TMap extends Map<any, any> | WeakMap<any, any>>(map: TMap, key: MapKey<TMap>, createValue: (key: MapKey<TMap>) => MapValue<TMap>): MapValue<TMap>;
+export {};

package/dist/internal/getOrInsert.js

@@ -0,0 +1,10 @@
+//#region src/internal/getOrInsert.ts
+function e(e, t, n) {
+	if (e.has(t)) return e.get(t);
+	let r = n(t);
+	return e.set(t, r), r;
+}
+//#endregion
+export { e as getOrInsert };
+
+//# sourceMappingURL=getOrInsert.js.map

package/dist/internal/getOrInsert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getOrInsert.js","names":[],"sources":["../../src/internal/getOrInsert.ts"],"sourcesContent":["type MapKey<T> = T extends Map<infer TKey, any> ? TKey : T extends WeakMap<infer TKey, any> ? TKey : never;\ntype MapValue<T> = T extends Map<any, infer TValue> ? TValue : T extends WeakMap<any, infer TValue> ? TValue : never;\n\nexport function getOrInsert<TMap extends Map<any, any> | WeakMap<any, any>>(\n  map: TMap,\n  key: MapKey<TMap>,\n  createValue: (key: MapKey<TMap>) => MapValue<TMap>,\n): MapValue<TMap> {\n  if (map.has(key)) return map.get(key)!;\n  const value = createValue(key);\n  map.set(key, value);\n  return value;\n}\n"],"mappings":";AAGA,SAAgB,EACd,GACA,GACA,GACgB;AAChB,KAAI,EAAI,IAAI,EAAI,CAAE,QAAO,EAAI,IAAI,EAAI;CACrC,IAAM,IAAQ,EAAY,EAAI;AAE9B,QADA,EAAI,IAAI,GAAK,EAAM,EACZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seahax/elemental",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "description": "Functional, reactive, web component base library.",
   "repository": {
     "type": "git",
@@ -20,22 +20,26 @@
   ],
   "scripts": {
     "build": "vite build && tsc -b -f tsconfig.lib.json",
+    "postinstall": "playwright install",
     "prepublishOnly": "npm run build && npm test",
-    "test": "eslint src"
+    "test": "eslint src && vitest run"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@seahax/eslint-progress": "^0.1.17",
     "@types/node": "^25.6.0",
+    "@vitest/browser-playwright": "^4.1.6",
     "eslint": "^10.3.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-regexp": "^3.1.0",
     "eslint-plugin-simple-import-sort": "^13.0.0",
     "jiti": "^2.6.1",
+    "playwright": "^1.60.0",
     "typescript-eslint": "^8.59.1",
     "vite": "^8.0.10",
-    "vite-bundle-analyzer": "^1.3.8"
+    "vite-bundle-analyzer": "^1.3.8",
+    "vitest": "^4.1.6"
   },
   "publishConfig": {
     "access": "public"

package/dist/component.js

@@ -1,34 +0,0 @@
-import { createContextController as e } from "./internal/context.js";
-import { useRef as t } from "./hooks/ref.js";
-//#region src/component.ts
-function n(n, { props: r, shadow: i } = {}) {
-	return class extends HTMLElement {
-		#e = {};
-		#t = e(this);
-		constructor() {
-			if (super(), r) {
-				let e = this.#e;
-				for (let [n, i] of Object.entries(r)) {
-					if (n in this) continue;
-					let r = i(e[n] = t(void 0), this);
-					Object.defineProperty(this, n, r);
-				}
-			}
-		}
-		connectedCallback() {
-			this.#t.connect(() => {
-				n(this.attachShadow({
-					...i,
-					mode: i?.mode ?? "open"
-				}), this.#e);
-			});
-		}
-		disconnectedCallback() {
-			this.#t.disconnect();
-		}
-	};
-}
-//#endregion
-export { n as defineComponent };
-
-//# sourceMappingURL=component.js.map

package/dist/component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.js","names":["#propRefs","#contextController"],"sources":["../src/component.ts"],"sourcesContent":["import { type Ref, useRef } from './hooks/ref.ts';\nimport { createContextController } from './internal/context.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\n/** Define a custom `HTMLElement` that is functional and reactive. */\nexport function defineComponent<TProps extends object = {}>(\n  render: (shadowRoot: ComponentShadowRoot<TProps>, props: ComponentPropRefs<TProps>) => void,\n  options?: ComponentOptions<TProps>,\n): ComponentConstructor<TProps>;\nexport function defineComponent(\n  render: (\n    shadowRoot: ComponentShadowRoot<Record<string, unknown>>,\n    props: ComponentPropRefs<Record<string, unknown>>,\n  ) => void,\n  { props, shadow }: ComponentOptions<Record<string, unknown>> = {},\n): ComponentConstructor<{}> {\n  return class extends HTMLElement {\n    readonly #propRefs: ComponentPropRefs<Record<string, unknown>> = {};\n    readonly #contextController = createContextController(this);\n\n    constructor() {\n      super();\n\n      if (props) {\n        const propRefs: Record<string, Ref<unknown>> = this.#propRefs;\n\n        for (const [key, getDescriptor] of Object.entries(props)) {\n          if (key in this) continue;\n          const ref = (propRefs[key] = useRef<any>(undefined));\n          const descriptor = getDescriptor(ref, this);\n          Object.defineProperty(this, key, descriptor);\n        }\n      }\n    }\n\n    protected connectedCallback(): void {\n      this.#contextController.connect(() => {\n        const shadowRoot = this.attachShadow({ ...shadow, mode: shadow?.mode ?? 'open' });\n        render(shadowRoot as ComponentShadowRoot<Record<string, unknown>>, this.#propRefs);\n      });\n    }\n\n    protected disconnectedCallback(): void {\n      this.#contextController.disconnect();\n    }\n  };\n}\n"],"mappings":";;;AA+CA,SAAgB,EACd,GAIA,EAAE,UAAO,cAAsD,EAAE,EACvC;AAC1B,QAAO,cAAc,YAAY;EAC/B,KAAiE,EAAE;EACnE,KAA8B,EAAwB,KAAK;EAE3D,cAAc;AAGZ,OAFA,OAAO,EAEH,GAAO;IACT,IAAM,IAAyC,MAAA;AAE/C,SAAK,IAAM,CAAC,GAAK,MAAkB,OAAO,QAAQ,EAAM,EAAE;AACxD,SAAI,KAAO,KAAM;KAEjB,IAAM,IAAa,EAAc,EADX,KAAO,EAAY,KAAA,EAAU,EACb,KAAK;AAC3C,YAAO,eAAe,MAAM,GAAK,EAAW;;;;EAKlD,oBAAoC;AAClC,SAAA,EAAwB,cAAc;AAEpC,MADmB,KAAK,aAAa;KAAE,GAAG;KAAQ,MAAM,GAAQ,QAAQ;KAAQ,CACzE,EAA4D,MAAA,EAAe;KAClF;;EAGJ,uBAAuC;AACrC,SAAA,EAAwB,YAAY"}

package/dist/hooks/attributes.js

@@ -1,25 +0,0 @@
-import { useRef as e } from "./ref.js";
-import { useEffect as t } from "./effect.js";
-import { useHost as n } from "./host.js";
-//#region src/hooks/attributes.ts
-function r(...r) {
-	if (r.length === 0) return {};
-	let i = n(), a = [], o = /* @__PURE__ */ new Map();
-	for (let t of r) {
-		let n = e(i.getAttribute(t), (e) => {
-			e == null ? i.removeAttribute(t) : i.setAttribute(t, e);
-		});
-		a.push(n), o.set(t, n);
-	}
-	let s = new MutationObserver((e) => {
-		for (let { attributeName: t } of e) t != null && Object.hasOwn(a, t) && (o.get(t).value = i.getAttribute(t));
-	});
-	return t([], () => (s.observe(i, {
-		attributeFilter: r,
-		attributes: !0
-	}), () => s.disconnect())), a;
-}
-//#endregion
-export { r as useAttributes };
-
-//# sourceMappingURL=attributes.js.map

package/dist/hooks/attributes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"attributes.js","names":[],"sources":["../../src/hooks/attributes.ts"],"sourcesContent":["import { useEffect } from './effect.ts';\nimport { useHost } from './host.ts';\nimport { type Ref, useRef } from './ref.ts';\n\n/** Use references (reactive state) bound to attributes. */\nexport function useAttributes<const TNames extends string[]>(\n  ...names: TNames\n): { -readonly [P in keyof TNames]: Ref<string | null> } {\n  if (names.length === 0) return {} as any;\n  const host = useHost();\n  const refs: Ref<string | null>[] = [];\n  const refMap = new Map<string, Ref<string | null>>();\n\n  for (const name of names) {\n    const ref = useRef(host.getAttribute(name), (value) => {\n      if (value == null) host.removeAttribute(name);\n      else host.setAttribute(name, value);\n    });\n\n    refs.push(ref);\n    refMap.set(name, ref);\n  }\n\n  const observer = new MutationObserver((mutation) => {\n    for (const { attributeName } of mutation) {\n      if (attributeName != null && Object.hasOwn(refs, attributeName)) {\n        refMap.get(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 any;\n}\n"],"mappings":";;;;AAKA,SAAgB,EACd,GAAG,GACoD;AACvD,KAAI,EAAM,WAAW,EAAG,QAAO,EAAE;CACjC,IAAM,IAAO,GAAS,EAChB,IAA6B,EAAE,EAC/B,oBAAS,IAAI,KAAiC;AAEpD,MAAK,IAAM,KAAQ,GAAO;EACxB,IAAM,IAAM,EAAO,EAAK,aAAa,EAAK,GAAG,MAAU;AACrD,GAAI,KAAS,OAAM,EAAK,gBAAgB,EAAK,GACxC,EAAK,aAAa,GAAM,EAAM;IACnC;AAGF,EADA,EAAK,KAAK,EAAI,EACd,EAAO,IAAI,GAAM,EAAI;;CAGvB,IAAM,IAAW,IAAI,kBAAkB,MAAa;AAClD,OAAK,IAAM,EAAE,sBAAmB,EAC9B,CAAI,KAAiB,QAAQ,OAAO,OAAO,GAAM,EAAc,KAC7D,EAAO,IAAI,EAAc,CAAE,QAAQ,EAAK,aAAa,EAAc;GAGvE;AAOF,QALA,EAAU,EAAE,SACV,EAAS,QAAQ,GAAM;EAAE,iBAAiB;EAAO,YAAY;EAAM,CAAC,QACvD,EAAS,YAAY,EAClC,EAEK"}

package/dist/hooks/child-effect.js

@@ -1,14 +0,0 @@
-import { useRef as e } from "./ref.js";
-import { useEffect as t } from "./effect.js";
-import { useHost as n } from "./host.js";
-//#region src/hooks/child-effect.ts
-function r(r) {
-	let i = n(), a = e(0), o = new MutationObserver((e) => {
-		e.some((e) => e.type === "childList") && (a.value = (a.value + 1) % (2 ** 53 - 1));
-	});
-	t([], () => (o.observe(i, { childList: !0 }), () => o.disconnect())), t([a], () => r());
-}
-//#endregion
-export { r as useChildEffect };
-
-//# sourceMappingURL=child-effect.js.map

package/dist/hooks/child-effect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"child-effect.js","names":[],"sources":["../../src/hooks/child-effect.ts"],"sourcesContent":["import { useEffect } from './effect.ts';\nimport { useHost } from './host.ts';\nimport { useRef } from './ref.ts';\n\n/** React to child list changes (non-recursive). */\nexport function useChildEffect(callback: () => (() => void) | void): void {\n  const host = useHost();\n  const ref = useRef(0);\n\n  const observer = new MutationObserver((mutation) => {\n    if (mutation.some((m) => m.type === 'childList')) {\n      ref.value = (ref.value + 1) % Number.MAX_SAFE_INTEGER;\n    }\n  });\n\n  useEffect([], () => {\n    observer.observe(host, { childList: true });\n    return () => observer.disconnect();\n  });\n\n  useEffect([ref], () => {\n    return callback();\n  });\n}\n"],"mappings":";;;;AAKA,SAAgB,EAAe,GAA2C;CACxE,IAAM,IAAO,GAAS,EAChB,IAAM,EAAO,EAAE,EAEf,IAAW,IAAI,kBAAkB,MAAa;AAClD,EAAI,EAAS,MAAM,MAAM,EAAE,SAAS,YAAY,KAC9C,EAAI,SAAS,EAAI,QAAQ;GAE3B;AAOF,CALA,EAAU,EAAE,SACV,EAAS,QAAQ,GAAM,EAAE,WAAW,IAAM,CAAC,QAC9B,EAAS,YAAY,EAClC,EAEF,EAAU,CAAC,EAAI,QACN,GAAU,CACjB"}

package/dist/hooks/context.d.ts

@@ -1,3 +0,0 @@
-import { type Context } from '../internal/context.ts';
-/** @internal Get the context of the currently rendering component. */
-export declare function useContext(): Context;

package/dist/hooks/context.js

@@ -1,11 +0,0 @@
-import { contextStack as e } from "../internal/context.js";
-//#region src/hooks/context.ts
-function t() {
-	let t = e.at(-1);
-	if (!t) throw Error("hooks must be called inside a render function");
-	return t;
-}
-//#endregion
-export { t as useContext };
-
-//# sourceMappingURL=context.js.map

package/dist/hooks/context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/hooks/context.ts"],"sourcesContent":["import { type Context, contextStack } from '../internal/context.ts';\n\n/** @internal Get the context of the currently rendering component. */\nexport function useContext(): Context {\n  const context = contextStack.at(-1);\n  if (!context) throw new Error('hooks must be called inside a render function');\n  return context;\n}\n"],"mappings":";;AAGA,SAAgB,IAAsB;CACpC,IAAM,IAAU,EAAa,GAAG,GAAG;AACnC,KAAI,CAAC,EAAS,OAAU,MAAM,gDAAgD;AAC9E,QAAO"}

package/dist/hooks/effect.d.ts

@@ -1,9 +0,0 @@
-import type { ReadonlyRef, RefValues } from './ref.ts';
-/** React to observable (reference) changes. */
-export declare function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(deps: TDeps, callback: (...values: RefValues<TDeps>) => (() => void) | void): void;
-/**
- * React to document disconnection.
- *
- * Alias for: `useEffect([], () => callback)`
- */
-export declare function useDisconnectEffect(callback: () => void): void;