@e280/sly 0.2.0-3 → 0.2.0-30

package/package.json

@@ -1,12 +1,19 @@
 {
 	"name": "@e280/sly",
-	"version": "0.2.0-3",
+	"version": "0.2.0-30",
 	"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.0",
+		"@e280/stz": "^0.2.10"
 	},
 	"devDependencies": {
 		"@e280/science": "^0.1.2",
-		"@e280/scute": "^0.0.0",
+		"@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/base/element.ts

@@ -0,0 +1,76 @@
+
+import {debounce} from "@e280/stz"
+import {CSSResultGroup} from "lit"
+
+import {dom} from "../dom/dom.js"
+import {Content} from "../view/types.js"
+import {Reactor} from "./utils/reactor.js"
+import {AttrWatcher} from "./utils/attr-watcher.js"
+import {applyStyles} from "./utils/apply-styles.js"
+import {Use, _disconnect, _reconnect, _wrap} from "./use.js"
+
+export class BaseElement extends HTMLElement {
+	static styles: CSSResultGroup | undefined
+
+	readonly shadow: ShadowRoot
+
+	#use: Use
+	#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.createShadow()
+		this.#use = new Use(
+			this,
+			this.shadow,
+			this.updateNow,
+			this.update,
+		)
+	}
+
+	/** return some content to render. */
+	render(_use: Use): Content {}
+
+	/** immediately perform a fresh render into the shadow root. */
+	updateNow = () => {
+		this.#use[_wrap](() => {
+			dom.render(
+				this.shadow,
+				this.#reactor.effect(
+					() => this.render(this.#use),
+					this.update,
+				),
+			)
+		})
+	}
+
+	/** request a rerender which will happen soon (debounced). */
+	update = debounce(0, this.updateNow)
+	
+	connectedCallback() {
+		if (this.#mountCount === 0) {
+			const styles = (this.constructor as any).styles
+			if (styles) applyStyles(this.shadow, styles)
+			this.updateNow()
+		}
+		else {
+			this.#use[_reconnect]()
+		}
+		this.#attrWatcher.start()
+		this.#mountCount++
+	}
+
+	disconnectedCallback() {
+		this.#use[_disconnect]()
+		this.#reactor.clear()
+		this.#attrWatcher.stop()
+	}
+}
+

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,18 +1,22 @@
 
 import {CSSResultGroup} from "lit"
 import {defer, MapG} from "@e280/stz"
-import {Derive, Lazy, Signal, signal, SignalOptions} from "@e280/strata/signals"
+import {signal, SignalOptions} from "@e280/strata/signals"
 
 import {Op} from "../ops/op.js"
 import {Mounts} from "./utils/mounts.js"
+import {eve, EveSpec} from "../dom/parts/eve.js"
 import {applyStyles} from "./utils/apply-styles.js"
