zustand-querystring 0.0.12 → 0.0.14

package/README.md

@@ -1,13 +1,13 @@
 # zustand-querystring
 
-A zustand middleware that syncs state with 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/)
+- [Rakkas](./examples/rakkas/)
 
 Quickstart:
 ```ts

package/lib/middleware.js

@@ -1,5 +1,5 @@
 import { parse, stringify } from './parser.js';
-import { mergeWith, isEqual } from 'lodash-es';
+import { mergeWith, isEqual, cloneDeep } from 'lodash-es';
 const compact = (newState, initialState) => {
     const output = {};
     Object.keys(newState).forEach(key => {
@@ -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');
@@ -61,7 +65,6 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
         return null;
     };
     const url = defaultedOptions.url;
-    const initialState = get() ?? fn(set, get, api);
     const getSelectedState = (state, pathname) => {
         if (defaultedOptions.select) {
             const selection = defaultedOptions.select(pathname);
@@ -71,29 +74,31 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
         }
         return state ?? {};
     };
-    const initialize = (url, _set = set) => {
-        const fallback = () => fn(_set, get, api);
+    const initialize = (url, initialState) => {
         try {
             const queryString = url.search.substring(1);
             const pathname = url.pathname;
             if (!queryString) {
-                return fallback();
+                return initialState;
             }
             const parsed = parseQueryString(queryString);
             if (!parsed) {
-                return fallback();
+                return initialState;
             }
-            const currentValue = get() ?? fn(_set, get, api);
-            const merged = mergeWith(currentValue, getSelectedState(parsed, pathname));
+            const merged = mergeWith(cloneDeep(initialState), getSelectedState(parsed, pathname));
             set(merged, true);
             return merged;
         }
         catch (error) {
             console.error(error);
-            return fn(_set, get, api);
+            return initialState;
         }
     };
     if (typeof window !== 'undefined') {
+        const initialState = cloneDeep(fn((...args) => {
+            set(...args);
+            setQuery();
+        }, get, api));
         const setQuery = () => {
             const selectedState = getSelectedState(get(), location.pathname);
             const currentQueryString = location.search;
@@ -155,13 +160,10 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
             originalSetState(...args);
             setQuery();
         };
-        return initialize(new URL(location.href), (...args) => {
-            set(...args);
-            setQuery();
-        });
+        return initialize(new URL(location.href), initialState);
     }
     else if (url) {
-        return initialize(new URL(decodeURIComponent(url), 'http://localhost'));
+        return initialize(new URL(decodeURIComponent(url), 'http://localhost'), fn(set, get, api));
     }
     return fn(set, get, api);
 };

package/package.json

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