@nu-art/thunderstorm-frontend 0.400.5

package/components/types.d.ts

@@ -0,0 +1,23 @@
+import { TypedMap } from '@nu-art/ts-common';
+import { EditableItem } from '../utils/EditableItem.js';
+type CustomErrorLevel = string;
+export type ComponentProps_Error = {
+    error?: {
+        message?: string;
+        level: 'error' | 'warning' | CustomErrorLevel;
+    };
+    showErrorTooltip?: boolean;
+};
+type ResolveEditableErrorParams<T> = {
+    editable: EditableItem<T>;
+    prop: keyof T;
+    error?: ComponentProps_Error['error'];
+    ignoreError?: boolean;
+};
+export declare const convertToHTMLDataAttributes: (attributes?: TypedMap<string>, prefix?: string) => Readonly<{}>;
+export declare const getErrorTooltip: (errors?: TypedMap<string>, shouldReturn?: boolean) => {};
+export declare const resolveEditableError: <T>(errorHandler: ResolveEditableErrorParams<T>) => {
+    message?: string;
+    level: "error" | "warning" | CustomErrorLevel;
+} | undefined;
+export {};

package/components/types.js

@@ -0,0 +1,22 @@
+import { _keys, EmptyObject, exists, reduceToMap } from '@nu-art/ts-common';
+import { openContent } from '../component-modules/mouse-interactivity/index.js';
+export const convertToHTMLDataAttributes = (attributes, prefix) => {
+    if (!attributes)
+        return EmptyObject;
+    const finalImpl = prefix ? `${prefix}-` : '';
+    return reduceToMap(_keys(attributes), key => `data-${finalImpl}${key}`, key => attributes[key]);
+};
+export const getErrorTooltip = (errors, shouldReturn = false) => {
+    if (!exists(errors) || !shouldReturn)
+        return {};
+    return openContent.tooltip.top('input-error-tooltip', () => errors.message, { offset: 6 });
+};
+export const resolveEditableError = (errorHandler) => {
+    if (errorHandler.ignoreError)
+        return;
+    if (errorHandler.error)
+        return errorHandler.error;
+    const errorMessage = errorHandler.editable.hasError(errorHandler.prop);
+    if (!errorHandler.error && errorMessage)
+        return { level: 'error', message: String(errorMessage) };
+};

package/components/utils.d.ts

@@ -0,0 +1 @@
+export declare function getComputedStyleProperty(el: HTMLElement, property: string, normalValue?: string): string | undefined;

package/components/utils.js

@@ -0,0 +1,7 @@
+export function getComputedStyleProperty(el, property, normalValue) {
+    const computed = document.defaultView?.getComputedStyle(el);
+    if (!computed)
+        return;
+    const value = computed.getPropertyValue(property);
+    return value === 'normal' ? normalValue ?? value : value;
+}

package/consts.d.ts

@@ -0,0 +1,2 @@
+export declare const thunderstormATSGroups = "Thunderstorm Components";
+export declare const thunderstormCapabilitiesGroup = "Thunderstorm Capabilities";

package/consts.js

@@ -0,0 +1,2 @@
+export const thunderstormATSGroups = 'Thunderstorm Components';
+export const thunderstormCapabilitiesGroup = 'Thunderstorm Capabilities';

package/core/AppPage.d.ts

@@ -0,0 +1,11 @@
+import { ComponentSync } from './ComponentSync.js';
+export declare abstract class AppPage<P extends object = object, S extends object = object, Props extends P & {
+    pageTitle?: string | ((state: S) => string);
+} = P & {
+    pageTitle?: string | ((state: S) => string);
+}> extends ComponentSync<Props, S> {
+    private prevTitle;
+    protected constructor(p: Props);
+    protected updateTitle: () => void;
+    private resolveTitle;
+}

package/core/AppPage.js