-import {attributes, AttrSpec, onAttrChange} from "./attributes.js"
+import {useAttrs, UseAttrs} from "./utils/use-attrs.js"
+import { States } from "./utils/states.js"
 
 export const _wrap = Symbol()
 export const _disconnect = Symbol()
 export const _reconnect = Symbol()
 
 export class Use {
+	readonly attrs: UseAttrs
+
 	#runs = 0
 	#position = 0
 	#values = new MapG<number, any>()
@@ -37,11 +41,13 @@ export class Use {
 	}
 
 	constructor(
-		public element: HTMLElement,
-		public shadow: ShadowRoot,
-		public renderNow: () => void,
-		public render: () => Promise<void>,
-	) {}
+			public element: HTMLElement,
+			public shadow: ShadowRoot,
+			public renderNow: () => void,
+			public render: () => Promise<void>,
+		) {
+		this.attrs = useAttrs(this)
+	}
 
 	get renderCount() {
 		return this.#runs
@@ -64,11 +70,6 @@ export class Use {
 		return this.styles(...styles)
 	}
 
-	attrs<A extends AttrSpec>(spec: A) {
-		this.mount(() => onAttrChange(this.element, this.render))
-		return this.once(() => attributes(this.element, spec))
-	}
-
 	once<V>(fn: () => V) {
 		return this.#values.guarantee(this.#position++, fn) as V
 	}
@@ -91,6 +92,14 @@ export class Use {
 		return this.life(() => [fn(), () => {}])
 	}
 
+	events(spec: EveSpec) {
+		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>) {
@@ -106,8 +115,8 @@ export class Use {
 		function sig<V>(value: V, options?: Partial<SignalOptions>) {
 			return that.once(() => signal<V>(value, options))
 		}
-		sig.derive = function derive<V>(formula: () => V, options?: Partial<SignalOptions>) {
-			return that.once(() => signal.derive<V>(formula, options))
+		sig.derived = function derived<V>(formula: () => V, options?: Partial<SignalOptions>) {
+			return that.once(() => signal.derived<V>(formula, options))
 		}
 		sig.lazy = function lazy<V>(formula: () => V, options?: Partial<SignalOptions>) {
 			return that.once(() => signal.lazy<V>(formula, options))
@@ -115,8 +124,8 @@ export class Use {
 		return sig
 	})()
 
-	derive<V>(formula: () => V, options?: Partial<SignalOptions>) {
-		return this.once(() => signal.derive<V>(formula, options))
+	derived<V>(formula: () => V, options?: Partial<SignalOptions>) {
+		return this.once(() => signal.derived<V>(formula, options))
 	}
 
 	lazy<V>(formula: () => V, options?: Partial<SignalOptions>) {

package/s/base/utils/attr-watcher.ts

@@ -0,0 +1,22 @@
+
+import {dom} from "../../dom/dom.js"
+
+export class AttrWatcher {
+	#stopper: (() => void) | undefined
+
+	constructor(
+		private element: HTMLElement,
+		private response: () => void,
+	) {}
+
+	start() {
+		if (!this.#stopper)
+			this.#stopper = dom.attrs(this.element).on(this.response)
+	}
+
+	stop() {
+		if (this.#stopper) this.#stopper()
+		this.#stopper = undefined
+	}
+}
+

package/s/base/utils/reactor.ts

@@ -0,0 +1,32 @@
+
+import {MapG} from "@e280/stz"
+import {tracker} from "@e280/strata"
+
+export class Reactor {
+	#map = new MapG<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
+	}
+
+	clear() {
+		for (const dispose of this.#map.values())
+			dispose()
+		this.#map.clear()
+	}
+}
+

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,10 +1,14 @@
 
 import {dom} from "../dom/dom.js"
-import {DemoView} from "./views/demo.js"
-import {CounterView} from "./views/counter.js"
-
-dom.in(".demo").render(DemoView())
-dom.register({DemoCounter: CounterView.component(1)})
+import {CounterComponent} from "./views/counter.js"
+import {DemoComponent} from "./views/demo.js"
+import {FastcountElement} from "./views/fastcount.js"
+
+dom.register({
+	DemoComponent,
+	CounterComponent,
+	FastcountElement,
+})
 
 console.log("🦝 sly")
 

package/s/demo/views/counter.ts

@@ -1,44 +1,41 @@
 
 import {css, html} from "lit"
-import {repeat} from "@e280/stz"
 
-import {view} from "../../views/view.js"
-import {cssReset} from "../../views/css-reset.js"
+import {dom} from "../../dom/dom.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 => (initial: number) => {
+export const CounterView = view(use => (start: number, step: number) => {
 	use.name("counter")
 	use.styles(cssReset, styles)
 
-	const $seconds = use.signal(0)
-	const start = use.once(() => Date.now())
-	use.mount(() => repeat(async() => {
-		const since = Date.now() - start
-		$seconds.set(Math.floor(since / 1000))
-	}))
-
-	const $count = use.signal(initial)
-	const increment = () => $count.value++
-
-	const $product = use.signal
-		.derive(() => $count() * $seconds())
+	const $count = use.signal(start)
+	const increment = () => { $count.value += step }
 
 	return html`
 		<slot></slot>
 		<div>
-			<span>${$seconds.get()}</span>
-		</div>
-		<div>
-			<span>${$count.get()}</span>
+			<span>${$count()}</span>
 		</div>
 		<div>
-			<span>${$product.get()}</span>
-		</div>
-		<div>
-			<button @click="${increment}">+</button>
+			<button @click="${increment}">++</button>
 		</div>
 	`
 })
 
+// convert a view into a web component
+export class CounterComponent extends (
+	CounterView
+		.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`
 :host {
 	display: flex;

package/s/demo/views/demo.ts

@@ -1,24 +1,28 @@
 
 import {css, html} from "lit"
-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 {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)
-
 	return html`
-		${CounterView.props(2).children("view").render()}
+		${CounterView
+			.props(768, 3)
+			.children("view")
+			.render()}
 		${LoadersView()}
 	`
-})
+})) {}
 
 const styles = css`
 :host {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 	gap: 1em;
 }
 `

package/s/demo/views/fastcount.ts

@@ -0,0 +1,29 @@
+
+import {css, html} from "lit"
+import {nap, cycle} from "@e280/stz"
+
+import {dom} from "../../dom/dom.js"
+import {Use} from "../../base/use.js"
+import {BaseElement} from "../../base/element.js"
+
+export class FastcountElement extends BaseElement {
+	static styles = css`span{color:orange}`
+
+	attrs = dom.attrs(this).spec({value: Number})
+	something = {whatever: "rofl"}
+
+	render(use: Use) {
+		const {value = 1} = this.attrs
+		const $count = use.signal(0)
+
+		use.mount(() => cycle(async() => {
+			await nap(10)
+			await $count($count() + 1)
+		}))
+
+		return html`
+			<span>${$count() * value}</span>
+		`
+	}
+}
+

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

@@ -0,0 +1,21 @@
+
+import {AttrSpec} from "../types.js"
+import {onAttrs} from "./parts/on-attrs.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 {
+		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 = attrGet
+attrs.set = attrSet
+

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

@@ -0,0 +1,68 @@
+
+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

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