zustand-querystring 0.2.0 → 0.3.1

package/README.md

@@ -8,7 +8,6 @@ Examples:
 
 - [React](./examples/react/)
 - [NextJS](./examples/next/)
-- [Rakkas](./examples/rakkas/)
 
 Quickstart:
 
@@ -60,5 +59,26 @@ export const useStore = create<Store>()(
 querystring options:
 
 - <b>select</b> - the select option controls what part of the state is synced with the query string
-- <b>key: string</b> - the key option controls how the state is stored in the querystring (default: $)
+- <b>key: string</b> - the key option controls how the state is stored in the querystring (default: 'state')
 - <b>url</b> - the url option is used to provide the request url on the server side render
+- <b>format</b> - custom format for stringify/parse (default: JSON-based format)
+- <b>syncNull: boolean</b> - when true, null values that differ from initial state are synced to URL (default: false)
+- <b>syncUndefined: boolean</b> - when true, undefined values that differ from initial state are synced to URL (default: false)
+
+## Important Notes
+
+### State Diffing
+
+Only values that differ from the initial state are synced to the URL.
+
+### Null and Undefined Handling
+
+By default (`syncNull: false`, `syncUndefined: false`), `null` and `undefined` values are **not** synced to the URL. This means setting a value to `null` or `undefined` effectively "clears" it back to the initial state on page refresh.
+
+If you want to preserve `null` or `undefined` values in the URL (so they persist across refreshes), set `syncNull: true` or `syncUndefined: true` in options.
+
+### State Types
+
+- **Plain objects** (created with `{}`) are recursively compared with initial state - only changed properties are synced
+- **Arrays, Dates, RegExp, Maps, Sets, and class instances** are compared as atomic values - if any part changes, the entire value is synced
+- **Functions** are never synced to the URL

package/dist/format/readable.d.mts

@@ -0,0 +1,4 @@
+declare function stringify(input: unknown, recursive?: boolean): string;
+declare function parse<T = unknown>(str: string): T;
+
+export { parse, stringify };

package/dist/format/readable.d.ts

@@ -0,0 +1,4 @@
+declare function stringify(input: unknown, recursive?: boolean): string;
+declare function parse<T = unknown>(str: string): T;
+
+export { parse, stringify };

package/dist/format/readable.js

@@ -0,0 +1,164 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/format/readable.ts
+var readable_exports = {};
+__export(readable_exports, {
+  parse: () => parse,
+  stringify: () => stringify
+});
+module.exports = __toCommonJS(readable_exports);
+var keyStringifyRegexp = /([=:@$/.])/g;
+var valueStringifyRegexp = /([.~/])/g;
+var keyParseRegexp = /[=:@$.]/;
+var valueParseRegexp = /[.~]/;
+function encodeString(str, regexp) {
+  return encodeURI(str.replace(regexp, "/$1"));
+}
+function trim(res) {
+  return typeof res === "string" ? res.replace(/~+$/g, "").replace(/^\$/, "") : res;
+}
+function stringify(input, recursive) {
+  if (!recursive) {
+    return trim(stringify(input, true));
+  }
+  if (typeof input === "function") {
+    return "";
+  }
+  if (typeof input === "number" || input === true || input === false || input === null) {
+    const value = String(input);
+    return ":" + value.replace(/\./g, "/.");
+  }
+  const res = [];
+  if (Array.isArray(input)) {
+    for (const elem of input) {
+      typeof elem === "undefined" ? res.push(":null") : res.push(stringify(elem, true));
+    }
+    return "@" + res.join("..") + "~";
+  }
+  if (input instanceof Date) {
+    return "=!Date:" + encodeString(input.toISOString(), valueStringifyRegexp);
+  }
+  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("..") + "~";
+  }
+  if (typeof input === "undefined") {
+    return "";
+  }
+  return "=" + encodeString(input.toString(), valueStringifyRegexp);
+}
+function parse(str) {
+  if (!str.startsWith("$")) {
+    str = "$" + 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++);
+    if (type === "=") {
+      const value = readToken(valueParseRegexp);
+      if (value.startsWith("!Date:")) {
+        return new Date(value.slice("!Date:".length));
+      }
+      return value;
+    }
+    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;
+    }
+    if (type === "@") {
+      const res = [];
+      loop: {
+        if (pos >= str.length || str.charAt(pos) === "~") {
+          break loop;
+        }
+        while (true) {
+          res.push(parseToken());
+          if (pos >= str.length || str.charAt(pos) === "~") {
+            break loop;
+          }
+          if (str.charAt(pos) === "." && str.charAt(pos + 1) === ".") {
+            pos += 2;
+          } else {
+            pos += 1;
+          }
+        }
+      }
+      pos += 1;
+      return res;
+    }
+    if (type === "$") {
+      const res = {};
+      loop: {
+        if (pos >= str.length || str.charAt(pos) === "~") {
+          break loop;
+        }
+        while (true) {
+          const name = readToken(keyParseRegexp);
+          res[name] = parseToken();
+          if (pos >= str.length || str.charAt(pos) === "~") {
+            break loop;
+          }
+          if (str.charAt(pos) === "." && str.charAt(pos + 1) === ".") {
+            pos += 2;
+          } else {
+            pos += 1;
+          }
+        }
+      }
+      pos += 1;
+      return res;
+    }
+    throw new Error('Unexpected char "' + type + '" at position ' + (pos - 1));
+  }
+  return parseToken();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  parse,
+  stringify
+});

