diff --git a/state.js b/state.js index 891e4d0..448fbd4 100644 --- a/state.js +++ b/state.js @@ -85,6 +85,10 @@ export class State extends EventTarget { } } + forward(property="value") { + return new ForwardState(this, property) + } + set(prop, value) { this.#target[prop] = value } @@ -94,6 +98,32 @@ export class State extends EventTarget { } } +export class ForwardState extends EventTarget { + #backend + #property + + constructor(backend, property) { + super() + this.#backend = backend + this.#property = property + const ref = new WeakRef(this) + const abortController = new AbortController() + backend.addEventListener("change", event => { + const state = ref.deref() + if (state) { + const relevantChanges = event.changes.filter(([name]) => name === property) + if (relevantChanges.length > 0) + state.dispatchEvent(new ChangeEvent(relevantChanges)) + } else { + abortController.abort() + } + }, {signal: abortController.signal}) + } + + get value() { return this.#backend.proxy[this.#property] } + set value(value) { this.#backend.proxy[this.#property] = value } +} + export class StorageChangeEvent extends Event { constructor(storage, key, value, targetState) { super("storagechange")