@searchspring/snap-url-manager 0.20.0

package/dist/esm/Translators/Url/UrlTranslator.js

@@ -0,0 +1,448 @@
+import deepmerge from 'deepmerge';
+import { RangeValueProperties, ParamLocationType } from '../../types';
+const defaultConfig = {
+    urlRoot: '',
+    settings: {
+        corePrefix: '',
+        customType: ParamLocationType.HASH,
+        rootParams: true,
+    },
+    parameters: {
+        core: {
+            query: { name: 'q', type: ParamLocationType.QUERY },
+            oq: { name: 'oq', type: ParamLocationType.QUERY },
+            rq: { name: 'rq', type: ParamLocationType.QUERY },
+            tag: { name: 'tag', type: ParamLocationType.QUERY },
+            page: { name: 'page', type: ParamLocationType.QUERY },
+            pageSize: { name: 'pageSize', type: ParamLocationType.HASH },
+            sort: { name: 'sort', type: ParamLocationType.HASH },
+            filter: { name: 'filter', type: ParamLocationType.HASH },
+        },
+        custom: {},
+    },
+};
+const CORE_FIELDS = ['query', 'oq', 'rq', 'tag', 'page', 'pageSize', 'sort', 'filter'];
+export class UrlTranslator {
+    constructor(config = {}) {
+        this.reverseMapping = {};
+        this.config = deepmerge(defaultConfig, config);
+        Object.keys(this.config.parameters.core).forEach((param) => {
+            // param prefix
+            if (this.config.settings.corePrefix) {
+                this.config.parameters.core[param].name = this.config.settings.corePrefix + this.config.parameters.core[param].name;
+            }
+            // global type override
+            const paramType = this.config.settings.coreType;
+            if (paramType && Object.values(ParamLocationType).includes(paramType)) {
+                this.config.parameters.core[param].type = (config?.parameters?.core && config?.parameters?.core[param]?.type) || paramType;
+            }
+            // create reverse mapping for quick lookup later
+            this.reverseMapping[this.config.parameters.core[param].name] = param;
+        });
+        const implicit = this.config.settings.customType;
+        if (implicit && !Object.values(ParamLocationType).includes(implicit)) {
+            // invalid type specified - falling back to hash as implicit type
+            this.config.settings.customType = ParamLocationType.HASH;
+        }
+    }
+    bindExternalEvents(update) {
+        window.addEventListener('popstate', update);
+    }
+    getCurrentUrl() {
+        return window.location.search + window.location.hash;
+    }
+    getConfig() {
+        return deepmerge({}, this.config);
+    }
+    deserialize(url) {
+        const params = this.parseUrlParams(url);
+        return this.paramsToState(params);
+    }
+    parseUrlParams(url) {
+        const queryString = url.includes('?') ? (url.split('?').pop() || '').split('#').shift() || '' : '';
+        const hashString = url.includes('#') ? url.substring(url.indexOf('#') + 1) || '' : '';
+        return [...this.parseHashString(hashString), ...this.parseQueryString(queryString)];
+    }
+    parseQueryString(queryString) {
+        const justQueryString = queryString.split('?').pop() || '';
+        return justQueryString
+            .split('&')
+            .filter((v) => v)
+            .map((kvPair) => {
+            const [key, value] = kvPair.split('=').map((v) => decodeURIComponent(v.replace(/\+/g, ' ')));
+            return { key: key.split('.'), value, type: ParamLocationType.QUERY };
+        })
+            .filter((param) => {
+            // remove core fields that do not contain a value
+            const isCoreField = this.reverseMapping[param.key[0]];
+            return !isCoreField || (isCoreField && param.value);
+        });
+    }
+    parseHashString(hashString) {
+        const params = [];
+        const justHashString = hashString.split('#').join('/') || '';
+        justHashString
+            .split('/')
+            .filter((v) => v)
+            .map((hashEntries) => {
+            return hashEntries.split(':').map((v) => decodeHashComponent(v));
+        })
+            .filter((param) => {
+            // remove core fields that do not contain a value
+            const [key, value] = param;
+            const isCoreField = this.reverseMapping[key];
+            return !isCoreField || (isCoreField && value);
+        })
+            .forEach((decodedHashEntries) => {
+            if (decodedHashEntries.length == 1) {
+                params.push({ key: [decodedHashEntries[0]], value: undefined, type: ParamLocationType.HASH });
+            }
+            else if (decodedHashEntries.length && decodedHashEntries.length <= 3) {
+                const [value, ...keys] = decodedHashEntries.reverse();
+                params.push({ key: keys.reverse(), value, type: ParamLocationType.HASH });
+            }
+            else if (decodedHashEntries.length && decodedHashEntries.length == 4) {
+                // range filter
+                const [path0, path1, low, high] = decodedHashEntries;
+                params.push({ key: [path0, path1, 'low'], value: low, type: ParamLocationType.HASH });
+                params.push({ key: [path0, path1, 'high'], value: high, type: ParamLocationType.HASH });
+            }
+        });
+        return params;
+    }
+    // parse params into state
+    paramsToState(params) {
+        const coreOtherParams = [], coreFilterParams = [], coreSortParams = [], otherParams = [];
+        params?.forEach((param) => {
+            const coreStateKey = this.reverseMapping[param.key[0]];
+            const coreConfig = this.config.parameters.core[coreStateKey];
+            const customStateKey = this.config.parameters.custom[param.key[0]];
+            if (coreStateKey) {
+                // core state
+                switch (coreStateKey) {
+                    case 'filter': {
+                        if (coreConfig.type == param.type)
+                            coreFilterParams.push(param);
+                        break;
+                    }
+                    case 'sort': {
+                        if (coreConfig.type == param.type)
+                            coreSortParams.push(param);
+                        break;
+                    }
+                    default: {
+                        if (coreConfig.type == param.type)
+                            coreOtherParams.push(param);
+                        break;
+                    }
+                }
+            }
+            else if (!CORE_FIELDS.includes(param.key[0])) {
+                // custom state
+                if (!customStateKey) {
+                    // unrecognized state - store in custom config map (as implicit type)
+                    this.config.parameters.custom[param.key[0]] = {
+                        type: param.type || this.config.settings.customType,
+                    };
+                }
+                otherParams.push(param);
+            }
+        });
+        return {
+            ...this.parseCoreOther(coreOtherParams),
+            ...this.parseCoreFilter(coreFilterParams),
+            ...this.parseCoreSort(coreSortParams),
+            ...this.parseOther(otherParams),
+        };
+    }
+    parseCoreOther(otherParams) {
+        const state = {};
+        const numberTypeParams = ['page', 'pageSize'];
+        if (!otherParams) {
+            return {};
+        }
+        otherParams.forEach((param) => {
+            const coreKey = this.reverseMapping[param.key[0]];
+            if (numberTypeParams.includes(coreKey)) {
+                const numValue = Number(param.value);
+                if (coreKey == 'page' && numValue > 1) {
+                    state[coreKey] = numValue;
+                }
+                else if (coreKey != 'page') {
+                    state[coreKey] = numValue;
+                }
+            }
+            else {
+                state[coreKey] = param.value;
+            }
+        });
+        return state;
+    }
+    parseCoreFilter(filterParams) {
+        const valueFilterParams = filterParams.filter((p) => p.key.length == 2);
+        const rangeFilterParams = filterParams.filter((p) => p.key.length == 3);
+        const valueFilters = valueFilterParams.reduce((state, param) => {
+            const currentValue = (state.filter || {})[param.key[1]] || [];
+            return {
+                filter: {
+                    ...state.filter,
+                    [param.key[1]]: [...(Array.isArray(currentValue) ? currentValue : [currentValue]), param.value],
+                },
+            };
+        }, {});
+        const rangeFilters = rangeFilterParams.reduce((state, param, index) => {
+            // ranges should come in pairs!
+            // use index to build pairs, ignore non pairs
+            // build set as encountered - only return full sets (low + high)
+            let newState = state;
+            const nextRangeParam = rangeFilterParams[index + 1];
+            if (index % 2 == 0 &&
+                nextRangeParam &&
+                nextRangeParam.key[1] == param.key[1] &&
+                param.key[2] == RangeValueProperties.LOW &&
+                nextRangeParam.key[2] == RangeValueProperties.HIGH) {
+                const currentValue = (state.filter || {})[param.key[1]] || [];
+                newState = {
+                    filter: {
+                        ...state.filter,
+                        [param.key[1]]: [
+                            ...(Array.isArray(currentValue) ? currentValue : [currentValue]),
+                            {
+                                [RangeValueProperties.LOW]: isNaN(+param.value) ? null : +param.value,
+                                [RangeValueProperties.HIGH]: isNaN(+nextRangeParam.value) ? null : +nextRangeParam.value,
+                            },
+                        ],
+                    },
+                };
+            }
+            return newState;
+        }, {});
+        return {
+            ...(valueFilters.filter || rangeFilters.filter
+                ? {
+                    filter: {
+                        ...valueFilters.filter,
+                        ...rangeFilters.filter,
+                    },
+                }
+                : {}),
+        };
+    }
+    parseCoreSort(sortParams) {
+        if (!sortParams.length) {
+            return {};
+        }
+        return {
+            sort: sortParams.map((param) => ({
+                field: param.key[1],
+                direction: param.value,
+            })),
+        };
+    }
+    parseOther(otherParams) {
+        const state = {};
+        otherParams.forEach((param) => {
+            let node = state;
+            param.key.forEach((key, i) => {
+                const isLast = i == param.key.length - 1;
+                if (isLast) {
+                    node[key] = node[key] || [];
+                    param.value && node[key].push(param.value);
+                }
+                else {
+                    node[key] = node[key] || {};
+                    node = node[key];
+                }
+            });
+        });
+        return state;
+    }
+    serialize(state) {
+        const root = this.config.urlRoot.includes('?')
+            ? this.config.urlRoot.split('?')[0]
+            : this.config.urlRoot.includes('#')
+                ? this.config.urlRoot.split('#')[0]
+                : this.config.urlRoot;
+        const rootUrlParams = this.config.settings.rootParams ? this.parseUrlParams(this.config.urlRoot) : [];
+        const stateParams = this.stateToParams(state);
+        const params = [...rootUrlParams, ...stateParams];
+        const queryParams = params.filter((p) => p.type == ParamLocationType.QUERY);
+        const hashParams = params.filter((p) => p.type == ParamLocationType.HASH);
+        const paramString = (queryParams.length
+            ? '?' +
+                queryParams
+                    .map((param) => {
+                    const keyString = encodeURIComponent(param.key.join('.'));
+                    const valueString = param.value ? '=' + encodeURIComponent(param.value) : '';
+                    return keyString + valueString;
+                })
+                    .join('&')
+            : this.config.urlRoot
+                ? ''
+                : window.location.pathname) +
+            (hashParams.length
+                ? '#/' +
+                    hashParams
+                        .map((param) => {
+                        const keyString = param.key.map((k) => encodeHashComponent(k)).join(':');
+                        const valueString = param.value ? ':' + encodeHashComponent(param.value) : '';
+                        return keyString + valueString;
+                    })
+                        .join('/')
+                : '');
+        return `${root}${paramString}`;
+    }
+    // encode state into params
+    stateToParams(state) {
+        return [
+            ...this.encodeCoreOther(state, ['filter', 'sort']),
+            ...this.encodeCoreFilters(state),
+            ...this.encodeCoreSorts(state),
+            ...this.encodeOther(state),
+        ];
+    }
+    encodeCoreFilters(state) {
+        const filterConfig = this.config.parameters.core.filter;
+        if (!state.filter || !filterConfig) {
+            return [];
+        }
+        return Object.keys(state.filter).flatMap((key) => {
+            if (!state.filter || !state.filter[key]) {
+                return [];
+            }
+            const filter = state.filter[key];
+            return (filter instanceof Array ? filter : [filter]).flatMap((value) => {
+                if (typeof value == 'string' || typeof value == 'number' || typeof value == 'boolean') {
+                    return [
+                        {
+                            key: [filterConfig.name, key],
+                            value: '' + value,
+                            type: filterConfig.type,
+                        },
+                    ];
+                }
+                else if (typeof value == 'object' &&
+                    typeof value[RangeValueProperties.LOW] != 'undefined' &&
+                    typeof value[RangeValueProperties.HIGH] != 'undefined') {
+                    if (filterConfig.type == ParamLocationType.QUERY) {
+                        return [
+                            {
+                                key: [filterConfig.name, key, RangeValueProperties.LOW],
+                                value: '' + (value[RangeValueProperties.LOW] ?? '*'),
+                                type: filterConfig.type,
+                            },
+                            {
+                                key: [filterConfig.name, key, RangeValueProperties.HIGH],
+                                value: '' + (value[RangeValueProperties.HIGH] ?? '*'),
+                                type: filterConfig.type,
+                            },
+                        ];
+                    }
+                    else if (filterConfig.type == ParamLocationType.HASH) {
+                        return [
+                            {
+                                key: [filterConfig.name, key, '' + (value[RangeValueProperties.LOW] ?? '*')],
+                                value: '' + (value[RangeValueProperties.HIGH] ?? '*'),
+                                type: filterConfig.type,
+                            },
+                        ];
+                    }
+                }
+                return [];
+            });
+        });
+    }
+    encodeCoreSorts(state) {
+        const sortConfig = this.config.parameters.core.sort;
+        if (!state.sort || !sortConfig) {
+            return [];
+        }
+        return (state.sort instanceof Array ? state.sort : [state.sort]).map((sort) => {
+            return {
+                key: [sortConfig.name, sort.field],
+                value: sort.direction,
+                type: sortConfig.type,
+            };
+        });
+    }
+    encodeCoreOther(state, except) {
+        const params = [];
+        Object.keys(state)
+            // sorting to determine order of params in URL
+            .sort(function (a, b) {
+            return CORE_FIELDS.indexOf(a) - CORE_FIELDS.indexOf(b);
+        })
+            .map((param) => {
+            if (CORE_FIELDS.includes(param) && !except.includes(param)) {
+                const paramConfig = this.config.parameters.core[param];
+                if (param == 'page' && state[param] == 1) {
+                    // do not include page 1
+                }
+                else {
+                    params.push({ key: [paramConfig.name], value: '' + state[param], type: paramConfig.type });
+                }
+            }
+        });
+        return params;
+    }
+    encodeOther(state) {
+        let params = [];
+        const addRecursive = (obj, currentPath) => {
+            Object.keys(obj).forEach((key) => {
+                if (currentPath.length == 0 && CORE_FIELDS.includes(key)) {
+                    return;
+                }
+                const value = obj[key];
+                if (value instanceof Array) {
+                    const customConfig = this.config.parameters.custom[currentPath[0] || key];
+                    const type = customConfig?.type || this.config.settings.customType;
+                    if (value.length) {
+                        params = params.concat(value.map((v) => {
+                            return { key: [...currentPath, key], value: v, type };
+                        }));
+                    }
+                    else {
+                        params = params.concat({ key: [...currentPath, key], value: undefined, type });
+                    }
+                }
+                else if (typeof value == 'object' && Object.keys(value).length) {
+                    addRecursive(value, [...currentPath, key]);
+                }
+                else {
+                    const customConfig = this.config.parameters.custom[currentPath[0] || key];
+                    const type = customConfig?.type || this.config.settings.customType;
+                    const stringValue = (typeof value == 'object' ? undefined : value);
+                    params = params.concat([{ key: [...currentPath, key], value: stringValue, type }]);
+                }
+            });
+        };
+        addRecursive(state, []);
+        return params;
+    }
+    go(url, config) {
+        const currentUrl = this.getCurrentUrl();
+        if (url != currentUrl) {
+            if (config?.history == 'replace') {
+                history.replaceState(null, '', url);
+            }
+            else {
+                history.pushState(null, '', url);
+            }
+        }
+    }
+}
+function decodeHashComponent(string) {
+    if (typeof string == 'string') {
+        string = string.replace(/%2425/g, '$$25');
+        string = string.replace(/\$25/g, '%');
+        string = decodeURIComponent(string);
+    }
+    return string;
+}
+function encodeHashComponent(string) {
+    if (typeof string == 'string') {
+        string = encodeURIComponent(string);
+        string = string.replace(/%/g, '$$25');
+    }
+    return string;
+}