@@ -0,0 +1,52 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * 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 { ComponentSync } from './ComponentSync.js';
+import { dispatch_onPageTitleChanged } from './consts.js';
+// Deprecated use AppPageV2
+export class AppPage extends ComponentSync {
+    prevTitle;
+    constructor(p) {
+        super(p);
+        const _componentDidMount = this.componentDidMount?.bind(this);
+        this.componentDidMount = () => {
+            _componentDidMount?.();
+            this.prevTitle = document.title;
+            this.updateTitle();
+        };
+        const _componentWillUnmount = this.componentWillUnmount?.bind(this);
+        this.componentWillUnmount = () => {
+            _componentWillUnmount?.();
+            document.title = this.prevTitle;
+        };
+    }
+    updateTitle = () => {
+        const newTitle = this.resolveTitle();
+        document.title = newTitle;
+        this.logDebug(`Mounting page: ${newTitle}`);
+        dispatch_onPageTitleChanged.dispatchUI(document.title);
+    };
+    resolveTitle = () => {
+        const pageTitle = this.props.pageTitle;
+        if (!pageTitle)
+            return '';
+        return typeof pageTitle === 'function' ? pageTitle(this.state) : pageTitle;
+    };
+}

package/core/AppPageV2.d.ts

@@ -0,0 +1,9 @@
+import { ComponentAsync } from './ComponentAsync.js';
+export declare abstract class AppPageV2<P extends {} = {}, S extends {} = {}> extends ComponentAsync<P, S> {
+    private pageTitle;
+    private prevTitle;
+    protected constructor(p: P, pageTitle?: string | (() => string));
+    setPageTitle(pageTitle: string | (() => string)): void;
+    protected updateTitle: () => void;
+    private resolveTitle;
+}

package/core/AppPageV2.js

@@ -0,0 +1,53 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * 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 { ComponentAsync } from './ComponentAsync.js';
+import { dispatch_onPageTitleChanged } from './consts.js';
+export class AppPageV2 extends ComponentAsync {
+    pageTitle;
+    prevTitle;
+    constructor(p, pageTitle) {
+        super(p);
+        this.pageTitle = pageTitle || document.title;
+        const _componentDidMount = this.componentDidMount?.bind(this);
+        this.componentDidMount = () => {
+            _componentDidMount?.();
+            this.prevTitle = document.title;
+            this.updateTitle();
+        };
+        const _componentWillUnmount = this.componentWillUnmount?.bind(this);
+        this.componentWillUnmount = () => {
+            _componentWillUnmount?.();
+            document.title = this.prevTitle;
+        };
+    }
+    setPageTitle(pageTitle) {
+        this.pageTitle = pageTitle;
+        if (this.mounted)
+            this.updateTitle();
+    }
+    updateTitle = () => {
+        const newTitle = this.resolveTitle();
+        document.title = newTitle;
+        this.logDebug(`Mounting page: ${newTitle}`);
+        dispatch_onPageTitleChanged.dispatchUI(document.title);
+    };
+    resolveTitle = () => typeof this.pageTitle === 'function' ? this.pageTitle() : this.pageTitle;
+}

package/core/AppWrapper.d.ts