package/dist/format/readable.mjs

@@ -0,0 +1,139 @@
+// src/format/readable.ts
+var keyStringifyRegexp = /([=:@$/.])/g;
+var valueStringifyRegexp = /([.~/])/g;
+var keyParseRegexp = /[=:@$.]/;
+var valueParseRegexp = /[.~]/;
+function encodeString(str, regexp) {
+  return encodeURI(str.replace(regexp, "/$1"));
+}
+function trim(res) {
+  return typeof res === "string" ? res.replace(/~+$/g, "").replace(/^\$/, "") : res;
+}
+function stringify(input, recursive) {
+  if (!recursive) {
+    return trim(stringify(input, true));
+  }
+  if (typeof input === "function") {
+    return "";
+  }
+  if (typeof input === "number" || input === true || input === false || input === null) {
+    const value = String(input);
+    return ":" + value.replace(/\./g, "/.");
+  }
+  const res = [];
+  if (Array.isArray(input)) {
+    for (const elem of input) {
+      typeof elem === "undefined" ? res.push(":null") : res.push(stringify(elem, true));
+    }
+    return "@" + res.join("..") + "~";
+  }
+  if (input instanceof Date) {
+    return "=!Date:" + encodeString(input.toISOString(), valueStringifyRegexp);
+  }
+  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("..") + "~";
+  }
+  if (typeof input === "undefined") {
+    return "";
+  }
+  return "=" + encodeString(input.toString(), valueStringifyRegexp);
+}
+function parse(str) {
+  if (!str.startsWith("$")) {
+    str = "$" + 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++);
+    if (type === "=") {
+      const value = readToken(valueParseRegexp);
+      if (value.startsWith("!Date:")) {
+        return new Date(value.slice("!Date:".length));
+      }
+      return value;
+    }
+    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;
+    }
+    if (type === "@") {
+      const res = [];
+      loop: {
+        if (pos >= str.length || str.charAt(pos) === "~") {
+          break loop;
+        }
+        while (true) {
+          res.push(parseToken());
+          if (pos >= str.length || str.charAt(pos) === "~") {
+            break loop;
+          }
+          if (str.charAt(pos) === "." && str.charAt(pos + 1) === ".") {
+            pos += 2;
+          } else {
+            pos += 1;
+          }
+        }
+      }
+      pos += 1;
+      return res;
+    }
+    if (type === "$") {
+      const res = {};
+      loop: {
+        if (pos >= str.length || str.charAt(pos) === "~") {
+          break loop;
+        }
+        while (true) {
+          const name = readToken(keyParseRegexp);
+          res[name] = parseToken();
+          if (pos >= str.length || str.charAt(pos) === "~") {
+            break loop;
+          }
+          if (str.charAt(pos) === "." && str.charAt(pos + 1) === ".") {
+            pos += 2;
+          } else {
+            pos += 1;
+          }
+        }
+      }
+      pos += 1;
+      return res;
+    }
+    throw new Error('Unexpected char "' + type + '" at position ' + (pos - 1));
+  }
+  return parseToken();
+}
+export {
+  parse,
+  stringify
+};

