@nu-art/thunderstorm-frontend 0.400.5

package/modules/db-api-gen/ModuleFE_BaseDB.js

@@ -0,0 +1,433 @@
+/*
+ * Database API Generator is a utility library for Thunderstorm.
+ *
+ * Given proper configurations it will dynamically generate APIs to your Firestore
+ * collections, will assert uniqueness and restrict deletion... and more
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { _keys, arrayToMap, BadImplementationException, dbObjectToId, deleteKeysObject, exists, filterDuplicates, KeysOfDB_Object, lastElement, Logger, LogLevel, Module, sortArray, tsValidateResult, ValidationException, voidFunction } from '@nu-art/ts-common';
+import { composeDbObjectUniqueId } from '@nu-art/firebase-shared';
+import { getModuleFEConfigV3 } from '../../core/db-api-gen/db-def.js';
+import { DataStatus, EventType_Create, EventType_Delete, EventType_DeleteMulti, EventType_Patch, EventType_Query, EventType_Unique, EventType_Update, EventType_UpsertAll, syncDispatcher } from '../../core/db-api-gen/consts.js';
+import { StorageKey } from '../ModuleFE_LocalStorage.js';
+import { ModuleFE_IDBManager } from '../../core/IndexedDBV4/ModuleFE_IDBManager.js';
+export class ModuleFE_BaseDB extends Module {
+    validator;
+    cache;
+    IDB;
+    dbDef;
+    dataStatus;
+    defaultDispatcher;
+    syncType;
+    // @ts-ignore
+    ModuleFE_BaseDB = true;
+    constructor(dbDef, defaultDispatcher, syncType, customMemCreators) {
+        super();
+        this.syncType = syncType;
+        this.defaultDispatcher = defaultDispatcher;
+        const config = getModuleFEConfigV3(dbDef);
+        this.validator = config.validator;
+        this.dbDef = dbDef;
+        //Set Statuses
+        this.dataStatus = DataStatus.NoData;
+        this.setDefaultConfig(config);
+        this.cache = customMemCreators?.memCache ? customMemCreators?.memCache(config, this) : new MemCache(this, config.dbConfig.uniqueKeys);
+        this.IDB = customMemCreators?.idbCache
+            ? customMemCreators?.idbCache(this.config.dbConfig, this.config.key)
+            : new IDBCache(this.config.dbConfig, this.config.key);
+        this.upgradeInstances.bind(this);
+        this.registerVersionUpgradeProcessor.bind(this);
+    }
+    init() {
+        super.init();
+        this.IDB.init();
+        this.attachOnLastSyncUpdatedListener();
+    }
+    /**
+     * Upgrade processor functionality in the FE module will allow us to validate the items we cache in memory or
+     * idb is up-to-date in case the data source is not coming directly from Storm managed backend (like the csv sync manager)
+     */
+    /* Private */
+    versionUpgrades = {};
+    /**
+     * Upgrades the entity from the given version to the next one (to the same version if the given version is the latest)
+     * @param version - The version we start from
+     * @param processor
+     */
+    registerVersionUpgradeProcessor(version, processor) {
+        this.versionUpgrades[version] = processor;
+    }
+    /* Public */
+    async upgradeInstances(instances, force = false) {
+        if (!_keys(this.versionUpgrades).length) {
+            this.logVerbose(`No registered upgrade processors for this module ${this.dbDef.dbKey}`);
+            return instances;
+        }
+        //Make sure all items start out with a version
+        instances.forEach(instance => {
+            if (!instance._v)
+                instance._v = lastElement(this.config.versions);
+        });
+        let instancesToSave = [];
+        for (let i = this.config.versions.length - 1; i >= 0; i--) {
+            const version = this.config.versions[i];
+            const instancesToUpgrade = instances.filter(instance => instance._v === version);
+            const nextVersion = this.config.versions[i - 1] ?? version;
+            const versionTransition = `${version} => ${nextVersion}`;
+            if (instancesToUpgrade.length === 0) {
+                this.logVerbose(`No instances to upgrade from ${versionTransition}`);
+                continue;
+            }
+            const upgradeProcessor = this.versionUpgrades[version];
+            if (!upgradeProcessor) {
+                this.logVerbose(`Will not update ${instancesToUpgrade.length} instances of version ${versionTransition}`);
+                this.logVerbose(`No upgrade processor for: ${versionTransition}`);
+            }
+            else {
+                this.logVerbose(`Upgrade instances(${instancesToUpgrade.length}): ${versionTransition}`);
+                await upgradeProcessor?.(instancesToUpgrade);
+                instancesToSave.push(...instancesToUpgrade);
+            }
+            instancesToSave = filterDuplicates(instancesToSave);
+            instancesToUpgrade.forEach(instance => instance._v = nextVersion);
+        }
+        return force ? instances : instancesToSave;
+    }
+    attachOnLastSyncUpdatedListener = () => {
+        this.IDB.onLastUpdateListener(this.onLastSyncUpdatedListener);
+    };
+    detachOnLastSyncUpdatedListener = () => {
+        this.IDB.onLastUpdateListener(voidFunction);
+    };
+    onLastSyncUpdatedListener = async (after, before) => {
+        if (!exists(after) || after === before)
+            return;
+        await this.cache.load();
+        this.defaultDispatcher.dispatchAll('update', {});
+        this.OnDataStatusChanged();
+    };
+    setDataStatus(status) {
+        this.logDebug(`Data status updated: ${DataStatus[this.dataStatus]} => ${DataStatus[status]}`);
+        if (this.dataStatus === status)
+            return;
+        this.dataStatus = status;
+        this.OnDataStatusChanged();
+    }
+    OnDataStatusChanged() {
+        syncDispatcher.dispatchModule(this);
+        syncDispatcher.dispatchUI(this);
+    }
+    getDataStatus() {
+        return this.dataStatus;
+    }
+    async __onClearWebsiteData() {
+        await this.IDB.clear();
+        this.setDataStatus(DataStatus.NoData);
+    }
+    getCollectionName = () => {
+        return this.config.dbConfig.name;
+    };
+    getCollectionKey = () => {
+        return this.dbDef.dbKey;
+    };
+    dispatchSingle = (event, item) => {
+        this.defaultDispatcher?.dispatchModule(event, item);
+        this.defaultDispatcher?.dispatchUI(event, item);
+    };
+    dispatchMulti = (event, items) => {
+        this.defaultDispatcher?.dispatchModule(event, items);
+        this.defaultDispatcher?.dispatchUI(event, items);
+    };
+    onEntriesDeleted = async (items) => {
+        await this.IDB.syncIndexDb([], items);
+        // @ts-ignore
+        this.cache.onEntriesDeleted(items);
+        this.dispatchMulti(EventType_DeleteMulti, items);
+    };
+    onEntryDeleted = async (item) => {
+        await this.IDB.syncIndexDb([], [item]);
+        // @ts-ignore
+        this.cache.onEntriesDeleted([item]);
+        this.dispatchSingle(EventType_Delete, item);
+    };
+    onEntriesUpdated = async (items, updateIDBLastSynced = true) => {
+        items = await this.upgradeInstances(items);
+        await this.IDB.syncIndexDb(items);
+        // @ts-ignore
+        this.cache.onEntriesUpdated(items);
+        // update the collection last updated
+        const lastUpdated = items.reduce((toRet, current) => Math.max(toRet, current.__updated), 0);
+        if ((!this.IDB.getLastSync() && lastUpdated !== 0 || lastUpdated) && updateIDBLastSynced)
+            this.IDB.setLastUpdated(lastUpdated);
+        this.dispatchMulti(EventType_UpsertAll, items.map(item => item));
+    };
+    onEntryUpdated = async (item, original, updateIDBLastSynced = true) => {
+        item = (await this.upgradeInstances([item]))[0];
+        return this.onEntryUpdatedImpl(original._id ? EventType_Update : EventType_Create, item, updateIDBLastSynced);
+    };
+    onEntryPatched = async (item, updateIDBLastSynced = true) => {
+        item = (await this.upgradeInstances([item]))[0];
+        return this.onEntryUpdatedImpl(EventType_Patch, item, updateIDBLastSynced);
+    };
+    validateImpl(_instance) {
+        let _generatedProps = this.dbDef.generatedProps;
+        if (!_generatedProps) {
+            if (typeof this.dbDef.generatedPropsValidator !== 'object')
+                throw new BadImplementationException('while using generated props as a function you must provide generated props in db-def explicitly');
+            _generatedProps = _keys(this.dbDef.generatedPropsValidator);
+        }
+        const instance = deleteKeysObject(_instance, [...KeysOfDB_Object, ..._generatedProps]);
+        const results = tsValidateResult(instance, this.validator);
+        if (results) {
+            this.onValidationError(instance, results);
+        }
+    }
+    validateInternal(_instance) {
+        this.validateImpl(_instance);
+    }
+    onValidationError(instance, results) {
+        this.logError(`Error validating object:`, instance, 'With Error: ', results);
+        throw new ValidationException('Error validating object', instance, results);
+    }
+    async onEntryUpdatedImpl(event, item, updateIDBLastSynced = true) {
+        await this.IDB.syncIndexDb([item]);
+        // @ts-ignore
+        this.cache.onEntriesUpdated([item]);
+        // set last updated if needed
+        const lastUpdated = item.__updated;
+        if ((!this.IDB.getLastSync() && lastUpdated !== 0 || lastUpdated) && updateIDBLastSynced)
+            this.IDB.setLastUpdated(lastUpdated);
+        this.dispatchSingle(event, item);
+    }
+    onGotUnique = async (item) => {
+        return this.onEntryUpdatedImpl(EventType_Unique, item);
+    };
+    onQueryReturned = async (toUpdate, toDelete = []) => {
+        toUpdate = await this.upgradeInstances(toUpdate);
+        await this.IDB.syncIndexDb(toUpdate, toDelete);
+        // @ts-ignore
+        this.cache.onEntriesUpdated(toUpdate);
+        // @ts-ignore
+        this.cache.onEntriesDeleted(toDelete);
+        this.dispatchMulti(EventType_Query, toUpdate);
+    };
+    setCacheFilter = (filter) => {
+        this.cache.setCacheFilter(filter);
+    };
+}
+export class IDBCache extends Logger {
+    storeWrapper;
+    lastSync;
+    lastVersion;
+    dbConfig;
+    constructor(dbConfig, dbKey) {
+        super(`indexdb-${dbKey}`);
+        this.dbConfig = dbConfig;
+        this.setMinLevel(LogLevel.Verbose);
+        this.lastSync = new StorageKey('last-sync--' + dbKey);
+        this.lastVersion = new StorageKey('last-version--' + dbKey);
+    }
+    init() {
+        const currentVersion = this.dbConfig.version[0];
+        const onOpenedCallback = async () => {
+            const previousVersion = this.lastVersion.get();
+            const exists = await this.storeWrapper.exists();
+            if (!exists) {
+                this.logInfo(`Database doesn't exist.. reset last sync timestamp`);
+                this.lastSync.delete();
+            }
+            if (exists && (!previousVersion || previousVersion === currentVersion))
+                return;
+            this.lastSync.delete();
+            this.logInfo(`Cleaning up & Sync...`);
+            try {
+                await this.clear();
+                this.logInfo(`Cleaning up & Sync: Completed`);
+            }
+            catch (e) {
+                this.logError(`Cleaning up & Sync: ERROR`, e);
+            }
+        };
+        // @ts-ignore
+        this['storeWrapper'] = ModuleFE_IDBManager.register(this.dbConfig, onOpenedCallback);
+    }
+    setLastSyncTimestampStorageKey(newLastSyncStorageKey) {
+        this.lastSync = newLastSyncStorageKey;
+    }
+    onLastUpdateListener(onChangeListener) {
+        this.lastSync.onChange(onChangeListener);
+    }
+    forEach = async (processor) => {
+        const allItems = await this.query();
+        allItems.forEach(processor);
+        return allItems;
+    };
+    clear = async () => {
+        this.lastSync.delete();
+        return this.storeWrapper.clearStore();
+    };
+    delete = async () => {
+        this.lastSync.delete();
+        return this.storeWrapper.clearStore();
+    };
+    query = async (query, indexKey) => (await this.storeWrapper.query({
+        query,
+        indexKey
+    })) || [];
+    /**
+     * Iterates over all DB objects in the related collection, and returns all the items that pass the filter
+     *
+     * @param {function} filter - Boolean returning function, to determine which objects to return.
+     * @param {Object} [query] - A query object
+     *
+     * @return Array of items or empty array
+     */
+    filter = async (filter, query) => this.storeWrapper.queryFilter(filter, query);
+    /**
+     * Iterates over all DB objects in the related collection, and returns the first item that passes the filter
+     *
+     * @param {function} filter - Boolean returning function, to determine which object to return.
+     *
+     * @return a single item or undefined
+     */
+    find = async (filter) => this.storeWrapper.queryFind(filter);
+    /**
+     * Iterates over all DB objects in the related collection, and returns an array of items based on the mapper.
+     *
+     * @param {function} mapper - Function that returns data to map for the object
+     * @param {function} [filter] - Boolean returning function, to determine which item to map.
+     * @param {Object} [query] - A query object
+     *
+     * @return An array of mapped items
+     */
+    map = async (mapper, filter, query) => this.storeWrapper.WIP_queryMap(mapper, filter, query);
+    /**
+     * iterates over all DB objects in the related collection, and reduces them to a single value based on the reducer.
+     * @param {function} reducer - Function that determines who to reduce the array.
+     * @param {*} initialValue - An initial value for the reducer
+     * @param {function} [filter] - Function that determines which DB objects to reduce.
+     * @param {Object} [query] - A query Object.
+     *
+     * @return a single reduced value.
+     */
+    reduce = async (reducer, initialValue, filter, query) => this.storeWrapper.queryReduce(reducer, initialValue, filter, query);
+    unique = async (_key) => {
+        if (_key === undefined)
+            return _key;
+        const key = typeof _key === 'string' ? { _id: _key } : _key;
+        return this.storeWrapper.get(key);
+    };
+    getLastSync() {
+        return this.lastSync.get(0);
+    }
+    setLastUpdated(lastUpdated) {
+        this.lastSync.set(lastUpdated);
+    }
+    async syncIndexDb(toUpdate, toDelete = []) {
+        await this.storeWrapper.upsertAll(toUpdate);
+        await this.storeWrapper.deleteAll(toDelete);
+    }
+    async count() {
+        return await this.storeWrapper.count();
+    }
+}
+export class MemCache {
+    module;
+    keys;
+    loaded = false;
+    _map;
+    _array;
+    cacheFilter;
+    constructor(module, keys) {
+        this.module = module;
+        this.keys = keys;
+        this.clear(); // initiate an empty array
+    }
+    setCacheFilter = (filter) => {
+        this.cacheFilter = filter;
+    };
+    forEach = (processor) => {
+        this._array.forEach(processor);
+    };
+    clear = () => {
+        this.setCache([]);
+    };
+    async load(cacheFilter) {
+        const moduleName = this.module.getName();
+        this.module.logDebug(`${moduleName} cache is loading`);
+        let allItems;
+        this.cacheFilter = cacheFilter;
+        if (this.cacheFilter)
+            allItems = await this.module.IDB.filter(this.cacheFilter);
+        else
+            allItems = await this.module.IDB.query();
+        const frozenItems = allItems.map((item) => Object.freeze(item));
+        this.setCache(frozenItems);
+        this.loaded = true;
+        this.module.logDebug(`${moduleName} cache finished loading, count: ${this.all().length}`);
+    }
+    uniqueAssert = (_key) => {
+        const item = this.unique(_key);
+        if (!item)
+            throw new BadImplementationException(`Missing expected item for keys: ${JSON.stringify(_key)}`);
+        return item;
+    };
+    unique = (_key) => {
+        if (_key === undefined)
+            return _key;
+        const _id = typeof _key === 'string' ? _key : (('_id' in _key && typeof _key['_id'] === 'string') ? _key['_id'] : composeDbObjectUniqueId(_key, this.keys));
+        return this._map[_id];
+    };
+    all = () => {
+        return this._array;
+    };
+    allMutable = () => {
+        return [...this._array];
+    };
+    filter = (filter) => {
+        return this.all().filter(filter);
+    };
+    byIds = (ids) => {
+        return ids.map(id => this.unique(id));
+    };
+    find = (filter) => {
+        return this.all().find(filter);
+    };
+    map = (mapper) => {
+        return this.all().map(mapper);
+    };
+    sort = (map = i => i, invert = false) => {
+        return sortArray(this.allMutable(), map, invert);
+    };
+    arrayToMap = (getKey, map = {}) => arrayToMap(this.allMutable(), getKey, map);
+    // @ts-ignore
+    onEntriesDeleted(itemsDeleted) {
+        const ids = new Set(itemsDeleted.map(dbObjectToId));
+        this.setCache(this.filter(i => !ids.has(i._id)));
+    }
+    // @ts-ignore
+    onEntriesUpdated(itemsUpdated) {
+        const frozenItems = itemsUpdated.map(item => Object.freeze(item));
+        const ids = new Set(itemsUpdated.map(dbObjectToId));
+        const toCache = this.filter(i => !ids.has(i._id));
+        toCache.push(...frozenItems);
+        this.setCache(toCache);
+    }
+    setCache(cacheArray) {
+        this._map = Object.freeze({ ...arrayToMap(cacheArray, dbObjectToId) });
+        this._array = Object.freeze(cacheArray);
+    }
+}

