jordy 0.13.0 → 0.14.2

package/esm5/adaptive-render/DeviceDetectContext.js

@@ -1,3 +1,4 @@
+import { __read } from "tslib";
 import React, { createContext, useContext, useEffect, useMemo, useState, } from 'react';
 import { isMobile as isMobileCheck, isNativeApp as isNativeAppCheck, isServer, isTablet as isTabletCheck, } from '../util/envCheck';
 import { DeviceSizeEnum } from './device.type';
@@ -33,8 +34,8 @@ export var DeviceDetectContext = createContext([
 var DeviceDetectContextProvider = DeviceDetectContext.Provider;
 export var DeviceDetectProvider = function (_a) {
     var children = _a.children;
-    var _b = useState(getIsMobile()), isMobile = _b[0], setIsMobile = _b[1];
-    var _c = useState(getIsTablet()), isTablet = _c[0], setIsTablet = _c[1];
+    var _b = __read(useState(getIsMobile()), 2), isMobile = _b[0], setIsMobile = _b[1];
+    var _c = __read(useState(getIsTablet()), 2), isTablet = _c[0], setIsTablet = _c[1];
     var isNative = useMemo(isNativeAppCheck, []);
     useEffect(function () {
         if (isServer() || !window || typeof window.matchMedia !== 'function') {

package/esm5/hooks/index.js

@@ -1,3 +1,4 @@
 export * from './useDebounce';
 export * from './useQueryParams';
 export * from './useThrottle';
+export * from './useNavigate';

package/esm5/hooks/useNavigate.js

@@ -0,0 +1,49 @@
+import { __assign, __read, __spreadArray } from "tslib";
+import { useCallback } from 'react';
+import { useNavigate as useRcNavigate, useSearchParams, } from 'react-router-dom';
+import { isNullable, isObject, isUndefined } from '../util';
+function instanceOfTo(to) {
+    return isObject(to) && ('pathname' in to || 'search' in to || 'hash' in to);
+}
+function instanceOfSearchParams(to) {
+    return !instanceOfTo(to) && isObject(to);
+}
+function isMergeQueries(option) {
+    return isUndefined(option) || (option && option['merge'] === true);
+}
+export function useNavigate() {
+    var _a = __read(useSearchParams(), 2), currentSearchParams = _a[0], setSearchParams = _a[1];
+    var navigate = useRcNavigate();
+    var navigation = useCallback(function (to, option) {
+        var _a;
+        if (typeof to === 'number') {
+            return navigate(to);
+        }
+        if (typeof to === 'string') {
+            return navigate(to, option);
+        }
+        if (instanceOfTo(to)) {
+            return navigate(to, option);
+        }
+        if (instanceOfSearchParams(to)) {
+            var newQueries = {};
+            for (var key in to) {
+                if (isNullable(to[key]) || to[key] === '') {
+                    continue;
+                }
+                newQueries = __assign(__assign({}, newQueries), (_a = {}, _a[key] = to[key], _a));
+            }
+            if (isMergeQueries(option)) {
+                var currentQueries = __spreadArray([], __read(currentSearchParams), false).reduce(function (acc, _a) {
+                    var _b = __read(_a, 2), key = _b[0], value = _b[1];
+                    acc[key] = value;
+                    return acc;
+                }, {});
+                return setSearchParams(__assign(__assign({}, currentQueries), newQueries), option);
+            }
+            return setSearchParams(newQueries, option);
+        }
+        return navigate(to, option);
+    }, [currentSearchParams, navigate, setSearchParams]);
+    return navigation;
+}

package/esm5/http-api/BasicHttpApi.js

@@ -14,110 +14,140 @@ var BasicHttpApi = (function (_super) {
     }
     BasicHttpApi.prototype.get = function (url, params, timeout) {
         return __awaiter(this, void 0, void 0, function () {
-            var headers;
+            var headers, error_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4, this.headersCreator()];
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4, this.headersCreator()];
                     case 1:
                         headers = _a.sent();
-                        return [2, this.provider
-                                .get({
+                        return [4, this.provider.get({
                                 url: "".concat(this.baseUrl).concat(url),
                                 headers: headers,
                                 withCredentials: this.withCredentials,
                                 paramsSerializer: this.paramsSerializer,
                                 params: this.mergeParams('get', url, params),
                                 timeout: timeout,
-                            })
-                                .catch(this.throwWithInterceptor)];
+                            })];
+                    case 2: return [2, _a.sent()];
+                    case 3:
+                        error_1 = _a.sent();
+                        this.throwWithInterceptor(error_1);
+                        return [3, 4];
+                    case 4: return [2];
                 }
             });
         });
     };
     BasicHttpApi.prototype.post = function (url, body, timeout) {
         return __awaiter(this, void 0, void 0, function () {
-            var headers;
+            var headers, error_2;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4, this.headersCreator()];
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4, this.headersCreator()];
                     case 1:
                         headers = _a.sent();
-                        return [2, this.provider
-                                .post({
+                        return [4, this.provider.post({
                                 url: "".concat(this.baseUrl).concat(this.mergeQueries('post', url, body)),
                                 headers: headers,
                                 withCredentials: this.withCredentials,
                                 paramsSerializer: this.paramsSerializer,
                                 params: body,
                                 timeout: timeout,
-                            })
-                                .catch(this.throwWithInterceptor)];
+                            })];
+                    case 2: return [2, _a.sent()];
+                    case 3:
+                        error_2 = _a.sent();
+                        this.throwWithInterceptor(error_2);
+                        return [3, 4];
+                    case 4: return [2];
                 }
             });
         });
     };
     BasicHttpApi.prototype.put = function (url, body, timeout) {
         return __awaiter(this, void 0, void 0, function () {
-            var headers;
+            var headers, error_3;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4, this.headersCreator()];
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4, this.headersCreator()];
                     case 1:
                         headers = _a.sent();
-                        return [2, this.provider
-                                .put({
+                        return [4, this.provider.put({
                                 url: "".concat(this.baseUrl).concat(this.mergeQueries('put', url, body)),
                                 headers: headers,
                                 withCredentials: this.withCredentials,
                                 paramsSerializer: this.paramsSerializer,
                                 params: body,
                                 timeout: timeout,
-                            })
-                                .catch(this.throwWithInterceptor)];
+                            })];
+                    case 2: return [2, _a.sent()];
+                    case 3:
+                        error_3 = _a.sent();
+                        this.throwWithInterceptor(error_3);
+                        return [3, 4];
+                    case 4: return [2];
                 }
             });
         });
     };
     BasicHttpApi.prototype.patch = function (url, body, timeout) {
         return __awaiter(this, void 0, void 0, function () {
-            var headers;
+            var headers, error_4;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4, this.headersCreator()];
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4, this.headersCreator()];
                     case 1:
                         headers = _a.sent();
-                        return [2, this.provider
-                                .patch({
+                        return [4, this.provider.patch({
                                 url: "".concat(this.baseUrl).concat(this.mergeQueries('patch', url, body)),
                                 headers: headers,
                                 withCredentials: this.withCredentials,
                                 paramsSerializer: this.paramsSerializer,
                                 params: body,
                                 timeout: timeout,
-                            })
-                                .catch(this.throwWithInterceptor)];
+                            })];
+                    case 2: return [2, _a.sent()];
+                    case 3:
+                        error_4 = _a.sent();
+                        this.throwWithInterceptor(error_4);
+                        return [3, 4];
+                    case 4: return [2];
                 }
             });
         });
     };
     BasicHttpApi.prototype.delete = function (url, body, timeout) {
         return __awaiter(this, void 0, void 0, function () {
-            var headers;
+            var headers, error_5;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4, this.headersCreator()];
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4, this.headersCreator()];
                     case 1:
                         headers = _a.sent();
-                        return [2, this.provider
-                                .delete({
+                        return [4, this.provider.delete({
                                 url: "".concat(this.baseUrl).concat(this.mergeQueries('delete', url, body)),
                                 headers: headers,
                                 withCredentials: this.withCredentials,
                                 paramsSerializer: this.paramsSerializer,
                                 params: body,
                                 timeout: timeout,
-                            })
-                                .catch(this.throwWithInterceptor)];
+                            })];
+                    case 2: return [2, _a.sent()];
+                    case 3:
+                        error_5 = _a.sent();
+                        this.throwWithInterceptor(error_5);
+                        return [3, 4];
+                    case 4: return [2];
                 }
             });
         });