@@ -0,0 +1,4 @@
+import { ThunderAppWrapperProps } from './types.js';
+export declare function appWithBrowserRouter(props: ThunderAppWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function appWithMemoryRouter(props: ThunderAppWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function appWithJSX(props: ThunderAppWrapperProps<any>): import("react/jsx-runtime").JSX.Element;

package/core/AppWrapper.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * 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 { BrowserRouter, MemoryRouter } from 'react-router-dom';
+export function appWithBrowserRouter(props) {
+    const MainApp = props.element;
+    return _jsx(BrowserRouter, { children: _jsx(MainApp, {}) });
+}
+export function appWithMemoryRouter(props) {
+    const MainApp = props.element;
+    return _jsx(MemoryRouter, { children: _jsx(MainApp, {}) });
+}
+export function appWithJSX(props) {
+    const MainApp = props.element;
+    return _jsx(MainApp, { ...props.props });
+}

package/core/ComponentAsync.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Created by tacb0ss on 28/07/2018.
+ */
+import { BaseComponent } from './ComponentBase.js';
+export type BaseAsyncState = {
+    isLoading?: boolean;
+    error?: Error;
+};
+export declare abstract class ComponentAsync<P = {}, S = {}, State extends BaseAsyncState & S = BaseAsyncState & S> extends BaseComponent<P, State> {
+    private derivingState;
+    private pendingProps?;
+    protected _deriveStateFromProps(nextProps: P): State | undefined;
+    private reDeriveCompletedCallback;
+    protected deriveStateFromProps(nextProps: P): Promise<State>;
+    protected createInitialState(nextProps: P): State;
+}

package/core/ComponentAsync.js

@@ -0,0 +1,64 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * 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.
+ */
+/**
+ * Created by tacb0ss on 28/07/2018.
+ */
+import { BaseComponent } from './ComponentBase.js';
+export class ComponentAsync extends BaseComponent {
+    derivingState = false;
+    pendingProps;
+    _deriveStateFromProps(nextProps) {
+        if (this.derivingState) {
+            this.logVerbose('Scheduling new props', nextProps);
+            this.pendingProps = nextProps;
+            return;
+        }
+        this.logVerbose('Deriving state from props', nextProps);
+        this.pendingProps = undefined;
+        this.derivingState = true;
+        this.deriveStateFromProps(nextProps)
+            .then((state) => {
+            if (!this.mounted)
+                return this.logWarning('Will not set derived state - Component Unmounted');
+            this.setState(state, this.reDeriveCompletedCallback);
+        })
+            .catch(e => {
+            this.logError(`error`, e);
+            this.setState({ error: e }, this.reDeriveCompletedCallback);
+        });
+        return this.createInitialState(nextProps);
+    }
+    reDeriveCompletedCallback = () => {
+        this.derivingState = false;
+        if (!this.mounted)
+            return this.logWarning('Will not trigger pending props - Component Unmounted');
+        if (this.pendingProps) {
+            this.logVerbose('Triggering pending props');
+            this._deriveStateFromProps(this.pendingProps);
+        }
+    };
+    async deriveStateFromProps(nextProps) {
+        return this.createInitialState(nextProps);
+    }
+    createInitialState(nextProps) {
+        return { isLoading: true };
+    }
+}

package/core/ComponentBase.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Created by tacb0ss on 28/07/2018.
+ */
+import * as React from 'react';
+import { Logger, LogLevel, LogParam, TimerHandler } from '@nu-art/ts-common';
+export declare abstract class BaseComponent<P = any, State = any> extends React.Component<P, State> {
+    static MinLogLevel: LogLevel;
+    protected readonly logger: Logger;
+    private timeoutMap;
+    protected mounted: boolean;
+    constructor(props: P);
+    _constructor(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: P): void;
+    protected abstract _deriveStateFromProps(nextProps: P, state?: Partial<State>): State | undefined;
+    reDeriveState: (state?: Partial<State>) => void;
+    debounce(handler: TimerHandler, key: string, ms?: number): void;
+    throttle(handler: TimerHandler, key: string, ms?: number): void;
+    shouldReDeriveState(nextProps: Readonly<P>): boolean;
+    shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<State>, nextContext: any): boolean;
+    protected logVerbose(...toLog: LogParam[]): void;
+    protected logDebug(...toLog: LogParam[]): void;
+    protected logInfo(...toLog: LogParam[]): void;
+    protected logWarning(...toLog: LogParam[]): void;
+    protected logError(...toLog: LogParam[]): void;
+    protected log(level: LogLevel, bold: boolean, ...toLog: LogParam[]): void;
+    private logImpl;
+    toString(): string;
+}

package/core/ComponentBase.js

@@ -0,0 +1,152 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * 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.
+ */
+/**
+ * Created by tacb0ss on 28/07/2018.
+ */
+import * as React from 'react';
+import { _clearTimeout, _keys, _setTimeout, EmptyObject, ImplementationMissingException, Logger, LogLevel, sortArray } from '@nu-art/ts-common';
+import { Thunder } from './Thunder.js';
+let instances = 0;
+export class BaseComponent extends React.Component {
+    static MinLogLevel = LogLevel.Info;
+    logger;
+    timeoutMap = {};
+    mounted = false;
+    constructor(props) {
+        super(props);
+        this.logger = new Logger(this.constructor.name + '-' + (++instances));
+        this.logger.setMinLevel(BaseComponent.MinLogLevel);
+        this.logVerbose('Creating..');
+        this._constructor();
+        const __render = this.render?.bind(this);
+        if (!__render)
+            throw new ImplementationMissingException('Every UI Component must have a render function. Did you forget to add a render function?');
+        this.render = () => {
+            this.logVerbose('Rendering', this.state);
+            return __render();
+        };
+        const __componentDidMount = this.componentDidMount?.bind(this);
+        this.componentDidMount = () => {
+            // @ts-ignore
+            Thunder.getInstance().addUIListener(this);
+            this.mounted = true;
+            __componentDidMount?.();
+        };
+        const __componentWillUnmount = this.componentWillUnmount?.bind(this);
+        this.componentWillUnmount = () => {
+            __componentWillUnmount?.();
+            // @ts-ignore
+            Thunder.getInstance().removeUIListener(this);
+            this.mounted = false;
+        };
+        this._deriveStateFromProps.bind(this);
+        const state = this._deriveStateFromProps(props, this.state);
+        if (state)
+            this.state = state;
+    }
+    _constructor() {
+    }
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        if (!this.shouldReDeriveState(nextProps))
+            return;
+        if (this.state) //skip the first time when the shared-components MUST update
+            this.logDebug('Received new props, calling deriveStateFromProps', nextProps);
+        const state = this._deriveStateFromProps(nextProps, { ...this.state });
+        if (state)
+            this.setState(state);
+    }
+    reDeriveState = (state) => {
+        this.logVerbose('reDeriveState called..');
+        this._deriveStateFromProps(this.props, { ...this.state, ...state });
+    };
+    debounce(handler, key, ms = 0) {
+        this.logWarning('THIS IS LEGACY S***, NEED TO REMOVE');
+        _clearTimeout(this.timeoutMap[key]);
+        this.timeoutMap[key] = _setTimeout(handler, ms);
+    }
+    throttle(handler, key, ms = 0) {
+        this.logWarning('THIS IS LEGACY S***, NEED TO REMOVE');
+        if (this.timeoutMap[key])
+            return;
+        this.timeoutMap[key] = _setTimeout(() => {
+            handler();
+            delete this.timeoutMap[key];
+        }, ms);
+    }
+    shouldReDeriveState(nextProps) {
+        const _shouldRederive = () => {
+            const propKeys = sortArray(_keys(this.props || EmptyObject));
+            const nextPropsKeys = sortArray(_keys(nextProps || EmptyObject));
+            if (propKeys.length !== nextPropsKeys.length)
+                return true;
+            this.logVerbose('CurrentPropKeys:', propKeys);
+            this.logVerbose('CurrentProps:', this.props);
+            this.logVerbose('NextPropKeys:', nextPropsKeys);
+            this.logVerbose('NextProps:', nextProps);
+            if (propKeys.some((key, i) => propKeys[i] !== nextPropsKeys[i] || this.props[propKeys[i]] !== nextProps[nextPropsKeys[i]]))
+                return true;
+            return false;
+        };
+        const willReDerive = _shouldRederive();
+        this.logVerbose(`component will${!willReDerive ? ' NOT' : ''} re-derive State`);
+        return willReDerive;
+    }
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        const _shouldRender = () => {
+            const stateKeys = sortArray(_keys(this.state || EmptyObject));
+            const nextStateKeys = sortArray(_keys(nextState || EmptyObject));
+            // this.logDebug('States Same Instance:', this.state === nextState);
+            if (stateKeys.length !== nextStateKeys.length)
+                return true;
+            if (stateKeys.some((key, i) => stateKeys[i] !== nextStateKeys[i] || this.state[stateKeys[i]] !== nextState[nextStateKeys[i]]))
+                return true;
+            return false;
+        };
+        // const willRender = super.shouldComponentUpdate?.(nextProps, nextState, nextContext) || true;
+        const willRender = _shouldRender();
+        this.logVerbose(`component will${!willRender ? ' NOT' : ''} render`);
+        return willRender;
+    }
+    logVerbose(...toLog) {
+        this.logImpl(LogLevel.Verbose, false, toLog);
+    }
+    logDebug(...toLog) {
+        this.logImpl(LogLevel.Debug, false, toLog);
+    }
+    logInfo(...toLog) {
+        this.logImpl(LogLevel.Info, false, toLog);
+    }
+    logWarning(...toLog) {
+        this.logImpl(LogLevel.Warning, false, toLog);
+    }
+    logError(...toLog) {
+        this.logImpl(LogLevel.Error, false, toLog);
+    }
+    log(level, bold, ...toLog) {
+        this.logImpl(level, bold, toLog);
+    }
+    logImpl(level, bold, toLog) {
+        this.logger.log(level, bold, toLog);
+    }
+    toString() {
+        return this.constructor.name;
+    }
+}

