zustand-querystring 0.0.20-beta.0 → 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-HU2467IM.mjs

@@ -0,0 +1,133 @@
+import {
+  parse,
+  stringify
+} from "./chunk-OEB5LU3Z.mjs";
+
+// src/middleware.ts
+import { cloneDeep, 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",
+    ...options
+  };
+  const { url } = defaultedOptions;
+  const getStateFromUrl = (url2) => {
+    const match = url2.searchParams.get(defaultedOptions.key);
+    if (match) {
+      return 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 = (url2, initialState) => {
+    try {
+      const stateFromURl = getStateFromUrl(url2);
+      if (!stateFromURl) {
+        return initialState;
+      }
+      const merged = mergeWith(
+        cloneDeep(initialState),
+        getSelectedState(stateFromURl, url2.pathname)
+      );
+      set(merged, true);
+      return merged;
+    } catch (error) {
+      console.error(error);
+      return initialState;
+    }
+  };
+  if (typeof window !== "undefined") {
+    const initialState = cloneDeep(
+      fn(
+        (...args) => {
+          set(...args);
+          setQuery();
+        },
+        get,
+        api
+      )
+    );
+    const setQuery = () => {
+      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) {
+        url2.searchParams.set(defaultedOptions.key, stringify(newCompacted));
+      } else {
+        url2.searchParams.delete(defaultedOptions.key);
+      }
+      if (url2.search !== previous) {
+        history.replaceState(history.state, "", url2);
+      }
+    };
+    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();
+    };
+    return initialize(new URL(window.location.href), initialState);
+  } else if (url) {
+    return initialize(new URL(url, "http://localhost"), fn(set, get, api));
+  }
+  return fn(set, get, api);
+};
+var querystring = queryStringImpl;
+
+export {
+  querystring
+};

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,32 +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
   };
-  if (encodeURIComponent(defaultedOptions.key) === defaultedOptions.key) {
-    defaultedOptions.key = `:${defaultedOptions.key}`;
-  }
-  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;
   };
-  let url = defaultedOptions.url;
   const getSelectedState = (state, pathname) => {
     if (defaultedOptions.select) {
       const selection = defaultedOptions.select(pathname);
@@ -226,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;
@@ -247,15 +112,6 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
     }
   };
   if (typeof window !== "undefined") {
-    const decodeHref = () => {
-      let href = location.href;
-      let decoded = decodeURIComponent(href);
-      if (decoded.indexOf(`?${defaultedOptions.key}=`) !== href.indexOf(`?${defaultedOptions.key}=`)) {
-        href = decoded;
-        decoded = decodeURIComponent(href);
-      }
-      return href;
-    };
     const initialState = (0, import_lodash_es.cloneDeep)(
       fn(
         (...args) => {
@@ -267,50 +123,17 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       )
     );
     const setQuery = () => {
-      const url2 = new URL(decodeHref());
+      const url2 = new URL(window.location.href);
       const selectedState = getSelectedState(get(), url2.pathname);
-      const currentQueryString = url2.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 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__) {
@@ -330,14 +153,8 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       originalSetState(...args);
       setQuery();
     };
-    return initialize(new URL(decodeHref()), initialState);
+    return initialize(new URL(window.location.href), initialState);
   } else if (url) {
-    url = decodeURIComponent(url);
-    const idx = url.indexOf(`?${defaultedOptions.key}=`);
-    const decoded = decodeURIComponent(url);
-    if (decoded.indexOf(`?${defaultedOptions.key}=`) !== idx) {
-      url = decoded;
-    }
     return initialize(new URL(url, "http://localhost"), fn(set, get, api));
   }
   return fn(set, get, api);
@@ -345,59 +162,15 @@ var queryStringImpl = (fn, options) => (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-C7RA6OH5.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,