@e280/sly 0.2.0-27 → 0.2.0-29

package/README.md

@@ -293,11 +293,19 @@ import {html, css} from "lit"
       keyup: (e: KeyboardEvent) => console.log("keyup", e.code),
     })
     ```
+- **use.states** — [internal states](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states) helper  
+    ```ts
+    const states = use.states()
+    states.assign("active", "cool")
+    ```
+    ```css
+    [view="my-view"]::state(active) { color: yellow; }
+    [view="my-view"]::state(cool) { outline: 1px solid cyan; }
+    ```
 - **use.attrs** — ergonomic typed html attribute access  
-    - `use.attrs` is a bit different than [#dom.attrs](#dom.attrs), just to properly memoize .spec and .on for the render fn
-    - use.attrs.spec
+    - `use.attrs` is similar to [#dom.attrs](#dom.attrs)
         ```ts
-        const attrs = use.attrs.spec({
+        const attrs = use.attrs({
           name: String,
           count: Number,
           active: Boolean,
@@ -308,7 +316,7 @@ import {html, css} from "lit"
         attrs.count // 123
         attrs.active // true
         ```
-    - use.attrs.(strings/numbers/booleans)
+    - use.attrs.{strings/numbers/booleans}
         ```ts
         use.attrs.strings.name // "chase"
         use.attrs.numbers.count // 123

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/sly",
-	"version": "0.2.0-27",
+	"version": "0.2.0-29",
 	"description": "web shadow views",
 	"license": "MIT",
 	"type": "module",

package/s/base/index.ts

@@ -1,4 +1,5 @@
 
+export * from "./utils/states.js"
 export * from "./css-reset.js"
 export * from "./element.js"
 export * from "./use.js"

package/s/base/use.ts

@@ -5,9 +5,10 @@ import {signal, SignalOptions} from "@e280/strata/signals"
 
 import {Op} from "../ops/op.js"
 import {Mounts} from "./utils/mounts.js"
-import {UseAttrs} from "./utils/use-attrs.js"
+import {eve, EveSpec} from "../dom/parts/eve.js"
 import {applyStyles} from "./utils/apply-styles.js"
-import { eve, EveSpec } from "../dom/parts/eve.js"
+import {useAttrs, UseAttrs} from "./utils/use-attrs.js"
+import { States } from "./utils/states.js"
 
 export const _wrap = Symbol()
 export const _disconnect = Symbol()
@@ -45,7 +46,7 @@ export class Use {
 			public renderNow: () => void,
 			public render: () => Promise<void>,
 		) {
-		this.attrs = new UseAttrs(this)
+		this.attrs = useAttrs(this)
 	}
 
 	get renderCount() {
@@ -95,6 +96,10 @@ export class Use {
 		return this.mount(() => eve(this.element, spec))
 	}
 
+	states() {
+		return this.once(() => new States(this.element))
+	}
+
 	op = (() => {
 		const that = this
 		function op<V>(f: () => Promise<V>) {

package/s/base/utils/states.ts

@@ -0,0 +1,43 @@
+
+export class States<S extends string = string> {
+	#states: Set<S>
+
+	constructor(element: HTMLElement) {
+		this.#states = element.attachInternals().states as any
+	}
+
+	;[Symbol.iterator]() {
+		return this.#states.values()
+	}
+
+	values() {
+		return this.#states.values()
+	}
+
+	forEach(fn: (s: S) => void) {
+		this.#states.forEach(fn)
+		return this
+	}
+
+	add(...states: S[]) {
+		for (const s of states) this.#states.add(s)
+		return this
+	}
+
+	delete(...states: S[]) {
+		for (const s of states) this.#states.delete(s)
+		return this
+	}
+
+	clear() {
+		this.#states.clear()
+		return this
+	}
+
+	assign(...states: S[]) {
+		this.#states.forEach(s => this.#states.delete(s))
+		for (const s of states) this.#states.add(s)
+		return this
+	}
+}
+

package/s/base/utils/use-attrs.ts

@@ -1,27 +1,36 @@
 
 import {Use} from "../use.js"
 import {dom} from "../../dom/dom.js"
-import {Attrs, AttrSpec} from "../../dom/types.js"
+import {AttrSpec, AttrTypes} from "../../dom/types.js"
 
-export class UseAttrs {
-	#use: Use
-	#attrs: Attrs
+export type UseAttrs = {
+	<A extends AttrSpec>(spec: A): AttrTypes<A>
+	strings: Record<string, undefined | string>
+	numbers: Record<string, undefined | number>
+	booleans: Record<string, undefined | boolean>
+	spec<A extends AttrSpec>(spec: A): AttrTypes<A>
+	on(fn: () => void): void
+}
+
+export function useAttrs(use: Use): UseAttrs {
+	const attrs = dom.attrs(use.element)
 
-	constructor(use: Use) {
-		this.#use = use
-		this.#attrs = dom.attrs(use.element)
+	function attrsFn<A extends AttrSpec>(spec: A) {
+		return use.once(() => attrs.spec<A>(spec))
 	}
 
-	get strings() { return this.#attrs.strings }
-	get numbers() { return this.#attrs.numbers }
-	get booleans() { return this.#attrs.booleans }
+	attrsFn.strings = attrs.strings
+	attrsFn.numbers = attrs.numbers
+	attrsFn.booleans = attrs.booleans
 
-	spec<A extends AttrSpec>(spec: A) {
-		return this.#use.once(() => this.#attrs.spec(spec))
+	attrsFn.spec = <A extends AttrSpec>(spec: A) => {
+		return use.once(() => attrs.spec<A>(spec))
 	}
 
-	on(fn: () => void) {
-		return this.#use.mount(() => this.#attrs.on(fn))
+	attrsFn.on = (fn: () => void) => {
+		return use.mount(() => attrs.on(fn))
 	}
+
+	return attrsFn
 }
 

package/x/base/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./utils/states.js";
 export * from "./css-reset.js";
 export * from "./element.js";
 export * from "./use.js";

package/x/base/index.js

@@ -1,3 +1,4 @@
+export * from "./utils/states.js";
 export * from "./css-reset.js";
 export * from "./element.js";
 export * from "./use.js";

package/x/base/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/base/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/base/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA"}

package/x/base/use.d.ts

@@ -1,8 +1,9 @@
 import { CSSResultGroup } from "lit";
 import { SignalOptions } from "@e280/strata/signals";
 import { Op } from "../ops/op.js";
-import { UseAttrs } from "./utils/use-attrs.js";
 import { EveSpec } from "../dom/parts/eve.js";
+import { UseAttrs } from "./utils/use-attrs.js";
+import { States } from "./utils/states.js";
 export declare const _wrap: unique symbol;
 export declare const _disconnect: unique symbol;
 export declare const _reconnect: unique symbol;
@@ -28,6 +29,7 @@ export declare class Use {
     life<V>(fn: () => [result: V, dispose: () => void]): V;
     wake<V>(fn: () => V): V;
     events(spec: EveSpec): void;
+    states(): States<string>;
     op: {
         <V>(f: () => Promise<V>): Op<V>;
         load: <V>(f: () => Promise<V>) => Op<V>;

package/x/base/use.js

@@ -2,9 +2,10 @@ import { defer, MapG } from "@e280/stz";
 import { signal } from "@e280/strata/signals";
 import { Op } from "../ops/op.js";
 import { Mounts } from "./utils/mounts.js";
-import { UseAttrs } from "./utils/use-attrs.js";
-import { applyStyles } from "./utils/apply-styles.js";
 import { eve } from "../dom/parts/eve.js";
+import { applyStyles } from "./utils/apply-styles.js";
+import { useAttrs } from "./utils/use-attrs.js";
+import { States } from "./utils/states.js";
 export const _wrap = Symbol();
 export const _disconnect = Symbol();
 export const _reconnect = Symbol();
@@ -40,7 +41,7 @@ export class Use {
         this.shadow = shadow;
         this.renderNow = renderNow;
         this.render = render;
-        this.attrs = new UseAttrs(this);
+        this.attrs = useAttrs(this);
     }
     get renderCount() {
         return this.#runs;
@@ -79,6 +80,9 @@ export class Use {
     events(spec) {
         return this.mount(() => eve(this.element, spec));
     }
+    states() {
+        return this.once(() => new States(this.element));
+    }
     op = (() => {
         const that = this;
         function op(f) {

package/x/base/use.js.map

@@ -1 +1 @@
-{"version":3,"file":"use.js","sourceRoot":"","sources":["../../s/base/use.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use.js","sourceRoot":"","sources":["../../s/base/use.ts"],"names":[],"mappings":"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"}

package/x/base/utils/states.d.ts

@@ -0,0 +1,11 @@
+export declare class States<S extends string = string> {
+    #private;
+    constructor(element: HTMLElement);
+    [Symbol.iterator](): SetIterator<S>;
+    values(): SetIterator<S>;
+    forEach(fn: (s: S) => void): this;
+    add(...states: S[]): this;
+    delete(...states: S[]): this;
+    clear(): this;
+    assign(...states: S[]): this;
+}

package/x/base/utils/states.js

@@ -0,0 +1,38 @@
+export class States {
+    #states;
+    constructor(element) {
+        this.#states = element.attachInternals().states;
+    }
+    ;
+    [Symbol.iterator]() {
+        return this.#states.values();
+    }
+    values() {
+        return this.#states.values();
+    }
+    forEach(fn) {
+        this.#states.forEach(fn);
+        return this;
+    }
+    add(...states) {
+        for (const s of states)
+            this.#states.add(s);
+        return this;
+    }
+    delete(...states) {
+        for (const s of states)
+            this.#states.delete(s);
+        return this;
+    }
+    clear() {
+        this.#states.clear();
+        return this;
+    }
+    assign(...states) {
+        this.#states.forEach(s => this.#states.delete(s));
+        for (const s of states)
+            this.#states.add(s);
+        return this;
+    }
+}
+//# sourceMappingURL=states.js.map

package/x/base/utils/states.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.js","sourceRoot":"","sources":["../../../s/base/utils/states.ts"],"names":[],"mappings":"AACA,MAAM,OAAO,MAAM;IAClB,OAAO,CAAQ;IAEf,YAAY,OAAoB;QAC/B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC,MAAa,CAAA;IACvD,CAAC;IAED,CAAC;IAAA,CAAC,MAAM,CAAC,QAAQ,CAAC;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAA;IAC7B,CAAC;IAED,MAAM;QACL,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAA;IAC7B,CAAC;IAED,OAAO,CAAC,EAAkB;QACzB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QACxB,OAAO,IAAI,CAAA;IACZ,CAAC;IAED,GAAG,CAAC,GAAG,MAAW;QACjB,KAAK,MAAM,CAAC,IAAI,MAAM;YAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;QAC3C,OAAO,IAAI,CAAA;IACZ,CAAC;IAED,MAAM,CAAC,GAAG,MAAW;QACpB,KAAK,MAAM,CAAC,IAAI,MAAM;YAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QAC9C,OAAO,IAAI,CAAA;IACZ,CAAC;IAED,KAAK;QACJ,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;QACpB,OAAO,IAAI,CAAA;IACZ,CAAC;IAED,MAAM,CAAC,GAAG,MAAW;QACpB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;QACjD,KAAK,MAAM,CAAC,IAAI,MAAM;YAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;QAC3C,OAAO,IAAI,CAAA;IACZ,CAAC;CACD"}

package/x/base/utils/use-attrs.d.ts

@@ -1,11 +1,11 @@
 import { Use } from "../use.js";
-import { AttrSpec } from "../../dom/types.js";
-export declare class UseAttrs {
-    #private;
-    constructor(use: Use);
-    get strings(): Record<string, string | undefined>;
-    get numbers(): Record<string, number | undefined>;
-    get booleans(): Record<string, boolean | undefined>;
-    spec<A extends AttrSpec>(spec: A): import("../../dom/types.js").AttrTypes<A>;
+import { AttrSpec, AttrTypes } from "../../dom/types.js";
+export type UseAttrs = {
+    <A extends AttrSpec>(spec: A): AttrTypes<A>;
+    strings: Record<string, undefined | string>;
+    numbers: Record<string, undefined | number>;
+    booleans: Record<string, undefined | boolean>;
+    spec<A extends AttrSpec>(spec: A): AttrTypes<A>;
     on(fn: () => void): void;
-}
+};
+export declare function useAttrs(use: Use): UseAttrs;

package/x/base/utils/use-attrs.js

@@ -1,19 +1,18 @@
 import { dom } from "../../dom/dom.js";
-export class UseAttrs {
-    #use;
-    #attrs;
-    constructor(use) {
-        this.#use = use;
-        this.#attrs = dom.attrs(use.element);
-    }
-    get strings() { return this.#attrs.strings; }
-    get numbers() { return this.#attrs.numbers; }
-    get booleans() { return this.#attrs.booleans; }
-    spec(spec) {
-        return this.#use.once(() => this.#attrs.spec(spec));
-    }
-    on(fn) {
-        return this.#use.mount(() => this.#attrs.on(fn));
+export function useAttrs(use) {
+    const attrs = dom.attrs(use.element);
+    function attrsFn(spec) {
+        return use.once(() => attrs.spec(spec));
     }
+    attrsFn.strings = attrs.strings;
+    attrsFn.numbers = attrs.numbers;
+    attrsFn.booleans = attrs.booleans;
+    attrsFn.spec = (spec) => {
+        return use.once(() => attrs.spec(spec));
+    };
+    attrsFn.on = (fn) => {
+        return use.mount(() => attrs.on(fn));
+    };
+    return attrsFn;
 }
 //# sourceMappingURL=use-attrs.js.map

package/x/base/utils/use-attrs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-attrs.js","sourceRoot":"","sources":["../../../s/base/utils/use-attrs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAGpC,MAAM,OAAO,QAAQ;IACpB,IAAI,CAAK;IACT,MAAM,CAAO;IAEb,YAAY,GAAQ;QACnB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;QACf,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IACrC,CAAC;IAED,IAAI,OAAO,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAA,CAAC,CAAC;IAC5C,IAAI,OAAO,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAA,CAAC,CAAC;IAC5C,IAAI,QAAQ,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAA,CAAC,CAAC;IAE9C,IAAI,CAAqB,IAAO;QAC/B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACpD,CAAC;IAED,EAAE,CAAC,EAAc;QAChB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IACjD,CAAC;CACD"}
+{"version":3,"file":"use-attrs.js","sourceRoot":"","sources":["../../../s/base/utils/use-attrs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAYpC,MAAM,UAAU,QAAQ,CAAC,GAAQ;IAChC,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IAEpC,SAAS,OAAO,CAAqB,IAAO;QAC3C,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAI,IAAI,CAAC,CAAC,CAAA;IAC3C,CAAC;IAED,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;IAC/B,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;IAC/B,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAA;IAEjC,OAAO,CAAC,IAAI,GAAG,CAAqB,IAAO,EAAE,EAAE;QAC9C,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAI,IAAI,CAAC,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,OAAO,CAAC,EAAE,GAAG,CAAC,EAAc,EAAE,EAAE;QAC/B,OAAO,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IACrC,CAAC,CAAA;IAED,OAAO,OAAO,CAAA;AACf,CAAC"}