package/modules/db-api-gen/types.d.ts

@@ -0,0 +1,13 @@
+import { DBProto } from '@nu-art/ts-common';
+import { DBApiFEConfig } from '../../core/db-api-gen/db-def.js';
+import { DBConfigV3 } from '../../core/IndexedDBV4/types.js';
+import { IDBCache, MemCache, ModuleFE_BaseDB } from './ModuleFE_BaseDB.js';
+export declare enum ModuleSyncType {
+    NoSync = 0,
+    CSVSync = 1,
+    APISync = 2
+}
+export type CustomMemCreators<Proto extends DBProto<any>> = {
+    memCache?: (_config: DBApiFEConfig<Proto>, _this: ModuleFE_BaseDB<Proto, any>) => MemCache<Proto>;
+    idbCache?: (dbConfig: DBConfigV3<Proto>, dbKey: string) => IDBCache<Proto>;
+};

package/modules/db-api-gen/types.js

@@ -0,0 +1,6 @@
+export var ModuleSyncType;
+(function (ModuleSyncType) {
+    ModuleSyncType[ModuleSyncType["NoSync"] = 0] = "NoSync";
+    ModuleSyncType[ModuleSyncType["CSVSync"] = 1] = "CSVSync";
+    ModuleSyncType[ModuleSyncType["APISync"] = 2] = "APISync";
+})(ModuleSyncType || (ModuleSyncType = {}));