package/dist/index.d.mts

@@ -1,4 +1,32 @@
-export { QueryStringOptions, querystring } from './middleware.mjs';
-export { parse, stringify } from './parser.mjs';
-export { createURL } from './utils.mjs';
-import 'zustand/vanilla';
+import { StoreMutatorIdentifier, StateCreator } from 'zustand/vanilla';
+
+type DeepSelect<T> = T extends object ? {
+    [P in keyof T]?: DeepSelect<T[P]> | boolean;
+} : boolean;
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+interface QueryStringOptions<T> {
+    url?: string;
+    select?: (pathname: string) => DeepSelect<T>;
+    key?: string;
+    format?: {
+        stringify: (value: DeepPartial<T>) => string;
+        parse: (value: string) => DeepPartial<T>;
+    };
+    syncNull?: boolean;
+    syncUndefined?: boolean;
+}
+type QueryString = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, Mps, Mcs>, options?: QueryStringOptions<T>) => StateCreator<T, Mps, Mcs>;
+declare const querystring: QueryString;
+
+declare function stringify(input: unknown): string;
+declare function parse(str: string): any;
+
+declare const createURL: ({ baseUrl, key, state, }: {
+    baseUrl: string;
+    key: string;
+    state: Object;
+}) => string;
+
+export { type QueryStringOptions, createURL, parse, querystring, stringify };

package/dist/index.d.ts

@@ -1,4 +1,32 @@
-export { QueryStringOptions, querystring } from './middleware.js';
-export { parse, stringify } from './parser.js';
-export { createURL } from './utils.js';
-import 'zustand/vanilla';
+import { StoreMutatorIdentifier, StateCreator } from 'zustand/vanilla';
+
+type DeepSelect<T> = T extends object ? {
+    [P in keyof T]?: DeepSelect<T[P]> | boolean;
+} : boolean;
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+interface QueryStringOptions<T> {
+    url?: string;
+    select?: (pathname: string) => DeepSelect<T>;
+    key?: string;
+    format?: {
+        stringify: (value: DeepPartial<T>) => string;
+        parse: (value: string) => DeepPartial<T>;
+    };
+    syncNull?: boolean;
+    syncUndefined?: boolean;
+}
+type QueryString = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, Mps, Mcs>, options?: QueryStringOptions<T>) => StateCreator<T, Mps, Mcs>;
+declare const querystring: QueryString;
+
+declare function stringify(input: unknown): string;
+declare function parse(str: string): any;
+
+declare const createURL: ({ baseUrl, key, state, }: {
+    baseUrl: string;
+    key: string;
+    state: Object;
+}) => string;
+
+export { type QueryStringOptions, createURL, parse, querystring, stringify };

package/dist/index.js

@@ -17,14 +17,14 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   createURL: () => createURL,
   parse: () => parse,
   querystring: () => querystring,
   stringify: () => stringify
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/middleware.ts
 var import_lodash_es = require("lodash-es");
@@ -38,17 +38,20 @@ function parse(str) {
 }
 
 // src/middleware.ts