package/core/ComponentSync.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Created by tacb0ss on 28/07/2018.
+ */
+import { BaseComponent } from './ComponentBase.js';
+import { InferProps, InferState } from '../utils/types.js';
+export declare abstract class ComponentSync<P = any, S = any> extends BaseComponent<P, S> {
+    protected _deriveStateFromProps(nextProps: P, state?: S): S | undefined;
+    protected deriveStateFromProps(nextProps: P, state: S): S;
+}
+export declare abstract class ComponentSyncInfer<P = any, S = any> extends BaseComponent<P, S> {
+    protected _deriveStateFromProps(nextProps: InferProps<this>, state?: InferState<this>): InferState<this>;
+    protected deriveStateFromProps(nextProps: InferProps<this>, state: InferState<this>): InferState<this>;
+}

package/core/ComponentSync.js

@@ -0,0 +1,49 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * 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.
+ */
+/**
+ * Created by tacb0ss on 28/07/2018.
+ */
+import { BaseComponent } from './ComponentBase.js';
+export class ComponentSync extends BaseComponent {
+    _deriveStateFromProps(nextProps, state) {
+        this.logVerbose('Deriving state from props');
+        state ??= this.state ? { ...this.state } : {};
+        const _state = this.deriveStateFromProps(nextProps, state);
+        if (this.mounted && _state)
+            this.setState(_state);
+        return _state;
+    }
+    deriveStateFromProps(nextProps, state) {
+        return state;
+    }
+}
+export class ComponentSyncInfer extends BaseComponent {
+    _deriveStateFromProps(nextProps, state) {
+        this.logVerbose('Deriving state from props');
+        const _state = this.deriveStateFromProps(nextProps, (state ?? (this.state ? { ...this.state } : {})));
+        if (this.mounted && _state)
+            this.setState(_state);
+        return _state;
+    }
+    deriveStateFromProps(nextProps, state) {
+        return state;
+    }
+}

