@zajno/common 1.4.2 → 1.4.6

package/src/__tests__/observingCache.test.ts

@@ -0,0 +1,127 @@
+import { observable, reaction, runInAction, toJS } from 'mobx';
+import { ObservingCache } from '../observingCache';
+import { setTimeoutAsync } from '../async/timeout';
+
+type TestItem = {
+    hello: string,
+};
+
+function createData() {
+    const Database: Record<string, TestItem> = observable({
+        '123': { hello: 'Hi, 123' },
+    });
+
+    const Repository = {
+        fetch: (key: string, cb: (value: TestItem) => void) => {
+            return reaction(() => Database[key], async item => {
+                await setTimeoutAsync(100);
+                cb(item);
+            }, { fireImmediately: true, delay: 100 });
+        },
+    };
+
+    const subscribeFn = jest.fn().mockImplementation(null);
+    const unsubFn = jest.fn().mockImplementation(null);
+
+    const Cache = new ObservingCache((key, cb) => {
+        subscribeFn(key);
+        const unsub = Repository.fetch(key, cb);
+        return () => {
+            unsubFn();
+            unsub();
+        };
+    });
+
+    return {
+        Database,
+        Repository,
+        Cache,
+        subscribeFn,
+        unsubFn,
+    };
+}
+
+
+describe('ObservingCache works with', () => {
+    it('no observing', async () => {
+        const { Database, Cache, subscribeFn, unsubFn } = createData();
+        try {
+            expect(Cache).not.toBeNull();
+            expect(subscribeFn).not.toHaveBeenCalled();
+            expect(unsubFn).not.toHaveBeenCalled();
+
+            const KEY = '123';
+
+            const deferred = Cache.get(KEY);
+
+            expect(deferred.busy).toBeUndefined();
+            expect(deferred.current).toBeUndefined();
+            expect(deferred.busy).toBeTruthy();
+
+            const expectedItem = toJS(Database[KEY]);
+
+            await expect(deferred.promise).resolves.toStrictEqual(expectedItem);
+
+            expect(deferred.current).toStrictEqual(expectedItem);
+            expect(deferred.busy).toBeFalsy();
+
+            expect(unsubFn).toHaveBeenCalledTimes(1);
+
+            expect(subscribeFn).toHaveBeenCalledTimes(1);
+            expect(subscribeFn).toHaveBeenCalledWith(KEY);
+
+            subscribeFn.mockClear();
+            unsubFn.mockClear();
+
+            Database[KEY] = { hello: 'bye' };
+
+            expect(subscribeFn).not.toHaveBeenCalled();
+        } finally {
+            Cache.dispose();
+        }
+    });
+
+    it('infinite observing', async () => {
+        const { Database, Cache, subscribeFn, unsubFn } = createData();
+        try {
+            Cache.useObservingStrategy(true);
+
+            const KEY = '123';
+
+            const deferred = Cache.get(KEY);
+
+            expect(deferred.busy).toBeUndefined();
+            expect(deferred.current).toBeUndefined();
+            expect(deferred.busy).toBeTruthy();
+
+            const expectedItem = toJS(Database[KEY]);
+
+            await expect(deferred.promise).resolves.toStrictEqual(expectedItem);
+
+            expect(deferred.current).toStrictEqual(expectedItem);
+            expect(deferred.busy).toBeFalsy();
+
+            expect(unsubFn).not.toHaveBeenCalled();
+
+            expect(subscribeFn).toHaveBeenCalledTimes(1);
+            expect(subscribeFn).toHaveBeenCalledWith(KEY);
+
+            subscribeFn.mockClear();
+            unsubFn.mockClear();
+
+            const replaceItem: TestItem = { hello: 'bye' };
+            runInAction(() => {
+                Database[KEY] = replaceItem;
+            });
+
+            expect(subscribeFn).not.toHaveBeenCalled();
+
+            await setTimeoutAsync(300);
+
+            expect(deferred.current).toStrictEqual(replaceItem);
+        } finally {
+            Cache.dispose();
+            expect(unsubFn).toHaveBeenCalledTimes(1);
+        }
+    });
+});

package/src/cache.ts