-var compact = (newState, initialState) => {
+var compact = (newState, initialState, syncNull = false, syncUndefined = false) => {
   const output = {};
   Object.keys(newState).forEach((key) => {
-    if (newState[key] !== null && newState[key] !== void 0 && typeof newState[key] !== "function" && !(0, import_lodash_es.isEqual)(newState[key], initialState[key])) {
-      if (typeof newState[key] === "object" && !Array.isArray(newState[key])) {
-        const value = compact(newState[key], initialState[key]);
+    const newValue = newState[key];
+    const initialValue = initialState[key];
+    if (typeof newValue !== "function" && !(0, import_lodash_es.isEqual)(newValue, initialValue) && (syncNull || newValue !== null) && (syncUndefined || newValue !== void 0)) {
+      const isPlainObject = typeof newValue === "object" && newValue !== null && newValue !== void 0 && !Array.isArray(newValue) && newValue.constructor === Object;
+      if (isPlainObject && initialValue && typeof initialValue === "object") {
+        const value = compact(newValue, initialValue, syncNull, syncUndefined);
         if (value && Object.keys(value).length > 0) {
           output[key] = value;
         }
       } else {
-        output[key] = newState[key];
+        output[key] = newValue;
       }
     }
   });
@@ -80,12 +83,20 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       stringify,
       parse
     },
+    syncNull: false,
+    syncUndefined: false,
     ...options
   };
   const getStateFromUrl = (url) => {
-    const match = url.searchParams.get(defaultedOptions.key);
-    if (match) {
-      return defaultedOptions.format.parse(match);
+    const params = url.search.slice(1).split("&");
+    for (const param of params) {
+      const eqIndex = param.indexOf("=");
+      if (eqIndex === -1) continue;
+      const key = param.slice(0, eqIndex);
+      if (key === defaultedOptions.key) {
+        const value = param.slice(eqIndex + 1);
+        return value ? defaultedOptions.format.parse(value) : null;
+      }
     }
     return null;
   };
@@ -126,16 +137,29 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
     const setQuery = () => {
       const url = new URL(window.location.href);
       const selectedState = getSelectedState(get(), url.pathname);
-      const newCompacted = compact(selectedState, initialState);
+      const newCompacted = compact(
+        selectedState,
+        initialState,
+        defaultedOptions.syncNull,
+        defaultedOptions.syncUndefined
+      );
       const previous = url.search;
+      const params = url.search.slice(1).split("&").filter(Boolean);
+      let stateIndex = -1;
+      const otherParams = params.filter((p, i) => {
+        const [key] = p.split("=", 1);
+        if (key === defaultedOptions.key) {
+          stateIndex = i;
+          return false;
+        }
+        return true;
+      });
       if (Object.keys(newCompacted).length) {
-        url.searchParams.set(
-          defaultedOptions.key,
-          defaultedOptions.format.stringify(newCompacted)
-        );
-      } else {
-        url.searchParams.delete(defaultedOptions.key);
+        const value = defaultedOptions.format.stringify(newCompacted);
+        const position = stateIndex === -1 ? otherParams.length : stateIndex;
+        otherParams.splice(position, 0, `${defaultedOptions.key}=${value}`);
       }
+      url.search = otherParams.length ? "?" + otherParams.join("&") : "";
       if (url.search !== previous) {
         history.replaceState(history.state, "", url);
       }

package/dist/index.mjs

@@ -1,13 +1,184 @@
-import {
-  querystring
-} from "./chunk-L542GMLN.mjs";
-import {
-  createURL
-} from "./chunk-HC4H2XL3.mjs";
-import {
-  parse,
-  stringify
-} from "./chunk-OEB5LU3Z.mjs";
+// src/middleware.ts
+import { isEqual, mergeWith } from "lodash-es";
+
+// src/parser.ts
+function stringify(input) {
+  return encodeURIComponent(JSON.stringify(input));
+}
+function parse(str) {
+  return JSON.parse(decodeURIComponent(str));
+}
+
+// src/middleware.ts
+var compact = (newState, initialState, syncNull = false, syncUndefined = false) => {
+  const output = {};
+  Object.keys(newState).forEach((key) => {
+    const newValue = newState[key];
+    const initialValue = initialState[key];
+    if (typeof newValue !== "function" && !isEqual(newValue, initialValue) && (syncNull || newValue !== null) && (syncUndefined || newValue !== void 0)) {
+      const isPlainObject = typeof newValue === "object" && newValue !== null && newValue !== void 0 && !Array.isArray(newValue) && newValue.constructor === Object;
+      if (isPlainObject && initialValue && typeof initialValue === "object") {
+        const value = compact(newValue, initialValue, syncNull, syncUndefined);
+        if (value && Object.keys(value).length > 0) {
+          output[key] = value;
+        }
+      } else {
+        output[key] = newValue;
+      }
+    }
+  });
+  return output;
+};
+var translateSelectionToState = (selection, state) => {
+  if (typeof state !== "object" || !state) {
+    return {};
+  }
+  return Object.keys(selection).reduce((acc, key) => {
+    if (!(key in state)) {
+      return acc;
+    }
+    const value = selection[key];
+    if (typeof value === "boolean") {
+      if (value) {
+        acc[key] = state[key];
+      }
+    } else {
+      acc[key] = translateSelectionToState(value, state[key]);
+    }
+    return acc;
+  }, {});
+};
+var queryStringImpl = (fn, options) => (set, get, api) => {
+  const defaultedOptions = {
+    key: "state",
+    format: {
+      stringify,
+      parse
+    },
+    syncNull: false,
+    syncUndefined: false,
+    ...options
+  };
+  const getStateFromUrl = (url) => {
+    const params = url.search.slice(1).split("&");
+    for (const param of params) {
+      const eqIndex = param.indexOf("=");
+      if (eqIndex === -1) continue;
+      const key = param.slice(0, eqIndex);
+      if (key === defaultedOptions.key) {
+        const value = param.slice(eqIndex + 1);
+        return value ? defaultedOptions.format.parse(value) : null;
+      }
+    }
+    return null;
+  };
+  const getSelectedState = (state, pathname) => {
+    if (defaultedOptions.select) {
+      const selection = defaultedOptions.select(pathname);
+      const selectedState = translateSelectionToState(selection, state);
+      return selectedState;
+    }
+    return state != null ? state : {};
+  };
+  const initialize = (url, initialState) => {
+    try {
+      const stateFromURl = getStateFromUrl(url);
+      if (!stateFromURl) {
+        return initialState;
+      }
+      const merged = mergeWith(
+        {},
+        initialState,
+        getSelectedState(stateFromURl, url.pathname)
+      );
+      return merged;
+    } catch (error) {
+      console.error(error);
+      return initialState;
+    }
+  };
+  if (typeof window !== "undefined") {
+    const initialState = fn(
+      (...args) => {
+        set(...args);
+        setQuery();
+      },
+      get,
+      api
+    );
+    const setQuery = () => {
+      const url = new URL(window.location.href);
+      const selectedState = getSelectedState(get(), url.pathname);
+      const newCompacted = compact(
+        selectedState,
+        initialState,
+        defaultedOptions.syncNull,
+        defaultedOptions.syncUndefined
+      );
+      const previous = url.search;
+      const params = url.search.slice(1).split("&").filter(Boolean);
+      let stateIndex = -1;
+      const otherParams = params.filter((p, i) => {
+        const [key] = p.split("=", 1);
+        if (key === defaultedOptions.key) {
+          stateIndex = i;
+          return false;
+        }
+        return true;
+      });
+      if (Object.keys(newCompacted).length) {
+        const value = defaultedOptions.format.stringify(newCompacted);
+        const position = stateIndex === -1 ? otherParams.length : stateIndex;
+        otherParams.splice(position, 0, `${defaultedOptions.key}=${value}`);
+      }
+      url.search = otherParams.length ? "?" + otherParams.join("&") : "";
+      if (url.search !== previous) {
+        history.replaceState(history.state, "", url);
+      }
+    };
+    if (!api.__ZUSTAND_QUERYSTRING_INIT__) {
+      api.__ZUSTAND_QUERYSTRING_INIT__ = true;
+      let previousPathname = "";
+      const cb = () => {
+        if (location.pathname !== previousPathname) {
+          previousPathname = location.pathname;
+          setTimeout(setQuery, 100);
+        }
+        requestAnimationFrame(cb);
+      };
+      requestAnimationFrame(cb);
+    }
+    const originalSetState = api.setState;
+    api.setState = (...args) => {
+      originalSetState(...args);
+      setQuery();
+    };
+    const initialized = initialize(new URL(window.location.href), initialState);
+    api.getInitialState = () => initialized;
+    return initialized;
+  } else if (defaultedOptions.url) {
+    const initialized = initialize(
+      new URL(defaultedOptions.url, "http://localhost"),
+      fn(set, get, api)
+    );
+    api.getInitialState = () => initialized;
+    return initialized;
+  }
+  return fn(set, get, api);
+};
+var querystring = queryStringImpl;
+
+// src/utils.ts
+var createURL = ({
+  baseUrl,
+  key,
+  state
+}) => {
+  const url = new URL(baseUrl);
+  const stringified = stringify(state);
+  url.searchParams.set(key, stringified);
+  return url.href;
+};
 export {
   createURL,
   parse,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zustand-querystring",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -13,21 +13,44 @@
     "type": "github",
     "url": "https://github.com/nitedani/zustand-querystring"
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
+    "./format/readable": {
+      "types": "./dist/format/readable.d.ts",
+      "import": "./dist/format/readable.mjs",
+      "require": "./dist/format/readable.js"
+    },
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "format/readable": [
+        "./dist/format/readable.d.ts"
+      ]
+    }
+  },
   "tsup": {
     "clean": true,
     "target": "es2019",
     "format": [
       "cjs",
       "esm"
-    ]
+    ],
+    "entry": {
+      "index": "src/index.ts",
+      "format/readable": "src/format/readable.ts"
+    },
+    "dts": true
   },
   "files": [
     "/dist"
@@ -44,10 +67,7 @@
     "rimraf": "^6.0.1",
     "tsup": "^8.4.0",
     "typescript": "^5.8.2",
+    "vitest": "^4.0.12",
     "zustand": "^5.0.3"
-  },
-  "scripts": {
-    "build": "tsup src --dts",
-    "dev": "tsup src --dts --watch"
   }
-}
+}

