.editorconfig

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

observable.js

@@ -12,31 +12,17 @@ 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 = Object.freeze(change)
+		this.change = 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
@@ -81,17 +67,17 @@ export class ValueChangeEvent extends MultiChangeEvent {
 
 export class Observable extends EventTarget {
 	#synchronous
-	/** @type Change[]> */
+	/** @type Array<{name:string, from, to}> */
 	#queue
 	#abortController = new AbortController
 
 	#ref = new WeakRef(this)
 	get ref() { return this.#ref }
 
-	constructor({synchronous=false}={}) {
+	observable = true
-		super()
-		Object.defineProperty(this, "observable", {value: true, configurable: false, writable: false})
 
+	constructor({synchronous}={}) {
+		super()
 		if (this.constructor === Observable) {
 			throw new TypeError("Cannot instantiate abstract class")
 		}
@@ -103,37 +89,24 @@ 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
@@ -152,8 +125,7 @@ export class Observable extends EventTarget {
 		return true
 	}
 
-	/** @param {any[]} _args */
+	emit() {
-	emit(..._args) {
 		throw new TypeError(`${this.constructor.name} did not define an 'emit' method`)
 	}
 
@@ -244,14 +216,6 @@ 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))
 	}
@@ -397,13 +361,9 @@ 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)
-		Object.defineProperty(this, "target", {value: target, configurable: false, writable: false})
+		this[target] = target
 
 		this.#getValue = get ?? (target => target.value)
 		this.#equal = equal ?? ((a, b) => a===b)
@@ -425,19 +385,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 ValueChangeEvent(["value", current]))
+			this.dispatchEvent(new MultiChangeEvent(["value", current]))
 		} else {
 			if (!this.#changedValue) {
 				queueMicrotask(() => {
 					this.#changedValue = false
-					this.dispatchEvent(new ValueChangeEvent(["value", this.#changedValue]))
+					this.dispatchEvent(new MultiChangeEvent(["value", this.#changedValue]))
 				})
 				this.#changedValue = current
 			}
@@ -447,31 +407,18 @@ 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)
 	}