Simplify readme

observable.js

@@ -21,16 +21,16 @@ const target = Symbol("Proxy Target")
  */
 
 /** Event fired for every change before the internal state has been updated that can be canceled. */
-export class SynchronousChangeEvent extends Event {
+export class ChangeEvent extends Event {
 	/** @param {Change} change */
 	constructor(change) {
-		super('synchronous', {cancelable: true})
+		super('change', {cancelable: true})
 		this.change = Object.freeze(change)
 	}
 }
 
 /** Event fired for one or more changed values after the internal state has been updated. */
-export class MultiChangeEvent extends Event {
+export class ChangedEvent extends Event {
 	/** @type {any} */
 	#final
 	/** @type {any} */
@@ -71,14 +71,6 @@ export class MultiChangeEvent extends Event {
 	}
 }
 
-export class ValueChangeEvent extends MultiChangeEvent {
-	get value() {
-		return this.final.value
-	}
-}
-
-/* Observable Classes */
-
 export class Observable extends EventTarget {
 	#synchronous
 	/** @type Change[]> */
@@ -103,6 +95,11 @@ export class Observable extends EventTarget {
 		})
 	}
 
+	/** @param {Change[]} changes */
+	emit(...changes) {
+		this.dispatchEvent(new ChangedEvent(...changes))
+	}
+
 	/**
 	 * @param {string} prop
 	 */
@@ -136,7 +133,7 @@ export class Observable extends EventTarget {
 	 */
 	enqueue(property, from, to, mutation=false) {
 		const change = {property, from, to, mutation}
-		if (!this.dispatchEvent(new SynchronousChangeEvent(change))) return false
+		if (!this.dispatchEvent(new ChangeEvent(change))) return false
 		if (!this.synchronous) {
 			if (!this.#queue) {
 				this.#queue = []
@@ -152,17 +149,13 @@ export class Observable extends EventTarget {
 		return true
 	}
 
-	/** @param {any[]} _args */
-	emit(..._args) {
-		throw new TypeError(`${this.constructor.name} did not define an 'emit' method`)
-	}
-
 	get signal() { return this.#abortController.signal }
 	get synchronous() { return this.#synchronous }
+
+	get changesQueued() { return Boolean(this.#queue) }
 }
 
 export class ObservableObject extends Observable {
-
 	/**
 	 * @param {Object} target
 	 * @param {Object} options
@@ -212,15 +205,10 @@ export class ObservableObject extends Observable {
 		return proxy
 	}
 
-	/** @param {Change[]} changes */
-	emit(...changes) {
-		this.dispatchEvent(new MultiChangeEvent(...changes))
-	}
-
 	/** @type Map<Observable, Map<String, Function>> */
 	#nested = new Map()
 
-	/** Adopts an obsercable to be notified of its changes
+	/** Adopts an observable to be notified of its changes
 	 * @param {string} prop
 	 * @param {Observable} observable
 	 */
@@ -272,20 +260,9 @@ export class ObservableValue extends Observable {
 		}
 	}
 
-	/**
-	 * @param {string} prop
-	 * @param {function(any):void} callback
-	 */
-	subscribe(prop, callback) {
-		// @ts-ignore
-		if (typeof(prop) == "function") [prop, callback] = ["value", prop]
-
-		this.constructor.prototype.subscribe.call(this, prop, callback)
-	}
-
 	/** @param {Change[]} changes */
 	emit(...changes) {
-		this.dispatchEvent(new ValueChangeEvent(...changes))
+		this.dispatchEvent(new ChangedEvent(...changes))
 	}
 }
 
@@ -325,7 +302,7 @@ class ProxiedObservableValue extends ObservableValue {
 
 const attributeObserver = new MutationObserver(mutations => {
 	for (const {type, target, attributeName: name} of mutations) {
-		if (type == "attributes") {
+		if (type == "attributes" && target instanceof HTMLElement) {
 			const next = target.getAttribute(name)
 			const camelName = kebabToCamel(name)
 			if (String(target.state.values[camelName]) !== next)
@@ -340,17 +317,21 @@ export const component = (name, generator, methods) => {
 		generator = name
 		name = camelToKebab(generator.name)
 	}
-	const Element = class extends HTMLElement{
+	component[kebabToCamel(name)] = class extends HTMLElement{
+		/** @type {ObservableObject} */
+		state
+
 		constructor() {
 			super()
 			const target = Object.fromEntries([...this.attributes].map(attribute => [kebabToCamel(attribute.name), attribute.value]))
 			this.state = new ObservableObject(target)
-			this.state.addEventListener("change", event => {
+			this.state.addEventListener("changed", event => {
-				for (const {property, to: value} of event.changes) {
+				if (event instanceof ChangedEvent)
-					const kebabName = camelToKebab(property)
+					for (const {property, to: value} of event.changes) {
-					if (this.getAttribute(kebabName) !== String(value))
+						const kebabName = camelToKebab(property)
-						this.setAttribute(kebabName, value)
+						if (this.getAttribute(kebabName) !== String(value))
-				}
+							this.setAttribute(kebabName, value)
+					}
 			})
 			attributeObserver.observe(this, {attributes: true})
 			const content = generator.call(this, this.state)
@@ -364,21 +345,26 @@ export const component = (name, generator, methods) => {
 	return Element;
 }
 
-class ObservableComposition extends ObservableValue {
+class Composition extends ObservableValue {
 	#func
 	#states
 
-	constructor(func, options, ...states) {
+	/**
+	 * @param {(...values: any[]) => any} func
+	 * @param {Object} options
+	 * @param {Observable[]} states
+	 */
+	constructor(func, options, ...obesrvables) {
 		super(options)
 
 		this.#func = func
-		this.#states = states
+		this.#states = obesrvables
 
 		const abortController = new AbortController()
 		abortRegistry.register(this, abortController)
 		const ref = new WeakRef(this)
 
-		states.forEach(state => {
+		obesrvables.forEach(state => {
 			state.addEventListener("change", () => {
 				ref.deref()?.scheduleUpdate()
 			}, {signal: abortController.signal})
@@ -387,7 +373,7 @@ class ObservableComposition extends ObservableValue {
 		this.update()
 	}
 
-	#microtaskQueued
+	#microtaskQueued = false
 	scheduleUpdate() {
 		if (this.synchronous) {
 			this.update()
@@ -410,106 +396,12 @@ class ObservableComposition extends ObservableValue {
 	}
 }
 
-export const compose = func => (...states) => new ObservableComposition(func, {}, ...states)
+/**
-
+ * @param {Function} func
-class MutationEvent extends Event {
+ */
-	constructor() {
+export const compose = func =>
-		super("mutation", {bubbles: true})
-	}
-}
-
-const mutationObserver = new MutationObserver(mutations => {
-	for (const mutation of mutations) {
-		mutation.target.dispatchEvent(new MutationEvent())
-	}
-})
-
-export class ObservableElement extends Observable {
-	#getValue
-	#equal
-
-	#value
-	#changedValue = false
-
 	/**
-	 * @param {HTMLElement} target
+	 * @param {Observable[]} observables
 	 */
-	constructor(target, {get=undefined, equal=undefined, ...options}={}) {
+	(...observables) =>
-		// @ts-ignore
+		new Composition(func, {}, ...observables)
-		super(options)
-		Object.defineProperty(this, "target", {value: target, configurable: false, writable: false})
-
-		this.#getValue = get ?? (target => target.value)
-		this.#equal = equal ?? ((a, b) => a===b)
-
-		this.#value = this.#getValue(target)
-
-		const controller = new AbortController()
-		target.addEventListener("mutation", event => { this.update(event) }, {signal: controller.signal})
-
-		abortRegistry.register(this, controller)
-		mutationObserver.observe(target, {
-			attributes: true,
-			childList: true,
-			characterData: true,
-			subtree: true,
-		})
-	}
-
-	get value() { return this.#value }
-
-	update() {
-		const current = this.#getValue(this.target)
-
-		if (this.#equal(this.#value, current)) return
-
-		this.#value = current
-
-		if (this.synchronous) {
-			this.dispatchEvent(new ValueChangeEvent(["value", current]))
-		} else {
-			if (!this.#changedValue) {
-				queueMicrotask(() => {
-					this.#changedValue = false
-					this.dispatchEvent(new ValueChangeEvent(["value", this.#changedValue]))
-				})
-				this.#changedValue = current
-			}
-		}
-	}
-}
-
-export class MapStorage extends Storage {
-	#map = new Map()
-	/**
-	 * @param {number} index
-	 * @return {string}
-	 */
-	key(index) {
-		return [...this.#map.keys()][index]
-	}
-	/**
-	 * @param {string} keyName
-	 * @return {any}
-	 */
-	getItem(keyName) {
-		if (this.#map.has(keyName))
-			return this.#map.get(keyName)
-		else
-			return null
-	}
-	/**
-	 * @param {string} keyName
-	 * @param {any} keyValue
-	 */
-	setItem(keyName, keyValue) {
-		this.#map.set(keyName, String(keyValue))
-	}
-	/** @param {string} keyName */
-	removeItem(keyName) {
-		this.#map.delete(keyName)
-	}
-	clear() {
-		this.#map.clear()
-	}
-}

readme.md

@@ -1,44 +1,10 @@
 # Nyooom
 
 ```js
-import {html} from "nyooom/render.js"
+import {html} from "nyooom/render"
+import {ObservableValue} from "nyooom/observable"
 
-document.body.append(
+const text = new ObservableValue("Nyooom is cool")
-	html.p(
-		"This is a paragraph with some text ",
-		html.b("and some bold text "),
-		html.img({
-			alt: "And an image",
-			href: "http://picsum.photos/200/200"
-		})
-	)
-)
-```
-
-## Goals
-
-1. `nyooom/render` should stay small enough to use it as just a helper library
-   to generate some dom nodes in any sort of web environment.
-1. `nyooom/observable` should likewise function as a standalone reactive state
-   management library to be used with or without a framework
-1. A developer who doesn't use nyooom should be able to read any code using it
-   and piece together what it does based on structure and function names
-1. Nyooom should be easy to gradually introduce into an application that uses
-   a different framework or no framework at all
-1. Nyooom should make it easy to gradually replace it with a different solution
-   should it prove unfit for a project it is being used in
-1. The library should be hackable so that developers can tweak it for different
-   environments like SSR or frameworks
-
-## Warning
-
-**This branch is in the process of being aggressively refactored and improved.
-This readme file may not reflect the latest state of the interface.**
-
-## Overview
-
-```js
-const text = new State({value: "Nyooom is cool"})
 setTimeout(() => {text.value = "Nyooom is awesome!"}, 1e5)
 
 document.body.append(html.div(
@@ -48,6 +14,21 @@ document.body.append(html.div(
 ))
 ```
 
+## Goals
+
+> Arrakis teaches the attitude of the knife - chopping off what's incomplete and
+> saying: "Now, it's complete because it's ended here."
+> 
+> — Frank Herbert, Dune
+
+Nyooom aims to offer as much convenienve as possible within the following
+constraints:
+
+1. Small, independent modules that can also work on their own
+1. Code should be easy to figure out by someone who doesn't actiely use nyooom
+1. Easy to gradually introduce and remove rather than forcing big re-writes
+1. Flexible, hackable and easy to audit
+
 ## Importmaps
 
 The included file `importmaps.html` can be used as a starting point for

render.js

@@ -220,9 +220,9 @@ export class DomRenderer extends Renderer {
 				element.dispatchEvent(new AfterReplaceEvent(next))
 				ref = new WeakRef(next)
 			}
-			observable.addEventListener("change", handleChange, {once: true})
+			observable.addEventListener("changed", handleChange, {once: true})
 		}
-		observable.addEventListener("change", handleChange, {once: true})
+		observable.addEventListener("changed", handleChange, {once: true})
 
 		return element
 	}
@@ -261,7 +261,7 @@ export class DomRenderer extends Renderer {
 	static setReactiveAttribute(element, attribute, observable) {
 		const multiAbort = new MultiAbortController()
 
-		observable.addEventListener("change", () => {
+		observable.addEventListener("changed", () => {
 			multiAbort.abort()
 			if (element.dispatchEvent(new AttributeEvent(attribute, element.getAttribute(attribute), observable.value)))
 				this.setAttribute(element, attribute, observable.value, multiAbort.signal)