package/dist/chunk-HC4H2XL3.mjs

@@ -1,19 +0,0 @@
-import {
-  stringify
-} from "./chunk-OEB5LU3Z.mjs";
-
-// src/utils.ts
-var createURL = ({
-  baseUrl,
-  key,
-  state
-}) => {
-  const url = new URL(baseUrl);
-  const stringified = stringify(state);
-  url.searchParams.set(key, stringified);
-  return url.href;
-};
-
-export {
-  createURL
-};

package/dist/chunk-L542GMLN.mjs

@@ -1,144 +0,0 @@
-import {
-  parse,
-  stringify
-} from "./chunk-OEB5LU3Z.mjs";
-
-// src/middleware.ts
-import { isEqual, mergeWith } from "lodash-es";
-var compact = (newState, initialState) => {
-  const output = {};
-  Object.keys(newState).forEach((key) => {
-    if (newState[key] !== null && newState[key] !== void 0 && 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];
-      }
-    }
-  });
-  return output;
-};
-var translateSelectionToState = (selection, state) => {
-  if (typeof state !== "object" || !state) {
-    return {};
-  }
-  return Object.keys(selection).reduce((acc, key) => {
-    if (!(key in state)) {
-      return acc;
-    }
-    const value = selection[key];
-    if (typeof value === "boolean") {
-      if (value) {
-        acc[key] = state[key];
-      }
-    } else {
-      acc[key] = translateSelectionToState(value, state[key]);
-    }
-    return acc;
-  }, {});
-};
-var queryStringImpl = (fn, options) => (set, get, api) => {
-  const defaultedOptions = {
-    key: "state",
-    format: {
-      stringify,
-      parse
-    },
-    ...options
-  };
-  const getStateFromUrl = (url) => {
-    const match = url.searchParams.get(defaultedOptions.key);
-    if (match) {
-      return defaultedOptions.format.parse(match);
-    }
-    return null;
-  };
-  const getSelectedState = (state, pathname) => {
-    if (defaultedOptions.select) {
-      const selection = defaultedOptions.select(pathname);
-      const selectedState = translateSelectionToState(selection, state);
-      return selectedState;
-    }
-    return state != null ? state : {};
-  };
-  const initialize = (url, initialState) => {
-    try {
-      const stateFromURl = getStateFromUrl(url);
-      if (!stateFromURl) {
-        return initialState;
-      }
-      const merged = mergeWith(
-        {},
-        initialState,
-        getSelectedState(stateFromURl, url.pathname)
-      );
-      return merged;
-    } catch (error) {
-      console.error(error);
-      return initialState;
-    }
-  };
-  if (typeof window !== "undefined") {
-    const initialState = fn(
-      (...args) => {
-        set(...args);
-        setQuery();
-      },
-      get,
-      api
-    );
-    const setQuery = () => {
-      const url = new URL(window.location.href);
-      const selectedState = getSelectedState(get(), url.pathname);
-      const newCompacted = compact(selectedState, initialState);
-      const previous = url.search;
-      if (Object.keys(newCompacted).length) {
-        url.searchParams.set(
-          defaultedOptions.key,
-          defaultedOptions.format.stringify(newCompacted)
-        );
-      } else {
-        url.searchParams.delete(defaultedOptions.key);
-      }
-      if (url.search !== previous) {
-        history.replaceState(history.state, "", url);
-      }
-    };
-    if (!api.__ZUSTAND_QUERYSTRING_INIT__) {
-      api.__ZUSTAND_QUERYSTRING_INIT__ = true;
-      let previousPathname = "";
-      const cb = () => {
-        if (location.pathname !== previousPathname) {
-          previousPathname = location.pathname;
-          setTimeout(setQuery, 100);
-        }
-        requestAnimationFrame(cb);
-      };
-      requestAnimationFrame(cb);
-    }
-    const originalSetState = api.setState;
-    api.setState = (...args) => {
-      originalSetState(...args);
-      setQuery();
-    };
-    const initialized = initialize(new URL(window.location.href), initialState);
-    api.getInitialState = () => initialized;
-    return initialized;
-  } else if (defaultedOptions.url) {
-    const initialized = initialize(
-      new URL(defaultedOptions.url, "http://localhost"),
-      fn(set, get, api)
-    );
-    api.getInitialState = () => initialized;
-    return initialized;
-  }
-  return fn(set, get, api);
-};
-var querystring = queryStringImpl;
-
-export {
-  querystring
-};

