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

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

package/dist/chunk-OEB5LU3Z.mjs

@@ -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.d.mts

@@ -0,0 +1,4 @@
+export { QueryStringOptions, querystring } from './middleware.mjs';
+export { parse, stringify } from './parser.mjs';
+export { createURL } from './utils.mjs';
+import 'zustand/vanilla';

package/dist/index.js

@@ -17,144 +17,27 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   createURL: () => createURL,
   parse: () => parse,
   querystring: () => querystring,
   stringify: () => stringify
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_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,22 @@ 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",
+    format: {
+      stringify,
+      parse
+    },
     ...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 getStateFromUrl = (url) => {
+    const match = url.searchParams.get(defaultedOptions.key);
     if (match) {
-      return parse((_a = match[1]) != null ? _a : match[2]);
+      return defaultedOptions.format.parse(match);
     }
     return null;
   };
-  let url = defaultedOptions.url;
   const getSelectedState = (state, pathname) => {
     if (defaultedOptions.select) {
       const selection = defaultedOptions.select(pathname);
@@ -224,22 +97,17 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
     }
     return state != null ? state : {};
   };
-  const initialize = (url2, initialState) => {
+  const initialize = (url, 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(url);
+      if (!stateFromURl) {
         return initialState;
       }
       const merged = (0, import_lodash_es.mergeWith)(
-        (0, import_lodash_es.cloneDeep)(initialState),
-        getSelectedState(parsed, pathname)
+        {},
+        initialState,
+        getSelectedState(stateFromURl, url.pathname)
       );
-      set(merged, true);
       return merged;
     } catch (error) {
       console.error(error);
@@ -247,70 +115,29 @@ 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) => {
-          set(...args);
-          setQuery();
-        },
-        get,
-        api
-      )
+    const initialState = fn(
+      (...args) => {
+        set(...args);
+        setQuery();
+      },
+      get,
+      api
     );
     const setQuery = () => {
-      const url2 = new URL(decodeHref());
-      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 url = new URL(window.location.href);
+      const selectedState = getSelectedState(get(), url.pathname);
+      const newCompacted = compact(selectedState, initialState);
+      const previous = url.search;
       if (Object.keys(newCompacted).length) {
-        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;
-        }
+        url.searchParams.set(
+          defaultedOptions.key,
+          defaultedOptions.format.stringify(newCompacted)
+        );
       } else {
-        newQueryString = ignored;
+        url.searchParams.delete(defaultedOptions.key);
       }
-      const currentUrl = location.pathname + location.search;
-      const newUrl = location.pathname + newQueryString;
-      if (newUrl !== currentUrl) {
-        history.replaceState(history.state, "", newUrl);
+      if (url.search !== previous) {
+        history.replaceState(history.state, "", url);
       }
     };
     if (!api.__ZUSTAND_QUERYSTRING_INIT__) {
@@ -330,74 +157,31 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       originalSetState(...args);
       setQuery();
     };
-    return initialize(new URL(decodeHref()), 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));
+    const initialized = initialize(new URL(window.location.href), initialState);
+    api.getInitialState = () => initialized;
+    return initialized;
+  } else if (defaultedOptions.url) {
+    const initialized = initialize(
+      new URL(defaultedOptions.url, "http://localhost"),
+      fn(set, get, api)
+    );
+    api.getInitialState = () => initialized;
+    return initialized;
   }
   return fn(set, get, api);
 };
 var querystring = queryStringImpl;
 
 // src/utils.ts
-var 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-L542GMLN.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.mts

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

package/dist/middleware.d.ts

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