zustand-querystring 0.0.1

package/lib/index.d.ts

@@ -0,0 +1 @@
+export { queryString, QueryStringOptions } from './middleware.js';

package/lib/index.js

@@ -0,0 +1 @@
+export { queryString } from './middleware.js';

package/lib/middleware.d.ts

@@ -0,0 +1,11 @@
+import { StateCreator, StoreMutatorIdentifier } from 'zustand/vanilla';
+type DeepSelect<T> = T extends object ? {
+    [P in keyof T]?: DeepSelect<T[P]> | boolean;
+} : boolean;
+export interface QueryStringOptions<T> {
+    url?: string;
+    select?: (pathname: string) => DeepSelect<T>;
+}
+type QueryString = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, Mps, Mcs>, options?: QueryStringOptions<T>) => StateCreator<T, Mps, Mcs>;
+export declare const queryString: QueryString;
+export {};

package/lib/middleware.js

@@ -0,0 +1,115 @@
+import { parse, stringify } from './parser.js';
+import { mergeWith, isEqual } from 'lodash-es';
+const compact = (newState, initialState) => {
+    const output = {};
+    Object.keys(newState).forEach(key => {
+        if (newState[key] !== null &&
+            newState[key] !== undefined &&
+            typeof newState[key] !== 'function' &&
+            !isEqual(newState[key], initialState[key])) {
+            if (typeof newState[key] === 'object' && !Array.isArray(newState[key])) {
+                const value = compact(newState[key], initialState[key]);
+                if (value && Object.keys(value).length > 0) {
+                    output[key] = value;
+                }
+            }
+            else {
+                output[key] = newState[key];
+            }
+        }
+    });
+    if (Object.keys(output).length === 0) {
+        return null;
+    }
+    return output;
+};
+const translateSelectionToState = (selection, state) => Object.keys(selection).reduce((acc, key) => {
+    const value = selection[key];
+    if (typeof value === 'boolean') {
+        if (value) {
+            acc[key] = state[key];
+        }
+    }
+    else {
+        acc[key] = translateSelectionToState(value, state[key]);
+    }
+    return acc;
+}, {});
+const queryStringImpl = (fn, options) => (set, get, api) => {
+    const defaultedOptions = {
+        partialize: state => state,
+        ...options,
+    };
+    const url = defaultedOptions.url;
+    const initialState = get() ?? fn(set, get, api);
+    const getSelectedState = () => {
+        if (defaultedOptions.select) {
+            const selection = defaultedOptions.select(window.location.pathname);
+            // translate the selection to state
+            const selectedState = translateSelectionToState(selection, get());
+            return selectedState;
+        }
+        return get();
+    };
+    const initialize = (url, _set = set) => {
+        try {
+            const queryString = url.split('?')[1]?.slice(2);
+            if (!queryString) {
+                return fn(_set, get, api);
+            }
+            const parsed = parse(queryString);
+            const currentValue = get() ?? fn(_set, get, api);
+            const merged = mergeWith(currentValue, parsed);
+            set(merged, true);
+            return merged;
+        }
+        catch (error) {
+            console.error(error);
+            if (typeof window !== 'undefined') {
+                window.history.replaceState(null, '', window.location.pathname);
+            }
+            return fn(_set, get, api);
+        }
+    };
+    if (typeof window !== 'undefined') {
+        const setQuery = () => {
+            const selectedState = getSelectedState();
+            if (!selectedState) {
+                return;
+            }
+            const compactedSelectedState = compact(selectedState, initialState);
+            if (!compactedSelectedState) {
+                window.history.replaceState(null, '', window.location.pathname);
+                return;
+            }
+            const stringified = stringify(compactedSelectedState);
+            if (stringified) {
+                // console.log('set query', stringified);
+                // console.log('parse query', parse(stringified));
+                window.history.replaceState(null, '', `?q=${stringified}`);
+            }
+        };
+        //TODO: find a better way to do this
+        let previousUrl = '';
+        setInterval(() => {
+            if (window.location.href !== previousUrl) {
+                previousUrl = window.location.href;
+                setQuery();
+            }
+        }, 50);
+        const originalSetState = api.setState;
+        api.setState = (...args) => {
+            originalSetState(...args);
+            setQuery();
+        };
+        return initialize(window.location.href, (...args) => {
+            set(...args);
+            setQuery();
+        });
+    }
+    if (url) {
+        return initialize(url);
+    }
+    return fn(set, get, api);
+};
+export const queryString = queryStringImpl;