package/modules/http/ModuleFE_XHR.d.ts

@@ -0,0 +1,20 @@
+import { ApiDef, TypedApi } from '@nu-art/thunderstorm-shared';
+import { BaseHttpModule_Class, BaseHttpRequest } from '@nu-art/thunderstorm-shared';
+import { ApiError_GeneralErrorMessage, ApiErrorResponse, ResponseError } from '@nu-art/ts-common/core/exceptions/types';
+export declare class ModuleFE_XHR_Class extends BaseHttpModule_Class {
+    init(): void;
+    createRequest<API extends TypedApi<any, any, any, any>>(apiDef: ApiDef<API>, data?: string): XhrHttpRequest<API>;
+}
+export declare const ModuleFE_XHR: ModuleFE_XHR_Class;
+declare class XhrHttpRequest<Binder extends TypedApi<any, any, any, any>> extends BaseHttpRequest<Binder> {
+    private readonly xhr?;
+    constructor(requestKey: string, requestData?: string, shouldCompress?: boolean);
+    getStatus(): number;
+    protected getResponse(): any;
+    protected abortImpl(): void;
+    getErrorResponse(): ApiErrorResponse<ResponseError | ApiError_GeneralErrorMessage>;
+    protected prepareJsonBody(bodyObject: any): string;
+    protected executeImpl(): Promise<void>;
+    _getResponseHeader(headerKey: string): string | string[] | undefined;
+}
+export {};

