zustand-querystring 0.0.19 → 0.1.0

package/dist/chunk-HC4H2XL3.mjs

@@ -0,0 +1,19 @@
+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-S5N6DUVJ.mjs → chunk-HU2467IM.mjs}

@@ -1,10 +1,10 @@
 import {
   parse,
   stringify
-} from "./chunk-ZM24AXRE.mjs";
+} from "./chunk-OEB5LU3Z.mjs";
 
 // src/middleware.ts
-import { mergeWith, isEqual, cloneDeep } from "lodash-es";
+import { cloneDeep, isEqual, mergeWith } from "lodash-es";
 var compact = (newState, initialState) => {
   const output = {};
   Object.keys(newState).forEach((key) => {
@@ -40,29 +40,19 @@ var translateSelectionToState = (selection, state) => {
     return acc;
   }, {});
 };
-var escapeStringRegexp = (string) => {
-  if (typeof string !== "string") {
-    throw new TypeError("Expected a string");
-  }
-  return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
-};
 var queryStringImpl = (fn, options) => (set, get, api) => {
   const defaultedOptions = {
-    key: "$",
+    key: "state",
     ...options
   };
-  const escapedKey = escapeStringRegexp(defaultedOptions.key);
-  const stateMatcher = new RegExp(`${escapedKey}=(.*);;|${escapedKey}=(.*)$`);
-  const splitMatcher = new RegExp(`${escapedKey}=.*;;|${escapedKey}=.*$`);
-  const parseQueryString = (querystring2) => {
-    var _a;
-    const match = querystring2.match(stateMatcher);
+  const { url } = defaultedOptions;
+  const getStateFromUrl = (url2) => {
+    const match = url2.searchParams.get(defaultedOptions.key);
     if (match) {
-      return parse((_a = match[1]) != null ? _a : match[2]);
+      return parse(match);
     }
     return null;
   };
-  const url = defaultedOptions.url;
   const getSelectedState = (state, pathname) => {
     if (defaultedOptions.select) {
       const selection = defaultedOptions.select(pathname);
@@ -73,18 +63,13 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
   };
   const initialize = (url2, initialState) => {
     try {
-      const queryString = url2.search.substring(1);
-      const pathname = url2.pathname;
-      if (!queryString) {
-        return initialState;
-      }
-      const parsed = parseQueryString(queryString);
-      if (!parsed) {
+      const stateFromURl = getStateFromUrl(url2);
+      if (!stateFromURl) {
         return initialState;
       }
       const merged = mergeWith(
         cloneDeep(initialState),
-        getSelectedState(parsed, pathname)
+        getSelectedState(stateFromURl, url2.pathname)
       );
       set(merged, true);
       return merged;
@@ -105,49 +90,17 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       )
     );
     const setQuery = () => {
-      const selectedState = getSelectedState(get(), location.pathname);
-      const currentQueryString = location.search;
-      const currentParsed = parseQueryString(currentQueryString);
-      const newMerged = {
-        ...currentParsed,
-        ...selectedState
-      };
-      const splitIgnored = currentQueryString.split(splitMatcher);
-      let ignored = "";
-      for (let str of splitIgnored) {
-        if (!str || str === "?" || str === "&") {
-          continue;
-        }
-        if (str.startsWith("&") || str.startsWith("?")) {
-          str = str.substring(1);
-        }
-        if (str.endsWith("&")) {
-          str = str.substring(0, str.length - 1);
-        }
-        ignored += (ignored ? "&" : "?") + str;
-      }
-      const newCompacted = compact(newMerged, initialState);
-      let newQueryString = "";
+      const url2 = new URL(window.location.href);
+      const selectedState = getSelectedState(get(), url2.pathname);
+      const newCompacted = compact(selectedState, initialState);
+      const previous = url2.search;
       if (Object.keys(newCompacted).length) {
-        const stringified = stringify(newCompacted);
-        const newQueryState = `${defaultedOptions.key}=${stringified};;`;
-        if (currentParsed) {
-          newQueryString = currentQueryString.replace(
-            splitMatcher,
-            newQueryState
-          );
-        } else if (ignored) {
-          newQueryString = ignored + "&" + newQueryState;
-        } else {
-          newQueryString = "?" + newQueryState;
-        }
+        url2.searchParams.set(defaultedOptions.key, stringify(newCompacted));
       } else {
-        newQueryString = ignored;
+        url2.searchParams.delete(defaultedOptions.key);
       }
-      const currentUrl = location.pathname + location.search;
-      const newUrl = location.pathname + newQueryString;
-      if (newUrl !== currentUrl) {
-        history.replaceState(history.state, "", newUrl);
+      if (url2.search !== previous) {
+        history.replaceState(history.state, "", url2);
       }
     };
     if (!api.__ZUSTAND_QUERYSTRING_INIT__) {
@@ -156,7 +109,7 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       const cb = () => {
         if (location.pathname !== previousPathname) {
           previousPathname = location.pathname;
-          setQuery();
+          setTimeout(setQuery, 100);
         }
         requestAnimationFrame(cb);
       };
@@ -167,12 +120,9 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       originalSetState(...args);
       setQuery();
     };
-    return initialize(new URL(location.href), initialState);
+    return initialize(new URL(window.location.href), initialState);
   } else if (url) {
-    return initialize(
-      new URL(decodeURIComponent(url), "http://localhost"),
-      fn(set, get, api)
-    );
+    return initialize(new URL(url, "http://localhost"), fn(set, get, api));
   }
   return fn(set, get, api);
 };

package/dist/chunk-OEB5LU3Z.mjs

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

package/dist/index.js

@@ -26,135 +26,18 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/middleware.ts
+var import_lodash_es = require("lodash-es");
+
 // src/parser.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) {
-    return ":" + input;
-  }
-  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 stringify(input) {
+  return encodeURIComponent(JSON.stringify(input));
 }
 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 (1) {
-          res.push(parseToken());
-          if (pos >= str.length || str.charAt(pos) === ";") {
-            break loop;
-          }
-          pos += 1;
-        }
-      }
-      pos += 1;
-      return res;
-    }
-    if (type === "$") {
-      const res = {};
-      loop: {
-        if (pos >= str.length || str.charAt(pos) === ";") {
-          break loop;
-        }
-        while (1) {
-          var name = readToken(keyParseRegexp);
-          res[name] = parseToken();
-          if (pos >= str.length || str.charAt(pos) === ";") {
-            break loop;
-          }
-          pos += 1;
-        }
-      }
-      pos += 1;
-      return res;
-    }
-    throw new Error("Unexpected char " + type);
-  }
-  return parseToken();
+  return JSON.parse(decodeURIComponent(str));
 }
 
 // src/middleware.ts
