@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.7

package/hoc/index.d.ts

@@ -0,0 +1,8 @@
+import application from './application';
+import bem from './bem';
+import components from './components';
+import connect from './connect';
+import fetch from './fetch';
+import http from './http';
+import layout from './layout';
+export { application, bem, components, connect, fetch, http, layout, };

package/hoc/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.layout = exports.http = exports.fetch = exports.connect = exports.components = exports.bem = exports.application = void 0;
+var application_1 = __importDefault(require("./application"));
+exports.application = application_1["default"];
+var bem_1 = __importDefault(require("./bem"));
+exports.bem = bem_1["default"];
+var components_1 = __importDefault(require("./components"));
+exports.components = components_1["default"];
+var connect_1 = __importDefault(require("./connect"));
+exports.connect = connect_1["default"];
+var fetch_1 = __importDefault(require("./fetch"));
+exports.fetch = fetch_1["default"];
+var http_1 = __importDefault(require("./http"));
+exports.http = http_1["default"];
+var layout_1 = __importDefault(require("./layout"));
+exports.layout = layout_1["default"];

package/hoc/layout.d.ts

@@ -0,0 +1,30 @@
+import { IComponentsHocOutput } from './components';
+import { IRouteItem } from '../ui/nav/Router/Router';
+/**
+ * Layout HOC
+ * Используется для макета (layout) приложения, добавляя в него данные авторизации и статуса рендера страницы.
+ * Передаваемый первым аргументом `initAction` будет вызываться каждый раз, когда необходимо обновить данные
+ * авторизации (первая загрузка страницы, логин/регистация и выход).
+ */
+export interface ILayoutHocInput {
+    route?: IRouteItem;
+    user?: {
+        role: string;
+    };
+    data?: Record<string, unknown>;
+    initializeCounter?: number;
+    components: IComponentsHocOutput;
+    isInitialized?: boolean;
+    redirectPageId?: any;
+}
+export interface ILayoutHocOutput {
+    http?: any;
+    status: string;
+    renderError: string;
+    route: IRouteItem;
+    user: any;
+    data: any;
+    isInitialized: boolean;
+}
+declare const _default: (initAction?: any) => any;
+export default _default;

package/hoc/layout.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var useLayout_1 = __importDefault(require("../hooks/useLayout"));
+exports["default"] = (function (initAction) {
+    if (initAction === void 0) { initAction = null; }
+    return function (WrappedComponent) { return function LayoutHoc(props) {
+        var layoutProps = useLayout_1["default"](initAction);
+        return (React.createElement(WrappedComponent, __assign({}, props, { status: layoutProps.status, renderError: layoutProps.error }, layoutProps.data)));
+    }; };
+});

package/hooks/index.d.ts

@@ -0,0 +1,20 @@
+import useAbsolutePositioning from './useAbsolutePositioning';
+import useAddressBar from './useAddressBar';
+import useApplication from './useApplication';
+import useBem from './useBem';
+import useComponents from './useComponents';
+import useDataProvider from './useDataProvider';
+import useDataSelect from './useDataSelect';
+import useDispatch from './useDispatch';
+import useFetch from './useFetch';
+import useFile from './useFile';
+import useForm from './useForm';
+import useInitial from './useInitial';
+import useLayout from './useLayout';
+import useList from './useList';
+import useModel from './useModel';
+import useScreen from './useScreen';
+import useSelector from './useSelector';
+import useSsr from './useSsr';
+import useUniqueId from './useUniqueId';
+export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, };

