@e280/sly 0.2.0-7 → 0.2.0-9

package/x/demo/views/counter.d.ts

@@ -1 +1,7 @@
-export declare const CounterView: import("../../index.js").View<[initial: number]>;
+export declare const CounterView: import("../../index.js").View<[start: number]>;
+declare const CounterComponent_base: import("../../index.js").ComponentClass<{
+    start?: number;
+}, [start: number]>;
+export declare class CounterComponent extends CounterComponent_base {
+}
+export {};

package/x/demo/views/counter.js

@@ -1,17 +1,18 @@
 import { css, html } from "lit";
 import { repeat } from "@e280/stz";
+import { dom } from "../../dom/dom.js";
 import { view } from "../../views/view.js";
 import { cssReset } from "../../views/css-reset.js";
-export const CounterView = view(use => (initial) => {
+export const CounterView = view(use => (start) => {
     use.name("counter");
     use.styles(cssReset, styles);
     const $seconds = use.signal(0);
-    const start = use.once(() => Date.now());
+    const since = use.once(() => Date.now());
     use.mount(() => repeat(async () => {
-        const since = Date.now() - start;
-        $seconds.set(Math.floor(since / 1000));
+        const delta = Date.now() - since;
+        $seconds.set(Math.floor(delta / 1000));
     }));
-    const $count = use.signal(initial);
+    const $count = use.signal(start);
     const increment = () => $count.value++;
     const $product = use.signal
         .derived(() => $count() * $seconds());
@@ -31,6 +32,11 @@ export const CounterView = view(use => (initial) => {
 		</div>
 	`;
 });
+// convert a view into a web component
+export class CounterComponent extends (CounterView
+    .component()
+    .props(c => [dom.attrs(c).number.start ?? 0])) {
+}
 const styles = css `
 :host {
 	display: flex;

package/x/demo/views/counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../s/demo/views/counter.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAA;AAEhC,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAe,EAAE,EAAE;IAC1D,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC9B,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;IACxC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAG,EAAE;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAA;QAChC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAA;IACvC,CAAC,CAAC,CAAC,CAAA;IAEH,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAClC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IAEtC,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM;SACzB,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAA;IAEtC,OAAO,IAAI,CAAA;;;WAGD,QAAQ,CAAC,GAAG,EAAE;;;WAGd,MAAM,CAAC,GAAG,EAAE;;;WAGZ,QAAQ,CAAC,GAAG,EAAE;;;qBAGJ,SAAS;;EAE5B,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUjB,CAAA"}
+{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../s/demo/views/counter.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAA;AAEhC,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AACpC,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,KAAa,EAAE,EAAE;IACxD,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC9B,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;IACxC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAG,EAAE;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAA;QAChC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAA;IACvC,CAAC,CAAC,CAAC,CAAA;IAEH,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAChC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IAEtC,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM;SACzB,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAA;IAEtC,OAAO,IAAI,CAAA;;;WAGD,QAAQ,CAAC,GAAG,EAAE;;;WAGd,MAAM,CAAC,GAAG,EAAE;;;WAGZ,QAAQ,CAAC,GAAG,EAAE;;;qBAGJ,SAAS;;EAE5B,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,sCAAsC;AACtC,MAAM,OAAO,gBAAiB,SAAQ,CACrC,WAAW;KACT,SAAS,EAAoB;KAC7B,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAC9C;CAAG;AAEJ,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUjB,CAAA"}

package/x/demo/views/demo.js

@@ -1,13 +1,21 @@
 import { css, html } from "lit";
+import { DivineView } from "./divine.js";
 import { view } from "../../views/view.js";
 import { CounterView } from "./counter.js";
 import { LoadersView } from "./loaders.js";
 import { cssReset } from "../../views/css-reset.js";
+import { nap, repeat } from "@e280/stz";
 export const DemoView = view(use => () => {
     use.name("demo");
     use.styles(cssReset, styles);
+    const $speed = use.signal(3);
+    use.mount(() => repeat(async () => {
+        await nap(1000);
+        $speed.value++;
+    }));
     return html `
 		${CounterView.props(2).children("view").render()}
+		${DivineView($speed())}
 		${LoadersView()}
 	`;
 });

package/x/demo/views/demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../../s/demo/views/demo.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE;IACxC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAChB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,OAAO,IAAI,CAAA;IACR,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;IAC9C,WAAW,EAAE;EACf,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOjB,CAAA"}
+{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../../s/demo/views/demo.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,UAAU,EAAC,MAAM,aAAa,CAAA;AACtC,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE;IACxC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAChB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAE5B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAG,EAAE;QAChC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAA;QACf,MAAM,CAAC,KAAK,EAAE,CAAA;IACf,CAAC,CAAC,CAAC,CAAA;IAEH,OAAO,IAAI,CAAA;IACR,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;IAC9C,UAAU,CAAC,MAAM,EAAE,CAAC;IACpB,WAAW,EAAE;EACf,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOjB,CAAA"}

package/x/demo/views/divine.d.ts

@@ -0,0 +1,8 @@
+import { SignalFn } from "@e280/strata";
+declare const DivineElement_base: import("../../index.js").ComponentClass<{
+    $speed: SignalFn<number>;
+}, [speed: number]>;
+export declare class DivineElement extends DivineElement_base {
+}
+export declare const DivineView: import("../../index.js").View<[speed: number]>;
+export {};

package/x/demo/views/divine.js

@@ -0,0 +1,19 @@
+import { html } from "lit";
+import { view } from "../../views/view.js";
+import { signal } from "@e280/strata";
+export class DivineElement extends (view
+    .component(component => {
+    component.$speed = signal(1);
+})
+    .props(component => [component.$speed()])
+    .render(use => speed => {
+    const $count = use.signal(0);
+    const increment = () => $count($count() + speed);
+    return html `
+			<span>${$count()}</span>
+			<button @click="${increment}">+${speed}</button>
+		`;
+})) {
+}
+export const DivineView = DivineElement.view;
+//# sourceMappingURL=divine.js.map

package/x/demo/views/divine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divine.js","sourceRoot":"","sources":["../../../s/demo/views/divine.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAC,MAAM,EAAW,MAAM,cAAc,CAAA;AAE7C,MAAM,OAAO,aAAc,SAAQ,CAAC,IAAI;KACtC,SAAS,CAA6B,SAAS,CAAC,EAAE;IAClD,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;AAC7B,CAAC,CAAC;KACD,KAAK,CAAkB,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;KACzD,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;IACtB,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC5B,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAA;IAChD,OAAO,IAAI,CAAA;WACF,MAAM,EAAE;qBACE,SAAS,MAAM,KAAK;GACtC,CAAA;AACF,CAAC,CAAC,CACF;CAAG;AAEJ,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAA"}

package/x/demo/views/incredi.js

@@ -4,7 +4,7 @@ import { dom } from "../../dom/dom.js";
 import { BaseElement } from "../../views/base-element.js";
 export class IncrediElement extends BaseElement {
     static styles = css `span{color:orange}`;
-    attrs = dom.attrs(this, { value: Number });
+    attrs = dom.attrs(this).spec({ value: Number });
     something = { whatever: "rofl" };
     render(use) {
         const { value = 1 } = this.attrs;

package/x/demo/views/incredi.js.map

@@ -1 +1 @@
-{"version":3,"file":"incredi.js","sourceRoot":"","sources":["../../../s/demo/views/incredi.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AAErC,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,OAAO,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAA;AAEvD,MAAM,OAAO,cAAe,SAAQ,WAAW;IAC9C,MAAM,CAAC,MAAM,GAAG,GAAG,CAAA,oBAAoB,CAAA;IACvC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAA;IACxC,SAAS,GAAG,EAAC,QAAQ,EAAE,MAAM,EAAC,CAAA;IAE9B,MAAM,CAAC,GAAQ;QACd,MAAM,EAAC,KAAK,GAAG,CAAC,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QAE5B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAG,EAAE;YAChC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAA;YACb,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;QAC3B,CAAC,CAAC,CAAC,CAAA;QAEH,OAAO,IAAI,CAAA;WACF,MAAM,EAAE,GAAG,KAAK;GACxB,CAAA;IACF,CAAC"}
+{"version":3,"file":"incredi.js","sourceRoot":"","sources":["../../../s/demo/views/incredi.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AAErC,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,OAAO,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAA;AAEvD,MAAM,OAAO,cAAe,SAAQ,WAAW;IAC9C,MAAM,CAAC,MAAM,GAAG,GAAG,CAAA,oBAAoB,CAAA;IAEvC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAA;IAC7C,SAAS,GAAG,EAAC,QAAQ,EAAE,MAAM,EAAC,CAAA;IAE9B,MAAM,CAAC,GAAQ;QACd,MAAM,EAAC,KAAK,GAAG,CAAC,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QAE5B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAG,EAAE;YAChC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAA;YACb,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;QAC3B,CAAC,CAAC,CAAC,CAAA;QAEH,OAAO,IAAI,CAAA;WACF,MAAM,EAAE,GAAG,KAAK;GACxB,CAAA;IACF,CAAC"}

package/x/dom/attrs/attrs.d.ts

@@ -0,0 +1,20 @@
+import { AttrSpec } from "../types.js";
+export declare function attrs(element: HTMLElement): {
+    string: Record<string, string | undefined>;
+    number: Record<string, number | undefined>;
+    boolean: Record<string, boolean | undefined>;
+    on: (fn: () => void) => () => void;
+    spec: <A extends AttrSpec>(spec: A) => import("../types.js").AttrTypes<A>;
+};
+export declare namespace attrs {
+    var get: {
+        string: (e: HTMLElement, key: string) => string | undefined;
+        number: (e: HTMLElement, key: string) => number | undefined;
+        boolean: (e: HTMLElement, key: string) => boolean;
+    };
+    var set: {
+        string: (e: HTMLElement, key: string, value: string | undefined) => boolean;
+        number: (e: HTMLElement, key: string, value: number | undefined) => boolean;
+        boolean: (e: HTMLElement, key: string, value: boolean | undefined) => boolean;
+    };
+}

package/x/dom/attrs/attrs.js

@@ -0,0 +1,17 @@
+import { onAttrs } from "./parts/on-attrs.js";
+import { attrFns } from "./parts/attr-fns.js";
+import { attrSpec } from "./parts/attr-spec.js";
+import { AttrProxies } from "./parts/attr-proxies.js";
+export function attrs(element) {
+    const proxies = new AttrProxies(element);
+    return {
+        string: proxies.string,
+        number: proxies.number,
+        boolean: proxies.boolean,
+        on: (fn) => onAttrs(element, fn),
+        spec: (spec) => attrSpec(element, spec),
+    };
+}
+attrs.get = attrFns.get;
+attrs.set = attrFns.set;
+//# sourceMappingURL=attrs.js.map

package/x/dom/attrs/attrs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrs.js","sourceRoot":"","sources":["../../../s/dom/attrs/attrs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAA;AAC3C,OAAO,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAA;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAA;AAEnD,MAAM,UAAU,KAAK,CAAC,OAAoB;IACzC,MAAM,OAAO,GAAG,IAAI,WAAW,CAAC,OAAO,CAAC,CAAA;IACxC,OAAO;QACN,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,EAAE,EAAE,CAAC,EAAc,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;QAC5C,IAAI,EAAE,CAAqB,IAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;KAC9D,CAAA;AACF,CAAC;AAED,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAA;AACvB,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAA"}

package/x/dom/attrs/parts/attr-fns.d.ts

@@ -0,0 +1,13 @@
+/** fns for getting and setting html attributes of various types */
+export declare const attrFns: {
+    get: {
+        string: (e: HTMLElement, key: string) => string | undefined;
+        number: (e: HTMLElement, key: string) => number | undefined;
+        boolean: (e: HTMLElement, key: string) => boolean;
+    };
+    set: {
+        string: (e: HTMLElement, key: string, value: string | undefined) => boolean;
+        number: (e: HTMLElement, key: string, value: number | undefined) => boolean;
+        boolean: (e: HTMLElement, key: string, value: boolean | undefined) => boolean;
+    };
+};

package/x/dom/attrs/parts/attr-fns.js

@@ -0,0 +1,42 @@
+/** fns for getting and setting html attributes of various types */
+export const attrFns = {
+    get: {
+        string: (e, key) => {
+            return e.getAttribute(key) ?? undefined;
+        },
+        number: (e, key) => {
+            const raw = e.getAttribute(key);
+            return (raw === null || !raw)
+                ? undefined
+                : Number(raw);
+        },
+        boolean: (e, key) => {
+            const raw = e.getAttribute(key);
+            return raw !== null;
+        },
+    },
+    set: {
+        string: (e, key, value) => {
+            if (value === undefined)
+                e.removeAttribute(key);
+            else
+                e.setAttribute(key, value);
+            return true;
+        },
+        number: (e, key, value) => {
+            if (value === undefined)
+                e.removeAttribute(key);
+            else
+                e.setAttribute(key, value.toString());
+            return true;
+        },
+        boolean: (e, key, value) => {
+            if (value)
+                e.setAttribute(key, "");
+            else
+                e.removeAttribute(key);
+            return true;
+        },
+    },
+};
+//# sourceMappingURL=attr-fns.js.map

package/x/dom/attrs/parts/attr-fns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attr-fns.js","sourceRoot":"","sources":["../../../../s/dom/attrs/parts/attr-fns.ts"],"names":[],"mappings":"AACA,mEAAmE;AACnE,MAAM,CAAC,MAAM,OAAO,GAAG;IACtB,GAAG,EAAE;QACJ,MAAM,EAAE,CAAC,CAAc,EAAE,GAAW,EAAE,EAAE;YACvC,OAAO,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,SAAS,CAAA;QACxC,CAAC;QACD,MAAM,EAAE,CAAC,CAAc,EAAE,GAAW,EAAE,EAAE;YACvC,MAAM,GAAG,GAAG,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;YAC/B,OAAO,CAAC,GAAG,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC;gBAC5B,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;QACf,CAAC;QACD,OAAO,EAAE,CAAC,CAAc,EAAE,GAAW,EAAE,EAAE;YACxC,MAAM,GAAG,GAAG,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;YAC/B,OAAO,GAAG,KAAK,IAAI,CAAA;QACpB,CAAC;KACD;IAED,GAAG,EAAE;QACJ,MAAM,EAAE,CAAC,CAAc,EAAE,GAAW,EAAE,KAAyB,EAAE,EAAE;YAClE,IAAI,KAAK,KAAK,SAAS;gBAAE,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;;gBAC1C,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;YAC/B,OAAO,IAAI,CAAA;QACZ,CAAC;QACD,MAAM,EAAE,CAAC,CAAc,EAAE,GAAW,EAAE,KAAyB,EAAE,EAAE;YAClE,IAAI,KAAK,KAAK,SAAS;gBAAE,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;;gBAC1C,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;YAC1C,OAAO,IAAI,CAAA;QACZ,CAAC;QACD,OAAO,EAAE,CAAC,CAAc,EAAE,GAAW,EAAE,KAA0B,EAAE,EAAE;YACpE,IAAI,KAAK;gBAAE,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;;gBAC7B,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;YAC3B,OAAO,IAAI,CAAA;QACZ,CAAC;KACD;CACD,CAAA"}

package/x/dom/attrs/parts/attr-proxies.d.ts

@@ -0,0 +1,8 @@
+/** a typed proxy accessor for html attributes */
+export declare class AttrProxies {
+    element: HTMLElement;
+    constructor(element: HTMLElement);
+    string: Record<string, string | undefined>;
+    number: Record<string, number | undefined>;
+    boolean: Record<string, boolean | undefined>;
+}

package/x/dom/attrs/parts/attr-proxies.js

@@ -0,0 +1,21 @@
+import { attrFns } from "./attr-fns.js";
+/** a typed proxy accessor for html attributes */
+export class AttrProxies {
+    element;
+    constructor(element) {
+        this.element = element;
+    }
+    string = new Proxy({}, {
+        get: (_t, key) => (attrFns.get.string(this.element, key)),
+        set: (_t, key, value) => (attrFns.set.string(this.element, key, value)),
+    });
+    number = new Proxy({}, {
+        get: (_t, key) => (attrFns.get.number(this.element, key)),
+        set: (_t, key, value) => (attrFns.set.number(this.element, key, value)),
+    });
+    boolean = new Proxy({}, {
+        get: (_t, key) => (attrFns.get.boolean(this.element, key)),
+        set: (_t, key, value) => (attrFns.set.boolean(this.element, key, value)),
+    });
+}
+//# sourceMappingURL=attr-proxies.js.map

package/x/dom/attrs/parts/attr-proxies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attr-proxies.js","sourceRoot":"","sources":["../../../../s/dom/attrs/parts/attr-proxies.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,iDAAiD;AACjD,MAAM,OAAO,WAAW;IACJ;IAAnB,YAAmB,OAAoB;QAApB,YAAO,GAAP,OAAO,CAAa;IAAG,CAAC;IAE3C,MAAM,GAAG,IAAI,KAAK,CAAC,EAAE,EAAE;QACtB,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,EAAE,CAAC,CACzB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CACrC;QACD,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,KAAyB,EAAE,EAAE,CAAC,CACpD,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAC5C;KACD,CAAuC,CAAA;IAExC,MAAM,GAAG,IAAI,KAAK,CAAC,EAAE,EAAE;QACtB,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,EAAE,CAAC,CACzB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CACrC;QACD,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,KAAyB,EAAE,EAAE,CAAC,CACpD,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAC5C;KACD,CAAuC,CAAA;IAExC,OAAO,GAAG,IAAI,KAAK,CAAC,EAAE,EAAE;QACvB,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,EAAE,CAAC,CACzB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CACtC;QACD,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,KAA0B,EAAE,EAAE,CAAC,CACrD,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAC7C;KACD,CAAwC,CAAA;CACzC"}

package/x/dom/attrs/parts/attr-spec.d.ts

@@ -0,0 +1,3 @@
+import { AttrSpec, AttrTypes } from "../../types.js";
+/** specify available html attributes and their types and create a proxy accessor */
+export declare const attrSpec: <A extends AttrSpec>(e: HTMLElement, spec: A) => AttrTypes<A>;

package/x/dom/attrs/parts/attr-spec.js

@@ -0,0 +1,21 @@
+import { attrFns } from "./attr-fns.js";
+/** specify available html attributes and their types and create a proxy accessor */
+export const attrSpec = (e, spec) => new Proxy(spec, {
+    get: (_target, key) => {
+        switch (spec[key]) {
+            case String: return attrFns.get.string(e, key);
+            case Number: return attrFns.get.number(e, key);
+            case Boolean: return attrFns.get.boolean(e, key);
+            default: throw new Error(`invalid attribute type for "${key}"`);
+        }
+    },
+    set: (_target, key, value) => {
+        switch (spec[key]) {
+            case String: return attrFns.set.string(e, key, value);
+            case Number: return attrFns.set.number(e, key, value);
+            case Boolean: return attrFns.set.boolean(e, key, value);
+            default: throw new Error(`invalid attribute type for "${key}"`);
+        }
+    },
+});
+//# sourceMappingURL=attr-spec.js.map

package/x/dom/attrs/parts/attr-spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attr-spec.js","sourceRoot":"","sources":["../../../../s/dom/attrs/parts/attr-spec.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,oFAAoF;AACpF,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,CAAc,EACd,IAAO,EACN,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE;IAErB,GAAG,EAAE,CAAC,OAAO,EAAE,GAAW,EAAE,EAAE;QAC7B,QAAQ,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACnB,KAAK,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;YAC9C,KAAK,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;YAC9C,KAAK,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;YAChD,OAAO,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,+BAA+B,GAAG,GAAG,CAAC,CAAA;QAChE,CAAC;IACF,CAAC;IAED,GAAG,EAAE,CAAC,OAAO,EAAE,GAAW,EAAE,KAAU,EAAE,EAAE;QACzC,QAAQ,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACnB,KAAK,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;YACrD,KAAK,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;YACrD,KAAK,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;YACvD,OAAO,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,+BAA+B,GAAG,GAAG,CAAC,CAAA;QAChE,CAAC;IACF,CAAC;CACD,CAAwB,CAAA"}

package/x/dom/attrs/parts/on-attrs.d.ts

@@ -0,0 +1,2 @@
+/** respond when any attribute changes on the html element */
+export declare function onAttrs(element: HTMLElement, fn: () => void): () => void;

package/x/dom/attrs/parts/on-attrs.js

@@ -0,0 +1,7 @@
+/** respond when any attribute changes on the html element */
+export function onAttrs(element, fn) {
+    const observer = new MutationObserver(fn);
+    observer.observe(element, { attributes: true });
+    return () => observer.disconnect();
+}
+//# sourceMappingURL=on-attrs.js.map

package/x/dom/attrs/parts/on-attrs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-attrs.js","sourceRoot":"","sources":["../../../../s/dom/attrs/parts/on-attrs.ts"],"names":[],"mappings":"AACA,6DAA6D;AAC7D,MAAM,UAAU,OAAO,CAAC,OAAoB,EAAE,EAAc;IAC3D,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAA;IACzC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CAAA;IAC7C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;AACnC,CAAC"}

package/x/dom/dom.d.ts

@@ -1,5 +1,5 @@
+import { AttrSpec } from "./types.js";
 import { Content } from "../views/types.js";
-import { AttrSpec, AttrTypes } from "./attributes.js";
 export type Renderable = HTMLElement | ShadowRoot | DocumentFragment;
 export type Queryable = HTMLElement | ShadowRoot | Element | Document | DocumentFragment;
 export declare class Dom<C extends Queryable> {
@@ -10,7 +10,13 @@ export declare class Dom<C extends Queryable> {
     maybe<E extends Element = HTMLElement>(selector: string): E | null;
     all<E extends Element = HTMLElement>(selector: string): E[];
     render(...content: Content[]): import("lit-html").RootPart;
-    attrs<A extends AttrSpec>(spec: A): AttrTypes<A>;
+    attrs(): {
+        string: Record<string, string | undefined>;
+        number: Record<string, number | undefined>;
+        boolean: Record<string, boolean | undefined>;
+        on: (fn: () => void) => () => void;
+        spec: <A extends AttrSpec>(spec: A) => import("./types.js").AttrTypes<A>;
+    };
 }
 export declare function dom<E extends Queryable>(selector: string): E;
 export declare function dom<E extends Queryable>(element: E): Dom<E>;
@@ -19,8 +25,8 @@ export declare namespace dom {
     export var require: <E extends Element = HTMLElement>(selector: string) => E;
     export var maybe: <E extends Element = HTMLElement>(selector: string) => E | null;
     export var all: <E extends Element = HTMLElement>(selector: string) => E[];
-    export var attrs: <A extends AttrSpec>(element: HTMLElement, spec: A) => AttrTypes<A>;
-    export var register: typeof import("./register.js").register;
+    export var attrs: typeof import("./attrs/attrs.js").attrs;
+    export var register: typeof import("./parts/register.js").register;
     export var render: (container: Renderable, ...content: Content[]) => import("lit-html").RootPart;
     export { _a as in };
 }

package/x/dom/dom.js

@@ -1,6 +1,6 @@
 import { render } from "lit";
-import { register } from "./register.js";
-import { attributes } from "./attributes.js";
+import { attrs } from "./attrs/attrs.js";
+import { register } from "./parts/register.js";
 function require(container, selector) {
     const e = container.querySelector(selector);
     if (!e)
@@ -32,8 +32,8 @@ export class Dom {
     render(...content) {
         return render(content, this.element);
     }
-    attrs(spec) {
-        return attributes(this.element, spec);
+    attrs() {
+        return attrs(this.element);
     }
 }
 export function dom(selectorOrElement) {
@@ -46,7 +46,7 @@ dom.in = doc.in.bind(doc);
 dom.require = doc.require.bind(doc);
 dom.maybe = doc.maybe.bind(doc);
 dom.all = doc.all.bind(doc);
-dom.attrs = attributes;
+dom.attrs = attrs;
 dom.register = register;
 dom.render = (container, ...content) => {
     return render(content, container);

package/x/dom/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../s/dom/dom.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAA;AAEtC,OAAO,EAAC,UAAU,EAAsB,MAAM,iBAAiB,CAAA;AAK/D,SAAS,OAAO,CACd,SAAoB,EACpB,QAAgB;IAEjB,MAAM,CAAC,GAAG,SAAS,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;IAC9C,IAAI,CAAC,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,sBAAsB,QAAQ,GAAG,CAAC,CAAA;IAC1D,OAAO,CAAC,CAAA;AACT,CAAC;AAED,MAAM,OAAO,GAAG;IACI;IAAnB,YAAmB,OAAU;QAAV,YAAO,GAAP,OAAO,CAAG;IAAG,CAAC;IAEjC,EAAE,CAAwB,iBAA6B;QACtD,OAAO,IAAI,GAAG,CACb,CAAC,OAAO,iBAAiB,KAAK,QAAQ,CAAC;YACtC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAM;YAC/C,CAAC,CAAC,iBAAiB,CACpB,CAAA;IACF,CAAC;IAED,OAAO,CAAkC,QAAgB;QACxD,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;QACjD,IAAI,CAAC,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,sBAAsB,QAAQ,GAAG,CAAC,CAAA;QAC1D,OAAO,CAAC,CAAA;IACT,CAAC;IAED,KAAK,CAAkC,QAAgB;QACtD,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;IAC/C,CAAC;IAED,GAAG,CAAkC,QAAgB;QACpD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAI,QAAQ,CAAC,CAAC,CAAA;IAC9D,CAAC;IAED,MAAM,CAAC,GAAG,OAAkB;QAC3B,OAAO,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,OAAqB,CAAC,CAAA;IACnD,CAAC;IAED,KAAK,CAAqB,IAAO;QAChC,OAAO,UAAU,CAAC,IAAI,CAAC,OAAsB,EAAE,IAAI,CAAC,CAAA;IACrD,CAAC;CACD;AAID,MAAM,UAAU,GAAG,CAAsB,iBAA6B;IACrE,OAAO,CAAC,OAAO,iBAAiB,KAAK,QAAQ,CAAC;QAC7C,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,iBAAiB,CAAM;QAC3C,CAAC,CAAC,IAAI,GAAG,CAAC,iBAAiB,CAAC,CAAA;AAC9B,CAAC;AAED,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAA;AAC7B,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACzB,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACnC,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC/B,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAE3B,GAAG,CAAC,KAAK,GAAG,UAAU,CAAA;AACtB,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAA;AACvB,GAAG,CAAC,MAAM,GAAG,CAAC,SAAqB,EAAE,GAAG,OAAkB,EAAE,EAAE;IAC7D,OAAO,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;AAClC,CAAC,CAAA"}
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../s/dom/dom.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAC,KAAK,EAAC,MAAM,kBAAkB,CAAA;AAEtC,OAAO,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAA;AAK5C,SAAS,OAAO,CACd,SAAoB,EACpB,QAAgB;IAEjB,MAAM,CAAC,GAAG,SAAS,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;IAC9C,IAAI,CAAC,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,sBAAsB,QAAQ,GAAG,CAAC,CAAA;IAC1D,OAAO,CAAC,CAAA;AACT,CAAC;AAED,MAAM,OAAO,GAAG;IACI;IAAnB,YAAmB,OAAU;QAAV,YAAO,GAAP,OAAO,CAAG;IAAG,CAAC;IAEjC,EAAE,CAAwB,iBAA6B;QACtD,OAAO,IAAI,GAAG,CACb,CAAC,OAAO,iBAAiB,KAAK,QAAQ,CAAC;YACtC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAM;YAC/C,CAAC,CAAC,iBAAiB,CACpB,CAAA;IACF,CAAC;IAED,OAAO,CAAkC,QAAgB;QACxD,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;QACjD,IAAI,CAAC,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,sBAAsB,QAAQ,GAAG,CAAC,CAAA;QAC1D,OAAO,CAAC,CAAA;IACT,CAAC;IAED,KAAK,CAAkC,QAAgB;QACtD,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;IAC/C,CAAC;IAED,GAAG,CAAkC,QAAgB;QACpD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAI,QAAQ,CAAC,CAAC,CAAA;IAC9D,CAAC;IAED,MAAM,CAAC,GAAG,OAAkB;QAC3B,OAAO,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,OAAqB,CAAC,CAAA;IACnD,CAAC;IAED,KAAK;QACJ,OAAO,KAAK,CAAC,IAAI,CAAC,OAAsB,CAAC,CAAA;IAC1C,CAAC;CACD;AAID,MAAM,UAAU,GAAG,CAAsB,iBAA6B;IACrE,OAAO,CAAC,OAAO,iBAAiB,KAAK,QAAQ,CAAC;QAC7C,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,iBAAiB,CAAM;QAC3C,CAAC,CAAC,IAAI,GAAG,CAAC,iBAAiB,CAAC,CAAA;AAC9B,CAAC;AAED,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAA;AAC7B,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACzB,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACnC,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC/B,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAE3B,GAAG,CAAC,KAAK,GAAG,KAAK,CAAA;AACjB,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAA;AACvB,GAAG,CAAC,MAAM,GAAG,CAAC,SAAqB,EAAE,GAAG,OAAkB,EAAE,EAAE;IAC7D,OAAO,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;AAClC,CAAC,CAAA"}

package/x/dom/parts/dashify.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashify.js","sourceRoot":"","sources":["../../../s/dom/parts/dashify.ts"],"names":[],"mappings":"AACA;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,KAAa;IACpC,OAAO,KAAK,CAAC,OAAO,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAA;AAClE,CAAC"}

package/x/dom/{register.d.ts → parts/register.d.ts}

@@ -1,12 +1,4 @@
-export type HTMLElementClasses = {
-    [key: string]: {
-        new (...args: any[]): HTMLElement;
-    };
-};
-export type RegistrationOptions = {
-    soft: boolean;
-    upgrade: boolean;
-};
+import { HTMLElementClasses, RegisterOptions } from "../types.js";
 /**
  * register custom elements (web components) to the dom
  *  - takes an object full of custom html elements, and automatically dashes the names
@@ -19,4 +11,4 @@ export type RegistrationOptions = {
  *    - `true` (default) will run `customElements.upgrade` where appropriate
  *    - `false` will NOT upgrade any existing elements on the page
  */
-export declare function register<E extends HTMLElementClasses>(elements: E, options?: Partial<RegistrationOptions>): void;
+export declare function register<E extends HTMLElementClasses>(elements: E, options?: Partial<RegisterOptions>): void;

package/x/dom/parts/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../s/dom/parts/register.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AAGpC;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,QAAQ,CACtB,QAAW,EACX,UAAoC,EAAE;IAGvC,MAAM,EACL,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,IAAI,GACd,GAAG,OAAO,CAAA;IAEX,KAAK,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QACxD,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;QACzB,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAEvC,IAAI,IAAI,IAAI,OAAO;YAClB,SAAQ;QAET,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;QAEnC,IAAI,OAAO;YACV,QAAQ,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBAChD,IAAI,OAAO,CAAC,WAAW,KAAK,WAAW;oBACtC,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;YACjC,CAAC,CAAC,CAAA;IACJ,CAAC;AACF,CAAC"}

package/x/dom/{attributes.d.ts → types.d.ts}

@@ -1,3 +1,4 @@
+import { attrs } from "./attrs/attrs.js";
 export type AttrKind = (typeof String | typeof Number | typeof Boolean);
 export type AttrType<H extends AttrKind> = (H extends typeof String ? string | undefined : H extends typeof Number ? number | undefined : H extends typeof Boolean ? boolean : never);
 export type AttrSpec = {
@@ -6,5 +7,13 @@ export type AttrSpec = {
 export type AttrTypes<A extends AttrSpec> = {
     [P in keyof A]: AttrType<A[P]>;
 };
-export declare function onAttrChange(element: HTMLElement, fn: () => void): () => void;
-export declare const attributes: <A extends AttrSpec>(element: HTMLElement, spec: A) => AttrTypes<A>;
+export type Attrs = ReturnType<typeof attrs>;
+export type HTMLElementClasses = {
+    [key: string]: {
+        new (...args: any[]): HTMLElement;
+    };
+};
+export type RegisterOptions = {
+    soft: boolean;
+    upgrade: boolean;
+};

package/x/dom/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/x/dom/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../s/dom/types.ts"],"names":[],"mappings":""}

package/x/index.d.ts

@@ -1,7 +1,5 @@
-export * from "./dom/attributes.js";
-export * from "./dom/dashify.js";
+export * from "./dom/types.js";
 export * from "./dom/dom.js";
-export * from "./dom/register.js";
 export * from "./ops/loaders/make-loader.js";
 export * from "./ops/loaders/parts/ascii-anim.js";
 export * from "./ops/loaders/parts/error-display.js";
@@ -9,7 +7,6 @@ export * from "./ops/op.js";
 export * from "./ops/podium.js";
 export * from "./ops/types.js";
 export * as loot from "./loot/index.js";
-export * from "./dom/attributes.js";
 export * from "./views/base-element.js";
 export * from "./views/css-reset.js";
 export * from "./views/types.js";

package/x/index.html

@@ -111,7 +111,7 @@ body {
 }
 
 </style>
-					<script type=module src="demo/demo.bundle.min.js?v=cb80f0c5f4b6"></script>
+					<script type=module src="demo/demo.bundle.min.js?v=19bcd292549b"></script>
 					<link rel="icon" href="assets/favicon.png?v=4dc161ed79b3"/>
 
 		<meta name="theme-color" content="#95ff7b">
@@ -131,9 +131,10 @@ body {
 	<img class=icon alt="" src="/assets/favicon.png"/>
 	<h1>sly testing page</h1>
 	<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
-	<p class=lil>v0.2.0-7</p>
+	<p class=lil>v0.2.0-9</p>
 	<incredi-element></incredi-element>
-	<demo-counter>component</demo-counter>
+	<divine-element></divine-element>
+	<demo-counter initial="-1">component</demo-counter>
 	<div class=demo></div>
 
 				</body>

package/x/index.html.js

@@ -25,7 +25,8 @@ export default ssg.page(import.meta.url, async (orb) => ({
 		<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
 		<p class=lil>v${orb.packageVersion()}</p>
 		<incredi-element></incredi-element>
-		<demo-counter>component</demo-counter>
+		<divine-element></divine-element>
+		<demo-counter initial="-1">component</demo-counter>
 		<div class=demo></div>
 	`,
 }));

package/x/index.html.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,KAAK,GAAG,KAAK,CAAA;AACnB,MAAM,WAAW,GAAG,0BAA0B,CAAA;AAC9C,MAAM,MAAM,GAAG,cAAc,CAAA;AAC7B,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAErC,eAAe,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC;IACtD,KAAK;IACL,EAAE,EAAE,yBAAyB;IAC7B,GAAG,EAAE,eAAe;IACpB,OAAO;IACP,IAAI,EAAE,IAAI;IACV,UAAU,EAAE;QACX,UAAU,EAAE,SAAS;QACrB,KAAK;QACL,WAAW;QACX,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO;KACpC;IAED,IAAI,EAAE,IAAI,CAAA;;EAET;IAED,IAAI,EAAE,IAAI,CAAA;;;;kBAIO,GAAG,CAAC,cAAc,EAAE;;;;EAIpC;CACD,CAAC,CAAC,CAAA"}
+{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,KAAK,GAAG,KAAK,CAAA;AACnB,MAAM,WAAW,GAAG,0BAA0B,CAAA;AAC9C,MAAM,MAAM,GAAG,cAAc,CAAA;AAC7B,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAErC,eAAe,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC;IACtD,KAAK;IACL,EAAE,EAAE,yBAAyB;IAC7B,GAAG,EAAE,eAAe;IACpB,OAAO;IACP,IAAI,EAAE,IAAI;IACV,UAAU,EAAE;QACX,UAAU,EAAE,SAAS;QACrB,KAAK;QACL,WAAW;QACX,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO;KACpC;IAED,IAAI,EAAE,IAAI,CAAA;;EAET;IAED,IAAI,EAAE,IAAI,CAAA;;;;kBAIO,GAAG,CAAC,cAAc,EAAE;;;;;EAKpC;CACD,CAAC,CAAC,CAAA"}

package/x/index.js

@@ -1,7 +1,5 @@
-export * from "./dom/attributes.js";
-export * from "./dom/dashify.js";
+export * from "./dom/types.js";
 export * from "./dom/dom.js";
-export * from "./dom/register.js";
 export * from "./ops/loaders/make-loader.js";
 export * from "./ops/loaders/parts/ascii-anim.js";
 export * from "./ops/loaders/parts/error-display.js";
@@ -9,7 +7,6 @@ export * from "./ops/op.js";
 export * from "./ops/podium.js";
 export * from "./ops/types.js";
 export * as loot from "./loot/index.js";
-export * from "./dom/attributes.js";
 export * from "./views/base-element.js";
 export * from "./views/css-reset.js";
 export * from "./views/types.js";

package/x/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AAEjC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,sCAAsC,CAAA;AACpD,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAE9B,OAAO,KAAK,IAAI,MAAM,iBAAiB,CAAA;AAEvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAE5B,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,sCAAsC,CAAA;AACpD,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAE9B,OAAO,KAAK,IAAI,MAAM,iBAAiB,CAAA;AAEvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA"}

package/x/views/base-element.js

@@ -1,15 +1,16 @@
-import { tracker } from "@e280/strata";
-import { debounce, MapG } from "@e280/stz";
+import { debounce } from "@e280/stz";
 import { dom } from "../dom/dom.js";
-import { onAttrChange } from "../dom/attributes.js";
+import { Reactor } from "./utils/reactor.js";
 import { applyStyles } from "./utils/apply-styles.js";
+import { AttrWatcher } from "./utils/attr-watcher.js";
 import { Use, _disconnect, _reconnect, _wrap } from "./use.js";
 export class BaseElement extends HTMLElement {
     static styles;
     shadow;
     #use;
     #mounts = 0;
-    #tracking = new MapG;
+    #reactor = new Reactor();
+    #attrWatcher = new AttrWatcher(this, () => this.update());
     constructor() {
         super();
         this.shadow = this.attachShadow({ mode: "open" });
@@ -17,10 +18,7 @@ export class BaseElement extends HTMLElement {
     }
     updateNow = () => {
         this.#use[_wrap](() => {
-            const { result, seen } = tracker.observe(() => this.render(this.#use));
-            dom.render(this.shadow, result);
-            for (const item of seen)
-                this.#tracking.guarantee(item, () => tracker.subscribe(item, this.update));
+            dom.render(this.shadow, this.#reactor.effect(() => this.render(this.#use), this.update));
         });
     };
     update = debounce(0, this.updateNow);
@@ -34,29 +32,13 @@ export class BaseElement extends HTMLElement {
         else {
             this.#use[_reconnect]();
         }
-        this.#attrListening.start();
+        this.#attrWatcher.start();
         this.#mounts++;
     }
     disconnectedCallback() {
-        this.#attrListening.stop();
         this.#use[_disconnect]();
-        for (const untrack of this.#tracking.values())
-            untrack();
-        this.#tracking.clear();
+        this.#reactor.clear();
+        this.#attrWatcher.stop();
     }
-    #attrListening = (() => {
-        let stopper;
-        const start = () => {
-            if (stopper)
-                stopper();
-            stopper = onAttrChange(this, () => this.update);
-        };
-        const stop = () => {
-            if (stopper)
-                stopper();
-            stopper = undefined;
-        };
-        return { start, stop };
-    })();
 }
 //# sourceMappingURL=base-element.js.map