package/core/Controller.d.ts

@@ -0,0 +1,13 @@
+import { ComponentSync } from './ComponentSync.js';
+import * as React from 'react';
+export type Props_Controller = {
+    ignoreError?: boolean;
+};
+export declare class Controller<P = {}, State = {}, Props extends Props_Controller & P = Props_Controller & P> extends ComponentSync<Props, State> {
+    constructor(props: Props);
+    /**
+     * Default on click on error boundary event
+     * @param e - Mouse click event
+     */
+    protected onErrorBoundaryClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+}

package/core/Controller.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from './ComponentSync.js';
+import { TS_ErrorBoundary } from '../components/TS_ErrorBoundary/index.js';
+export class Controller extends ComponentSync {
+    constructor(props) {
+        super(props);
+        const __render = this.render.bind(this);
+        // override default render to make sure error boundary is added if needed
+        this.render = () => {
+            if (this.props.ignoreError)
+                return __render();
+            return _jsx(TS_ErrorBoundary, { onClick: this.onErrorBoundaryClick, children: __render() });
+        };
+    }
+    /**
+     * Default on click on error boundary event
+     * @param e - Mouse click event
+     */
+    onErrorBoundaryClick = (e) => {
+        if (e.metaKey)
+            return this.logInfo('Component props and state', this.props, this.state);
+        if (e.shiftKey) {
+            this.logInfo('Re-deriving state');
+            return this.reDeriveState();
+        }
+        this.forceUpdate();
+    };
+}