package/dist/chunk-OEB5LU3Z.mjs

@@ -1,12 +0,0 @@
-// src/parser.ts
-function stringify(input) {
-  return encodeURIComponent(JSON.stringify(input));
-}
-function parse(str) {
-  return JSON.parse(decodeURIComponent(str));
-}
-
-export {
-  stringify,
-  parse
-};

package/dist/middleware.d.mts

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

package/dist/middleware.d.ts

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

package/dist/middleware.js

@@ -1,172 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/middleware.ts
-var middleware_exports = {};
-__export(middleware_exports, {
-  querystring: () => querystring
-});
-module.exports = __toCommonJS(middleware_exports);
-var import_lodash_es = require("lodash-es");
-
-// src/parser.ts
-function stringify(input) {
-  return encodeURIComponent(JSON.stringify(input));
-}
-function parse(str) {
-  return JSON.parse(decodeURIComponent(str));
-}
-
-// src/middleware.ts
-var compact = (newState, initialState) => {
-  const output = {};
-  Object.keys(newState).forEach((key) => {
-    if (newState[key] !== null && newState[key] !== void 0 && typeof newState[key] !== "function" && !(0, import_lodash_es.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];
-      }
-    }
-  });
-  return output;
-};
-var translateSelectionToState = (selection, state) => {
-  if (typeof state !== "object" || !state) {
-    return {};
-  }
-  return Object.keys(selection).reduce((acc, key) => {
-    if (!(key in state)) {
-      return acc;
-    }
-    const value = selection[key];
-    if (typeof value === "boolean") {
-      if (value) {
-        acc[key] = state[key];
-      }
-    } else {
-      acc[key] = translateSelectionToState(value, state[key]);
-    }
-    return acc;
-  }, {});
-};
-var queryStringImpl = (fn, options) => (set, get, api) => {
-  const defaultedOptions = {
-    key: "state",
-    format: {
-      stringify,
-      parse
-    },
-    ...options
-  };
-  const getStateFromUrl = (url) => {
-    const match = url.searchParams.get(defaultedOptions.key);
-    if (match) {
-      return defaultedOptions.format.parse(match);
-    }
-    return null;
-  };
-  const getSelectedState = (state, pathname) => {
-    if (defaultedOptions.select) {
-      const selection = defaultedOptions.select(pathname);
-      const selectedState = translateSelectionToState(selection, state);
-      return selectedState;
-    }
-    return state != null ? state : {};
-  };
-  const initialize = (url, initialState) => {
-    try {
-      const stateFromURl = getStateFromUrl(url);
-      if (!stateFromURl) {
-        return initialState;
-      }
-      const merged = (0, import_lodash_es.mergeWith)(
-        {},
-        initialState,
-        getSelectedState(stateFromURl, url.pathname)
-      );
-      return merged;
-    } catch (error) {
-      console.error(error);
-      return initialState;
-    }
-  };
-  if (typeof window !== "undefined") {
-    const initialState = fn(
-      (...args) => {
-        set(...args);
-        setQuery();
-      },
-      get,
-      api
-    );
-    const setQuery = () => {
-      const url = new URL(window.location.href);
-      const selectedState = getSelectedState(get(), url.pathname);
-      const newCompacted = compact(selectedState, initialState);
-      const previous = url.search;
-      if (Object.keys(newCompacted).length) {
-        url.searchParams.set(
-          defaultedOptions.key,
-          defaultedOptions.format.stringify(newCompacted)
-        );
-      } else {
-        url.searchParams.delete(defaultedOptions.key);
-      }
-      if (url.search !== previous) {
-        history.replaceState(history.state, "", url);
-      }
-    };
-    if (!api.__ZUSTAND_QUERYSTRING_INIT__) {
-      api.__ZUSTAND_QUERYSTRING_INIT__ = true;
-      let previousPathname = "";
-      const cb = () => {
-        if (location.pathname !== previousPathname) {
-          previousPathname = location.pathname;
-          setTimeout(setQuery, 100);
-        }
-        requestAnimationFrame(cb);
-      };
-      requestAnimationFrame(cb);
-    }
-    const originalSetState = api.setState;
-    api.setState = (...args) => {
-      originalSetState(...args);
-      setQuery();
-    };
-    const initialized = initialize(new URL(window.location.href), initialState);
-    api.getInitialState = () => initialized;
-    return initialized;
-  } else if (defaultedOptions.url) {
-    const initialized = initialize(
-      new URL(defaultedOptions.url, "http://localhost"),
-      fn(set, get, api)
-    );
-    api.getInitialState = () => initialized;
-    return initialized;
-  }
-  return fn(set, get, api);
-};
-var querystring = queryStringImpl;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  querystring
-});