@@ -131,21 +161,27 @@ var BasicHttpApi = (function (_super) {
     };
     BasicHttpApi.prototype.getBlob = function (url, params) {
         return __awaiter(this, void 0, void 0, function () {
-            var headers;
+            var headers, error_6;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4, this.headersCreator()];
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4, this.headersCreator()];
                     case 1:
                         headers = _a.sent();
-                        return [2, this.provider
-                                .getBlob({
+                        return [4, this.provider.getBlob({
                                 url: "".concat(this.baseUrl).concat(url),
                                 headers: headers,
                                 withCredentials: this.withCredentials,
                                 paramsSerializer: this.paramsSerializer,
                                 params: this.mergeParams('get', url, params),
-                            })
-                                .catch(this.throwWithInterceptor)];
+                            })];
+                    case 2: return [2, _a.sent()];
+                    case 3:
+                        error_6 = _a.sent();
+                        this.throwWithInterceptor(error_6);
+                        return [3, 4];
+                    case 4: return [2];
                 }
             });
         });

package/esm5/http-api/BasicHttpUploadApi.js

@@ -13,44 +13,56 @@ var BasicHttpUploadApi = (function (_super) {
     }
     BasicHttpUploadApi.prototype.postUpload = function (url, data, progressCallback, timeout) {
         return __awaiter(this, void 0, void 0, function () {
-            var headers;
+            var headers, error_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4, this.headersCreator()];
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4, this.headersCreator()];
                     case 1:
                         headers = _a.sent();
-                        return [2, this.provider
-                                .post({
+                        return [4, this.provider.post({
                                 url: "".concat(this.baseUrl).concat(this.mergeQueries('post', url, data)),
                                 headers: headers,
                                 withCredentials: this.withCredentials,
                                 data: data,
                                 timeout: timeout,
                                 onProgress: progressCallback,
-                            })
-                                .catch(this.throwWithInterceptor)];
+                            })];
+                    case 2: return [2, _a.sent()];
+                    case 3:
+                        error_1 = _a.sent();
+                        this.throwWithInterceptor(error_1);
+                        return [3, 4];
+                    case 4: return [2];
                 }
             });
         });
     };
     BasicHttpUploadApi.prototype.putUpload = function (url, data, progressCallback, timeout) {
         return __awaiter(this, void 0, void 0, function () {
-            var headers;
+            var headers, error_2;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4, this.headersCreator()];
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4, this.headersCreator()];
                     case 1:
                         headers = _a.sent();
-                        return [2, this.provider
-                                .put({
+                        return [4, this.provider.put({
                                 url: "".concat(this.baseUrl).concat(this.mergeQueries('put', url, data)),
                                 headers: headers,
                                 withCredentials: this.withCredentials,
                                 data: data,
                                 timeout: timeout,
                                 onProgress: progressCallback,
-                            })
-                                .catch(this.throwWithInterceptor)];
+                            })];
+                    case 2: return [2, _a.sent()];
+                    case 3:
+                        error_2 = _a.sent();
+                        this.throwWithInterceptor(error_2);
+                        return [3, 4];
+                    case 4: return [2];
                 }
             });
         });

