zustand-querystring 0.0.3 → 0.0.5

package/README.md

@@ -2,57 +2,32 @@
 
 A zustand middleware that stores state in the querystring.
 
+Try on [StackBlitz](https://stackblitz.com/github/nitedani/zustand-querystring/tree/main/examples/react) (You need to click "Open in New Tab")
+
 Quickstart:
 ```ts
 import create from "zustand";
-import { immer } from "zustand/middleware/immer";
 import { querystring } from "zustand-querystring";
 
 interface Store {
   count: number;
-  incrementCount: () => void;
-
   ticks: number;
-  incrementTicks: () => void;
-
   someNestedState: {
     nestedCount: number;
-    incrementNestedCount: () => void;
-
     hello: string;
-    setHello: (hello: string) => void;
   };
 }
 
 export const useStore = create<Store>()(
   querystring(
-    immer((set, get) => ({
+    (set, get) => ({
       count: 0,
-      incrementCount: () =>
-        set((state) => {
-          state.count += 1;
-        }),
-
       ticks: 0,
-      incrementTicks: () =>
-        set((state) => {
-          state.ticks += 1;
-        }),
-
       someNestedState: {
         nestedCount: 0,
-        incrementNestedCount: () =>
-          set((state) => {
-            state.someNestedState.nestedCount += 1;
-          }),
-
         hello: "Hello",
-        setHello: (hello: string) =>
-          set((state) => {
-            state.someNestedState.hello = hello;
-          }),
       },
-    })),
+    }),
     {
       // select controls what part of the state is synced with the query string
       // pathname is the current route (e.g. /about or /)

package/lib/middleware.d.ts

@@ -5,6 +5,7 @@ type DeepSelect<T> = T extends object ? {
 export interface QueryStringOptions<T> {
     url?: string;
     select?: (pathname: string) => DeepSelect<T>;
+    key?: string;
 }
 type QueryString = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, Mps, Mcs>, options?: QueryStringOptions<T>) => StateCreator<T, Mps, Mcs>;
 export declare const querystring: QueryString;

package/lib/middleware.js

@@ -24,6 +24,10 @@ 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 value = selection[key];
     if (typeof value === 'boolean') {
         if (value) {
@@ -38,28 +42,39 @@ const translateSelectionToState = (selection, state) => Object.keys(selection).r
 const queryStringImpl = (fn, options) => (set, get, api) => {
     const defaultedOptions = {
         partialize: state => state,
+        key: '$',
         ...options,
     };
     const url = defaultedOptions.url;
     const initialState = get() ?? fn(set, get, api);
-    const getSelectedState = () => {
+    const getSelectedState = state => {
         if (defaultedOptions.select) {
             const selection = defaultedOptions.select(window.location.pathname);
             // translate the selection to state
-            const selectedState = translateSelectionToState(selection, get());
+            const selectedState = translateSelectionToState(selection, state);
             return selectedState;
         }
-        return get();
+        return state;
     };
     const initialize = (url, _set = set) => {
+        const fallback = () => fn(_set, get, api);
         try {
-            const queryString = url.split('?')[1]?.slice(2);
+            const queryString = url.split('?')[1];
             if (!queryString) {
-                return fn(_set, get, api);
+                return fallback();
+            }
+            const idx = queryString.indexOf(defaultedOptions.key + '=');
+            if (idx === -1) {
+                return fallback();
             }
-            const parsed = parse(queryString);
+            const toParse = queryString.substring(idx + 2);
+            if (!toParse) {
+                return fallback();
+            }
+            console.log('toParse', toParse);
+            const parsed = parse(toParse);
             const currentValue = get() ?? fn(_set, get, api);
-            const merged = mergeWith(currentValue, parsed);
+            const merged = mergeWith(currentValue, getSelectedState(parsed));
             set(merged, true);
             return merged;
         }
@@ -73,20 +88,36 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
     };
     if (typeof window !== 'undefined') {
         const setQuery = () => {
-            const selectedState = getSelectedState();
+            const selectedState = getSelectedState(get());
             if (!selectedState) {
                 return;
             }
             const compactedSelectedState = compact(selectedState, initialState);
-            if (!compactedSelectedState) {
-                window.history.replaceState(null, '', window.location.pathname);
-                return;
-            }
-            const stringified = stringify(compactedSelectedState);
-            if (stringified) {
+            const stringified = compactedSelectedState && stringify(compactedSelectedState);
+            const currentQueryString = window.location.search.slice(1);
+            if (stringified || currentQueryString) {
                 // console.log('set query', stringified);
                 // console.log('parse query', parse(stringified));
-                window.history.replaceState(null, '', `?q=${stringified}`);
+                // parse current querystring
+                // split query string to key-value
+                const variables = {};
+                const currentQuery = currentQueryString.split('&');
+                for (const variable of currentQuery) {
+                    if (stringified?.includes(variable)) {
+                        continue;
+                    }
+                    const [key, value] = variable.split('=');
+                    variables[key] = value;
+                }
+                variables[defaultedOptions.key] = stringified;
+                const newQueryString = Object.keys(variables) // filter out empty values
+                    .filter(key => variables[key])
+                    // join key-value pairs
+                    .map(key => `${key}=${variables[key]}`)
+                    // join all pairs with &
+                    .join('&');
+                console.log('newQueryString', newQueryString);
+                window.history.replaceState(null, '', newQueryString ? `?${newQueryString}` : window.location.pathname);
             }
         };
         //TODO: find a better way to do this

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zustand-querystring",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "license": "MIT",
   "type": "module",
   "keywords": [