@e280/sly 0.2.0-9 → 0.2.0

package/package.json

@@ -1,12 +1,19 @@
 {
 	"name": "@e280/sly",
-	"version": "0.2.0-9",
+	"version": "0.2.0",
 	"description": "web shadow views",
 	"license": "MIT",
 	"type": "module",
 	"main": "./x/index.js",
 	"exports": {
-		".": "./x/index.js"
+		".": "./x/index.js",
+		"./base": "./x/base/index.js",
+		"./dom": "./x/dom/index.js",
+		"./loaders": "./x/loaders/index.js",
+		"./loot": "./x/loot/index.js",
+		"./ops": "./x/ops/index.js",
+		"./spa": "./x/spa/index.js",
+		"./view": "./x/view/index.js"
 	},
 	"files": [
 		"x",
@@ -16,15 +23,15 @@
 		"lit": "^3.3.1"
 	},
 	"dependencies": {
-		"@e280/strata": "^0.2.0-6",
-		"@e280/stz": "^0.2.0"
+		"@e280/strata": "^0.2.2",
+		"@e280/stz": "^0.2.14"
 	},
 	"devDependencies": {
-		"@e280/science": "^0.1.2",
-		"@e280/scute": "^0.0.0",
+		"@e280/science": "^0.1.3",
+		"@e280/scute": "^0.1.1",
 		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
-		"typescript": "^5.9.2"
+		"typescript": "^5.9.3"
 	},
 	"scripts": {
 		"build": "run-s _clean _ln _tsc _scute",

package/s/{views/base-element.ts → base/element.ts}

@@ -3,24 +3,30 @@ import {debounce} from "@e280/stz"
 import {CSSResultGroup} from "lit"
 
 import {dom} from "../dom/dom.js"
-import {Content} from "./types.js"
+import {Content} from "../view/types.js"
 import {Reactor} from "./utils/reactor.js"
-import {applyStyles} from "./utils/apply-styles.js"
 import {AttrWatcher} from "./utils/attr-watcher.js"
+import {applyStyles} from "./utils/apply-styles.js"
 import {Use, _disconnect, _reconnect, _wrap} from "./use.js"
 
-export abstract class BaseElement extends HTMLElement {
+export class BaseElement extends HTMLElement {
 	static styles: CSSResultGroup | undefined
+
 	readonly shadow: ShadowRoot
 
 	#use: Use
-	#mounts = 0
+	#mountCount = 0
 	#reactor = new Reactor()
 	#attrWatcher = new AttrWatcher(this, () => this.update())
 
+	/** create the shadow root. override this if you want to change the shadow root settings. */
+	createShadow() {
+		return this.attachShadow({mode: "open"})
+	}
+
 	constructor() {
 		super()
-		this.shadow = this.attachShadow({mode: "open"})
+		this.shadow = this.createShadow()
 		this.#use = new Use(
 			this,
 			this.shadow,
@@ -29,8 +35,10 @@ export abstract class BaseElement extends HTMLElement {
 		)
 	}
 
-	abstract render(use: Use): Content
+	/** return some content to render. */
+	render(_use: Use): Content {}
 
+	/** immediately perform a fresh render into the shadow root. */
 	updateNow = () => {
 		this.#use[_wrap](() => {
 			dom.render(
@@ -43,20 +51,20 @@ export abstract class BaseElement extends HTMLElement {
 		})
 	}
 
+	/** request a rerender which will happen soon (debounced). */
 	update = debounce(0, this.updateNow)
 	
 	connectedCallback() {
-		if (this.#mounts === 0) {
+		if (this.#mountCount === 0) {
 			const styles = (this.constructor as any).styles
-			if (styles)
-				applyStyles(this.shadow, styles)
+			if (styles) applyStyles(this.shadow, styles)
 			this.updateNow()
 		}
 		else {
 			this.#use[_reconnect]()
 		}
 		this.#attrWatcher.start()
-		this.#mounts++
+		this.#mountCount++
 	}
 
 	disconnectedCallback() {

package/s/base/index.ts

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

package/s/{views → base}/use.ts

@@ -1,24 +1,25 @@
 
 import {CSSResultGroup} from "lit"
-import {defer, MapG} from "@e280/stz"
+import {defer, GMap} from "@e280/stz"
 import {signal, SignalOptions} from "@e280/strata/signals"
 
 import {Op} from "../ops/op.js"
-import {dom} from "../dom/dom.js"
-import {Attrs} from "../dom/types.js"
 import {Mounts} from "./utils/mounts.js"
+import {States} from "./utils/states.js"
+import {eve, EveSpec} from "../dom/parts/eve.js"
 import {applyStyles} from "./utils/apply-styles.js"
+import {useAttrs, UseAttrs} from "./utils/use-attrs.js"
 
 export const _wrap = Symbol()
 export const _disconnect = Symbol()
 export const _reconnect = Symbol()
 
 export class Use {
-	attrs: Attrs
+	readonly attrs: UseAttrs
 
 	#runs = 0
 	#position = 0
-	#values = new MapG<number, any>()
+	#values = new GMap<number, any>()
 	#rendered = defer()
 	#mounts = new Mounts()
 
@@ -45,7 +46,7 @@ export class Use {
 			public renderNow: () => void,
 			public render: () => Promise<void>,
 		) {
-		this.attrs = dom.attrs(this.element)
+		this.attrs = useAttrs(this)
 	}
 
 	get renderCount() {
@@ -91,6 +92,14 @@ export class Use {
 		return this.life(() => [fn(), () => {}])
 	}
 
+	events(spec: EveSpec) {
+		return this.mount(() => eve(this.element, spec))
+	}
+
+	states<S extends string = string>() {
+		return this.once(() => new States<S>(this.element))
+	}
+
 	op = (() => {
 		const that = this
 		function op<V>(f: () => Promise<V>) {

package/s/{views → base}/utils/reactor.ts

@@ -1,16 +1,25 @@
 
-import {MapG} from "@e280/stz"
+import {GMap} from "@e280/stz"
 import {tracker} from "@e280/strata"
 
 export class Reactor {
-	#map = new MapG<any, () => void>()
-
-	constructor() {}
+	#map = new GMap<any, () => void>()
 
 	effect<R>(collect: () => R, respond: () => Promise<void>) {
 		const {seen, result} = tracker.observe(collect)
+
+		// add seen items
 		for (const item of seen)
 			this.#map.guarantee(item, () => tracker.subscribe(item, respond))
+
+		// remove orphaned items
+		for (const [item, dispose] of this.#map) {
+			if (!seen.has(item)) {
+				dispose()
+				this.#map.delete(item)
+			}
+		}
+
 		return result
 	}
 

package/s/base/utils/states.ts

@@ -0,0 +1,49 @@
+
+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
+	}
+
+	get size() {
+		return this.#states.size
+	}
+
+	has(state: S) {
+		return this.#states.has(state)
+	}
+
+	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[]) {
+		return this.clear().add(...states)
+	}
+}
+

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

@@ -0,0 +1,36 @@
+
+import {Use} from "../use.js"
+import {dom} from "../../dom/dom.js"
+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 function useAttrs(use: Use): UseAttrs {
+	const attrs = dom.attrs(use.element)
+
+	function attrsFn<A extends AttrSpec>(spec: A) {
+		return use.once(() => attrs.spec<A>(spec))
+	}
+
+	attrsFn.strings = attrs.strings
+	attrsFn.numbers = attrs.numbers
+	attrsFn.booleans = attrs.booleans
+
+	attrsFn.spec = <A extends AttrSpec>(spec: A) => {
+		return use.once(() => attrs.spec<A>(spec))
+	}
+
+	attrsFn.on = (fn: () => void) => {
+		return use.mount(() => attrs.on(fn))
+	}
+
+	return attrsFn
+}
+

package/s/demo/demo.bundle.ts

@@ -1,26 +1,13 @@
 
-import {nap, repeat} from "@e280/stz"
 import {dom} from "../dom/dom.js"
-import {DemoView} from "./views/demo.js"
-import {CounterView} from "./views/counter.js"
-import {DivineElement} from "./views/divine.js"
-import {IncrediElement} from "./views/incredi.js"
-
-dom.in(".demo").render(DemoView())
+import {CounterComponent} from "./views/counter.js"
+import {DemoComponent} from "./views/demo.js"
+import {FastcountElement} from "./views/fastcount.js"
 
 dom.register({
-	IncrediElement,
-	DivineElement,
-	DemoCounter: CounterView
-		.component()
-		.props(c => [dom.attrs(c).number.initial ?? 0]),
-})
-
-const divine = dom<DivineElement>("divine-element")
-
-repeat(async() => {
-	await nap(1000)
-	divine.$speed.value++
+	DemoComponent,
+	CounterComponent,
+	FastcountElement,
 })
 
 console.log("🦝 sly")

package/s/demo/views/counter.ts

@@ -1,41 +1,25 @@
 
 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"
+import {view} from "../../view/view.js"
+import {cssReset} from "../../base/css-reset.js"
+import {BaseElement} from "../../base/element.js"
 
-export const CounterView = view(use => (start: number) => {
+export const CounterView = view(use => (start: number, step: number) => {
 	use.name("counter")
 	use.styles(cssReset, styles)
 
-	const $seconds = use.signal(0)
-	const since = use.once(() => Date.now())
-	use.mount(() => repeat(async() => {
-		const delta = Date.now() - since
-		$seconds.set(Math.floor(delta / 1000))
-	}))
-
 	const $count = use.signal(start)
-	const increment = () => $count.value++
-
-	const $product = use.signal
-		.derived(() => $count() * $seconds())
+	const increment = () => { $count.value += step }
 
 	return html`
 		<slot></slot>
 		<div>
-			<span>${$seconds.get()}</span>
-		</div>
-		<div>
-			<span>${$count.get()}</span>
-		</div>
-		<div>
-			<span>${$product.get()}</span>
+			<span>${$count()}</span>
 		</div>
 		<div>
-			<button @click="${increment}">+</button>
+			<button @click="${increment}">++</button>
 		</div>
 	`
 })
@@ -43,8 +27,13 @@ export const CounterView = view(use => (start: number) => {
 // convert a view into a web component
 export class CounterComponent extends (
 	CounterView
-		.component<{start?: number}>()
-		.props(c => [dom.attrs(c).number.start ?? 0])
+		.component(class extends BaseElement {
+			attrs = dom.attrs(this).spec({
+				start: Number,
+				step: Number,
+			})
+		})
+		.props(c => [c.attrs.start ?? 0, c.attrs.step ?? 1])
 ) {}
 
 const styles = css`

package/s/demo/views/demo.ts

@@ -1,29 +1,22 @@
 
 import {css, html} from "lit"
-import {DivineView} from "./divine.js"
-import {view} from "../../views/view.js"
+
+import {view} from "../../view/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"
+import {cssReset} from "../../base/css-reset.js"
 
-export const DemoView = view(use => () => {
+export class DemoComponent extends (view.component(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())}
+		${CounterView
+			.props(768, 3)
+			.children("view")
+			.render()}
 		${LoadersView()}
 	`
-})
+})) {}
 
 const styles = css`
 :host {

package/s/demo/views/{incredi.ts → fastcount.ts}

@@ -1,12 +1,12 @@
 
 import {css, html} from "lit"
-import {nap, repeat} from "@e280/stz"
+import {nap, cycle} from "@e280/stz"
 
 import {dom} from "../../dom/dom.js"
-import {Use} from "../../views/use.js"
-import {BaseElement} from "../../views/base-element.js"
+import {Use} from "../../base/use.js"
+import {BaseElement} from "../../base/element.js"
 
-export class IncrediElement extends BaseElement {
+export class FastcountElement extends BaseElement {
 	static styles = css`span{color:orange}`
 
 	attrs = dom.attrs(this).spec({value: Number})
@@ -16,7 +16,7 @@ export class IncrediElement extends BaseElement {
 		const {value = 1} = this.attrs
 		const $count = use.signal(0)
 
-		use.mount(() => repeat(async() => {
+		use.mount(() => cycle(async() => {
 			await nap(10)
 			await $count($count() + 1)
 		}))

package/s/demo/views/loaders.ts

@@ -1,9 +1,9 @@
 
 import {css, html} from "lit"
 import {Op} from "../../ops/op.js"
-import {view} from "../../views/view.js"
-import {cssReset} from "../../views/css-reset.js"
-import {anims, makeLoader} from "../../ops/loaders/make-loader.js"
+import {view} from "../../view/view.js"
+import {loaders} from "../../loaders/index.js"
+import {cssReset} from "../../base/css-reset.js"
 
 export const LoadersView = view(use => () => {
 	use.name("loaders")
@@ -11,14 +11,14 @@ export const LoadersView = view(use => () => {
 
 	const op = use.once(() => Op.loading())
 
-	const loaders = use.once(() =>
-		Object.entries(anims).map(([key, anim]) => ({
+	const library = use.once(() =>
+		Object.entries(loaders.anims).map(([key, anim]) => ({
 			key,
-			loader: makeLoader(anim)
+			loader: loaders.make(anim)
 		}))
 	)
 
-	return loaders.map(({key, loader}) => html`
+	return library.map(({key, loader}) => html`
 		<div data-anim="${key}">
 			<span>${key}</span>
 			<span>${loader(op, () => null)}</span>

package/s/dom/attrs/attrs.ts

@@ -1,21 +1,21 @@
 
 import {AttrSpec} from "../types.js"
 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"
+import {attrGet, attrSet} from "./parts/attr-fns.js"
 
 export function attrs(element: HTMLElement) {
 	const proxies = new AttrProxies(element)
 	return {
-		string: proxies.string,
-		number: proxies.number,
-		boolean: proxies.boolean,
+		strings: proxies.strings,
+		numbers: proxies.numbers,
+		booleans: proxies.booleans,
 		on: (fn: () => void) => onAttrs(element, fn),
 		spec: <A extends AttrSpec>(spec: A) => attrSpec(element, spec),
 	}
 }
 
-attrs.get = attrFns.get
-attrs.set = attrFns.set
+attrs.get = attrGet
+attrs.set = attrSet
 

package/s/dom/attrs/parts/attr-fns.ts

@@ -1,38 +1,68 @@
 
-/** fns for getting and setting html attributes of various types */
-export const attrFns = {
-	get: {
-		string: (e: HTMLElement, key: string) => {
-			return e.getAttribute(key) ?? undefined
-		},
-		number: (e: HTMLElement, key: string) => {
-			const raw = e.getAttribute(key)
-			return (raw === null || !raw)
-				? undefined
-				: Number(raw)
-		},
-		boolean: (e: HTMLElement, key: string) => {
-			const raw = e.getAttribute(key)
-			return raw !== null
-		},
-	},
-
-	set: {
-		string: (e: HTMLElement, key: string, value: string | undefined) => {
-			if (value === undefined) e.removeAttribute(key)
-			else e.setAttribute(key, value)
-			return true
-		},
-		number: (e: HTMLElement, key: string, value: number | undefined) => {
-			if (value === undefined) e.removeAttribute(key)
-			else e.setAttribute(key, value.toString())
-			return true
-		},
-		boolean: (e: HTMLElement, key: string, value: boolean | undefined) => {
-			if (value) e.setAttribute(key, "")
-			else e.removeAttribute(key)
-			return true
-		},
+import {AttrValue} from "../../types.js"
+
+/** get html attributes */
+export const attrGet = {
+	string: (e: HTMLElement, key: string) => {
+		return e.getAttribute(key) ?? undefined
+	},
+	number: (e: HTMLElement, key: string) => {
+		const raw = e.getAttribute(key)
+		return (raw === null || !raw)
+			? undefined
+			: Number(raw)
+	},
+	boolean: (e: HTMLElement, key: string) => {
+		const raw = e.getAttribute(key)
+		return raw !== null
+	},
+}
+
+/** set html attributes */
+export const attrSet = {
+	string: (e: HTMLElement, key: string, value: string | undefined) => {
+		if (value === undefined) e.removeAttribute(key)
+		else e.setAttribute(key, value)
+		return true
+	},
+	number: (e: HTMLElement, key: string, value: number | undefined) => {
+		if (value === undefined) e.removeAttribute(key)
+		else e.setAttribute(key, value.toString())
+		return true
+	},
+	boolean: (e: HTMLElement, key: string, value: boolean | undefined) => {
+		if (value) e.setAttribute(key, "")
+		else e.removeAttribute(key)
+		return true
+	},
+
+	any: (element: HTMLElement, key: string, value: AttrValue) => {
+		if (value === undefined || value === null)
+			element.removeAttribute(key)
+
+		else if (typeof value === "string")
+			element.setAttribute(key, value)
+
+		else if (typeof value === "number")
+			element.setAttribute(key, value.toString())
+
+		else if (typeof value === "boolean") {
+			if (value === true)
+				element.setAttribute(key, "")
+			else
+				element.removeAttribute(key)
+		}
+
+		else console.warn(`invalid attribute "${key}" type is "${typeof value}"`)
+	},
+
+	entries: (element: HTMLElement, entries: Iterable<[key: string, value: AttrValue]>) => {
+		for (const [key, value] of entries)
+			attrSet.any(element, key, value)
+	},
+
+	record: (element: HTMLElement, record: Record<string, AttrValue>) => {
+		return attrSet.entries(element, Object.entries(record))
 	},
 }
 

package/s/dom/attrs/parts/attr-proxies.ts

@@ -1,34 +1,34 @@
 
-import {attrFns} from "./attr-fns.js"
+import {attrGet, attrSet} from "./attr-fns.js"
 
 /** a typed proxy accessor for html attributes */
 export class AttrProxies {
 	constructor(public element: HTMLElement) {}
 
-	string = new Proxy({}, {
+	strings = new Proxy({}, {
 		get: (_t, key: string) => (
-			attrFns.get.string(this.element, key)
+			attrGet.string(this.element, key)
 		),
 		set: (_t, key: string, value: string | undefined) => (
-			attrFns.set.string(this.element, key, value)
+			attrSet.string(this.element, key, value)
 		),
 	}) as Record<string, string | undefined>
 
-	number = new Proxy({}, {
+	numbers = new Proxy({}, {
 		get: (_t, key: string) => (
-			attrFns.get.number(this.element, key)
+			attrGet.number(this.element, key)
 		),
 		set: (_t, key: string, value: number | undefined) => (
-			attrFns.set.number(this.element, key, value)
+			attrSet.number(this.element, key, value)
 		),
 	}) as Record<string, number | undefined>
 
-	boolean = new Proxy({}, {
+	booleans = new Proxy({}, {
 		get: (_t, key: string) => (
-			attrFns.get.boolean(this.element, key)
+			attrGet.boolean(this.element, key)
 		),
 		set: (_t, key: string, value: boolean | undefined) => (
-			attrFns.set.boolean(this.element, key, value)
+			attrSet.boolean(this.element, key, value)
 		),
 	}) as Record<string, boolean | undefined>
 }