anu-verzum 1.7.0 → 1.9.0

package/README.md

@@ -47,8 +47,12 @@ Anu.render(<App />, document.getElementById('root'));
 <h3>TypeScript setup</h3>
 
 The library is written in TypeScript and ships with declaration files (`.d.ts`) out of the box —
-no extra `@types` package is needed. If your project uses TypeScript, add the following to your
-`tsconfig.json` so the compiler understands JSX produced by ANUVerzum:
+no extra `@types` package is needed. The `dist/` directory contains only compiled `.js` files and
+`.d.ts` declarations, so the package works correctly under all standard TypeScript `moduleResolution`
+modes including `"node"`, `"node16"`, and `"bundler"`.
+
+If your project uses TypeScript, add the following to your `tsconfig.json` so the compiler
+understands JSX produced by ANUVerzum:
 
 ```json
 {
@@ -116,11 +120,14 @@ The following types are exported from `anu-verzum` for use in consumer projects:
 | Type | Description |
 |------|-------------|
 | `AnuElement` | The virtual-DOM element descriptor (return type of `createElement`) |
+| `AnuChild` | Union of all valid JSX child types: `AnuElement \| string \| number \| boolean \| null \| undefined` |
 | `Props` | Base props type — all component prop objects should extend this |
 | `Ref<T>` | Reference object created by `Anu.createRef<T>()` |
 | `Component<P, S>` | Abstract base class for class components |
 | `FunctionComponent<P>` | Function component signature |
 | `ElementType` | String tag, function component, or class component constructor |
+| `ContextValue<T>` | Context value passed to a `Consumer` render-prop: `{ value: Partial<T>; defaultContext: { value: T } }` |
+| `ConsumerProps<T>` | Props for a typed context `Consumer` — `children` is the render-prop `(ctx: ContextValue<T>) => AnuElement \| null` |
 | `Store<S, A>` | Store instance returned by `Anu.store.createStore` |
 | `Reducer<S, A>` | Reducer function signature |
 | `Middleware<S, A>` | Middleware function signature |
@@ -128,6 +135,7 @@ The following types are exported from `anu-verzum` for use in consumer projects:
 | `Action` | Base action type `{ type: string; [key: string]: any }` |
 | `ThunkAction<S>` | Thunk action `(dispatch, getState) => any` |
 | `SelectorFn<TInput, TOutput>` | Selector function signature for `createSelector` |
+| `CreateSelectorFn` | Overloaded interface for `Anu.store.createSelector` — enables full type inference on transformation parameters |
 | `ApiSuccessResponse<T>` | Successful HTTP response `{ status: number; response: T \| null }` |
 | `ApiErrorResponse` | Error HTTP response `{ status: number; response: null }` |
 
@@ -136,7 +144,8 @@ The following types are exported from `anu-verzum` for use in consumer projects:
 These scripts are available when working on the library itself:
 
 ```bash
-npm run build       # Compile TypeScript sources to dist/ and emit .d.ts files
+npm run clean       # Delete dist/ entirely
+npm run build       # Clean, compile TypeScript sources to dist/, and emit .d.ts files
 npm run typecheck   # Type-check without emitting any output
 npm run lint        # Run ESLint on all source files
 npm run format      # Format all source files with Prettier
@@ -1625,45 +1634,37 @@ It takes a <code>context</code> argument which can be reached later as <code>con
 
 <h3 id="usage-of-context-provider-and-consumers">Usage of the context provider and its consumer(s)</h3>
 
