dev-react-microstore 4.0.1 → 5.0.0

package/README.md

@@ -8,7 +8,7 @@ A minimal global state manager for React with fine-grained subscriptions.
 npm install react-microstore
 ```
 
-## Usage
+## Basic Usage
 
 ```tsx
 import { createStoreState, useStoreSelector } from 'react-microstore';
@@ -29,6 +29,102 @@ function Counter() {
 }
 ```
 
+## Middleware Support
+
+Add Express-style middleware to intercept and control state updates:
+
+```tsx
+const store = createStoreState({ count: 0, user: null });
+
+// Validation middleware - can block updates
+store.addMiddleware(
+  (currentState, update, next) => {
+    if (update.count !== undefined && update.count < 0) {
+      // Don't call next() to block the update
+      console.log('Blocked negative count');
+      return;
+    }
+    next(); // Allow the update
+  },
+  ['count'] // Only run for count updates
+);
+
+// Transform middleware - can modify updates
+store.addMiddleware(
+  (currentState, update, next) => {
+    if (update.user?.name) {
+      const modifiedUpdate = {
+        ...update,
+        user: {
+          ...update.user,
+          name: update.user.name.trim().toLowerCase()
+        }
+      };
+      next(modifiedUpdate); // Pass modified update
+    } else {
+      next(); // Pass original update
+    }
+  }
+);
+
+// Logging middleware
+store.addMiddleware(
+  (currentState, update, next) => {
+    console.log('Processing update:', update);
+    next(); // Continue
+  }
+);
+```
+
+## Persistence
+
+The store supports automatic state persistence using middleware with per-key storage:
+
+```typescript
+import { createStoreState, createPersistenceMiddleware, loadPersistedState } from '@ohad/react-microstore'
+
+// Load persisted state during initialization
+const persistedState = loadPersistedState<AppState>(
+  localStorage, 
+  'my-app-state', 
+  ['theme', 'userName', 'isLoggedIn']
+);
+
+// Create store with merged initial + persisted state
+const store = createStoreState<AppState>({
+  theme: 'light',
+  userName: '',
+  isLoggedIn: false,
+  tempData: { cache: [] },
+  ...persistedState // Apply persisted values
+});
+
+// Add persistence middleware - saves each key individually
+store.addMiddleware(
+  createPersistenceMiddleware(localStorage, 'my-app-state', ['theme', 'userName', 'isLoggedIn'])
+);
+```
+
+**Key benefits:**
+
+✅ **Per-key storage** - Each key stored separately (e.g., `my-app-state:theme`, `my-app-state:userName`)  
+✅ **Efficient writes** - Only writes to storage when specified keys actually change  
+✅ **No state blobs** - Avoids serializing/storing entire state objects  
+✅ **Composable** - Uses the same middleware system as validation/logging  
+✅ **Flexible** - Easy to swap storage backends or add custom logic
+
+## Debouncing
+
+Control when updates are applied:
+
+```tsx
+// Debounce updates for 300ms
+store.set({ searchQuery: 'new value' }, 300);
+
+// Or use boolean for default debounce (0ms)
+store.set({ count: count + 1 }, true);
+```
+
 ## Custom Comparison Function
 
 ```tsx