@@ -1,4 +1,5 @@
 import { observable, makeObservable, runInAction, action } from 'mobx';
+import { NumberModel } from './viewModels/NumberModel';
 import { createLogger, ILogger } from './logger';
 
 export type DeferredGetter<T> = {
@@ -28,14 +29,25 @@ export class PromiseCache<T, K = string> {
     private readonly _fetchCache: Record<string, Promise<T>> = { };
 
     private _logger: ILogger = null;
+    private _observeItems = false;
+
+    private readonly _busyCount = new NumberModel(0);
 
     constructor(
         readonly fetcher: (id: K) => Promise<T>,
         readonly keyAdapter?: K extends string ? null : (k: K) => string,
         readonly keyParser?: K extends string ? null : (id: string) => K,
-        readonly observeItems = false,
+        observeItems = false,
     ) {
         makeObservable(this);
+        this._observeItems = observeItems;
+    }
+
+    public get busyCount() { return this._busyCount.value; }
+
+    useObserveItems(observeItems: boolean) {
+        this._observeItems = observeItems;
+        return this;
     }
 
     private _pk(k: K): string {
@@ -73,10 +85,12 @@ export class PromiseCache<T, K = string> {
         return this._itemsStatus[key];
     }
 
-    getCurrent(id: K): T {
+    getCurrent(id: K, initiateFetch = true): T {
         const key = this._pk(id);
         const item = this._itemsCache[key];
-        this.get(id);
+        if (initiateFetch) {
+            this.get(id);
+        }
         this._logger?.log(key, 'getCurrent returns', item);
         return item;
     }
@@ -104,17 +118,19 @@ export class PromiseCache<T, K = string> {
 
     private _doFetchAsync = async (id: K, key: string) => {
         try {
+            this._busyCount.increment();
             const res = await this.fetcher(id);
             if (this._fetchCache[key]) {
                 this._logger?.log(key, 'item\'s <promise> resolved to', res);
                 const result = res
-                    ? (this.observeItems ? observable.object(res) : res)
+                    ? (this._observeItems ? observable.object(res) : res)
                     : null;
                 runInAction(() => this._itemsCache[key] = result);
             }
             return res;
         } finally {
             runInAction(() => {
+                this._busyCount.decrement();
                 delete this._fetchCache[key];
                 this._itemsStatus[key] = false;
             });
@@ -131,6 +147,11 @@ export class PromiseCache<T, K = string> {
         this._set(key, value, undefined, undefined);
     }
 
+    hasKey(id: K) {
+        const key = this._pk(id);
+        return this._itemsCache[key] !== undefined || this._itemsStatus[key] !== undefined;
+    }
+
     keys() {
         return Object.keys(this._itemsCache);
     }

package/src/observersMap.ts

@@ -0,0 +1,105 @@
+import { createLogger, ILogger } from './logger';
+import { combineDisposers, IDisposable } from './disposer';
+import { NumberModel } from './viewModels/NumberModel';
+
+type Unsub = () => void;
+
+export class ObserversMap implements IDisposable {
+    /** Unsusbcrobers map: key => unsub fn */
+    private readonly _map = new Map<string, () => void>();
+    /** Timeouts map: key => timeout handle */
+    private readonly _timeouts = new Map<string, any>();
+
+    private readonly _logger: ILogger = null;
+    private readonly _count = new NumberModel();
+
+    constructor(readonly subscribe: null | ((key: string) => Promise<Unsub[]>), readonly name?: string) {
+        this._logger = createLogger(`[Observers:${this.name || '?'}]`);
+    }
+
+    public get count() { return this._count.value; }
+
+    public getIsObserving(key: string) {
+        return this._map.has(key);
+    }
+
+    public getHasObserveTimeout(key: string) {
+        return this.getIsObserving(key) && this._timeouts.has(key);
+    }
+
+    public async enable(key: string, enable: boolean, clearAfter: number = null, existingUnsubs: Unsub[] = null) {
+        if (enable === this.getIsObserving(key)) {
+            this.refreshTimeout(key, enable, clearAfter, true);
+            return;
+        }
+
+        if (enable) {
+            this._logger.log('Adding observer for key =', key, clearAfter ? `, clearAfter = ${clearAfter}` : '');
+
+            // this marker will help to determine whether unsubscribe was requested while we were in process of subscribing
+            let disabed = false;
+            const marker = () => { disabed = true; };
+
+            this._map.set(key, marker);
+
+            if (!this.subscribe && !existingUnsubs) {
+                throw new Error('Neither subscribe function nor existingUnsubs has been configured');
+            }
+
+            const unsubs = existingUnsubs || await this.subscribe(key);
+            const result = combineDisposers(...unsubs);
+
+            if (disabed) { // unsubscribe was requested
+                result();
+            } else {
+                this._map.set(key, result);
+                this._count.increment();
+                this.refreshTimeout(key, true, clearAfter);
+            }
+        } else {
+            this._logger.log('Removing observer for key =', key);
+            this.refreshTimeout(key, false);
+            const unsub = this._map.get(key);
+            this._map.delete(key);
+            unsub();
+            this._count.decrement();
+        }
+    }
+
+    private refreshTimeout(key: string, enable: boolean, timeout?: number, refresh = false) {
+        const current = this._timeouts.get(key);
+        if (current) {
+            clearTimeout(current);
+            this._timeouts.delete(key);
+        }
+
+        if (enable && refresh && current == null) {
+            // DO NOT setup new timeout because it's not intended to clear subscribtion if it was previously enabled for long term
+            return;
+        }
+
+        if (enable && timeout) {
+            const t = setTimeout(() => this.enable(key, false), timeout);
+            this._timeouts.set(key, t);
+        }
+    }
+
+    public clear() {
+        // Clear timeouts
+        for (const t of this._timeouts.values()) {
+            clearTimeout(t);
+        }
+        this._timeouts.clear();
+
+        // Invoke unsubscribers
+        for (const u of this._map.values()) {
+            u();
+        }
+        this._map.clear();
+        this._count.setValue(0);
+    }
+
+    public dispose() {
+        this.clear();
+    }
+}

package/src/observingCache.ts

@@ -0,0 +1,150 @@
+import { action } from 'mobx';
+import { Disposable } from './disposer';
+import { PromiseCache, DeferredGetter } from './cache';
+import { ObserversMap } from './observersMap';
+import { Fields } from './fields';
+
+export type Unsub = () => void;
+export type Fetcher<T> = (key: string, cb: (val: T) => Promise<void> | void) => Unsub | Promise<Unsub>;
+
+type ObserveStrategy = boolean | 'short' | number;
+
+export interface IObservingCache<T> {
+    get(key: string): DeferredGetter<T>;
+}
+
+export class ObservingCache<T> extends Disposable implements IObservingCache<T> {
+
+    private readonly _cache: PromiseCache<T>;
+    private readonly _observers: ObserversMap;
+
+    private _observeStrategy: ObserveStrategy = null;
+    private readonly _observeStrategyOverrides: Record<string, ObserveStrategy> = { };
+
+    private _updater: Fields.Updater<T> = null;
+
+    constructor(readonly fetcher: Fetcher<T>) {
+        super();
+
+        this._cache = new PromiseCache(this._fetch);
+        this._observers = new ObserversMap(this._subscribe);
+
+        this.disposer.add(this._observers);
+    }
+
+    public get loadingCount() { return this._cache.busyCount; }
+    public get observersCount() { return this._observers.count; }
+
+    useObservingStrategy(observe: ObserveStrategy) {
+        this._observeStrategy = observe;
+        if (!this._observeStrategy) {
+            this._observers.clear();
+        } else {
+            const currentKeys = this._cache.keys();
+            const timeout = getObserveTimeout(this._observeStrategy);
+            currentKeys.forEach(key => this._observers.enable(key, true, timeout));
+        }
+
+        return this;
+    }
+
+    useUpdater(updater: Fields.Updater<T>) {
+        this._updater = updater;
+        this._cache.useObserveItems(updater != null);
+        return this;
+    }
+
+    getIsCached(key: string) {
+        return this._cache.hasKey(key);
+    }
+
+    getCurent(key: string) {
+        return this._cache.getCurrent(key, false);
+    }
+
+    get(key: string, overrideStrategy?: ObserveStrategy): DeferredGetter<T> {
+        if (overrideStrategy !== undefined) {
+            this._observeStrategyOverrides[key] = overrideStrategy;
+        }
+
+        const strategy = firstDefined(this._observeStrategyOverrides[key], this._observeStrategy);
+
+        if (strategy && !this._observers.getIsObserving(key)) {
+            // ensure observe
+            if (this._cache.hasKey(key)) {
+                // the request has been initiated already
+                const timeout = getObserveTimeout(strategy);
+                this._observers.enable(key, true, timeout);
+            }
+        }
+
+        return this._cache.getDeferred(key);
+    }
+
+    populate = (key: string, item: T) => {
+        this._updateItem(key, item);
+    };
+
+    private _fetch = async (key: string): Promise<T> => {
+        let firstLoad = true;
+
+        return new Promise<T>((resolve) => {
+            Promise.resolve<Unsub>(
+                this.fetcher(key, item => {
+                    if (firstLoad) {
+                        resolve(item);
+                        firstLoad = false;
+                    } else {
+                        this._updateItem(key, item);
+                    }
+                })
+            ).then(unsub => {
+                const strategy = firstDefined(this._observeStrategyOverrides[key], this._observeStrategy);
+                if (!strategy) {
+                    // immediate unsub in case no observing strategy has been set
+                    unsub();
+                } else {
+                    const timeout = getObserveTimeout(strategy);
+                    this._observers.enable(key, true, timeout, [unsub]);
+                }
+            });
+        });
+    };
+
+    private _subscribe = (key: string) => {
+        return Promise.all([
+            this.fetcher(key, item => this._updateItem(key, item)),
+        ]);
+    };
+
+    private _updateItem = action((key: string, item: T) => {
+        if (this._updater != null) {
+            const current = this._cache.getCurrent(key, false);
+            if (current != null) {
+                const result = this._updater(current, item);
+                // re-set existing item but with updated contents
+                this._cache.updateValueDirectly(key, result);
+                return;
+            }
+        }
+
+        this._cache.updateValueDirectly(key, item);
+    });
+}
+
+function getObserveTimeout(s: ObserveStrategy) {
+    if (!s) {
+        return undefined;
+    }
+
+    return typeof s === 'number'
+        ? s
+        : (s === 'short'
+            ? 5 * 60 * 1000
+            : null
+        );
+}
+
+function firstDefined<T>(...values: (T | undefined)[]) {
+    return values.find(v => v !== undefined);
+}

package/src/transitionObserver.ts

@@ -174,3 +174,10 @@ export class TransitionObserver<T> implements IDisposable {
         }
     }
 }
+
+export function waitFor<T>(current: () => T, toBe: T) {
+    return new TransitionObserver(current)
+        .to(toBe)
+        .fireOnce()
+        .getPromise();
+}

package/src/validation/validators.ts

@@ -22,7 +22,7 @@ export const ValidatorsRegExps = {
     expiryDateCard: /^\d+$/,
     cvv: /^\d+$/,
     // eslint-disable-next-line no-useless-escape
-    website: /^(https?:\/\/)?([a-z0-9]+(-?[a-z0-9]+\.))+[a-z]{2,}(:[0-9]{1,})?(\/.*)?$/i,
+    website: /^(https?:\/\/)?([a-z0-9]+([a-z0-9\-]+\.))+[a-z]{2,}(:[0-9]{1,})?(\/.*)?$/i,
     linkedin: /^(https?:\/\/)?([a-z]+\d*[a-z]*\.)?linkedin\.com\/.*$/i,
 };
 

package/src/viewModels/InitializableModel.ts

@@ -0,0 +1,17 @@
+import NumberModel from './NumberModel';
+
+export class InitializableModel {
+    private readonly _counter = new NumberModel(0);
+
+    public get initializing() { return this._counter.value > 0; }
+
+    protected async runOperation<T>(operation: () => Promise<T> | T): Promise<T> {
+        try {
+            this._counter.increment();
+            const res = await operation();
+            return res;
+        } finally {
+            this._counter.decrement();
+        }
+    }
+}