-var import_lodash_es = require("lodash-es");
 var compact = (newState, initialState) => {
   const output = {};
   Object.keys(newState).forEach((key) => {
@@ -190,29 +73,19 @@ var translateSelectionToState = (selection, state) => {
     return acc;
   }, {});
 };
-var escapeStringRegexp = (string) => {
-  if (typeof string !== "string") {
-    throw new TypeError("Expected a string");
-  }
-  return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
-};
 var queryStringImpl = (fn, options) => (set, get, api) => {
   const defaultedOptions = {
-    key: "$",
+    key: "state",
     ...options
   };
-  const escapedKey = escapeStringRegexp(defaultedOptions.key);
-  const stateMatcher = new RegExp(`${escapedKey}=(.*);;|${escapedKey}=(.*)$`);
-  const splitMatcher = new RegExp(`${escapedKey}=.*;;|${escapedKey}=.*$`);
-  const parseQueryString2 = (querystring2) => {
-    var _a;
-    const match = querystring2.match(stateMatcher);
+  const { url } = defaultedOptions;
+  const getStateFromUrl = (url2) => {
+    const match = url2.searchParams.get(defaultedOptions.key);
     if (match) {
-      return parse((_a = match[1]) != null ? _a : match[2]);
+      return parse(match);
     }
     return null;
   };
-  const url = defaultedOptions.url;
   const getSelectedState = (state, pathname) => {
     if (defaultedOptions.select) {
       const selection = defaultedOptions.select(pathname);
@@ -223,18 +96,13 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
   };
   const initialize = (url2, initialState) => {
     try {
-      const queryString = url2.search.substring(1);
-      const pathname = url2.pathname;
-      if (!queryString) {
-        return initialState;
-      }
-      const parsed = parseQueryString2(queryString);
-      if (!parsed) {
+      const stateFromURl = getStateFromUrl(url2);
+      if (!stateFromURl) {
         return initialState;
       }
       const merged = (0, import_lodash_es.mergeWith)(
         (0, import_lodash_es.cloneDeep)(initialState),
-        getSelectedState(parsed, pathname)
+        getSelectedState(stateFromURl, url2.pathname)
       );
       set(merged, true);
       return merged;
@@ -255,49 +123,17 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       )
     );
     const setQuery = () => {
-      const selectedState = getSelectedState(get(), location.pathname);
-      const currentQueryString = location.search;
-      const currentParsed = parseQueryString2(currentQueryString);
-      const newMerged = {
-        ...currentParsed,
-        ...selectedState
-      };
-      const splitIgnored = currentQueryString.split(splitMatcher);
-      let ignored = "";
-      for (let str of splitIgnored) {
-        if (!str || str === "?" || str === "&") {
-          continue;
-        }
-        if (str.startsWith("&") || str.startsWith("?")) {
-          str = str.substring(1);
-        }
-        if (str.endsWith("&")) {
-          str = str.substring(0, str.length - 1);
-        }
-        ignored += (ignored ? "&" : "?") + str;
-      }
-      const newCompacted = compact(newMerged, initialState);
-      let newQueryString = "";
+      const url2 = new URL(window.location.href);
+      const selectedState = getSelectedState(get(), url2.pathname);
+      const newCompacted = compact(selectedState, initialState);
+      const previous = url2.search;
       if (Object.keys(newCompacted).length) {
-        const stringified = stringify(newCompacted);
-        const newQueryState = `${defaultedOptions.key}=${stringified};;`;
-        if (currentParsed) {
-          newQueryString = currentQueryString.replace(
-            splitMatcher,
-            newQueryState
-          );
-        } else if (ignored) {
-          newQueryString = ignored + "&" + newQueryState;
-        } else {
-          newQueryString = "?" + newQueryState;
-        }
+        url2.searchParams.set(defaultedOptions.key, stringify(newCompacted));
       } else {
-        newQueryString = ignored;
+        url2.searchParams.delete(defaultedOptions.key);
       }
-      const currentUrl = location.pathname + location.search;
-      const newUrl = location.pathname + newQueryString;
-      if (newUrl !== currentUrl) {
-        history.replaceState(history.state, "", newUrl);
+      if (url2.search !== previous) {
+        history.replaceState(history.state, "", url2);
       }
     };
     if (!api.__ZUSTAND_QUERYSTRING_INIT__) {
@@ -306,7 +142,7 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       const cb = () => {
         if (location.pathname !== previousPathname) {
           previousPathname = location.pathname;
-          setQuery();
+          setTimeout(setQuery, 100);
         }
         requestAnimationFrame(cb);
       };
@@ -317,71 +153,24 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       originalSetState(...args);
       setQuery();
     };
-    return initialize(new URL(location.href), initialState);
+    return initialize(new URL(window.location.href), initialState);
   } else if (url) {
-    return initialize(
-      new URL(decodeURIComponent(url), "http://localhost"),
-      fn(set, get, api)
-    );
+    return initialize(new URL(url, "http://localhost"), fn(set, get, api));
   }
   return fn(set, get, api);
 };
 var querystring = queryStringImpl;
 
 // src/utils.ts
-var escapeStringRegexp2 = (string) => {
-  if (typeof string !== "string") {
-    throw new TypeError("Expected a string");
-  }
-  return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
-};
-var parseQueryString = (key, querystring2) => {
-  var _a;
-  const stateMatcher = new RegExp(`${key}=(.*);;|${key}=(.*)$`);
-  const match = querystring2.match(stateMatcher);
-  if (match) {
-    return parse((_a = match[1]) != null ? _a : match[2]);
-  }
-  return null;
-};
 var createURL = ({
   baseUrl,
   key,
   state
 }) => {
-  const escapedKey = escapeStringRegexp2(key);
+  const url = new URL(baseUrl);
   const stringified = stringify(state);
-  const newQueryState = `${key}=${stringified};;`;
-  const match = baseUrl.indexOf("?");
-  const currentQueryString = match >= 0 ? baseUrl.substring(match) : "";
-  const currentParsed = parseQueryString(escapedKey, currentQueryString);
-  const splitMatcher = new RegExp(`${escapedKey}=.*;;|${escapedKey}=.*$`);
-  const splitIgnored = currentQueryString.split(splitMatcher);
-  let ignored = "";
-  for (let str of splitIgnored) {
-    if (!str || str === "?" || str === "&") {
-      continue;
-    }
-    if (str.startsWith("&") || str.startsWith("?")) {
-      str = str.substring(1);
-    }
-    if (str.endsWith("&")) {
-      str = str.substring(0, str.length - 1);
-    }
-    ignored += (ignored ? "&" : "?") + str;
-  }
-  let newQueryString = "";
-  if (currentParsed) {
-    newQueryString = currentQueryString.replace(splitMatcher, newQueryState);
-  } else if (ignored) {
-    newQueryString = ignored + "&" + newQueryState;
-  } else {
-    newQueryString = "?" + newQueryState;
-  }
-  if (currentQueryString) {
-    return baseUrl.replace(currentQueryString, newQueryString);
-  }
-  return baseUrl + newQueryString;
+  url.searchParams.set(key, stringified);
+  return url.href;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   querystring
-} from "./chunk-S5N6DUVJ.mjs";
+} from "./chunk-HU2467IM.mjs";
 import {
   createURL
-} from "./chunk-PYA77ZUK.mjs";
+} from "./chunk-HC4H2XL3.mjs";
 import {
   parse,
   stringify
-} from "./chunk-ZM24AXRE.mjs";
+} from "./chunk-OEB5LU3Z.mjs";
 export {
   createURL,
   parse,

package/dist/middleware.d.ts

@@ -1,14 +1,14 @@
 import { StoreMutatorIdentifier, StateCreator } from 'zustand/vanilla';
 
-type DeepSelect<T> = T extends object ? {
-    [P in keyof T]?: DeepSelect<T[P]> | boolean;
-} : boolean;
-interface QueryStringOptions<T> {
-    url?: string;
-    select?: (pathname: string) => DeepSelect<T>;
-    key?: string;
-}
-type QueryString = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, Mps, Mcs>, options?: QueryStringOptions<T>) => StateCreator<T, Mps, Mcs>;
+type DeepSelect<T> = T extends object ? {
+    [P in keyof T]?: DeepSelect<T[P]> | boolean;
+} : boolean;
+interface QueryStringOptions<T> {
+    url?: string;
+    select?: (pathname: string) => DeepSelect<T>;
+    key?: string;
+}
+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 { QueryStringOptions, querystring };