package/esm5/http-api/ErrorParser.decorator.js

@@ -1,4 +1,4 @@
-import { __spreadArray } from "tslib";
+import { __read, __spreadArray } from "tslib";
 import { throwHttpRestError } from './network.util';
 function isConstructor(val) {
     return typeof val === 'function';
@@ -29,7 +29,7 @@ export function ErrorParser(throwableParser) {
                     args[_i] = arguments[_i];
                 }
                 return this.network.get
-                    .apply(this.network, __spreadArray([], args, true))
+                    .apply(this.network, __spreadArray([], __read(args), false))
                     .catch(this.parse);
             };
             ErrorParserDecoratedUnionHttpNetworkProvider.prototype.post = function () {
@@ -38,7 +38,7 @@ export function ErrorParser(throwableParser) {
                     args[_i] = arguments[_i];
                 }
                 return this.network.post
-                    .apply(this.network, __spreadArray([], args, true))
+                    .apply(this.network, __spreadArray([], __read(args), false))
                     .catch(this.parse);
             };
             ErrorParserDecoratedUnionHttpNetworkProvider.prototype.put = function () {
@@ -47,7 +47,7 @@ export function ErrorParser(throwableParser) {
                     args[_i] = arguments[_i];
                 }
                 return this.network.put
-                    .apply(this.network, __spreadArray([], args, true))
+                    .apply(this.network, __spreadArray([], __read(args), false))
                     .catch(this.parse);
             };
             ErrorParserDecoratedUnionHttpNetworkProvider.prototype.patch = function () {
@@ -56,7 +56,7 @@ export function ErrorParser(throwableParser) {
                     args[_i] = arguments[_i];
                 }
                 return this.network.patch
-                    .apply(this.network, __spreadArray([], args, true))
+                    .apply(this.network, __spreadArray([], __read(args), false))
                     .catch(this.parse);
             };
             ErrorParserDecoratedUnionHttpNetworkProvider.prototype.delete = function () {
@@ -65,7 +65,7 @@ export function ErrorParser(throwableParser) {
                     args[_i] = arguments[_i];
                 }
                 return this.network.delete
-                    .apply(this.network, __spreadArray([], args, true))
+                    .apply(this.network, __spreadArray([], __read(args), false))
                     .catch(this.parse);
             };
             ErrorParserDecoratedUnionHttpNetworkProvider.prototype.getBlob = function () {
@@ -74,7 +74,7 @@ export function ErrorParser(throwableParser) {
                     args[_i] = arguments[_i];
                 }
                 return this.network.getBlob
-                    .apply(this.network, __spreadArray([], args, true))
+                    .apply(this.network, __spreadArray([], __read(args), false))
                     .catch(this.parse);
             };
             return ErrorParserDecoratedUnionHttpNetworkProvider;

package/esm5/http-api/network.util.js

