import {Utils} from "../Utils"; /** * Various static utils */ export class Stores { public static Chronic(millis: number, asLong: () => boolean = undefined): Store { const source = new UIEventSource(undefined); function run() { source.setData(new Date()); if (asLong === undefined || asLong()) { window.setTimeout(run, millis); } } run(); return source; } public static FromPromiseWithErr(promise: Promise): Store<{ success: T } | { error: any }> { return UIEventSource.FromPromiseWithErr(promise); } /** * Converts a promise into a UIVentsource, sets the UIEVentSource when the result is calculated. * If the promise fails, the value will stay undefined * @param promise * @constructor */ public static FromPromise(promise: Promise): Store { const src = new UIEventSource(undefined) promise?.then(d => src.setData(d)) promise?.catch(err => console.warn("Promise failed:", err)) return src } public static flatten(source: Store>, possibleSources?: Store[]): Store { return UIEventSource.flatten(source, possibleSources); } /** * Given a UIEVentSource with a list, returns a new UIEventSource which is only updated if the _contents_ of the list are different. * E.g. * const src = new UIEventSource([1,2,3]) * const stable = UIEventSource.ListStabilized(src) * src.addCallback(_ => console.log("src pinged")) * stable.addCallback(_ => console.log("stable pinged)) * src.setDate([...src.data]) * * This will only trigger 'src pinged' * * @param src * @constructor */ public static ListStabilized(src: Store): Store { const stable = new UIEventSource(undefined) src.addCallbackAndRun(list => { if (list === undefined) { stable.setData(undefined) return; } const oldList = stable.data if (oldList === list) { return; } if(oldList == list){ return; } if (oldList === undefined || oldList.length !== list.length) { stable.setData(list); return; } for (let i = 0; i < list.length; i++) { if (oldList[i] !== list[i]) { stable.setData(list); return; } } // No actual changes, so we don't do anything return; }) return stable } } export abstract class Store { abstract readonly data: T; /** * OPtional value giving a title to the UIEventSource, mainly used for debugging */ public readonly tag: string | undefined; constructor(tag: string = undefined) { this.tag = tag; if ((tag === undefined || tag === "")) { let createStack = Utils.runningFromConsole; if (!Utils.runningFromConsole) { createStack = window.location.hostname === "127.0.0.1" } if (createStack) { const callstack = new Error().stack.split("\n") this.tag = callstack[1] } } } abstract map(f: ((t: T) => J)): Store abstract map(f: ((t: T) => J), extraStoresToWatch: Store[]): Store /** * Add a callback function which will run on future data changes */ abstract addCallback(callback: (data: T) => void): (() => void); /** * Adds a callback function, which will be run immediately. * Only triggers if the current data is defined */ abstract addCallbackAndRunD(callback: (data: T) => void): (() => void); /** * Add a callback function which will run on future data changes * Only triggers if the data is defined */ abstract addCallbackD(callback: (data: T) => void): (() => void); /** * Adds a callback function, which will be run immediately. * Only triggers if the current data is defined */ abstract addCallbackAndRun(callback: (data: T) => void): (() => void); public withEqualityStabilized(comparator: (t: T | undefined, t1: T | undefined) => boolean): Store { let oldValue = undefined; return this.map(v => { if (v == oldValue) { return oldValue } if (comparator(oldValue, v)) { return oldValue } oldValue = v; return v; }) } /** * Monadic bind function * * // simple test with bound and immutablestores * const src = new UIEventSource(3) * const bound = src.bind(i => new ImmutableStore(i * 2)) * let lastValue = undefined; * bound.addCallbackAndRun(v => lastValue = v); * lastValue // => 6 * src.setData(21) * lastValue // => 42 * * // simple test with bind over a mapped value * const src = new UIEventSource(0) * const srcs : UIEventSource[] = [new UIEventSource("a"), new UIEventSource("b")] * const bound = src.map(i => -i).bind(i => srcs[i]) * let lastValue : string = undefined; * bound.addCallbackAndRun(v => lastValue = v); * lastValue // => "a" * src.setData(-1) * lastValue // => "b" * srcs[1].setData("xyz") * lastValue // => "xyz" * srcs[0].setData("def") * lastValue // => "xyz" * src.setData(0) * lastValue // => "def" * * * * // advanced test with bound * const src = new UIEventSource(0) * const srcs : UIEventSource[] = [new UIEventSource("a"), new UIEventSource("b")] * const bound = src.bind(i => srcs[i]) * let lastValue : string = undefined; * bound.addCallbackAndRun(v => lastValue = v); * lastValue // => "a" * src.setData(1) * lastValue // => "b" * srcs[1].setData("xyz") * lastValue // => "xyz" * srcs[0].setData("def") * lastValue // => "xyz" * src.setData(0) * lastValue // => "def" */ public bind(f: ((t: T) => Store)): Store { const mapped = this.map(f) const sink = new UIEventSource(undefined) const seenEventSources = new Set>(); mapped.addCallbackAndRun(newEventSource => { if (newEventSource === null) { sink.setData(null) } else if (newEventSource === undefined) { sink.setData(undefined) } else if (!seenEventSources.has(newEventSource)) { seenEventSources.add(newEventSource) newEventSource.addCallbackAndRun(resultData => { if (mapped.data === newEventSource) { sink.setData(resultData); } }) } else { // Already seen, so we don't have to add a callback, just update the value sink.setData(newEventSource.data) } }) return sink; } public stabilized(millisToStabilize): Store { if (Utils.runningFromConsole) { return this; } const newSource = new UIEventSource(this.data); this.addCallback(latestData => { window.setTimeout(() => { if (this.data == latestData) { // compare by reference newSource.setData(latestData); } }, millisToStabilize) }); return newSource; } public AsPromise(condition?: ((t: T) => boolean)): Promise { const self = this; condition = condition ?? (t => t !== undefined) return new Promise((resolve) => { if (condition(self.data)) { resolve(self.data) } else { self.addCallbackD(data => { resolve(data) return true; // return true to unregister as we only need to be called once }) } }) } } export class ImmutableStore extends Store { public readonly data: T; private static readonly pass: (() => void) = () => { } constructor(data: T) { super(); this.data = data; } addCallback(callback: (data: T) => void): (() => void) { // pass: data will never change return ImmutableStore.pass } addCallbackAndRun(callback: (data: T) => void): (() => void) { callback(this.data) // no callback registry: data will never change return ImmutableStore.pass } addCallbackAndRunD(callback: (data: T) => void): (() => void) { if (this.data !== undefined) { callback(this.data) } // no callback registry: data will never change return ImmutableStore.pass } addCallbackD(callback: (data: T) => void): (() => void) { // pass: data will never change return ImmutableStore.pass } map(f: (t: T) => J, extraStores: Store[] = undefined): ImmutableStore { if(extraStores?.length > 0){ return new MappedStore(this, f, extraStores, undefined, f(this.data)) } return new ImmutableStore(f(this.data)); } } /** * Keeps track of the callback functions */ class ListenerTracker { private readonly _callbacks: ((t: T) => (boolean | void | any)) [] = []; public pingCount = 0; /** * Adds a callback which can be called; a function to unregister is returned */ public addCallback(callback: (t: T) => (boolean | void | any)): (() => void) { if (callback === console.log) { // This ^^^ actually works! throw "Don't add console.log directly as a callback - you'll won't be able to find it afterwards. Wrap it in a lambda instead." } this._callbacks.push(callback); // Give back an unregister-function! return () => { const index = this._callbacks.indexOf(callback) if (index >= 0) { this._callbacks.splice(index, 1) } } } /** * Call all the callbacks. * Returns the number of registered callbacks */ public ping(data: T): number { this.pingCount ++; let toDelete = undefined let startTime = new Date().getTime() / 1000; for (const callback of this._callbacks) { if (callback(data) === true) { // This callback wants to be deleted // Note: it has to return precisely true in order to avoid accidental deletions if (toDelete === undefined) { toDelete = [callback] } else { toDelete.push(callback) } } } let endTime = new Date().getTime() / 1000 if ((endTime - startTime) > 500) { console.trace("Warning: a ping took more then 500ms; this is probably a performance issue") } if (toDelete !== undefined) { for (const toDeleteElement of toDelete) { this._callbacks.splice(this._callbacks.indexOf(toDeleteElement), 1) } } return this._callbacks.length } length() { return this._callbacks.length } } /** * The mapped store is a helper type which does the mapping of a function. * It'll fuse */ class MappedStore extends Store { private _upstream: Store; private _upstreamCallbackHandler: ListenerTracker | undefined; private _upstreamPingCount: number = -1; private _unregisterFromUpstream: (() => void) private _f: (t: TIn) => T; private readonly _extraStores: Store[] | undefined; private _unregisterFromExtraStores: (() => void)[] | undefined private _callbacks: ListenerTracker = new ListenerTracker() private static readonly pass: () => {} constructor(upstream: Store, f: (t: TIn) => T, extraStores: Store[], upstreamListenerHandler: ListenerTracker | undefined, initialState: T) { super(); this._upstream = upstream; this._upstreamCallbackHandler = upstreamListenerHandler this._f = f; this._data = initialState this._upstreamPingCount = upstreamListenerHandler?.pingCount this._extraStores = extraStores; this.registerCallbacksToUpstream() } private _data: T; private _callbacksAreRegistered = false /** * Gets the current data from the store * * const src = new UIEventSource(21) * const mapped = src.map(i => i * 2) * src.setData(3) * mapped.data // => 6 * */ get data(): T { if (!this._callbacksAreRegistered) { // Callbacks are not registered, so we haven't been listening for updates from the upstream which might have changed if(this._upstreamCallbackHandler?.pingCount != this._upstreamPingCount){ // Upstream has pinged - let's update our data first this._data = this._f(this._upstream.data) } return this._data } return this._data } map(f: (t: T) => J, extraStores: (Store)[] = undefined): Store { let stores: Store[] = undefined if (extraStores?.length > 0 || this._extraStores?.length > 0) { stores = [] } if (extraStores?.length > 0) { stores.push(...extraStores) } if (this._extraStores?.length > 0) { this._extraStores?.forEach(store => { if (stores.indexOf(store) < 0) { stores.push(store) } }) } return new MappedStore( this, f, // we could fuse the functions here (e.g. data => f(this._f(data), but this might result in _f being calculated multiple times, breaking things stores, this._callbacks, f(this.data) ); } private unregisterFromUpstream() { console.log("Unregistering callbacks for", this.tag) this._callbacksAreRegistered = false; this._unregisterFromUpstream() this._unregisterFromExtraStores?.forEach(unr => unr()) } private registerCallbacksToUpstream() { const self = this this._unregisterFromUpstream = this._upstream.addCallback( _ => self.update() ) this._unregisterFromExtraStores = this._extraStores?.map(store => store?.addCallback(_ => self.update()) ) this._callbacksAreRegistered = true; } private update(): void { const newData = this._f(this._upstream.data) this._upstreamPingCount = this._upstreamCallbackHandler?.pingCount if (this._data == newData) { return; } this._data = newData this._callbacks.ping(this._data) } addCallback(callback: (data: T) => (any | boolean | void)): (() => void) { if (!this._callbacksAreRegistered) { // This is the first callback that is added // We register this 'map' to the upstream object and all the streams this.registerCallbacksToUpstream() } const unregister = this._callbacks.addCallback(callback) return () => { unregister() if (this._callbacks.length() == 0) { this.unregisterFromUpstream() } } } addCallbackAndRun(callback: (data: T) => (any | boolean | void)): (() => void) { const unregister = this.addCallback(callback) const doRemove = callback(this.data) if (doRemove === true) { unregister() return MappedStore.pass } return unregister } addCallbackAndRunD(callback: (data: T) => (any | boolean | void)): (() => void) { return this.addCallbackAndRun(data => { if (data !== undefined) { return callback(data) } }) } addCallbackD(callback: (data: T) => (any | boolean | void)): (() => void) { return this.addCallback(data => { if (data !== undefined) { return callback(data) } }) } } export class UIEventSource extends Store { public data: T; _callbacks: ListenerTracker = new ListenerTracker() private static readonly pass: () => {} constructor(data: T, tag: string = "") { super(tag); this.data = data; } public static flatten(source: Store>, possibleSources?: Store[]): UIEventSource { const sink = new UIEventSource(source.data?.data); source.addCallback((latestData) => { sink.setData(latestData?.data); latestData.addCallback(data => { if (source.data !== latestData) { return true; } sink.setData(data) }) }); for (const possibleSource of possibleSources ?? []) { possibleSource?.addCallback(() => { sink.setData(source.data?.data); }) } return sink; } /** * Converts a promise into a UIVentsource, sets the UIEVentSource when the result is calculated. * If the promise fails, the value will stay undefined, but 'onError' will be called */ public static FromPromise(promise: Promise, onError: ((e: any) => void) = undefined): UIEventSource { const src = new UIEventSource(undefined) promise?.then(d => src.setData(d)) promise?.catch(err => { if (onError !== undefined) { onError(err) } else { console.warn("Promise failed:", err); } }) return src } /** * Converts a promise into a UIVentsource, sets the UIEVentSource when the result is calculated. * If the promise fails, the value will stay undefined * @param promise * @constructor */ public static FromPromiseWithErr(promise: Promise): UIEventSource<{ success: T } | { error: any }> { const src = new UIEventSource<{ success: T } | { error: any }>(undefined) promise?.then(d => src.setData({success: d})) promise?.catch(err => src.setData({error: err})) return src } public static asFloat(source: UIEventSource): UIEventSource { return source.sync( (str) => { let parsed = parseFloat(str); return isNaN(parsed) ? undefined : parsed; }, [], (fl) => { if (fl === undefined || isNaN(fl)) { return undefined; } return ("" + fl).substr(0, 8); } ) } /** * Adds a callback * * If the result of the callback is 'true', the callback is considered finished and will be removed again * @param callback */ public addCallback(callback: ((latestData: T) => (boolean | void | any))): (() => void) { return this._callbacks.addCallback(callback); } public addCallbackAndRun(callback: ((latestData: T) => (boolean | void | any))): (() => void) { const doDeleteCallback = callback(this.data); if (doDeleteCallback !== true) { return this.addCallback(callback); } else { return UIEventSource.pass } } public addCallbackAndRunD(callback: (data: T) => void): (() => void) { return this.addCallbackAndRun(data => { if (data !== undefined && data !== null) { return callback(data) } }) } public addCallbackD(callback: (data: T) => void): (() => void) { return this.addCallback(data => { if (data !== undefined && data !== null) { return callback(data) } }) } public setData(t: T): UIEventSource { if (this.data == t) { // MUST COMPARE BY REFERENCE! return; } this.data = t; this._callbacks.ping(t) return this; } public ping(): void { this._callbacks.ping(this.data) } /** * Monoidal map which results in a read-only store * Given a function 'f', will construct a new UIEventSource where the contents will always be "f(this.data)' * @param f: The transforming function * @param extraSources: also trigger the update if one of these sources change * * const src = new UIEventSource(10) * const store = src.map(i => i * 2) * store.data // => 20 * let srcSeen = undefined; * src.addCallback(v => { * console.log("Triggered") * srcSeen = v * }) * let lastSeen = undefined * store.addCallback(v => { * console.log("Triggered!") * lastSeen = v * }) * src.setData(21) * srcSeen // => 21 * lastSeen // => 42 */ public map(f: ((t: T) => J), extraSources: Store[] = []): Store { return new MappedStore(this, f, extraSources, this._callbacks, f(this.data)); } /** * Two way sync with functions in both directions * Given a function 'f', will construct a new UIEventSource where the contents will always be "f(this.data)' * @param f: The transforming function * @param extraSources: also trigger the update if one of these sources change * @param g: a 'backfunction to let the sync run in two directions. (data of the new UIEVEntSource, currentData) => newData * @param allowUnregister: if set, the update will be halted if no listeners are registered */ public sync(f: ((t: T) => J), extraSources: Store[], g: ((j: J, t: T) => T), allowUnregister = false): UIEventSource { const self = this; const stack = new Error().stack.split("\n"); const callee = stack[1] const newSource = new UIEventSource( f(this.data), "map(" + this.tag + ")@" + callee ); const update = function () { newSource.setData(f(self.data)); return allowUnregister && newSource._callbacks.length() === 0 } this.addCallback(update); for (const extraSource of extraSources) { extraSource?.addCallback(update); } if (g !== undefined) { newSource.addCallback((latest) => { self.setData(g(latest, self.data)); }) } return newSource; } public syncWith(otherSource: UIEventSource, reverseOverride = false): UIEventSource { this.addCallback((latest) => otherSource.setData(latest)); const self = this; otherSource.addCallback((latest) => self.setData(latest)); if (reverseOverride) { if (otherSource.data !== undefined) { this.setData(otherSource.data); } } else if (this.data === undefined) { this.setData(otherSource.data); } else { otherSource.setData(this.data); } return this; } }