package/dist/middleware.mjs

@@ -1,7 +0,0 @@
-import {
-  querystring
-} from "./chunk-L542GMLN.mjs";
-import "./chunk-OEB5LU3Z.mjs";
-export {
-  querystring
-};

package/dist/parser.d.mts

@@ -1,4 +0,0 @@
-declare function stringify(input: unknown): string;
-declare function parse(str: string): any;
-
-export { parse, stringify };

package/dist/parser.d.ts

@@ -1,4 +0,0 @@
-declare function stringify(input: unknown): string;
-declare function parse(str: string): any;
-
-export { parse, stringify };

package/dist/parser.js

@@ -1,36 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/parser.ts
-var parser_exports = {};
-__export(parser_exports, {
-  parse: () => parse,
-  stringify: () => stringify
-});
-module.exports = __toCommonJS(parser_exports);
-function stringify(input) {
-  return encodeURIComponent(JSON.stringify(input));
-}
-function parse(str) {
-  return JSON.parse(decodeURIComponent(str));
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  parse,
-  stringify
-});

package/dist/parser.mjs

@@ -1,8 +0,0 @@
-import {
-  parse,
-  stringify
-} from "./chunk-OEB5LU3Z.mjs";
-export {
-  parse,
-  stringify
-};

package/dist/utils.d.mts