package/dist/esm/Translators/index.d.ts

@@ -0,0 +1,4 @@
+export * from './QueryString/QueryStringTranslator';
+export * from './Url/UrlTranslator';
+export * from './Noop/NoopTranslator';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Translators/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Translators/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC"}

package/dist/esm/Translators/index.js

@@ -0,0 +1,3 @@
+export * from './QueryString/QueryStringTranslator';
+export * from './Url/UrlTranslator';
+export * from './Noop/NoopTranslator';

package/dist/esm/UrlManager/UrlManager.d.ts

@@ -0,0 +1,50 @@
+import { Translator, UrlState } from '../types';
+import type { ImmutableObject } from 'seamless-immutable';
+declare type omission = {
+    path: Array<string>;
+    values?: Array<any>;
+};
+declare class WatcherPool {
+    private callbacks;
+    constructor();
+    subscribe(cb: () => void): () => (() => void)[];
+    notify(): void;
+}
+export declare class UrlManager {
+    linker?: (urlManager: UrlManager) => Record<string, unknown>;
+    private omissions;
+    detached?: {
+        url: string;
+    };
+    private translator;
+    private urlState;
+    private globalState;
+    private localState;
+    private mergedState;
+    private prevState?;
+    private watcherPool;
+    constructor(translator: Translator, linker?: (urlManager: UrlManager) => Record<string, unknown>, globalState?: UrlState | ImmutableObject<UrlState>, localState?: UrlState | ImmutableObject<UrlState>, watcherPool?: WatcherPool, omissions?: Array<omission>, detached?: {
+        url: string;
+    });
+    private without;
+    private getTranslatorUrl;
+    refresh(): void;
+    get state(): ImmutableObject<UrlState>;
+    private unpackPathAndState;
+    set(...args: Array<unknown>): UrlManager;
+    merge(...args: Array<unknown>): UrlManager;
+    remove(_path: Array<string> | string, values?: Array<any> | any): UrlManager;
+    reset(): UrlManager;
+    withConfig(config: Record<string, unknown> | ((config: Record<string, unknown>) => Record<string, unknown>)): UrlManager;
+    withGlobals(globals: UrlState | ImmutableObject<UrlState>): UrlManager;
+    getTranslatorConfig(): Record<string, unknown>;
+    get href(): string;
+    go(config?: {
+        [any: string]: unknown;
+    }): void;
+    detach(reset?: boolean): UrlManager;
+    get link(): Record<string, any>;
+    subscribe(cb: (prev: ImmutableObject<UrlState>, next?: ImmutableObject<UrlState>) => void): () => void;
+}
+export {};
+//# sourceMappingURL=UrlManager.d.ts.map

