zustand-querystring 0.3.0 → 0.3.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 nitedani
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -1,4 +1,10 @@
-declare function stringify(input: unknown, recursive?: boolean): string;
-declare function parse<T = unknown>(str: string): T;
+/**
+ * URL-Safe Serialization
+ *
+ * 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;
 
 export { parse, stringify };

package/dist/format/readable.d.ts

@@ -1,4 +1,10 @@
-declare function stringify(input: unknown, recursive?: boolean): string;
-declare function parse<T = unknown>(str: string): T;
+/**
+ * URL-Safe Serialization
+ *
+ * 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;
 
 export { parse, stringify };

package/dist/format/readable.js

@@ -23,139 +23,142 @@ __export(readable_exports, {
   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"));
+var TYPE_OBJECT = ".";
+var TYPE_ARRAY = "@";
+var TYPE_STRING = "=";
+var TYPE_PRIMITIVE = ":";
+var SEPARATOR = ",";
+var TERMINATOR = "~";
+var ESCAPE = "/";
+var DATE_PREFIX = "!Date:";
+var SEP_CHAR = SEPARATOR[0];
+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");
+function escapeStr(str, pattern) {
+  return encodeURI(str.replace(pattern, `${ESCAPE}$1`));
 }
-function trim(res) {
-  return typeof res === "string" ? res.replace(/~+$/g, "").replace(/^\$/, "") : res;
-}
-function stringify(input, recursive) {
-  if (!recursive) {
-    return trim(stringify(input, true));
+function cleanResult(str) {
+  while (str.endsWith(TERMINATOR)) str = str.slice(0, -1);
+  if (str.startsWith(TYPE_OBJECT) || str.startsWith(TYPE_ARRAY)) {
+    str = str.slice(1);
   }
-  if (typeof input === "function") {
-    return "";
+  return str;
+}
+function stringify(value) {
+  return cleanResult(serialize(value));
+}
+function serialize(value) {
+  if (value === null) return `${TYPE_PRIMITIVE}null`;
+  if (value === void 0) return `${TYPE_PRIMITIVE}undefined`;
+  if (typeof value === "function") return "";
+  if (typeof value === "number") {
+    return `${TYPE_PRIMITIVE}${String(value).replace(/\./g, `${ESCAPE}.`)}`;
   }
-  if (typeof input === "number" || input === true || input === false || input === null) {
-    const value = String(input);
-    return ":" + value.replace(/\./g, "/.");
+  if (typeof value === "boolean") {
+    return `${TYPE_PRIMITIVE}${value}`;
   }
-  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 (value instanceof Date) {
+    return `${TYPE_STRING}${DATE_PREFIX}${escapeStr(value.toISOString(), VALUE_ESCAPE)}`;
   }
-  if (input instanceof Date) {
-    return "=!Date:" + encodeString(input.toISOString(), valueStringifyRegexp);
+  if (Array.isArray(value)) {
+    const items = value.map((v) => serialize(v));
+    return `${TYPE_ARRAY}${items.join(SEPARATOR)}${TERMINATOR}`;
   }
-  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);
+  if (typeof value === "object") {
+    const entries = [];
+    for (const [k, v] of Object.entries(value)) {
+      const val = serialize(v);
+      if (val || v === void 0) {
+        entries.push(`${escapeStr(k, KEY_ESCAPE)}${val}`);
       }
     }
-    return "$" + res.join("..") + "~";
+    return `${TYPE_OBJECT}${entries.join(SEPARATOR)}${TERMINATOR}`;
   }
-  if (typeof input === "undefined") {
-    return "";
-  }
-  return "=" + encodeString(input.toString(), valueStringifyRegexp);
+  return `${TYPE_STRING}${escapeStr(String(value), VALUE_ESCAPE)}`;
 }
-function parse(str) {
-  if (!str.startsWith("$")) {
-    str = "$" + str;
-  }
+function parse(input) {
+  const str = decodeURI(input);
+  const first = str[0];
+  const hasMarker = first === TYPE_STRING || first === TYPE_PRIMITIVE || first === TYPE_ARRAY || first === TYPE_OBJECT;
   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;
+  const source = hasMarker ? str : `${TYPE_OBJECT}${str}`;
+  function readUntil(pattern) {
+    let result = "";
+    while (pos < source.length) {
+      const char = source[pos];
+      if (char === ESCAPE) {
+        pos++;
+        result += pos < source.length ? source[pos++] : TERMINATOR;
+        continue;
       }
-      token += str.charAt(pos);
+      if (pattern.test(char)) break;
+      result += char;
+      pos++;
     }
-    return token;
+    return result;
   }
-  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;
+  function skipSeparator() {
+    if (source[pos] === SEPARATOR) {
+      pos++;
     }
-    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;
+  }
+  function parseString() {
+    const val = readUntil(VALUE_STOP);
+    if (val.startsWith(DATE_PREFIX)) {
+      return new Date(val.slice(DATE_PREFIX.length));
     }
-    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;
-          }
-        }
+    return val;
+  }
+  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);
+  }
+  function parseArray() {
+    const result = [];
+    while (pos < source.length && source[pos] !== TERMINATOR) {
+      result.push(parseValue());
+      if (pos < source.length && source[pos] !== TERMINATOR) {
+        skipSeparator();
       }
-      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;
-          }
-        }
+    if (source[pos] === TERMINATOR) pos++;
+    return result;
+  }
+  function parseObject() {
+    const result = {};
+    while (pos < source.length && source[pos] !== TERMINATOR) {
+      const key = readUntil(KEY_STOP);
+      result[key] = parseValue();
+      if (pos < source.length && source[pos] !== TERMINATOR) {
+        skipSeparator();
       }
-      pos += 1;
-      return res;
     }
-    throw new Error('Unexpected char "' + type + '" at position ' + (pos - 1));
+    if (source[pos] === TERMINATOR) pos++;
+    return result;
+  }
+  function parseValue() {
+    const type = source[pos++];
+    switch (type) {
+      case TYPE_STRING:
+        return parseString();
+      case TYPE_PRIMITIVE:
+        return parsePrimitive();
+      case TYPE_ARRAY:
+        return parseArray();
+      case TYPE_OBJECT:
+        return parseObject();
+      default:
+        throw new Error(`Unexpected type "${type}" at position ${pos - 1}`);
+    }
   }
-  return parseToken();
+  return parseValue();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/format/readable.mjs

@@ -1,137 +1,140 @@
 // src/format/readable.ts
-var keyStringifyRegexp = /([=:@$/.])/g;
-var valueStringifyRegexp = /([.~/])/g;
-var keyParseRegexp = /[=:@$.]/;
-var valueParseRegexp = /[.~]/;
-function encodeString(str, regexp) {
-  return encodeURI(str.replace(regexp, "/$1"));
+var TYPE_OBJECT = ".";
+var TYPE_ARRAY = "@";
+var TYPE_STRING = "=";
+var TYPE_PRIMITIVE = ":";
+var SEPARATOR = ",";
+var TERMINATOR = "~";
+var ESCAPE = "/";
+var DATE_PREFIX = "!Date:";
+var SEP_CHAR = SEPARATOR[0];
+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");
+function escapeStr(str, pattern) {
+  return encodeURI(str.replace(pattern, `${ESCAPE}$1`));
 }
-function trim(res) {
-  return typeof res === "string" ? res.replace(/~+$/g, "").replace(/^\$/, "") : res;
-}
-function stringify(input, recursive) {
-  if (!recursive) {
-    return trim(stringify(input, true));
+function cleanResult(str) {
+  while (str.endsWith(TERMINATOR)) str = str.slice(0, -1);
+  if (str.startsWith(TYPE_OBJECT) || str.startsWith(TYPE_ARRAY)) {
+    str = str.slice(1);
   }
-  if (typeof input === "function") {
-    return "";
+  return str;
+}
+function stringify(value) {
+  return cleanResult(serialize(value));
+}
+function serialize(value) {
+  if (value === null) return `${TYPE_PRIMITIVE}null`;
+  if (value === void 0) return `${TYPE_PRIMITIVE}undefined`;
+  if (typeof value === "function") return "";
+  if (typeof value === "number") {
+    return `${TYPE_PRIMITIVE}${String(value).replace(/\./g, `${ESCAPE}.`)}`;
   }
-  if (typeof input === "number" || input === true || input === false || input === null) {
-    const value = String(input);
-    return ":" + value.replace(/\./g, "/.");
+  if (typeof value === "boolean") {
+    return `${TYPE_PRIMITIVE}${value}`;
   }
-  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 (value instanceof Date) {
+    return `${TYPE_STRING}${DATE_PREFIX}${escapeStr(value.toISOString(), VALUE_ESCAPE)}`;
   }
-  if (input instanceof Date) {
-    return "=!Date:" + encodeString(input.toISOString(), valueStringifyRegexp);
+  if (Array.isArray(value)) {
+    const items = value.map((v) => serialize(v));
+    return `${TYPE_ARRAY}${items.join(SEPARATOR)}${TERMINATOR}`;
   }
-  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);
+  if (typeof value === "object") {
+    const entries = [];
+    for (const [k, v] of Object.entries(value)) {
+      const val = serialize(v);
+      if (val || v === void 0) {
+        entries.push(`${escapeStr(k, KEY_ESCAPE)}${val}`);
       }
     }
-    return "$" + res.join("..") + "~";
+    return `${TYPE_OBJECT}${entries.join(SEPARATOR)}${TERMINATOR}`;
   }
-  if (typeof input === "undefined") {
-    return "";
-  }
-  return "=" + encodeString(input.toString(), valueStringifyRegexp);
+  return `${TYPE_STRING}${escapeStr(String(value), VALUE_ESCAPE)}`;
 }
-function parse(str) {
-  if (!str.startsWith("$")) {
-    str = "$" + str;
-  }
+function parse(input) {
+  const str = decodeURI(input);
+  const first = str[0];
+  const hasMarker = first === TYPE_STRING || first === TYPE_PRIMITIVE || first === TYPE_ARRAY || first === TYPE_OBJECT;
   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;
+  const source = hasMarker ? str : `${TYPE_OBJECT}${str}`;
+  function readUntil(pattern) {
+    let result = "";
+    while (pos < source.length) {
+      const char = source[pos];
+      if (char === ESCAPE) {
+        pos++;
+        result += pos < source.length ? source[pos++] : TERMINATOR;
+        continue;
       }
-      token += str.charAt(pos);
+      if (pattern.test(char)) break;
+      result += char;
+      pos++;
     }
-    return token;
+    return result;
   }
-  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;
+  function skipSeparator() {
+    if (source[pos] === SEPARATOR) {
+      pos++;
     }
-    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;
+  }
+  function parseString() {
+    const val = readUntil(VALUE_STOP);
+    if (val.startsWith(DATE_PREFIX)) {
+      return new Date(val.slice(DATE_PREFIX.length));
     }
-    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;
-          }
-        }
+    return val;
+  }
+  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);
+  }
+  function parseArray() {
+    const result = [];
+    while (pos < source.length && source[pos] !== TERMINATOR) {
+      result.push(parseValue());
+      if (pos < source.length && source[pos] !== TERMINATOR) {
+        skipSeparator();
       }
-      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;
-          }
-        }
+    if (source[pos] === TERMINATOR) pos++;
+    return result;
+  }
+  function parseObject() {
+    const result = {};
+    while (pos < source.length && source[pos] !== TERMINATOR) {
+      const key = readUntil(KEY_STOP);
+      result[key] = parseValue();
+      if (pos < source.length && source[pos] !== TERMINATOR) {
+        skipSeparator();
       }
-      pos += 1;
-      return res;
     }
-    throw new Error('Unexpected char "' + type + '" at position ' + (pos - 1));
+    if (source[pos] === TERMINATOR) pos++;
+    return result;
+  }
+  function parseValue() {
+    const type = source[pos++];
+    switch (type) {
+      case TYPE_STRING:
+        return parseString();
+      case TYPE_PRIMITIVE:
+        return parsePrimitive();
+      case TYPE_ARRAY:
+        return parseArray();
+      case TYPE_OBJECT:
+        return parseObject();
+      default:
+        throw new Error(`Unexpected type "${type}" at position ${pos - 1}`);
+    }
   }
-  return parseToken();
+  return parseValue();
 }
 export {
   parse,

package/dist/index.d.mts

@@ -14,6 +14,8 @@ interface QueryStringOptions<T> {
         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;

package/dist/index.d.ts

@@ -14,6 +14,8 @@ interface QueryStringOptions<T> {
         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;

package/dist/index.js

@@ -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,6 +83,8 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       stringify,
       parse
     },
+    syncNull: false,
+    syncUndefined: false,
     ...options
   };
   const getStateFromUrl = (url) => {
@@ -132,7 +137,12 @@ 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;

package/dist/index.mjs

@@ -10,17 +10,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" && !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" && !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;
       }
     }
   });
@@ -52,6 +55,8 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       stringify,
       parse
     },
+    syncNull: false,
+    syncUndefined: false,
     ...options
   };
   const getStateFromUrl = (url) => {
@@ -104,7 +109,12 @@ 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;

package/package.json

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