package/hooks/index.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
+var useAbsolutePositioning_1 = __importDefault(require("./useAbsolutePositioning"));
+exports.useAbsolutePositioning = useAbsolutePositioning_1["default"];
+var useAddressBar_1 = __importDefault(require("./useAddressBar"));
+exports.useAddressBar = useAddressBar_1["default"];
+var useApplication_1 = __importDefault(require("./useApplication"));
+exports.useApplication = useApplication_1["default"];
+var useBem_1 = __importDefault(require("./useBem"));
+exports.useBem = useBem_1["default"];
+var useComponents_1 = __importDefault(require("./useComponents"));
+exports.useComponents = useComponents_1["default"];
+var useDataProvider_1 = __importDefault(require("./useDataProvider"));
+exports.useDataProvider = useDataProvider_1["default"];
+var useDataSelect_1 = __importDefault(require("./useDataSelect"));
+exports.useDataSelect = useDataSelect_1["default"];
+var useDispatch_1 = __importDefault(require("./useDispatch"));
+exports.useDispatch = useDispatch_1["default"];
+var useFetch_1 = __importDefault(require("./useFetch"));
+exports.useFetch = useFetch_1["default"];
+var useFile_1 = __importDefault(require("./useFile"));
+exports.useFile = useFile_1["default"];
+var useForm_1 = __importDefault(require("./useForm"));
+exports.useForm = useForm_1["default"];
+var useInitial_1 = __importDefault(require("./useInitial"));
+exports.useInitial = useInitial_1["default"];
+var useLayout_1 = __importDefault(require("./useLayout"));
+exports.useLayout = useLayout_1["default"];
+var useList_1 = __importDefault(require("./useList"));
+exports.useList = useList_1["default"];
+var useModel_1 = __importDefault(require("./useModel"));
+exports.useModel = useModel_1["default"];
+var useScreen_1 = __importDefault(require("./useScreen"));
+exports.useScreen = useScreen_1["default"];
+var useSelector_1 = __importDefault(require("./useSelector"));
+exports.useSelector = useSelector_1["default"];
+var useSsr_1 = __importDefault(require("./useSsr"));
+exports.useSsr = useSsr_1["default"];
+var useUniqueId_1 = __importDefault(require("./useUniqueId"));
+exports.useUniqueId = useUniqueId_1["default"];

package/hooks/useAbsolutePositioning.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+interface IStyleObj {
+    left: 'unset' | number;
+    right: 'unset' | number;
+    top: 'unset' | number;
+}
+/**
+ * Варианты абсолютного позиционирования
+ * @example 'top'
+ */
+declare type Position = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
+export interface IAbsolutePositioningInputProps {
+    /**
+     * Включает "умное" позиционирование - если компонент не может быть помещен в промежуток между целевым компонентом
+     * и краем viewport, тогда он будет показан в противоположном направлении от заданного в свойстве position.
+     */
+    autoPositioning?: boolean;
+    /**
+     * Дочерние элементы
+     */
+    children?: React.ReactNode;
+    /**
+     * Задержка перед размонтированием компонента, когда он должен быть скрыт.
+     * В этот момент удобно применять различные анимации ухода.
+     */
+    componentDestroyDelay?: number;
+    /**
+     * Промежуток между компонентом и целевым элементом.
+     * Используется в рассчетах позиционирования.
+     */
+    gap?: number;
+    /**
+     * Позиционирование компонента, относительно целевого элемента
+     */
+    position: Position;
+    /**
+     * Отобразить или скрыть компонент.
+     * Включает "ручной режим", при котором можно задать логику отображения компонента извне,
+     * через измененение данного свойства.
+     */
+    visible?: boolean;
+    /**
+     * Обработчик изменения свойства isComponentVisible (отображение на странице).
+     * Возвращает значение isComponentVisible.
+     */
+    onVisibleChange?: (isComponentVisible: boolean) => void;
+    /**
+     * Срабатывает в "ручном режиме", при клике за пределами компонента и целевого элемента.
+     * Возвращает значение visible.
+     */
+    onClose?: () => void;
+}
+export interface IAbsolutePositioningOutputProps {
+    /**
+     * Нужно ли рендерить компонент
+     */
+    isComponentExist: boolean;
+    /**
+     * Нужно ли показывать компонент на странице
+     */
+    isComponentVisible: boolean;
+    /**
+     * Объект стилей для абсолютного позиционирования
+     */
+    style: IStyleObj;
+}
+export default function useAbsolutePositioning(props: IAbsolutePositioningInputProps): {
+    isComponentExist: boolean;
+    isComponentVisible: boolean;
+    style: IStyleObj;
+    position: string;
+    calculateAbsolutePosition: (newPosition: Position, childRef: any, componentSize: any) => void;
+    onShow: () => void;
+    onHide: () => void;
+};
+export {};

