zustand-querystring 0.0.11 → 0.0.13

package/README.md

@@ -1,9 +1,14 @@
 # zustand-querystring
 
-A zustand middleware that stores state in the querystring.
+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](./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

@@ -20,22 +20,26 @@ const compact = (newState, initialState) => {
     });
     return output;
 };
-const translateSelectionToState = (selection, state) => Object.keys(selection).reduce((acc, key) => {
-    // @ts-ignore
-    if (!(key in state)) {
-        return acc;
+const translateSelectionToState = (selection, state) => {
+    if (typeof state !== 'object' || !state) {
+        return {};
     }
-    const value = selection[key];
-    if (typeof value === 'boolean') {
-        if (value) {
-            acc[key] = state[key];
+    return Object.keys(selection).reduce((acc, key) => {
+        if (!(key in state)) {
+            return acc;
         }
-    }
-    else {
-        acc[key] = translateSelectionToState(value, state[key]);
-    }
-    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;
+    }, {});
+};
 const escapeStringRegexp = string => {
     if (typeof string !== 'string') {
         throw new TypeError('Expected a string');
@@ -48,7 +52,7 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
         ...options,
     };
     const stateMatcher = new RegExp(`${escapeStringRegexp(defaultedOptions.key)}=(.*);;`);
-    const matcher = new RegExp(`[&\?]?${escapeStringRegexp(defaultedOptions.key)}=(.*);;&?`);
+    const splitMatcher = new RegExp(`${escapeStringRegexp(defaultedOptions.key)}=.*;;`);
     const parseQueryString = querystring => {
         const match = querystring.match(stateMatcher);
         if (match) {
@@ -96,31 +100,44 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
     if (typeof window !== 'undefined') {
         const setQuery = () => {
             const selectedState = getSelectedState(get(), location.pathname);
-            const currentQueryString = location.search.slice(1);
+            const currentQueryString = location.search;
             const currentParsed = parseQueryString(currentQueryString);
             const newMerged = {
                 ...currentParsed,
                 ...selectedState,
             };
-            const ignored = currentQueryString.replace(matcher, '');
+            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 newQueryState = `${defaultedOptions.key}=${stringified};;`;
                 let newQueryString = '';
                 if (currentParsed) {
-                    newQueryString = currentQueryString.replace(stateMatcher, newQueryState);
+                    newQueryString = currentQueryString.replace(splitMatcher, newQueryState);
                 }
                 else if (ignored) {
                     newQueryString = ignored + '&' + newQueryState;
                 }
                 else {
-                    newQueryString = newQueryState;
+                    newQueryString = '?' + newQueryState;
                 }
-                history.replaceState(history.state, '', location.pathname + (newQueryString ? '?' + newQueryString : ''));
+                history.replaceState(history.state, '', location.pathname + newQueryString);
             }
             else {
-                history.replaceState(history.state, '', location.pathname + (ignored ? '?' + ignored : ''));
+                history.replaceState(history.state, '', location.pathname + ignored);
             }
         };
         // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zustand-querystring",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "license": "MIT",
   "type": "module",
   "keywords": [
@@ -38,6 +38,7 @@
     "zustand": "^4.3.2"
   },
   "scripts": {
+    "dev": "tsc -b --watch",
     "build": "rimraf lib && tsc -b"
   }
 }