@e280/sly 0.2.0-2 → 0.2.0-20

package/package.json

@@ -1,12 +1,19 @@
 {
 	"name": "@e280/sly",
-	"version": "0.2.0-2",
+	"version": "0.2.0-20",
 	"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,12 +23,12 @@
 		"lit": "^3.3.1"
 	},
 	"dependencies": {
-		"@e280/strata": "^0.2.0-6",
-		"@e280/stz": "^0.2.0"
+		"@e280/strata": "^0.2.0-14",
+		"@e280/stz": "^0.2.6"
 	},
 	"devDependencies": {
 		"@e280/science": "^0.1.2",
-		"@e280/scute": "^0.0.0",
+		"@e280/scute": "^0.1.0",
 		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
 		"typescript": "^5.9.2"

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,5 @@
+
+export * from "./css-reset.js"
+export * from "./element.js"
+export * from "./use.js"
+

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

@@ -1,18 +1,20 @@
 
 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 {UseAttrs} from "./utils/use-attrs.js"
 import {applyStyles} from "./utils/apply-styles.js"
-import {attributes, AttrSpec, onAttrChange} from "./attributes.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 +39,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 = new UseAttrs(this)
+	}
 
 	get renderCount() {
 		return this.#runs
@@ -64,11 +68,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
 	}
@@ -94,9 +93,9 @@ export class Use {
 	op = (() => {
 		const that = this
 		function op<V>(f: () => Promise<V>) {
-			return that.once(() => Op.fn(f))
+			return that.once(() => Op.load(f))
 		}
-		op.fn = op as (<V>(f: () => Promise<V>) => Op<V>)
+		op.load = op as (<V>(f: () => Promise<V>) => Op<V>)
 		op.promise = <V>(p: Promise<V>) => this.once(() => Op.promise(p))
 		return op
 	})()
@@ -106,8 +105,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 +114,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/use-attrs.ts

@@ -0,0 +1,27 @@
+
+import {Use} from "../use.js"
+import {dom} from "../../dom/dom.js"
+import {Attrs, AttrSpec} from "../../dom/types.js"
+
+export class UseAttrs {
+	#use: Use
+	#attrs: Attrs
+
+	constructor(use: 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<A extends AttrSpec>(spec: A) {
+		return this.#use.once(() => this.#attrs.spec(spec))
+	}
+
+	on(fn: () => void) {
+		return this.#use.mount(() => this.#attrs.on(fn))
+	}
+}
+

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, repeat} 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(() => repeat(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 {attrFns} from "./parts/attr-fns.js"
+import {attrSpec} from "./parts/attr-spec.js"
+import {AttrProxies} from "./parts/attr-proxies.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 = attrFns.get
+attrs.set = attrFns.set
+

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

@@ -0,0 +1,38 @@
+
+/** 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
+		},
+	},
+}
+

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

@@ -0,0 +1,35 @@
+
+import {attrFns} 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) => (
+			attrFns.get.string(this.element, key)
+		),
+		set: (_t, key: string, value: string | undefined) => (
+			attrFns.set.string(this.element, key, value)
+		),
+	}) as Record<string, string | undefined>
+
+	numbers = new Proxy({}, {
+		get: (_t, key: string) => (
+			attrFns.get.number(this.element, key)
+		),
+		set: (_t, key: string, value: number | undefined) => (
+			attrFns.set.number(this.element, key, value)
+		),
+	}) as Record<string, number | undefined>
+
+	booleans = new Proxy({}, {
+		get: (_t, key: string) => (
+			attrFns.get.boolean(this.element, key)
+		),
+		set: (_t, key: string, value: boolean | undefined) => (
+			attrFns.set.boolean(this.element, key, value)
+		),
+	}) as Record<string, boolean | undefined>
+}
+

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

@@ -0,0 +1,29 @@
+
+import {AttrSpec, AttrTypes} from "../../types.js"
+import {attrFns} from "./attr-fns.js"
+
+/** specify available html attributes and their types and create a proxy accessor */
+export const attrSpec = <A extends AttrSpec>(
+		e: HTMLElement,
+		spec: A,
+	) => new Proxy(spec, {
+
+	get: (_target, key: string) => {
+		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: string, value: any) => {
+		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}"`)
+		}
+	},
+}) as any as AttrTypes<A>
+

package/s/dom/attrs/parts/on-attrs.ts

@@ -0,0 +1,8 @@
+
+/** respond when any attribute changes on the html element */
+export function onAttrs(element: HTMLElement, fn: () => void) {
+	const observer = new MutationObserver(fn)
+	observer.observe(element, {attributes: true})
+	return () => observer.disconnect()
+}
+