package/hooks/useAbsolutePositioning.js

@@ -0,0 +1,185 @@
+"use strict";
+exports.__esModule = true;
+var react_1 = require("react");
+function useAbsolutePositioning(props) {
+    var _a = react_1.useState(props.visible), isComponentExist = _a[0], setIsComponentExist = _a[1];
+    var _b = react_1.useState(props.visible), isComponentVisible = _b[0], setIsComponentVisible = _b[1];
+    var _c = react_1.useState(props.position), position = _c[0], setPosition = _c[1];
+    var _d = react_1.useState({
+        left: null,
+        right: null,
+        top: null
+    }), style = _d[0], setStyle = _d[1];
+    var timerRef = react_1.useRef(null);
+    var calculateAbsolutePosition = react_1.useCallback(function (newPosition, childRef, componentSize) {
+        var newStyle = { left: null, right: null, top: null };
+        var _a = childRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;
+        var parentDimensions = { top: top, right: right, left: left, width: width, height: height };
+        parentDimensions.top += window.scrollY;
+        var useAutoPositioning = props.autoPositioning;
+        // eslint-disable-next-line default-case
+        switch (newPosition) {
+            case 'top':
+            case 'topLeft':
+            case 'topRight':
+                // Проверка - выходит ли tooltip за верхний край страницы?
+                // Если да - меняем позицию на bottom
+                if (useAutoPositioning && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + props.gap))) {
+                    newStyle.top = parentDimensions.top + parentDimensions.height;
+                    newPosition = newPosition.replace('top', 'bottom');
+                }
+                else {
+                    newStyle.top = parentDimensions.top - componentSize.height;
+                }
+                break;
+            case 'bottom':
+            case 'bottomLeft':
+            case 'bottomRight':
+                // Проверка - выходит ли tooltip за нижний край страницы?
+                // Если да - меняем позицию на top
+                if (useAutoPositioning && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)))
+                    <= Math.round(componentSize.height + props.gap)) {
+                    newStyle.top = parentDimensions.top - componentSize.height;
+                    newPosition = newPosition.replace('bottom', 'top');
+                }
+                else {
+                    newStyle.top = parentDimensions.top + parentDimensions.height;
+                }
+                break;
+            case 'left':
+            case 'leftTop':
+            case 'leftBottom':
+                // Проверка - выходит ли tooltip за левый край страницы?
+                // Если да - меняем позицию на right
+                if (useAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + props.gap))) {
+                    newStyle.left = parentDimensions.right;
+                    newPosition = newPosition.replace('left', 'right');
+                }
+                else {
+                    newStyle.left = parentDimensions.left - componentSize.width;
+                }
+                break;
+            case 'right':
+            case 'rightTop':
+            case 'rightBottom':
+                // Проверка - выходит ли tooltip за правый край страницы?
+                // Если да - меняем позицию на left
+                if (useAutoPositioning && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + props.gap))) {
+                    newStyle.left = parentDimensions.left - componentSize.width;
+                    newPosition = newPosition.replace('right', 'left');
+                }
+                else {
+                    newStyle.left = parentDimensions.right;
+                }
+                break;
+        }
+        // eslint-disable-next-line default-case
+        switch (newPosition) {
+            case 'top':
+            case 'bottom':
+                // Выравнивание по середине
+                newStyle.left = (parentDimensions.left + (parentDimensions.width / 2)) - (componentSize.width / 2);
+                break;
+            case 'topLeft':
+            case 'bottomLeft':
+                // Ширина tooltip больше родителя - стрелка на середину родителя
+                newStyle.left = parentDimensions.left;
+                break;
+            case 'topRight':
+            case 'bottomRight':
+                // Ширина tooltip больше родителя - стрелка на середину родителя
+                newStyle.right = document.body.clientWidth - parentDimensions.right;
+                break;
+            case 'left':
+            case 'right':
+                newStyle.top = (parentDimensions.top + (parentDimensions.height / 2)) - (componentSize.height / 2);
+                break;
+            case 'leftTop':
+            case 'rightTop':
+                newStyle.top = parentDimensions.top;
+                break;
+            case 'leftBottom':
+            case 'rightBottom':
+                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
+                break;
+        }
+        // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
+        if (newPosition.includes('top') || newPosition.includes('bottom')) {
+            if (!newPosition.includes('Left')
+                && (newStyle.left < 0 || parentDimensions.left
+                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
+                newStyle.right = null;
+                newPosition = newPosition.replace('Right', 'Left');
+                newStyle.left = parentDimensions.left;
+            }
+            if (!newPosition.includes('Right')
+                && (document.body.clientWidth - parentDimensions.right
+                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
+                newPosition = newPosition.replace('Left', 'Right');
+                newStyle.left = null;
+                newStyle.right = document.body.clientWidth - parentDimensions.right;
+            }
+        }
+        // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
+        if (newPosition.includes('left') || newPosition.includes('right')) {
+            if (!newPosition.includes('Top')
+                && parentDimensions.top - window.scrollY
+                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap)) {
+                newPosition = newPosition.replace('Bottom', 'Top');
+                newStyle.top = parentDimensions.top;
+            }
+            if (!newPosition.includes('Bottom')
+                && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
+                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap))) {
+                newPosition = newPosition.replace('Top', 'Bottom');
+                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
+            }
+        }
+        setStyle(newStyle);
+        setPosition(newPosition);
+    }, [props.gap]);
+    var onShow = react_1.useCallback(function () {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        setIsComponentExist(true);
+        setIsComponentVisible(false);
+        // TODO: How to wait setState callback?
+        setTimeout(function () { return setIsComponentVisible(true); });
+    }, []);
+    var onHide = react_1.useCallback(function () {
+        setIsComponentVisible(false);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        // TODO add time value to props
+        timerRef.current = setTimeout(function () { return setIsComponentExist(false); }, props.componentDestroyDelay);
+    }, [props.componentDestroyDelay]);
+    // Trigger on visible
+    react_1.useEffect(function () {
+        if (props.visible) {
+            onShow();
+        }
+        else {
+            onHide();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.visible]);
+    // Trigger on isComponentVisible
+    react_1.useEffect(function () {
+        if (props.onVisibleChange) {
+            props.onVisibleChange(isComponentVisible);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isComponentVisible]);
+    return {
+        isComponentExist: isComponentExist,
+        isComponentVisible: isComponentVisible,
+        style: style,
+        position: position,
+        calculateAbsolutePosition: calculateAbsolutePosition,
+        onShow: onShow,
+        onHide: onHide
+    };
+}
+exports["default"] = useAbsolutePositioning;

package/hooks/useAddressBar.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="connected-react-router" />
+import { Model } from '../components/MetaComponent';
+export declare type ListControlPosition = 'top' | 'bottom' | 'both' | string;
+export interface IAddressBarConfig {
+    enable?: boolean;
+    useHash?: boolean;
+    model?: Model;
+}
+export interface IAddressBarOutput {
+    initialQuery: Record<string, unknown>;
+    updateQuery: (values: Record<string, unknown>) => void;
+}
+export declare const defaultFromStringConverter: (value: any, type: any, item: any) => any;
+export declare const defaultToStringConverter: (value: any, type: any, item: any) => string;
+export declare const queryRestore: (model: Model, location: any, useHash: any) => {};
+/**
+ * WARNING
+ * Method incorrectly saves nested objects (e.g. {foo: [{bar: 1}]}
+ * // @todo use 'qs' library instead of 'query-string'
+ *
+ */
+export declare const queryReplace: (model: Model, location: any, values: any, useHash: any) => any[] | import("connected-react-router").CallHistoryMethodAction<[any, any?]>;
+export default function useAddressBar(config: IAddressBarConfig): IAddressBarOutput;

package/hooks/useAddressBar.js

@@ -0,0 +1,149 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.queryReplace = exports.queryRestore = exports.defaultToStringConverter = exports.defaultFromStringConverter = void 0;
+var get_1 = __importDefault(require("lodash-es/get"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var query_string_1 = __importDefault(require("query-string"));
+var connected_react_router_1 = require("connected-react-router");
+var toInteger_1 = __importDefault(require("lodash-es/toInteger"));
+var has_1 = __importDefault(require("lodash-es/has"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var react_1 = require("react");
+var useSelector_1 = __importDefault(require("../hooks/useSelector"));
+var useDispatch_1 = __importDefault(require("../hooks/useDispatch"));
+var ARRAY_VALUE_SEPARATOR = '_';
+var defaultFromStringConverter = function (value, type, item) {
+    type = type || '';
+    // Array
+    if (type.substr(-2) === '[]') {
+        var subType_1 = type.substr(0, type.length - 2);
+        return value
+            ? value.split(ARRAY_VALUE_SEPARATOR).map(function (v) { return exports.defaultFromStringConverter(v, subType_1, item); })
+            : null;
+    }
+    // Single
+    switch (type) {
+        case 'number':
+            return value || String(value) === '0' ? toInteger_1["default"](value) : null;
+        case 'boolean':
+            return ['1', 't', 'y'].includes(String(value).substr(0, 1)) || null;
+        default:
+        case 'string':
+            return value ? String(value) : null;
+    }
+};
+exports.defaultFromStringConverter = defaultFromStringConverter;
+var defaultToStringConverter = function (value, type, item) {
+    type = type || '';
+    // Array
+    if (type.substr(-2) === '[]') {
+        return value
+            ? [].concat(value || []).join(ARRAY_VALUE_SEPARATOR)
+            : null;
+    }
+    // Single
+    switch (type) {
+        case 'boolean':
+            return value ? '1' : null;
+        default:
+        case 'string':
+        case 'number':
+            return value ? String(value) : null;
+    }
+};
+exports.defaultToStringConverter = defaultToStringConverter;
+var queryRestore = function (model, location, useHash) {
+    var values = query_string_1["default"].parse(useHash ? location.hash : location.search);
+    var result = {};
+    var attributes = (model === null || model === void 0 ? void 0 : model.attributes) || Object.keys(values);
+    attributes.forEach(function (item) {
+        if (typeof item === 'string') {
+            item = { attribute: item };
+        }
+        var defaultValue = has_1["default"](item, 'defaultValue') ? item.defaultValue : null;
+        var converter = item.fromStringConverter || exports.defaultFromStringConverter;
+        var value = converter(values[item.attribute], item.jsType || 'string', item);
+        if (value !== null || defaultValue !== null) {
+            result[item.attribute] = value !== null ? value : defaultValue;
+        }
+    });
+    return result;
+};
+exports.queryRestore = queryRestore;
+/**
+ * WARNING
+ * Method incorrectly saves nested objects (e.g. {foo: [{bar: 1}]}
+ * // @todo use 'qs' library instead of 'query-string'
+ *
+ */
+var queryReplace = function (model, location, values, useHash) {
+    var result = {};
+    var attributes = (model === null || model === void 0 ? void 0 : model.attributes) || Object.keys(values);
+    attributes.forEach(function (item) {
+        if (typeof item === 'string') {
+            item = { attribute: item };
+        }
+        var defaultValue = has_1["default"](item, 'defaultValue') ? item.defaultValue : null;
+        if ((values === null || values === void 0 ? void 0 : values[item.attribute]) !== defaultValue) {
+            var converter = item.toStringConverter || exports.defaultToStringConverter;
+            var value = converter(values === null || values === void 0 ? void 0 : values[item.attribute], item.jsType || 'string', item);
+            if (value !== null) {
+                result[item.attribute] = value;
+            }
+        }
+    });
+    var query = query_string_1["default"].stringify(result);
+    if (useHash) {
+        // TODO May be window.location?
+        query = '#' + query;
+        if (location.hash !== query) {
+            location.hash = query;
+        }
+        return [];
+    }
+    query = '?' + query;
+    if (location.search !== query) {
+        return connected_react_router_1.replace(location.pathname + query);
+    }
+    return [];
+};
+exports.queryReplace = queryReplace;
+function useAddressBar(config) {
+    // Get location from redux
+    var location = useSelector_1["default"](function (state) { return get_1["default"](state, 'router.location') || null; });
+    // Initial query
+    var initialQueryRef = react_1.useRef(null);
+    if (!initialQueryRef.current && config.enable) {
+        initialQueryRef.current = exports.queryRestore(config.model, location, config.useHash);
+    }
+    // Update handler
+    var dispatch = useDispatch_1["default"]();
+    var updateQuery = react_1.useCallback(function (values) {
+        if (config.enable) {
+            // Remove all 'undefined' values or empty objects/arrays from passed form values
+            var normalizedValues = Object.keys(values).reduce(function (obj, key) {
+                var value = values[key];
+                var isValidValue = typeof value === 'object'
+                    ? !isEmpty_1["default"](value)
+                    : value !== undefined;
+                if (isValidValue) {
+                    obj[key] = value;
+                }
+                return obj;
+            }, {});
+            if (!isEqual_1["default"](initialQueryRef.current, normalizedValues)) {
+                initialQueryRef.current = normalizedValues;
+                dispatch(exports.queryReplace(config.model, location, normalizedValues, config.useHash));
+            }
+        }
+    }, [config.enable, config.model, config.useHash, dispatch, location]);
+    // TODO
+    return {
+        initialQuery: initialQueryRef.current,
+        updateQuery: updateQuery
+    };
+}
+exports["default"] = useAddressBar;

package/hooks/useApplication.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import ClientStorageComponent from '../components/ClientStorageComponent';
+import HtmlComponent from '../components/HtmlComponent';
+import StoreComponent from '../components/StoreComponent';
+import UiComponent from '../components/UiComponent';
+import MetaComponent from '../components/MetaComponent';
+import { IComponents } from '../providers/ComponentsProvider';
+import { IRouteItem } from '../ui/nav/Router/Router';
+import MetricsComponent from '../components/MetricsComponent';
+import { IScreenProviderProps } from '../providers/ScreenProvider';
+import { IFetchConfig } from '../hooks/useFetch';
+/**
+ * Application HOC
+ * Обертка над корневым компонентом приложения, используется только в `Application.tsx`. Добавляет через React Context
+ * компоненты приложения и конфигурирует их.
+ */
+export interface IApplicationHookConfig {
+    components?: {
+        [key: string]: {
+            className: any;
+            [key: string]: any;
+        } | any;
+    } | any;
+    onInit?: (components: IComponents) => void;
+    useGlobal?: boolean;
+    reducers?: any;
+    routes?: () => IRouteItem;
+    layoutView?: () => CustomView;
+    layoutProps?: Record<string, unknown>;
+    screen?: boolean | Omit<IScreenProviderProps, 'children'>;
+    /**
+     * These fetch configurations will be used to preload and store for no matter what route matched in case of SSR
+     */
+    defaultFetches?: IFetchConfig[];
+}
+export interface IApplicationHookResult {
+    renderApplication: (children?: any) => JSX.Element;
+    components: IComponents;
+}
+export declare const defaultComponents: {
+    clientStorage: {
+        className: typeof ClientStorageComponent;
+    };
+    html: {
+        className: typeof HtmlComponent;
+    };
+    meta: {
+        className: typeof MetaComponent;
+    };
+    store: {
+        className: typeof StoreComponent;
+    };
+    ui: {
+        className: typeof UiComponent;
+    };
+    metrics: {
+        className: typeof MetricsComponent;
+    };
+};
+export default function useApplication(config?: IApplicationHookConfig): IApplicationHookResult;