Full refactor of State (now Observable)

* Renamed to Observable
* Updated skooma.js to match the API

observable.js

@@ -1,11 +1,28 @@
+/** @type FinalizationRegistry<AbortController> */
 const abortRegistry = new FinalizationRegistry(controller => controller.abort())
 
+/** @param {String} string */
 const camelToKebab = string => string.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`)
+/** @param {String} string */
 const kebabToCamel = string => string.replace(/([a-z])-([a-z])/g, (_, a, b) => a+b.toUpperCase())
 
-export class ChangeEvent extends Event {
+const identity = object=>object
+
+const target = Symbol("Proxy Target")
+
+/* Custom Event Classes */
+
+export class SynchronousChangeEvent extends Event {
+	constructor(change) {
+		super('synchronous', {cancelable: true})
+		this.change = change
+	}
+}
+
+export class MultiChangeEvent extends Event {
 	#final
 	#values
+
 	constructor(...changes) {
 		super('change')
 		this.changes = changes
@@ -40,27 +57,43 @@ export class ChangeEvent extends Event {
 	}
 }
 
-export class SimpleState extends EventTarget {
+export class ValueChangeEvent extends MultiChangeEvent {
+	get value() {
+		return this.final.value
+	}
+}
+
+/* Observable Classes */
+
+export class Observable extends EventTarget {
 	#synchronous
+	/** @type Array<{name:string, from, to}> */
 	#queue
-	#nested = new Map()
-	#weakRef = new WeakRef(this)
 	#abortController = new AbortController
 
-	constructor({synchronous, methods}={}) {
+	#ref = new WeakRef(this)
+	get ref() { return this.#ref }
+
+	observable = true
+
+	constructor({synchronous}={}) {
 		super()
+		if (this.constructor === Observable) {
+			throw new TypeError("Cannot instantiate abstract class")
+		}
 		this.#synchronous = !!synchronous
 		abortRegistry.register(this, this.#abortController)
 
-		// Try running a "<name>Changed" method for every changed property
+		this.proxy = new Proxy(this.constructor.prototype.proxy, {
-		// Can be disabled to maybe squeeze out some performance
+			get: (target, prop) => target.call(this, prop)
-		if (methods ?? true) {
+		})
-			this.addEventListener("change", ({final}) => {
+	}
-				final.forEach((value, prop) => {
+
-					if (`${prop}Changed` in this) this[`${prop}Changed`](value)
+	proxy(prop, {get, set, ...options}={}) {
-				})
+		const proxy = new ProxiedObservableValue(this, prop, options)
-			})
+		if (get) proxy.get = get
-		}
+		if (set) proxy.set = set
+		return proxy
 	}
 
 	subscribe(prop, callback) {
@@ -74,152 +107,150 @@ export class SimpleState extends EventTarget {
 		return () => controller.abort()
 	}
 
-	get() { return this.value }
+	enqueue(property, from, to, mutation=false) {
-	set(value) { this.value = value }
+		const change = {property, from, to, mutation}
-
+		if (!this.dispatchEvent(new SynchronousChangeEvent(change))) return false
-	emit(property, from, to, options={}) {
-		const change = {property, from, to, ...options}
 		if (!this.synchronous) {
 			if (!this.#queue) {
 				this.#queue = []
 				queueMicrotask(() => {
-					this.dispatchEvent(new ChangeEvent(...this.#queue))
+					this.emit(...this.#queue)
 					this.#queue = undefined
 				})
 			}
 			this.#queue.push(change)
 		} else {
-			this.dispatchEvent(new ChangeEvent([change]))
+			this.emit(change)
 		}
+		return true
 	}
 
-	adopt(prop, state) {
+	emit() {
-		let handlers = this.#nested.get(state)
+		throw new TypeError(`${this.constructor.name} did not define an 'emit' method`)
-		if (!handlers) {
-			// Actual adoption
-			handlers = new Map()
-			this.#nested.set(state, handlers)
-		}
-		const ref = this.#weakRef
-		const handler = () => ref.deref()?.emit(prop, state, state, {state: true})
-
-		handlers.set(prop, handler)
-		state.addEventListener("change", handler, {signal: this.ignal})
-	}
-
-	disown(prop, state) {
-		const handlers = this.#nested.get(state)
-		const handler = handlers.get(prop)
-		state.removeEventListener("change", handler)
-		handlers.delete(prop)
-		if (handlers.size == 0) {
-			this.#nested.delete(state)
-		}
 	}
 
 	get signal() { return this.#abortController.signal }
 	get synchronous() { return this.#synchronous }
 }
 
-export class State extends SimpleState {
+export class ObservableObject extends Observable {
-	#target
 	#shallow
 
-	static isState(object) { return SimpleState.prototype.isPrototypeOf(object) }
-
 	constructor(target={}, {shallow, ...options}={}) {
 		super(options)
-
 		this.#shallow = !!shallow
-		this.#target = target
+		this[target] = target
 		this.values = new Proxy(target, {
-			set: (_target, prop, value) => {
+			set: (target, prop, value) => {
-				const old = this.get(prop)
+				const old = target[prop]
-				if (old !== value) {
+				if (old === value) {
-					this.emit(prop, old, value)
+					return true
-					if (this.#shallow) {
+				} else {
-						if (State.isState(old)) this.disown(prop, old)
+					if (this.enqueue(prop, old, value)) {
-						if (State.isState(value)) this.adopt(prop, value)
+						if (!this.#shallow) {
+							if (old instanceof Observable) this.disown(prop, old)
+							if (value instanceof Observable) this.adopt(prop, value)
+						}
+						target[prop] = value
+						return true
+					} else {
+						return false
 					}
-					this.set(prop, value)
 				}
-				return true
 			},
-			get: (_target, prop) => this.get(prop),
+			get: (target, prop) => target[prop],
 		})
 	}
 
-	forward(property="value", methods) {
+	proxy(prop, {get, set, ...options}={}) {
-		return new ForwardState(this, property, methods)
+		const proxy = new ProxiedObservableValue(this, prop, {values: this.values, ...options})
+		if (get) proxy.get = get
+		if (set) proxy.set = set
+		return proxy
 	}
 
-	set(prop, value) {
+	emit(...changes) {
-		if (arguments.length === 1) return this.set("value", prop)
+		this.dispatchEvent(new MultiChangeEvent(...changes))
-		this.#target[prop] = value
 	}
 
-	get(prop="value") {
+	/** @type Map<Observable, Map<String, Function>> */
-		return this.#target[prop]
+	#nested = new Map()
+
+	adopt(prop, observable) {
+		let handlers = this.#nested.get(observable)
+		if (!handlers) {
+			// Actual adoption
+			handlers = new Map()
+			this.#nested.set(observable, handlers)
+		}
+		const ref = this.ref
+		const handler = () => ref.deref()?.emit(prop, observable, observable, {observable: true})
+
+		handlers.set(prop, handler)
+		observable.addEventListener("change", handler, {signal: this.signal})
 	}
 
-	set value(value) { this.set(value) }
+	disown(prop, observable) {
-	get value() { return this.get() }
+		const handlers = this.#nested.get(observable)
+		const handler = handlers.get(prop)
+		observable.removeEventListener("change", handler)
+		handlers.delete(prop)
+		if (handlers.size == 0) {
+			this.#nested.delete(observable)
+		}
+	}
 }
 
-export class ForwardState extends SimpleState {
+export class ObservableValue extends Observable {
-	#backend
+	#value
-	#property
-	#methods
 
-	constructor(backend, property, methods = {}) {
+	constructor(value, options) {
-		super()
+		super(options)
-		this.#methods = methods
+		this.#value = value
-		this.#backend = backend
-		this.#property = property
-
-		const ref = new WeakRef(this)
-		const abortController = new AbortController()
-		abortRegistry.register(this, abortController)
-		backend.addEventListener("change", event => {
-			const state = ref.deref()
-			if (state) {
-				let relevantChanges = event.changes
-					.filter(({property: name}) => name === property)
-				const get = methods.get
-				if (methods.get) {
-					relevantChanges = relevantChanges.map(
-						({from, to}) => ({property: "value", from: get(from), to: get(to)})
-					)
-				} else {
-					relevantChanges = relevantChanges.map(
-						({from, to}) => ({property: "value", from, to})
-					)
-				}
-				if (relevantChanges.length > 0)
-					state.dispatchEvent(new ChangeEvent(...relevantChanges))
-			} else {
-				abortController.abort()
-			}
-		}, {signal: abortController.signal})
-	}
-
-	get value() {
-		const methods = this.#methods
-		if (methods.get) {
-			return methods.get(this.#backend.values[this.#property])
-		} else {
-			return this.#backend.values[this.#property]
-		}
 	}
 
+	get value() { return this.#value }
 	set value(value) {
-		const methods = this.#methods
+		if (this.enqueue("value", this.#value, value)) {
-		if (methods.set) {
+			this.#value = value
-			this.#backend.values[this.#property] = methods.set(value)
-		} else {
-			this.#backend.values[this.#property] = value
 		}
 	}
+
+	emit(...changes) {
+		this.dispatchEvent(new ValueChangeEvent(...changes))
+	}
+}
+
+class ProxiedObservableValue extends ObservableValue {
+	#backend
+	#values
+	#prop
+
+	constructor(backend, prop, {values=backend, ...options}={}) {
+		super(options)
+		this.#backend = backend
+		this.#values = values
+		this.#prop = prop
+
+		const ref = this.ref
+		backend.addEventListener("synchronous", event => {
+			const {property, from, to, ...rest} = event.change
+			if (property == this.#prop) {
+				ref.deref()?.enqueue({
+					property,
+					from: this.get(from),
+					to: this.get(to),
+					...rest
+				})
+			}
+		}, { signal: this.signal })
+	}
+
+	get = identity
+	set = identity
+
+	get value() { return this.get(this.#values[this.#prop]) }
+	set value(value) { this.#values[this.#prop] = this.set(value) }
 }
 
 const attributeObserver = new MutationObserver(mutations => {
@@ -242,7 +273,8 @@ export const component = (name, generator, methods) => {
 	const Element = class extends HTMLElement{
 		constructor() {
 			super()
-			this.state = new State(Object.fromEntries([...this.attributes].map(attribute => [kebabToCamel(attribute.name), attribute.value])))
+			const target = Object.fromEntries([...this.attributes].map(attribute => [kebabToCamel(attribute.name), attribute.value]))
+			this.state = new ObservableObject(target)
 			this.state.addEventListener("change", event => {
 				for (const {property, to: value} of event.changes) {
 					const kebabName = camelToKebab(property)
@@ -251,7 +283,8 @@ export const component = (name, generator, methods) => {
 				}
 			})
 			attributeObserver.observe(this, {attributes: true})
-			this.replaceChildren(generator.call(this, this.state))
+			const content = generator.call(this, this.state)
+			if (content) this.replaceChildren(content)
 		}
 	}
 	if (methods) {
@@ -261,7 +294,7 @@ export const component = (name, generator, methods) => {
 	return Element;
 }
 
-class ComposedState extends SimpleState {
+class ObservableComposition extends ObservableValue {
 	#func
 	#states
 
@@ -276,9 +309,8 @@ class ComposedState extends SimpleState {
 		const ref = new WeakRef(this)
 
 		states.forEach(state => {
-			state.addEventListener("change", event => {
+			state.addEventListener("change", () => {
-				const value = event.final.get("value")
+				ref.deref()?.scheduleUpdate()
-				if (value) ref.deref()?.scheduleUpdate()
 			}, {signal: abortController.signal})
 		})
 
@@ -295,8 +327,8 @@ class ComposedState extends SimpleState {
 					this.#microtaskQueued = false
 					this.update()
 				})
+				this.#microtaskQueued = true
 			}
-			this.#microtaskQueued = true
 		}
 	}
 
@@ -304,17 +336,15 @@ class ComposedState extends SimpleState {
 		const value = this.#func(...this.#states.map(state => state.value))
 		const change = {property: "value", from: this.value, to: value}
 		this.value = value
-		this.dispatchEvent(new ChangeEvent(change))
+		this.emit(change)
 	}
 }
 
-export const compose = func => (...states) => new ComposedState(func, {synchronous: false}, ...states)
+export const compose = func => (...states) => new ObservableComposition(func, {}, ...states)
-
-const eventName = "mutation"
 
 class MutationEvent extends Event {
 	constructor() {
-		super(eventName, {bubbles: true})
+		super("mutation", {bubbles: true})
 	}
 }
 
@@ -324,24 +354,24 @@ const mutationObserver = new MutationObserver(mutations => {
 	}
 })
 
-export class DOMState extends SimpleState {
+export class ObservableElement extends Observable {
-	#target
 	#getValue
 	#equal
 
-	#old
+	#value
 	#changedValue = false
 
-	constructor(target, options) {
+	constructor(target, {get, equal, ...options}={}) {
 		super(options)
-		this.#target = target
+		this[target] = target
-		this.#getValue = options.get ?? (target => target.value)
-		this.#equal = options.equal ?? ((a, b) => a===b)
 
-		this.#old = this.#getValue(target)
+		this.#getValue = get ?? (target => target.value)
+		this.#equal = equal ?? ((a, b) => a===b)
+
+		this.#value = this.#getValue(target)
 
 		const controller = new AbortController()
-		target.addEventListener(eventName, event=>{this.update(event)}, {signal: controller.signal})
+		target.addEventListener("mutation", event => { this.update(event) }, {signal: controller.signal})
 
 		abortRegistry.register(this, controller)
 		mutationObserver.observe(target, {
@@ -352,22 +382,22 @@ export class DOMState extends SimpleState {
 		})
 	}
 
-	get value() { return this.#old }
+	get value() { return this.#value }
 
 	update() {
-		const current = this.#getValue(this.#target)
+		const current = this.#getValue(this[target])
 
-		if (this.#equal(this.#old, current)) return
+		if (this.#equal(this.#value, current)) return
 
-		this.#old = current
+		this.#value = current
 
 		if (this.synchronous) {
-			this.dispatchEvent(new ChangeEvent(["value", current]))
+			this.dispatchEvent(new MultiChangeEvent(["value", current]))
 		} else {
 			if (!this.#changedValue) {
 				queueMicrotask(() => {
 					this.#changedValue = false
-					this.dispatchEvent(new ChangeEvent(["value", this.#changedValue]))
+					this.dispatchEvent(new MultiChangeEvent(["value", this.#changedValue]))
 				})
 				this.#changedValue = current
 			}
@@ -396,5 +426,3 @@ export class MapStorage extends Storage {
 		this.#map.clear()
 	}
 }
-
-export default State

skooma.js

@@ -24,51 +24,6 @@ const insertStyles = (rule, styles) => {
 		rule.setProperty(snakeToCSS(key), value.toString())
 }
 
-const processAttribute = (attribute) => {
-	if (typeof attribute == "string" || typeof attribute == "number")
-		return attribute
-	else if (attribute && "join" in attribute)
-		return attribute.join(" ")
-	else
-		return JSON.stringify(attribute)
-}
-
-const defined = (value, fallback) => typeof value != "undefined" ? value : fallback
-const getCustom = args => args.reduce(
-	(current, argument) => Array.isArray(argument)
-		? defined(getCustom(argument), current)
-		: (argument && typeof argument == "object")
-		? defined(argument.is, current)
-		: current
-	,undefined
-)
-
-export const isObservable = object => object
-	&& typeof object == "object"
-	&& !(object instanceof HTMLElement)
-	&& object.subscribe
-
-const toChild = arg => {
-	if (typeof arg == "string" || typeof arg == "number")
-		return document.createTextNode(arg)
-	else if (arg instanceof HTMLElement)
-		return arg
-	else if (isObservable(arg))
-		return reactiveChild(arg)
-}
-
-const reactiveChild = observable => {
-	let ref
-	const abort = observable.subscribe(value => {
-		if (ref && !ref.deref()) return abort()
-		const child = toChild(value) ?? document.createComment("Placeholder for reactive content")
-		untilDeathDoThemPart(child, observable)
-		if (ref) ref.deref().replaceWith(child)
-		ref = new WeakRef(child)
-	})
-	return ref.deref()
-}
-
 const specialAttributes = {
 	value: {
 		get() { return this.value },
@@ -95,6 +50,47 @@ const specialAttributes = {
 	}
 }
 
+const processAttribute = (attribute) => {
+	if (typeof attribute == "string" || typeof attribute == "number")
+		return attribute
+	else if (attribute && "join" in attribute)
+		return attribute.join(" ")
+	else
+		return JSON.stringify(attribute)
+}
+
+const defined = (value, fallback) => typeof value != "undefined" ? value : fallback
+const getCustom = args => args.reduce(
+	(current, argument) => Array.isArray(argument)
+		? defined(getCustom(argument), current)
+		: (argument && typeof argument == "object")
+		? defined(argument.is, current)
+		: current
+	,undefined
+)
+
+export const isObservable = object => object && object.observable
+
+const toElement = arg => {
+	if (typeof arg == "string" || typeof arg == "number")
+		return document.createTextNode(arg)
+	else if (arg instanceof HTMLElement)
+		return arg
+	else if (isObservable(arg))
+		return reactiveElement(arg)
+}
+
+export const reactiveElement = observable => {
+	const element = toElement(observable.value)
+	untilDeathDoThemPart(element, observable)
+	const ref = new WeakRef(element)
+	observable.addEventListener("change", () => {
+		const next = reactiveElement(observable)
+		ref.deref()?.replaceWith(next)
+	}, {once: true})
+	return element
+}
+
 const setAttribute = (element, attribute, value, cleanupSignal) => {
 	const special = specialAttributes[attribute]
 	if (isObservable(value))
@@ -114,19 +110,20 @@ const setAttribute = (element, attribute, value, cleanupSignal) => {
 
 // (Two-way) binding between an attribute and a state container
 const setReactiveAttribute = (element, attribute, observable) => {
-	untilDeathDoThemPart(element, observable)
 	const multiAbort = new MultiAbortController()
-	let old
+
-	observable.subscribe(value => {
+	observable.addEventListener("change", () => {
-		old = value
 		multiAbort.abort()
-		setAttribute(element, attribute, value, multiAbort.signal)
+		setAttribute(element, attribute, observable.value, multiAbort.signal)
 	})
+	setAttribute(element, attribute, observable.value, multiAbort.signal)
+
 	const special = specialAttributes[attribute]
-	if (special?.hook && observable.set) {
+	if (special.hook) {
+		untilDeathDoThemPart(element, observable)
 		special.hook.call(element, () => {
-			const value = special.get.call(element, attribute)
+			const current = special.get.call(element, attribute)
-			if (value != old) observable.set(value)
+			if (current != observable.value) observable.value = current
 		})
 	}
 }
@@ -137,7 +134,7 @@ const processArgs = (element, ...args) => {
 		if (arg instanceof Array) {
 			processArgs(element, ...arg)
 		} else {
-			const child = toChild(arg)
+			const child = toElement(arg)
 			if (child)
 				element.append(child)
 			else if (arg === undefined || arg == null)
@@ -185,18 +182,23 @@ export const handle = fn => event => { event.preventDefault(); return fn(event)
 export const fragment = (...elements) => {
 	const fragment = new DocumentFragment()
 	for (const element of elements)
-		fragment.append(element)
+		fragment.append(toElement(element))
 	return fragment
 }
 
-// Turns a template literal into document fragment.
+/**
-// Strings are returned as text nodes.
+Turns a template literal into document fragment.
-// Elements are inserted in between.
+Strings are returned as text nodes.
+Elements are inserted in between.
+@param {Array<String>} literals
+@param {Array<any>} items
+@return {DocumentFragment}
+*/
 const textFromTemplate = (literals, items) => {
 	const fragment = new DocumentFragment()
 	for (const key in items) {
 		fragment.append(document.createTextNode(literals[key]))
-		fragment.append(items[key])
+		fragment.append(toElement(items[key]))
 	}
 	fragment.append(document.createTextNode(literals.at(-1)))
 	return fragment