darkwiiplayer/nyooom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reduce Observable to single class

Browse source
This commit is contained in:
Talia 2025-06-24 14:50:10 +02:00
parent dde2aa683e
commit ea108bdbfb
1 changed files with 159 additions and 255 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

428
observable.js
View file

@ -3,15 +3,10 @@ const abortRegistry = new FinalizationRegistry(controller => controller.abort())
/** @param {String} string */ /** @param {String} string */
const camelToKebab = string => string.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b}`).toLowerCase() const camelToKebab = string => string.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b}`).toLowerCase()
/** @param {String} string */ /** @param {String} string */
const kebabToCamel = string => string.replace(/([a-z])-([a-z])/g, (_, a, b) => a+b.toUpperCase()) const kebabToCamel = string => string.replace(/([a-z])-([a-z])/g, (_, a, b) => a+b.toUpperCase())
const identity = object=>object
const target = Symbol("Proxy Target")
/* Custom Event Classes */
/** /**
* @typedef {Object} Change * @typedef {Object} Change
* @property {string} property * @property {string} property
@ -20,6 +15,8 @@ const target = Symbol("Proxy Target")
* @property {boolean} mutation - The change happened inside the value without a new assignment * @property {boolean} mutation - The change happened inside the value without a new assignment
*/ */
/* Custom Event Classes */
/** Event fired for every change before the internal state has been updated that can be canceled. */ /** Event fired for every change before the internal state has been updated that can be canceled. */
export class ChangeEvent extends Event { export class ChangeEvent extends Event {
/** @param {Change} change */ /** @param {Change} change */
@ -30,369 +27,276 @@ export class ChangeEvent extends Event {
} }
/** Event fired for one or more changed values after the internal state has been updated. */ /** Event fired for one or more changed values after the internal state has been updated. */
export class ChangedEvent extends Event { export class ChangesEvent extends Event {
/** @type {any} */
#final
/** @type {any} */
#values
/** @param {Change[]} changes */ /** @param {Change[]} changes */
constructor(...changes) { constructor(...changes) {
super('changed') super('changes')
this.changes = changes this.changes = changes
} }
get values() { /** @return {Map<String,Change[]>} */
if (!this.#values) { get changesByProperty() {
const values = new Map() const properties = new Map()
for (const {property, from, to} of this.changes) {
let list = values.get(property) for (const {property, ...change} of this.changes) {
if (!list) { if (!properties.has(property)) {
list = [from] properties.set(property, [])
values.set(property, list)
}
list.push(to)
}
this.#values = values
}
return this.#values
} }
get final() { properties.get(property).push(change)
if (!this.#final) { }
this.#final = new Map()
for (const [property, list] of this.values) { Object.defineProperty(this, "changesByProperty", {value: properties})
if (list[0] !== list[list.length-1]) { return properties
this.#final.set(property, list[list.length-1])
}
}
}
return this.#final
} }
} }
/**
* @typedef {Object} Options
* @field {boolean} children
* @field {(a: any, b: any) => boolean} same
*/
export class Observable extends EventTarget { export class Observable extends EventTarget {
#synchronous
/** @type Change[]> */ /** @type Change[]> */
#queue #queue = []
#abortController = new AbortController #abortController = new AbortController
#ref = new WeakRef(this) #ref = new WeakRef(this)
get ref() { return this.#ref } get ref() { return this.#ref }
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")
}
this.#synchronous = !!synchronous
abortRegistry.register(this, this.#abortController)
this.proxy = new Proxy(this.constructor.prototype.proxy, {
get: (target, prop) => target.call(this, prop)
})
}
/** @param {Change[]} changes */
emit(...changes) {
this.dispatchEvent(new ChangedEvent(...changes))
}
/**
* @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(any):void} callback
*/
subscribe(prop, callback) {
const controller = new AbortController()
// @ts-ignore
this.addEventListener("change", ({final}) => {
if (final.has(prop)) return callback(final.get(prop))
}, {signal: controller.signal})
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 ChangeEvent(change))) return false
if (!this.synchronous) {
if (!this.#queue) {
this.#queue = []
queueMicrotask(() => {
this.emit(...this.#queue)
this.#queue = undefined
})
}
this.#queue.push(change)
} else {
this.emit(change)
}
return true
}
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} target
* @param {Object} options * @param {Options} options
*/ */
constructor(target={}, {shallow=true, ...options}={}) { constructor(target={}, {children=false, same}={}) {
super(options) super()
Object.defineProperty(this, "observable", {value: true, configurable: false, writable: false})
abortRegistry.register(this, this.#abortController)
Object.defineProperty(this, "target", target) Object.defineProperty(this, "target", target)
this.values = new Proxy(target, { this.values = new Proxy(target, {
/** /**
* @param {Object} target * @param {Object} target
* @param {String} prop * @param {String} property
* @param {any} value * @param {any} value
*/ */
set: (target, prop, value) => { set: (target, property, value) => {
const old = target[prop] const old = target[property]
if (old === value) {
if (same ? !same(old, value) : (old !== value)) {
if (this.enqueue({property, from: old, to: value, mutation: false})) {
if (children) {
if (old instanceof Observable) this.disown(property, old)
if (value instanceof Observable) this.adopt(property, value)
}
target[property] = value
}
}
return true return true
} else {
if (this.enqueue(prop, old, value)) {
if (!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
}
}
}, },
/** /**
* @param {Object} target * @param {Object} target
* @param {String} prop * @param {String} property
*/ */
get: (target, prop) => target[prop], get: (target, property) => target[property],
}) })
} }
/** #microTaskQueued = false
* @param {string} prop /** Queues up a change event
* @param {Object} options * @param {Change} change
*/ */
proxy(prop, {get=undefined, set=undefined, ...options}={}) { enqueue(change) {
const proxy = new ProxiedObservableValue(this, prop, {values: this.values, ...options}) if (!this.dispatchEvent(new ChangeEvent(change))) return false
if (get) proxy.get = get
if (set) proxy.set = set if (!this.#microTaskQueued) {
return proxy this.#microTaskQueued = true
queueMicrotask(() => {
this.#microTaskQueued = false
this.emitQueue()
})
}
this.#queue.push(change)
return true
} }
/** @type Map<Observable, Map<String, Function>> */ /** @param {Change[]} changes */
emit(changes) {
this.dispatchEvent(new ChangesEvent(...changes))
if (this.#signals.size || this.#promises.size) {
for (const change of changes) {
const {property} = change
if (this.#signals.has(property)) {
throw("Fallback signals aren't implemented yet!")
}
if (this.#promises.has(property)) {
const {callback} = this.#promises.get(property)
this.#promises.delete(property)
callback(change)
}
}
}
}
/** Synchronously emits an event with all queued changes. Does nothing when there are no events. */
emitQueue() {
const queue = this.#queue
if (queue.length) {
this.emit(queue)
}
queue.length = 0
}
get collectedSignal() { return this.#abortController.signal }
/** @type {Number} */
get changesQueued() { return this.#queue.length }
/** @type Map<Observable, Map<String, EventListener>> */
#nested = new Map() #nested = new Map()
/** Adopts an observable to be notified of its changes /** Adopts an observable to be notified of its changes
* @param {string} prop * @param {string} property
* @param {Observable} observable * @param {Observable} observable
*/ */
adopt(prop, observable) { adopt(property, observable) {
let handlers = this.#nested.get(observable) let handlers = this.#nested.get(observable)
if (!handlers) { if (!handlers) {
// Actual adoption // Actual adoption
handlers = new Map() handlers = new Map()
this.#nested.set(observable, handlers) this.#nested.set(observable, handlers)
} }
const ref = this.ref
const handler = () => ref.deref()?.emit(prop, observable, observable, {observable: true})
handlers.set(prop, handler) const ref = this.ref
observable.addEventListener("changed", handler, {signal: this.signal})
const handler = () => ref.deref()?.enqueue({property, from: observable, to: observable, mutation: true})
handlers.set(property, handler)
observable.addEventListener("changed", handler, {signal: this.collectedSignal})
} }
/** Undoes the adoption of a nested observable, cancelling the associated event hook /** Undoes the adoption of a nested observable, cancelling the associated event hook
* @param {string} prop * @param {string} property
* @param {Observable} observable * @param {Observable} observable
*/ */
disown(prop, observable) { disown(property, observable) {
const handlers = this.#nested.get(observable) const handlers = this.#nested.get(observable)
const handler = handlers.get(prop) const handler = handlers.get(property)
observable.removeEventListener("changed", handler) observable.removeEventListener("changed", handler)
handlers.delete(prop)
handlers.delete(property)
if (handlers.size == 0) { if (handlers.size == 0) {
this.#nested.delete(observable) this.#nested.delete(observable)
} }
} }
/** @type {Map<String,{promise: Promise, callback: (value: any)=>void}>} */
#promises = new Map()
// Can't be weak refs because promises are often given callbacks and then forgotten
/** @param {String} property */
when(property) {
const cached = this.#promises.get(property)
if (cached) return cached[0]
let callback = undefined
const promise = new Promise(accept => { callback = accept })
this.#promises.set(property, {promise, callback})
return promise
} }
export class ObservableValue extends Observable { /** @type {Map<String,FallbackSignal>} */
#value #signals = new Map()
/** @param {String} property */
signal(property) {
const cached = this.#signals.get(property)
if (cached) return cached
const signal = new FallbackSignal(this, property)
this.#signals.set(property, signal)
return signal
}
}
class FallbackSignal {
/** /**
* @param {any} value * @param {Observable} _observable
* @param {Object} options * @param {String} _property
*/ */
constructor(value, options) { constructor(_observable, _property) {
super(options) throw("Fallback signals aren't implemented yet!")
this.#value = value
}
get value() { return this.#value }
set value(value) {
if (this.enqueue("value", this.#value, value)) {
this.#value = value
} }
} }
/** /** @type {WeakMap<Element, Observable>} */
* @param {(value: any) => any} func const componentInstanceStates = new WeakMap()
*/
transform(func) {
return new Composition(func, {}, this)
}
proxy(methods) {
}
}
class ProxiedObservableValue extends ObservableValue {
#values
#prop
/**
* @param {Observable} backend
* @param {string} prop
*/
constructor(backend, prop, {values=backend, ...options}={}) {
super(options)
this.#values = values
this.#prop = prop
const ref = this.ref
backend.addEventListener("change", 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 => { const attributeObserver = new MutationObserver(mutations => {
for (const {type, target, attributeName: name} of mutations) { for (const {type, target, attributeName: name} of mutations) {
if (type == "attributes" && target instanceof HTMLElement) { if (type == "attributes" && target instanceof HTMLElement) {
const next = target.getAttribute(name) const next = target.getAttribute(name)
const camelName = kebabToCamel(name) const camelName = kebabToCamel(name)
if (String(target.state.values[camelName]) !== next) const state = componentInstanceStates.get(target)
target.state.values[camelName] = next if (String(state.values[camelName]) !== next)
state.values[camelName] = next
} }
} }
}) })
/**
* @param {String} name
* @param {(this: HTMLElement, state: Observable) => Node} generator
* @param {Object<String,Function>} methods
*/
export const component = (name, generator, methods) => { export const component = (name, generator, methods) => {
if (typeof name === "function") { if (typeof name === "function") {
methods = generator methods = generator
generator = name generator = name
name = camelToKebab(generator.name) name = camelToKebab(generator.name)
} }
const jsName = kebabToCamel(name) const jsName = kebabToCamel(name)
component[jsName] = class extends HTMLElement{ component[jsName] = class extends HTMLElement{
/** @type {ObservableObject} */ /** @type {Observable} */
state state
constructor() { constructor() {
super() super()
const target = 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 = new Observable(target)
this.state.addEventListener("changed", event => { this.state.addEventListener("changed", event => {
if (event instanceof ChangedEvent) if (event instanceof ChangesEvent)
for (const {property, to: value} of event.changes) { for (const {property, to: value} of event.changes) {
const kebabName = camelToKebab(property) const kebabName = camelToKebab(property)
if (this.getAttribute(kebabName) !== String(value)) if (this.getAttribute(kebabName) !== String(value))
this.setAttribute(kebabName, value) this.setAttribute(kebabName, value)
} }
}) })
attributeObserver.observe(this, {attributes: true}) attributeObserver.observe(this, {attributes: true})
const content = generator.call(this, this.state) const content = generator.call(this, this.state)
if (content) this.replaceChildren(content) if (content) this.replaceChildren(content)
} }
} }
const element = component[jsName] const element = component[jsName]
if (methods) { if (methods) {
Object.defineProperties(element.prototype, Object.getOwnPropertyDescriptors(methods)) Object.defineProperties(element.prototype, Object.getOwnPropertyDescriptors(methods))
} }
customElements.define(name, element) customElements.define(name, element)
return element; return element;
} }
class Composition extends ObservableValue {
#func
#states
/**
* @param {(...values: any[]) => any} func
* @param {Object} options
* @param {Observable[]} states
*/
constructor(func, options, ...obesrvables) {
super(options)
this.#func = func
this.#states = obesrvables
const abortController = new AbortController()
abortRegistry.register(this, abortController)
const ref = new WeakRef(this)
obesrvables.forEach(state => {
state.addEventListener("changed", () => {
ref.deref()?.update()
}, {signal: abortController.signal})
})
this.update()
}
update() {
const value = this.#func(...this.#states.map(state => state.value))
this.value = value
}
}
/**
* @param {Function} func
*/
export const compose = func =>
/**
* @param {Observable[]} observables
*/
(...observables) =>
new Composition(func, {}, ...observables)