package/modules/http/ModuleFE_XHR.js

@@ -0,0 +1,175 @@
+import { BadImplementationException, composeUrl } from '@nu-art/ts-common';
+// noinspection TypeScriptPreferShortImport
+import { BaseHttpModule_Class, BaseHttpRequest, HttpException } from '@nu-art/thunderstorm-shared';
+// noinspection TypeScriptPreferShortImport
+import { gzipSync } from 'zlib';
+export class ModuleFE_XHR_Class extends BaseHttpModule_Class {
+    init() {
+        super.init();
+        let origin = this.config.origin;
+        if (!origin)
+            throw new BadImplementationException('Did yo\ forget to set the origin config key for the HttpModule?');
+        if (origin?.endsWith('/'))
+            origin = origin.substring(0, origin.length - 1);
+        this.origin = origin;
+    }
+    createRequest(apiDef, data) {
+        const request = new XhrHttpRequest(apiDef.path, data, this.shouldCompress())
+            .setLogger(this)
+            .setMethod(apiDef.method)
+            .setTimeout(this.timeout)
+            .setOnCompleted(this.defaultOnComplete)
+            .setOnError(this.defaultOnError)
+            .addHeaders(this.getDefaultHeaders());
+        if (apiDef.fullUrl)
+            request.setUrl(apiDef.fullUrl);
+        else
+            request
+                .setOrigin(apiDef.baseUrl ?? this.origin)
+                .setRelativeUrl(apiDef.path);
+        return request;
+    }
+}
+export const ModuleFE_XHR = new ModuleFE_XHR_Class();
+class XhrHttpRequest extends BaseHttpRequest {
+    xhr;
+    constructor(requestKey, requestData, shouldCompress) {
+        super(requestKey, requestData);
+        this.compress = shouldCompress === undefined ? true : shouldCompress;
+    }
+    getStatus() {
+        const xhr = this.xhr;
+        if (!xhr)
+            throw new BadImplementationException('No xhr object!');
+        return xhr.status;
+    }
+    getResponse() {
+        const xhr = this.xhr;
+        if (!xhr)
+            throw new BadImplementationException('No xhr object!');
+        return xhr.response;
+    }
+    abortImpl() {
+        this.xhr?.abort();
+    }
+    getErrorResponse() {
+        const rawResponse = this.getResponse();
+        let response = undefined;
+        if (rawResponse) {
+            try {
+                response = rawResponse && JSON.parse(rawResponse);
+            }
+            catch (e) {
+                response = { debugMessage: rawResponse };
+            }
+        }
+        return response;
+    }
+    prepareJsonBody(bodyObject) {
+        return JSON.stringify(bodyObject);
+    }
+    // private buildXHR = () => {
+    // 	const xhr = new XMLHttpRequest();
+    // 	const fullUrl = composeUrl(this.url, this.params);
+    // 	xhr.open(this.method, fullUrl);
+    // 	xhr.timeout = this.timeout;
+    // 	Object.keys(this.headers).forEach((key) => {
+    // 		xhr.setRequestHeader(key, this.headers[key].join('; '));
+    // 	});
+    // 	return xhr;
+    // };
+    executeImpl() {
+        //loop through whatever preprocessor
+        return new Promise((resolve, reject) => {
+            if (this.aborted)
+                return resolve();
+            const xhr = new XMLHttpRequest();
+            // @ts-ignore
+            // noinspection JSConstantReassignment
+            this.xhr = xhr;
+            this.xhr.onreadystatechange = () => {
+                if (xhr.readyState !== 4)
+                    return;
+                resolve();
+            };
+            this.xhr.onerror = (err) => {
+                if (xhr.readyState === 4 && xhr.status === 0) {
+                    reject(new HttpException(404, this.url));
+                    return;
+                }
+                reject(err);
+            };
+            const fullUrl = composeUrl(this.url, this.params);
+            this.xhr.ontimeout = (err) => {
+                // console.log(`${this.url} - Request timeout`);
+                reject(err);
+            };
+            this.xhr.onload = (err) => {
+                // HttpModule.logVerbose("onload");
+            };
+            this.xhr.onloadstart = (err) => {
+                // HttpModule.logVerbose("onloadstart");
+            };
+            this.xhr.onloadend = (err) => {
+                // HttpModule.logVerbose("onloadend");
+            };
+            this.xhr.onabort = (err) => {
+                // HttpModule.logVerbose("onabort");
+            };
+            // TODO: investigate which one should work
+            this.xhr.onprogress = this.onProgressListener;
+            this.xhr.upload.onprogress = this.onProgressListener;
+            this.xhr.open(this.method, fullUrl);
+            // console.log(`${this.url} - setting XHR timeout: ${this.timeout}`);
+            this.xhr.timeout = this.timeout;
+            Object.keys(this.headers).forEach((key) => {
+                xhr.setRequestHeader(key, this.headers[key].join('; '));
+            });
+            let body = this.body;
+            if (typeof body === 'string' && this.compress)
+                try {
+                    body = gzipSync(this.body);
+                }
+                catch (error) {
+                    return reject(error);
+                }
+            return this.xhr.send(body);
+        });
+    }
+    // stream() {
+    // 	const readable = new Readable();
+    // 	const xhr = this.buildXHR();
+    // 	let lastPosition = 0;
+    //
+    // 	// @ts-ignore
+    // 	// noinspection JSConstantReassignment
+    // 	this.xhr = xhr;
+    //
+    // 	this.xhr.onreadystatechange = () => {
+    // 		//If Loading
+    // 		if (xhr.readyState === 3) {
+    // 			const currentChunk = xhr.responseText.substring(lastPosition);
+    // 			lastPosition = xhr.responseText.length;
+    // 			readable.push(currentChunk);
+    // 		} else if (xhr.readyState === 4) {
+    // 			readable.push(null);
+    // 		}
+    // 	};
+    //
+    // 	let body: any = this.body;
+    // 	if (typeof body === 'string' && this.compress)
+    // 		try {
+    // 			this.body = gzipSync(this.body);
+    // 		} catch (error) {
+    // 			throw error;
+    // 		}
+    //
+    // 	this.xhr.send(body);
+    // 	return readable;
+    // }
+    _getResponseHeader(headerKey) {
+        if (!this.xhr)
+            throw new BadImplementationException('No xhr object!');
+        return this.xhr.getResponseHeader(headerKey) || undefined;
+    }
+}

package/modules/routing/LocationChangeListener.d.ts

@@ -0,0 +1,6 @@
+import { ThunderDispatcher } from '../../core/thunder-dispatcher.js';
+export interface OnLocationChanged {
+    __onLocationChanged: (path: string) => void;
+}
+export declare const dispatch_onLocationChanged: ThunderDispatcher<OnLocationChanged, "__onLocationChanged", [path: string], void>;
+export declare const LocationChangeListener: () => import("react/jsx-runtime").JSX.Element;

package/modules/routing/LocationChangeListener.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+import { ThunderDispatcher } from '../../core/thunder-dispatcher.js';
+import { ModuleFE_RoutingV2 } from './ModuleFE_RoutingV2.js';
+export const dispatch_onLocationChanged = new ThunderDispatcher('__onLocationChanged');
+export const LocationChangeListener = () => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    useEffect(() => {
+        dispatch_onLocationChanged.dispatchUI(location.pathname);
+    }, [location]);
+    ModuleFE_RoutingV2.setNavigate(navigate);
+    return _jsx(_Fragment, {});
+};