zustand-querystring 0.0.10 → 0.0.12

package/README.md

@@ -1,9 +1,14 @@
 # zustand-querystring
 
-A zustand middleware that stores state in the querystring.
+A zustand middleware that syncs state 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](./example/rakkas/)
+
 Quickstart:
 ```ts
 import create from "zustand";
@@ -48,4 +53,9 @@ 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>url</b> - the url option is used to provide the request url on the server side render

package/lib/middleware.js

@@ -47,9 +47,10 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
         key: '$',
         ...options,
     };
-    const matcher = new RegExp(`${escapeStringRegexp(defaultedOptions.key)}=(.*);;`);
+    const stateMatcher = new RegExp(`${escapeStringRegexp(defaultedOptions.key)}=(.*);;`);
+    const splitMatcher = new RegExp(`${escapeStringRegexp(defaultedOptions.key)}=.*;;`);
     const parseQueryString = querystring => {
-        const match = querystring.match(matcher);
+        const match = querystring.match(stateMatcher);
         if (match) {
             let m = match[1];
             if (!m.startsWith('$')) {
@@ -73,13 +74,15 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
     const initialize = (url, _set = set) => {
         const fallback = () => fn(_set, get, api);
         try {
-            const splitUrl = url.split('?');
-            let queryString = splitUrl[1];
-            const pathname = splitUrl[0];
+            const queryString = url.search.substring(1);
+            const pathname = url.pathname;
             if (!queryString) {
                 return fallback();
             }
             const parsed = parseQueryString(queryString);
+            if (!parsed) {
+                return fallback();
+            }
             const currentValue = get() ?? fn(_set, get, api);
             const merged = mergeWith(currentValue, getSelectedState(parsed, pathname));
             set(merged, true);
@@ -92,45 +95,73 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
     };
     if (typeof window !== 'undefined') {
         const setQuery = () => {
-            const selectedState = getSelectedState(get(), window.location.pathname);
-            const currentQueryString = window.location.search.slice(1);
+            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);
             if (Object.keys(newCompacted).length) {
                 const stringified = stringify(newCompacted).substring(1);
-                const newQueryString = `${defaultedOptions.key}=${stringified};;`;
-                window.history.replaceState(null, '', `?${currentParsed
-                    ? currentQueryString.replace(matcher, newQueryString)
-                    : newQueryString}`);
+                const newQueryState = `${defaultedOptions.key}=${stringified};;`;
+                let newQueryString = '';
+                if (currentParsed) {
+                    newQueryString = currentQueryString.replace(splitMatcher, newQueryState);
+                }
+                else if (ignored) {
+                    newQueryString = ignored + '&' + newQueryState;
+                }
+                else {
+                    newQueryString = '?' + newQueryState;
+                }
+                history.replaceState(history.state, '', location.pathname + newQueryString);
             }
             else {
-                window.history.replaceState(null, '', window.location.pathname);
+                history.replaceState(history.state, '', location.pathname + ignored);
             }
         };
-        //TODO: find a better way to do this
-        let previousPathname = '';
-        setInterval(() => {
-            if (window.location.pathname !== previousPathname) {
-                previousPathname = window.location.pathname;
-                setQuery();
-            }
-        }, 50);
+        // @ts-ignore
+        if (!api.__ZUSTAND_QUERYSTRING_INIT__) {
+            // @ts-ignore
+            api.__ZUSTAND_QUERYSTRING_INIT__ = true;
+            let previousPathname = '';
+            const cb = () => {
+                if (location.pathname !== previousPathname) {
+                    previousPathname = location.pathname;
+                    setQuery();
+                }
+                requestAnimationFrame(cb);
+            };
+            requestAnimationFrame(cb);
+        }
         const originalSetState = api.setState;
         api.setState = (...args) => {
             originalSetState(...args);
             setQuery();
         };
-        return initialize(window.location.pathname + window.location.search, (...args) => {
+        return initialize(new URL(location.href), (...args) => {
             set(...args);
             setQuery();
         });
     }
-    if (url) {
-        return initialize(url);
+    else if (url) {
+        return initialize(new URL(decodeURIComponent(url), 'http://localhost'));
     }
     return fn(set, get, api);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zustand-querystring",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "license": "MIT",
   "type": "module",
   "keywords": [
@@ -35,7 +35,7 @@
     "@types/lodash-es": "^4.17.6",
     "rimraf": "^3.0.2",
     "typescript": "^4.9.3",
-    "zustand": "^4.1.4"
+    "zustand": "^4.3.2"
   },
   "scripts": {
     "build": "rimraf lib && tsc -b"