@@ -143,7 +239,10 @@ function UserProfile() {
 - Extremely lightweight (less than 2KB minified)
 - Fine-grained subscriptions to minimize re-renders
 - Custom comparison functions for complex state updates
-- Fully Type-safe
+- Simple middleware support with `addMiddleware()` 
+- Automatic persistence to localStorage/sessionStorage
+- Debouncing support to control update frequency
+- Fully Type-safe with TypeScript
 - No dependencies other than React
 - Update store from anywhere in your application
 

package/dist/index.d.mts

@@ -1,9 +1,24 @@
 type StoreListener = () => void;
+type MiddlewareFunction<T extends object> = (currentState: T, update: Partial<T>, next: (modifiedUpdate?: Partial<T>) => void) => void;
+/**
+ * Creates a new reactive store with fine-grained subscriptions and middleware support.
+ *
+ * @param initialState - The initial state object for the store
+ * @returns Store object with methods: get, set, subscribe, select, addMiddleware
+ *
+ * @example
+ * ```ts
+ * const store = createStoreState({ count: 0, name: 'John' });
+ * store.set({ count: 1 }); // Update state
+ * const { count } = useStoreSelector(store, ['count']); // Subscribe in React
+ * ```
+ */
 declare function createStoreState<T extends object>(initialState: T): {
     get: () => T;
-    set: (next: Partial<T>, debounceDelay?: number | boolean) => void;
+    set: (update: Partial<T>, debounceDelay?: number | boolean) => void;
     subscribe: (keys: (keyof T)[], listener: StoreListener) => (() => void);
     select: <K extends keyof T>(keys: K[]) => Pick<T, K>;
+    addMiddleware: (callbackOrTuple: MiddlewareFunction<T> | [MiddlewareFunction<T>, (keyof T)[]], affectedKeys?: (keyof T)[] | null) => () => void;
 };
 type StoreType<T extends object> = ReturnType<typeof createStoreState<T>>;
 type PrimitiveKey<T extends object> = keyof T;
@@ -17,6 +32,74 @@ type ExtractSelectorKeys<T extends object, S extends SelectorInput<T>> = {
     [K in S[number] extends infer Item ? Item extends keyof T ? Item : keyof Item : never]: T[K];
 };
 type Picked<T extends object, S extends SelectorInput<T>> = ExtractSelectorKeys<T, S>;
+/**
+ * React hook that subscribes to specific keys in a store with fine-grained re-renders.
+ * Only re-renders when the selected keys actually change (using Object.is comparison).
+ *
+ * @param store - The store created with createStoreState
+ * @param selector - Array of keys to subscribe to, or objects with custom compare functions
+ * @returns Selected state values from the store
+ *
+ * @example
+ * ```ts
+ * // Subscribe to specific keys
+ * const { count, name } = useStoreSelector(store, ['count', 'name']);
+ *
+ * // Custom comparison for complex objects
+ * const { tasks } = useStoreSelector(store, [
+ *   { tasks: (prev, next) => prev.length === next.length }
+ * ]);
+ * ```
+ */
 declare function useStoreSelector<T extends object, S extends SelectorInput<T>>(store: StoreType<T>, selector: S): Picked<T, S>;
+/**
+ * Interface for storage objects compatible with persistence middleware.
+ * Includes localStorage, sessionStorage, AsyncStorage, or any custom storage.
+ */
+interface StorageSupportingInterface {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+/**
+ * Creates a persistence middleware that saves individual keys to storage.
+ * Only writes when the specified keys actually change, using per-key storage.
+ * Storage format: `${persistKey}:${keyName}` for each persisted key.
+ *
+ * @param storage - Storage interface (localStorage, sessionStorage, AsyncStorage, etc.)
+ * @param persistKey - Base key prefix for storage (e.g., 'myapp' creates 'myapp:theme')
+ * @param keys - Array of state keys to persist
+ * @returns Tuple of [middleware function, affected keys] for use with addMiddleware
+ *
+ * @example
+ * ```ts
+ * // Add persistence for theme and user settings
+ * store.addMiddleware(
+ *   createPersistenceMiddleware(localStorage, 'myapp', ['theme', 'isLoggedIn'])
+ * );
+ * ```
+ */
+declare function createPersistenceMiddleware<T extends object>(storage: Storage | StorageSupportingInterface, persistKey: string, keys: (keyof T)[]): [MiddlewareFunction<T>, (keyof T)[]];
+/**
+ * Loads persisted state from individual key storage during store initialization.
+ * Reads keys saved by createPersistenceMiddleware and returns them as partial state.
+ *
+ * @param storage - Storage interface to read from (same as used in middleware)
+ * @param persistKey - Base key prefix used for storage (same as used in middleware)
+ * @param keys - Array of keys to restore (should match middleware keys)
+ * @returns Partial state object with persisted values, or empty object if loading fails
+ *
+ * @example
+ * ```ts
+ * // Load persisted state before creating store
+ * const persistedState = loadPersistedState(localStorage, 'myapp', ['theme', 'isLoggedIn']);
+ *
+ * const store = createStoreState({
+ *   theme: 'light',
+ *   isLoggedIn: false,
+ *   ...persistedState // Apply persisted values
+ * });
+ * ```
+ */
+declare function loadPersistedState<T extends object>(storage: Storage | StorageSupportingInterface, persistKey: string, keys: (keyof T)[]): Partial<T>;
 
-export { createStoreState, useStoreSelector };
+export { type StorageSupportingInterface, createPersistenceMiddleware, createStoreState, loadPersistedState, useStoreSelector };

package/dist/index.d.ts

@@ -1,9 +1,24 @@
 type StoreListener = () => void;
+type MiddlewareFunction<T extends object> = (currentState: T, update: Partial<T>, next: (modifiedUpdate?: Partial<T>) => void) => void;
+/**
+ * Creates a new reactive store with fine-grained subscriptions and middleware support.
+ *
+ * @param initialState - The initial state object for the store
+ * @returns Store object with methods: get, set, subscribe, select, addMiddleware
+ *
+ * @example
+ * ```ts
+ * const store = createStoreState({ count: 0, name: 'John' });
+ * store.set({ count: 1 }); // Update state
+ * const { count } = useStoreSelector(store, ['count']); // Subscribe in React
+ * ```
+ */
 declare function createStoreState<T extends object>(initialState: T): {
     get: () => T;
-    set: (next: Partial<T>, debounceDelay?: number | boolean) => void;
+    set: (update: Partial<T>, debounceDelay?: number | boolean) => void;
     subscribe: (keys: (keyof T)[], listener: StoreListener) => (() => void);
     select: <K extends keyof T>(keys: K[]) => Pick<T, K>;
+    addMiddleware: (callbackOrTuple: MiddlewareFunction<T> | [MiddlewareFunction<T>, (keyof T)[]], affectedKeys?: (keyof T)[] | null) => () => void;
 };
 type StoreType<T extends object> = ReturnType<typeof createStoreState<T>>;
 type PrimitiveKey<T extends object> = keyof T;
@@ -17,6 +32,74 @@ type ExtractSelectorKeys<T extends object, S extends SelectorInput<T>> = {
     [K in S[number] extends infer Item ? Item extends keyof T ? Item : keyof Item : never]: T[K];
 };
 type Picked<T extends object, S extends SelectorInput<T>> = ExtractSelectorKeys<T, S>;
+/**
+ * React hook that subscribes to specific keys in a store with fine-grained re-renders.
+ * Only re-renders when the selected keys actually change (using Object.is comparison).
+ *
+ * @param store - The store created with createStoreState
+ * @param selector - Array of keys to subscribe to, or objects with custom compare functions
+ * @returns Selected state values from the store
+ *
+ * @example
+ * ```ts
+ * // Subscribe to specific keys
+ * const { count, name } = useStoreSelector(store, ['count', 'name']);
+ *
+ * // Custom comparison for complex objects
+ * const { tasks } = useStoreSelector(store, [
+ *   { tasks: (prev, next) => prev.length === next.length }
+ * ]);
+ * ```
+ */
 declare function useStoreSelector<T extends object, S extends SelectorInput<T>>(store: StoreType<T>, selector: S): Picked<T, S>;
+/**
+ * Interface for storage objects compatible with persistence middleware.
+ * Includes localStorage, sessionStorage, AsyncStorage, or any custom storage.
+ */
+interface StorageSupportingInterface {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+/**
+ * Creates a persistence middleware that saves individual keys to storage.
+ * Only writes when the specified keys actually change, using per-key storage.
+ * Storage format: `${persistKey}:${keyName}` for each persisted key.
+ *
+ * @param storage - Storage interface (localStorage, sessionStorage, AsyncStorage, etc.)
+ * @param persistKey - Base key prefix for storage (e.g., 'myapp' creates 'myapp:theme')
+ * @param keys - Array of state keys to persist
+ * @returns Tuple of [middleware function, affected keys] for use with addMiddleware
+ *
+ * @example
+ * ```ts
+ * // Add persistence for theme and user settings
+ * store.addMiddleware(
+ *   createPersistenceMiddleware(localStorage, 'myapp', ['theme', 'isLoggedIn'])
+ * );
+ * ```
+ */
+declare function createPersistenceMiddleware<T extends object>(storage: Storage | StorageSupportingInterface, persistKey: string, keys: (keyof T)[]): [MiddlewareFunction<T>, (keyof T)[]];
+/**
+ * Loads persisted state from individual key storage during store initialization.
+ * Reads keys saved by createPersistenceMiddleware and returns them as partial state.
+ *
+ * @param storage - Storage interface to read from (same as used in middleware)
+ * @param persistKey - Base key prefix used for storage (same as used in middleware)
+ * @param keys - Array of keys to restore (should match middleware keys)
+ * @returns Partial state object with persisted values, or empty object if loading fails
+ *
+ * @example
+ * ```ts
+ * // Load persisted state before creating store
+ * const persistedState = loadPersistedState(localStorage, 'myapp', ['theme', 'isLoggedIn']);
+ *
+ * const store = createStoreState({
+ *   theme: 'light',
+ *   isLoggedIn: false,
+ *   ...persistedState // Apply persisted values
+ * });
+ * ```
+ */
+declare function loadPersistedState<T extends object>(storage: Storage | StorageSupportingInterface, persistKey: string, keys: (keyof T)[]): Partial<T>;
 
-export { createStoreState, useStoreSelector };
+export { type StorageSupportingInterface, createPersistenceMiddleware, createStoreState, loadPersistedState, useStoreSelector };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var K=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var j=Object.prototype.hasOwnProperty;var I=(o,e)=>{for(var n in e)K(o,n,{get:e[n],enumerable:!0})},R=(o,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of v(e))!j.call(o,p)&&p!==n&&K(o,p,{get:()=>e[p],enumerable:!(c=P(e,p))||c.enumerable});return o};var C=o=>R(K({},"__esModule",{value:!0}),o);var w={};I(w,{createStoreState:()=>F,useStoreSelector:()=>E});module.exports=C(w);var f=require("react");function V(o,e){let n;return(...c)=>{clearTimeout(n),n=setTimeout(()=>o(...c),e)}}function F(o){let e=o,n=new Map,c=new Map;return{get:()=>e,set:(i,a=!1)=>{var S;if(!i)return;let r=[];for(let k in i){let t=k,l=e[t],T=i[t];l!==T&&(Object.is(l,T)||(e[t]=T,r.push(t)))}if(r.length!==0)for(let k of r)a!==!1?(c.has(k)||c.set(k,V(()=>{var t;(t=n.get(k))==null||t.forEach(l=>l())},typeof a=="number"?a:0)),c.get(k)()):(S=n.get(k))==null||S.forEach(t=>t())},subscribe:(i,a)=>{for(let r of i)n.has(r)||n.set(r,new Set),n.get(r).add(a);return()=>{var r;for(let S of i)(r=n.get(S))==null||r.delete(a)}},select:i=>{let a={},r=e;for(let S of i)a[S]=r[S];return a}}}function z(o,e){return o.length===e.length&&o.every((n,c)=>n===e[c])}function E(o,e){let n=(0,f.useRef)({}),c=(0,f.useRef)(null),p=(0,f.useRef)(null),x=(0,f.useRef)(null),h=(0,f.useRef)(!0),b=(0,f.useRef)({}),i=(0,f.useRef)(null);if(!c.current||!z(c.current,e)){let t=[],l=[];for(let T of e)if(typeof T=="string"){let d=T;t.push({key:d}),l.push(d)}else{let d=T;for(let s in d){let y=d[s],u=s;t.push({key:u,compare:y}),l.push(u)}}p.current=t,x.current=l,c.current=e,i.current=null}let a=p.current,r=x.current,S=()=>{let t=o.get();if(h.current){h.current=!1;let s={};for(let{key:y}of a){let u=t[y];b.current[y]=u,s[y]=u}return n.current=s,s}if(!(()=>{var s;for(let{key:y,compare:u}of a){let m=b.current[y],g=t[y];if(m===void 0||((s=u==null?void 0:u(m,g))!=null?s:!Object.is(m,g)))return!0}return!1})())return n.current;let d={};for(let{key:s,compare:y}of a){let u=b.current[s],m=t[s];u===void 0||(y?!y(u,m):!Object.is(u,m))?(b.current[s]=m,d[s]=m):d[s]=u}return n.current=d,d},k=(0,f.useMemo)(()=>{let t=o.get(),l={};for(let T of r)l[T]=t[T];return l},[r]);return i.current||(i.current=t=>o.subscribe(r,t)),(0,f.useSyncExternalStore)(i.current,S,()=>k)}0&&(module.exports={createStoreState,useStoreSelector});
+"use strict";var w=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var K=(n,e)=>{for(var t in e)w(n,t,{get:e[t],enumerable:!0})},j=(n,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of I(e))!F.call(n,i)&&i!==t&&w(n,i,{get:()=>e[i],enumerable:!(a=v(e,i))||a.enumerable});return n};var M=n=>j(w({},"__esModule",{value:!0}),n);var $={};K($,{createPersistenceMiddleware:()=>E,createStoreState:()=>R,loadPersistedState:()=>N,useStoreSelector:()=>z});module.exports=M($);var S=require("react");function C(n,e){let t;return(...a)=>{clearTimeout(t),t=setTimeout(()=>n(...a),e)}}function R(n){let e=n,t=new Map,a=new Map,i=[],k=()=>e,g=(l,f=!1)=>{if(!l)return;let s=l,T=0,r=!1,o=y=>{if(y!==void 0&&(s=y),T>=i.length){r||x(s,f);return}let u=i[T++];if(!u.keys||u.keys.some(c=>c in s)){let c=!1,p=d=>{c||(c=!0,o(d))};try{u.callback(e,s,p)}catch(d){r=!0,console.error("Middleware error:",d);return}if(!c){r=!0;return}}else o()};o()},x=(l,f)=>{var T;let s=[];for(let r in l){let o=r,y=e[o],u=l[o];y!==u&&(Object.is(y,u)||(e[o]=u,s.push(o)))}if(s.length!==0)for(let r of s)f!==!1?(a.has(r)||a.set(r,C(()=>{var o;(o=t.get(r))==null||o.forEach(y=>y())},typeof f=="number"?f:0)),a.get(r)()):(T=t.get(r))==null||T.forEach(o=>o())};return{get:k,set:g,subscribe:(l,f)=>{for(let s of l)t.has(s)||t.set(s,new Set),t.get(s).add(f);return()=>{var s;for(let T of l)(s=t.get(T))==null||s.delete(f)}},select:l=>{let f={},s=e;for(let T of l)f[T]=s[T];return f},addMiddleware:(l,f=null)=>{let s,T;Array.isArray(l)?[s,T]=l:(s=l,T=f);let r={callback:s,keys:T};return i.push(r),()=>{let o=i.indexOf(r);o>-1&&i.splice(o,1)}}}}function V(n,e){return n.length===e.length&&n.every((t,a)=>t===e[a])}function z(n,e){let t=(0,S.useRef)({}),a=(0,S.useRef)(null),i=(0,S.useRef)(null),k=(0,S.useRef)(null),g=(0,S.useRef)(!0),x=(0,S.useRef)({}),m=(0,S.useRef)(null),b=(0,S.useRef)(n),P=b.current!==n;if(P&&(b.current=n,t.current={},a.current=null,i.current=null,k.current=null,g.current=!0,x.current={},m.current=null),!a.current||!V(a.current,e)){let r=[],o=[];for(let y of e)if(typeof y=="string"){let u=y;r.push({key:u}),o.push(u)}else{let u=y;for(let c in u){let p=u[c],d=c;r.push({key:d,compare:p}),o.push(d)}}i.current=r,k.current=o,a.current=e,m.current=null}let l=i.current,f=k.current,s=()=>{let r=n.get();if(g.current){g.current=!1;let c={};for(let{key:p}of l){let d=r[p];x.current[p]=d,c[p]=d}return t.current=c,c}if(!(()=>{for(let{key:c,compare:p}of l){let d=x.current[c],h=r[c];if(d===void 0||(p?!p(d,h):!Object.is(d,h)))return!0}return!1})())return t.current;let u={};for(let{key:c,compare:p}of l){let d=x.current[c],h=r[c];d===void 0||(p?!p(d,h):!Object.is(d,h))?(x.current[c]=h,u[c]=h):u[c]=d}return t.current=u,u},T=(0,S.useMemo)(()=>{let r=n.get(),o={};for(let y of f)o[y]=r[y];return o},[f]);return(!m.current||P)&&(m.current=r=>n.subscribe(f,r)),(0,S.useSyncExternalStore)(m.current,s,()=>T)}function E(n,e,t){return[(i,k,g)=>{let x=t.filter(m=>m in k);if(x.length===0)return g();for(let m of x)try{let b=k[m],P=`${e}:${String(m)}`;n.setItem(P,JSON.stringify(b))}catch(b){console.warn(`Failed to persist key ${String(m)}:`,b)}g()},t]}function N(n,e,t){let a={};for(let i of t)try{let k=`${e}:${String(i)}`,g=n.getItem(k);g!==null&&(a[i]=JSON.parse(g))}catch(k){console.warn(`Failed to load persisted key ${String(i)}:`,k)}return a}0&&(module.exports={createPersistenceMiddleware,createStoreState,loadPersistedState,useStoreSelector});

package/dist/index.mjs

@@ -1 +1 @@
-import{useMemo as K,useRef as k,useSyncExternalStore as P}from"react";function v(T,s){let n;return(...a)=>{clearTimeout(n),n=setTimeout(()=>T(...a),s)}}function C(T){let s=T,n=new Map,a=new Map;return{get:()=>s,set:(c,u=!1)=>{var d;if(!c)return;let t=[];for(let p in c){let e=p,i=s[e],l=c[e];i!==l&&(Object.is(i,l)||(s[e]=l,t.push(e)))}if(t.length!==0)for(let p of t)u!==!1?(a.has(p)||a.set(p,v(()=>{var e;(e=n.get(p))==null||e.forEach(i=>i())},typeof u=="number"?u:0)),a.get(p)()):(d=n.get(p))==null||d.forEach(e=>e())},subscribe:(c,u)=>{for(let t of c)n.has(t)||n.set(t,new Set),n.get(t).add(u);return()=>{var t;for(let d of c)(t=n.get(d))==null||t.delete(u)}},select:c=>{let u={},t=s;for(let d of c)u[d]=t[d];return u}}}function j(T,s){return T.length===s.length&&T.every((n,a)=>n===s[a])}function V(T,s){let n=k({}),a=k(null),b=k(null),x=k(null),h=k(!0),m=k({}),c=k(null);if(!a.current||!j(a.current,s)){let e=[],i=[];for(let l of s)if(typeof l=="string"){let y=l;e.push({key:y}),i.push(y)}else{let y=l;for(let o in y){let f=y[o],r=o;e.push({key:r,compare:f}),i.push(r)}}b.current=e,x.current=i,a.current=s,c.current=null}let u=b.current,t=x.current,d=()=>{let e=T.get();if(h.current){h.current=!1;let o={};for(let{key:f}of u){let r=e[f];m.current[f]=r,o[f]=r}return n.current=o,o}if(!(()=>{var o;for(let{key:f,compare:r}of u){let S=m.current[f],g=e[f];if(S===void 0||((o=r==null?void 0:r(S,g))!=null?o:!Object.is(S,g)))return!0}return!1})())return n.current;let y={};for(let{key:o,compare:f}of u){let r=m.current[o],S=e[o];r===void 0||(f?!f(r,S):!Object.is(r,S))?(m.current[o]=S,y[o]=S):y[o]=r}return n.current=y,y},p=K(()=>{let e=T.get(),i={};for(let l of t)i[l]=e[l];return i},[t]);return c.current||(c.current=e=>T.subscribe(t,e)),P(c.current,d,()=>p)}export{C as createStoreState,V as useStoreSelector};
+import{useMemo as w,useRef as x,useSyncExternalStore as v}from"react";function I(l,s){let n;return(...d)=>{clearTimeout(n),n=setTimeout(()=>l(...d),s)}}function C(l){let s=l,n=new Map,d=new Map,y=[],S=()=>s,m=(c,u=!1)=>{if(!c)return;let r=c,f=0,e=!1,t=T=>{if(T!==void 0&&(r=T),f>=y.length){e||g(r,u);return}let i=y[f++];if(!i.keys||i.keys.some(o=>o in r)){let o=!1,p=a=>{o||(o=!0,t(a))};try{i.callback(s,r,p)}catch(a){e=!0,console.error("Middleware error:",a);return}if(!o){e=!0;return}}else t()};t()},g=(c,u)=>{var f;let r=[];for(let e in c){let t=e,T=s[t],i=c[t];T!==i&&(Object.is(T,i)||(s[t]=i,r.push(t)))}if(r.length!==0)for(let e of r)u!==!1?(d.has(e)||d.set(e,I(()=>{var t;(t=n.get(e))==null||t.forEach(T=>T())},typeof u=="number"?u:0)),d.get(e)()):(f=n.get(e))==null||f.forEach(t=>t())};return{get:S,set:m,subscribe:(c,u)=>{for(let r of c)n.has(r)||n.set(r,new Set),n.get(r).add(u);return()=>{var r;for(let f of c)(r=n.get(f))==null||r.delete(u)}},select:c=>{let u={},r=s;for(let f of c)u[f]=r[f];return u},addMiddleware:(c,u=null)=>{let r,f;Array.isArray(c)?[r,f]=c:(r=c,f=u);let e={callback:r,keys:f};return y.push(e),()=>{let t=y.indexOf(e);t>-1&&y.splice(t,1)}}}}function F(l,s){return l.length===s.length&&l.every((n,d)=>n===s[d])}function R(l,s){let n=x({}),d=x(null),y=x(null),S=x(null),m=x(!0),g=x({}),k=x(null),b=x(l),P=b.current!==l;if(P&&(b.current=l,n.current={},d.current=null,y.current=null,S.current=null,m.current=!0,g.current={},k.current=null),!d.current||!F(d.current,s)){let e=[],t=[];for(let T of s)if(typeof T=="string"){let i=T;e.push({key:i}),t.push(i)}else{let i=T;for(let o in i){let p=i[o],a=o;e.push({key:a,compare:p}),t.push(a)}}y.current=e,S.current=t,d.current=s,k.current=null}let c=y.current,u=S.current,r=()=>{let e=l.get();if(m.current){m.current=!1;let o={};for(let{key:p}of c){let a=e[p];g.current[p]=a,o[p]=a}return n.current=o,o}if(!(()=>{for(let{key:o,compare:p}of c){let a=g.current[o],h=e[o];if(a===void 0||(p?!p(a,h):!Object.is(a,h)))return!0}return!1})())return n.current;let i={};for(let{key:o,compare:p}of c){let a=g.current[o],h=e[o];a===void 0||(p?!p(a,h):!Object.is(a,h))?(g.current[o]=h,i[o]=h):i[o]=a}return n.current=i,i},f=w(()=>{let e=l.get(),t={};for(let T of u)t[T]=e[T];return t},[u]);return(!k.current||P)&&(k.current=e=>l.subscribe(u,e)),v(k.current,r,()=>f)}function V(l,s,n){return[(y,S,m)=>{let g=n.filter(k=>k in S);if(g.length===0)return m();for(let k of g)try{let b=S[k],P=`${s}:${String(k)}`;l.setItem(P,JSON.stringify(b))}catch(b){console.warn(`Failed to persist key ${String(k)}:`,b)}m()},n]}function z(l,s,n){let d={};for(let y of n)try{let S=`${s}:${String(y)}`,m=l.getItem(S);m!==null&&(d[y]=JSON.parse(m))}catch(S){console.warn(`Failed to load persisted key ${String(y)}:`,S)}return d}export{V as createPersistenceMiddleware,C as createStoreState,z as loadPersistedState,R as useStoreSelector};

package/example/README.md

@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

package/example/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/example/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>