-- Context props defined on <code>&lt;ThemedContext.ContextProvider /&gt;</code> can be accessed from within the function child of the <code>&lt;ThemedContext.ContextConsumer /&gt;</code> as <code>context.value</code>.
+- Context props defined on <code>&lt;ThemedContext.Provider /&gt;</code> can be accessed from within the function child of the <code>&lt;ThemedContext.Consumer /&gt;</code> as <code>context.value</code>.
 - Context providers can have multiple context consumer descendents.
 - Context consumers can have one function-as-a-child (which takes the <code>context</code> as argument) which must return a valid HTML, inline-SVG element, component (either class-based or function) or <code>null</code>.
 - You can have as many elements between the context provider and consumer(s), as you want.<br>
 No need to pass the <code>context</code> all the way down within the "props flow"; the function child of the context consumer will have access to it by default.<br>
 It allows you to create your "intermediate" components without depending from the <code>context</code> (they don't need to be aware of it if they have nothing to do with it...).
+- In TypeScript projects use <code>Provider</code> / <code>Consumer</code> — the callback argument type is inferred from the `createContext<T>()` type parameter, so no manual annotation is needed.
+- **Avoid** <code>ContextProvider</code> / <code>ContextConsumer</code> in TypeScript projects. These aliases exist for internal use (e.g. by `Intl` and `Feature` modules) but carry looser types: the consumer callback argument is typed as `Props` instead of `ContextValue<T>`, so you lose type inference on `context.value` and `context.defaultContext`.
 
     ```typescript
-    import Anu, { AnuElement, ContextValue } from 'anu-verzum';
+    import Anu, { AnuElement } from 'anu-verzum';
 
     const ComponentWithContext = (): AnuElement => {
         const theme2 = 'Theme-2';
         return (
-            <ThemedContext.ContextProvider theme={theme2}>
+            <ThemedContext.Provider theme={theme2}>
                 <MyComponent1>
                     <MyComponentN>
-                        <ThemedContext.ContextConsumer>
-                            {(context: ContextValue<ThemeContextValue>) => {
-                                const {
-                                    value: {
-                                        theme // "Theme-2"
-                                    },
-                                    defaultContext: {
-                                        value: {
-                                            theme: defaultTheme // "Theme-1"
-                                        }
-                                    }
-                                } = context;
-                                return (
-                                    <Anu.Fragment>
-                                        <span>{theme}</span>
-                                        <span>{defaultTheme}</span>
-                                    </Anu.Fragment>
-                                );
-                            }}
-                        </ThemedContext.ContextConsumer>
+                        <ThemedContext.Consumer>
+                            {({ value: { theme }, defaultContext: { value: { theme: defaultTheme } } }) => (
+                                // context type is inferred as ContextValue<ThemeContextValue>
+                                // theme → "Theme-2", defaultTheme → "Theme-1"
+                                <Anu.Fragment>
+                                    <span>{theme}</span>
+                                    <span>{defaultTheme}</span>
+                                </Anu.Fragment>
+                            )}
+                        </ThemedContext.Consumer>
                     </MyComponentN>
                 </MyComponent1>
-            </ThemedContext.ContextProvider>
+            </ThemedContext.Provider>
         );
     };
     ```
@@ -1820,10 +1821,11 @@ it should return that part, with the updated desired values:
 
 - Selectors are memoized functions which come handy if you need to do expensive calculations or conversions on the global state.
 - To create selector, use the <code>Anu.store.createSelector()</code> (it comes handy in <code>mapStateToProps()</code> - see <a href="#connector-api">Connecting components to the global state - The Connector API</a> section):
-    - Its first argument is an array of "getter" functions which will return the desired slice of the global state object.
+    - Its first argument is either a single "getter" function or an array of up to four "getter" functions, each returning a desired slice of the global state object.
     These functions must always return something.
-    - The second argument is a "handler" function which take as many arguments as many "getter" functions you defined; these arguments are the return values of the "getter" functions.
-    Their number and order is the same as of the "getters" within the first (array) argument of the <code>Anu.store.createSelector()</code>.
+    - The second argument is a "handler" function which takes as many arguments as "getter" functions you defined; these arguments are the return values of the "getter" functions.
+    Their number and order is the same as of the "getters" within the first argument of the <code>Anu.store.createSelector()</code>.
+    - In TypeScript, when you pass the getter array inline, the handler's parameter types are inferred automatically — no manual annotations needed.
 
         ```typescript
         import Anu, { SelectorFn } from 'anu-verzum';
@@ -1837,17 +1839,18 @@ it should return that part, with the updated desired values:
         const getStatePart1: SelectorFn<MyGlobalState, string> = state => state.myStatePart1;
         const getStatePart2: SelectorFn<MyGlobalState, number[]> = state => state.myStatePart2;
 
-        // Store the getters within an array:
-        const getters = [getStatePart1, getStatePart2];
-
-        // Define the transformation function:
-        const handler = (part1: string, part2: number[]): string => {
-            // Do something with the state-parts and return the result:
-            return `${part1}: ${part2.join(', ')}`;
-        };
+        // Single getter — transformation receives the getter's return type directly:
+        const mySimpleSelector = Anu.store.createSelector(
+            getStatePart1,
+            (part1) => part1.toUpperCase() // part1 inferred as string
+        );
 
-        // Selector:
-        const mySelector: SelectorFn<MyGlobalState, string> = Anu.store.createSelector(getters, handler);
+        // Multiple getters — pass the array inline so TypeScript can infer a tuple:
+        const mySelector = Anu.store.createSelector(
+            [getStatePart1, getStatePart2],
+            (part1, part2) => `${part1}: ${part2.join(', ')}`
+            // part1 inferred as string, part2 as number[]
+        );
         ```
 
 <h3 id="combining-reducers">Combining reducers</h3>

package/dist/core/components/AnulyticsProvider.js

@@ -206,9 +206,7 @@ class AnulyticsProvider extends _Component.Component {
     }
   }
   render() {
-    const {
-      children
-    } = this.props;
+    const children = this.props.children;
     try {
       if (!children || children.length !== 1) {
         throw new Error('Provider must have one child element!');

package/dist/core/components/Connector.js

@@ -32,9 +32,7 @@ class Provider extends _Component.Component {
     });
   }
   render() {
-    const {
-      children
-    } = this.props;
+    const children = this.props.children;
     try {
       if (!children || children.length !== 1) {
         throw new Error('Provider must have one child element!');

package/dist/core/components/Context.d.ts

@@ -1,15 +1,18 @@
 import { Component } from './Component';
-import { Props } from '../elements';
+import { AnuElement, Props } from '../elements';
 export type ContextValue<T> = {
     value: Partial<T>;
     defaultContext: {
         value: T;
     };
 };
-export type Context = {
-    Provider: new (props: Props) => Component;
-    Consumer: new (props: Props) => Component;
+export type ConsumerProps<T> = {
+    children: (ctx: ContextValue<T>) => AnuElement | null;
+};
+export type Context<T extends Record<string, any> = Record<string, any>> = {
+    Provider: new (props: Props & Partial<T>) => Component;
+    Consumer: new (props: ConsumerProps<T>) => Component;
     ContextProvider: new (props: Props) => Component;
     ContextConsumer: new (props: Props) => Component;
 };
-export declare const createContext: <T extends Record<string, any> = Record<string, any>>(context: T) => Context;
+export declare const createContext: <T extends Record<string, any> = Record<string, any>>(context: T) => Context<T>;

package/dist/core/components/Context.js

@@ -40,9 +40,7 @@ const createContext = context => {
       }
     }
     render() {
-      const {
-        children
-      } = this.props;
+      const children = this.props.children;
       try {
         if (!children || children.length !== 1) {
           throw new Error('Context Component must have exactly one child element!');
@@ -62,9 +60,7 @@ const createContext = context => {
       }
     }
     render() {
-      const {
-        children
-      } = this.props;
+      const children = this.props.children;
       const {
         value,
         defaultContext

package/dist/core/components/Fragment.js

@@ -7,9 +7,7 @@ exports.Fragment = void 0;
 var _Component = require("./Component");
 class Fragment extends _Component.Component {
   render() {
-    const {
-      children
-    } = this.props;
+    const children = this.props.children;
     try {
       if (!children || !children.length) {
         throw new Error('Fragment must have at least one child element!');

package/dist/core/components/Intl.d.ts

@@ -17,8 +17,8 @@ export interface AbbreviateNumberOptions {
 }
 declare const Intl: {
     abbreviateNumber: (value: number, options?: AbbreviateNumberOptions) => string | number;
-    FormattedMessage: ({ id, values, defaultMessage }: FormattedMessageProps) => AnuElement | undefined;
+    FormattedMessage: ({ id, values, defaultMessage }: FormattedMessageProps) => AnuElement;
     formatMessage: (id: string, values?: Record<string, string | number>, defaultMessage?: string) => string;
-    Provider: ({ locale, messages, defaultLocale, children }: IntlProviderProps) => AnuElement | undefined;
+    Provider: ({ locale, messages, defaultLocale, children }: IntlProviderProps) => AnuElement | null;
 };
 export default Intl;

package/dist/core/components/Intl.js

@@ -46,7 +46,7 @@ const IntlProvider = ({
     }
   } catch (err) {
     console.error(err);
-    return undefined;
+    return null;
   }
 };
 const interpolateValues = (text, values) => {
@@ -89,7 +89,7 @@ const FormattedMessage = ({
     }
   } catch (err) {
     console.error(err);
-    return undefined;
+    return null;
   }
 });
 const formatMessage = (id, values, defaultMessage) => {

package/dist/core/elements.d.ts

@@ -1,6 +1,7 @@
 export declare const TEXT_ELEMENT: "TEXT_ELEMENT";
+export type AnuChild = AnuElement | string | number | boolean | null | undefined;
 export type Props = {
-    children?: AnuElement[];
+    children?: AnuChild | AnuChild[];
     ref?: Ref<any>;
     key?: string | number;
     style?: Partial<CSSStyleDeclaration & Record<string, string>>;

package/dist/index.d.ts

@@ -27,7 +27,7 @@ declare const Anu: {
             };
         }, props?: unknown) => void;
     };
-    createContext: <T extends Record<string, any> = Record<string, any>>(context: T) => import("./core/components/Context").Context;
+    createContext: <T extends Record<string, any> = Record<string, any>>(context: T) => import("./core/components/Context").Context<T>;
     createElement: (type: import(".").ElementType, config: Props | null, ...args: any[]) => AnuElement;
     createRef: <T = any>() => import("./core/reconciler").Ref<T>;
     Component: typeof Component;
@@ -88,9 +88,9 @@ declare const Anu: {
     };
     Intl: {
         abbreviateNumber: (value: number, options?: import(".").AbbreviateNumberOptions) => string | number;
-        FormattedMessage: ({ id, values, defaultMessage }: import("./core/components/Intl").FormattedMessageProps) => AnuElement | undefined;
+        FormattedMessage: ({ id, values, defaultMessage }: import("./core/components/Intl").FormattedMessageProps) => AnuElement;
         formatMessage: (id: string, values?: Record<string, string | number>, defaultMessage?: string) => string;
-        Provider: ({ locale, messages, defaultLocale, children }: import("./core/components/Intl").IntlProviderProps) => AnuElement | undefined;
+        Provider: ({ locale, messages, defaultLocale, children }: import("./core/components/Intl").IntlProviderProps) => AnuElement | null;
     };
     Connector: {
         connect: <TState = any, TOwnProps extends Props = Props, TStateProps extends Props = Props, TDispatchProps extends Props = Props>(mapStateToProps?: ((state: TState, ownProps: TOwnProps) => TStateProps) | null, mapDispatchToProps?: ((dispatch: any, ownProps: TOwnProps) => TDispatchProps) | null) => (WrappedComponent: import("./core/elements").ComponentConstructor<TStateProps & TDispatchProps & TOwnProps>) => import("./core/elements").ComponentConstructor;
@@ -124,7 +124,7 @@ declare const Anu: {
     };
     store: {
         combineReducers: <S extends Record<string, any> = Record<string, any>>(reducers: { [K in keyof S]: import(".").Reducer<S[K]>; }) => import(".").Reducer<S>;
-        createSelector: <TInput = any, TOutput = any>(dependenciesInput: import(".").SelectorFn<TInput> | Array<import(".").SelectorFn<TInput>>, transformation: (...args: any[]) => TOutput) => import(".").SelectorFn<TInput, TOutput>;
+        createSelector: import(".").CreateSelectorFn;
         createStore: <S = any, A extends import(".").Action = import(".").Action>(reducer: import(".").Reducer<S, A>, initialState: S, middleware?: import(".").Middleware<S, A>) => import(".").Store<S, A>;
         middleware: {
             applyMiddleware: <S = any, A extends import(".").Action = import(".").Action>(...middlewares: Array<import(".").Middleware<S, A>>) => (store: import(".").MiddlewareAPI<S, A>) => ((next: import(".").Dispatch<A>) => import(".").Dispatch<A>);
@@ -136,9 +136,9 @@ declare const Anu: {
         deepEqual: (object1: Record<string, any>, object2: Record<string, any>) => boolean;
     };
 };
-export type { AnuElement, Props, Ref, FunctionComponent, ElementType } from './core/elements';
-export type { ContextValue } from './core/components/Context';
-export type { Action, ThunkAction, Dispatch, Reducer, MiddlewareAPI, Middleware, Store, SelectorFn } from './store/store';
+export type { AnuElement, AnuChild, Props, Ref, FunctionComponent, ElementType } from './core/elements';
+export type { ContextValue, ConsumerProps } from './core/components/Context';
+export type { Action, ThunkAction, Dispatch, Reducer, MiddlewareAPI, Middleware, Store, SelectorFn, CreateSelectorFn } from './store/store';
 export type { ApiSuccessResponse, ApiErrorResponse } from './server-api/server-api';
 export { Component, Fragment, createElement, createRef, createContext, render, goTo };
 export { AnulyticsProvider, trackEvent };

package/dist/store/store.d.ts

@@ -17,9 +17,16 @@ export type Store<S = any, A extends Action = Action> = {
     unsubscribe: (listener: () => void) => void;
 };
 export type SelectorFn<TInput = any, TOutput = any> = (input: TInput) => TOutput;
+export interface CreateSelectorFn {
+    <TInput, TI, TOutput>(dep: SelectorFn<TInput, TI>, fn: (r: TI) => TOutput): SelectorFn<TInput, TOutput>;
+    <TInput, T1, TOutput>(deps: [SelectorFn<TInput, T1>], fn: (r1: T1) => TOutput): SelectorFn<TInput, TOutput>;
+    <TInput, T1, T2, TOutput>(deps: [SelectorFn<TInput, T1>, SelectorFn<TInput, T2>], fn: (r1: T1, r2: T2) => TOutput): SelectorFn<TInput, TOutput>;
+    <TInput, T1, T2, T3, TOutput>(deps: [SelectorFn<TInput, T1>, SelectorFn<TInput, T2>, SelectorFn<TInput, T3>], fn: (r1: T1, r2: T2, r3: T3) => TOutput): SelectorFn<TInput, TOutput>;
+    <TInput, T1, T2, T3, T4, TOutput>(deps: [SelectorFn<TInput, T1>, SelectorFn<TInput, T2>, SelectorFn<TInput, T3>, SelectorFn<TInput, T4>], fn: (r1: T1, r2: T2, r3: T3, r4: T4) => TOutput): SelectorFn<TInput, TOutput>;
+}
 declare const store: {
     combineReducers: <S extends Record<string, any> = Record<string, any>>(reducers: { [K in keyof S]: Reducer<S[K]>; }) => Reducer<S>;
-    createSelector: <TInput = any, TOutput = any>(dependenciesInput: SelectorFn<TInput> | Array<SelectorFn<TInput>>, transformation: (...args: any[]) => TOutput) => SelectorFn<TInput, TOutput>;
+    createSelector: CreateSelectorFn;
     createStore: <S = any, A extends Action = Action>(reducer: Reducer<S, A>, initialState: S, middleware?: Middleware<S, A>) => Store<S, A>;
     middleware: {
         applyMiddleware: <S = any, A extends Action = Action>(...middlewares: Array<Middleware<S, A>>) => (store: MiddlewareAPI<S, A>) => ((next: Dispatch<A>) => Dispatch<A>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anu-verzum",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "A \"React-like\" UI library that supports JSX syntax, Redux-like state management, array-rendering, i18n, routing and many more.",
   "keywords": [
     "anu-verzum",
@@ -29,7 +29,8 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "babel src --out-dir dist --extensions \".ts\" --copy-files && tsc --emitDeclarationOnly",
+    "clean": "node -e \"require('fs').rmSync('dist', {recursive:true, force:true})\"",
+    "build": "npm run clean && babel src --out-dir dist --extensions \".ts\" && tsc --emitDeclarationOnly",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "format": "prettier --write src",

package/dist/core/components/AnulyticsProvider.ts

@@ -1,271 +0,0 @@
-import { Component } from './Component';
-import { AnuElement, Props } from '../elements';
-import ServerAPI from '../../server-api/server-api';
-
-const EventTypes = {
-    INITIALIZATION: 'initialization',
-    USER_ACTION: 'userAction',
-    STATE_CHANGE: 'stateChange',
-    NAVIGATION: 'navigation',
-    PAGE_LEAVE: 'pageLeave'
-} as const;
-
-type AnulyticsData = {
-    startDate: number;
-    events: Array<Record<string, any>>;
-    user: Record<string, any>;
-};
-
-type UserActionEvent = {
-    type: string;
-    keyCode?: number | null;
-    pageX?: number;
-    pageY?: number;
-    target?: {
-        id?: string;
-        name?: string;
-        nodeName?: string;
-        value?: string;
-    };
-};
-
-const AnulyticsState = (() => {
-    const initStart = new Date().getTime();
-    let _anulyticsInstanceExist = false;
-
-    const setAnulyticsInstanceExist = (instanceExist: boolean): void => {
-        _anulyticsInstanceExist = instanceExist;
-    };
-
-    const getAnulyticsInstanceExist = (): boolean => _anulyticsInstanceExist;
-
-    const _anulytics: AnulyticsData = {
-        startDate: initStart,
-        events: [
-            {
-                [EventTypes.INITIALIZATION]: {
-                    eventType: window.location.pathname,
-                    timestamp: initStart,
-                    properties: {}
-                }
-            }
-        ],
-        user: {}
-    };
-
-    return {
-        getAnulyticsInstanceExist,
-        setAnulyticsInstanceExist,
-        addEvent: (key: string, val: Record<string, any>): void => {
-            _anulytics.events.push({ [key]: val });
-        },
-        trackEvent: (
-            {
-                type,
-                keyCode = null,
-                pageX = 0,
-                pageY = 0,
-                target: { id = '', name = '', nodeName = '', value = '' } = {}
-            }: UserActionEvent,
-            rawProps: unknown
-        ): void => {
-            const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-            const scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
-            const props =
-                typeof rawProps === 'object' && !Array.isArray(rawProps) && rawProps !== null
-                    ? (rawProps as Record<string, any>)
-                    : null;
-
-            const event = {
-                [EventTypes.USER_ACTION]: {
-                    eventType: type,
-                    timestamp: new Date().getTime(),
-                    properties: {
-                        id,
-                        keyCode,
-                        name,
-                        nodeName,
-                        value,
-                        pageX,
-                        pageY,
-                        scrollTop,
-                        scrollLeft,
-                        url: window.location.pathname,
-                        props
-                    }
-                }
-            };
-
-            _anulytics.events.push(event);
-        },
-        trackStateChange: (
-            prevState: Record<string, any>,
-            action: Record<string, any>,
-            nextState: Record<string, any>
-        ): void => {
-            const event = {
-                [EventTypes.STATE_CHANGE]: {
-                    eventType: action['type'],
-                    timestamp: new Date().getTime(),
-                    properties: {
-                        url: window.location.pathname,
-                        prevState,
-                        action,
-                        nextState
-                    }
-                }
-            };
-
-            _anulytics.events.push(event);
-        },
-        setUser: (user: Record<string, any> | null | undefined): void => {
-            _anulytics.user = user || {};
-        },
-        getAnulyticsData: (): AnulyticsData => _anulytics
-    };
-})();
-
-const _isBot: boolean = !!(
-    (window as any).phantom ||
-    (window as any)._phantom ||
-    (window as any).__nightmare ||
-    window.navigator.webdriver ||
-    (window as any).Cypress
-);
-
-const _isInstalled = (): boolean => {
-    if ((window.navigator as any).standalone) {
-        return true;
-    }
-
-    if (window.matchMedia('(display-mode: standalone)').matches) {
-        return true;
-    }
-
-    return false;
-};
-
-export const trackEvent = (event: UserActionEvent, props?: unknown): void => {
-    if (AnulyticsState.getAnulyticsInstanceExist()) {
-        AnulyticsState.trackEvent(event, props);
-    }
-};
-
-export const trackStateChange = (
-    prevState: Record<string, any>,
-    action: Record<string, any>,
-    nextState: Record<string, any>
-): void => {
-    if (AnulyticsState.getAnulyticsInstanceExist()) {
-        AnulyticsState.trackStateChange(prevState, action, nextState);
-    }
-};
-
-export const trackRouteChange = (path?: string): void => {
-    if (AnulyticsState.getAnulyticsInstanceExist()) {
-        const url = path || window.location.pathname;
-        const event = {
-            eventType: url,
-            timestamp: new Date().getTime(),
-            properties: {}
-        };
-
-        AnulyticsState.addEvent(EventTypes.NAVIGATION, event);
-    }
-};
-
-export interface AnulyticsProviderProps extends Props {
-    analyticsUrl: string;
-    userData?: Record<string, any>;
-    onSuccess: (response: any) => void;
-    onFail: (status: number) => void;
-}
-
-class AnulyticsProvider extends Component<AnulyticsProviderProps> {
-    constructor(props: AnulyticsProviderProps) {
-        super(props);
-        AnulyticsState.setAnulyticsInstanceExist(true);
-        this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
-    }
-
-    componentDidMount(): void {
-        const { userData } = this.props;
-        AnulyticsState.setUser(userData || null);
-
-        document.addEventListener('visibilitychange', this.handleVisibilityChange, {
-            passive: true
-        });
-    }
-
-    componentWillUnmount(): void {
-        document.removeEventListener('visibilitychange', this.handleVisibilityChange as EventListener);
-        AnulyticsState.setAnulyticsInstanceExist(false);
-    }
-
-    handleVisibilityChange(): void {
-        const { analyticsUrl, onSuccess, onFail } = this.props;
-
-        if (_isBot) {
-            return;
-        }
-
-        if (document.visibilityState === 'hidden') {
-            const url = window.location.pathname;
-            const event = {
-                eventType: url,
-                timestamp: new Date().getTime(),
-                properties: {}
-            };
-            let ua: { userAgent: any; mobile: boolean; platform: string };
-
-            AnulyticsState.addEvent(EventTypes.PAGE_LEAVE, event);
-
-            if ((window.navigator as any).userAgentData) {
-                const { brands, mobile, platform } = (window.navigator as any).userAgentData;
-
-                ua = { userAgent: brands, mobile, platform };
-            } else {
-                ua = {
-                    userAgent: window.navigator.userAgent,
-                    mobile: false,
-                    platform: ''
-                };
-            }
-
-            const data = {
-                ...AnulyticsState.getAnulyticsData(),
-                endDate: new Date().getTime(),
-                system: {
-                    referrer: document.referrer || null,
-                    innerWidth: window.innerWidth,
-                    isMobileAppInstalled: _isInstalled(),
-                    userAgentData: ua
-                }
-            };
-
-            ServerAPI.post(analyticsUrl, data)
-                .then(({ response }) => onSuccess(response))
-                .catch(({ status }) => onFail(status));
-        } else {
-            this.setState();
-        }
-    }
-
-    render(): AnuElement | AnuElement[] | null {
-        const { children } = this.props;
-
-        try {
-            if (!children || children.length !== 1) {
-                throw new Error('Provider must have one child element!');
-            }
-
-            return children;
-        } catch (err) {
-            console.error(err);
-
-            return null;
-        }
-    }
-}
-
-export default AnulyticsProvider;