package/core/IndexedDB.d.ts

@@ -0,0 +1,42 @@
+import { DB_Object, DBIndex, IndexKeys } from '@nu-art/ts-common';
+export type ReduceFunction<ItemType, ReturnType> = (accumulator: ReturnType, arrayItem: ItemType, index?: number, array?: ItemType[]) => ReturnType;
+export type DBConfig<T extends DB_Object, Ks extends keyof T> = {
+    name: string;
+    version?: number;
+    autoIncrement?: boolean;
+    uniqueKeys: Ks[];
+    indices?: DBIndex<T>[];
+    upgradeProcessor?: (db: IDBDatabase) => void;
+};
+export type IndexDb_Query = {
+    query?: string | number | string[] | number[];
+    indexKey?: string;
+    limit?: number;
+};
+export declare class IndexedDB<T extends DB_Object, Ks extends keyof T> {
+    private db;
+    private config;
+    private static dbs;
+    static getOrCreate<T extends DB_Object, Ks extends keyof T>(config: DBConfig<T, Ks>): IndexedDB<T, Ks>;
+    constructor(config: DBConfig<T, Ks>);
+    exists(): Promise<IDBDatabaseInfo | undefined>;
+    open(): Promise<IDBDatabase>;
+    readonly store: (write?: boolean, store?: IDBObjectStore) => Promise<IDBObjectStore>;
+    private getCursor;
+    private cursorHandler;
+    insert(value: T, _store?: IDBObjectStore): Promise<T>;
+    insertAll(values: T[], _store?: IDBObjectStore): Promise<void>;
+    upsert(value: T, _store?: IDBObjectStore): Promise<T>;
+    upsertAll(values: T[], _store?: IDBObjectStore): Promise<void>;
+    get(key: IndexKeys<T, Ks>): Promise<T | undefined>;
+    query(query: IndexDb_Query): Promise<T[] | undefined>;
+    queryFilter(filter: (item: T) => boolean, query?: IndexDb_Query): Promise<T[]>;
+    WIP_queryMapNew<Type>(mapper: (item: T) => Type, filter?: (item: T) => boolean, query?: IndexDb_Query): Promise<Type[]>;
+    WIP_queryMap<Type>(mapper: (item: T) => Type, filter?: (item: T) => boolean, query?: IndexDb_Query): Promise<Type[]>;
+    queryFind(filter: (item: T) => boolean): Promise<T | undefined>;
+    queryReduce<ReturnType>(reducer: ReduceFunction<T, ReturnType>, initialValue: ReturnType, filter?: (item: T) => boolean, query?: IndexDb_Query): Promise<ReturnType>;
+    clearDB(): Promise<void>;
+    deleteDB(): Promise<void>;
+    deleteAll(keys: (IndexKeys<T, Ks> | T)[]): Promise<T[]>;
+    delete(key: (IndexKeys<T, Ks> | T)): Promise<T>;
+}