zustand-querystring 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,76 @@
+# zustand-querystring
+
+A zustand middleware that stores state in the querystring.
+
+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) => ({
+      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 /)
+      select(pathname) {
+        return {
+          count: true,
+          // ticks: false, <- false by default
+
+          someNestedState: {
+            nestedCount: true,
+            hello: "/about" === pathname,
+          },
+
+          // OR select the whole nested state
+          // someNestedState: true
+        };
+      },
+    }
+  )
+);
+```

package/lib/index.d.ts

@@ -1 +1 @@
-export { queryString, QueryStringOptions } from './middleware.js';
+export { querystring, QueryStringOptions } from './middleware.js';

package/lib/index.js

@@ -1 +1 @@
-export { queryString } from './middleware.js';
+export { querystring } from './middleware.js';

package/lib/middleware.d.ts

@@ -7,5 +7,5 @@ export interface QueryStringOptions<T> {
     select?: (pathname: string) => DeepSelect<T>;
 }
 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;
+export declare const querystring: QueryString;
 export {};

package/lib/middleware.js

@@ -112,4 +112,4 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
     }
     return fn(set, get, api);
 };
-export const queryString = queryStringImpl;
+export const querystring = queryStringImpl;

package/package.json

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