package/dist/esm/UrlManager/UrlManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UrlManager.d.ts","sourceRoot":"","sources":["../../../src/UrlManager/UrlManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,aAAK,QAAQ,GAAG;IACf,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CACpB,CAAC;AAEF,cAAM,WAAW;IAChB,OAAO,CAAC,SAAS,CAAyB;;IAM1C,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI;IAMxB,MAAM;CAGN;AAED,qBAAa,UAAU;IAcd,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAInE,OAAO,CAAC,SAAS;IACV,QAAQ,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAlBlC,OAAO,CAAC,UAAU,CAAa;IAE/B,OAAO,CAAC,QAAQ,CAAyE;IACzF,OAAO,CAAC,WAAW,CAAyE;IAC5F,OAAO,CAAC,UAAU,CAAyE;IAC3F,OAAO,CAAC,WAAW,CAAyE;IAE5F,OAAO,CAAC,SAAS,CAAC,CAA4B;IAE9C,OAAO,CAAC,WAAW,CAAc;gBAGhC,UAAU,EAAE,UAAU,EACf,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,WAAW,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,EAClD,UAAU,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,EACjD,WAAW,CAAC,EAAE,WAAW,EACjB,SAAS,GAAE,KAAK,CAAC,QAAQ,CAAM,EAChC,QAAQ,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAwBlC,OAAO,CAAC,OAAO;IAkDf,OAAO,CAAC,gBAAgB;IAQxB,OAAO,IAAI,IAAI;IAiBf,IAAI,KAAK,IAAI,eAAe,CAAC,QAAQ,CAAC,CAErC;IAED,OAAO,CAAC,kBAAkB;IAQ1B,GAAG,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,UAAU;IAWxC,KAAK,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,UAAU;IAgC1C,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,UAAU;IAU5E,KAAK,IAAI,UAAU;IAYnB,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,UAAU;IAgBxH,WAAW,CAAC,OAAO,EAAE,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,GAAG,UAAU;IAItE,mBAAmB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAI9C,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,EAAE,CAAC,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,GAAG,IAAI;IAU7C,MAAM,CAAC,KAAK,UAAQ,GAAG,UAAU;IAMjC,IAAI,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAM9B;IAED,SAAS,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI;CAQtG"}