@@ -1,7 +0,0 @@
-declare const createURL: ({ baseUrl, key, state, }: {
-    baseUrl: string;
-    key: string;
-    state: Object;
-}) => string;
-
-export { createURL };

package/dist/utils.d.ts

@@ -1,7 +0,0 @@
-declare const createURL: ({ baseUrl, key, state, }: {
-    baseUrl: string;
-    key: string;
-    state: Object;
-}) => string;
-
-export { createURL };

package/dist/utils.js

@@ -1,45 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/utils.ts
-var utils_exports = {};
-__export(utils_exports, {
-  createURL: () => createURL
-});
-module.exports = __toCommonJS(utils_exports);
-
-// src/parser.ts
-function stringify(input) {
-  return encodeURIComponent(JSON.stringify(input));
-}
-
-// src/utils.ts
-var createURL = ({
-  baseUrl,
-  key,
-  state
-}) => {
-  const url = new URL(baseUrl);
-  const stringified = stringify(state);
-  url.searchParams.set(key, stringified);
-  return url.href;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createURL
-});

package/dist/utils.mjs

@@ -1,7 +0,0 @@
-import {
-  createURL
-} from "./chunk-HC4H2XL3.mjs";
-import "./chunk-OEB5LU3Z.mjs";
-export {
-  createURL
-};