zustand-querystring 0.3.2 → 0.4.0

package/README.md

@@ -59,9 +59,9 @@ 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: 'state')
+- <b>key: string | false</b> - the key option controls how the state is stored in the querystring (default: 'state'). Set to `false` for standalone mode where each state key becomes a separate query parameter.
 - <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>format</b> - custom format for stringify/parse (default: JSON-based format). Use `readable` from `zustand-querystring/format/readable` for human-readable URLs.
 - <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)
 

package/dist/format/readable.d.mts

@@ -4,7 +4,11 @@
  * Inspired by URLON (https://github.com/cerebral/urlon)
  * Copyright (c) 2021 Cerebral - MIT License
  */
-declare function stringify(value: unknown): string;
-declare function parse<T = unknown>(input: string): T;
+declare function stringify(value: unknown, standalone?: boolean): string;
+declare function parse<T = unknown>(input: string, standalone?: boolean): T;
+declare const readable: {
+    stringify: typeof stringify;
+    parse: typeof parse;
+};
 
-export { parse, stringify };
+export { parse, readable, stringify };

package/dist/format/readable.d.ts

@@ -4,7 +4,11 @@
  * Inspired by URLON (https://github.com/cerebral/urlon)
  * Copyright (c) 2021 Cerebral - MIT License
  */
-declare function stringify(value: unknown): string;
-declare function parse<T = unknown>(input: string): T;
+declare function stringify(value: unknown, standalone?: boolean): string;
+declare function parse<T = unknown>(input: string, standalone?: boolean): T;
+declare const readable: {
+    stringify: typeof stringify;
+    parse: typeof parse;
+};
 
-export { parse, stringify };
+export { parse, readable, stringify };

package/dist/format/readable.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var readable_exports = {};
 __export(readable_exports, {
   parse: () => parse,
+  readable: () => readable,
   stringify: () => stringify
 });
 module.exports = __toCommonJS(readable_exports);
@@ -30,27 +31,38 @@ var TYPE_PRIMITIVE = ":";
 var SEPARATOR = ",";
 var TERMINATOR = "~";
 var ESCAPE = "/";
-var DATE_PREFIX = "!Date:";
-var SEP_CHAR = SEPARATOR[0];
+var DATE_PREFIX = "D";
 var esc = (c) => /[.$^*+?()[\]{}|\\]/.test(c) ? `\\${c}` : c;
-var KEY_STOP = new RegExp(`[${TYPE_STRING}${TYPE_PRIMITIVE}${TYPE_ARRAY}${esc(TYPE_OBJECT)}${esc(SEP_CHAR)}]`);
-var VALUE_STOP = new RegExp(`[${esc(SEP_CHAR)}${TERMINATOR}]`);
-var KEY_ESCAPE = new RegExp(`([${TYPE_STRING}${TYPE_PRIMITIVE}${TYPE_ARRAY}${esc(TYPE_OBJECT)}${ESCAPE}${esc(SEP_CHAR)}])`, "g");
-var VALUE_ESCAPE = new RegExp(`([${esc(SEP_CHAR)}${TERMINATOR}${ESCAPE}])`, "g");
+var KEY_STOP = new RegExp(
+  `[${TYPE_STRING}${TYPE_PRIMITIVE}${TYPE_ARRAY}${esc(TYPE_OBJECT)}${esc(SEPARATOR)}]`
+);
+var VALUE_STOP = new RegExp(`[${esc(SEPARATOR)}${TERMINATOR}]`);
+var KEY_ESCAPE = new RegExp(
+  `([${TYPE_STRING}${TYPE_PRIMITIVE}${TYPE_ARRAY}${esc(TYPE_OBJECT)}${ESCAPE}${esc(SEPARATOR)}])`,
+  "g"
+);
+var VALUE_ESCAPE = new RegExp(
+  `([${esc(SEPARATOR)}${TERMINATOR}${ESCAPE}])`,
+  "g"
+);
 function escapeStr(str, pattern) {
   return encodeURI(str.replace(pattern, `${ESCAPE}$1`));
 }
-function cleanResult(str) {
+function cleanResult(str, standalone) {
   while (str.endsWith(TERMINATOR)) str = str.slice(0, -1);
-  if (str.startsWith(TYPE_OBJECT) || str.startsWith(TYPE_ARRAY)) {
-    str = str.slice(1);
+  const datePattern = new RegExp(`^${esc(TYPE_STRING)}${DATE_PREFIX}-?\\d+$`);
+  if (standalone && datePattern.test(str)) {
+    return str.slice(1);
+  }
+  if (!standalone && str.startsWith(TYPE_OBJECT)) {
+    return str.slice(1);
   }
   return str;
 }
-function stringify(value) {
-  return cleanResult(serialize(value));
+function stringify(value, standalone = false) {
+  return cleanResult(serialize(value, standalone), standalone);
 }
-function serialize(value) {
+function serialize(value, standalone, inArray = false) {
   if (value === null) return `${TYPE_PRIMITIVE}null`;
   if (value === void 0) return `${TYPE_PRIMITIVE}undefined`;
   if (typeof value === "function") return "";
@@ -61,107 +73,166 @@ function serialize(value) {
     return `${TYPE_PRIMITIVE}${value}`;
   }
   if (value instanceof Date) {
-    return `${TYPE_STRING}${DATE_PREFIX}${escapeStr(value.toISOString(), VALUE_ESCAPE)}`;
+    return `${TYPE_STRING}${DATE_PREFIX}${value.getTime()}`;
   }
   if (Array.isArray(value)) {
-    const items = value.map((v) => serialize(v));
+    const items = value.map((v) => serialize(v, standalone, true));
     return `${TYPE_ARRAY}${items.join(SEPARATOR)}${TERMINATOR}`;
   }
   if (typeof value === "object") {
     const entries = [];
     for (const [k, v] of Object.entries(value)) {
-      const val = serialize(v);
+      const val = serialize(v, false, false);
       if (val || v === void 0) {
         entries.push(`${escapeStr(k, KEY_ESCAPE)}${val}`);
       }
     }
     return `${TYPE_OBJECT}${entries.join(SEPARATOR)}${TERMINATOR}`;
   }
-  return `${TYPE_STRING}${escapeStr(String(value), VALUE_ESCAPE)}`;
+  const strVal = String(value);
+  let escaped = escapeStr(strVal, VALUE_ESCAPE);
+  const datePattern = new RegExp(`^${DATE_PREFIX}-?\\d`);
+  if (datePattern.test(strVal)) {
+    escaped = ESCAPE + escaped;
+  }
+  return standalone || inArray ? escaped : `${TYPE_STRING}${escaped}`;
 }
-function parse(input) {
+function parse(input, standalone = false) {
   const str = decodeURI(input);
+  if (str.length === 0) {
+    return standalone ? "" : {};
+  }
   const first = str[0];
   const hasMarker = first === TYPE_STRING || first === TYPE_PRIMITIVE || first === TYPE_ARRAY || first === TYPE_OBJECT;
+  let source;
+  if (hasMarker) {
+    source = str;
+  } else if (standalone) {
+    const datePattern = new RegExp(`^${DATE_PREFIX}-?\\d+$`);
+    if (datePattern.test(str)) {
+      const timestamp = parseInt(str.slice(DATE_PREFIX.length), 10);
+      if (!isNaN(timestamp)) {
+        return new Date(timestamp);
+      }
+    }
+    return str;
+  } else {
+    const markers = `${TYPE_STRING}${TYPE_PRIMITIVE}${TYPE_ARRAY}${TYPE_OBJECT}`;
+    const objectPattern = new RegExp(
+      `[^${ESCAPE}${markers}${SEPARATOR}${TERMINATOR}][${markers}]`
+    );
+    source = objectPattern.test(str) ? `${TYPE_OBJECT}${str}` : `${TYPE_STRING}${str}`;
+  }
   let pos = 0;
-  const source = hasMarker ? str : `${TYPE_OBJECT}${str}`;
-  function readUntil(pattern) {
+  function peek() {
+    return source[pos] || "";
+  }
+  function advance() {
+    pos++;
+  }
+  function readUntil(stopPattern, checkEscape = false) {
     let result = "";
+    let wasEscaped = false;
     while (pos < source.length) {
-      const char = source[pos];
-      if (char === ESCAPE) {
-        pos++;
-        result += pos < source.length ? source[pos++] : TERMINATOR;
+      const ch = peek();
+      if (ch === ESCAPE) {
+        if (checkEscape && pos + 1 < source.length && source[pos + 1] === DATE_PREFIX) {
+          wasEscaped = true;
+        }
+        advance();
+        if (pos < source.length) {
+          result += peek();
+          advance();
+        }
         continue;
       }
-      if (pattern.test(char)) break;
-      result += char;
-      pos++;
-    }
-    return result;
-  }
-  function skipSeparator() {
-    if (source[pos] === SEPARATOR) {
-      pos++;
+      if (stopPattern.test(ch)) break;
+      result += ch;
+      advance();
     }
+    return { value: result, wasEscaped };
   }
   function parseString() {
-    const val = readUntil(VALUE_STOP);
-    if (val.startsWith(DATE_PREFIX)) {
-      return new Date(val.slice(DATE_PREFIX.length));
+    const { value, wasEscaped } = readUntil(VALUE_STOP, true);
+    const datePattern = new RegExp(`^${DATE_PREFIX}-?\\d+$`);
+    if (!wasEscaped && datePattern.test(value)) {
+      const timestamp = parseInt(value.slice(DATE_PREFIX.length), 10);
+      if (!isNaN(timestamp)) {
+        return new Date(timestamp);
+      }
     }
-    return val;
+    return value;
   }
   function parsePrimitive() {
-    const val = readUntil(VALUE_STOP);
-    if (val === "null") return null;
-    if (val === "undefined") return void 0;
-    if (val === "true") return true;
-    if (val === "false") return false;
-    return parseFloat(val);
+    const { value } = readUntil(VALUE_STOP, false);
+    if (value === "null") return null;
+    if (value === "undefined") return void 0;
+    if (value === "true") return true;
+    if (value === "false") return false;
+    return parseFloat(value);
   }
   function parseArray() {
     const result = [];
-    while (pos < source.length && source[pos] !== TERMINATOR) {
-      result.push(parseValue());
-      if (pos < source.length && source[pos] !== TERMINATOR) {
-        skipSeparator();
+    let lastWasSeparator = false;
+    while (pos < source.length && peek() !== TERMINATOR) {
+      if (peek() === SEPARATOR) {
+        result.push("");
+        advance();
+        lastWasSeparator = true;
+        continue;
+      }
+      lastWasSeparator = false;
+      const ch = peek();
+      if (ch === TYPE_PRIMITIVE || ch === TYPE_ARRAY || ch === TYPE_OBJECT || ch === TYPE_STRING) {
+        result.push(parseValue());
+      } else {
+        result.push(parseString());
+      }
+      if (pos < source.length && peek() === SEPARATOR) {
+        advance();
+        lastWasSeparator = true;
       }
     }
-    if (source[pos] === TERMINATOR) pos++;
+    if (lastWasSeparator && (peek() === TERMINATOR || pos >= source.length)) {
+      result.push("");
+    }
+    if (peek() === TERMINATOR) advance();
     return result;
   }
   function parseObject() {
     const result = {};
-    while (pos < source.length && source[pos] !== TERMINATOR) {
-      const key = readUntil(KEY_STOP);
+    while (pos < source.length && peek() !== TERMINATOR) {
+      const { value: key } = readUntil(KEY_STOP, false);
       result[key] = parseValue();
-      if (pos < source.length && source[pos] !== TERMINATOR) {
-        skipSeparator();
+      if (pos < source.length && peek() !== TERMINATOR && peek() === SEPARATOR) {
+        advance();
       }
     }
-    if (source[pos] === TERMINATOR) pos++;
+    if (peek() === TERMINATOR) advance();
     return result;
   }
   function parseValue() {
-    const type = source[pos++];
+    const type = peek();
+    advance();
     switch (type) {
-      case TYPE_STRING:
-        return parseString();
       case TYPE_PRIMITIVE:
         return parsePrimitive();
       case TYPE_ARRAY:
         return parseArray();
       case TYPE_OBJECT:
         return parseObject();
+      case TYPE_STRING:
+        return parseString();
       default:
-        throw new Error(`Unexpected type "${type}" at position ${pos - 1}`);
+        throw new Error(`Unexpected type "${type}" at position ${pos}`);
     }
   }
   return parseValue();
 }
+var readable = { stringify, parse };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   parse,
+  readable,
   stringify
 });

package/dist/format/readable.mjs

@@ -6,27 +6,38 @@ var TYPE_PRIMITIVE = ":";
 var SEPARATOR = ",";
 var TERMINATOR = "~";
 var ESCAPE = "/";
-var DATE_PREFIX = "!Date:";
-var SEP_CHAR = SEPARATOR[0];
+var DATE_PREFIX = "D";
 var esc = (c) => /[.$^*+?()[\]{}|\\]/.test(c) ? `\\${c}` : c;
-var KEY_STOP = new RegExp(`[${TYPE_STRING}${TYPE_PRIMITIVE}${TYPE_ARRAY}${esc(TYPE_OBJECT)}${esc(SEP_CHAR)}]`);
-var VALUE_STOP = new RegExp(`[${esc(SEP_CHAR)}${TERMINATOR}]`);
-var KEY_ESCAPE = new RegExp(`([${TYPE_STRING}${TYPE_PRIMITIVE}${TYPE_ARRAY}${esc(TYPE_OBJECT)}${ESCAPE}${esc(SEP_CHAR)}])`, "g");
-var VALUE_ESCAPE = new RegExp(`([${esc(SEP_CHAR)}${TERMINATOR}${ESCAPE}])`, "g");
+var KEY_STOP = new RegExp(
+  `[${TYPE_STRING}${TYPE_PRIMITIVE}${TYPE_ARRAY}${esc(TYPE_OBJECT)}${esc(SEPARATOR)}]`
+);
+var VALUE_STOP = new RegExp(`[${esc(SEPARATOR)}${TERMINATOR}]`);
+var KEY_ESCAPE = new RegExp(
+  `([${TYPE_STRING}${TYPE_PRIMITIVE}${TYPE_ARRAY}${esc(TYPE_OBJECT)}${ESCAPE}${esc(SEPARATOR)}])`,
+  "g"
+);
+var VALUE_ESCAPE = new RegExp(
+  `([${esc(SEPARATOR)}${TERMINATOR}${ESCAPE}])`,
+  "g"
+);
 function escapeStr(str, pattern) {
   return encodeURI(str.replace(pattern, `${ESCAPE}$1`));
 }
-function cleanResult(str) {
+function cleanResult(str, standalone) {
   while (str.endsWith(TERMINATOR)) str = str.slice(0, -1);
-  if (str.startsWith(TYPE_OBJECT) || str.startsWith(TYPE_ARRAY)) {
-    str = str.slice(1);
+  const datePattern = new RegExp(`^${esc(TYPE_STRING)}${DATE_PREFIX}-?\\d+$`);
+  if (standalone && datePattern.test(str)) {
+    return str.slice(1);
+  }
+  if (!standalone && str.startsWith(TYPE_OBJECT)) {
+    return str.slice(1);
   }
   return str;
 }
-function stringify(value) {
-  return cleanResult(serialize(value));
+function stringify(value, standalone = false) {
+  return cleanResult(serialize(value, standalone), standalone);
 }
-function serialize(value) {
+function serialize(value, standalone, inArray = false) {
   if (value === null) return `${TYPE_PRIMITIVE}null`;
   if (value === void 0) return `${TYPE_PRIMITIVE}undefined`;
   if (typeof value === "function") return "";
@@ -37,106 +48,165 @@ function serialize(value) {
     return `${TYPE_PRIMITIVE}${value}`;
   }
   if (value instanceof Date) {
-    return `${TYPE_STRING}${DATE_PREFIX}${escapeStr(value.toISOString(), VALUE_ESCAPE)}`;
+    return `${TYPE_STRING}${DATE_PREFIX}${value.getTime()}`;
   }
   if (Array.isArray(value)) {
-    const items = value.map((v) => serialize(v));
+    const items = value.map((v) => serialize(v, standalone, true));
     return `${TYPE_ARRAY}${items.join(SEPARATOR)}${TERMINATOR}`;
   }
   if (typeof value === "object") {
     const entries = [];
     for (const [k, v] of Object.entries(value)) {
-      const val = serialize(v);
+      const val = serialize(v, false, false);
       if (val || v === void 0) {
         entries.push(`${escapeStr(k, KEY_ESCAPE)}${val}`);
       }
     }
     return `${TYPE_OBJECT}${entries.join(SEPARATOR)}${TERMINATOR}`;
   }
-  return `${TYPE_STRING}${escapeStr(String(value), VALUE_ESCAPE)}`;
+  const strVal = String(value);
+  let escaped = escapeStr(strVal, VALUE_ESCAPE);
+  const datePattern = new RegExp(`^${DATE_PREFIX}-?\\d`);
+  if (datePattern.test(strVal)) {
+    escaped = ESCAPE + escaped;
+  }
+  return standalone || inArray ? escaped : `${TYPE_STRING}${escaped}`;
 }
-function parse(input) {
+function parse(input, standalone = false) {
   const str = decodeURI(input);
+  if (str.length === 0) {
+    return standalone ? "" : {};
+  }
   const first = str[0];
   const hasMarker = first === TYPE_STRING || first === TYPE_PRIMITIVE || first === TYPE_ARRAY || first === TYPE_OBJECT;
+  let source;
+  if (hasMarker) {
+    source = str;
+  } else if (standalone) {
+    const datePattern = new RegExp(`^${DATE_PREFIX}-?\\d+$`);
+    if (datePattern.test(str)) {
+      const timestamp = parseInt(str.slice(DATE_PREFIX.length), 10);
+      if (!isNaN(timestamp)) {
+        return new Date(timestamp);
+      }
+    }
+    return str;
+  } else {
+    const markers = `${TYPE_STRING}${TYPE_PRIMITIVE}${TYPE_ARRAY}${TYPE_OBJECT}`;
+    const objectPattern = new RegExp(
+      `[^${ESCAPE}${markers}${SEPARATOR}${TERMINATOR}][${markers}]`
+    );
+    source = objectPattern.test(str) ? `${TYPE_OBJECT}${str}` : `${TYPE_STRING}${str}`;
+  }
   let pos = 0;
-  const source = hasMarker ? str : `${TYPE_OBJECT}${str}`;
-  function readUntil(pattern) {
+  function peek() {
+    return source[pos] || "";
+  }
+  function advance() {
+    pos++;
+  }
+  function readUntil(stopPattern, checkEscape = false) {
     let result = "";
+    let wasEscaped = false;
     while (pos < source.length) {
-      const char = source[pos];
-      if (char === ESCAPE) {
-        pos++;
-        result += pos < source.length ? source[pos++] : TERMINATOR;
+      const ch = peek();
+      if (ch === ESCAPE) {
+        if (checkEscape && pos + 1 < source.length && source[pos + 1] === DATE_PREFIX) {
+          wasEscaped = true;
+        }
+        advance();
+        if (pos < source.length) {
+          result += peek();
+          advance();
+        }
         continue;
       }
-      if (pattern.test(char)) break;
-      result += char;
-      pos++;
-    }
-    return result;
-  }
-  function skipSeparator() {
-    if (source[pos] === SEPARATOR) {
-      pos++;
+      if (stopPattern.test(ch)) break;
+      result += ch;
+      advance();
     }
+    return { value: result, wasEscaped };
   }
   function parseString() {
-    const val = readUntil(VALUE_STOP);
-    if (val.startsWith(DATE_PREFIX)) {
-      return new Date(val.slice(DATE_PREFIX.length));
+    const { value, wasEscaped } = readUntil(VALUE_STOP, true);
+    const datePattern = new RegExp(`^${DATE_PREFIX}-?\\d+$`);
+    if (!wasEscaped && datePattern.test(value)) {
+      const timestamp = parseInt(value.slice(DATE_PREFIX.length), 10);
+      if (!isNaN(timestamp)) {
+        return new Date(timestamp);
+      }
     }
-    return val;
+    return value;
   }
   function parsePrimitive() {
-    const val = readUntil(VALUE_STOP);
-    if (val === "null") return null;
-    if (val === "undefined") return void 0;
-    if (val === "true") return true;
-    if (val === "false") return false;
-    return parseFloat(val);
+    const { value } = readUntil(VALUE_STOP, false);
+    if (value === "null") return null;
+    if (value === "undefined") return void 0;
+    if (value === "true") return true;
+    if (value === "false") return false;
+    return parseFloat(value);
   }
   function parseArray() {
     const result = [];
-    while (pos < source.length && source[pos] !== TERMINATOR) {
-      result.push(parseValue());
-      if (pos < source.length && source[pos] !== TERMINATOR) {
-        skipSeparator();
+    let lastWasSeparator = false;
+    while (pos < source.length && peek() !== TERMINATOR) {
+      if (peek() === SEPARATOR) {
+        result.push("");
+        advance();
+        lastWasSeparator = true;
+        continue;
+      }
+      lastWasSeparator = false;
+      const ch = peek();
+      if (ch === TYPE_PRIMITIVE || ch === TYPE_ARRAY || ch === TYPE_OBJECT || ch === TYPE_STRING) {
+        result.push(parseValue());
+      } else {
+        result.push(parseString());
+      }
+      if (pos < source.length && peek() === SEPARATOR) {
+        advance();
+        lastWasSeparator = true;
       }
     }
-    if (source[pos] === TERMINATOR) pos++;
+    if (lastWasSeparator && (peek() === TERMINATOR || pos >= source.length)) {
+      result.push("");
+    }
+    if (peek() === TERMINATOR) advance();
     return result;
   }
   function parseObject() {
     const result = {};
-    while (pos < source.length && source[pos] !== TERMINATOR) {
-      const key = readUntil(KEY_STOP);
+    while (pos < source.length && peek() !== TERMINATOR) {
+      const { value: key } = readUntil(KEY_STOP, false);
       result[key] = parseValue();
-      if (pos < source.length && source[pos] !== TERMINATOR) {
-        skipSeparator();
+      if (pos < source.length && peek() !== TERMINATOR && peek() === SEPARATOR) {
+        advance();
       }
     }
-    if (source[pos] === TERMINATOR) pos++;
+    if (peek() === TERMINATOR) advance();
     return result;
   }
   function parseValue() {
-    const type = source[pos++];
+    const type = peek();
+    advance();
     switch (type) {
-      case TYPE_STRING:
-        return parseString();
       case TYPE_PRIMITIVE:
         return parsePrimitive();
       case TYPE_ARRAY:
         return parseArray();
       case TYPE_OBJECT:
         return parseObject();
+      case TYPE_STRING:
+        return parseString();
       default:
-        throw new Error(`Unexpected type "${type}" at position ${pos - 1}`);
+        throw new Error(`Unexpected type "${type}" at position ${pos}`);
     }
   }
   return parseValue();
 }
+var readable = { stringify, parse };
 export {
   parse,
+  readable,
   stringify
 };

package/dist/index.d.mts

@@ -3,17 +3,15 @@ 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 QueryStringFormat {
+    stringify: (value: any, standalone?: boolean) => string;
+    parse: (value: string, standalone?: boolean) => any;
+}
 interface QueryStringOptions<T> {
     url?: string;
     select?: (pathname: string) => DeepSelect<T>;
-    key?: string;
-    format?: {
-        stringify: (value: DeepPartial<T>) => string;
-        parse: (value: string) => DeepPartial<T>;
-    };
+    key?: string | false;
+    format?: QueryStringFormat;
     syncNull?: boolean;
     syncUndefined?: boolean;
 }

package/dist/index.d.ts

@@ -3,17 +3,15 @@ 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 QueryStringFormat {
+    stringify: (value: any, standalone?: boolean) => string;
+    parse: (value: string, standalone?: boolean) => any;
+}
 interface QueryStringOptions<T> {
     url?: string;
     select?: (pathname: string) => DeepSelect<T>;
-    key?: string;
-    format?: {
-        stringify: (value: DeepPartial<T>) => string;
-        parse: (value: string) => DeepPartial<T>;
-    };
+    key?: string | false;
+    format?: QueryStringFormat;
     syncNull?: boolean;
     syncUndefined?: boolean;
 }

package/dist/index.js

@@ -40,22 +40,25 @@ function parse(str) {
 // src/middleware.ts
 var compact = (newState, initialState, syncNull = false, syncUndefined = false) => {
   const output = {};
+  const removed = [];
   Object.keys(newState).forEach((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;
+        const result = compact(newValue, initialValue, syncNull, syncUndefined);
+        if (result.output && Object.keys(result.output).length > 0) {
+          output[key] = result.output;
         }
       } else {
         output[key] = newValue;
       }
+    } else {
+      removed.push(key);
     }
   });
-  return output;
+  return { output, removed };
 };
 var translateSelectionToState = (selection, state) => {
   if (typeof state !== "object" || !state) {
@@ -87,7 +90,16 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
     syncUndefined: false,
     ...options
   };
+  const standalone = !defaultedOptions.key;
   const getStateFromUrl = (url) => {
+    if (standalone) {
+      const params2 = new URLSearchParams(url.search);
+      const state = {};
+      params2.forEach((value, key) => {
+        state[key] = defaultedOptions.format.parse(value, true);
+      });
+      return Object.keys(state).length > 0 ? state : null;
+    }
     const params = url.search.slice(1).split("&");
     for (const param of params) {
       const eqIndex = param.indexOf("=");
@@ -95,7 +107,7 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       const key = param.slice(0, eqIndex);
       if (key === defaultedOptions.key) {
         const value = param.slice(eqIndex + 1);
-        return value ? defaultedOptions.format.parse(value) : null;
+        return value ? defaultedOptions.format.parse(value, false) : null;
       }
     }
     return null;
@@ -137,7 +149,7 @@ 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(
+      const { output: newCompacted } = compact(
         selectedState,
         initialState,
         defaultedOptions.syncNull,
@@ -145,21 +157,31 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       );
       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;
+      const managedKeys = standalone ? new Set(Object.keys(selectedState).map(encodeURI)) : /* @__PURE__ */ new Set([defaultedOptions.key]);
+      const valuesToWrite = standalone ? new Map(
+        Object.entries(newCompacted).map(([k, v]) => [encodeURI(k), v])
+      ) : Object.keys(newCompacted).length ? /* @__PURE__ */ new Map([[defaultedOptions.key, newCompacted]]) : /* @__PURE__ */ new Map();
+      const result = [];
+      params.forEach((p) => {
+        const key = p.split("=")[0];
+        if (!managedKeys.has(key)) {
+          result.push(p);
+          return;
+        }
+        if (valuesToWrite.has(key)) {
+          const encoded = defaultedOptions.format.stringify(
+            valuesToWrite.get(key),
+            standalone
+          );
+          result.push(`${key}=${encoded}`);
+          valuesToWrite.delete(key);
         }
-        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("&") : "";
+      valuesToWrite.forEach((value, key) => {
+        const encoded = defaultedOptions.format.stringify(value, standalone);
+        result.push(`${key}=${encoded}`);
+      });
+      url.search = result.length ? "?" + result.join("&") : "";
       if (url.search !== previous) {
         history.replaceState(history.state, "", url);
       }

package/dist/index.mjs

@@ -12,22 +12,25 @@ function parse(str) {
 // src/middleware.ts
 var compact = (newState, initialState, syncNull = false, syncUndefined = false) => {
   const output = {};
+  const removed = [];
   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;
+        const result = compact(newValue, initialValue, syncNull, syncUndefined);
+        if (result.output && Object.keys(result.output).length > 0) {
+          output[key] = result.output;
         }
       } else {
         output[key] = newValue;
       }
+    } else {
+      removed.push(key);
     }
   });
-  return output;
+  return { output, removed };
 };
 var translateSelectionToState = (selection, state) => {
   if (typeof state !== "object" || !state) {
@@ -59,7 +62,16 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
     syncUndefined: false,
     ...options
   };
+  const standalone = !defaultedOptions.key;
   const getStateFromUrl = (url) => {
+    if (standalone) {
+      const params2 = new URLSearchParams(url.search);
+      const state = {};
+      params2.forEach((value, key) => {
+        state[key] = defaultedOptions.format.parse(value, true);
+      });
+      return Object.keys(state).length > 0 ? state : null;
+    }
     const params = url.search.slice(1).split("&");
     for (const param of params) {
       const eqIndex = param.indexOf("=");
@@ -67,7 +79,7 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       const key = param.slice(0, eqIndex);
       if (key === defaultedOptions.key) {
         const value = param.slice(eqIndex + 1);
-        return value ? defaultedOptions.format.parse(value) : null;
+        return value ? defaultedOptions.format.parse(value, false) : null;
       }
     }
     return null;
@@ -109,7 +121,7 @@ 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(
+      const { output: newCompacted } = compact(
         selectedState,
         initialState,
         defaultedOptions.syncNull,
@@ -117,21 +129,31 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       );
       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;
+      const managedKeys = standalone ? new Set(Object.keys(selectedState).map(encodeURI)) : /* @__PURE__ */ new Set([defaultedOptions.key]);
+      const valuesToWrite = standalone ? new Map(
+        Object.entries(newCompacted).map(([k, v]) => [encodeURI(k), v])
+      ) : Object.keys(newCompacted).length ? /* @__PURE__ */ new Map([[defaultedOptions.key, newCompacted]]) : /* @__PURE__ */ new Map();
+      const result = [];
+      params.forEach((p) => {
+        const key = p.split("=")[0];
+        if (!managedKeys.has(key)) {
+          result.push(p);
+          return;
+        }
+        if (valuesToWrite.has(key)) {
+          const encoded = defaultedOptions.format.stringify(
+            valuesToWrite.get(key),
+            standalone
+          );
+          result.push(`${key}=${encoded}`);
+          valuesToWrite.delete(key);
         }
-        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("&") : "";
+      valuesToWrite.forEach((value, key) => {
+        const encoded = defaultedOptions.format.stringify(value, standalone);
+        result.push(`${key}=${encoded}`);
+      });
+      url.search = result.length ? "?" + result.join("&") : "";
       if (url.search !== previous) {
         history.replaceState(history.state, "", url);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zustand-querystring",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",