zustand-querystring 0.0.16 → 0.0.18

package/README.md

@@ -5,14 +5,16 @@ A Zustand middleware that syncs the store with the querystring.
 Try on [StackBlitz](https://stackblitz.com/github/nitedani/zustand-querystring/tree/main/examples/react) (You need to click "Open in New Tab")
 
 Examples:
+
 - [React](./examples/react/)
 - [NextJS](./examples/next/)
 - [Rakkas](./examples/rakkas/)
 
 Quickstart:
+
 ```ts
-import create from "zustand";
-import { querystring } from "zustand-querystring";
+import create from 'zustand';
+import { querystring } from 'zustand-querystring';
 
 interface Store {
   count: number;
@@ -30,7 +32,7 @@ export const useStore = create<Store>()(
       ticks: 0,
       someNestedState: {
         nestedCount: 0,
-        hello: "Hello",
+        hello: 'Hello',
       },
     }),
     {
@@ -43,19 +45,20 @@ export const useStore = create<Store>()(
 
           someNestedState: {
             nestedCount: true,
-            hello: "/about" === pathname,
+            hello: '/about' === pathname,
           },
 
           // OR select the whole nested state
           // someNestedState: true
         };
       },
-    }
-  )
+    },
+  ),
 );
 ```
 
 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>url</b> - the url option is used to provide the request url on the server side render
+- <b>url</b> - the url option is used to provide the request url on the server side render

package/dist/{chunk-QPGVZKLE.mjs → chunk-77OZJNG4.mjs}

@@ -7,7 +7,7 @@ function encodeString(str, regexp) {
   return encodeURI(str.replace(regexp, "/$1"));
 }
 function trim(res) {
-  return typeof res === "string" ? res.replace(/;+$/g, "") : res;
+  return typeof res === "string" ? res.replace(/;+$/g, "").replace(/^\$/, "") : res;
 }
 function stringify(input, recursive) {
   if (!recursive) {
@@ -41,6 +41,9 @@ function stringify(input, recursive) {
   return "=" + encodeString(input.toString(), valueStringifyRegexp);
 }
 function parse(str) {
+  if (!str.startsWith("$")) {
+    str = "$" + str;
+  }
   let pos = 0;
   str = decodeURI(str);
   function readToken(regexp) {

package/dist/{chunk-QIA7KKX4.mjs → chunk-H7YBN6IK.mjs}

@@ -1,7 +1,7 @@
 import {
   parse,
   stringify
-} from "./chunk-QPGVZKLE.mjs";
+} from "./chunk-77OZJNG4.mjs";
 
 // src/middleware.ts
 import { mergeWith, isEqual, cloneDeep } from "lodash-es";
@@ -58,11 +58,7 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
     var _a;
     const match = querystring2.match(stateMatcher);
     if (match) {
-      let m = (_a = match[1]) != null ? _a : match[2];
-      if (!m.startsWith("$")) {
-        m = "$" + m;
-      }
-      return parse(m);
+      return parse((_a = match[1]) != null ? _a : match[2]);
     }
     return null;
   };
@@ -131,10 +127,10 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
         ignored += (ignored ? "&" : "?") + str;
       }
       const newCompacted = compact(newMerged, initialState);
+      let newQueryString = "";
       if (Object.keys(newCompacted).length) {
-        const stringified = stringify(newCompacted).substring(1);
+        const stringified = stringify(newCompacted);
         const newQueryState = `${defaultedOptions.key}=${stringified};;`;
-        let newQueryString = "";
         if (currentParsed) {
           newQueryString = currentQueryString.replace(
             splitMatcher,
@@ -145,13 +141,13 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
         } else {
           newQueryString = "?" + newQueryState;
         }
-        history.replaceState(
-          history.state,
-          "",
-          location.pathname + newQueryString
-        );
       } else {
-        history.replaceState(history.state, "", location.pathname + ignored);
+        newQueryString = ignored;
+      }
+      const currentUrl = location.pathname + location.search;
+      const newUrl = location.pathname + newQueryString;
+      if (newUrl !== currentUrl) {
+        history.replaceState(history.state, "", newUrl);
       }
     };
     if (!api.__ZUSTAND_QUERYSTRING_INIT__) {

package/dist/chunk-STY4LBQG.mjs

@@ -0,0 +1,64 @@
+import {
+  parse,
+  stringify
+} from "./chunk-77OZJNG4.mjs";
+
+// src/utils.ts
+var escapeStringRegexp = (string) => {
+  if (typeof string !== "string") {
+    throw new TypeError("Expected a string");
+  }
+  return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
+};
+var parseQueryString = (key, querystring) => {
+  var _a;
+  const stateMatcher = new RegExp(`${key}=(.*);;|${key}=(.*)$`);
+  const match = querystring.match(stateMatcher);
+  if (match) {
+    return parse((_a = match[1]) != null ? _a : match[2]);
+  }
+  return null;
+};
+var createURL = ({
+  baseUrl,
+  key,
+  state
+}) => {
+  const escapedKey = escapeStringRegexp(key);
+  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;
+};
+
+export {
+  createURL
+};

package/dist/index.d.ts

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

package/dist/index.js

@@ -19,7 +19,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  querystring: () => querystring
+  createURL: () => createURL,
+  parse: () => parse,
+  querystring: () => querystring,
+  stringify: () => stringify
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -32,7 +35,7 @@ function encodeString(str, regexp) {
   return encodeURI(str.replace(regexp, "/$1"));
 }
 function trim(res) {
-  return typeof res === "string" ? res.replace(/;+$/g, "") : res;
+  return typeof res === "string" ? res.replace(/;+$/g, "").replace(/^\$/, "") : res;
 }
 function stringify(input, recursive) {
   if (!recursive) {
@@ -66,6 +69,9 @@ function stringify(input, recursive) {
   return "=" + encodeString(input.toString(), valueStringifyRegexp);
 }
 function parse(str) {
+  if (!str.startsWith("$")) {
+    str = "$" + str;
+  }
   let pos = 0;
   str = decodeURI(str);
   function readToken(regexp) {
@@ -191,15 +197,11 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
   const escapedKey = escapeStringRegexp(defaultedOptions.key);
   const stateMatcher = new RegExp(`${escapedKey}=(.*);;|${escapedKey}=(.*)$`);
   const splitMatcher = new RegExp(`${escapedKey}=.*;;|${escapedKey}=.*$`);
-  const parseQueryString = (querystring2) => {
+  const parseQueryString2 = (querystring2) => {
     var _a;
     const match = querystring2.match(stateMatcher);
     if (match) {
-      let m = (_a = match[1]) != null ? _a : match[2];
-      if (!m.startsWith("$")) {
-        m = "$" + m;
-      }
-      return parse(m);
+      return parse((_a = match[1]) != null ? _a : match[2]);
     }
     return null;
   };
@@ -219,7 +221,7 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
       if (!queryString) {
         return initialState;
       }
-      const parsed = parseQueryString(queryString);
+      const parsed = parseQueryString2(queryString);
       if (!parsed) {
         return initialState;
       }
@@ -248,7 +250,7 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
     const setQuery = () => {
       const selectedState = getSelectedState(get(), location.pathname);
       const currentQueryString = location.search;
-      const currentParsed = parseQueryString(currentQueryString);
+      const currentParsed = parseQueryString2(currentQueryString);
       const newMerged = {
         ...currentParsed,
         ...selectedState
@@ -268,10 +270,10 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
         ignored += (ignored ? "&" : "?") + str;
       }
       const newCompacted = compact(newMerged, initialState);
+      let newQueryString = "";
       if (Object.keys(newCompacted).length) {
-        const stringified = stringify(newCompacted).substring(1);
+        const stringified = stringify(newCompacted);
         const newQueryState = `${defaultedOptions.key}=${stringified};;`;
-        let newQueryString = "";
         if (currentParsed) {
           newQueryString = currentQueryString.replace(
             splitMatcher,
@@ -282,13 +284,13 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
         } else {
           newQueryString = "?" + newQueryState;
         }
-        history.replaceState(
-          history.state,
-          "",
-          location.pathname + newQueryString
-        );
       } else {
-        history.replaceState(history.state, "", location.pathname + ignored);
+        newQueryString = ignored;
+      }
+      const currentUrl = location.pathname + location.search;
+      const newUrl = location.pathname + newQueryString;
+      if (newUrl !== currentUrl) {
+        history.replaceState(history.state, "", newUrl);
       }
     };
     if (!api.__ZUSTAND_QUERYSTRING_INIT__) {
@@ -318,7 +320,66 @@ var queryStringImpl = (fn, options) => (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 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;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  querystring
+  createURL,
+  parse,
+  querystring,
+  stringify
 });

package/dist/index.mjs

@@ -1,7 +1,16 @@
 import {
   querystring
-} from "./chunk-QIA7KKX4.mjs";
-import "./chunk-QPGVZKLE.mjs";
+} from "./chunk-H7YBN6IK.mjs";
+import {
+  createURL
+} from "./chunk-STY4LBQG.mjs";
+import {
+  parse,
+  stringify
+} from "./chunk-77OZJNG4.mjs";
 export {
-  querystring
+  createURL,
+  parse,
+  querystring,
+  stringify
 };

package/dist/middleware.js

@@ -32,7 +32,7 @@ function encodeString(str, regexp) {
   return encodeURI(str.replace(regexp, "/$1"));
 }
 function trim(res) {
-  return typeof res === "string" ? res.replace(/;+$/g, "") : res;
+  return typeof res === "string" ? res.replace(/;+$/g, "").replace(/^\$/, "") : res;
 }
 function stringify(input, recursive) {
   if (!recursive) {
@@ -66,6 +66,9 @@ function stringify(input, recursive) {
   return "=" + encodeString(input.toString(), valueStringifyRegexp);
 }
 function parse(str) {
+  if (!str.startsWith("$")) {
+    str = "$" + str;
+  }
   let pos = 0;
   str = decodeURI(str);
   function readToken(regexp) {
@@ -195,11 +198,7 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
     var _a;
     const match = querystring2.match(stateMatcher);
     if (match) {
-      let m = (_a = match[1]) != null ? _a : match[2];
-      if (!m.startsWith("$")) {
-        m = "$" + m;
-      }
-      return parse(m);
+      return parse((_a = match[1]) != null ? _a : match[2]);
     }
     return null;
   };
@@ -268,10 +267,10 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
         ignored += (ignored ? "&" : "?") + str;
       }
       const newCompacted = compact(newMerged, initialState);
+      let newQueryString = "";
       if (Object.keys(newCompacted).length) {
-        const stringified = stringify(newCompacted).substring(1);
+        const stringified = stringify(newCompacted);
         const newQueryState = `${defaultedOptions.key}=${stringified};;`;
-        let newQueryString = "";
         if (currentParsed) {
           newQueryString = currentQueryString.replace(
             splitMatcher,
@@ -282,13 +281,13 @@ var queryStringImpl = (fn, options) => (set, get, api) => {
         } else {
           newQueryString = "?" + newQueryState;
         }
-        history.replaceState(
-          history.state,
-          "",
-          location.pathname + newQueryString
-        );
       } else {
-        history.replaceState(history.state, "", location.pathname + ignored);
+        newQueryString = ignored;
+      }
+      const currentUrl = location.pathname + location.search;
+      const newUrl = location.pathname + newQueryString;
+      if (newUrl !== currentUrl) {
+        history.replaceState(history.state, "", newUrl);
       }
     };
     if (!api.__ZUSTAND_QUERYSTRING_INIT__) {

package/dist/middleware.mjs

@@ -1,7 +1,7 @@
 import {
   querystring
-} from "./chunk-QIA7KKX4.mjs";
-import "./chunk-QPGVZKLE.mjs";
+} from "./chunk-H7YBN6IK.mjs";
+import "./chunk-77OZJNG4.mjs";
 export {
   querystring
 };

package/dist/parser.js

@@ -31,7 +31,7 @@ function encodeString(str, regexp) {
   return encodeURI(str.replace(regexp, "/$1"));
 }
 function trim(res) {
-  return typeof res === "string" ? res.replace(/;+$/g, "") : res;
+  return typeof res === "string" ? res.replace(/;+$/g, "").replace(/^\$/, "") : res;
 }
 function stringify(input, recursive) {
   if (!recursive) {
@@ -65,6 +65,9 @@ function stringify(input, recursive) {
   return "=" + encodeString(input.toString(), valueStringifyRegexp);
 }
 function parse(str) {
+  if (!str.startsWith("$")) {
+    str = "$" + str;
+  }
   let pos = 0;
   str = decodeURI(str);
   function readToken(regexp) {

package/dist/parser.mjs

@@ -1,7 +1,7 @@
 import {
   parse,
   stringify
-} from "./chunk-QPGVZKLE.mjs";
+} from "./chunk-77OZJNG4.mjs";
 export {
   parse,
   stringify

package/dist/utils.d.ts

@@ -0,0 +1,7 @@
+declare const createURL: ({ baseUrl, key, state, }: {
+    baseUrl: string;
+    key: string;
+    state: Object;
+}) => string;
+
+export { createURL };

package/dist/utils.js

@@ -0,0 +1,204 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  createURL: () => createURL
+});
+module.exports = __toCommonJS(utils_exports);
+
+// 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 (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 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 === "=") {
+      return readToken(valueParseRegexp);
+    }
+    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();
+}
+
+// src/utils.ts
+var escapeStringRegexp = (string) => {
+  if (typeof string !== "string") {
+    throw new TypeError("Expected a string");
+  }
+  return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
+};
+var parseQueryString = (key, querystring) => {
+  var _a;
+  const stateMatcher = new RegExp(`${key}=(.*);;|${key}=(.*)$`);
+  const match = querystring.match(stateMatcher);
+  if (match) {
+    return parse((_a = match[1]) != null ? _a : match[2]);
+  }
+  return null;
+};
+var createURL = ({
+  baseUrl,
+  key,
+  state
+}) => {
+  const escapedKey = escapeStringRegexp(key);
+  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;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createURL
+});

package/dist/utils.mjs

@@ -0,0 +1,7 @@
+import {
+  createURL
+} from "./chunk-STY4LBQG.mjs";
+import "./chunk-77OZJNG4.mjs";
+export {
+  createURL
+};

package/package.json

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