Add basic editorconfig

.editorconfig

@@ -0,0 +1,2 @@
+[*]
+indent_style = tab

observable.js

@@ -12,17 +12,31 @@ const target = Symbol("Proxy Target")
 
 /* Custom Event Classes */
 
+/**
+ * @typedef {Object} Change
+ * @property {string} property
+ * @property {any} from
+ * @property {any} to
+ * @property {boolean} mutation - The change happened inside the value without a new assignment
+ */
+
+/** Event fired for every change before the internal state has been updated that can be canceled. */
 export class SynchronousChangeEvent extends Event {
+	/** @param {Change} change */
 	constructor(change) {
 		super('synchronous', {cancelable: true})
-		this.change = change
+		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 {
+	/** @type {any} */
 	#final
+	/** @type {any} */
 	#values
 
+	/** @param {Change[]} changes */
 	constructor(...changes) {
 		super('change')
 		this.changes = changes
@@ -67,17 +81,17 @@ export class ValueChangeEvent extends MultiChangeEvent {
 
 export class Observable extends EventTarget {
 	#synchronous
-	/** @type Array<{name:string, from, to}> */
+	/** @type Change[]> */
 	#queue
 	#abortController = new AbortController
 
 	#ref = new WeakRef(this)
 	get ref() { return this.#ref }
 
-	observable = true
-
-	constructor({synchronous}={}) {
+	constructor({synchronous=false}={}) {
 		super()
+		Object.defineProperty(this, "observable", {value: true, configurable: false, writable: false})
+
 		if (this.constructor === Observable) {
 			throw new TypeError("Cannot instantiate abstract class")
 		}
@@ -89,24 +103,37 @@ export class Observable extends EventTarget {
 		})
 	}
 
-	proxy(prop, {get, set, ...options}={}) {
+	/**
+	 * @param {string} prop
+	 */
+	proxy(prop, {get=undefined, set=undefined, ...options}={}) {
 		const proxy = new ProxiedObservableValue(this, prop, options)
 		if (get) proxy.get = get
 		if (set) proxy.set = set
 		return proxy
 	}
 
+	/**
+	 * @param {string} prop
+	 * @param {function} callback
+	 */
 	subscribe(prop, callback) {
-		if (!callback) return this.subscribe("value", prop)
-
 		const controller = new AbortController()
+		// @ts-ignore
 		this.addEventListener("change", ({final}) => {
 			if (final.has(prop)) return callback(final.get(prop))
 		}, {signal: controller.signal})
-		callback(this.value)
+
+		callback(this[prop])
 		return () => controller.abort()
 	}
 
+	/** Queues up a change event
+	 * @param {string} property - Name of the changed property
+	 * @param {any} from
+	 * @param {any} to
+	 * @param {boolean} mutation - whether a change was an assignment or a mutation (nested change)
+	 */
 	enqueue(property, from, to, mutation=false) {
 		const change = {property, from, to, mutation}
 		if (!this.dispatchEvent(new SynchronousChangeEvent(change))) return false
@@ -125,7 +152,8 @@ export class Observable extends EventTarget {
 		return true
 	}
 
-	emit() {
+	/** @param {any[]} _args */
+	emit(..._args) {
 		throw new TypeError(`${this.constructor.name} did not define an 'emit' method`)
 	}
 
@@ -216,6 +244,14 @@ export class ObservableValue extends Observable {
 		}
 	}
 
+	/**
+	 * @param {function(any):undefined} callback
+	 * @param {function(any):undefined} _callback
+	 */
+	subscribe(callback, _callback) {
+		this.constructor.prototype.subscribe.call(this, "value", callback)
+	}
+
 	emit(...changes) {
 		this.dispatchEvent(new ValueChangeEvent(...changes))
 	}
@@ -361,9 +397,13 @@ export class ObservableElement extends Observable {
 	#value
 	#changedValue = false
 
-	constructor(target, {get, equal, ...options}={}) {
+	/**
+	 * @param {HTMLElement} target
+	 */
+	constructor(target, {get=undefined, equal=undefined, ...options}={}) {
+		// @ts-ignore
 		super(options)
-		this[target] = target
+		Object.defineProperty(this, "target", {value: target, configurable: false, writable: false})
 
 		this.#getValue = get ?? (target => target.value)
 		this.#equal = equal ?? ((a, b) => a===b)
@@ -385,19 +425,19 @@ export class ObservableElement extends Observable {
 	get value() { return this.#value }
 
 	update() {
-		const current = this.#getValue(this[target])
+		const current = this.#getValue(this.target)
 
 		if (this.#equal(this.#value, current)) return
 
 		this.#value = current
 
 		if (this.synchronous) {
-			this.dispatchEvent(new MultiChangeEvent(["value", current]))
+			this.dispatchEvent(new ValueChangeEvent(["value", current]))
 		} else {
 			if (!this.#changedValue) {
 				queueMicrotask(() => {
 					this.#changedValue = false
-					this.dispatchEvent(new MultiChangeEvent(["value", this.#changedValue]))
+					this.dispatchEvent(new ValueChangeEvent(["value", this.#changedValue]))
 				})
 				this.#changedValue = current
 			}
@@ -407,18 +447,31 @@ export class ObservableElement extends Observable {
 
 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)
 	}