package/lib/parser.d.ts

@@ -0,0 +1,2 @@
+export declare function stringify(input: unknown, recursive?: boolean): any;
+export declare function parse(str: string): {} | null;

package/lib/parser.js

@@ -0,0 +1,134 @@
+const keyStringifyRegexp = /([=:@$/])/g;
+const valueStringifyRegexp = /([&;/])/g;
+const keyParseRegexp = /[=:@$]/;
+const valueParseRegexp = /[&;]/;
+function encodeString(str, regexp) {
+    return encodeURI(str.replace(regexp, '/$1'));
+}
+function trim(res) {
+    return typeof res === 'string' ? res.replace(/;+$/g, '') : res;
+}
+export function stringify(input, recursive) {
+    if (!recursive) {
+        return trim(stringify(input, true));
+    }
+    // Function
+    if (typeof input === 'function') {
+        return;
+    }
+    // Number, Boolean or Null
+    if (typeof input === 'number' ||
+        input === true ||
+        input === false ||
+        input === null) {
+        return ':' + input;
+    }
+    const res = [];
+    // Array
+    if (Array.isArray(input)) {
+        for (const elem of input) {
+            typeof elem === 'undefined'
+                ? res.push(':null')
+                : res.push(stringify(elem, true));
+        }
+        return '@' + res.join('&') + ';';
+    }
+    // Object
+    if (typeof input === 'object') {
+        for (const [key, value] of Object.entries(input)) {
+            const stringifiedValue = stringify(value, true);
+            if (stringifiedValue) {
+                res.push(encodeString(key, keyStringifyRegexp) + stringifiedValue);
+            }
+        }
+        return '$' + res.join('&') + ';';
+    }
+    // undefined
+    if (typeof input === 'undefined') {
+        return;
+    }
+    // String
+    return '=' + encodeString(input.toString(), valueStringifyRegexp);
+}
+export function parse(str) {
+    let pos = 0;
+    str = decodeURI(str);
+    function readToken(regexp) {
+        let token = '';
+        for (; pos !== str.length; ++pos) {
+            if (str.charAt(pos) === '/') {
+                pos += 1;
+                if (pos === str.length) {
+                    token += ';';
+                    break;
+                }
+            }
+            else if (str.charAt(pos).match(regexp)) {
+                break;
+            }
+            token += str.charAt(pos);
+        }
+        return token;
+    }
+    function parseToken() {
+        const type = str.charAt(pos++);
+        // String
+        if (type === '=') {
+            return readToken(valueParseRegexp);
+        }
+        // Number, Boolean or Null
+        if (type === ':') {
+            const value = readToken(valueParseRegexp);
+            if (value === 'true') {
+                return true;
+            }
+            if (value === 'false') {
+                return false;
+            }
+            const parsedValue = parseFloat(value);
+            return isNaN(parsedValue) ? null : parsedValue;
+        }
+        // Array
+        if (type === '@') {
+            const res = [];
+            loop: {
+                // empty array
+                if (pos >= str.length || str.charAt(pos) === ';') {
+                    break loop;
+                }
+                // parse array items
+                while (1) {
+                    res.push(parseToken());
+                    if (pos >= str.length || str.charAt(pos) === ';') {
+                        break loop;
+                    }
+                    pos += 1;
+                }
+            }
+            pos += 1;
+            return res;
+        }
+        // Object
+        if (type === '$') {
+            const res = {};
+            loop: {
+                if (pos >= str.length || str.charAt(pos) === ';') {
+                    break loop;
+                }
+                while (1) {
+                    var name = readToken(keyParseRegexp);
+                    res[name] = parseToken();
+                    if (pos >= str.length || str.charAt(pos) === ';') {
+                        break loop;
+                    }
+                    pos += 1;
+                }
+            }
+            pos += 1;
+            return res;
+        }
+        // Error
+        throw new Error('Unexpected char ' + type);
+    }
+    return parseToken();
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "zustand-querystring",
+  "version": "0.0.1",
+  "license": "MIT",
+  "type": "module",
+  "keywords": [
+    "zustand",
+    "querystring"
+  ],
+  "repository": {
+    "type": "github",
+    "url": "https://github.com/nitedani/zustand-querystring"
+  },
+  "exports": {
+    ".": "./lib/index.js"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "lib/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "lodash-es": "^4.17.21"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.6",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.9.3",
+    "zustand": "^4.1.4"
+  },
+  "scripts": {
+    "build": "rimraf lib && tsc -b"
+  }
+}