@@ -1,3 +1,4 @@
+import { __read } from "tslib";
 import { HttpRestError } from '../types';
 import { isNumber, isObject, isString, isUndefined } from '../util/typeCheck';
 function isOptionalBoolean(value) {
@@ -52,7 +53,7 @@ export function throwHttpRestError(error) {
 }
 export function convertToFormData(data) {
     return Object.entries(data).reduce(function (formData, _a) {
-        var key = _a[0], value = _a[1];
+        var _b = __read(_a, 2), key = _b[0], value = _b[1];
         if (Array.isArray(value)) {
             return value.reduce(function (innerFormData, file) {
                 innerFormData.append(key, file, file.name);

package/esm5/index.js

@@ -1,11 +1,11 @@
 import { DeviceDetectProvider, withAdaptiveRender } from './adaptive-render';
 import { createHttpApi, createHttpUploadApi, createHttpHeaderPipe, httpHeaderOperator, } from './http-api';
 import { cache } from './proxies';
-import { createGuardDispatch, createGuardSelector, renderRouteSystem, } from './route-system';
+import { useRouteSystem } from './route-system';
 import validate, { mergeValidates, } from './validate';
 export * from './hooks';
 export * from './queries';
 export * from './storage';
 export * from './types';
 export * from './util';
-export { DeviceDetectProvider, withAdaptiveRender, createHttpApi, createHttpUploadApi, createHttpHeaderPipe, httpHeaderOperator, cache, renderRouteSystem, createGuardDispatch, createGuardSelector, validate, mergeValidates, };
+export { DeviceDetectProvider, withAdaptiveRender, createHttpApi, createHttpUploadApi, createHttpHeaderPipe, httpHeaderOperator, cache, useRouteSystem, validate, mergeValidates, };

package/esm5/proxies/cache.proxy.js

@@ -1,4 +1,4 @@
-import { __spreadArray } from "tslib";
+import { __read, __spreadArray } from "tslib";
 import { createStorage } from '../storage';
 import { isServer } from '../util/envCheck';
 var FORCE_NOT_CACHE = false;
@@ -34,7 +34,7 @@ export function cache(type, expiredTime) {
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
             }
-            return baseApi.get.apply(baseApi, __spreadArray([], args, true));
+            return baseApi.get.apply(baseApi, __spreadArray([], __read(args), false));
         });
     };
 }

package/esm5/queries/buildMutationCreator.js

@@ -1,4 +1,4 @@
-import { __awaiter, __generator } from "tslib";
+import { __awaiter, __generator, __read } from "tslib";
 import { useCallback, useRef, useState } from 'react';
 function defineConverter(args) {
     return args;
@@ -16,9 +16,9 @@ export function buildMutationCreator(store) {
         }
         var resultHooks = function () {
             var refFetching = useRef(false);
-            var _a = useState(null), data = _a[0], setData = _a[1];
-            var _b = useState(undefined), error = _b[0], setError = _b[1];
-            var _c = useState(false), loading = _c[0], setLoading = _c[1];
+            var _a = __read(useState(null), 2), data = _a[0], setData = _a[1];
+            var _b = __read(useState(undefined), 2), error = _b[0], setError = _b[1];
+            var _c = __read(useState(false), 2), loading = _c[0], setLoading = _c[1];
             var mutate = useCallback(function (params, throwable) {
                 if (throwable === void 0) { throwable = false; }
                 return __awaiter(_this, void 0, void 0, function () {

package/esm5/queries/buildQueryCreator.js

@@ -1,4 +1,4 @@
-import { __awaiter, __generator, __spreadArray } from "tslib";
+import { __awaiter, __generator, __read, __spreadArray } from "tslib";
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { createStorage } from '../storage';
 import { useMakeDeps } from './useMakeDeps';
@@ -19,9 +19,9 @@ export function buildQueryCreator(store) {
         }
         var resultHooks = function (requestParams) {
             var refFetching = useRef(false);
-            var _a = useState(defaultData), data = _a[0], setData = _a[1];
-            var _b = useState(undefined), error = _b[0], setError = _b[1];
-            var _c = useState(defaultLoading), loading = _c[0], setLoading = _c[1];
+            var _a = __read(useState(defaultData), 2), data = _a[0], setData = _a[1];
+            var _b = __read(useState(undefined), 2), error = _b[0], setError = _b[1];
+            var _c = __read(useState(defaultLoading), 2), loading = _c[0], setLoading = _c[1];
             var deps = useMakeDeps(requestParams, subKeysFromParams);
             var loader = useCallback(function (params) { return __awaiter(_this, void 0, void 0, function () {
                 var sto, cachedValue, prm;
@@ -110,7 +110,7 @@ export function buildQueryCreator(store) {
                     return;
                 }
                 loader(requestParams);
-            }, __spreadArray(__spreadArray([], deps, true), [lazy], false));
+            }, __spreadArray(__spreadArray([], __read(deps), false), [lazy], false));
             return {
                 data: data,
                 error: error,

package/esm5/route-system/index.js

@@ -1,3 +1,2 @@
-export * from './renderRouteSystem';
-export * from './moduleRoute.model';
-export * from './routeSystem.util';
+export * from './useRouteSystem';
+export * from './useRouteSystem.model';

package/esm5/route-system/useRouteSystem.fixture.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useRouteSystem } from './useRouteSystem';
+var createTestWrapper = function (text) {
+    return function Wrap(_a) {
+        var children = _a.children;
+        return (React.createElement("section", null,
+            React.createElement("h1", null, text),
+            children));
+    };
+};
+var createTestComp = function (text) {
+    return function Test() {
+        return React.createElement("div", null, text);
+    };
+};
+var createTestPathComp = function () {
+    return function Test() {
+        var params = useParams();
+        return React.createElement("div", null, params.id);
+    };
+};
+export var routes = [
+    {
+        path: '/',
+        wrap: createTestWrapper('indexWrapper'),
+        element: createTestComp('index'),
+    },
+    {
+        path: '/main',
+        wrap: createTestWrapper('mainWrapper'),
+        element: createTestComp('main'),
+        children: [
+            {
+                path: 'order',
+                element: createTestComp('mainOrder'),
+                children: [
+                    {
+                        path: 'news',
+                        element: createTestComp('mainOrderNews'),
+                        children: [
+                            {
+                                path: ':id',
+                                element: createTestPathComp(),
+                            },
+                        ],
+                    },
+                    { path: ':id', element: createTestPathComp() },
+                ],
+            },
+            {
+                path: '*',
+                element: createTestComp('mainFallback'),
+            },
+        ],
+    },
+    {
+        path: '/hello',
+        children: [
+            {
+                path: '',
+                element: createTestComp('hello world'),
+            },
+        ],
+    },
+    {
+        path: '*',
+        element: createTestComp('fallback'),
+    },
+];
+export default function App() {
+    return useRouteSystem(routes);
+}

package/esm5/route-system/useRouteSystem.js

@@ -0,0 +1,51 @@
+import { __read, __spreadArray } from "tslib";
+import React from 'react';
+import { Outlet, useRoutes } from 'react-router-dom';
+function toJSXElement(Wrapper, Element) {
+    if (!Wrapper && !Element) {
+        return;
+    }
+    if (Wrapper) {
+        return (React.createElement(Wrapper, null,
+            React.createElement(Outlet, null)));
+    }
+    if (Element) {
+        return React.createElement(Element, null);
+    }
+}
+function recursionChildren(_a) {
+    var path = _a.path, element = _a.element, _b = _a.children, children = _b === void 0 ? [] : _b;
+    if (element && children.length > 0) {
+        return {
+            path: path,
+            children: __spreadArray([
+                { index: true, element: toJSXElement(undefined, element) }
+            ], __read(children.map(recursionChildren)), false),
+        };
+    }
+    return {
+        path: path,
+        element: toJSXElement(undefined, element),
+        children: children.map(recursionChildren),
+    };
+}
+export var useRouteSystem = function (moduleRoutes) {
+    var routeObject = moduleRoutes.map(function (_a) {
+        var path = _a.path, wrap = _a.wrap, element = _a.element, _b = _a.children, children = _b === void 0 ? [] : _b;
+        if (wrap && element) {
+            return {
+                path: path,
+                element: toJSXElement(wrap),
+                children: __spreadArray([
+                    { index: true, element: toJSXElement(undefined, element) }
+                ], __read(children.map(recursionChildren)), false),
+            };
+        }
+        return {
+            path: path,
+            element: toJSXElement(wrap, element),
+            children: children === null || children === void 0 ? void 0 : children.map(recursionChildren),
+        };
+    });
+    return useRoutes(routeObject);
+};

package/esm5/util/collection.js

@@ -1,17 +1,17 @@
-import { __spreadArray } from "tslib";
+import { __read, __spreadArray } from "tslib";
 export function reorder(list, startIndex, endIndex) {
-    var result = __spreadArray([], list, true);
-    var removed = result.splice(startIndex, 1)[0];
+    var result = __spreadArray([], __read(list), false);
+    var _a = __read(result.splice(startIndex, 1), 1), removed = _a[0];
     result.splice(endIndex, 0, removed);
     return result;
 }
 export function update(list, index, item) {
-    var copied = __spreadArray([], list, true);
+    var copied = __spreadArray([], __read(list), false);
     copied[index] = item;
     return copied;
 }
 export function remove(list, index) {
-    var copied = __spreadArray([], list, true);
+    var copied = __spreadArray([], __read(list), false);
     copied.splice(index, 1);
     return copied;
 }

package/esm5/util/queryString.js

@@ -1,8 +1,9 @@
+import { __read } from "tslib";
 import { isNullable, isObject } from './typeCheck';
 function _serialize(params, parentKey) {
     if (parentKey === void 0) { parentKey = ''; }
     return Object.entries(params).reduce(function (acc, _a) {
-        var oriKey = _a[0], value = _a[1];
+        var _b = __read(_a, 2), oriKey = _b[0], value = _b[1];
         var key = parentKey ? "".concat(parentKey, "%5B").concat(oriKey, "%5D") : oriKey;
         var ret = acc + (acc.length > 1 ? '&' : '');
         if (isObject(value)) {
@@ -34,7 +35,7 @@ export var qs = {
             var key = '';
             var value = '';
             for (var i = 0; i < len; i++) {
-                _a = splittedQueries[i].split('='), key = _a[0], value = _a[1];
+                _a = __read(splittedQueries[i].split('='), 2), key = _a[0], value = _a[1];
                 result[key] = decodeURIComponent(value);
             }
         }

package/libs/adaptive-render/AdaptiveRender.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactElement, ReactNode } from 'react';
-interface Props {
+import { ReactElement, ReactNode } from 'react';
+interface AdaptiveRenderProps {
     /**
      * 데스크탑에서만 보여질 컴포넌트
      */
@@ -12,6 +12,7 @@ interface Props {
      * 태블릿일 때는 보이지 않음 여부. 기본 false
      */
     notTablet?: boolean;
+    children?: ReactNode;
 }
 /**
  * 적응형으로 렌더링 할 때 쓰인다.
@@ -21,5 +22,5 @@ interface Props {
  * 모바일일 경우에만 보이게 할 때는 mobile 프로퍼티를 적용 시키면 된다.
  * @param props
  */
-export declare const AdaptiveRender: React.FC<Props>;
+export declare const AdaptiveRender: ({ mobile, notTablet, children, }: AdaptiveRenderProps) => JSX.Element;
 export {};

package/libs/adaptive-render/DeviceDetectContext.d.ts

@@ -1,5 +1,8 @@
-import React, { FC } from 'react';
+import React from 'react';
 export declare const DeviceDetectContext: React.Context<boolean[]>;
+interface DeviceDetectProviderProps {
+    children: React.ReactNode;
+}
 /**
  * 컨텍스트: UserAgent 및 Resizing 여부에 따른 태블릿/모바일 여부를 판별 해 준다.
  *
@@ -10,7 +13,8 @@ export declare const DeviceDetectContext: React.Context<boolean[]>;
  * @see https://stackoverflow.com/questions/29046324/whats-the-most-reliable-way-to-integrate-javascript-with-media-queries
  * @see https://jsperf.com/matchmedia-vs-resize/3
  */
-export declare const DeviceDetectProvider: FC;
+export declare const DeviceDetectProvider: ({ children, }: DeviceDetectProviderProps) => JSX.Element;
 export declare const useIsMobile: () => boolean;
 export declare const useIsTablet: () => boolean;
 export declare const useIsNative: () => boolean;
+export {};

package/libs/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useDebounce';
 export * from './useQueryParams';
 export * from './useThrottle';
+export * from './useNavigate';

package/libs/hooks/useNavigate.d.ts

@@ -0,0 +1,46 @@
+import { NavigateOptions, To } from 'react-router-dom';
+export declare type SearchParams = Record<string, any>;
+export declare type SearchParamsOptions = NavigateOptions & {
+    merge?: boolean;
+};
+interface NavigationCommander {
+    (to: To, option?: NavigateOptions): void;
+    (delta: number): void;
+    (searchParams: SearchParams, option?: SearchParamsOptions): void;
+}
+/**
+ * react-router-dom v6의 useNavigate 기반으로 기능을 확장한 hooks.
+ *
+ * navigate 동작 방식을 똑같이 사용할 수 있으며, 필요에 따라 query 조작이 가능하다.
+ *
+ * 일반 navigate 함수 활용
+ * @example
+ * ```ts
+ * const navigate = useNavigate();
+ *
+ * navigate(-1);
+ * navigate("/page", option);
+ * navigate({ pathname: "/page", search : "size=10" }, option);
+ * ```
+ *
+ * 현재 페이지의 query에 원하는 query를 덮어씌워 이동
+ *
+ * @example
+ * ```ts
+ * const navigate = useNavigate();
+ *
+ * navigate({ page: 10, size: 20 });
+ *
+ * ```
+ *
+ * 현재 페이지의 query는 제거하고, 원하는 query로만 이동
+ * @example
+ * ```ts
+ * const navigate = useNavigate();
+ *
+ * navigate({ page: 10, size: 20 }, { merge: false });
+ *
+ * ```
+ */
+export declare function useNavigate(): NavigationCommander;
+export {};

package/libs/index.d.ts

@@ -1,11 +1,11 @@
 import { DeviceDetectProvider, withAdaptiveRender } from './adaptive-render';
 import { createHttpApi, createHttpUploadApi, createHttpHeaderPipe, httpHeaderOperator, HttpApi, HttpUploadApi, HttpInterceptorHandler, HttpInterceptorConfig, UploadStateArgs, XhrUploadStateArgs } from './http-api';
 import { cache } from './proxies';
-import { createGuardDispatch, createGuardSelector, ModuleRouteModel, renderRouteSystem } from './route-system';
+import { ModuleRouteModel, useRouteSystem } from './route-system';
 import validate, { mergeValidates, ValidateBulkOptionType, ValidateBulkResultModel, ValidateCheckModel, ValidateResultModel } from './validate';
 export * from './hooks';
 export * from './queries';
 export * from './storage';
 export * from './types';
 export * from './util';
-export { ModuleRouteModel, DeviceDetectProvider, withAdaptiveRender, createHttpApi, createHttpUploadApi, createHttpHeaderPipe, httpHeaderOperator, HttpApi, HttpUploadApi, HttpInterceptorHandler, HttpInterceptorConfig, UploadStateArgs, XhrUploadStateArgs, cache, renderRouteSystem, createGuardDispatch, createGuardSelector, validate, mergeValidates, ValidateResultModel, ValidateBulkResultModel, ValidateCheckModel, ValidateBulkOptionType, };
+export { ModuleRouteModel, DeviceDetectProvider, withAdaptiveRender, createHttpApi, createHttpUploadApi, createHttpHeaderPipe, httpHeaderOperator, HttpApi, HttpUploadApi, HttpInterceptorHandler, HttpInterceptorConfig, UploadStateArgs, XhrUploadStateArgs, cache, useRouteSystem, validate, mergeValidates, ValidateResultModel, ValidateBulkResultModel, ValidateCheckModel, ValidateBulkOptionType, };

package/libs/queries/buildMutationCreator.d.ts

@@ -1,4 +1,4 @@
-import { EnhancedStore } from '@reduxjs/toolkit';
+import { AnyAction, EnhancedStore, MiddlewareArray } from '@reduxjs/toolkit';
 interface MutationHooksCreatorSettingOptionDto<SR, SP, R, P, ReduxRootState> {
     /**
      * Mutation hooks의 고유키이다. auto dispatch 사용 시 반드시 필요하다.
@@ -33,5 +33,5 @@ interface MutationResultType<R = void, P = void, E extends Error = Error> {
 interface MutationHooks<R = void, P = void, E extends Error = Error> {
     (params?: R): MutationResultType<R, P, E>;
 }
-export declare function buildMutationCreator<S>(store: EnhancedStore<S>): <SR, SP, R, P, E extends Error>({ key, mutator, parameterConverter, resultConverter, }: MutationHooksCreatorSettingOptionDto<SR, SP, R, P, S>) => MutationHooks<R, P, E>;
+export declare function buildMutationCreator<S>(store: EnhancedStore<S, AnyAction, MiddlewareArray<any[]>>): <SR, SP, R, P, E extends Error>({ key, mutator, parameterConverter, resultConverter, }: MutationHooksCreatorSettingOptionDto<SR, SP, R, P, S>) => MutationHooks<R, P, E>;
 export {};

package/libs/queries/buildQueryCreator.d.ts

@@ -1,4 +1,4 @@
-import { EnhancedStore } from '@reduxjs/toolkit';
+import { AnyAction, EnhancedStore, MiddlewareArray } from '@reduxjs/toolkit';
 import { StorageType } from '../storage';
 /**
  * query hooks가 리턴하는 객체
@@ -111,5 +111,5 @@ interface CreateRepositoryQuery<S> {
     <SR, SP, R, P, E extends Error = Error>(config: QueryHooksCreatorSettingOptionDto<SR, SP, R, P, S>): QueryHooks<R, P, E>;
     <R, P, E extends Error = Error>(config: QueryHooksCreatorSettingOptionDto<R, P, R, P, S>): QueryHooks<R, P, E>;
 }
-export declare function buildQueryCreator<S>(store: EnhancedStore<S>): CreateRepositoryQuery<S>;
+export declare function buildQueryCreator<S>(store: EnhancedStore<S, AnyAction, MiddlewareArray<any[]>>): CreateRepositoryQuery<S>;
 export {};

package/libs/route-system/index.d.ts

@@ -1,3 +1,2 @@
-export * from './renderRouteSystem';
-export * from './moduleRoute.model';
-export * from './routeSystem.util';
+export * from './useRouteSystem';
+export * from './useRouteSystem.model';

package/libs/route-system/useRouteSystem.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ModuleRouteModel } from './useRouteSystem.model';
+/**
+ * react-router-dom V6의 route system을 적용하는 hooks
+ *
+ * 내부적으로 useRoutes()를 사용한다.
+ *
+ * @example
+ * ```tsx
+ * const routes = [
+ *  {
+ *    path: "/",
+ *    wrap: Wrapper,
+ *    element: Element,
+ *    children: [{
+ *      path: "main", // '/main'
+ *      element: Element,
+ *      children: [{
+ *        path: ":id", // '/main/:id'
+ *        element: Element
+ *      }]
+ *    }]
+ *  }
+ * ]
+ * ```
+ *
+ * renderRouteSystem을 사용하기 위해선 `BrowserRouter`로 감싸주어야 한다.
+ * ```ts
+ * <BrowserRouter>{renderRouteSystem(routes)}</BrowserRouter>
+ * ```
+ *
+ * @param moduleRoutes
+ * @returns
+ */
+export declare const useRouteSystem: (moduleRoutes: ModuleRouteModel[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/libs/route-system/useRouteSystem.fixture.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ModuleRouteModel } from './useRouteSystem.model';
+export declare const routes: ModuleRouteModel[];
+export default function App(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/libs/route-system/useRouteSystem.model.d.ts

@@ -0,0 +1,41 @@
+import { ComponentType } from 'react';
+export interface ModuleRouteChildModel {
+    /**
+     * routing 하기 위한 경로 설정
+     */
+    path?: string;
+    /**
+     * 설정된 경로에 렌더링 할 React Component
+     *
+     * @example
+     * () => JSX.Element
+     */
+    element?: ComponentType<any>;
+    /**
+     * 설정된 경로의 하위 경로 설정
+     *
+     * `children`에서의 경로(`path`) 설정은 **상대적**이다.
+     *
+     * @example
+     * {
+     *  path: "/main",
+     *  elemet: MainElement,
+     *  children: [
+     *    { path: "order", element: Element } // `/main/order`
+     *  ]
+     * }
+     */
+    children?: ModuleRouteChildModel[];
+}
+export interface ModuleRouteModel extends ModuleRouteChildModel {
+    /**
+     * 설정된 경로에 본인 포함, 모든 하위 경로에 Wrapper 설정
+     *
+     * **`children`을 `props`로 받아야만 한다.**
+     *
+     * @example
+     *
+     * ({children}) => <div>{children}</div>
+     */
+    wrap?: ComponentType<any>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jordy",
-  "version": "0.13.0",
+  "version": "0.14.2",
   "description": "typescript based frontend toolkit",
   "main": "./esm5/index.js",
   "module": "./esm5/index.js",
@@ -25,10 +25,13 @@
   "devDependencies": {
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-typescript": "^7.15.0",
-    "@reduxjs/toolkit": "^1.6.1",
+    "@reduxjs/toolkit": "^1.8.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/react": "^17.0.24",
-    "@types/react-router-dom": "^5.3.0",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
     "@vitejs/plugin-legacy": "^2.0.0",
@@ -40,10 +43,10 @@
     "lodash-es": "^4.17.21",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
-    "redux": "^4.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
+    "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "ts-node": "^10.3.0",
     "tslib": "^2.3.1",

package/esm5/route-system/AsyncGuard.js

@@ -1,37 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useHistory } from 'react-router';
-import { noop } from '../util';
-export var AsyncGuard = function (_a) {
-    var _b = _a.redirect, redirect = _b === void 0 ? '/' : _b, FailComp = _a.failComponent, guard = _a.guard, children = _a.children;
-    var history = useHistory();
-    var _c = useState(guard ? null : true), end = _c[0], setEnd = _c[1];
-    useEffect(function () {
-        if (end || !guard) {
-            return noop;
-        }
-        var handleAsync = function (res) {
-            if (res) {
-                setEnd(true);
-                return;
-            }
-            if (FailComp) {
-                setEnd(false);
-            }
-            else {
-                history.replace(redirect);
-            }
-        };
-        Promise.resolve(0)
-            .then(guard)
-            .then(handleAsync)
-            .catch(function () { return handleAsync(false); });
-        return noop;
-    }, [end, FailComp, history, redirect, guard]);
-    if (end === false && FailComp) {
-        return React.createElement(FailComp, null);
-    }
-    if (!end) {
-        return null;
-    }
-    return React.createElement(React.Fragment, null, children);
-};

package/esm5/route-system/renderRouteSystem.js

@@ -1,64 +0,0 @@
-import { __spreadArray } from "tslib";
-import React, { Suspense } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
-import { AsyncGuard } from './AsyncGuard';
-function toPromiseList(guardList) {
-    return guardList.map(function (fn) {
-        var ret = fn();
-        if (ret instanceof Promise) {
-            return ret;
-        }
-        return Promise.resolve(ret);
-    });
-}
-function renderSubRoute(route, notFound, guardList) {
-    if (guardList === void 0) { guardList = []; }
-    var Comp = route.component;
-    var Wrap = route.wrap || React.Fragment;
-    if (route.guard) {
-        guardList.push(route.guard);
-        if (route.child) {
-            return (React.createElement(Wrap, null, renderRouteSystem(route.child, true, notFound, __spreadArray([], guardList, true))));
-        }
-        var guardResults = function () {
-            return Promise.all(toPromiseList(guardList)).then(function (items) {
-                return items.every(Boolean);
-            });
-        };
-        return (React.createElement(Wrap, null,
-            React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
-                React.createElement(AsyncGuard, { guard: guardResults, redirect: route.redirect, failComponent: route.failComponent }, Comp && React.createElement(Comp, null)))));
-    }
-    if (route.redirect) {
-        return React.createElement(Redirect, { to: route.redirect });
-    }
-    if (route.child) {
-        return (React.createElement(Wrap, null, renderRouteSystem(route.child, true, notFound, __spreadArray([], guardList, true))));
-    }
-    if (guardList.length > 0) {
-        var guardResults = function () {
-            return Promise.all(toPromiseList(guardList)).then(function (items) {
-                return items.every(Boolean);
-            });
-        };
-        return (React.createElement(Wrap, null,
-            React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
-                React.createElement(AsyncGuard, { guard: guardResults, redirect: route.redirect, failComponent: route.failComponent }, Comp && React.createElement(Comp, null)))));
-    }
-    return (React.createElement(Wrap, null,
-        React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) }, Comp && React.createElement(Comp, null))));
-}
-export var renderRouteSystem = function (routes, withSwitch, notFound, guardList) {
-    if (guardList === void 0) { guardList = []; }
-    var NotFound = notFound;
-    if (withSwitch) {
-        return (React.createElement(Switch, null,
-            routes.map(function (route) { return (React.createElement(Route, { key: route.path, path: route.path, exact: route.exact }, renderSubRoute(route, notFound, __spreadArray([], guardList, true)))); }),
-            NotFound && React.createElement(NotFound, null)));
-    }
-    var renders = routes.map(function (route) { return (React.createElement(Route, { key: route.path, path: route.path, exact: route.exact }, renderSubRoute(route, notFound, __spreadArray([], guardList, true)))); });
-    if (NotFound) {
-        renders.push(React.createElement(NotFound, { key: "%%not-found%%" }));
-    }
-    return renders;
-};

package/esm5/route-system/routeSystem.util.js

@@ -1,23 +0,0 @@
-import { __awaiter, __generator } from "tslib";
-export function createGuardDispatch(store) {
-    return function guardDispatch(effectResult) {
-        return __awaiter(this, void 0, void 0, function () {
-            var dispatch, action;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        dispatch = store.dispatch;
-                        return [4, dispatch(effectResult)];
-                    case 1:
-                        action = _a.sent();
-                        return [2, action.meta.requestStatus === 'fulfilled'];
-                }
-            });
-        });
-    };
-}
-export function createGuardSelector(store) {
-    return function guardSelector(selector) {
-        return selector(store.getState());
-    };
-}

package/libs/route-system/AsyncGuard.d.ts

@@ -1,8 +0,0 @@
-import { ComponentType, FC } from 'react';
-interface AsyncGuardProps {
-    redirect?: string;
-    failComponent?: ComponentType<any>;
-    guard?: () => boolean | Promise<boolean>;
-}
-export declare const AsyncGuard: FC<AsyncGuardProps>;
-export {};

package/libs/route-system/moduleRoute.model.d.ts

@@ -1,49 +0,0 @@
-import { ComponentType } from 'react';
-/**
- * 모듈에서 쓰이는 각종 페이지 컴포넌트의 라우팅 정보를 담은 객체
- */
-export interface ModuleRouteModel {
-    /**
-     * 수행 경로
-     */
-    path: string;
-    /**
-     * 정확성 여부. 지정된 path 가 정확히 맞아야만 컴포넌트가 렌더링 된다.
-     */
-    exact?: boolean;
-    /**
-     * 현재 경로로 왔을 때 곧바로 이동될 다른 경로.
-     *
-     * 만약 guard 옵션에 설정이 되어있고 그 결과가 true 가 아니라면 설정된 주소를 사용하여 이동될 것이다.
-     */
-    redirect?: string;
-    /**
-     * 해당 페이지에 접근 시 별도 권한이 필요하다면 쓰이는 기능.
-     *
-     * 동기 혹은 비동기로 true 가 되면 페이지 렌더링이 된다.
-     *
-     * 만약 설정 되었음에도 true 가 안된다면,
-     * 1. failComponent 에 설정된 컴포넌트를 렌더링 한다.
-     * 2. failComponent 가 설정 안되어 있다면, redirect 에 설정된 주소로 이동된다.
-     * 3. 아무것도 설정되어 있지 않다면 루트(/) 경로로 이동한다.
-     *
-     * 설정하지 않을 경우 무조건 렌더링 한다.
-     */
-    guard?: () => boolean | Promise<boolean>;
-    /**
-     * 설정된 페이지 컴포넌트를 감싸서 함께 렌더링될 상위 컴포넌트
-     */
-    wrap?: ComponentType<any>;
-    /**
-     * 렌더링에 사용될 페이지 컴포넌트.
-     */
-    component?: ComponentType<any>;
-    /**
-     * guard 설정 결과가 false 일 때 렌더링 될 컴포넌트.
-     */
-    failComponent?: ComponentType<any>;
-    /**
-     * 하위 라우팅 설정
-     */
-    child?: ModuleRouteModel[];
-}

package/libs/route-system/renderRouteSystem.d.ts

@@ -1,5 +0,0 @@
-import { ComponentType } from 'react';
-import { ModuleRouteModel } from './moduleRoute.model';
-declare type GuardFunctionType = () => boolean | Promise<boolean>;
-export declare const renderRouteSystem: (routes: ModuleRouteModel[], withSwitch?: boolean, notFound?: ComponentType<any>, guardList?: GuardFunctionType[]) => JSX.Element | JSX.Element[];
-export {};

package/libs/route-system/routeSystem.util.d.ts

@@ -1,4 +0,0 @@
-import { EnhancedStore, AsyncThunkAction } from '@reduxjs/toolkit';
-import { CombinedState } from 'redux';
-export declare function createGuardDispatch<T>(store: EnhancedStore<CombinedState<T>>): <R>(effectResult: AsyncThunkAction<R, any, any>) => Promise<boolean>;
-export declare function createGuardSelector<T>(store: EnhancedStore<CombinedState<T>>): <R>(selector: (state: CombinedState<T>) => R) => R;