observable.js

@@ -38,7 +38,7 @@ export class ChangedEvent extends Event {
 
 	/** @param {Change[]} changes */
 	constructor(...changes) {
-		super('changed')
+		super('change')
 		this.changes = changes
 	}
 
@@ -134,7 +134,6 @@ export class Observable extends EventTarget {
 	enqueue(property, from, to, mutation=false) {
 		const change = {property, from, to, mutation}
 		if (!this.dispatchEvent(new ChangeEvent(change))) return false
-
 		if (!this.synchronous) {
 			if (!this.#queue) {
 				this.#queue = []
@@ -261,14 +260,9 @@ export class ObservableValue extends Observable {
 		}
 	}
 
-	/**
-	 * @param {(value: any) => any} func
-	 */
-	compose(func) {
-		return new Composition(func, {}, this)
-	}
-
-	proxy(methods) {
+	/** @param {Change[]} changes */
+	emit(...changes) {
+		this.dispatchEvent(new ChangedEvent(...changes))
 	}
 }
 
@@ -371,17 +365,34 @@ class Composition extends ObservableValue {
 		const ref = new WeakRef(this)
 
 		obesrvables.forEach(state => {
-			state.addEventListener("changed", () => {
-				ref.deref()?.update()
+			state.addEventListener("change", () => {
+				ref.deref()?.scheduleUpdate()
 			}, {signal: abortController.signal})
 		})
 
 		this.update()
 	}
 
+	#microtaskQueued = false
+	scheduleUpdate() {
+		if (this.synchronous) {
+			this.update()
+		} else {
+			if (!this.#microtaskQueued) {
+				queueMicrotask(() => {
+					this.#microtaskQueued = false
+					this.update()
+				})
+				this.#microtaskQueued = true
+			}
+		}
+	}
+
 	update() {
 		const value = this.#func(...this.#states.map(state => state.value))
+		const change = {property: "value", from: this.value, to: value}
 		this.value = value
+		this.emit(change)
 	}
 }
 

render.js

@@ -204,7 +204,7 @@ export class DomRenderer extends Renderer {
 		if (observable.value instanceof DocumentFragment) {
 			throw "Failed to create reactive element: Document fragments cannot be replaced dynamically"
 		}
-		const element = this.toElement(observable.value) || document.createComment("Reactive element Placeholder")
+		const element = this.toElement(observable.value)
 		untilDeathDoThemPart(element, observable)
 		let ref = new WeakRef(element)
 
@@ -217,7 +217,6 @@ export class DomRenderer extends Renderer {
 			if (element?.dispatchEvent(new BeforeReplaceEvent(next))) {
 				element.replaceWith(next)
 				next.dispatchEvent(new ReplacedEvent(element))
-				untilDeathDoThemPart(next, observable)
 				element.dispatchEvent(new AfterReplaceEvent(next))
 				ref = new WeakRef(next)
 			}