zustand - npm Package Compare versions

Comparing version 3.7.2 to 4.4.7

context.d.ts

@@ -1,27 +0,25 @@
-import { ReactNode } from 'react';
-import { EqualityChecker, State, StateSelector, UseBoundStore } from 'zustand';
+import ReactExports from 'react';
+import type { ReactNode } from 'react';
+import type { StoreApi } from 'zustand';
+type UseContextStore<S extends StoreApi<unknown>> = {
+    (): ExtractState<S>;
+    <U>(selector: (state: ExtractState<S>) => U, equalityFn?: (a: U, b: U) => boolean): U;
+};
+type ExtractState<S> = S extends {
+    getState: () => infer T;
+} ? T : never;
+type WithoutCallSignature<T> = {
+    [K in keyof T]: T[K];
+};
 /**
- * @deprecated Use `typeof MyContext.useStore` instead.
+ * @deprecated Use `createStore` and `useStore` for context usage
  */
-export declare type UseContextStore<T extends State> = {
-    (): T;
-    <U>(selector: StateSelector<T, U>, equalityFn?: EqualityChecker<U>): U;
-};
-declare function createContext<TState extends State, TUseBoundStore extends UseBoundStore<TState> = UseBoundStore<TState>>(): {
-    Provider: ({ initialStore, createStore, children, }: {
-        /**
-         * @deprecated
-         */
-        initialStore?: TUseBoundStore;
-        createStore: () => TUseBoundStore;
+declare function createContext<S extends StoreApi<unknown>>(): {
+    Provider: ({ createStore, children, }: {
+        createStore: () => S;
         children: ReactNode;
-    }) => import("react").FunctionComponentElement<import("react").ProviderProps<TUseBoundStore | undefined>>;
-    useStore: UseContextStore<TState>;
-    useStoreApi: () => {
-        getState: TUseBoundStore['getState'];
-        setState: TUseBoundStore['setState'];
-        subscribe: TUseBoundStore['subscribe'];
-        destroy: TUseBoundStore['destroy'];
-    };
+    }) => ReactExports.FunctionComponentElement<ReactExports.ProviderProps<S | undefined>>;
+    useStore: UseContextStore<S>;
+    useStoreApi: () => WithoutCallSignature<S>;
 };
 export default createContext;

context.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var ReactExports = require('react');
+var traditional = require('zustand/traditional');
 
-var react = require('react');
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
 
+var createElement = ReactExports.createElement,
+  reactCreateContext = ReactExports.createContext,
+  useContext = ReactExports.useContext,
+  useMemo = ReactExports.useMemo,
+  useRef = ReactExports.useRef;
 function createContext() {
-  var ZustandContext = react.createContext(undefined);
-
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn("[DEPRECATED] `context` will be removed in a future version. Instead use `import { createStore, useStore } from 'zustand'`. See: https://github.com/pmndrs/zustand/discussions/1180.");
+  }
+  var ZustandContext = reactCreateContext(undefined);
   var Provider = function Provider(_ref) {
-    var initialStore = _ref.initialStore,
-        createStore = _ref.createStore,
-        children = _ref.children;
-    var storeRef = react.useRef();
-
+    var createStore = _ref.createStore,
+      children = _ref.children;
+    var storeRef = useRef();
     if (!storeRef.current) {
-      if (initialStore) {
-        console.warn('Provider initialStore is deprecated and will be removed in the next version.');
-
-        if (!createStore) {
-          createStore = function createStore() {
-            return initialStore;
-          };
-        }
-      }
-
       storeRef.current = createStore();
     }
-
-    return react.createElement(ZustandContext.Provider, {
+    return createElement(ZustandContext.Provider, {
       value: storeRef.current
     }, children);
   };
-
-  var useStore = function useStore(selector, equalityFn) {
-    if (equalityFn === void 0) {
-      equalityFn = Object.is;
-    }
-
-    var useProviderStore = react.useContext(ZustandContext);
-
-    if (!useProviderStore) {
+  var useContextStore = function useContextStore(selector, equalityFn) {
+    var store = useContext(ZustandContext);
+    if (!store) {
       throw new Error('Seems like you have not used zustand provider as an ancestor.');
     }
-
-    return useProviderStore(selector, equalityFn);
+    return traditional.useStoreWithEqualityFn(store, selector, equalityFn);
   };
-
   var useStoreApi = function useStoreApi() {
-    var useProviderStore = react.useContext(ZustandContext);
-
-    if (!useProviderStore) {
+    var store = useContext(ZustandContext);
+    if (!store) {
       throw new Error('Seems like you have not used zustand provider as an ancestor.');
     }
-
-    return react.useMemo(function () {
-      return {
-        getState: useProviderStore.getState,
-        setState: useProviderStore.setState,
-        subscribe: useProviderStore.subscribe,
-        destroy: useProviderStore.destroy
-      };
-    }, [useProviderStore]);
+    return useMemo(function () {
+      return _extends({}, store);
+    }, [store]);
   };
-
   return {
     Provider: Provider,
-    useStore: useStore,
+    useStore: useContextStore,
     useStoreApi: useStoreApi
@@ -73,2 +65,2 @@ };
 
-exports["default"] = createContext;
+module.exports = createContext;

esm/context.d.ts

@@ -1,27 +0,25 @@
-import { ReactNode } from 'react';
-import { EqualityChecker, State, StateSelector, UseBoundStore } from 'zustand';
+import ReactExports from 'react';
+import type { ReactNode } from 'react';
+import type { StoreApi } from 'zustand';
+type UseContextStore<S extends StoreApi<unknown>> = {
+    (): ExtractState<S>;
+    <U>(selector: (state: ExtractState<S>) => U, equalityFn?: (a: U, b: U) => boolean): U;
+};
+type ExtractState<S> = S extends {
+    getState: () => infer T;
+} ? T : never;
+type WithoutCallSignature<T> = {
+    [K in keyof T]: T[K];
+};
 /**
- * @deprecated Use `typeof MyContext.useStore` instead.
+ * @deprecated Use `createStore` and `useStore` for context usage
  */
-export declare type UseContextStore<T extends State> = {
-    (): T;
-    <U>(selector: StateSelector<T, U>, equalityFn?: EqualityChecker<U>): U;
-};
-declare function createContext<TState extends State, TUseBoundStore extends UseBoundStore<TState> = UseBoundStore<TState>>(): {
-    Provider: ({ initialStore, createStore, children, }: {
-        /**
-         * @deprecated
-         */
-        initialStore?: TUseBoundStore;
-        createStore: () => TUseBoundStore;
+declare function createContext<S extends StoreApi<unknown>>(): {
+    Provider: ({ createStore, children, }: {
+        createStore: () => S;
         children: ReactNode;
-    }) => import("react").FunctionComponentElement<import("react").ProviderProps<TUseBoundStore | undefined>>;
-    useStore: UseContextStore<TState>;
-    useStoreApi: () => {
-        getState: TUseBoundStore['getState'];
-        setState: TUseBoundStore['setState'];
-        subscribe: TUseBoundStore['subscribe'];
-        destroy: TUseBoundStore['destroy'];
-    };
+    }) => ReactExports.FunctionComponentElement<ReactExports.ProviderProps<S | undefined>>;
+    useStore: UseContextStore<S>;
+    useStoreApi: () => WithoutCallSignature<S>;
 };
 export default createContext;

esm/context.js

@@ -1,7 +0,19 @@
-import { createContext as createContext$1, useRef, createElement, useContext, useMemo } from 'react';
+import ReactExports from 'react';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
 
+const {
+  createElement,
+  createContext: reactCreateContext,
+  useContext,
+  useMemo,
+  useRef
+} = ReactExports;
 function createContext() {
-  const ZustandContext = createContext$1(void 0);
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[DEPRECATED] `context` will be removed in a future version. Instead use `import { createStore, useStore } from 'zustand'`. See: https://github.com/pmndrs/zustand/discussions/1180."
+    );
+  }
+  const ZustandContext = reactCreateContext(void 0);
   const Provider = ({
-    initialStore,
     createStore,
@@ -12,34 +24,35 @@ children
     if (!storeRef.current) {
-      if (initialStore) {
-        console.warn("Provider initialStore is deprecated and will be removed in the next version.");
-        if (!createStore) {
-          createStore = () => initialStore;
-        }
-      }
       storeRef.current = createStore();
     }
-    return createElement(ZustandContext.Provider, { value: storeRef.current }, children);
+    return createElement(
+      ZustandContext.Provider,
+      { value: storeRef.current },
+      children
+    );
   };
-  const useStore = (selector, equalityFn = Object.is) => {
-    const useProviderStore = useContext(ZustandContext);
-    if (!useProviderStore) {
-      throw new Error("Seems like you have not used zustand provider as an ancestor.");
+  const useContextStore = (selector, equalityFn) => {
+    const store = useContext(ZustandContext);
+    if (!store) {
+      throw new Error(
+        "Seems like you have not used zustand provider as an ancestor."
+      );
     }
-    return useProviderStore(selector, equalityFn);
+    return useStoreWithEqualityFn(
+      store,
+      selector,
+      equalityFn
+    );
   };
   const useStoreApi = () => {
-    const useProviderStore = useContext(ZustandContext);
-    if (!useProviderStore) {
-      throw new Error("Seems like you have not used zustand provider as an ancestor.");
+    const store = useContext(ZustandContext);
+    if (!store) {
+      throw new Error(
+        "Seems like you have not used zustand provider as an ancestor."
+      );
     }
-    return useMemo(() => ({
-      getState: useProviderStore.getState,
-      setState: useProviderStore.setState,
-      subscribe: useProviderStore.subscribe,
-      destroy: useProviderStore.destroy
-    }), [useProviderStore]);
+    return useMemo(() => ({ ...store }), [store]);
   };
   return {
     Provider,
-    useStore,
+    useStore: useContextStore,
     useStoreApi
@@ -46,0 +59,0 @@ };

esm/index.js

@@ -1,111 +0,47 @@
-import { useReducer, useRef, useDebugValue, useEffect, useLayoutEffect } from 'react';
+import { createStore } from 'zustand/vanilla';
+export * from 'zustand/vanilla';
+import ReactExports from 'react';
+import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector.js';
 
-function createStore(createState) {
-  let state;
-  const listeners = /* @__PURE__ */ new Set();
-  const setState = (partial, replace) => {
-    const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (nextState !== state) {
-      const previousState = state;
-      state = replace ? nextState : Object.assign({}, state, nextState);
-      listeners.forEach((listener) => listener(state, previousState));
-    }
-  };
-  const getState = () => state;
-  const subscribeWithSelector = (listener, selector = getState, equalityFn = Object.is) => {
-    console.warn("[DEPRECATED] Please use `subscribeWithSelector` middleware");
-    let currentSlice = selector(state);
-    function listenerToAdd() {
-      const nextSlice = selector(state);
-      if (!equalityFn(currentSlice, nextSlice)) {
-        const previousSlice = currentSlice;
-        listener(currentSlice = nextSlice, previousSlice);
-      }
-    }
-    listeners.add(listenerToAdd);
-    return () => listeners.delete(listenerToAdd);
-  };
-  const subscribe = (listener, selector, equalityFn) => {
-    if (selector || equalityFn) {
-      return subscribeWithSelector(listener, selector, equalityFn);
-    }
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  };
-  const destroy = () => listeners.clear();
-  const api = { setState, getState, subscribe, destroy };
-  state = createState(setState, getState, api);
-  return api;
+const { useDebugValue } = ReactExports;
+const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
+let didWarnAboutEqualityFn = false;
+function useStore(api, selector = api.getState, equalityFn) {
+  if (process.env.NODE_ENV !== "production" && equalityFn && !didWarnAboutEqualityFn) {
+    console.warn(
+      "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
+    );
+    didWarnAboutEqualityFn = true;
+  }
+  const slice = useSyncExternalStoreWithSelector(
+    api.subscribe,
+    api.getState,
+    api.getServerState || api.getState,
+    selector,
+    equalityFn
+  );
+  useDebugValue(slice);
+  return slice;
 }
-
-const isSSR = typeof window === "undefined" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
-function create(createState) {
+const createImpl = (createState) => {
+  if (process.env.NODE_ENV !== "production" && typeof createState !== "function") {
+    console.warn(
+      "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
+    );
+  }
   const api = typeof createState === "function" ? createStore(createState) : createState;
-  const useStore = (selector = api.getState, equalityFn = Object.is) => {
-    const [, forceUpdate] = useReducer((c) => c + 1, 0);
-    const state = api.getState();
-    const stateRef = useRef(state);
-    const selectorRef = useRef(selector);
-    const equalityFnRef = useRef(equalityFn);
-    const erroredRef = useRef(false);
-    const currentSliceRef = useRef();
-    if (currentSliceRef.current === void 0) {
-      currentSliceRef.current = selector(state);
-    }
-    let newStateSlice;
-    let hasNewStateSlice = false;
-    if (stateRef.current !== state || selectorRef.current !== selector || equalityFnRef.current !== equalityFn || erroredRef.current) {
-      newStateSlice = selector(state);
-      hasNewStateSlice = !equalityFn(currentSliceRef.current, newStateSlice);
-    }
-    useIsomorphicLayoutEffect(() => {
-      if (hasNewStateSlice) {
-        currentSliceRef.current = newStateSlice;
-      }
-      stateRef.current = state;
-      selectorRef.current = selector;
-      equalityFnRef.current = equalityFn;
-      erroredRef.current = false;
-    });
-    const stateBeforeSubscriptionRef = useRef(state);
-    useIsomorphicLayoutEffect(() => {
-      const listener = () => {
-        try {
-          const nextState = api.getState();
-          const nextStateSlice = selectorRef.current(nextState);
-          if (!equalityFnRef.current(currentSliceRef.current, nextStateSlice)) {
-            stateRef.current = nextState;
-            currentSliceRef.current = nextStateSlice;
-            forceUpdate();
-          }
-        } catch (error) {
-          erroredRef.current = true;
-          forceUpdate();
-        }
-      };
-      const unsubscribe = api.subscribe(listener);
-      if (api.getState() !== stateBeforeSubscriptionRef.current) {
-        listener();
-      }
-      return unsubscribe;
-    }, []);
-    const sliceToReturn = hasNewStateSlice ? newStateSlice : currentSliceRef.current;
-    useDebugValue(sliceToReturn);
-    return sliceToReturn;
-  };
-  Object.assign(useStore, api);
-  useStore[Symbol.iterator] = function() {
-    console.warn("[useStore, api] = create() is deprecated and will be removed in v4");
-    const items = [useStore, api];
-    return {
-      next() {
-        const done = items.length <= 0;
-        return { value: items.shift(), done };
-      }
-    };
-  };
-  return useStore;
-}
+  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+const create = (createState) => createState ? createImpl(createState) : createImpl;
+var react = (createState) => {
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`."
+    );
+  }
+  return create(createState);
+};
 
-export { create as default };
+export { create, react as default, useStore };

esm/middleware.js

@@ -1,18 +0,2 @@
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-const redux = (reducer, initial) => (set, get, api) => {
+const reduxImpl = (reducer, initial) => (set, _get, api) => {
   api.dispatch = (action) => {
@@ -23,99 +7,138 @@ set((state) => reducer(state, action), false, action);
   api.dispatchFromDevtools = true;
-  return __spreadValues$1({ dispatch: (...a) => api.dispatch(...a) }, initial);
+  return { dispatch: (...a) => api.dispatch(...a), ...initial };
 };
+const redux = reduxImpl;
 
-function devtools(fn, options) {
-  return (set, get, api) => {
-    var _a;
-    let didWarnAboutNameDeprecation = false;
-    if (typeof options === "string" && !didWarnAboutNameDeprecation) {
-      console.warn("[zustand devtools middleware]: passing `name` as directly will be not allowed in next majorpass the `name` in an object `{ name: ... }` instead");
-      didWarnAboutNameDeprecation = true;
+const trackedConnections = /* @__PURE__ */ new Map();
+const getTrackedConnectionState = (name) => {
+  const api = trackedConnections.get(name);
+  if (!api)
+    return {};
+  return Object.fromEntries(
+    Object.entries(api.stores).map(([key, api2]) => [key, api2.getState()])
+  );
+};
+const extractConnectionInformation = (store, extensionConnector, options) => {
+  if (store === void 0) {
+    return {
+      type: "untracked",
+      connection: extensionConnector.connect(options)
+    };
+  }
+  const existingConnection = trackedConnections.get(options.name);
+  if (existingConnection) {
+    return { type: "tracked", store, ...existingConnection };
+  }
+  const newConnection = {
+    connection: extensionConnector.connect(options),
+    stores: {}
+  };
+  trackedConnections.set(options.name, newConnection);
+  return { type: "tracked", store, ...newConnection };
+};
+const devtoolsImpl = (fn, devtoolsOptions = {}) => (set, get, api) => {
+  const { enabled, anonymousActionType, store, ...options } = devtoolsOptions;
+  let extensionConnector;
+  try {
+    extensionConnector = (enabled != null ? enabled : process.env.NODE_ENV !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
+  } catch (e) {
+  }
+  if (!extensionConnector) {
+    if (process.env.NODE_ENV !== "production" && enabled) {
+      console.warn(
+        "[zustand devtools middleware] Please install/enable Redux devtools extension"
+      );
     }
-    const devtoolsOptions = options === void 0 ? { name: void 0, anonymousActionType: void 0 } : typeof options === "string" ? { name: options } : options;
-    if (typeof ((_a = devtoolsOptions == null ? void 0 : devtoolsOptions.serialize) == null ? void 0 : _a.options) !== "undefined") {
-      console.warn("[zustand devtools middleware]: `serialize.options` is deprecated, just use `serialize`");
+    return fn(set, get, api);
+  }
+  const { connection, ...connectionInformation } = extractConnectionInformation(store, extensionConnector, options);
+  let isRecording = true;
+  api.setState = (state, replace, nameOrAction) => {
+    const r = set(state, replace);
+    if (!isRecording)
+      return r;
+    const action = nameOrAction === void 0 ? { type: anonymousActionType || "anonymous" } : typeof nameOrAction === "string" ? { type: nameOrAction } : nameOrAction;
+    if (store === void 0) {
+      connection == null ? void 0 : connection.send(action, get());
+      return r;
     }
-    let extensionConnector;
-    try {
-      extensionConnector = window.__REDUX_DEVTOOLS_EXTENSION__ || window.top.__REDUX_DEVTOOLS_EXTENSION__;
-    } catch {
-    }
-    if (!extensionConnector) {
-      if ((import.meta.env && import.meta.env.MODE) !== "production" && typeof window !== "undefined") {
-        console.warn("[zustand devtools middleware] Please install/enable Redux devtools extension");
-      }
-      return fn(set, get, api);
-    }
-    let extension = Object.create(extensionConnector.connect(devtoolsOptions));
-    let didWarnAboutDevtools = false;
-    Object.defineProperty(api, "devtools", {
-      get: () => {
-        if (!didWarnAboutDevtools) {
-          console.warn("[zustand devtools middleware] `devtools` property on the store is deprecated it will be removed in the next major.\nYou shouldn't interact with the extension directly. But in case you still want to you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly");
-          didWarnAboutDevtools = true;
-        }
-        return extension;
+    connection == null ? void 0 : connection.send(
+      {
+        ...action,
+        type: `${store}/${action.type}`
       },
-      set: (value) => {
-        if (!didWarnAboutDevtools) {
-          console.warn("[zustand devtools middleware] `api.devtools` is deprecated, it will be removed in the next major.\nYou shouldn't interact with the extension directly. But in case you still want to you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly");
-          didWarnAboutDevtools = true;
-        }
-        extension = value;
+      {
+        ...getTrackedConnectionState(options.name),
+        [store]: api.getState()
       }
-    });
-    let didWarnAboutPrefix = false;
-    Object.defineProperty(extension, "prefix", {
-      get: () => {
-        if (!didWarnAboutPrefix) {
-          console.warn("[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\nWe no longer prefix the actions/names" + devtoolsOptions.name === void 0 ? ", pass the `name` option to create a separate instance of devtools for each store." : ", because the `name` option already creates a separate instance of devtools for each store.");
-          didWarnAboutPrefix = true;
-        }
-        return "";
-      },
-      set: () => {
-        if (!didWarnAboutPrefix) {
-          console.warn("[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\nWe no longer prefix the actions/names" + devtoolsOptions.name === void 0 ? ", pass the `name` option to create a separate instance of devtools for each store." : ", because the `name` option already creates a separate instance of devtools for each store.");
-          didWarnAboutPrefix = true;
-        }
+    );
+    return r;
+  };
+  const setStateFromDevtools = (...a) => {
+    const originalIsRecording = isRecording;
+    isRecording = false;
+    set(...a);
+    isRecording = originalIsRecording;
+  };
+  const initialState = fn(api.setState, get, api);
+  if (connectionInformation.type === "untracked") {
+    connection == null ? void 0 : connection.init(initialState);
+  } else {
+    connectionInformation.stores[connectionInformation.store] = api;
+    connection == null ? void 0 : connection.init(
+      Object.fromEntries(
+        Object.entries(connectionInformation.stores).map(([key, store2]) => [
+          key,
+          key === connectionInformation.store ? initialState : store2.getState()
+        ])
+      )
+    );
+  }
+  if (api.dispatchFromDevtools && typeof api.dispatch === "function") {
+    let didWarnAboutReservedActionType = false;
+    const originalDispatch = api.dispatch;
+    api.dispatch = (...a) => {
+      if (process.env.NODE_ENV !== "production" && a[0].type === "__setState" && !didWarnAboutReservedActionType) {
+        console.warn(
+          '[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'
+        );
+        didWarnAboutReservedActionType = true;
       }
-    });
-    let isRecording = true;
-    api.setState = (state, replace, nameOrAction) => {
-      set(state, replace);
-      if (!isRecording)
-        return;
-      extension.send(nameOrAction === void 0 ? { type: devtoolsOptions.anonymousActionType || "anonymous" } : typeof nameOrAction === "string" ? { type: nameOrAction } : nameOrAction, get());
+      originalDispatch(...a);
     };
-    const setStateFromDevtools = (...a) => {
-      const originalIsRecording = isRecording;
-      isRecording = false;
-      set(...a);
-      isRecording = originalIsRecording;
-    };
-    const initialState = fn(api.setState, get, api);
-    extension.init(initialState);
-    if (api.dispatchFromDevtools && typeof api.dispatch === "function") {
-      let didWarnAboutReservedActionType = false;
-      const originalDispatch = api.dispatch;
-      api.dispatch = (...a) => {
-        if (a[0].type === "__setState" && !didWarnAboutReservedActionType) {
-          console.warn('[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.');
-          didWarnAboutReservedActionType = true;
+  }
+  connection.subscribe((message) => {
+    var _a;
+    switch (message.type) {
+      case "ACTION":
+        if (typeof message.payload !== "string") {
+          console.error(
+            "[zustand devtools middleware] Unsupported action format"
+          );
+          return;
         }
-        originalDispatch(...a);
-      };
-    }
-    extension.subscribe((message) => {
-      var _a2;
-      switch (message.type) {
-        case "ACTION":
-          if (typeof message.payload !== "string") {
-            console.error("[zustand devtools middleware] Unsupported action format");
-            return;
-          }
-          return parseJsonThen(message.payload, (action) => {
+        return parseJsonThen(
+          message.payload,
+          (action) => {
             if (action.type === "__setState") {
-              setStateFromDevtools(action.state);
+              if (store === void 0) {
+                setStateFromDevtools(action.state);
+                return;
+              }
+              if (Object.keys(action.state).length !== 1) {
+                console.error(
+                  `
+                    [zustand devtools middleware] Unsupported __setState action format. 
+                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
+                    and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
+                    `
+                );
+              }
+              const stateFromDevtools = action.state[store];
+              if (stateFromDevtools === void 0 || stateFromDevtools === null) {
+                return;
+              }
+              if (JSON.stringify(api.getState()) !== JSON.stringify(stateFromDevtools)) {
+                setStateFromDevtools(stateFromDevtools);
+              }
               return;
@@ -128,38 +151,65 @@ }
             api.dispatch(action);
-          });
-        case "DISPATCH":
-          switch (message.payload.type) {
-            case "RESET":
-              setStateFromDevtools(initialState);
-              return extension.init(api.getState());
-            case "COMMIT":
-              return extension.init(api.getState());
-            case "ROLLBACK":
-              return parseJsonThen(message.state, (state) => {
+          }
+        );
+      case "DISPATCH":
+        switch (message.payload.type) {
+          case "RESET":
+            setStateFromDevtools(initialState);
+            if (store === void 0) {
+              return connection == null ? void 0 : connection.init(api.getState());
+            }
+            return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
+          case "COMMIT":
+            if (store === void 0) {
+              connection == null ? void 0 : connection.init(api.getState());
+              return;
+            }
+            return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
+          case "ROLLBACK":
+            return parseJsonThen(message.state, (state) => {
+              if (store === void 0) {
                 setStateFromDevtools(state);
-                extension.init(api.getState());
-              });
-            case "JUMP_TO_STATE":
-            case "JUMP_TO_ACTION":
-              return parseJsonThen(message.state, (state) => {
+                connection == null ? void 0 : connection.init(api.getState());
+                return;
+              }
+              setStateFromDevtools(state[store]);
+              connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
+            });
+          case "JUMP_TO_STATE":
+          case "JUMP_TO_ACTION":
+            return parseJsonThen(message.state, (state) => {
+              if (store === void 0) {
                 setStateFromDevtools(state);
-              });
-            case "IMPORT_STATE": {
-              const { nextLiftedState } = message.payload;
-              const lastComputedState = (_a2 = nextLiftedState.computedStates.slice(-1)[0]) == null ? void 0 : _a2.state;
-              if (!lastComputedState)
                 return;
+              }
+              if (JSON.stringify(api.getState()) !== JSON.stringify(state[store])) {
+                setStateFromDevtools(state[store]);
+              }
+            });
+          case "IMPORT_STATE": {
+            const { nextLiftedState } = message.payload;
+            const lastComputedState = (_a = nextLiftedState.computedStates.slice(-1)[0]) == null ? void 0 : _a.state;
+            if (!lastComputedState)
+              return;
+            if (store === void 0) {
               setStateFromDevtools(lastComputedState);
-              extension.send(null, nextLiftedState);
-              return;
+            } else {
+              setStateFromDevtools(lastComputedState[store]);
             }
-            case "PAUSE_RECORDING":
-              return isRecording = !isRecording;
+            connection == null ? void 0 : connection.send(
+              null,
+              // FIXME no-any
+              nextLiftedState
+            );
+            return;
           }
-          return;
-      }
-    });
-    return initialState;
-  };
-}
+          case "PAUSE_RECORDING":
+            return isRecording = !isRecording;
+        }
+        return;
+    }
+  });
+  return initialState;
+};
+const devtools = devtoolsImpl;
 const parseJsonThen = (stringified, f) => {
@@ -170,3 +220,6 @@ let parsed;
   } catch (e) {
-    console.error("[zustand devtools middleware] Could not parse the received json", e);
+    console.error(
+      "[zustand devtools middleware] Could not parse the received json",
+      e
+    );
   }
@@ -177,3 +230,3 @@ if (parsed !== void 0)
 
-const subscribeWithSelector = (fn) => (set, get, api) => {
+const subscribeWithSelectorImpl = (fn) => (set, get, api) => {
   const origSubscribe = api.subscribe;
@@ -201,21 +254,36 @@ api.subscribe = (selector, optListener, options) => {
 };
+const subscribeWithSelector = subscribeWithSelectorImpl;
 
-const combine = (initialState, create) => (set, get, api) => Object.assign({}, initialState, create(set, get, api));
+const combine = (initialState, create) => (...a) => Object.assign({}, initialState, create(...a));
 
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
+function createJSONStorage(getStorage, options) {
+  let storage;
+  try {
+    storage = getStorage();
+  } catch (e) {
+    return;
+  }
+  const persistStorage = {
+    getItem: (name) => {
+      var _a;
+      const parse = (str2) => {
+        if (str2 === null) {
+          return null;
+        }
+        return JSON.parse(str2, options == null ? void 0 : options.reviver);
+      };
+      const str = (_a = storage.getItem(name)) != null ? _a : null;
+      if (str instanceof Promise) {
+        return str.then(parse);
+      }
+      return parse(str);
+    },
+    setItem: (name, newValue) => storage.setItem(
+      name,
+      JSON.stringify(newValue, options == null ? void 0 : options.replacer)
+    ),
+    removeItem: (name) => storage.removeItem(name)
+  };
+  return persistStorage;
+}
 const toThenable = (fn) => (input) => {
@@ -246,4 +314,4 @@ try {
 };
-const persist = (config, baseOptions) => (set, get, api) => {
-  let options = __spreadValues({
+const oldImpl = (config, baseOptions) => (set, get, api) => {
+  let options = {
     getStorage: () => localStorage,
@@ -254,7 +322,8 @@ serialize: JSON.stringify,
     version: 0,
-    merge: (persistedState, currentState) => __spreadValues(__spreadValues({}, currentState), persistedState)
-  }, baseOptions);
-  if (options.blacklist || options.whitelist) {
-    console.warn(`The ${options.blacklist ? "blacklist" : "whitelist"} option is deprecated and will be removed in the next version. Please use the 'partialize' option instead.`);
-  }
+    merge: (persistedState, currentState) => ({
+      ...currentState,
+      ...persistedState
+    }),
+    ...baseOptions
+  };
   let hasHydrated = false;
@@ -269,23 +338,20 @@ const hydrationListeners = /* @__PURE__ */ new Set();
   if (!storage) {
-    return config((...args) => {
-      console.warn(`[zustand persist middleware] Unable to update item '${options.name}', the given storage is currently unavailable.`);
-      set(...args);
-    }, get, api);
-  } else if (!storage.removeItem) {
-    console.warn(`[zustand persist middleware] The given storage for item '${options.name}' does not contain a 'removeItem' method, which will be required in v4.`);
+    return config(
+      (...args) => {
+        console.warn(
+          `[zustand persist middleware] Unable to update item '${options.name}', the given storage is currently unavailable.`
+        );
+        set(...args);
+      },
+      get,
+      api
+    );
   }
   const thenableSerialize = toThenable(options.serialize);
   const setItem = () => {
-    const state = options.partialize(__spreadValues({}, get()));
-    if (options.whitelist) {
-      Object.keys(state).forEach((key) => {
-        var _a;
-        !((_a = options.whitelist) == null ? void 0 : _a.includes(key)) && delete state[key];
-      });
-    }
-    if (options.blacklist) {
-      options.blacklist.forEach((key) => delete state[key]);
-    }
+    const state = options.partialize({ ...get() });
     let errorInSync;
-    const thenable = thenableSerialize({ state, version: options.version }).then((serializedValue) => storage.setItem(options.name, serializedValue)).catch((e) => {
+    const thenable = thenableSerialize({ state, version: options.version }).then(
+      (serializedValue) => storage.setItem(options.name, serializedValue)
+    ).catch((e) => {
       errorInSync = e;
@@ -303,6 +369,10 @@ });
   };
-  const configResult = config((...args) => {
-    set(...args);
-    void setItem();
-  }, get, api);
+  const configResult = config(
+    (...args) => {
+      set(...args);
+      void setItem();
+    },
+    get,
+    api
+  );
   let stateFromStorage;
@@ -324,5 +394,10 @@ const hydrate = () => {
           if (options.migrate) {
-            return options.migrate(deserializedStorageValue.state, deserializedStorageValue.version);
+            return options.migrate(
+              deserializedStorageValue.state,
+              deserializedStorageValue.version
+            );
           }
-          console.error(`State loaded from storage couldn't be migrated since no migrate function was provided`);
+          console.error(
+            `State loaded from storage couldn't be migrated since no migrate function was provided`
+          );
         } else {
@@ -334,3 +409,6 @@ return deserializedStorageValue.state;
       var _a2;
-      stateFromStorage = options.merge(migratedState, (_a2 = get()) != null ? _a2 : configResult);
+      stateFromStorage = options.merge(
+        migratedState,
+        (_a2 = get()) != null ? _a2 : configResult
+      );
       set(stateFromStorage, true);
@@ -348,3 +426,6 @@ return setItem();
     setOptions: (newOptions) => {
-      options = __spreadValues(__spreadValues({}, options), newOptions);
+      options = {
+        ...options,
+        ...newOptions
+      };
       if (newOptions.getStorage) {
@@ -355,5 +436,5 @@ storage = newOptions.getStorage();
     clearStorage: () => {
-      var _a;
-      (_a = storage == null ? void 0 : storage.removeItem) == null ? void 0 : _a.call(storage, options.name);
+      storage == null ? void 0 : storage.removeItem(options.name);
     },
+    getOptions: () => options,
     rehydrate: () => hydrate(),
@@ -377,3 +458,140 @@ hasHydrated: () => hasHydrated,
 };
+const newImpl = (config, baseOptions) => (set, get, api) => {
+  let options = {
+    storage: createJSONStorage(() => localStorage),
+    partialize: (state) => state,
+    version: 0,
+    merge: (persistedState, currentState) => ({
+      ...currentState,
+      ...persistedState
+    }),
+    ...baseOptions
+  };
+  let hasHydrated = false;
+  const hydrationListeners = /* @__PURE__ */ new Set();
+  const finishHydrationListeners = /* @__PURE__ */ new Set();
+  let storage = options.storage;
+  if (!storage) {
+    return config(
+      (...args) => {
+        console.warn(
+          `[zustand persist middleware] Unable to update item '${options.name}', the given storage is currently unavailable.`
+        );
+        set(...args);
+      },
+      get,
+      api
+    );
+  }
+  const setItem = () => {
+    const state = options.partialize({ ...get() });
+    return storage.setItem(options.name, {
+      state,
+      version: options.version
+    });
+  };
+  const savedSetState = api.setState;
+  api.setState = (state, replace) => {
+    savedSetState(state, replace);
+    void setItem();
+  };
+  const configResult = config(
+    (...args) => {
+      set(...args);
+      void setItem();
+    },
+    get,
+    api
+  );
+  let stateFromStorage;
+  const hydrate = () => {
+    var _a, _b;
+    if (!storage)
+      return;
+    hasHydrated = false;
+    hydrationListeners.forEach((cb) => {
+      var _a2;
+      return cb((_a2 = get()) != null ? _a2 : configResult);
+    });
+    const postRehydrationCallback = ((_b = options.onRehydrateStorage) == null ? void 0 : _b.call(options, (_a = get()) != null ? _a : configResult)) || void 0;
+    return toThenable(storage.getItem.bind(storage))(options.name).then((deserializedStorageValue) => {
+      if (deserializedStorageValue) {
+        if (typeof deserializedStorageValue.version === "number" && deserializedStorageValue.version !== options.version) {
+          if (options.migrate) {
+            return options.migrate(
+              deserializedStorageValue.state,
+              deserializedStorageValue.version
+            );
+          }
+          console.error(
+            `State loaded from storage couldn't be migrated since no migrate function was provided`
+          );
+        } else {
+          return deserializedStorageValue.state;
+        }
+      }
+    }).then((migratedState) => {
+      var _a2;
+      stateFromStorage = options.merge(
+        migratedState,
+        (_a2 = get()) != null ? _a2 : configResult
+      );
+      set(stateFromStorage, true);
+      return setItem();
+    }).then(() => {
+      postRehydrationCallback == null ? void 0 : postRehydrationCallback(stateFromStorage, void 0);
+      stateFromStorage = get();
+      hasHydrated = true;
+      finishHydrationListeners.forEach((cb) => cb(stateFromStorage));
+    }).catch((e) => {
+      postRehydrationCallback == null ? void 0 : postRehydrationCallback(void 0, e);
+    });
+  };
+  api.persist = {
+    setOptions: (newOptions) => {
+      options = {
+        ...options,
+        ...newOptions
+      };
+      if (newOptions.storage) {
+        storage = newOptions.storage;
+      }
+    },
+    clearStorage: () => {
+      storage == null ? void 0 : storage.removeItem(options.name);
+    },
+    getOptions: () => options,
+    rehydrate: () => hydrate(),
+    hasHydrated: () => hasHydrated,
+    onHydrate: (cb) => {
+      hydrationListeners.add(cb);
+      return () => {
+        hydrationListeners.delete(cb);
+      };
+    },
+    onFinishHydration: (cb) => {
+      finishHydrationListeners.add(cb);
+      return () => {
+        finishHydrationListeners.delete(cb);
+      };
+    }
+  };
+  if (!options.skipHydration) {
+    hydrate();
+  }
+  return stateFromStorage || configResult;
+};
+const persistImpl = (config, baseOptions) => {
+  if ("getStorage" in baseOptions || "serialize" in baseOptions || "deserialize" in baseOptions) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        "[DEPRECATED] `getStorage`, `serialize` and `deserialize` options are deprecated. Use `storage` option instead."
+      );
+    }
+    return oldImpl(config, baseOptions);
+  }
+  return newImpl(config, baseOptions);
+};
+const persist = persistImpl;
 
-export { combine, devtools, persist, redux, subscribeWithSelector };
+export { combine, createJSONStorage, devtools, persist, redux, subscribeWithSelector };

esm/middleware/combine.d.ts

@@ -1,5 +0,5 @@
-import { GetState, SetState, StoreApi } from '../vanilla';
-import { NamedSet } from './devtools';
-declare type Combine<T, U> = Omit<T, keyof U> & U;
-export declare const combine: <PrimaryState extends object, SecondaryState extends object>(initialState: PrimaryState, create: (set: SetState<PrimaryState> & NamedSet<PrimaryState>, get: GetState<PrimaryState>, api: StoreApi<PrimaryState>) => SecondaryState) => (set: SetState<Combine<PrimaryState, SecondaryState>>, get: GetState<Combine<PrimaryState, SecondaryState>>, api: StoreApi<Combine<PrimaryState, SecondaryState>>) => Combine<PrimaryState, SecondaryState>;
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla';
+type Write<T, U> = Omit<T, keyof U> & U;
+type Combine = <T extends object, U extends object, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initialState: T, additionalStateCreator: StateCreator<T, Mps, Mcs, U>) => StateCreator<Write<T, U>, Mps, Mcs>;
+export declare const combine: Combine;
 export {};

esm/middleware/devtools.d.ts

@@ -1,2 +0,7 @@
-import { GetState, PartialState, SetState, State, StoreApi } from '../vanilla';
+import type { StateCreator, StoreApi, StoreMutatorIdentifier } from '../vanilla';
+type Config = Parameters<(Window extends {
+    __REDUX_DEVTOOLS_EXTENSION__?: infer T;
+} ? T : {
+    connect: (param: any) => any;
+})['connect']>[0];
 declare module '../vanilla' {
@@ -7,100 +12,39 @@ interface StoreMutators<S, A> {
 }
-declare type Write<T extends object, U extends object> = Omit<T, keyof U> & U;
-declare type Cast<T, U> = T extends U ? T : U;
-declare type WithDevtools<S> = Write<Cast<S, object>, StoreSetStateWithAction<S>> & {
-    /**
-     * @deprecated `devtools` property on the store is deprecated
-     * it will be removed in the next major.
-     * You shouldn't interact with the extension directly. But in case you still want to
-     * you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly
-     */
-    devtools?: DevtoolsType;
-};
-declare type StoreSetStateWithAction<S> = S extends {
-    getState: () => infer T;
-} ? S & {
-    setState: NamedSet<Cast<T, object>>;
+type Cast<T, U> = T extends U ? T : U;
+type Write<T, U> = Omit<T, keyof U> & U;
+type TakeTwo<T> = T extends {
+    length: 0;
+} ? [undefined, undefined] : T extends {
+    length: 1;
+} ? [...a0: Cast<T, unknown[]>, a1: undefined] : T extends {
+    length: 0 | 1;
+} ? [...a0: Cast<T, unknown[]>, a1: undefined] : T extends {
+    length: 2;
+} ? T : T extends {
+    length: 1 | 2;
+} ? T : T extends {
+    length: 0 | 1 | 2;
+} ? T : T extends [infer A0, infer A1, ...unknown[]] ? [A0, A1] : T extends [infer A0, (infer A1)?, ...unknown[]] ? [A0, A1?] : T extends [(infer A0)?, (infer A1)?, ...unknown[]] ? [A0?, A1?] : never;
+type WithDevtools<S> = Write<S, StoreDevtools<S>>;
+type StoreDevtools<S> = S extends {
+    setState: (...a: infer Sa) => infer Sr;
+} ? {
+    setState<A extends string | {
+        type: string;
+    }>(...a: [...a: TakeTwo<Sa>, action?: A]): Sr;
 } : never;
-interface DevtoolsOptions {
+export interface DevtoolsOptions extends Config {
     name?: string;
+    enabled?: boolean;
     anonymousActionType?: string;
-    serialize?: boolean | {
-        date?: boolean;
-        regex?: boolean;
-        undefined?: boolean;
-        nan?: boolean;
-        infinity?: boolean;
-        error?: boolean;
-        symbol?: boolean;
-        map?: boolean;
-        set?: boolean;
-        /**
-         * @deprecated serialize.options is deprecated, just use serialize
-         */
-        options: boolean | {
-            date?: boolean;
-            regex?: boolean;
-            undefined?: boolean;
-            nan?: boolean;
-            infinity?: boolean;
-            error?: boolean;
-            symbol?: boolean;
-            map?: boolean;
-            set?: boolean;
-        };
-    };
+    store?: string;
 }
-declare type DevtoolsType = {
-    /**
-     * @deprecated along with `api.devtools`, `api.devtools.prefix` is deprecated.
-     * We no longer prefix the actions/names, because the `name` option already
-     * creates a separate instance of devtools for each store.
-     */
-    prefix: string;
-    subscribe: (dispatch: any) => () => void;
-    unsubscribe: () => void;
-    send: {
-        (action: string | {
-            type: unknown;
-        }, state: any): void;
-        (action: null, liftedState: any): void;
-    };
-    init: (state: any) => void;
-    error: (payload: any) => void;
-};
-export declare type NamedSet<T extends State> = {
-    <K1 extends keyof T, K2 extends keyof T = K1, K3 extends keyof T = K2, K4 extends keyof T = K3>(partial: PartialState<T, K1, K2, K3, K4>, replace?: boolean, name?: string | {
-        type: unknown;
-    }): void;
-};
-/**
- * @deprecated Use `Mutate<StoreApi<T>, [["zustand/devtools", never]]>`.
- * See tests/middlewaresTypes.test.tsx for usage with multiple middlewares.
- */
-export declare type StoreApiWithDevtools<T extends State> = StoreApi<T> & {
-    setState: NamedSet<T>;
-    /**
-     * @deprecated `devtools` property on the store is deprecated
-     * it will be removed in the next major.
-     * You shouldn't interact with the extension directly. But in case you still want to
-     * you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly
-     */
-    devtools?: DevtoolsType;
-};
-export declare function devtools<S extends State, CustomSetState extends SetState<S>, CustomGetState extends GetState<S>, CustomStoreApi extends StoreApi<S>>(fn: (set: NamedSet<S>, get: CustomGetState, api: CustomStoreApi) => S): (set: CustomSetState, get: CustomGetState, api: CustomStoreApi & StoreApiWithDevtools<S> & {
-    dispatch?: unknown;
-    dispatchFromDevtools?: boolean;
-}) => S;
-/**
- * @deprecated Passing `name` as directly will be not allowed in next major.
- * Pass the `name` in an object `{ name: ... }` instead
- */
-export declare function devtools<S extends State, CustomSetState extends SetState<S> = SetState<S>, CustomGetState extends GetState<S> = GetState<S>, CustomStoreApi extends StoreApi<S> = StoreApi<S>>(fn: (set: NamedSet<S>, get: CustomGetState, api: CustomStoreApi) => S, options?: string): (set: CustomSetState, get: CustomGetState, api: CustomStoreApi & StoreApiWithDevtools<S> & {
-    dispatch?: unknown;
-    dispatchFromDevtools?: boolean;
-}) => S;
-export declare function devtools<S extends State, CustomSetState extends SetState<S>, CustomGetState extends GetState<S>, CustomStoreApi extends StoreApi<S>>(fn: (set: NamedSet<S>, get: CustomGetState, api: CustomStoreApi) => S, options?: DevtoolsOptions): (set: CustomSetState, get: CustomGetState, api: CustomStoreApi & StoreApiWithDevtools<S> & {
-    dispatch?: unknown;
-    dispatchFromDevtools?: boolean;
-}) => S;
+type Devtools = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [...Mps, ['zustand/devtools', never]], Mcs>, devtoolsOptions?: DevtoolsOptions) => StateCreator<T, Mps, [['zustand/devtools', never], ...Mcs]>;
+declare module '../vanilla' {
+    interface StoreMutators<S, A> {
+        'zustand/devtools': WithDevtools<S>;
+    }
+}
+export type NamedSet<T> = WithDevtools<StoreApi<T>>['setState'];
+export declare const devtools: Devtools;
 export {};

esm/middleware/persist.d.ts

@@ -1,18 +0,26 @@
-import { GetState, SetState, State, StoreApi } from '../vanilla';
-declare type DeepPartial<T> = {
-    [P in keyof T]?: DeepPartial<T[P]>;
-};
-export declare type StateStorage = {
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla';
+export interface StateStorage {
     getItem: (name: string) => string | null | Promise<string | null>;
     setItem: (name: string, value: string) => void | Promise<void>;
-    removeItem?: (name: string) => void | Promise<void>;
-};
-declare type StorageValue<S> = {
-    state: DeepPartial<S>;
+    removeItem: (name: string) => void | Promise<void>;
+}
+export type StorageValue<S> = {
+    state: S;
     version?: number;
 };
-export declare type PersistOptions<S, PersistedState extends Partial<S> = Partial<S>> = {
+export interface PersistStorage<S> {
+    getItem: (name: string) => StorageValue<S> | null | Promise<StorageValue<S> | null>;
+    setItem: (name: string, value: StorageValue<S>) => void | Promise<void>;
+    removeItem: (name: string) => void | Promise<void>;
+}
+type JsonStorageOptions = {
+    reviver?: (key: string, value: unknown) => unknown;
+    replacer?: (key: string, value: unknown) => unknown;
+};
+export declare function createJSONStorage<S>(getStorage: () => StateStorage, options?: JsonStorageOptions): PersistStorage<S> | undefined;
+export interface PersistOptions<S, PersistedState = S> {
     /** Name of the storage (must be unique) */
     name: string;
     /**
+     * @deprecated Use `storage` instead.
      * A function returning a storage.
@@ -26,2 +34,3 @@ * The storage must fit `window.localStorage`'s api (or an async version of it).
     /**
+     * @deprecated Use `storage` instead.
      * Use a custom serializer.
@@ -34,4 +43,5 @@ * The returned string will be stored in the storage.
     /**
+     * @deprecated Use `storage` instead.
      * Use a custom deserializer.
-     * Must return an object matching StorageValue<State>
+     * Must return an object matching StorageValue<S>
      *
@@ -43,13 +53,10 @@ * @param str The storage's current value.
     /**
-     * Prevent some items from being stored.
+     * Use a custom persist storage.
      *
-     * @deprecated This options is deprecated and will be removed in the next version. Please use the `partialize` option instead.
-     */
-    blacklist?: (keyof S)[];
-    /**
-     * Only store the listed properties.
+     * Combining `createJSONStorage` helps creating a persist storage
+     * with JSON.parse and JSON.stringify.
      *
-     * @deprecated This options is deprecated and will be removed in the next version. Please use the `partialize` option instead.
+     * @default createJSONStorage(() => localStorage)
      */
-    whitelist?: (keyof S)[];
+    storage?: PersistStorage<PersistedState> | undefined;
     /**
@@ -60,3 +67,3 @@ * Filter the persisted value.
      */
-    partialize?: (state: S) => DeepPartial<S>;
+    partialize?: (state: S) => PersistedState;
     /**
@@ -67,3 +74,3 @@ * A function returning another (optional) function.
      */
-    onRehydrateStorage?: (state: S) => ((state?: S, error?: Error) => void) | void;
+    onRehydrateStorage?: (state: S) => ((state?: S, error?: unknown) => void) | void;
     /**
@@ -78,3 +85,3 @@ * If the stored state's version mismatch the one specified here, the storage will not be used.
      */
-    migrate?: (persistedState: any, version: number) => S | Promise<S>;
+    migrate?: (persistedState: unknown, version: number) => S | Promise<S>;
     /**
@@ -84,31 +91,36 @@ * A function to perform custom hydration merges when combining the stored state with the current one.
      */
-    merge?: (persistedState: any, currentState: S) => S;
-};
-declare type PersistListener<S> = (state: S) => void;
-/**
- * @deprecated Use `Mutate<StoreApi<T>, [["zustand/persist", Partial<T>]]>`.
- * See tests/middlewaresTypes.test.tsx for usage with multiple middlewares.
- */
-export declare type StoreApiWithPersist<S extends State> = StoreApi<S> & StorePersist<S, Partial<S>>;
-declare module '../vanilla' {
-    interface StoreMutators<S, A> {
-        'zustand/persist': WithPersist<S, A>;
-    }
+    merge?: (persistedState: unknown, currentState: S) => S;
+    /**
+     * An optional boolean that will prevent the persist middleware from triggering hydration on initialization,
+     * This allows you to call `rehydrate()` at a specific point in your apps rendering life-cycle.
+     *
+     * This is useful in SSR application.
+     *
+     * @default false
+     */
+    skipHydration?: boolean;
 }
-declare type Write<T extends object, U extends object> = Omit<T, keyof U> & U;
-declare type Cast<T, U> = T extends U ? T : U;
-declare type WithPersist<S, A> = S extends {
-    getState: () => infer T;
-} ? Write<S, StorePersist<Cast<T, State>, A>> : never;
-interface StorePersist<S extends State, Ps> {
+type PersistListener<S> = (state: S) => void;
+type StorePersist<S, Ps> = {
     persist: {
         setOptions: (options: Partial<PersistOptions<S, Ps>>) => void;
         clearStorage: () => void;
-        rehydrate: () => Promise<void>;
+        rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: PersistListener<S>) => () => void;
         onFinishHydration: (fn: PersistListener<S>) => () => void;
+        getOptions: () => Partial<PersistOptions<S, Ps>>;
     };
+};
+type Persist = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = [], U = T>(initializer: StateCreator<T, [...Mps, ['zustand/persist', unknown]], Mcs>, options: PersistOptions<T, U>) => StateCreator<T, Mps, [['zustand/persist', U], ...Mcs]>;
+declare module '../vanilla' {
+    interface StoreMutators<S, A> {
+        'zustand/persist': WithPersist<S, A>;
+    }
 }
-export declare const persist: <S extends object, CustomSetState extends SetState<S> = SetState<S>, CustomGetState extends GetState<S> = GetState<S>, CustomStoreApi extends StoreApi<S> = StoreApi<S>>(config: (set: CustomSetState, get: CustomGetState, api: CustomStoreApi) => S, baseOptions: PersistOptions<S, Partial<S>>) => (set: CustomSetState, get: CustomGetState, api: CustomStoreApi & StoreApi<S> & StorePersist<S, Partial<S>>) => S;
+type Write<T, U> = Omit<T, keyof U> & U;
+type WithPersist<S, A> = S extends {
+    getState: () => infer T;
+} ? Write<S, StorePersist<T, A>> : never;
+export declare const persist: Persist;
 export {};

esm/middleware/redux.d.ts

@@ -1,22 +0,15 @@
-import { GetState, SetState, State, StoreApi } from '../vanilla';
-declare type DevtoolsType = {
-    prefix: string;
-    subscribe: (dispatch: any) => () => void;
-    unsubscribe: () => void;
-    send: (action: string, state: any) => void;
-    init: (state: any) => void;
-    error: (payload: any) => void;
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla';
+type Write<T, U> = Omit<T, keyof U> & U;
+type Action = {
+    type: string;
 };
-/**
- * @deprecated Use `Mutate<StoreApi<T & { dispatch: (a: A) => A }>, [["zustand/redux", A]]>`.
- * See tests/middlewaresTypes.test.tsx for usage with multiple middlewares.
- */
-export declare type StoreApiWithRedux<T extends State, A extends {
-    type: unknown;
-}> = StoreApi<T & {
+type StoreRedux<A> = {
     dispatch: (a: A) => A;
-}> & {
-    dispatch: (a: A) => A;
-    dispatchFromDevtools: boolean;
+    dispatchFromDevtools: true;
 };
+type ReduxState<A> = {
+    dispatch: StoreRedux<A>['dispatch'];
+};
+type WithRedux<S, A> = Write<S, StoreRedux<A>>;
+type Redux = <T, A extends Action, Cms extends [StoreMutatorIdentifier, unknown][] = []>(reducer: (state: T, action: A) => T, initialState: T) => StateCreator<Write<T, ReduxState<A>>, Cms, [['zustand/redux', A]]>;
 declare module '../vanilla' {
@@ -27,28 +20,3 @@ interface StoreMutators<S, A> {
 }
-interface StoreRedux<A extends Action> {
-    dispatch: (a: A) => A;
-    dispatchFromDevtools: true;
-}
-interface Action {
-    type: unknown;
-}
-declare type Write<T extends object, U extends object> = Omit<T, keyof U> & U;
-declare type Cast<T, U> = T extends U ? T : U;
-declare type WithRedux<S, A> = Write<Cast<S, object>, StoreRedux<Cast<A, Action>>>;
-export declare const redux: <S extends object, A extends {
-    type: unknown;
-}>(reducer: (state: S, action: A) => S, initial: S) => (set: SetState<S & {
-    dispatch: (a: A) => A;
-}>, get: GetState<S & {
-    dispatch: (a: A) => A;
-}>, api: StoreApi<S & {
-    dispatch: (a: A) => A;
-}> & {
-    dispatch: (a: A) => A;
-    dispatchFromDevtools: boolean;
-} & {
-    devtools?: DevtoolsType;
-}) => S & {
-    dispatch: (a: A) => A;
-};
+export declare const redux: Redux;
 export {};

esm/middleware/subscribeWithSelector.d.ts

@@ -1,2 +0,10 @@
-import { EqualityChecker, GetState, SetState, State, StateListener, StateSelector, StateSliceListener, StoreApi } from '../vanilla';
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla';
+type SubscribeWithSelector = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [
+    ...Mps,
+    ['zustand/subscribeWithSelector', never]
+], Mcs>) => StateCreator<T, Mps, [['zustand/subscribeWithSelector', never], ...Mcs]>;
+type Write<T, U> = Omit<T, keyof U> & U;
+type WithSelectorSubscribe<S> = S extends {
+    getState: () => infer T;
+} ? Write<S, StoreSubscribeWithSelector<T>> : never;
 declare module '../vanilla' {
@@ -7,6 +15,3 @@ interface StoreMutators<S, A> {
 }
-declare type WithSelectorSubscribe<S> = S extends {
-    getState: () => infer T;
-} ? Omit<S, 'subscribe'> & StoreSubscribeWithSelector<Extract<T, State>> : never;
-interface StoreSubscribeWithSelector<T extends State> {
+type StoreSubscribeWithSelector<T> = {
     subscribe: {
@@ -19,25 +24,4 @@ (listener: (selectedState: T, previousSelectedState: T) => void): () => void;
     };
-}
-/**
- * @deprecated Use `Mutate<StoreApi<T>, [["zustand/subscribeWithSelector", never]]>`.
- * See tests/middlewaresTypes.test.tsx for usage with multiple middlewares.
- */
-export declare type StoreApiWithSubscribeWithSelector<T extends State> = Omit<StoreApi<T>, 'subscribe'> & {
-    subscribe: {
-        (listener: StateListener<T>): () => void;
-        <StateSlice>(selector: StateSelector<T, StateSlice>, listener: StateSliceListener<StateSlice>, options?: {
-            equalityFn?: EqualityChecker<StateSlice>;
-            fireImmediately?: boolean;
-        }): () => void;
-    };
 };
-export declare const subscribeWithSelector: <S extends object, CustomSetState extends SetState<S> = SetState<S>, CustomGetState extends GetState<S> = GetState<S>, CustomStoreApi extends StoreApi<S> = StoreApi<S>>(fn: (set: CustomSetState, get: CustomGetState, api: CustomStoreApi) => S) => (set: CustomSetState, get: CustomGetState, api: Omit<CustomStoreApi, "subscribe"> & Omit<StoreApi<S>, "subscribe"> & {
-    subscribe: {
-        (listener: StateListener<S>): () => void;
-        <StateSlice>(selector: StateSelector<S, StateSlice>, listener: StateSliceListener<StateSlice>, options?: {
-            equalityFn?: EqualityChecker<StateSlice>;
-            fireImmediately?: boolean;
-        } | undefined): () => void;
-    };
-}) => S;
+export declare const subscribeWithSelector: SubscribeWithSelector;
 export {};

esm/react.d.ts

@@ -1,15 +0,37 @@
-import { EqualityChecker, GetState, SetState, State, StateCreator, StateSelector, StoreApi } from './vanilla';
+import type { Mutate, StateCreator, StoreApi, StoreMutatorIdentifier } from './vanilla';
+type ExtractState<S> = S extends {
+    getState: () => infer T;
+} ? T : never;
+type ReadonlyStoreApi<T> = Pick<StoreApi<T>, 'getState' | 'subscribe'>;
+type WithReact<S extends ReadonlyStoreApi<unknown>> = S & {
+    getServerState?: () => ExtractState<S>;
+};
+export declare function useStore<S extends WithReact<StoreApi<unknown>>>(api: S): ExtractState<S>;
+export declare function useStore<S extends WithReact<StoreApi<unknown>>, U>(api: S, selector: (state: ExtractState<S>) => U): U;
 /**
- * @deprecated Please use UseBoundStore instead
+ * @deprecated Use `useStoreWithEqualityFn` from 'zustand/traditional'
+ * https://github.com/pmndrs/zustand/discussions/1937
  */
-export declare type UseStore<T extends State, CustomStoreApi extends StoreApi<T> = StoreApi<T>> = {
-    (): T;
-    <U>(selector: StateSelector<T, U>, equalityFn?: EqualityChecker<U>): U;
-} & CustomStoreApi;
-export declare type UseBoundStore<T extends State, CustomStoreApi extends StoreApi<T> = StoreApi<T>> = {
-    (): T;
-    <U>(selector: StateSelector<T, U>, equalityFn?: EqualityChecker<U>): U;
-} & CustomStoreApi;
-declare function create<TState extends State, CustomSetState, CustomGetState, CustomStoreApi extends StoreApi<TState>>(createState: StateCreator<TState, CustomSetState, CustomGetState, CustomStoreApi> | CustomStoreApi): UseBoundStore<TState, CustomStoreApi>;
-declare function create<TState extends State>(createState: StateCreator<TState, SetState<TState>, GetState<TState>, any> | StoreApi<TState>): UseBoundStore<TState, StoreApi<TState>>;
-export default create;
+export declare function useStore<S extends WithReact<StoreApi<unknown>>, U>(api: S, selector: (state: ExtractState<S>) => U, equalityFn: ((a: U, b: U) => boolean) | undefined): U;
+export type UseBoundStore<S extends WithReact<ReadonlyStoreApi<unknown>>> = {
+    (): ExtractState<S>;
+    <U>(selector: (state: ExtractState<S>) => U): U;
+    /**
+     * @deprecated Use `createWithEqualityFn` from 'zustand/traditional'
+     */
+    <U>(selector: (state: ExtractState<S>) => U, equalityFn: (a: U, b: U) => boolean): U;
+} & S;
+type Create = {
+    <T, Mos extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [], Mos>): UseBoundStore<Mutate<StoreApi<T>, Mos>>;
+    <T>(): <Mos extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [], Mos>) => UseBoundStore<Mutate<StoreApi<T>, Mos>>;
+    /**
+     * @deprecated Use `useStore` hook to bind store
+     */
+    <S extends StoreApi<unknown>>(store: S): UseBoundStore<S>;
+};
+export declare const create: Create;
+/**
+ * @deprecated Use `import { create } from 'zustand'`
+ */
+declare const _default: Create;
+export default _default;

esm/shallow.d.ts

@@ -1,1 +0,7 @@
-export default function shallow<T, U>(objA: T, objB: U): boolean;
+import { shallow } from './vanilla/shallow';
+/**
+ * @deprecated Use `import { shallow } from 'zustand/shallow'`
+ */
+declare const _default: typeof shallow;
+export default _default;
+export { shallow };

esm/shallow.js

@@ -1,2 +0,2 @@
-function shallow(objA, objB) {
+function shallow$1(objA, objB) {
   if (Object.is(objA, objB)) {
@@ -8,2 +8,22 @@ return true;
   }
+  if (objA instanceof Map && objB instanceof Map) {
+    if (objA.size !== objB.size)
+      return false;
+    for (const [key, value] of objA) {
+      if (!Object.is(value, objB.get(key))) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (objA instanceof Set && objB instanceof Set) {
+    if (objA.size !== objB.size)
+      return false;
+    for (const value of objA) {
+      if (!objB.has(value)) {
+        return false;
+      }
+    }
+    return true;
+  }
   const keysA = Object.keys(objA);
@@ -21,2 +41,11 @@ if (keysA.length !== Object.keys(objB).length) {
 
-export { shallow as default };
+var shallow = (objA, objB) => {
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[DEPRECATED] Default export is deprecated. Instead use `import { shallow } from 'zustand/shallow'`."
+    );
+  }
+  return shallow$1(objA, objB);
+};
+
+export { shallow as default, shallow$1 as shallow };

esm/vanilla.d.ts

@@ -1,40 +0,80 @@
-export declare type State = object;
+type SetStateInternal<T> = {
+    _(partial: T | Partial<T> | {
+        _(state: T): T | Partial<T>;
+    }['_'], replace?: boolean | undefined): void;
+}['_'];
+export interface StoreApi<T> {
+    setState: SetStateInternal<T>;
+    getState: () => T;
+    subscribe: (listener: (state: T, prevState: T) => void) => () => void;
+    /**
+     * @deprecated Use `unsubscribe` returned by `subscribe`
+     */
+    destroy: () => void;
+}
+type Get<T, K, F> = K extends keyof T ? T[K] : F;
+export type Mutate<S, Ms> = number extends Ms['length' & keyof Ms] ? S : Ms extends [] ? S : Ms extends [[infer Mi, infer Ma], ...infer Mrs] ? Mutate<StoreMutators<S, Ma>[Mi & StoreMutatorIdentifier], Mrs> : never;
+export type StateCreator<T, Mis extends [StoreMutatorIdentifier, unknown][] = [], Mos extends [StoreMutatorIdentifier, unknown][] = [], U = T> = ((setState: Get<Mutate<StoreApi<T>, Mis>, 'setState', never>, getState: Get<Mutate<StoreApi<T>, Mis>, 'getState', never>, store: Mutate<StoreApi<T>, Mis>) => U) & {
+    $$storeMutators?: Mos;
+};
+export interface StoreMutators<S, A> {
+}
+export type StoreMutatorIdentifier = keyof StoreMutators<unknown, unknown>;
+type CreateStore = {
+    <T, Mos extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [], Mos>): Mutate<StoreApi<T>, Mos>;
+    <T>(): <Mos extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [], Mos>) => Mutate<StoreApi<T>, Mos>;
+};
+export declare const createStore: CreateStore;
 /**
- * @deprecated Use the builtin `Partial<T>` instead of `PartialState<T>`.
- * Additionally turn on `--exactOptionalPropertyTypes` tsc flag.
- * `PartialState` will be removed in next major
+ * @deprecated Use `import { createStore } from 'zustand/vanilla'`
  */
-export declare type PartialState<T extends State, K1 extends keyof T = keyof T, K2 extends keyof T = K1, K3 extends keyof T = K2, K4 extends keyof T = K3> = (Pick<T, K1> | Pick<T, K2> | Pick<T, K3> | Pick<T, K4> | T) | ((state: T) => Pick<T, K1> | Pick<T, K2> | Pick<T, K3> | Pick<T, K4> | T);
-export declare type StateSelector<T extends State, U> = (state: T) => U;
-export declare type EqualityChecker<T> = (state: T, newState: T) => boolean;
-export declare type StateListener<T> = (state: T, previousState: T) => void;
+declare const _default: CreateStore;
+export default _default;
 /**
- * @deprecated Use `StateListener<T>` instead of `StateSliceListener<T>`.
+ * @deprecated Use `unknown` instead of `State`
  */
-export declare type StateSliceListener<T> = (slice: T, previousSlice: T) => void;
-export declare type Subscribe<T extends State> = {
-    (listener: StateListener<T>): () => void;
-    /**
-     * @deprecated Please use `subscribeWithSelector` middleware
-     */
-    <StateSlice>(listener: StateSliceListener<StateSlice>, selector?: StateSelector<T, StateSlice>, equalityFn?: EqualityChecker<StateSlice>): () => void;
+export type State = unknown;
+/**
+ * @deprecated Use `Partial<T> | ((s: T) => Partial<T>)` instead of `PartialState<T>`
+ */
+export type PartialState<T extends State> = Partial<T> | ((state: T) => Partial<T>);
+/**
+ * @deprecated Use `(s: T) => U` instead of `StateSelector<T, U>`
+ */
+export type StateSelector<T extends State, U> = (state: T) => U;
+/**
+ * @deprecated Use `(a: T, b: T) => boolean` instead of `EqualityChecker<T>`
+ */
+export type EqualityChecker<T> = (state: T, newState: T) => boolean;
+/**
+ * @deprecated Use `(state: T, previousState: T) => void` instead of `StateListener<T>`
+ */
+export type StateListener<T> = (state: T, previousState: T) => void;
+/**
+ * @deprecated Use `(slice: T, previousSlice: T) => void` instead of `StateSliceListener<T>`.
+ */
+export type StateSliceListener<T> = (slice: T, previousSlice: T) => void;
+/**
+ * @deprecated Use `(listener: (state: T) => void) => void` instead of `Subscribe<T>`.
+ */
+export type Subscribe<T extends State> = {
+    (listener: (state: T, previousState: T) => void): () => void;
 };
-export declare type SetState<T extends State> = {
-    <K1 extends keyof T, K2 extends keyof T = K1, K3 extends keyof T = K2, K4 extends keyof T = K3>(partial: PartialState<T, K1, K2, K3, K4>, replace?: boolean): void;
-};
-export declare type GetState<T extends State> = () => T;
-export declare type Destroy = () => void;
-export declare type StoreApi<T extends State> = {
-    setState: SetState<T>;
-    getState: GetState<T>;
-    subscribe: Subscribe<T>;
-    destroy: Destroy;
-};
-export declare type StateCreator<T extends State, CustomSetState = SetState<T>, CustomGetState = GetState<T>, CustomStoreApi extends StoreApi<T> = StoreApi<T>> = (set: CustomSetState, get: CustomGetState, api: CustomStoreApi) => T;
-declare function createStore<TState extends State, CustomSetState, CustomGetState, CustomStoreApi extends StoreApi<TState>>(createState: StateCreator<TState, CustomSetState, CustomGetState, CustomStoreApi>): CustomStoreApi;
-declare function createStore<TState extends State>(createState: StateCreator<TState, SetState<TState>, GetState<TState>, any>): StoreApi<TState>;
-export default createStore;
-export interface StoreMutators<S, A> {
-}
-export declare type StoreMutatorIdentifier = keyof StoreMutators<unknown, unknown>;
-export declare type Mutate<S, Ms> = Ms extends [] ? S : Ms extends [[infer Mi, infer Ma], ...infer Mrs] ? Mutate<StoreMutators<S, Ma>[Mi & StoreMutatorIdentifier], Mrs> : never;
+/**
+ * @deprecated You might be looking for `StateCreator`, if not then
+ * use `StoreApi<T>['setState']` instead of `SetState<T>`.
+ */
+export type SetState<T extends State> = {
+    _(partial: T | Partial<T> | {
+        _(state: T): T | Partial<T>;
+    }['_'], replace?: boolean | undefined): void;
+}['_'];
+/**
+ * @deprecated You might be looking for `StateCreator`, if not then
+ * use `StoreApi<T>['getState']` instead of `GetState<T>`.
+ */
+export type GetState<T extends State> = () => T;
+/**
+ * @deprecated Use `StoreApi<T>['destroy']` instead of `Destroy`.
+ */
+export type Destroy = () => void;

esm/vanilla.js

@@ -1,2 +0,2 @@
-function createStore(createState) {
+const createStoreImpl = (createState) => {
   let state;
@@ -6,5 +6,5 @@ const listeners = /* @__PURE__ */ new Set();
     const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (nextState !== state) {
+    if (!Object.is(nextState, state)) {
       const previousState = state;
-      state = replace ? nextState : Object.assign({}, state, nextState);
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
       listeners.forEach((listener) => listener(state, previousState));
@@ -14,28 +14,28 @@ }
   const getState = () => state;
-  const subscribeWithSelector = (listener, selector = getState, equalityFn = Object.is) => {
-    console.warn("[DEPRECATED] Please use `subscribeWithSelector` middleware");
-    let currentSlice = selector(state);
-    function listenerToAdd() {
-      const nextSlice = selector(state);
-      if (!equalityFn(currentSlice, nextSlice)) {
-        const previousSlice = currentSlice;
-        listener(currentSlice = nextSlice, previousSlice);
-      }
-    }
-    listeners.add(listenerToAdd);
-    return () => listeners.delete(listenerToAdd);
-  };
-  const subscribe = (listener, selector, equalityFn) => {
-    if (selector || equalityFn) {
-      return subscribeWithSelector(listener, selector, equalityFn);
-    }
+  const subscribe = (listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
   };
-  const destroy = () => listeners.clear();
+  const destroy = () => {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
+      );
+    }
+    listeners.clear();
+  };
   const api = { setState, getState, subscribe, destroy };
   state = createState(setState, getState, api);
   return api;
-}
+};
+const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+var vanilla = (createState) => {
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[DEPRECATED] Default export is deprecated. Instead use import { createStore } from 'zustand/vanilla'."
+    );
+  }
+  return createStore(createState);
+};
 
-export { createStore as default };
+export { createStore, vanilla as default };

index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var vanilla = require('zustand/vanilla');
+var ReactExports = require('react');
+var useSyncExternalStoreExports = require('use-sync-external-store/shim/with-selector');
 
-var react = require('react');
-
-function createStore(createState) {
-  var state;
-  var listeners = new Set();
-
-  var setState = function setState(partial, replace) {
-    var nextState = typeof partial === 'function' ? partial(state) : partial;
-
-    if (nextState !== state) {
-      var _previousState = state;
-      state = replace ? nextState : Object.assign({}, state, nextState);
-      listeners.forEach(function (listener) {
-        return listener(state, _previousState);
-      });
-    }
-  };
-
-  var getState = function getState() {
-    return state;
-  };
-
-  var subscribeWithSelector = function subscribeWithSelector(listener, selector, equalityFn) {
-    if (selector === void 0) {
-      selector = getState;
-    }
-
-    if (equalityFn === void 0) {
-      equalityFn = Object.is;
-    }
-
-    console.warn('[DEPRECATED] Please use `subscribeWithSelector` middleware');
-    var currentSlice = selector(state);
-
-    function listenerToAdd() {
-      var nextSlice = selector(state);
-
-      if (!equalityFn(currentSlice, nextSlice)) {
-        var _previousSlice = currentSlice;
-        listener(currentSlice = nextSlice, _previousSlice);
-      }
-    }
-
-    listeners.add(listenerToAdd);
-    return function () {
-      return listeners.delete(listenerToAdd);
-    };
-  };
-
-  var subscribe = function subscribe(listener, selector, equalityFn) {
-    if (selector || equalityFn) {
-      return subscribeWithSelector(listener, selector, equalityFn);
-    }
-
-    listeners.add(listener);
-    return function () {
-      return listeners.delete(listener);
-    };
-  };
-
-  var destroy = function destroy() {
-    return listeners.clear();
-  };
-
-  var api = {
-    setState: setState,
-    getState: getState,
-    subscribe: subscribe,
-    destroy: destroy
-  };
-  state = createState(setState, getState, api);
-  return api;
+var useDebugValue = ReactExports.useDebugValue;
+var useSyncExternalStoreWithSelector = useSyncExternalStoreExports.useSyncExternalStoreWithSelector;
+var didWarnAboutEqualityFn = false;
+function useStore(api, selector, equalityFn) {
+  if (selector === void 0) {
+    selector = api.getState;
+  }
+  if (process.env.NODE_ENV !== 'production' && equalityFn && !didWarnAboutEqualityFn) {
+    console.warn("[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937");
+    didWarnAboutEqualityFn = true;
+  }
+  var slice = useSyncExternalStoreWithSelector(api.subscribe, api.getState, api.getServerState || api.getState, selector, equalityFn);
+  useDebugValue(slice);
+  return slice;
 }
-
-var isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-var useIsomorphicLayoutEffect = isSSR ? react.useEffect : react.useLayoutEffect;
-
-function create(createState) {
-  var api = typeof createState === 'function' ? createStore(createState) : createState;
-
-  var useStore = function useStore(selector, equalityFn) {
-    if (selector === void 0) {
-      selector = api.getState;
-    }
-
-    if (equalityFn === void 0) {
-      equalityFn = Object.is;
-    }
-
-    var _ref = react.useReducer(function (c) {
-      return c + 1;
-    }, 0),
-        forceUpdate = _ref[1];
-
-    var state = api.getState();
-    var stateRef = react.useRef(state);
-    var selectorRef = react.useRef(selector);
-    var equalityFnRef = react.useRef(equalityFn);
-    var erroredRef = react.useRef(false);
-    var currentSliceRef = react.useRef();
-
-    if (currentSliceRef.current === undefined) {
-      currentSliceRef.current = selector(state);
-    }
-
-    var newStateSlice;
-    var hasNewStateSlice = false;
-
-    if (stateRef.current !== state || selectorRef.current !== selector || equalityFnRef.current !== equalityFn || erroredRef.current) {
-      newStateSlice = selector(state);
-      hasNewStateSlice = !equalityFn(currentSliceRef.current, newStateSlice);
-    }
-
-    useIsomorphicLayoutEffect(function () {
-      if (hasNewStateSlice) {
-        currentSliceRef.current = newStateSlice;
-      }
-
-      stateRef.current = state;
-      selectorRef.current = selector;
-      equalityFnRef.current = equalityFn;
-      erroredRef.current = false;
-    });
-    var stateBeforeSubscriptionRef = react.useRef(state);
-    useIsomorphicLayoutEffect(function () {
-      var listener = function listener() {
-        try {
-          var nextState = api.getState();
-          var nextStateSlice = selectorRef.current(nextState);
-
-          if (!equalityFnRef.current(currentSliceRef.current, nextStateSlice)) {
-            stateRef.current = nextState;
-            currentSliceRef.current = nextStateSlice;
-            forceUpdate();
-          }
-        } catch (error) {
-          erroredRef.current = true;
-          forceUpdate();
-        }
-      };
-
-      var unsubscribe = api.subscribe(listener);
-
-      if (api.getState() !== stateBeforeSubscriptionRef.current) {
-        listener();
-      }
-
-      return unsubscribe;
-    }, []);
-    var sliceToReturn = hasNewStateSlice ? newStateSlice : currentSliceRef.current;
-    react.useDebugValue(sliceToReturn);
-    return sliceToReturn;
+var createImpl = function createImpl(createState) {
+  if (process.env.NODE_ENV !== 'production' && typeof createState !== 'function') {
+    console.warn("[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`.");
+  }
+  var api = typeof createState === 'function' ? vanilla.createStore(createState) : createState;
+  var useBoundStore = function useBoundStore(selector, equalityFn) {
+    return useStore(api, selector, equalityFn);
   };
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+var create = function create(createState) {
+  return createState ? createImpl(createState) : createImpl;
+};
+var react = (function (createState) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn("[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.");
+  }
+  return create(createState);
+});
 
-  Object.assign(useStore, api);
+exports.create = create;
+exports.default = react;
+exports.useStore = useStore;
+Object.keys(vanilla).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return vanilla[k]; }
+  });
+});
 
-  useStore[Symbol.iterator] = function () {
-    console.warn('[useStore, api] = create() is deprecated and will be removed in v4');
-    var items = [useStore, api];
-    return {
-      next: function next() {
-        var done = items.length <= 0;
-        return {
-          value: items.shift(),
-          done: done
-        };
-      }
-    };
-  };
-
-  return useStore;
-}
-
-exports["default"] = create;
+module.exports = react;
+module.exports.create = create;
+module.exports.useStore = useStore;
+module.exports.createStore = vanilla.createStore;
+exports.default = module.exports;

middleware.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
@@ -16,11 +13,21 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
 
-var redux = function redux(reducer, initial) {
-  return function (set, get, api) {
+var reduxImpl = function reduxImpl(reducer, initial) {
+  return function (set, _get, api) {
     api.dispatch = function (action) {
@@ -32,7 +39,7 @@ set(function (state) {
     };
-
     api.dispatchFromDevtools = true;
     return _extends({
       dispatch: function dispatch() {
-        return api.dispatch.apply(api, arguments);
+        var _ref;
+        return (_ref = api).dispatch.apply(_ref, arguments);
       }
@@ -42,88 +49,82 @@ }, initial);
 };
+var redux = reduxImpl;
 
-function devtools(fn, options) {
+var _excluded = ["enabled", "anonymousActionType", "store"],
+  _excluded2 = ["connection"];
+var trackedConnections = new Map();
+var getTrackedConnectionState = function getTrackedConnectionState(name) {
+  var api = trackedConnections.get(name);
+  if (!api) return {};
+  return Object.fromEntries(Object.entries(api.stores).map(function (_ref) {
+    var key = _ref[0],
+      api = _ref[1];
+    return [key, api.getState()];
+  }));
+};
+var extractConnectionInformation = function extractConnectionInformation(store, extensionConnector, options) {
+  if (store === undefined) {
+    return {
+      type: 'untracked',
+      connection: extensionConnector.connect(options)
+    };
+  }
+  var existingConnection = trackedConnections.get(options.name);
+  if (existingConnection) {
+    return _extends({
+      type: 'tracked',
+      store: store
+    }, existingConnection);
+  }
+  var newConnection = {
+    connection: extensionConnector.connect(options),
+    stores: {}
+  };
+  trackedConnections.set(options.name, newConnection);
+  return _extends({
+    type: 'tracked',
+    store: store
+  }, newConnection);
+};
+var devtoolsImpl = function devtoolsImpl(fn, devtoolsOptions) {
+  if (devtoolsOptions === void 0) {
+    devtoolsOptions = {};
+  }
   return function (set, get, api) {
-    var _serialize;
-
-    var didWarnAboutNameDeprecation = false;
-
-    if (typeof options === 'string' && !didWarnAboutNameDeprecation) {
-      console.warn('[zustand devtools middleware]: passing `name` as directly will be not allowed in next major' + 'pass the `name` in an object `{ name: ... }` instead');
-      didWarnAboutNameDeprecation = true;
-    }
-
-    var devtoolsOptions = options === undefined ? {
-      name: undefined,
-      anonymousActionType: undefined
-    } : typeof options === 'string' ? {
-      name: options
-    } : options;
-
-    if (typeof (devtoolsOptions == null ? void 0 : (_serialize = devtoolsOptions.serialize) == null ? void 0 : _serialize.options) !== 'undefined') {
-      console.warn('[zustand devtools middleware]: `serialize.options` is deprecated, just use `serialize`');
-    }
-
+    var _devtoolsOptions = devtoolsOptions,
+      enabled = _devtoolsOptions.enabled,
+      anonymousActionType = _devtoolsOptions.anonymousActionType,
+      store = _devtoolsOptions.store,
+      options = _objectWithoutPropertiesLoose(_devtoolsOptions, _excluded);
     var extensionConnector;
-
     try {
-      extensionConnector = window.__REDUX_DEVTOOLS_EXTENSION__ || window.top.__REDUX_DEVTOOLS_EXTENSION__;
-    } catch (_unused) {}
-
+      extensionConnector = (enabled != null ? enabled : process.env.NODE_ENV !== 'production') && window.__REDUX_DEVTOOLS_EXTENSION__;
+    } catch (e) {}
     if (!extensionConnector) {
-      if (process.env.NODE_ENV !== "production" && typeof window !== 'undefined') {
+      if (process.env.NODE_ENV !== 'production' && enabled) {
         console.warn('[zustand devtools middleware] Please install/enable Redux devtools extension');
       }
-
       return fn(set, get, api);
     }
-
-    var extension = Object.create(extensionConnector.connect(devtoolsOptions));
-    var didWarnAboutDevtools = false;
-    Object.defineProperty(api, 'devtools', {
-      get: function get() {
-        if (!didWarnAboutDevtools) {
-          console.warn('[zustand devtools middleware] `devtools` property on the store is deprecated ' + 'it will be removed in the next major.\n' + "You shouldn't interact with the extension directly. But in case you still want to " + 'you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly');
-          didWarnAboutDevtools = true;
-        }
-
-        return extension;
-      },
-      set: function set(value) {
-        if (!didWarnAboutDevtools) {
-          console.warn('[zustand devtools middleware] `api.devtools` is deprecated, ' + 'it will be removed in the next major.\n' + "You shouldn't interact with the extension directly. But in case you still want to " + 'you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly');
-          didWarnAboutDevtools = true;
-        }
-
-        extension = value;
-      }
-    });
-    var didWarnAboutPrefix = false;
-    Object.defineProperty(extension, 'prefix', {
-      get: function get() {
-        if (!didWarnAboutPrefix) {
-          console.warn('[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\n' + 'We no longer prefix the actions/names' + devtoolsOptions.name === undefined ? ', pass the `name` option to create a separate instance of devtools for each store.' : ', because the `name` option already creates a separate instance of devtools for each store.');
-          didWarnAboutPrefix = true;
-        }
-
-        return '';
-      },
-      set: function set() {
-        if (!didWarnAboutPrefix) {
-          console.warn('[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\n' + 'We no longer prefix the actions/names' + devtoolsOptions.name === undefined ? ', pass the `name` option to create a separate instance of devtools for each store.' : ', because the `name` option already creates a separate instance of devtools for each store.');
-          didWarnAboutPrefix = true;
-        }
-      }
-    });
+    var _extractConnectionInf = extractConnectionInformation(store, extensionConnector, options),
+      connection = _extractConnectionInf.connection,
+      connectionInformation = _objectWithoutPropertiesLoose(_extractConnectionInf, _excluded2);
     var isRecording = true;
-
     api.setState = function (state, replace, nameOrAction) {
-      set(state, replace);
-      if (!isRecording) return;
-      extension.send(nameOrAction === undefined ? {
-        type: devtoolsOptions.anonymousActionType || 'anonymous'
+      var _extends2;
+      var r = set(state, replace);
+      if (!isRecording) return r;
+      var action = nameOrAction === undefined ? {
+        type: anonymousActionType || 'anonymous'
       } : typeof nameOrAction === 'string' ? {
         type: nameOrAction
-      } : nameOrAction, get());
+      } : nameOrAction;
+      if (store === undefined) {
+        connection == null || connection.send(action, get());
+        return r;
+      }
+      connection == null || connection.send(_extends({}, action, {
+        type: store + "/" + action.type
+      }), _extends({}, getTrackedConnectionState(options.name), (_extends2 = {}, _extends2[store] = api.getState(), _extends2)));
+      return r;
     };
-
     var setStateFromDevtools = function setStateFromDevtools() {
@@ -135,10 +136,16 @@ var originalIsRecording = isRecording;
     };
-
     var initialState = fn(api.setState, get, api);
-    extension.init(initialState);
-
+    if (connectionInformation.type === 'untracked') {
+      connection == null || connection.init(initialState);
+    } else {
+      connectionInformation.stores[connectionInformation.store] = api;
+      connection == null || connection.init(Object.fromEntries(Object.entries(connectionInformation.stores).map(function (_ref2) {
+        var key = _ref2[0],
+          store = _ref2[1];
+        return [key, key === connectionInformation.store ? initialState : store.getState()];
+      })));
+    }
     if (api.dispatchFromDevtools && typeof api.dispatch === 'function') {
       var didWarnAboutReservedActionType = false;
       var originalDispatch = api.dispatch;
-
       api.dispatch = function () {
@@ -148,4 +155,3 @@ for (var _len = arguments.length, a = new Array(_len), _key = 0; _key < _len; _key++) {
         }
-
-        if (a[0].type === '__setState' && !didWarnAboutReservedActionType) {
+        if (process.env.NODE_ENV !== 'production' && a[0].type === '__setState' && !didWarnAboutReservedActionType) {
           console.warn('[zustand devtools middleware] "__setState" action type is reserved ' + 'to set state from the devtools. Avoid using it.');
@@ -157,4 +163,3 @@ didWarnAboutReservedActionType = true;
     }
-
-    extension.subscribe(function (message) {
+    connection.subscribe(function (message) {
       switch (message.type) {
@@ -166,9 +171,20 @@ case 'ACTION':
           }
-
           return parseJsonThen(message.payload, function (action) {
             if (action.type === '__setState') {
-              setStateFromDevtools(action.state);
+              if (store === undefined) {
+                setStateFromDevtools(action.state);
+                return;
+              }
+              if (Object.keys(action.state).length !== 1) {
+                console.error("\n                    [zustand devtools middleware] Unsupported __setState action format. \n                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),\n                    and value of this only key should be a state object. Example: { \"type\": \"__setState\", \"state\": { \"abc123Store\": { \"foo\": \"bar\" } } }\n                    ");
+              }
+              var stateFromDevtools = action.state[store];
+              if (stateFromDevtools === undefined || stateFromDevtools === null) {
+                return;
+              }
+              if (JSON.stringify(api.getState()) !== JSON.stringify(stateFromDevtools)) {
+                setStateFromDevtools(stateFromDevtools);
+              }
               return;
             }
-
             if (!api.dispatchFromDevtools) return;
@@ -178,3 +194,2 @@ if (typeof api.dispatch !== 'function') return;
           });
-
         case 'DISPATCH':
@@ -184,35 +199,50 @@ switch (message.payload.type) {
               setStateFromDevtools(initialState);
-              return extension.init(api.getState());
-
+              if (store === undefined) {
+                return connection == null ? void 0 : connection.init(api.getState());
+              }
+              return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
             case 'COMMIT':
-              return extension.init(api.getState());
-
+              if (store === undefined) {
+                connection == null || connection.init(api.getState());
+                return;
+              }
+              return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
             case 'ROLLBACK':
               return parseJsonThen(message.state, function (state) {
-                setStateFromDevtools(state);
-                extension.init(api.getState());
+                if (store === undefined) {
+                  setStateFromDevtools(state);
+                  connection == null || connection.init(api.getState());
+                  return;
+                }
+                setStateFromDevtools(state[store]);
+                connection == null || connection.init(getTrackedConnectionState(options.name));
               });
-
             case 'JUMP_TO_STATE':
             case 'JUMP_TO_ACTION':
               return parseJsonThen(message.state, function (state) {
-                setStateFromDevtools(state);
+                if (store === undefined) {
+                  setStateFromDevtools(state);
+                  return;
+                }
+                if (JSON.stringify(api.getState()) !== JSON.stringify(state[store])) {
+                  setStateFromDevtools(state[store]);
+                }
               });
-
             case 'IMPORT_STATE':
               {
                 var _nextLiftedState$comp;
-
                 var nextLiftedState = message.payload.nextLiftedState;
                 var lastComputedState = (_nextLiftedState$comp = nextLiftedState.computedStates.slice(-1)[0]) == null ? void 0 : _nextLiftedState$comp.state;
                 if (!lastComputedState) return;
-                setStateFromDevtools(lastComputedState);
-                extension.send(null, nextLiftedState);
+                if (store === undefined) {
+                  setStateFromDevtools(lastComputedState);
+                } else {
+                  setStateFromDevtools(lastComputedState[store]);
+                }
+                connection == null || connection.send(null, nextLiftedState);
                 return;
               }
-
             case 'PAUSE_RECORDING':
               return isRecording = !isRecording;
           }
-
           return;
@@ -223,7 +253,6 @@ }
   };
-}
-
+};
+var devtools = devtoolsImpl;
 var parseJsonThen = function parseJsonThen(stringified, f) {
   var parsed;
-
   try {
@@ -234,20 +263,15 @@ parsed = JSON.parse(stringified);
   }
-
   if (parsed !== undefined) f(parsed);
 };
 
-var subscribeWithSelector = function subscribeWithSelector(fn) {
+var subscribeWithSelectorImpl = function subscribeWithSelectorImpl(fn) {
   return function (set, get, api) {
     var origSubscribe = api.subscribe;
-
     api.subscribe = function (selector, optListener, options) {
       var listener = selector;
-
       if (optListener) {
         var equalityFn = (options == null ? void 0 : options.equalityFn) || Object.is;
         var currentSlice = selector(api.getState());
-
         listener = function listener(state) {
           var nextSlice = selector(state);
-
           if (!equalityFn(currentSlice, nextSlice)) {
@@ -258,3 +282,2 @@ var previousSlice = currentSlice;
         };
-
         if (options != null && options.fireImmediately) {
@@ -264,6 +287,4 @@ optListener(currentSlice, currentSlice);
       }
-
       return origSubscribe(listener);
     };
-
     var initialState = fn(set, get, api);
@@ -273,9 +294,41 @@ return initialState;
 };
+var subscribeWithSelector = subscribeWithSelectorImpl;
 
 var combine = function combine(initialState, create) {
-  return function (set, get, api) {
-    return Object.assign({}, initialState, create(set, get, api));
+  return function () {
+    return Object.assign({}, initialState, create.apply(void 0, arguments));
   };
 };
 
+function createJSONStorage(getStorage, options) {
+  var storage;
+  try {
+    storage = getStorage();
+  } catch (e) {
+    return;
+  }
+  var persistStorage = {
+    getItem: function getItem(name) {
+      var _getItem;
+      var parse = function parse(str) {
+        if (str === null) {
+          return null;
+        }
+        return JSON.parse(str, options == null ? void 0 : options.reviver);
+      };
+      var str = (_getItem = storage.getItem(name)) != null ? _getItem : null;
+      if (str instanceof Promise) {
+        return str.then(parse);
+      }
+      return parse(str);
+    },
+    setItem: function setItem(name, newValue) {
+      return storage.setItem(name, JSON.stringify(newValue, options == null ? void 0 : options.replacer));
+    },
+    removeItem: function removeItem(name) {
+      return storage.removeItem(name);
+    }
+  };
+  return persistStorage;
+}
 var toThenable = function toThenable(fn) {
@@ -285,7 +338,5 @@ return function (input) {
       var result = fn(input);
-
       if (result instanceof Promise) {
         return result;
       }
-
       return {
@@ -311,4 +362,3 @@ then: function then(onFulfilled) {
 };
-
-var persist = function persist(config, baseOptions) {
+var oldImpl = function oldImpl(config, baseOptions) {
   return function (set, get, api) {
@@ -329,7 +379,2 @@ var options = _extends({
     }, baseOptions);
-
-    if (options.blacklist || options.whitelist) {
-      console.warn("The " + (options.blacklist ? 'blacklist' : 'whitelist') + " option is deprecated and will be removed in the next version. Please use the 'partialize' option instead.");
-    }
-
     var _hasHydrated = false;
@@ -339,7 +384,5 @@ var hydrationListeners = new Set();
     var storage;
-
     try {
       storage = options.getStorage();
     } catch (e) {}
-
     if (!storage) {
@@ -350,25 +393,6 @@ return config(function () {
       }, get, api);
-    } else if (!storage.removeItem) {
-      console.warn("[zustand persist middleware] The given storage for item '" + options.name + "' does not contain a 'removeItem' method, which will be required in v4.");
     }
-
     var thenableSerialize = toThenable(options.serialize);
-
     var setItem = function setItem() {
       var state = options.partialize(_extends({}, get()));
-
-      if (options.whitelist) {
-        Object.keys(state).forEach(function (key) {
-          var _options$whitelist;
-
-          !((_options$whitelist = options.whitelist) != null && _options$whitelist.includes(key)) && delete state[key];
-        });
-      }
-
-      if (options.blacklist) {
-        options.blacklist.forEach(function (key) {
-          return delete state[key];
-        });
-      }
-
       var errorInSync;
@@ -383,12 +407,8 @@ var thenable = thenableSerialize({
       });
-
       if (errorInSync) {
         throw errorInSync;
       }
-
       return thenable;
     };
-
     var savedSetState = api.setState;
-
     api.setState = function (state, replace) {
@@ -398,3 +418,2 @@ savedSetState(state, replace);
     };
-
     var configResult = config(function () {
@@ -405,3 +424,2 @@ set.apply(void 0, arguments);
     var stateFromStorage;
-
     var hydrate = function hydrate() {
@@ -424,3 +442,2 @@ if (!storage) return;
             }
-
             console.error("State loaded from storage couldn't be migrated since no migrate function was provided");
@@ -433,3 +450,2 @@ } else {
         var _get;
-
         stateFromStorage = options.merge(migratedState, (_get = get()) != null ? _get : configResult);
@@ -439,3 +455,3 @@ set(stateFromStorage, true);
       }).then(function () {
-        postRehydrationCallback == null ? void 0 : postRehydrationCallback(stateFromStorage, undefined);
+        postRehydrationCallback == null || postRehydrationCallback(stateFromStorage, undefined);
         _hasHydrated = true;
@@ -446,10 +462,8 @@ finishHydrationListeners.forEach(function (cb) {
       }).catch(function (e) {
-        postRehydrationCallback == null ? void 0 : postRehydrationCallback(undefined, e);
+        postRehydrationCallback == null || postRehydrationCallback(undefined, e);
       });
     };
-
     api.persist = {
       setOptions: function setOptions(newOptions) {
         options = _extends({}, options, newOptions);
-
         if (newOptions.getStorage) {
@@ -461,5 +475,7 @@ storage = newOptions.getStorage();
         var _storage;
-
-        (_storage = storage) == null ? void 0 : _storage.removeItem == null ? void 0 : _storage.removeItem(options.name);
+        (_storage = storage) == null || _storage.removeItem(options.name);
       },
+      getOptions: function getOptions() {
+        return options;
+      },
       rehydrate: function rehydrate() {
@@ -488,4 +504,131 @@ return hydrate();
 };
+var newImpl = function newImpl(config, baseOptions) {
+  return function (set, get, api) {
+    var options = _extends({
+      storage: createJSONStorage(function () {
+        return localStorage;
+      }),
+      partialize: function partialize(state) {
+        return state;
+      },
+      version: 0,
+      merge: function merge(persistedState, currentState) {
+        return _extends({}, currentState, persistedState);
+      }
+    }, baseOptions);
+    var _hasHydrated2 = false;
+    var hydrationListeners = new Set();
+    var finishHydrationListeners = new Set();
+    var storage = options.storage;
+    if (!storage) {
+      return config(function () {
+        console.warn("[zustand persist middleware] Unable to update item '" + options.name + "', the given storage is currently unavailable.");
+        set.apply(void 0, arguments);
+      }, get, api);
+    }
+    var setItem = function setItem() {
+      var state = options.partialize(_extends({}, get()));
+      return storage.setItem(options.name, {
+        state: state,
+        version: options.version
+      });
+    };
+    var savedSetState = api.setState;
+    api.setState = function (state, replace) {
+      savedSetState(state, replace);
+      void setItem();
+    };
+    var configResult = config(function () {
+      set.apply(void 0, arguments);
+      void setItem();
+    }, get, api);
+    var stateFromStorage;
+    var hydrate = function hydrate() {
+      var _get3;
+      if (!storage) return;
+      _hasHydrated2 = false;
+      hydrationListeners.forEach(function (cb) {
+        var _get2;
+        return cb((_get2 = get()) != null ? _get2 : configResult);
+      });
+      var postRehydrationCallback = (options.onRehydrateStorage == null ? void 0 : options.onRehydrateStorage((_get3 = get()) != null ? _get3 : configResult)) || undefined;
+      return toThenable(storage.getItem.bind(storage))(options.name).then(function (deserializedStorageValue) {
+        if (deserializedStorageValue) {
+          if (typeof deserializedStorageValue.version === 'number' && deserializedStorageValue.version !== options.version) {
+            if (options.migrate) {
+              return options.migrate(deserializedStorageValue.state, deserializedStorageValue.version);
+            }
+            console.error("State loaded from storage couldn't be migrated since no migrate function was provided");
+          } else {
+            return deserializedStorageValue.state;
+          }
+        }
+      }).then(function (migratedState) {
+        var _get4;
+        stateFromStorage = options.merge(migratedState, (_get4 = get()) != null ? _get4 : configResult);
+        set(stateFromStorage, true);
+        return setItem();
+      }).then(function () {
+        postRehydrationCallback == null || postRehydrationCallback(stateFromStorage, undefined);
+        stateFromStorage = get();
+        _hasHydrated2 = true;
+        finishHydrationListeners.forEach(function (cb) {
+          return cb(stateFromStorage);
+        });
+      }).catch(function (e) {
+        postRehydrationCallback == null || postRehydrationCallback(undefined, e);
+      });
+    };
+    api.persist = {
+      setOptions: function setOptions(newOptions) {
+        options = _extends({}, options, newOptions);
+        if (newOptions.storage) {
+          storage = newOptions.storage;
+        }
+      },
+      clearStorage: function clearStorage() {
+        var _storage2;
+        (_storage2 = storage) == null || _storage2.removeItem(options.name);
+      },
+      getOptions: function getOptions() {
+        return options;
+      },
+      rehydrate: function rehydrate() {
+        return hydrate();
+      },
+      hasHydrated: function hasHydrated() {
+        return _hasHydrated2;
+      },
+      onHydrate: function onHydrate(cb) {
+        hydrationListeners.add(cb);
+        return function () {
+          hydrationListeners.delete(cb);
+        };
+      },
+      onFinishHydration: function onFinishHydration(cb) {
+        finishHydrationListeners.add(cb);
+        return function () {
+          finishHydrationListeners.delete(cb);
+        };
+      }
+    };
+    if (!options.skipHydration) {
+      hydrate();
+    }
+    return stateFromStorage || configResult;
+  };
+};
+var persistImpl = function persistImpl(config, baseOptions) {
+  if ('getStorage' in baseOptions || 'serialize' in baseOptions || 'deserialize' in baseOptions) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn('[DEPRECATED] `getStorage`, `serialize` and `deserialize` options are deprecated. Use `storage` option instead.');
+    }
+    return oldImpl(config, baseOptions);
+  }
+  return newImpl(config, baseOptions);
+};
+var persist = persistImpl;
 
 exports.combine = combine;
+exports.createJSONStorage = createJSONStorage;
 exports.devtools = devtools;
@@ -492,0 +635,0 @@ exports.persist = persist;

middleware/combine.d.ts

@@ -1,5 +0,5 @@
-import { GetState, SetState, StoreApi } from '../vanilla';
-import { NamedSet } from './devtools';
-declare type Combine<T, U> = Omit<T, keyof U> & U;
-export declare const combine: <PrimaryState extends object, SecondaryState extends object>(initialState: PrimaryState, create: (set: SetState<PrimaryState> & NamedSet<PrimaryState>, get: GetState<PrimaryState>, api: StoreApi<PrimaryState>) => SecondaryState) => (set: SetState<Combine<PrimaryState, SecondaryState>>, get: GetState<Combine<PrimaryState, SecondaryState>>, api: StoreApi<Combine<PrimaryState, SecondaryState>>) => Combine<PrimaryState, SecondaryState>;
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla';
+type Write<T, U> = Omit<T, keyof U> & U;
+type Combine = <T extends object, U extends object, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initialState: T, additionalStateCreator: StateCreator<T, Mps, Mcs, U>) => StateCreator<Write<T, U>, Mps, Mcs>;
+export declare const combine: Combine;
 export {};

middleware/devtools.d.ts

@@ -1,2 +0,7 @@
-import { GetState, PartialState, SetState, State, StoreApi } from '../vanilla';
+import type { StateCreator, StoreApi, StoreMutatorIdentifier } from '../vanilla';
+type Config = Parameters<(Window extends {
+    __REDUX_DEVTOOLS_EXTENSION__?: infer T;
+} ? T : {
+    connect: (param: any) => any;
+})['connect']>[0];
 declare module '../vanilla' {
@@ -7,100 +12,39 @@ interface StoreMutators<S, A> {
 }
-declare type Write<T extends object, U extends object> = Omit<T, keyof U> & U;
-declare type Cast<T, U> = T extends U ? T : U;
-declare type WithDevtools<S> = Write<Cast<S, object>, StoreSetStateWithAction<S>> & {
-    /**
-     * @deprecated `devtools` property on the store is deprecated
-     * it will be removed in the next major.
-     * You shouldn't interact with the extension directly. But in case you still want to
-     * you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly
-     */
-    devtools?: DevtoolsType;
-};
-declare type StoreSetStateWithAction<S> = S extends {
-    getState: () => infer T;
-} ? S & {
-    setState: NamedSet<Cast<T, object>>;
+type Cast<T, U> = T extends U ? T : U;
+type Write<T, U> = Omit<T, keyof U> & U;
+type TakeTwo<T> = T extends {
+    length: 0;
+} ? [undefined, undefined] : T extends {
+    length: 1;
+} ? [...a0: Cast<T, unknown[]>, a1: undefined] : T extends {
+    length: 0 | 1;
+} ? [...a0: Cast<T, unknown[]>, a1: undefined] : T extends {
+    length: 2;
+} ? T : T extends {
+    length: 1 | 2;
+} ? T : T extends {
+    length: 0 | 1 | 2;
+} ? T : T extends [infer A0, infer A1, ...unknown[]] ? [A0, A1] : T extends [infer A0, (infer A1)?, ...unknown[]] ? [A0, A1?] : T extends [(infer A0)?, (infer A1)?, ...unknown[]] ? [A0?, A1?] : never;
+type WithDevtools<S> = Write<S, StoreDevtools<S>>;
+type StoreDevtools<S> = S extends {
+    setState: (...a: infer Sa) => infer Sr;
+} ? {
+    setState<A extends string | {
+        type: string;
+    }>(...a: [...a: TakeTwo<Sa>, action?: A]): Sr;
 } : never;
-interface DevtoolsOptions {
+export interface DevtoolsOptions extends Config {
     name?: string;
+    enabled?: boolean;
     anonymousActionType?: string;
-    serialize?: boolean | {
-        date?: boolean;
-        regex?: boolean;
-        undefined?: boolean;
-        nan?: boolean;
-        infinity?: boolean;
-        error?: boolean;
-        symbol?: boolean;
-        map?: boolean;
-        set?: boolean;
-        /**
-         * @deprecated serialize.options is deprecated, just use serialize
-         */
-        options: boolean | {
-            date?: boolean;
-            regex?: boolean;
-            undefined?: boolean;
-            nan?: boolean;
-            infinity?: boolean;
-            error?: boolean;
-            symbol?: boolean;
-            map?: boolean;
-            set?: boolean;
-        };
-    };
+    store?: string;
 }
-declare type DevtoolsType = {
-    /**
-     * @deprecated along with `api.devtools`, `api.devtools.prefix` is deprecated.
-     * We no longer prefix the actions/names, because the `name` option already
-     * creates a separate instance of devtools for each store.
-     */
-    prefix: string;
-    subscribe: (dispatch: any) => () => void;
-    unsubscribe: () => void;
-    send: {
-        (action: string | {
-            type: unknown;
-        }, state: any): void;
-        (action: null, liftedState: any): void;
-    };
-    init: (state: any) => void;
-    error: (payload: any) => void;
-};
-export declare type NamedSet<T extends State> = {
-    <K1 extends keyof T, K2 extends keyof T = K1, K3 extends keyof T = K2, K4 extends keyof T = K3>(partial: PartialState<T, K1, K2, K3, K4>, replace?: boolean, name?: string | {
-        type: unknown;
-    }): void;
-};
-/**
- * @deprecated Use `Mutate<StoreApi<T>, [["zustand/devtools", never]]>`.
- * See tests/middlewaresTypes.test.tsx for usage with multiple middlewares.
- */
-export declare type StoreApiWithDevtools<T extends State> = StoreApi<T> & {
-    setState: NamedSet<T>;
-    /**
-     * @deprecated `devtools` property on the store is deprecated
-     * it will be removed in the next major.
-     * You shouldn't interact with the extension directly. But in case you still want to
-     * you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly
-     */
-    devtools?: DevtoolsType;
-};
-export declare function devtools<S extends State, CustomSetState extends SetState<S>, CustomGetState extends GetState<S>, CustomStoreApi extends StoreApi<S>>(fn: (set: NamedSet<S>, get: CustomGetState, api: CustomStoreApi) => S): (set: CustomSetState, get: CustomGetState, api: CustomStoreApi & StoreApiWithDevtools<S> & {
-    dispatch?: unknown;
-    dispatchFromDevtools?: boolean;
-}) => S;
-/**
- * @deprecated Passing `name` as directly will be not allowed in next major.
- * Pass the `name` in an object `{ name: ... }` instead
- */
-export declare function devtools<S extends State, CustomSetState extends SetState<S> = SetState<S>, CustomGetState extends GetState<S> = GetState<S>, CustomStoreApi extends StoreApi<S> = StoreApi<S>>(fn: (set: NamedSet<S>, get: CustomGetState, api: CustomStoreApi) => S, options?: string): (set: CustomSetState, get: CustomGetState, api: CustomStoreApi & StoreApiWithDevtools<S> & {
-    dispatch?: unknown;
-    dispatchFromDevtools?: boolean;
-}) => S;
-export declare function devtools<S extends State, CustomSetState extends SetState<S>, CustomGetState extends GetState<S>, CustomStoreApi extends StoreApi<S>>(fn: (set: NamedSet<S>, get: CustomGetState, api: CustomStoreApi) => S, options?: DevtoolsOptions): (set: CustomSetState, get: CustomGetState, api: CustomStoreApi & StoreApiWithDevtools<S> & {
-    dispatch?: unknown;
-    dispatchFromDevtools?: boolean;
-}) => S;
+type Devtools = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [...Mps, ['zustand/devtools', never]], Mcs>, devtoolsOptions?: DevtoolsOptions) => StateCreator<T, Mps, [['zustand/devtools', never], ...Mcs]>;
+declare module '../vanilla' {
+    interface StoreMutators<S, A> {
+        'zustand/devtools': WithDevtools<S>;
+    }
+}
+export type NamedSet<T> = WithDevtools<StoreApi<T>>['setState'];
+export declare const devtools: Devtools;
 export {};

middleware/persist.d.ts

@@ -1,18 +0,26 @@
-import { GetState, SetState, State, StoreApi } from '../vanilla';
-declare type DeepPartial<T> = {
-    [P in keyof T]?: DeepPartial<T[P]>;
-};
-export declare type StateStorage = {
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla';
+export interface StateStorage {
     getItem: (name: string) => string | null | Promise<string | null>;
     setItem: (name: string, value: string) => void | Promise<void>;
-    removeItem?: (name: string) => void | Promise<void>;
-};
-declare type StorageValue<S> = {
-    state: DeepPartial<S>;
+    removeItem: (name: string) => void | Promise<void>;
+}
+export type StorageValue<S> = {
+    state: S;
     version?: number;
 };
-export declare type PersistOptions<S, PersistedState extends Partial<S> = Partial<S>> = {
+export interface PersistStorage<S> {
+    getItem: (name: string) => StorageValue<S> | null | Promise<StorageValue<S> | null>;
+    setItem: (name: string, value: StorageValue<S>) => void | Promise<void>;
+    removeItem: (name: string) => void | Promise<void>;
+}
+type JsonStorageOptions = {
+    reviver?: (key: string, value: unknown) => unknown;
+    replacer?: (key: string, value: unknown) => unknown;
+};
+export declare function createJSONStorage<S>(getStorage: () => StateStorage, options?: JsonStorageOptions): PersistStorage<S> | undefined;
+export interface PersistOptions<S, PersistedState = S> {
     /** Name of the storage (must be unique) */
     name: string;
     /**
+     * @deprecated Use `storage` instead.
      * A function returning a storage.
@@ -26,2 +34,3 @@ * The storage must fit `window.localStorage`'s api (or an async version of it).
     /**
+     * @deprecated Use `storage` instead.
      * Use a custom serializer.
@@ -34,4 +43,5 @@ * The returned string will be stored in the storage.
     /**
+     * @deprecated Use `storage` instead.
      * Use a custom deserializer.
-     * Must return an object matching StorageValue<State>
+     * Must return an object matching StorageValue<S>
      *
@@ -43,13 +53,10 @@ * @param str The storage's current value.
     /**
-     * Prevent some items from being stored.
+     * Use a custom persist storage.
      *
-     * @deprecated This options is deprecated and will be removed in the next version. Please use the `partialize` option instead.
-     */
-    blacklist?: (keyof S)[];
-    /**
-     * Only store the listed properties.
+     * Combining `createJSONStorage` helps creating a persist storage
+     * with JSON.parse and JSON.stringify.
      *
-     * @deprecated This options is deprecated and will be removed in the next version. Please use the `partialize` option instead.
+     * @default createJSONStorage(() => localStorage)
      */
-    whitelist?: (keyof S)[];
+    storage?: PersistStorage<PersistedState> | undefined;
     /**
@@ -60,3 +67,3 @@ * Filter the persisted value.
      */
-    partialize?: (state: S) => DeepPartial<S>;
+    partialize?: (state: S) => PersistedState;
     /**
@@ -67,3 +74,3 @@ * A function returning another (optional) function.
      */
-    onRehydrateStorage?: (state: S) => ((state?: S, error?: Error) => void) | void;
+    onRehydrateStorage?: (state: S) => ((state?: S, error?: unknown) => void) | void;
     /**
@@ -78,3 +85,3 @@ * If the stored state's version mismatch the one specified here, the storage will not be used.
      */
-    migrate?: (persistedState: any, version: number) => S | Promise<S>;
+    migrate?: (persistedState: unknown, version: number) => S | Promise<S>;
     /**
@@ -84,31 +91,36 @@ * A function to perform custom hydration merges when combining the stored state with the current one.
      */
-    merge?: (persistedState: any, currentState: S) => S;
-};
-declare type PersistListener<S> = (state: S) => void;
-/**
- * @deprecated Use `Mutate<StoreApi<T>, [["zustand/persist", Partial<T>]]>`.
- * See tests/middlewaresTypes.test.tsx for usage with multiple middlewares.
- */
-export declare type StoreApiWithPersist<S extends State> = StoreApi<S> & StorePersist<S, Partial<S>>;
-declare module '../vanilla' {
-    interface StoreMutators<S, A> {
-        'zustand/persist': WithPersist<S, A>;
-    }
+    merge?: (persistedState: unknown, currentState: S) => S;
+    /**
+     * An optional boolean that will prevent the persist middleware from triggering hydration on initialization,
+     * This allows you to call `rehydrate()` at a specific point in your apps rendering life-cycle.
+     *
+     * This is useful in SSR application.
+     *
+     * @default false
+     */
+    skipHydration?: boolean;
 }
-declare type Write<T extends object, U extends object> = Omit<T, keyof U> & U;
-declare type Cast<T, U> = T extends U ? T : U;
-declare type WithPersist<S, A> = S extends {
-    getState: () => infer T;
-} ? Write<S, StorePersist<Cast<T, State>, A>> : never;
-interface StorePersist<S extends State, Ps> {
+type PersistListener<S> = (state: S) => void;
+type StorePersist<S, Ps> = {
     persist: {
         setOptions: (options: Partial<PersistOptions<S, Ps>>) => void;
         clearStorage: () => void;
-        rehydrate: () => Promise<void>;
+        rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: PersistListener<S>) => () => void;
         onFinishHydration: (fn: PersistListener<S>) => () => void;
+        getOptions: () => Partial<PersistOptions<S, Ps>>;
     };
+};
+type Persist = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = [], U = T>(initializer: StateCreator<T, [...Mps, ['zustand/persist', unknown]], Mcs>, options: PersistOptions<T, U>) => StateCreator<T, Mps, [['zustand/persist', U], ...Mcs]>;
+declare module '../vanilla' {
+    interface StoreMutators<S, A> {
+        'zustand/persist': WithPersist<S, A>;
+    }
 }
-export declare const persist: <S extends object, CustomSetState extends SetState<S> = SetState<S>, CustomGetState extends GetState<S> = GetState<S>, CustomStoreApi extends StoreApi<S> = StoreApi<S>>(config: (set: CustomSetState, get: CustomGetState, api: CustomStoreApi) => S, baseOptions: PersistOptions<S, Partial<S>>) => (set: CustomSetState, get: CustomGetState, api: CustomStoreApi & StoreApi<S> & StorePersist<S, Partial<S>>) => S;
+type Write<T, U> = Omit<T, keyof U> & U;
+type WithPersist<S, A> = S extends {
+    getState: () => infer T;
+} ? Write<S, StorePersist<T, A>> : never;
+export declare const persist: Persist;
 export {};

middleware/redux.d.ts

@@ -1,22 +0,15 @@
-import { GetState, SetState, State, StoreApi } from '../vanilla';
-declare type DevtoolsType = {
-    prefix: string;
-    subscribe: (dispatch: any) => () => void;
-    unsubscribe: () => void;
-    send: (action: string, state: any) => void;
-    init: (state: any) => void;
-    error: (payload: any) => void;
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla';
+type Write<T, U> = Omit<T, keyof U> & U;
+type Action = {
+    type: string;
 };
-/**
- * @deprecated Use `Mutate<StoreApi<T & { dispatch: (a: A) => A }>, [["zustand/redux", A]]>`.
- * See tests/middlewaresTypes.test.tsx for usage with multiple middlewares.
- */
-export declare type StoreApiWithRedux<T extends State, A extends {
-    type: unknown;
-}> = StoreApi<T & {
+type StoreRedux<A> = {
     dispatch: (a: A) => A;
-}> & {
-    dispatch: (a: A) => A;
-    dispatchFromDevtools: boolean;
+    dispatchFromDevtools: true;
 };
+type ReduxState<A> = {
+    dispatch: StoreRedux<A>['dispatch'];
+};
+type WithRedux<S, A> = Write<S, StoreRedux<A>>;
+type Redux = <T, A extends Action, Cms extends [StoreMutatorIdentifier, unknown][] = []>(reducer: (state: T, action: A) => T, initialState: T) => StateCreator<Write<T, ReduxState<A>>, Cms, [['zustand/redux', A]]>;
 declare module '../vanilla' {
@@ -27,28 +20,3 @@ interface StoreMutators<S, A> {
 }
-interface StoreRedux<A extends Action> {
-    dispatch: (a: A) => A;
-    dispatchFromDevtools: true;
-}
-interface Action {
-    type: unknown;
-}
-declare type Write<T extends object, U extends object> = Omit<T, keyof U> & U;
-declare type Cast<T, U> = T extends U ? T : U;
-declare type WithRedux<S, A> = Write<Cast<S, object>, StoreRedux<Cast<A, Action>>>;
-export declare const redux: <S extends object, A extends {
-    type: unknown;
-}>(reducer: (state: S, action: A) => S, initial: S) => (set: SetState<S & {
-    dispatch: (a: A) => A;
-}>, get: GetState<S & {
-    dispatch: (a: A) => A;
-}>, api: StoreApi<S & {
-    dispatch: (a: A) => A;
-}> & {
-    dispatch: (a: A) => A;
-    dispatchFromDevtools: boolean;
-} & {
-    devtools?: DevtoolsType;
-}) => S & {
-    dispatch: (a: A) => A;
-};
+export declare const redux: Redux;
 export {};

middleware/subscribeWithSelector.d.ts

@@ -1,2 +0,10 @@
-import { EqualityChecker, GetState, SetState, State, StateListener, StateSelector, StateSliceListener, StoreApi } from '../vanilla';
+import type { StateCreator, StoreMutatorIdentifier } from '../vanilla';
+type SubscribeWithSelector = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [
+    ...Mps,
+    ['zustand/subscribeWithSelector', never]
+], Mcs>) => StateCreator<T, Mps, [['zustand/subscribeWithSelector', never], ...Mcs]>;
+type Write<T, U> = Omit<T, keyof U> & U;
+type WithSelectorSubscribe<S> = S extends {
+    getState: () => infer T;
+} ? Write<S, StoreSubscribeWithSelector<T>> : never;
 declare module '../vanilla' {
@@ -7,6 +15,3 @@ interface StoreMutators<S, A> {
 }
-declare type WithSelectorSubscribe<S> = S extends {
-    getState: () => infer T;
-} ? Omit<S, 'subscribe'> & StoreSubscribeWithSelector<Extract<T, State>> : never;
-interface StoreSubscribeWithSelector<T extends State> {
+type StoreSubscribeWithSelector<T> = {
     subscribe: {
@@ -19,25 +24,4 @@ (listener: (selectedState: T, previousSelectedState: T) => void): () => void;
     };
-}
-/**
- * @deprecated Use `Mutate<StoreApi<T>, [["zustand/subscribeWithSelector", never]]>`.
- * See tests/middlewaresTypes.test.tsx for usage with multiple middlewares.
- */
-export declare type StoreApiWithSubscribeWithSelector<T extends State> = Omit<StoreApi<T>, 'subscribe'> & {
-    subscribe: {
-        (listener: StateListener<T>): () => void;
-        <StateSlice>(selector: StateSelector<T, StateSlice>, listener: StateSliceListener<StateSlice>, options?: {
-            equalityFn?: EqualityChecker<StateSlice>;
-            fireImmediately?: boolean;
-        }): () => void;
-    };
 };
-export declare const subscribeWithSelector: <S extends object, CustomSetState extends SetState<S> = SetState<S>, CustomGetState extends GetState<S> = GetState<S>, CustomStoreApi extends StoreApi<S> = StoreApi<S>>(fn: (set: CustomSetState, get: CustomGetState, api: CustomStoreApi) => S) => (set: CustomSetState, get: CustomGetState, api: Omit<CustomStoreApi, "subscribe"> & Omit<StoreApi<S>, "subscribe"> & {
-    subscribe: {
-        (listener: StateListener<S>): () => void;
-        <StateSlice>(selector: StateSelector<S, StateSlice>, listener: StateSliceListener<StateSlice>, options?: {
-            equalityFn?: EqualityChecker<StateSlice>;
-            fireImmediately?: boolean;
-        } | undefined): () => void;
-    };
-}) => S;
+export declare const subscribeWithSelector: SubscribeWithSelector;
 export {};

package.json

 {
   "name": "zustand",
   "private": false,
-  "version": "3.7.2",
+  "version": "4.4.7",
   "description": "🐻 Bear necessities for state management in React",
   "main": "./index.js",
   "types": "./index.d.ts",
+  "typesVersions": {
+    "<4.0": {
+      "esm/*": [
+        "ts3.4/*"
+      ],
+      "*": [
+        "ts3.4/*"
+      ]
+    }
+  },
   "files": [
@@ -14,30 +24,126 @@ "**"
     ".": {
-      "types": "./index.d.ts",
-      "module": "./esm/index.js",
-      "import": "./esm/index.mjs",
-      "default": "./index.js"
+      "import": {
+        "types": "./esm/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "module": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      },
+      "default": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      }
     },
     "./vanilla": {
-      "types": "./vanilla.d.ts",
-      "module": "./esm/vanilla.js",
-      "import": "./esm/vanilla.mjs",
-      "default": "./vanilla.js"
+      "import": {
+        "types": "./esm/vanilla.d.mts",
+        "default": "./esm/vanilla.mjs"
+      },
+      "module": {
+        "types": "./esm/vanilla.d.ts",
+        "default": "./esm/vanilla.js"
+      },
+      "default": {
+        "types": "./vanilla.d.ts",
+        "default": "./vanilla.js"
+      }
     },
     "./middleware": {
-      "types": "./middleware.d.ts",
-      "module": "./esm/middleware.js",
-      "import": "./esm/middleware.mjs",
-      "default": "./middleware.js"
+      "import": {
+        "types": "./esm/middleware.d.mts",
+        "default": "./esm/middleware.mjs"
+      },
+      "module": {
+        "types": "./esm/middleware.d.ts",
+        "default": "./esm/middleware.js"
+      },
+      "default": {
+        "types": "./middleware.d.ts",
+        "default": "./middleware.js"
+      }
     },
+    "./middleware/immer": {
+      "import": {
+        "types": "./esm/middleware/immer.d.mts",
+        "default": "./esm/middleware/immer.mjs"
+      },
+      "module": {
+        "types": "./esm/middleware/immer.d.ts",
+        "default": "./esm/middleware/immer.js"
+      },
+      "default": {
+        "types": "./middleware/immer.d.ts",
+        "default": "./middleware/immer.js"
+      }
+    },
     "./shallow": {
-      "types": "./shallow.d.ts",
-      "module": "./esm/shallow.js",
-      "import": "./esm/shallow.mjs",
-      "default": "./shallow.js"
+      "import": {
+        "types": "./esm/shallow.d.mts",
+        "default": "./esm/shallow.mjs"
+      },
+      "module": {
+        "types": "./esm/shallow.d.ts",
+        "default": "./esm/shallow.js"
+      },
+      "default": {
+        "types": "./shallow.d.ts",
+        "default": "./shallow.js"
+      }
     },
+    "./vanilla/shallow": {
+      "import": {
+        "types": "./esm/vanilla/shallow.d.mts",
+        "default": "./esm/vanilla/shallow.mjs"
+      },
+      "module": {
+        "types": "./esm/vanilla/shallow.d.ts",
+        "default": "./esm/vanilla/shallow.js"
+      },
+      "default": {
+        "types": "./vanilla/shallow.d.ts",
+        "default": "./vanilla/shallow.js"
+      }
+    },
+    "./react/shallow": {
+      "import": {
+        "types": "./esm/react/shallow.d.mts",
+        "default": "./esm/react/shallow.mjs"
+      },
+      "module": {
+        "types": "./esm/react/shallow.d.ts",
+        "default": "./esm/react/shallow.js"
+      },
+      "default": {
+        "types": "./react/shallow.d.ts",
+        "default": "./react/shallow.js"
+      }
+    },
+    "./traditional": {
+      "import": {
+        "types": "./esm/traditional.d.mts",
+        "default": "./esm/traditional.mjs"
+      },
+      "module": {
+        "types": "./esm/traditional.d.ts",
+        "default": "./esm/traditional.js"
+      },
+      "default": {
+        "types": "./traditional.d.ts",
+        "default": "./traditional.js"
+      }
+    },
     "./context": {
-      "types": "./context.d.ts",
-      "module": "./esm/context.js",
-      "import": "./esm/context.mjs",
-      "default": "./context.js"
+      "import": {
+        "types": "./esm/context.d.mts",
+        "default": "./esm/context.mjs"
+      },
+      "module": {
+        "types": "./esm/context.d.ts",
+        "default": "./esm/context.js"
+      },
+      "default": {
+        "types": "./context.d.ts",
+        "default": "./context.js"
+      }
     }
@@ -71,10 +177,24 @@ },
   "homepage": "https://github.com/pmndrs/zustand",
+  "dependencies": {
+    "use-sync-external-store": "1.2.0"
+  },
   "peerDependencies": {
+    "immer": ">=9.0",
+    "@types/react": ">=16.8",
     "react": ">=16.8"
   },
   "peerDependenciesMeta": {
+    "immer": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
     "react": {
       "optional": true
     }
+  },
+  "resolutions": {
+    "vite": "4.5.0"
   }
 }

react.d.ts

@@ -1,15 +0,37 @@
-import { EqualityChecker, GetState, SetState, State, StateCreator, StateSelector, StoreApi } from './vanilla';
+import type { Mutate, StateCreator, StoreApi, StoreMutatorIdentifier } from './vanilla';
+type ExtractState<S> = S extends {
+    getState: () => infer T;
+} ? T : never;
+type ReadonlyStoreApi<T> = Pick<StoreApi<T>, 'getState' | 'subscribe'>;
+type WithReact<S extends ReadonlyStoreApi<unknown>> = S & {
+    getServerState?: () => ExtractState<S>;
+};
+export declare function useStore<S extends WithReact<StoreApi<unknown>>>(api: S): ExtractState<S>;
+export declare function useStore<S extends WithReact<StoreApi<unknown>>, U>(api: S, selector: (state: ExtractState<S>) => U): U;
 /**
- * @deprecated Please use UseBoundStore instead
+ * @deprecated Use `useStoreWithEqualityFn` from 'zustand/traditional'
+ * https://github.com/pmndrs/zustand/discussions/1937
  */
-export declare type UseStore<T extends State, CustomStoreApi extends StoreApi<T> = StoreApi<T>> = {
-    (): T;
-    <U>(selector: StateSelector<T, U>, equalityFn?: EqualityChecker<U>): U;
-} & CustomStoreApi;
-export declare type UseBoundStore<T extends State, CustomStoreApi extends StoreApi<T> = StoreApi<T>> = {
-    (): T;
-    <U>(selector: StateSelector<T, U>, equalityFn?: EqualityChecker<U>): U;
-} & CustomStoreApi;
-declare function create<TState extends State, CustomSetState, CustomGetState, CustomStoreApi extends StoreApi<TState>>(createState: StateCreator<TState, CustomSetState, CustomGetState, CustomStoreApi> | CustomStoreApi): UseBoundStore<TState, CustomStoreApi>;
-declare function create<TState extends State>(createState: StateCreator<TState, SetState<TState>, GetState<TState>, any> | StoreApi<TState>): UseBoundStore<TState, StoreApi<TState>>;
-export default create;
+export declare function useStore<S extends WithReact<StoreApi<unknown>>, U>(api: S, selector: (state: ExtractState<S>) => U, equalityFn: ((a: U, b: U) => boolean) | undefined): U;
+export type UseBoundStore<S extends WithReact<ReadonlyStoreApi<unknown>>> = {
+    (): ExtractState<S>;
+    <U>(selector: (state: ExtractState<S>) => U): U;
+    /**
+     * @deprecated Use `createWithEqualityFn` from 'zustand/traditional'
+     */
+    <U>(selector: (state: ExtractState<S>) => U, equalityFn: (a: U, b: U) => boolean): U;
+} & S;
+type Create = {
+    <T, Mos extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [], Mos>): UseBoundStore<Mutate<StoreApi<T>, Mos>>;
+    <T>(): <Mos extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [], Mos>) => UseBoundStore<Mutate<StoreApi<T>, Mos>>;
+    /**
+     * @deprecated Use `useStore` hook to bind store
+     */
+    <S extends StoreApi<unknown>>(store: S): UseBoundStore<S>;
+};
+export declare const create: Create;
+/**
+ * @deprecated Use `import { create } from 'zustand'`
+ */
+declare const _default: Create;
+export default _default;

readme.md

@@ -5,3 +5,3 @@ <p align="center">
 
-[![Build Status](https://img.shields.io/github/workflow/status/pmndrs/zustand/Lint?style=flat&colorA=000000&colorB=000000)](https://github.com/pmndrs/zustand/actions?query=workflow%3ALint)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/pmndrs/zustand/lint-and-type.yml?branch=main&style=flat&colorA=000000&colorB=000000)](https://github.com/pmndrs/zustand/actions?query=workflow%3ALint)
 [![Build Size](https://img.shields.io/bundlephobia/minzip/zustand?label=bundle%20size&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=zustand)
@@ -12,23 +12,25 @@ [![Version](https://img.shields.io/npm/v/zustand?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/zustand)
 
-A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn't boilerplatey or opinionated.
+A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.
 
-Don't disregard it because it's cute. It has quite the claws, lots of time was spent to deal with common pitfalls, like the dreaded [zombie child problem](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children), [react concurrency](https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md), and [context loss](https://github.com/facebook/react/issues/13332) between mixed renderers. It may be the one state-manager in the React space that gets all of these right.
+Don't disregard it because it's cute. It has quite the claws, lots of time was spent dealing with common pitfalls, like the dreaded [zombie child problem](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children), [react concurrency](https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md), and [context loss](https://github.com/facebook/react/issues/13332) between mixed renderers. It may be the one state-manager in the React space that gets all of these right.
 
-You can try a live demo [here](https://githubbox.com/pmndrs/zustand/tree/main/examples).
+You can try a live demo [here](https://githubbox.com/pmndrs/zustand/tree/main/examples/demo).
 
 ```bash
-npm install zustand # or yarn add zustand
+npm install zustand # or yarn add zustand or pnpm add zustand
 ```
 
+:warning: This readme is written for JavaScript users. If you are a TypeScript user, be sure to check out our [TypeScript Usage section](#typescript-usage).
+
 ## First create a store
 
-Your store is a hook! You can put anything in it: primitives, objects, functions. The `set` function *merges* state.
+Your store is a hook! You can put anything in it: primitives, objects, functions. State has to be updated immutably and the `set` function [merges state](./docs/guides/immutable-state-and-merging.md) to help it.
 
 ```jsx
-import create from 'zustand'
+import { create } from 'zustand'
 
-const useStore = create(set => ({
+const useBearStore = create((set) => ({
   bears: 0,
-  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
-  removeAllBears: () => set({ bears: 0 })
+  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+  removeAllBears: () => set({ bears: 0 }),
 }))
@@ -39,7 +41,7 @@ ```
 
-Use the hook anywhere, no providers needed. Select your state and the component will re-render on changes.
+Use the hook anywhere, no providers are needed. Select your state and the component will re-render on changes.
 
 ```jsx
 function BearCounter() {
-  const bears = useStore(state => state.bears)
+  const bears = useBearStore((state) => state.bears)
   return <h1>{bears} around here ...</h1>
@@ -49,3 +51,3 @@ }
 function Controls() {
-  const increasePopulation = useStore(state => state.increasePopulation)
+  const increasePopulation = useBearStore((state) => state.increasePopulation)
   return <button onClick={increasePopulation}>one up</button>
@@ -57,12 +59,12 @@ }
 
-* Simple and un-opinionated
-* Makes hooks the primary means of consuming state
-* Doesn't wrap your app in context providers
-* [Can inform components transiently (without causing render)](#transient-updates-for-often-occuring-state-changes)
+- Simple and un-opinionated
+- Makes hooks the primary means of consuming state
+- Doesn't wrap your app in context providers
+- [Can inform components transiently (without causing render)](#transient-updates-for-often-occurring-state-changes)
 
 ### Why zustand over context?
 
-* Less boilerplate
-* Renders components only on changes
-* Centralized, action-based state management
+- Less boilerplate
+- Renders components only on changes
+- Centralized, action-based state management
 
@@ -78,3 +80,3 @@ ---
 ```jsx
-const state = useStore()
+const state = useBearStore()
 ```
@@ -87,19 +89,30 @@
 ```jsx
-const nuts = useStore(state => state.nuts)
-const honey = useStore(state => state.honey)
+const nuts = useBearStore((state) => state.nuts)
+const honey = useBearStore((state) => state.honey)
 ```
 
-If you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can tell zustand that you want the object to be diffed shallowly by passing the `shallow` equality function.
+If you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can use [useShallow](./docs/guides/prevent-rerenders-with-use-shallow.md) to prevent unnecessary rerenders when the selector output does not change according to shallow equal.
 
 ```jsx
-import shallow from 'zustand/shallow'
+import { create } from 'zustand'
+import { useShallow } from 'zustand/react/shallow'
 
+const useBearStore = create((set) => ({
+  bears: 0,
+  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+  removeAllBears: () => set({ bears: 0 }),
+}))
+
 // Object pick, re-renders the component when either state.nuts or state.honey change
-const { nuts, honey } = useStore(state => ({ nuts: state.nuts, honey: state.honey }), shallow)
+const { nuts, honey } = useBearStore(
+  useShallow((state) => ({ nuts: state.nuts, honey: state.honey })),
+)
 
 // Array pick, re-renders the component when either state.nuts or state.honey change
-const [nuts, honey] = useStore(state => [state.nuts, state.honey], shallow)
+const [nuts, honey] = useBearStore(
+  useShallow((state) => [state.nuts, state.honey]),
+)
 
 // Mapped picks, re-renders the component when state.treats changes in order, count or keys
-const treats = useStore(state => Object.keys(state.treats), shallow)
+const treats = useBearStore(useShallow((state) => Object.keys(state.treats)))
 ```
@@ -110,25 +123,8 @@
 ```jsx
-const treats = useStore(
-  state => state.treats,
-  (oldTreats, newTreats) => compare(oldTreats, newTreats)
+const treats = useBearStore(
+  (state) => state.treats,
+  (oldTreats, newTreats) => compare(oldTreats, newTreats),
 )
 ```
 
-## Memoizing selectors
-
-It is generally recommended to memoize selectors with useCallback. This will prevent unnecessary computations each render. It also allows React to optimize performance in concurrent mode.
-
-```jsx
-const fruit = useStore(useCallback(state => state.fruits[id], [id]))
-```
-
-If a selector doesn't depend on scope, you can define it outside the render function to obtain a fixed reference without useCallback.
-
-```jsx
-const selector = state => state.berries
-
-function Component() {
-  const berries = useStore(selector)
-```
-
 ## Overwriting state
@@ -139,9 +135,9 @@
 ```jsx
-import omit from "lodash-es/omit"
+import omit from 'lodash-es/omit'
 
-const useStore = create(set => ({
+const useFishStore = create((set) => ({
   salmon: 1,
   tuna: 2,
-  deleteEverything: () => set({ }, true), // clears the entire store, actions included
-  deleteTuna: () => set(state => omit(state, ['tuna']), true)
+  deleteEverything: () => set({}, true), // clears the entire store, actions included
+  deleteTuna: () => set((state) => omit(state, ['tuna']), true),
 }))
@@ -155,8 +151,8 @@ ```
 ```jsx
-const useStore = create(set => ({
+const useFishStore = create((set) => ({
   fishies: {},
-  fetch: async pond => {
+  fetch: async (pond) => {
     const response = await fetch(pond)
     set({ fishies: await response.json() })
-  }
+  },
 }))
@@ -170,9 +166,7 @@ ```
 ```jsx
-const useStore = create((set, get) => ({
-  sound: "grunt",
+const useSoundStore = create((set, get) => ({
+  sound: 'grunt',
   action: () => {
     const sound = get().sound
-    // ...
-  }
-})
+    ...
 ```
@@ -182,21 +176,22 @@
 
-Sometimes you need to access state in a non-reactive way, or act upon the store. For these cases the resulting hook has utility functions attached to its prototype.
+Sometimes you need to access state in a non-reactive way or act upon the store. For these cases, the resulting hook has utility functions attached to its prototype.
 
+:warning: This technique is not recommended for adding state in [React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) (typically in Next.js 13 and above). It can lead to unexpected bugs and privacy issues for your users. For more details, see [#2200](https://github.com/pmndrs/zustand/discussions/2200).
+
 ```jsx
-const useStore = create(() => ({ paw: true, snout: true, fur: true }))
+const useDogStore = create(() => ({ paw: true, snout: true, fur: true }))
 
 // Getting non-reactive fresh state
-const paw = useStore.getState().paw
+const paw = useDogStore.getState().paw
 // Listening to all changes, fires synchronously on every change
-const unsub1 = useStore.subscribe(console.log)
+const unsub1 = useDogStore.subscribe(console.log)
 // Updating state, will trigger listeners
-useStore.setState({ paw: false })
+useDogStore.setState({ paw: false })
 // Unsubscribe listeners
 unsub1()
-// Destroying the store (removing all listeners)
-useStore.destroy()
 
 // You can of course use the hook as you always would
 function Component() {
-  const paw = useStore(state => state.paw)
+  const paw = useDogStore((state) => state.paw)
+  ...
 ```
@@ -206,6 +201,7 @@
 
-If you need to subscribe with selector,
+If you need to subscribe with a selector,
 `subscribeWithSelector` middleware will help.
 
 With this middleware `subscribe` accepts an additional signature:
+
 ```ts
@@ -217,56 +213,45 @@ subscribe(selector, callback, options?: { equalityFn, fireImmediately }): Unsubscribe
 import { subscribeWithSelector } from 'zustand/middleware'
-const useStore = create(subscribeWithSelector(() => ({ paw: true, snout: true, fur: true })))
+const useDogStore = create(
+  subscribeWithSelector(() => ({ paw: true, snout: true, fur: true })),
+)
 
 // Listening to selected changes, in this case when "paw" changes
-const unsub2 = useStore.subscribe(state => state.paw, console.log)
+const unsub2 = useDogStore.subscribe((state) => state.paw, console.log)
 // Subscribe also exposes the previous value
-const unsub3 = useStore.subscribe(state => state.paw, (paw, previousPaw) => console.log(paw, previousPaw))
+const unsub3 = useDogStore.subscribe(
+  (state) => state.paw,
+  (paw, previousPaw) => console.log(paw, previousPaw),
+)
 // Subscribe also supports an optional equality function
-const unsub4 = useStore.subscribe(state => [state.paw, state.fur], console.log, { equalityFn: shallow })
+const unsub4 = useDogStore.subscribe(
+  (state) => [state.paw, state.fur],
+  console.log,
+  { equalityFn: shallow },
+)
 // Subscribe and fire immediately
-const unsub5 = useStore.subscribe(state => state.paw, console.log, { fireImmediately: true })
+const unsub5 = useDogStore.subscribe((state) => state.paw, console.log, {
+  fireImmediately: true,
+})
 ```
 
-<details>
-<summary>How to type store with `subscribeWithSelector` in TypeScript</summary>
-
-```ts
-import create, { Mutate, GetState, SetState, StoreApi } from 'zustand'
-import { subscribeWithSelector } from 'zustand/middleware'
-
-type BearState = {
-  paw: boolean
-  snout: boolean
-  fur: boolean
-}
-const useStore = create<
-  BearState,
-  SetState<BearState>,
-  GetState<BearState>,
-  Mutate<StoreApi<BearState>, [["zustand/subscribeWithSelector", never]]>
->(subscribeWithSelector(() => ({ paw: true, snout: true, fur: true })))
-```
-
-For more complex typing with multiple middlewares,
-Please refer [middlewareTypes.test.tsx](./tests/middlewareTypes.test.tsx).
-</details>
-
 ## Using zustand without React
 
-Zustands core can be imported and used without the React dependency. The only difference is that the create function does not return a hook, but the api utilities.
+Zustand core can be imported and used without the React dependency. The only difference is that the create function does not return a hook, but the API utilities.
 
 ```jsx
-import create from 'zustand/vanilla'
+import { createStore } from 'zustand/vanilla'
 
-const store = create(() => ({ ... }))
-const { getState, setState, subscribe, destroy } = store
+const store = createStore((set) => ...)
+const { getState, setState, subscribe } = store
+
+export default store
 ```
 
-You can even consume an existing vanilla store with React:
+You can use a vanilla store with `useStore` hook available since v4.
 
 ```jsx
-import create from 'zustand'
-import vanillaStore from './vanillaStore'
+import { useStore } from 'zustand'
+import { vanillaStore } from './vanillaStore'
 
-const useStore = create(vanillaStore)
+const useBoundStore = (selector) => useStore(vanillaStore, selector)
 ```
@@ -276,3 +261,3 @@
 
-## Transient updates (for often occuring state-changes)
+## Transient updates (for often occurring state-changes)
 
@@ -282,14 +267,15 @@ The subscribe function allows components to bind to a state-portion without forcing re-render on changes. Best combine it with useEffect for automatic unsubscribe on unmount. This can make a [drastic](https://codesandbox.io/s/peaceful-johnson-txtws) performance impact when you are allowed to mutate the view directly.
 ```jsx
-const useStore = create(set => ({ scratches: 0, ... }))
+const useScratchStore = create((set) => ({ scratches: 0, ... }))
 
-function Component() {
+const Component = () => {
   // Fetch initial state
-  const scratchRef = useRef(useStore.getState().scratches)
+  const scratchRef = useRef(useScratchStore.getState().scratches)
   // Connect to the store on mount, disconnect on unmount, catch state-changes in a reference
-  useEffect(() => useStore.subscribe(
+  useEffect(() => useScratchStore.subscribe(
     state => (scratchRef.current = state.scratches)
   ), [])
+  ...
 ```
 
-## Sick of reducers and changing nested state? Use Immer!
+## Sick of reducers and changing nested states? Use Immer!
 
@@ -299,15 +285,20 @@ Reducing nested structures is tiresome. Have you tried [immer](https://github.com/mweststrate/immer)?
 ```jsx
-import produce from 'immer'
+import { produce } from 'immer'
 
-const useStore = create(set => ({
-  lush: { forest: { contains: { a: "bear" } } },
-  clearForest: () => set(produce(state => {
-    state.lush.forest.contains = null
-  }))
+const useLushStore = create((set) => ({
+  lush: { forest: { contains: { a: 'bear' } } },
+  clearForest: () =>
+    set(
+      produce((state) => {
+        state.lush.forest.contains = null
+      }),
+    ),
 }))
 
-const clearForest = useStore(state => state.clearForest)
-clearForest();
+const clearForest = useLushStore((state) => state.clearForest)
+clearForest()
 ```
 
+[Alternatively, there are some other solutions.](./docs/guides/updating-state.md#with-immer)
+
 ## Middleware
@@ -319,100 +310,88 @@
 // Log every time state is changed
-const log = config => (set, get, api) => config(args => {
-  console.log("  applying", args)
-  set(args)
-  console.log("  new state", get())
-}, get, api)
+const log = (config) => (set, get, api) =>
+  config(
+    (...args) => {
+      console.log('  applying', args)
+      set(...args)
+      console.log('  new state', get())
+    },
+    get,
+    api,
+  )
 
-// Turn the set method into an immer proxy
-const immer = config => (set, get, api) => config((partial, replace) => {
-  const nextState = typeof partial === 'function'
-      ? produce(partial)
-      : partial
-  return set(nextState, replace)
-}, get, api)
-
-const useStore = create(
-  log(
-    immer((set) => ({
-      bees: false,
-      setBees: (input) => set((state) => void (state.bees = input)),
-    })),
-  ),
+const useBeeStore = create(
+  log((set) => ({
+    bees: false,
+    setBees: (input) => set({ bees: input }),
+  })),
 )
 ```
 
-<details>
-<summary>How to pipe middlewares</summary>
+## Persist middleware
 
-```js
-import create from "zustand"
-import produce from "immer"
-import pipe from "ramda/es/pipe"
+You can persist your store's data using any kind of storage.
 
-/* log and immer functions from previous example */
-/* you can pipe as many middlewares as you want */
-const createStore = pipe(log, immer, create)
+```jsx
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
 
-const useStore = createStore(set => ({
-  bears: 1,
-  increasePopulation: () => set(state => ({ bears: state.bears + 1 }))
-}))
-
-export default useStore
+const useFishStore = create(
+  persist(
+    (set, get) => ({
+      fishes: 0,
+      addAFish: () => set({ fishes: get().fishes + 1 }),
+    }),
+    {
+      name: 'food-storage', // name of the item in the storage (must be unique)
+      storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
+    },
+  ),
+)
 ```
 
-For a TS example see the following [discussion](https://github.com/pmndrs/zustand/discussions/224#discussioncomment-118208)
-</details>
+[See the full documentation for this middleware.](./docs/integrations/persisting-store-data.md)
 
-<details>
-<summary>How to type immer middleware in TypeScript</summary>
+## Immer middleware
 
-There is a reference implementation in [middlewareTypes.test.tsx](./tests/middlewareTypes.test.tsx) with some use cases.
-You can use any simplified variant based on your requirement.
-</details>
+Immer is available as middleware too.
 
-## Persist middleware
-
-You can persist your store's data using any kind of storage.
-
 ```jsx
-import create from "zustand"
-import { persist } from "zustand/middleware"
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
 
-export const useStore = create(persist(
-  (set, get) => ({
-    fishes: 0,
-    addAFish: () => set({ fishes: get().fishes + 1 })
-  }),
-  {
-    name: "food-storage", // unique name
-    getStorage: () => sessionStorage, // (optional) by default, 'localStorage' is used
-  }
-))
+const useBeeStore = create(
+  immer((set) => ({
+    bees: 0,
+    addBees: (by) =>
+      set((state) => {
+        state.bees += by
+      }),
+  })),
+)
 ```
 
-[See the full documentation for this middleware.](https://github.com/pmndrs/zustand/wiki/Persisting-the-store's-data)
-
 ## Can't live without redux-like reducers and action types?
 
 ```jsx
-const types = { increase: "INCREASE", decrease: "DECREASE" }
+const types = { increase: 'INCREASE', decrease: 'DECREASE' }
 
 const reducer = (state, { type, by = 1 }) => {
   switch (type) {
-    case types.increase: return { grumpiness: state.grumpiness + by }
-    case types.decrease: return { grumpiness: state.grumpiness - by }
+    case types.increase:
+      return { grumpiness: state.grumpiness + by }
+    case types.decrease:
+      return { grumpiness: state.grumpiness - by }
   }
 }
 
-const useStore = create(set => ({
+const useGrumpyStore = create((set) => ({
   grumpiness: 0,
-  dispatch: args => set(state => reducer(state, args)),
+  dispatch: (args) => set((state) => reducer(state, args)),
 }))
 
-const dispatch = useStore(state => state.dispatch)
+const dispatch = useGrumpyStore((state) => state.dispatch)
 dispatch({ type: types.increase, by: 2 })
 ```
 
-Or, just use our redux-middleware. It wires up your main-reducer, sets initial state, and adds a dispatch function to the state itself and the vanilla api. Try [this](https://codesandbox.io/s/amazing-kepler-swxol) example.
+Or, just use our redux-middleware. It wires up your main-reducer, sets the initial state, and adds a dispatch function to the state itself and the vanilla API.
 
@@ -422,29 +401,18 @@ ```jsx
 
-const useStore = create(redux(reducer, initialState))
+const useGrumpyStore = create(redux(reducer, initialState))
 ```
 
-## Calling actions outside a React event handler
+## Redux devtools
 
-Because React handles `setState` synchronously if it's called outside an event handler. Updating the state outside an event handler will force react to update the components synchronously, therefore adding the risk of encountering the zombie-child effect.
-In order to fix this, the action needs to be wrapped in `unstable_batchedUpdates`
-
 ```jsx
-import { unstable_batchedUpdates } from 'react-dom' // or 'react-native'
+import { devtools } from 'zustand/middleware'
 
-const useStore = create((set) => ({
-  fishes: 0,
-  increaseFishes: () => set((prev) => ({ fishes: prev.fishes + 1 }))
-}))
-
-const nonReactCallback = () => {
-  unstable_batchedUpdates(() => {
-    useStore.getState().increaseFishes()
-  })
-}
+// Usage with a plain action store, it will log actions as "setState"
+const usePlainStore = create(devtools((set) => ...))
+// Usage with a redux store, it will log full action types
+const useReduxStore = create(devtools(redux(reducer, initialState)))
 ```
 
-More details: https://github.com/pmndrs/zustand/issues/302
+One redux devtools connection for multiple stores
 
-## Redux devtools
-
 ```jsx
@@ -454,16 +422,20 @@ import { devtools } from 'zustand/middleware'
 // Usage with a plain action store, it will log actions as "setState"
-const useStore = create(devtools(store))
+const usePlainStore1 = create(devtools((set) => ..., { name, store: storeName1 }))
+const usePlainStore2 = create(devtools((set) => ..., { name, store: storeName2 }))
 // Usage with a redux store, it will log full action types
-const useStore = create(devtools(redux(reducer, initialState)))
+const useReduxStore = create(devtools(redux(reducer, initialState)), , { name, store: storeName3 })
+const useReduxStore = create(devtools(redux(reducer, initialState)), , { name, store: storeName4 })
 ```
 
-devtools takes the store function as its first argument, optionally you can name the store or configure [serialize](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#serialize) options with a second argument.  
-  
-Name store: `devtools(store, {name: "MyStore"})`, which will create a seperate instance named "MyStore" in the devtools.
+Assigning different connection names will separate stores in redux devtools. This also helps group different stores into separate redux devtools connections.
 
-Serialize options: `devtools(store, { serialize: { options: true } })`.
-  
+devtools takes the store function as its first argument, optionally you can name the store or configure [serialize](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#serialize) options with a second argument.
+
+Name store: `devtools(..., {name: "MyStore"})`, which will create a separate instance named "MyStore" in the devtools.
+
+Serialize options: `devtools(..., { serialize: { options: true } })`.
+
 #### Logging Actions
 
-devtools will only log actions from each separated store unlike in a typical *combined reducers* redux store. See an approach to combining stores https://github.com/pmndrs/zustand/issues/163
+devtools will only log actions from each separated store unlike in a typical _combined reducers_ redux store. See an approach to combining stores https://github.com/pmndrs/zustand/issues/163
 
@@ -473,138 +445,71 @@ You can log a specific action type for each `set` function by passing a third parameter:
 ```jsx
-const createBearSlice = (set, get) => ({
-  eatFish: () =>
-    set(
-      (prev) => ({ fishes: prev.fishes > 1 ? prev.fishes - 1 : 0 }),
-      false,
-      "bear/eatFish"
-    ),
-})
+const useBearStore = create(devtools((set) => ({
+  ...
+  eatFish: () => set(
+    (prev) => ({ fishes: prev.fishes > 1 ? prev.fishes - 1 : 0 }),
+    false,
+    'bear/eatFish'
+  ),
+  ...
 ```
 
-If an action type is not provided, it is defaulted to "anonymous". You can customize this default value by providing an `anonymousActionType` parameter: 
+You can also log the action's type along with its payload:
 
 ```jsx
+  ...
+  addFishes: (count) => set(
+    (prev) => ({ fishes: prev.fishes + count }),
+    false,
+    { type: 'bear/addFishes', count, }
+  ),
+  ...
+```
+
+If an action type is not provided, it is defaulted to "anonymous". You can customize this default value by providing an `anonymousActionType` parameter:
+
+```jsx
 devtools(..., { anonymousActionType: 'unknown', ... })
 ```
 
+If you wish to disable devtools (on production for instance). You can customize this setting by providing the `enabled` parameter:
+
+```jsx
+devtools(..., { enabled: false, ... })
+```
+
 ## React context
 
-The store created with `create` doesn't require context providers. In some cases, you may want to use contexts for dependency injection or if you want to initialize your store with props from a component. Because the store is a hook, passing it as a normal context value may violate rules of hooks. To avoid misusage, a special `createContext` is provided.
+The store created with `create` doesn't require context providers. In some cases, you may want to use contexts for dependency injection or if you want to initialize your store with props from a component. Because the normal store is a hook, passing it as a normal context value may violate the rules of hooks.
 
+The recommended method available since v4 is to use the vanilla store.
+
 ```jsx
-import create from 'zustand'
-import createContext from 'zustand/context'
+import { createContext, useContext } from 'react'
+import { createStore, useStore } from 'zustand'
 
-const { Provider, useStore } = createContext()
+const store = createStore(...) // vanilla store without hooks
 
-const createStore = () => create(...)
+const StoreContext = createContext()
 
 const App = () => (
-  <Provider createStore={createStore}>
+  <StoreContext.Provider value={store}>
     ...
-  </Provider>
+  </StoreContext.Provider>
 )
 
 const Component = () => {
-  const state = useStore()
-  const slice = useStore(selector)
+  const store = useContext(StoreContext)
+  const slice = useStore(store, selector)
   ...
-}
 ```
-<details>
-  <summary>createContext usage in real components</summary>
 
-  ```jsx
-  import create from "zustand";
-  import createContext from "zustand/context";
+## TypeScript Usage
 
-  // Best practice: You can move the below createContext() and createStore to a separate file(store.js) and import the Provider, useStore here/wherever you need.
+Basic typescript usage doesn't require anything special except for writing `create<State>()(...)` instead of `create(...)`...
 
-  const { Provider, useStore } = createContext();
+```ts
+import { create } from 'zustand'
+import { devtools, persist } from 'zustand/middleware'
+import type {} from '@redux-devtools/extension' // required for devtools typing
 
-  const createStore = () =>
-    create((set) => ({
-      bears: 0,
-      increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
-      removeAllBears: () => set({ bears: 0 })
-    }));
-
-  const Button = () => {
-    return (
-        {/** store() - This will create a store for each time using the Button component instead of using one store for all components **/}
-      <Provider createStore={createStore}> 
-        <ButtonChild />
-      </Provider>
-    );
-  };
-
-  const ButtonChild = () => {
-    const state = useStore();
-    return (
-      <div>
-        {state.bears}
-        <button
-          onClick={() => {
-            state.increasePopulation();
-          }}
-        >
-          +
-        </button>
-      </div>
-    );
-  };
-
-  export default function App() {
-    return (
-      <div className="App">
-        <Button />
-        <Button />
-      </div>
-    );
-  }
-  ```
-</details>
-
-<details>
-  <summary>createContext usage with initialization from props (in TypeScript)</summary>
-
-  ```tsx
-  import create from "zustand";
-  import createContext from "zustand/context";
-
-  type BearState = {
-    bears: number
-    increase: () => void
-  }
-
-  // pass the type to `createContext` rather than to `create`
-  const { Provider, useStore } = createContext<BearState>();
-
-  export default function App({ initialBears }: { initialBears: number }) {
-    return (
-      <Provider
-        createStore={() =>
-          create((set) => ({
-            bears: initialBears,
-            increase: () => set((state) => ({ bears: state.bears + 1 })),
-          }))
-        }
-      >
-        <Button />
-      </Provider>
-  )
-}
-  ```
-</details>
-
-## Typing your store and `combine` middleware
-
-```tsx
-// You can use `type`
-type BearState = {
-  bears: number
-  increase: (by: number) => void
-}
-
-// Or `interface`
 interface BearState {
@@ -615,18 +520,13 @@ bears: number
 
-// And it is going to work for both
-const useStore = create<BearState>(set => ({
-  bears: 0,
-  increase: (by) => set(state => ({ bears: state.bears + by })),
-}))
-```
-
-Or, use `combine` and let tsc infer types. This merges two states shallowly.
-
-```tsx
-import { combine } from 'zustand/middleware'
-
-const useStore = create(
-  combine(
-    { bears: 0 },
-    (set) => ({ increase: (by: number) => set((state) => ({ bears: state.bears + by })) })
+const useBearStore = create<BearState>()(
+  devtools(
+    persist(
+      (set) => ({
+        bears: 0,
+        increase: (by) => set((state) => ({ bears: state.bears + by })),
+      }),
+      {
+        name: 'bear-storage',
+      },
+    ),
   ),
@@ -636,20 +536,18 @@ )
 
-Typing with multiple middleware might require some TypeScript knowledge. Refer some working examples in [middlewareTypes.test.tsx](./tests/middlewareTypes.test.tsx).
-  
+A more complete TypeScript guide is [here](docs/guides/typescript.md).
+
 ## Best practices
-  
-* You may wonder how to organize your code for better maintenance: [Splitting the store into seperate slices](https://github.com/pmndrs/zustand/wiki/Splitting-the-store-into-separate-slices).
-  
-* Recommended usage for this unopinionated library: [Flux inspired practice](https://github.com/pmndrs/zustand/wiki/Flux-inspired-practice).
-  
-## Testing
 
-For information regarding testing with Zustand, visit the dedicated [Wiki page](https://github.com/pmndrs/zustand/wiki/Testing).
+- You may wonder how to organize your code for better maintenance: [Splitting the store into separate slices](./docs/guides/slices-pattern.md).
+- Recommended usage for this unopinionated library: [Flux inspired practice](./docs/guides/flux-inspired-practice.md).
+- [Calling actions outside a React event handler in pre-React 18](./docs/guides/event-handler-in-pre-react-18.md).
+- [Testing](./docs/guides/testing.md)
+- For more, have a look [in the docs folder](./docs/)
 
-## 3rd-Party Libraries
+## Third-Party Libraries
 
-Some users may want to extends Zustand's feature set which can be done using 3rd-party libraries made by the community. For information regarding 3rd-party libraries with Zustand, visit the dedicated [Wiki page](https://github.com/pmndrs/zustand/wiki/3rd-Party-Libraries).
+Some users may want to extend Zustand's feature set which can be done using third-party libraries made by the community. For information regarding third-party libraries with Zustand, visit [the doc](./docs/integrations/third-party-libraries.md).
 
 ## Comparison with other libraries
 
-- [Difference between zustand and valtio](https://github.com/pmndrs/zustand/wiki/Difference-between-zustand-and-valtio)
+- [Difference between zustand and other state management libraries for React](https://docs.pmnd.rs/zustand/getting-started/comparison)

shallow.d.ts

@@ -1,1 +0,7 @@
-export default function shallow<T, U>(objA: T, objB: U): boolean;
+import { shallow } from './vanilla/shallow';
+/**
+ * @deprecated Use `import { shallow } from 'zustand/shallow'`
+ */
+declare const _default: typeof shallow;
+export default _default;
+export { shallow };

shallow.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 
-function shallow(objA, objB) {
+function shallow$1(objA, objB) {
   if (Object.is(objA, objB)) {
     return true;
   }
-
   if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
     return false;
   }
-
+  if (objA instanceof Map && objB instanceof Map) {
+    if (objA.size !== objB.size) return false;
+    for (var _iterator = _createForOfIteratorHelperLoose(objA), _step; !(_step = _iterator()).done;) {
+      var _step$value = _step.value,
+        key = _step$value[0],
+        value = _step$value[1];
+      if (!Object.is(value, objB.get(key))) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (objA instanceof Set && objB instanceof Set) {
+    if (objA.size !== objB.size) return false;
+    for (var _iterator2 = _createForOfIteratorHelperLoose(objA), _step2; !(_step2 = _iterator2()).done;) {
+      var _value = _step2.value;
+      if (!objB.has(_value)) {
+        return false;
+      }
+    }
+    return true;
+  }
   var keysA = Object.keys(objA);
-
   if (keysA.length !== Object.keys(objB).length) {
     return false;
   }
-
   for (var i = 0; i < keysA.length; i++) {
@@ -25,6 +73,17 @@ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
   }
-
   return true;
 }
 
-exports["default"] = shallow;
+var shallow = (function (objA, objB) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn("[DEPRECATED] Default export is deprecated. Instead use `import { shallow } from 'zustand/shallow'`.");
+  }
+  return shallow$1(objA, objB);
+});
+
+exports.default = shallow;
+exports.shallow = shallow$1;
+
+module.exports = shallow;
+module.exports.shallow = shallow$1;
+exports.default = module.exports;

system/context.development.js

@@ -1,11 +0,9 @@
-System.register(['react'], (function (exports) {
+System.register(['react', 'zustand/traditional'], (function (exports) {
   'use strict';
-  var createContext$1, useRef, createElement, useContext, useMemo;
+  var ReactExports, useStoreWithEqualityFn;
   return {
     setters: [function (module) {
-      createContext$1 = module.createContext;
-      useRef = module.useRef;
-      createElement = module.createElement;
-      useContext = module.useContext;
-      useMemo = module.useMemo;
+      ReactExports = module.default;
+    }, function (module) {
+      useStoreWithEqualityFn = module.useStoreWithEqualityFn;
     }],
@@ -16,6 +14,17 @@ execute: (function () {
 
+      const {
+        createElement,
+        createContext: reactCreateContext,
+        useContext,
+        useMemo,
+        useRef
+      } = ReactExports;
       function createContext() {
-        const ZustandContext = createContext$1(void 0);
+        {
+          console.warn(
+            "[DEPRECATED] `context` will be removed in a future version. Instead use `import { createStore, useStore } from 'zustand'`. See: https://github.com/pmndrs/zustand/discussions/1180."
+          );
+        }
+        const ZustandContext = reactCreateContext(void 0);
         const Provider = ({
-          initialStore,
           createStore,
@@ -26,34 +35,35 @@ children
           if (!storeRef.current) {
-            if (initialStore) {
-              console.warn("Provider initialStore is deprecated and will be removed in the next version.");
-              if (!createStore) {
-                createStore = () => initialStore;
-              }
-            }
             storeRef.current = createStore();
           }
-          return createElement(ZustandContext.Provider, { value: storeRef.current }, children);
+          return createElement(
+            ZustandContext.Provider,
+            { value: storeRef.current },
+            children
+          );
         };
-        const useStore = (selector, equalityFn = Object.is) => {
-          const useProviderStore = useContext(ZustandContext);
-          if (!useProviderStore) {
-            throw new Error("Seems like you have not used zustand provider as an ancestor.");
+        const useContextStore = (selector, equalityFn) => {
+          const store = useContext(ZustandContext);
+          if (!store) {
+            throw new Error(
+              "Seems like you have not used zustand provider as an ancestor."
+            );
           }
-          return useProviderStore(selector, equalityFn);
+          return useStoreWithEqualityFn(
+            store,
+            selector,
+            equalityFn
+          );
         };
         const useStoreApi = () => {
-          const useProviderStore = useContext(ZustandContext);
-          if (!useProviderStore) {
-            throw new Error("Seems like you have not used zustand provider as an ancestor.");
+          const store = useContext(ZustandContext);
+          if (!store) {
+            throw new Error(
+              "Seems like you have not used zustand provider as an ancestor."
+            );
           }
-          return useMemo(() => ({
-            getState: useProviderStore.getState,
-            setState: useProviderStore.setState,
-            subscribe: useProviderStore.subscribe,
-            destroy: useProviderStore.destroy
-          }), [useProviderStore]);
+          return useMemo(() => ({ ...store }), [store]);
         };
         return {
           Provider,
-          useStore,
+          useStore: useContextStore,
           useStoreApi
@@ -60,0 +70,0 @@ };

system/context.production.js

@@ -1,1 +0,1 @@
-System.register(["react"],function(v){"use strict";var a,u,c,s,d;return{setters:[function(t){a=t.createContext,u=t.useRef,c=t.createElement,s=t.useContext,d=t.useMemo}],execute:function(){v("default",t);function t(){const o=a(void 0);return{Provider:({initialStore:e,createStore:r,children:n})=>{const i=u();return i.current||(e&&(console.warn("Provider initialStore is deprecated and will be removed in the next version."),r||(r=()=>e)),i.current=r()),c(o.Provider,{value:i.current},n)},useStore:(e,r=Object.is)=>{const n=s(o);if(!n)throw new Error("Seems like you have not used zustand provider as an ancestor.");return n(e,r)},useStoreApi:()=>{const e=s(o);if(!e)throw new Error("Seems like you have not used zustand provider as an ancestor.");return d(()=>({getState:e.getState,setState:e.setState,subscribe:e.subscribe,destroy:e.destroy}),[e])}}}}}});
+System.register(["react","zustand/traditional"],function(a){"use strict";var o,s;return{setters:[function(r){o=r.default},function(r){s=r.useStoreWithEqualityFn}],execute:function(){a("default",l);const{createElement:r,createContext:c,useContext:i,useMemo:d,useRef:f}=o;function l(){const n=c(void 0);return{Provider:({createStore:e,children:u})=>{const t=f();return t.current||(t.current=e()),r(n.Provider,{value:t.current},u)},useStore:(e,u)=>{const t=i(n);if(!t)throw new Error("Seems like you have not used zustand provider as an ancestor.");return s(t,e,u)},useStoreApi:()=>{const e=i(n);if(!e)throw new Error("Seems like you have not used zustand provider as an ancestor.");return d(()=>({...e}),[e])}}}}}});

system/index.development.js

@@ -1,123 +0,66 @@
-System.register(['react'], (function (exports) {
+System.register(['zustand/vanilla', 'react', 'use-sync-external-store/shim/with-selector'], (function (exports) {
   'use strict';
-  var useReducer, useRef, useDebugValue, useEffect, useLayoutEffect;
+  var _starExcludes = {
+    create: 1,
+    default: 1,
+    useStore: 1
+  };
+  var createStore, ReactExports, useSyncExternalStoreExports;
   return {
     setters: [function (module) {
-      useReducer = module.useReducer;
-      useRef = module.useRef;
-      useDebugValue = module.useDebugValue;
-      useEffect = module.useEffect;
-      useLayoutEffect = module.useLayoutEffect;
+      createStore = module.createStore;
+      var setter = {};
+      for (var name in module) {
+        if (!_starExcludes[name]) setter[name] = module[name];
+      }
+      exports(setter);
+    }, function (module) {
+      ReactExports = module.default;
+    }, function (module) {
+      useSyncExternalStoreExports = module.default;
     }],
     execute: (function () {
 
-      exports('default', create);
+      exports('useStore', useStore);
 
-      function createStore(createState) {
-        let state;
-        const listeners = /* @__PURE__ */ new Set();
-        const setState = (partial, replace) => {
-          const nextState = typeof partial === "function" ? partial(state) : partial;
-          if (nextState !== state) {
-            const previousState = state;
-            state = replace ? nextState : Object.assign({}, state, nextState);
-            listeners.forEach((listener) => listener(state, previousState));
-          }
-        };
-        const getState = () => state;
-        const subscribeWithSelector = (listener, selector = getState, equalityFn = Object.is) => {
-          console.warn("[DEPRECATED] Please use `subscribeWithSelector` middleware");
-          let currentSlice = selector(state);
-          function listenerToAdd() {
-            const nextSlice = selector(state);
-            if (!equalityFn(currentSlice, nextSlice)) {
-              const previousSlice = currentSlice;
-              listener(currentSlice = nextSlice, previousSlice);
-            }
-          }
-          listeners.add(listenerToAdd);
-          return () => listeners.delete(listenerToAdd);
-        };
-        const subscribe = (listener, selector, equalityFn) => {
-          if (selector || equalityFn) {
-            return subscribeWithSelector(listener, selector, equalityFn);
-          }
-          listeners.add(listener);
-          return () => listeners.delete(listener);
-        };
-        const destroy = () => listeners.clear();
-        const api = { setState, getState, subscribe, destroy };
-        state = createState(setState, getState, api);
-        return api;
+      const { useDebugValue } = ReactExports;
+      const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
+      let didWarnAboutEqualityFn = false;
+      function useStore(api, selector = api.getState, equalityFn) {
+        if (equalityFn && !didWarnAboutEqualityFn) {
+          console.warn(
+            "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
+          );
+          didWarnAboutEqualityFn = true;
+        }
+        const slice = useSyncExternalStoreWithSelector(
+          api.subscribe,
+          api.getState,
+          api.getServerState || api.getState,
+          selector,
+          equalityFn
+        );
+        useDebugValue(slice);
+        return slice;
       }
-
-      const isSSR = typeof window === "undefined" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-      const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
-      function create(createState) {
+      const createImpl = (createState) => {
+        if (typeof createState !== "function") {
+          console.warn(
+            "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
+          );
+        }
         const api = typeof createState === "function" ? createStore(createState) : createState;
-        const useStore = (selector = api.getState, equalityFn = Object.is) => {
-          const [, forceUpdate] = useReducer((c) => c + 1, 0);
-          const state = api.getState();
-          const stateRef = useRef(state);
-          const selectorRef = useRef(selector);
-          const equalityFnRef = useRef(equalityFn);
-          const erroredRef = useRef(false);
-          const currentSliceRef = useRef();
-          if (currentSliceRef.current === void 0) {
-            currentSliceRef.current = selector(state);
-          }
-          let newStateSlice;
-          let hasNewStateSlice = false;
-          if (stateRef.current !== state || selectorRef.current !== selector || equalityFnRef.current !== equalityFn || erroredRef.current) {
-            newStateSlice = selector(state);
-            hasNewStateSlice = !equalityFn(currentSliceRef.current, newStateSlice);
-          }
-          useIsomorphicLayoutEffect(() => {
-            if (hasNewStateSlice) {
-              currentSliceRef.current = newStateSlice;
-            }
-            stateRef.current = state;
-            selectorRef.current = selector;
-            equalityFnRef.current = equalityFn;
-            erroredRef.current = false;
-          });
-          const stateBeforeSubscriptionRef = useRef(state);
-          useIsomorphicLayoutEffect(() => {
-            const listener = () => {
-              try {
-                const nextState = api.getState();
-                const nextStateSlice = selectorRef.current(nextState);
-                if (!equalityFnRef.current(currentSliceRef.current, nextStateSlice)) {
-                  stateRef.current = nextState;
-                  currentSliceRef.current = nextStateSlice;
-                  forceUpdate();
-                }
-              } catch (error) {
-                erroredRef.current = true;
-                forceUpdate();
-              }
-            };
-            const unsubscribe = api.subscribe(listener);
-            if (api.getState() !== stateBeforeSubscriptionRef.current) {
-              listener();
-            }
-            return unsubscribe;
-          }, []);
-          const sliceToReturn = hasNewStateSlice ? newStateSlice : currentSliceRef.current;
-          useDebugValue(sliceToReturn);
-          return sliceToReturn;
-        };
-        Object.assign(useStore, api);
-        useStore[Symbol.iterator] = function() {
-          console.warn("[useStore, api] = create() is deprecated and will be removed in v4");
-          const items = [useStore, api];
-          return {
-            next() {
-              const done = items.length <= 0;
-              return { value: items.shift(), done };
-            }
-          };
-        };
-        return useStore;
-      }
+        const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
+        Object.assign(useBoundStore, api);
+        return useBoundStore;
+      };
+      const create = exports('create', (createState) => createState ? createImpl(createState) : createImpl);
+      var react = exports('default', (createState) => {
+        {
+          console.warn(
+            "[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`."
+          );
+        }
+        return create(createState);
+      });
 
@@ -124,0 +67,0 @@ })

system/index.production.js

@@ -1,1 +0,1 @@
-System.register(["react"],function(O){"use strict";var y,f,v,E,p;return{setters:[function(d){y=d.useReducer,f=d.useRef,v=d.useDebugValue,E=d.useEffect,p=d.useLayoutEffect}],execute:function(){O("default",A);function d(g){let e;const c=new Set,u=(t,s)=>{const r=typeof t=="function"?t(e):t;if(r!==e){const a=e;e=s?r:Object.assign({},e,r),c.forEach(n=>n(e,a))}},o=()=>e,S=(t,s=o,r=Object.is)=>{console.warn("[DEPRECATED] Please use `subscribeWithSelector` middleware");let a=s(e);function n(){const l=s(e);if(!r(a,l)){const b=a;t(a=l,b)}}return c.add(n),()=>c.delete(n)},i={setState:u,getState:o,subscribe:(t,s,r)=>s||r?S(t,s,r):(c.add(t),()=>c.delete(t)),destroy:()=>c.clear()};return e=g(u,o,i),i}const x=typeof window>"u"||!window.navigator||/ServerSideRendering|^Deno\//.test(window.navigator.userAgent),R=x?E:p;function A(g){const e=typeof g=="function"?d(g):g,c=(u=e.getState,o=Object.is)=>{const[,S]=y(w=>w+1,0),i=e.getState(),t=f(i),s=f(u),r=f(o),a=f(!1),n=f();n.current===void 0&&(n.current=u(i));let l,b=!1;(t.current!==i||s.current!==u||r.current!==o||a.current)&&(l=u(i),b=!o(n.current,l)),R(()=>{b&&(n.current=l),t.current=i,s.current=u,r.current=o,a.current=!1});const T=f(i);R(()=>{const w=()=>{try{const D=e.getState(),j=s.current(D);r.current(n.current,j)||(t.current=D,n.current=j,S())}catch{a.current=!0,S()}},C=e.subscribe(w);return e.getState()!==T.current&&w(),C},[]);const h=b?l:n.current;return v(h),h};return Object.assign(c,e),c[Symbol.iterator]=function(){console.warn("[useStore, api] = create() is deprecated and will be removed in v4");const u=[c,e];return{next(){const o=u.length<=0;return{value:u.shift(),done:o}}}},c}}}});
+System.register(["zustand/vanilla","react","use-sync-external-store/shim/with-selector"],function(c){"use strict";var l={create:1,default:1,useStore:1},o,i,f;return{setters:[function(t){o=t.createStore;var n={};for(var r in t)l[r]||(n[r]=t[r]);c(n)},function(t){i=t.default},function(t){f=t.default}],execute:function(){c("useStore",r);const{useDebugValue:t}=i,{useSyncExternalStoreWithSelector:n}=f;function r(e,s=e.getState,a){const u=n(e.subscribe,e.getState,e.getServerState||e.getState,s,a);return t(u),u}const S=e=>{const s=typeof e=="function"?o(e):e,a=(u,v)=>r(s,u,v);return Object.assign(a,s),a},g=c("create",e=>e?S(e):S);var b=c("default",e=>g(e))}}});

system/middleware.development.js

@@ -6,21 +6,5 @@ System.register([], (function (exports) {
 
-      exports('devtools', devtools);
+      exports('createJSONStorage', createJSONStorage);
 
-      var __defProp$1 = Object.defineProperty;
-      var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-      var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-      var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-      var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-      var __spreadValues$1 = (a, b) => {
-        for (var prop in b || (b = {}))
-          if (__hasOwnProp$1.call(b, prop))
-            __defNormalProp$1(a, prop, b[prop]);
-        if (__getOwnPropSymbols$1)
-          for (var prop of __getOwnPropSymbols$1(b)) {
-            if (__propIsEnum$1.call(b, prop))
-              __defNormalProp$1(a, prop, b[prop]);
-          }
-        return a;
-      };
-      const redux = exports('redux', (reducer, initial) => (set, get, api) => {
+      const reduxImpl = (reducer, initial) => (set, _get, api) => {
         api.dispatch = (action) => {
@@ -31,99 +15,138 @@ set((state) => reducer(state, action), false, action);
         api.dispatchFromDevtools = true;
-        return __spreadValues$1({ dispatch: (...a) => api.dispatch(...a) }, initial);
-      });
+        return { dispatch: (...a) => api.dispatch(...a), ...initial };
+      };
+      const redux = exports('redux', reduxImpl);
 
-      function devtools(fn, options) {
-        return (set, get, api) => {
-          var _a;
-          let didWarnAboutNameDeprecation = false;
-          if (typeof options === "string" && !didWarnAboutNameDeprecation) {
-            console.warn("[zustand devtools middleware]: passing `name` as directly will be not allowed in next majorpass the `name` in an object `{ name: ... }` instead");
-            didWarnAboutNameDeprecation = true;
+      const trackedConnections = /* @__PURE__ */ new Map();
+      const getTrackedConnectionState = (name) => {
+        const api = trackedConnections.get(name);
+        if (!api)
+          return {};
+        return Object.fromEntries(
+          Object.entries(api.stores).map(([key, api2]) => [key, api2.getState()])
+        );
+      };
+      const extractConnectionInformation = (store, extensionConnector, options) => {
+        if (store === void 0) {
+          return {
+            type: "untracked",
+            connection: extensionConnector.connect(options)
+          };
+        }
+        const existingConnection = trackedConnections.get(options.name);
+        if (existingConnection) {
+          return { type: "tracked", store, ...existingConnection };
+        }
+        const newConnection = {
+          connection: extensionConnector.connect(options),
+          stores: {}
+        };
+        trackedConnections.set(options.name, newConnection);
+        return { type: "tracked", store, ...newConnection };
+      };
+      const devtoolsImpl = (fn, devtoolsOptions = {}) => (set, get, api) => {
+        const { enabled, anonymousActionType, store, ...options } = devtoolsOptions;
+        let extensionConnector;
+        try {
+          extensionConnector = (enabled != null ? enabled : true) && window.__REDUX_DEVTOOLS_EXTENSION__;
+        } catch (e) {
+        }
+        if (!extensionConnector) {
+          if (enabled) {
+            console.warn(
+              "[zustand devtools middleware] Please install/enable Redux devtools extension"
+            );
           }
-          const devtoolsOptions = options === void 0 ? { name: void 0, anonymousActionType: void 0 } : typeof options === "string" ? { name: options } : options;
-          if (typeof ((_a = devtoolsOptions == null ? void 0 : devtoolsOptions.serialize) == null ? void 0 : _a.options) !== "undefined") {
-            console.warn("[zustand devtools middleware]: `serialize.options` is deprecated, just use `serialize`");
+          return fn(set, get, api);
+        }
+        const { connection, ...connectionInformation } = extractConnectionInformation(store, extensionConnector, options);
+        let isRecording = true;
+        api.setState = (state, replace, nameOrAction) => {
+          const r = set(state, replace);
+          if (!isRecording)
+            return r;
+          const action = nameOrAction === void 0 ? { type: anonymousActionType || "anonymous" } : typeof nameOrAction === "string" ? { type: nameOrAction } : nameOrAction;
+          if (store === void 0) {
+            connection == null ? void 0 : connection.send(action, get());
+            return r;
           }
-          let extensionConnector;
-          try {
-            extensionConnector = window.__REDUX_DEVTOOLS_EXTENSION__ || window.top.__REDUX_DEVTOOLS_EXTENSION__;
-          } catch {
-          }
-          if (!extensionConnector) {
-            if (typeof window !== "undefined") {
-              console.warn("[zustand devtools middleware] Please install/enable Redux devtools extension");
-            }
-            return fn(set, get, api);
-          }
-          let extension = Object.create(extensionConnector.connect(devtoolsOptions));
-          let didWarnAboutDevtools = false;
-          Object.defineProperty(api, "devtools", {
-            get: () => {
-              if (!didWarnAboutDevtools) {
-                console.warn("[zustand devtools middleware] `devtools` property on the store is deprecated it will be removed in the next major.\nYou shouldn't interact with the extension directly. But in case you still want to you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly");
-                didWarnAboutDevtools = true;
-              }
-              return extension;
+          connection == null ? void 0 : connection.send(
+            {
+              ...action,
+              type: `${store}/${action.type}`
             },
-            set: (value) => {
-              if (!didWarnAboutDevtools) {
-                console.warn("[zustand devtools middleware] `api.devtools` is deprecated, it will be removed in the next major.\nYou shouldn't interact with the extension directly. But in case you still want to you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly");
-                didWarnAboutDevtools = true;
-              }
-              extension = value;
+            {
+              ...getTrackedConnectionState(options.name),
+              [store]: api.getState()
             }
-          });
-          let didWarnAboutPrefix = false;
-          Object.defineProperty(extension, "prefix", {
-            get: () => {
-              if (!didWarnAboutPrefix) {
-                console.warn("[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\nWe no longer prefix the actions/names" + devtoolsOptions.name === void 0 ? ", pass the `name` option to create a separate instance of devtools for each store." : ", because the `name` option already creates a separate instance of devtools for each store.");
-                didWarnAboutPrefix = true;
-              }
-              return "";
-            },
-            set: () => {
-              if (!didWarnAboutPrefix) {
-                console.warn("[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\nWe no longer prefix the actions/names" + devtoolsOptions.name === void 0 ? ", pass the `name` option to create a separate instance of devtools for each store." : ", because the `name` option already creates a separate instance of devtools for each store.");
-                didWarnAboutPrefix = true;
-              }
+          );
+          return r;
+        };
+        const setStateFromDevtools = (...a) => {
+          const originalIsRecording = isRecording;
+          isRecording = false;
+          set(...a);
+          isRecording = originalIsRecording;
+        };
+        const initialState = fn(api.setState, get, api);
+        if (connectionInformation.type === "untracked") {
+          connection == null ? void 0 : connection.init(initialState);
+        } else {
+          connectionInformation.stores[connectionInformation.store] = api;
+          connection == null ? void 0 : connection.init(
+            Object.fromEntries(
+              Object.entries(connectionInformation.stores).map(([key, store2]) => [
+                key,
+                key === connectionInformation.store ? initialState : store2.getState()
+              ])
+            )
+          );
+        }
+        if (api.dispatchFromDevtools && typeof api.dispatch === "function") {
+          let didWarnAboutReservedActionType = false;
+          const originalDispatch = api.dispatch;
+          api.dispatch = (...a) => {
+            if (a[0].type === "__setState" && !didWarnAboutReservedActionType) {
+              console.warn(
+                '[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'
+              );
+              didWarnAboutReservedActionType = true;
             }
-          });
-          let isRecording = true;
-          api.setState = (state, replace, nameOrAction) => {
-            set(state, replace);
-            if (!isRecording)
-              return;
-            extension.send(nameOrAction === void 0 ? { type: devtoolsOptions.anonymousActionType || "anonymous" } : typeof nameOrAction === "string" ? { type: nameOrAction } : nameOrAction, get());
+            originalDispatch(...a);
           };
-          const setStateFromDevtools = (...a) => {
-            const originalIsRecording = isRecording;
-            isRecording = false;
-            set(...a);
-            isRecording = originalIsRecording;
-          };
-          const initialState = fn(api.setState, get, api);
-          extension.init(initialState);
-          if (api.dispatchFromDevtools && typeof api.dispatch === "function") {
-            let didWarnAboutReservedActionType = false;
-            const originalDispatch = api.dispatch;
-            api.dispatch = (...a) => {
-              if (a[0].type === "__setState" && !didWarnAboutReservedActionType) {
-                console.warn('[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.');
-                didWarnAboutReservedActionType = true;
+        }
+        connection.subscribe((message) => {
+          var _a;
+          switch (message.type) {
+            case "ACTION":
+              if (typeof message.payload !== "string") {
+                console.error(
+                  "[zustand devtools middleware] Unsupported action format"
+                );
+                return;
               }
-              originalDispatch(...a);
-            };
-          }
-          extension.subscribe((message) => {
-            var _a2;
-            switch (message.type) {
-              case "ACTION":
-                if (typeof message.payload !== "string") {
-                  console.error("[zustand devtools middleware] Unsupported action format");
-                  return;
-                }
-                return parseJsonThen(message.payload, (action) => {
+              return parseJsonThen(
+                message.payload,
+                (action) => {
                   if (action.type === "__setState") {
-                    setStateFromDevtools(action.state);
+                    if (store === void 0) {
+                      setStateFromDevtools(action.state);
+                      return;
+                    }
+                    if (Object.keys(action.state).length !== 1) {
+                      console.error(
+                        `
+                    [zustand devtools middleware] Unsupported __setState action format. 
+                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
+                    and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
+                    `
+                      );
+                    }
+                    const stateFromDevtools = action.state[store];
+                    if (stateFromDevtools === void 0 || stateFromDevtools === null) {
+                      return;
+                    }
+                    if (JSON.stringify(api.getState()) !== JSON.stringify(stateFromDevtools)) {
+                      setStateFromDevtools(stateFromDevtools);
+                    }
                     return;
@@ -136,38 +159,65 @@ }
                   api.dispatch(action);
-                });
-              case "DISPATCH":
-                switch (message.payload.type) {
-                  case "RESET":
-                    setStateFromDevtools(initialState);
-                    return extension.init(api.getState());
-                  case "COMMIT":
-                    return extension.init(api.getState());
-                  case "ROLLBACK":
-                    return parseJsonThen(message.state, (state) => {
+                }
+              );
+            case "DISPATCH":
+              switch (message.payload.type) {
+                case "RESET":
+                  setStateFromDevtools(initialState);
+                  if (store === void 0) {
+                    return connection == null ? void 0 : connection.init(api.getState());
+                  }
+                  return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
+                case "COMMIT":
+                  if (store === void 0) {
+                    connection == null ? void 0 : connection.init(api.getState());
+                    return;
+                  }
+                  return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
+                case "ROLLBACK":
+                  return parseJsonThen(message.state, (state) => {
+                    if (store === void 0) {
                       setStateFromDevtools(state);
-                      extension.init(api.getState());
-                    });
-                  case "JUMP_TO_STATE":
-                  case "JUMP_TO_ACTION":
-                    return parseJsonThen(message.state, (state) => {
+                      connection == null ? void 0 : connection.init(api.getState());
+                      return;
+                    }
+                    setStateFromDevtools(state[store]);
+                    connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
+                  });
+                case "JUMP_TO_STATE":
+                case "JUMP_TO_ACTION":
+                  return parseJsonThen(message.state, (state) => {
+                    if (store === void 0) {
                       setStateFromDevtools(state);
-                    });
-                  case "IMPORT_STATE": {
-                    const { nextLiftedState } = message.payload;
-                    const lastComputedState = (_a2 = nextLiftedState.computedStates.slice(-1)[0]) == null ? void 0 : _a2.state;
-                    if (!lastComputedState)
                       return;
+                    }
+                    if (JSON.stringify(api.getState()) !== JSON.stringify(state[store])) {
+                      setStateFromDevtools(state[store]);
+                    }
+                  });
+                case "IMPORT_STATE": {
+                  const { nextLiftedState } = message.payload;
+                  const lastComputedState = (_a = nextLiftedState.computedStates.slice(-1)[0]) == null ? void 0 : _a.state;
+                  if (!lastComputedState)
+                    return;
+                  if (store === void 0) {
                     setStateFromDevtools(lastComputedState);
-                    extension.send(null, nextLiftedState);
-                    return;
+                  } else {
+                    setStateFromDevtools(lastComputedState[store]);
                   }
-                  case "PAUSE_RECORDING":
-                    return isRecording = !isRecording;
+                  connection == null ? void 0 : connection.send(
+                    null,
+                    // FIXME no-any
+                    nextLiftedState
+                  );
+                  return;
                 }
-                return;
-            }
-          });
-          return initialState;
-        };
-      }
+                case "PAUSE_RECORDING":
+                  return isRecording = !isRecording;
+              }
+              return;
+          }
+        });
+        return initialState;
+      };
+      const devtools = exports('devtools', devtoolsImpl);
       const parseJsonThen = (stringified, f) => {
@@ -178,3 +228,6 @@ let parsed;
         } catch (e) {
-          console.error("[zustand devtools middleware] Could not parse the received json", e);
+          console.error(
+            "[zustand devtools middleware] Could not parse the received json",
+            e
+          );
         }
@@ -185,3 +238,3 @@ if (parsed !== void 0)
 
-      const subscribeWithSelector = exports('subscribeWithSelector', (fn) => (set, get, api) => {
+      const subscribeWithSelectorImpl = (fn) => (set, get, api) => {
         const origSubscribe = api.subscribe;
@@ -208,22 +261,37 @@ api.subscribe = (selector, optListener, options) => {
         return initialState;
-      });
+      };
+      const subscribeWithSelector = exports('subscribeWithSelector', subscribeWithSelectorImpl);
 
-      const combine = exports('combine', (initialState, create) => (set, get, api) => Object.assign({}, initialState, create(set, get, api)));
+      const combine = exports('combine', (initialState, create) => (...a) => Object.assign({}, initialState, create(...a)));
 
-      var __defProp = Object.defineProperty;
-      var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-      var __hasOwnProp = Object.prototype.hasOwnProperty;
-      var __propIsEnum = Object.prototype.propertyIsEnumerable;
-      var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-      var __spreadValues = (a, b) => {
-        for (var prop in b || (b = {}))
-          if (__hasOwnProp.call(b, prop))
-            __defNormalProp(a, prop, b[prop]);
-        if (__getOwnPropSymbols)
-          for (var prop of __getOwnPropSymbols(b)) {
-            if (__propIsEnum.call(b, prop))
-              __defNormalProp(a, prop, b[prop]);
-          }
-        return a;
-      };
+      function createJSONStorage(getStorage, options) {
+        let storage;
+        try {
+          storage = getStorage();
+        } catch (e) {
+          return;
+        }
+        const persistStorage = {
+          getItem: (name) => {
+            var _a;
+            const parse = (str2) => {
+              if (str2 === null) {
+                return null;
+              }
+              return JSON.parse(str2, options == null ? void 0 : options.reviver);
+            };
+            const str = (_a = storage.getItem(name)) != null ? _a : null;
+            if (str instanceof Promise) {
+              return str.then(parse);
+            }
+            return parse(str);
+          },
+          setItem: (name, newValue) => storage.setItem(
+            name,
+            JSON.stringify(newValue, options == null ? void 0 : options.replacer)
+          ),
+          removeItem: (name) => storage.removeItem(name)
+        };
+        return persistStorage;
+      }
       const toThenable = (fn) => (input) => {
@@ -254,4 +322,4 @@ try {
       };
-      const persist = exports('persist', (config, baseOptions) => (set, get, api) => {
-        let options = __spreadValues({
+      const oldImpl = (config, baseOptions) => (set, get, api) => {
+        let options = {
           getStorage: () => localStorage,
@@ -262,7 +330,8 @@ serialize: JSON.stringify,
           version: 0,
-          merge: (persistedState, currentState) => __spreadValues(__spreadValues({}, currentState), persistedState)
-        }, baseOptions);
-        if (options.blacklist || options.whitelist) {
-          console.warn(`The ${options.blacklist ? "blacklist" : "whitelist"} option is deprecated and will be removed in the next version. Please use the 'partialize' option instead.`);
-        }
+          merge: (persistedState, currentState) => ({
+            ...currentState,
+            ...persistedState
+          }),
+          ...baseOptions
+        };
         let hasHydrated = false;
@@ -277,23 +346,20 @@ const hydrationListeners = /* @__PURE__ */ new Set();
         if (!storage) {
-          return config((...args) => {
-            console.warn(`[zustand persist middleware] Unable to update item '${options.name}', the given storage is currently unavailable.`);
-            set(...args);
-          }, get, api);
-        } else if (!storage.removeItem) {
-          console.warn(`[zustand persist middleware] The given storage for item '${options.name}' does not contain a 'removeItem' method, which will be required in v4.`);
+          return config(
+            (...args) => {
+              console.warn(
+                `[zustand persist middleware] Unable to update item '${options.name}', the given storage is currently unavailable.`
+              );
+              set(...args);
+            },
+            get,
+            api
+          );
         }
         const thenableSerialize = toThenable(options.serialize);
         const setItem = () => {
-          const state = options.partialize(__spreadValues({}, get()));
-          if (options.whitelist) {
-            Object.keys(state).forEach((key) => {
-              var _a;
-              !((_a = options.whitelist) == null ? void 0 : _a.includes(key)) && delete state[key];
-            });
-          }
-          if (options.blacklist) {
-            options.blacklist.forEach((key) => delete state[key]);
-          }
+          const state = options.partialize({ ...get() });
           let errorInSync;
-          const thenable = thenableSerialize({ state, version: options.version }).then((serializedValue) => storage.setItem(options.name, serializedValue)).catch((e) => {
+          const thenable = thenableSerialize({ state, version: options.version }).then(
+            (serializedValue) => storage.setItem(options.name, serializedValue)
+          ).catch((e) => {
             errorInSync = e;
@@ -311,6 +377,10 @@ });
         };
-        const configResult = config((...args) => {
-          set(...args);
-          void setItem();
-        }, get, api);
+        const configResult = config(
+          (...args) => {
+            set(...args);
+            void setItem();
+          },
+          get,
+          api
+        );
         let stateFromStorage;
@@ -332,5 +402,10 @@ const hydrate = () => {
                 if (options.migrate) {
-                  return options.migrate(deserializedStorageValue.state, deserializedStorageValue.version);
+                  return options.migrate(
+                    deserializedStorageValue.state,
+                    deserializedStorageValue.version
+                  );
                 }
-                console.error(`State loaded from storage couldn't be migrated since no migrate function was provided`);
+                console.error(
+                  `State loaded from storage couldn't be migrated since no migrate function was provided`
+                );
               } else {
@@ -342,3 +417,6 @@ return deserializedStorageValue.state;
             var _a2;
-            stateFromStorage = options.merge(migratedState, (_a2 = get()) != null ? _a2 : configResult);
+            stateFromStorage = options.merge(
+              migratedState,
+              (_a2 = get()) != null ? _a2 : configResult
+            );
             set(stateFromStorage, true);
@@ -356,3 +434,6 @@ return setItem();
           setOptions: (newOptions) => {
-            options = __spreadValues(__spreadValues({}, options), newOptions);
+            options = {
+              ...options,
+              ...newOptions
+            };
             if (newOptions.getStorage) {
@@ -363,5 +444,5 @@ storage = newOptions.getStorage();
           clearStorage: () => {
-            var _a;
-            (_a = storage == null ? void 0 : storage.removeItem) == null ? void 0 : _a.call(storage, options.name);
+            storage == null ? void 0 : storage.removeItem(options.name);
           },
+          getOptions: () => options,
           rehydrate: () => hydrate(),
@@ -384,3 +465,140 @@ hasHydrated: () => hasHydrated,
         return stateFromStorage || configResult;
-      });
+      };
+      const newImpl = (config, baseOptions) => (set, get, api) => {
+        let options = {
+          storage: createJSONStorage(() => localStorage),
+          partialize: (state) => state,
+          version: 0,
+          merge: (persistedState, currentState) => ({
+            ...currentState,
+            ...persistedState
+          }),
+          ...baseOptions
+        };
+        let hasHydrated = false;
+        const hydrationListeners = /* @__PURE__ */ new Set();
+        const finishHydrationListeners = /* @__PURE__ */ new Set();
+        let storage = options.storage;
+        if (!storage) {
+          return config(
+            (...args) => {
+              console.warn(
+                `[zustand persist middleware] Unable to update item '${options.name}', the given storage is currently unavailable.`
+              );
+              set(...args);
+            },
+            get,
+            api
+          );
+        }
+        const setItem = () => {
+          const state = options.partialize({ ...get() });
+          return storage.setItem(options.name, {
+            state,
+            version: options.version
+          });
+        };
+        const savedSetState = api.setState;
+        api.setState = (state, replace) => {
+          savedSetState(state, replace);
+          void setItem();
+        };
+        const configResult = config(
+          (...args) => {
+            set(...args);
+            void setItem();
+          },
+          get,
+          api
+        );
+        let stateFromStorage;
+        const hydrate = () => {
+          var _a, _b;
+          if (!storage)
+            return;
+          hasHydrated = false;
+          hydrationListeners.forEach((cb) => {
+            var _a2;
+            return cb((_a2 = get()) != null ? _a2 : configResult);
+          });
+          const postRehydrationCallback = ((_b = options.onRehydrateStorage) == null ? void 0 : _b.call(options, (_a = get()) != null ? _a : configResult)) || void 0;
+          return toThenable(storage.getItem.bind(storage))(options.name).then((deserializedStorageValue) => {
+            if (deserializedStorageValue) {
+              if (typeof deserializedStorageValue.version === "number" && deserializedStorageValue.version !== options.version) {
+                if (options.migrate) {
+                  return options.migrate(
+                    deserializedStorageValue.state,
+                    deserializedStorageValue.version
+                  );
+                }
+                console.error(
+                  `State loaded from storage couldn't be migrated since no migrate function was provided`
+                );
+              } else {
+                return deserializedStorageValue.state;
+              }
+            }
+          }).then((migratedState) => {
+            var _a2;
+            stateFromStorage = options.merge(
+              migratedState,
+              (_a2 = get()) != null ? _a2 : configResult
+            );
+            set(stateFromStorage, true);
+            return setItem();
+          }).then(() => {
+            postRehydrationCallback == null ? void 0 : postRehydrationCallback(stateFromStorage, void 0);
+            stateFromStorage = get();
+            hasHydrated = true;
+            finishHydrationListeners.forEach((cb) => cb(stateFromStorage));
+          }).catch((e) => {
+            postRehydrationCallback == null ? void 0 : postRehydrationCallback(void 0, e);
+          });
+        };
+        api.persist = {
+          setOptions: (newOptions) => {
+            options = {
+              ...options,
+              ...newOptions
+            };
+            if (newOptions.storage) {
+              storage = newOptions.storage;
+            }
+          },
+          clearStorage: () => {
+            storage == null ? void 0 : storage.removeItem(options.name);
+          },
+          getOptions: () => options,
+          rehydrate: () => hydrate(),
+          hasHydrated: () => hasHydrated,
+          onHydrate: (cb) => {
+            hydrationListeners.add(cb);
+            return () => {
+              hydrationListeners.delete(cb);
+            };
+          },
+          onFinishHydration: (cb) => {
+            finishHydrationListeners.add(cb);
+            return () => {
+              finishHydrationListeners.delete(cb);
+            };
+          }
+        };
+        if (!options.skipHydration) {
+          hydrate();
+        }
+        return stateFromStorage || configResult;
+      };
+      const persistImpl = (config, baseOptions) => {
+        if ("getStorage" in baseOptions || "serialize" in baseOptions || "deserialize" in baseOptions) {
+          {
+            console.warn(
+              "[DEPRECATED] `getStorage`, `serialize` and `deserialize` options are deprecated. Use `storage` option instead."
+            );
+          }
+          return oldImpl(config, baseOptions);
+        }
+        return newImpl(config, baseOptions);
+      };
+      const persist = exports('persist', persistImpl);
 
@@ -387,0 +605,0 @@ })

system/middleware.production.js

@@ -1,1 +0,5 @@
-System.register([],function(O){"use strict";return{execute:function(){O("devtools",A);var P=Object.defineProperty,E=Object.getOwnPropertySymbols,N=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable,T=(n,t,e)=>t in n?P(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e,x=(n,t)=>{for(var e in t||(t={}))N.call(t,e)&&T(n,e,t[e]);if(E)for(var e of E(t))D.call(t,e)&&T(n,e,t[e]);return n};const C=O("redux",(n,t)=>(e,i,s)=>(s.dispatch=a=>(e(p=>n(p,a),!1,a),a),s.dispatchFromDevtools=!0,x({dispatch:(...a)=>s.dispatch(...a)},t)));function A(n,t){return(e,i,s)=>{var a;let p=!1;typeof t=="string"&&!p&&(console.warn("[zustand devtools middleware]: passing `name` as directly will be not allowed in next majorpass the `name` in an object `{ name: ... }` instead"),p=!0);const u=t===void 0?{name:void 0,anonymousActionType:void 0}:typeof t=="string"?{name:t}:t;typeof((a=u==null?void 0:u.serialize)==null?void 0:a.options)<"u"&&console.warn("[zustand devtools middleware]: `serialize.options` is deprecated, just use `serialize`");let f;try{f=window.__REDUX_DEVTOOLS_EXTENSION__||window.top.__REDUX_DEVTOOLS_EXTENSION__}catch{}if(!f)return n(e,i,s);let l=Object.create(f.connect(u)),v=!1;Object.defineProperty(s,"devtools",{get:()=>(v||(console.warn("[zustand devtools middleware] `devtools` property on the store is deprecated it will be removed in the next major.\nYou shouldn't interact with the extension directly. But in case you still want to you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly"),v=!0),l),set:d=>{v||(console.warn("[zustand devtools middleware] `api.devtools` is deprecated, it will be removed in the next major.\nYou shouldn't interact with the extension directly. But in case you still want to you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly"),v=!0),l=d}});let y=!1;Object.defineProperty(l,"prefix",{get:()=>(y||(console.warn("[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\nWe no longer prefix the actions/names"+u.name===void 0?", pass the `name` option to create a separate instance of devtools for each store.":", because the `name` option already creates a separate instance of devtools for each store."),y=!0),""),set:()=>{y||(console.warn("[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\nWe no longer prefix the actions/names"+u.name===void 0?", pass the `name` option to create a separate instance of devtools for each store.":", because the `name` option already creates a separate instance of devtools for each store."),y=!0)}});let h=!0;s.setState=(d,r,o)=>{e(d,r),h&&l.send(o===void 0?{type:u.anonymousActionType||"anonymous"}:typeof o=="string"?{type:o}:o,i())};const w=(...d)=>{const r=h;h=!1,e(...d),h=r},b=n(s.setState,i,s);if(l.init(b),s.dispatchFromDevtools&&typeof s.dispatch=="function"){let d=!1;const r=s.dispatch;s.dispatch=(...o)=>{o[0].type==="__setState"&&!d&&(console.warn('[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'),d=!0),r(...o)}}return l.subscribe(d=>{var r;switch(d.type){case"ACTION":if(typeof d.payload!="string"){console.error("[zustand devtools middleware] Unsupported action format");return}return _(d.payload,o=>{if(o.type==="__setState"){w(o.state);return}!s.dispatchFromDevtools||typeof s.dispatch=="function"&&s.dispatch(o)});case"DISPATCH":switch(d.payload.type){case"RESET":return w(b),l.init(s.getState());case"COMMIT":return l.init(s.getState());case"ROLLBACK":return _(d.state,o=>{w(o),l.init(s.getState())});case"JUMP_TO_STATE":case"JUMP_TO_ACTION":return _(d.state,o=>{w(o)});case"IMPORT_STATE":{const{nextLiftedState:o}=d.payload,c=(r=o.computedStates.slice(-1)[0])==null?void 0:r.state;if(!c)return;w(c),l.send(null,o);return}case"PAUSE_RECORDING":return h=!h}return}}),b}}const _=(n,t)=>{let e;try{e=JSON.parse(n)}catch(i){console.error("[zustand devtools middleware] Could not parse the received json",i)}e!==void 0&&t(e)},L=O("subscribeWithSelector",n=>(t,e,i)=>{const s=i.subscribe;return i.subscribe=(a,p,u)=>{let f=a;if(p){const l=(u==null?void 0:u.equalityFn)||Object.is;let v=a(i.getState());f=y=>{const h=a(y);if(!l(v,h)){const w=v;p(v=h,w)}},u!=null&&u.fireImmediately&&p(v,v)}return s(f)},n(t,e,i)}),k=O("combine",(n,t)=>(e,i,s)=>Object.assign({},n,t(e,i,s)));var R=Object.defineProperty,z=Object.getOwnPropertySymbols,U=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable,j=(n,t,e)=>t in n?R(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e,g=(n,t)=>{for(var e in t||(t={}))U.call(t,e)&&j(n,e,t[e]);if(z)for(var e of z(t))X.call(t,e)&&j(n,e,t[e]);return n};const S=n=>t=>{try{const e=n(t);return e instanceof Promise?e:{then(i){return S(i)(e)},catch(i){return this}}}catch(e){return{then(i){return this},catch(i){return S(i)(e)}}}},F=O("persist",(n,t)=>(e,i,s)=>{let a=g({getStorage:()=>localStorage,serialize:JSON.stringify,deserialize:JSON.parse,partialize:r=>r,version:0,merge:(r,o)=>g(g({},o),r)},t);(a.blacklist||a.whitelist)&&console.warn(`The ${a.blacklist?"blacklist":"whitelist"} option is deprecated and will be removed in the next version. Please use the 'partialize' option instead.`);let p=!1;const u=new Set,f=new Set;let l;try{l=a.getStorage()}catch{}if(l)l.removeItem||console.warn(`[zustand persist middleware] The given storage for item '${a.name}' does not contain a 'removeItem' method, which will be required in v4.`);else return n((...r)=>{console.warn(`[zustand persist middleware] Unable to update item '${a.name}', the given storage is currently unavailable.`),e(...r)},i,s);const v=S(a.serialize),y=()=>{const r=a.partialize(g({},i()));a.whitelist&&Object.keys(r).forEach(m=>{var I;!((I=a.whitelist)!=null&&I.includes(m))&&delete r[m]}),a.blacklist&&a.blacklist.forEach(m=>delete r[m]);let o;const c=v({state:r,version:a.version}).then(m=>l.setItem(a.name,m)).catch(m=>{o=m});if(o)throw o;return c},h=s.setState;s.setState=(r,o)=>{h(r,o),y()};const w=n((...r)=>{e(...r),y()},i,s);let b;const d=()=>{var r;if(!l)return;p=!1,u.forEach(c=>c(i()));const o=((r=a.onRehydrateStorage)==null?void 0:r.call(a,i()))||void 0;return S(l.getItem.bind(l))(a.name).then(c=>{if(c)return a.deserialize(c)}).then(c=>{if(c)if(typeof c.version=="number"&&c.version!==a.version){if(a.migrate)return a.migrate(c.state,c.version);console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}else return c.state}).then(c=>{var m;return b=a.merge(c,(m=i())!=null?m:w),e(b,!0),y()}).then(()=>{o==null||o(b,void 0),p=!0,f.forEach(c=>c(b))}).catch(c=>{o==null||o(void 0,c)})};return s.persist={setOptions:r=>{a=g(g({},a),r),r.getStorage&&(l=r.getStorage())},clearStorage:()=>{var r;(r=l==null?void 0:l.removeItem)==null||r.call(l,a.name)},rehydrate:()=>d(),hasHydrated:()=>p,onHydrate:r=>(u.add(r),()=>{u.delete(r)}),onFinishHydration:r=>(f.add(r),()=>{f.delete(r)})},d(),b||w})}}});
+System.register([],function(b){"use strict";return{execute:function(){b("createJSONStorage",E);const A=b("redux",(d,c)=>(a,o,n)=>(n.dispatch=e=>(a(g=>d(g,e),!1,e),e),n.dispatchFromDevtools=!0,{dispatch:(...e)=>n.dispatch(...e),...c})),I=new Map,w=d=>{const c=I.get(d);return c?Object.fromEntries(Object.entries(c.stores).map(([a,o])=>[a,o.getState()])):{}},T=(d,c,a)=>{if(d===void 0)return{type:"untracked",connection:c.connect(a)};const o=I.get(a.name);if(o)return{type:"tracked",store:d,...o};const n={connection:c.connect(a),stores:{}};return I.set(a.name,n),{type:"tracked",store:d,...n}},P=b("devtools",(d,c={})=>(a,o,n)=>{const{enabled:e,anonymousActionType:g,store:u,...h}=c;let m;try{m=(e!=null?e:!1)&&window.__REDUX_DEVTOOLS_EXTENSION__}catch{}if(!m)return d(a,o,n);const{connection:l,...y}=T(u,m,h);let p=!0;n.setState=(r,s,i)=>{const t=a(r,s);if(!p)return t;const f=i===void 0?{type:g||"anonymous"}:typeof i=="string"?{type:i}:i;return u===void 0?(l==null||l.send(f,o()),t):(l==null||l.send({...f,type:`${u}/${f.type}`},{...w(h.name),[u]:n.getState()}),t)};const v=(...r)=>{const s=p;p=!1,a(...r),p=s},S=d(n.setState,o,n);if(y.type==="untracked"?l==null||l.init(S):(y.stores[y.store]=n,l==null||l.init(Object.fromEntries(Object.entries(y.stores).map(([r,s])=>[r,r===y.store?S:s.getState()])))),n.dispatchFromDevtools&&typeof n.dispatch=="function"){const r=n.dispatch;n.dispatch=(...s)=>{r(...s)}}return l.subscribe(r=>{var s;switch(r.type){case"ACTION":if(typeof r.payload!="string"){console.error("[zustand devtools middleware] Unsupported action format");return}return _(r.payload,i=>{if(i.type==="__setState"){if(u===void 0){v(i.state);return}Object.keys(i.state).length!==1&&console.error(`
+                    [zustand devtools middleware] Unsupported __setState action format. 
+                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
+                    and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
+                    `);const t=i.state[u];if(t==null)return;JSON.stringify(n.getState())!==JSON.stringify(t)&&v(t);return}n.dispatchFromDevtools&&typeof n.dispatch=="function"&&n.dispatch(i)});case"DISPATCH":switch(r.payload.type){case"RESET":return v(S),u===void 0?l==null?void 0:l.init(n.getState()):l==null?void 0:l.init(w(h.name));case"COMMIT":if(u===void 0){l==null||l.init(n.getState());return}return l==null?void 0:l.init(w(h.name));case"ROLLBACK":return _(r.state,i=>{if(u===void 0){v(i),l==null||l.init(n.getState());return}v(i[u]),l==null||l.init(w(h.name))});case"JUMP_TO_STATE":case"JUMP_TO_ACTION":return _(r.state,i=>{if(u===void 0){v(i);return}JSON.stringify(n.getState())!==JSON.stringify(i[u])&&v(i[u])});case"IMPORT_STATE":{const{nextLiftedState:i}=r.payload,t=(s=i.computedStates.slice(-1)[0])==null?void 0:s.state;if(!t)return;v(u===void 0?t:t[u]),l==null||l.send(null,i);return}case"PAUSE_RECORDING":return p=!p}return}}),S}),_=(d,c)=>{let a;try{a=JSON.parse(d)}catch(o){console.error("[zustand devtools middleware] Could not parse the received json",o)}a!==void 0&&c(a)},H=b("subscribeWithSelector",d=>(c,a,o)=>{const n=o.subscribe;return o.subscribe=(e,g,u)=>{let h=e;if(g){const m=(u==null?void 0:u.equalityFn)||Object.is;let l=e(o.getState());h=y=>{const p=e(y);if(!m(l,p)){const v=l;g(l=p,v)}},u!=null&&u.fireImmediately&&g(l,l)}return n(h)},d(c,a,o)}),R=b("combine",(d,c)=>(...a)=>Object.assign({},d,c(...a)));function E(d,c){let a;try{a=d()}catch{return}return{getItem:o=>{var n;const e=u=>u===null?null:JSON.parse(u,c==null?void 0:c.reviver),g=(n=a.getItem(o))!=null?n:null;return g instanceof Promise?g.then(e):e(g)},setItem:(o,n)=>a.setItem(o,JSON.stringify(n,c==null?void 0:c.replacer)),removeItem:o=>a.removeItem(o)}}const O=d=>c=>{try{const a=d(c);return a instanceof Promise?a:{then(o){return O(o)(a)},catch(o){return this}}}catch(a){return{then(o){return this},catch(o){return O(o)(a)}}}},N=(d,c)=>(a,o,n)=>{let e={getStorage:()=>localStorage,serialize:JSON.stringify,deserialize:JSON.parse,partialize:s=>s,version:0,merge:(s,i)=>({...i,...s}),...c},g=!1;const u=new Set,h=new Set;let m;try{m=e.getStorage()}catch{}if(!m)return d((...s)=>{console.warn(`[zustand persist middleware] Unable to update item '${e.name}', the given storage is currently unavailable.`),a(...s)},o,n);const l=O(e.serialize),y=()=>{const s=e.partialize({...o()});let i;const t=l({state:s,version:e.version}).then(f=>m.setItem(e.name,f)).catch(f=>{i=f});if(i)throw i;return t},p=n.setState;n.setState=(s,i)=>{p(s,i),y()};const v=d((...s)=>{a(...s),y()},o,n);let S;const r=()=>{var s;if(!m)return;g=!1,u.forEach(t=>t(o()));const i=((s=e.onRehydrateStorage)==null?void 0:s.call(e,o()))||void 0;return O(m.getItem.bind(m))(e.name).then(t=>{if(t)return e.deserialize(t)}).then(t=>{if(t)if(typeof t.version=="number"&&t.version!==e.version){if(e.migrate)return e.migrate(t.state,t.version);console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}else return t.state}).then(t=>{var f;return S=e.merge(t,(f=o())!=null?f:v),a(S,!0),y()}).then(()=>{i==null||i(S,void 0),g=!0,h.forEach(t=>t(S))}).catch(t=>{i==null||i(void 0,t)})};return n.persist={setOptions:s=>{e={...e,...s},s.getStorage&&(m=s.getStorage())},clearStorage:()=>{m==null||m.removeItem(e.name)},getOptions:()=>e,rehydrate:()=>r(),hasHydrated:()=>g,onHydrate:s=>(u.add(s),()=>{u.delete(s)}),onFinishHydration:s=>(h.add(s),()=>{h.delete(s)})},r(),S||v},z=(d,c)=>(a,o,n)=>{let e={storage:E(()=>localStorage),partialize:r=>r,version:0,merge:(r,s)=>({...s,...r}),...c},g=!1;const u=new Set,h=new Set;let m=e.storage;if(!m)return d((...r)=>{console.warn(`[zustand persist middleware] Unable to update item '${e.name}', the given storage is currently unavailable.`),a(...r)},o,n);const l=()=>{const r=e.partialize({...o()});return m.setItem(e.name,{state:r,version:e.version})},y=n.setState;n.setState=(r,s)=>{y(r,s),l()};const p=d((...r)=>{a(...r),l()},o,n);let v;const S=()=>{var r,s;if(!m)return;g=!1,u.forEach(t=>{var f;return t((f=o())!=null?f:p)});const i=((s=e.onRehydrateStorage)==null?void 0:s.call(e,(r=o())!=null?r:p))||void 0;return O(m.getItem.bind(m))(e.name).then(t=>{if(t)if(typeof t.version=="number"&&t.version!==e.version){if(e.migrate)return e.migrate(t.state,t.version);console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}else return t.state}).then(t=>{var f;return v=e.merge(t,(f=o())!=null?f:p),a(v,!0),l()}).then(()=>{i==null||i(v,void 0),v=o(),g=!0,h.forEach(t=>t(v))}).catch(t=>{i==null||i(void 0,t)})};return n.persist={setOptions:r=>{e={...e,...r},r.storage&&(m=r.storage)},clearStorage:()=>{m==null||m.removeItem(e.name)},getOptions:()=>e,rehydrate:()=>S(),hasHydrated:()=>g,onHydrate:r=>(u.add(r),()=>{u.delete(r)}),onFinishHydration:r=>(h.add(r),()=>{h.delete(r)})},e.skipHydration||S(),v||p},$=b("persist",(d,c)=>"getStorage"in c||"serialize"in c||"deserialize"in c?N(d,c):z(d,c))}}});

system/shallow.development.js

@@ -6,5 +6,5 @@ System.register([], (function (exports) {
 
-      exports('default', shallow);
+      exports('shallow', shallow$1);
 
-      function shallow(objA, objB) {
+      function shallow$1(objA, objB) {
         if (Object.is(objA, objB)) {
@@ -16,2 +16,22 @@ return true;
         }
+        if (objA instanceof Map && objB instanceof Map) {
+          if (objA.size !== objB.size)
+            return false;
+          for (const [key, value] of objA) {
+            if (!Object.is(value, objB.get(key))) {
+              return false;
+            }
+          }
+          return true;
+        }
+        if (objA instanceof Set && objB instanceof Set) {
+          if (objA.size !== objB.size)
+            return false;
+          for (const value of objA) {
+            if (!objB.has(value)) {
+              return false;
+            }
+          }
+          return true;
+        }
         const keysA = Object.keys(objA);
@@ -29,4 +49,13 @@ if (keysA.length !== Object.keys(objB).length) {
 
+      var shallow = exports('default', (objA, objB) => {
+        {
+          console.warn(
+            "[DEPRECATED] Default export is deprecated. Instead use `import { shallow } from 'zustand/shallow'`."
+          );
+        }
+        return shallow$1(objA, objB);
+      });
+
     })
   };
 }));

system/shallow.production.js

@@ -1,1 +0,1 @@
-System.register([],function(c){"use strict";return{execute:function(){c("default",u);function u(e,t){if(Object.is(e,t))return!0;if(typeof e!="object"||e===null||typeof t!="object"||t===null)return!1;const n=Object.keys(e);if(n.length!==Object.keys(t).length)return!1;for(let r=0;r<n.length;r++)if(!Object.prototype.hasOwnProperty.call(t,n[r])||!Object.is(e[n[r]],t[n[r]]))return!1;return!0}}}});
+System.register([],function(f){"use strict";return{execute:function(){f("shallow",i);function i(t,e){if(Object.is(t,e))return!0;if(typeof t!="object"||t===null||typeof e!="object"||e===null)return!1;if(t instanceof Map&&e instanceof Map){if(t.size!==e.size)return!1;for(const[n,o]of t)if(!Object.is(o,e.get(n)))return!1;return!0}if(t instanceof Set&&e instanceof Set){if(t.size!==e.size)return!1;for(const n of t)if(!e.has(n))return!1;return!0}const r=Object.keys(t);if(r.length!==Object.keys(e).length)return!1;for(let n=0;n<r.length;n++)if(!Object.prototype.hasOwnProperty.call(e,r[n])||!Object.is(t[r[n]],e[r[n]]))return!1;return!0}var s=f("default",(t,e)=>i(t,e))}}});

system/vanilla.development.js

@@ -6,5 +6,3 @@ System.register([], (function (exports) {
 
-      exports('default', createStore);
-
-      function createStore(createState) {
+      const createStoreImpl = (createState) => {
         let state;
@@ -14,5 +12,5 @@ const listeners = /* @__PURE__ */ new Set();
           const nextState = typeof partial === "function" ? partial(state) : partial;
-          if (nextState !== state) {
+          if (!Object.is(nextState, state)) {
             const previousState = state;
-            state = replace ? nextState : Object.assign({}, state, nextState);
+            state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
             listeners.forEach((listener) => listener(state, previousState));
@@ -22,27 +20,27 @@ }
         const getState = () => state;
-        const subscribeWithSelector = (listener, selector = getState, equalityFn = Object.is) => {
-          console.warn("[DEPRECATED] Please use `subscribeWithSelector` middleware");
-          let currentSlice = selector(state);
-          function listenerToAdd() {
-            const nextSlice = selector(state);
-            if (!equalityFn(currentSlice, nextSlice)) {
-              const previousSlice = currentSlice;
-              listener(currentSlice = nextSlice, previousSlice);
-            }
-          }
-          listeners.add(listenerToAdd);
-          return () => listeners.delete(listenerToAdd);
-        };
-        const subscribe = (listener, selector, equalityFn) => {
-          if (selector || equalityFn) {
-            return subscribeWithSelector(listener, selector, equalityFn);
-          }
+        const subscribe = (listener) => {
           listeners.add(listener);
           return () => listeners.delete(listener);
         };
-        const destroy = () => listeners.clear();
+        const destroy = () => {
+          {
+            console.warn(
+              "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
+            );
+          }
+          listeners.clear();
+        };
         const api = { setState, getState, subscribe, destroy };
         state = createState(setState, getState, api);
         return api;
-      }
+      };
+      const createStore = exports('createStore', (createState) => createState ? createStoreImpl(createState) : createStoreImpl);
+      var vanilla = exports('default', (createState) => {
+        {
+          console.warn(
+            "[DEPRECATED] Default export is deprecated. Instead use import { createStore } from 'zustand/vanilla'."
+          );
+        }
+        return createStore(createState);
+      });
 
@@ -49,0 +47,0 @@ })

system/vanilla.production.js

@@ -1,1 +0,1 @@
-System.register([],function(f){"use strict";return{execute:function(){f("default",a);function a(b){let t;const c=new Set,u=(e,s)=>{const n=typeof e=="function"?e(t):e;if(n!==t){const r=t;t=s?n:Object.assign({},t,n),c.forEach(o=>o(t,r))}},i=()=>t,S=(e,s=i,n=Object.is)=>{console.warn("[DEPRECATED] Please use `subscribeWithSelector` middleware");let r=s(t);function o(){const l=s(t);if(!n(r,l)){const E=r;e(r=l,E)}}return c.add(o),()=>c.delete(o)},d={setState:u,getState:i,subscribe:(e,s,n)=>s||n?S(e,s,n):(c.add(e),()=>c.delete(e)),destroy:()=>c.clear()};return t=b(u,i,d),d}}}});
+System.register([],function(s){"use strict";return{execute:function(){const a=e=>{let t;const o=new Set,r=(n,l)=>{const c=typeof n=="function"?n(t):n;if(!Object.is(c,t)){const S=t;t=(l!=null?l:typeof c!="object"||c===null)?c:Object.assign({},t,c),o.forEach(b=>b(t,S))}},i=()=>t,u={setState:r,getState:i,subscribe:n=>(o.add(n),()=>o.delete(n)),destroy:()=>{o.clear()}};return t=e(r,i,u),u},f=s("createStore",e=>e?a(e):a);var d=s("default",e=>f(e))}}});

umd/context.development.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.zustandContext = {}, global.React));
-})(this, (function (exports, react) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('zustand/traditional')) :
+  typeof define === 'function' && define.amd ? define(['react', 'zustand/traditional'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.zustandContext = factory(global.React, global.traditional));
+})(this, (function (ReactExports, traditional) { 'use strict';
 
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  var createElement = ReactExports.createElement,
+    reactCreateContext = ReactExports.createContext,
+    useContext = ReactExports.useContext,
+    useMemo = ReactExports.useMemo,
+    useRef = ReactExports.useRef;
   function createContext() {
-    var ZustandContext = react.createContext(undefined);
-
+    {
+      console.warn("[DEPRECATED] `context` will be removed in a future version. Instead use `import { createStore, useStore } from 'zustand'`. See: https://github.com/pmndrs/zustand/discussions/1180.");
+    }
+    var ZustandContext = reactCreateContext(undefined);
     var Provider = function Provider(_ref) {
-      var initialStore = _ref.initialStore,
-          createStore = _ref.createStore,
-          children = _ref.children;
-      var storeRef = react.useRef();
-
+      var createStore = _ref.createStore,
+        children = _ref.children;
+      var storeRef = useRef();
       if (!storeRef.current) {
-        if (initialStore) {
-          console.warn('Provider initialStore is deprecated and will be removed in the next version.');
-
-          if (!createStore) {
-            createStore = function createStore() {
-              return initialStore;
-            };
-          }
-        }
-
         storeRef.current = createStore();
       }
-
-      return react.createElement(ZustandContext.Provider, {
+      return createElement(ZustandContext.Provider, {
         value: storeRef.current
       }, children);
     };
-
-    var useStore = function useStore(selector, equalityFn) {
-      if (equalityFn === void 0) {
-        equalityFn = Object.is;
-      }
-
-      var useProviderStore = react.useContext(ZustandContext);
-
-      if (!useProviderStore) {
+    var useContextStore = function useContextStore(selector, equalityFn) {
+      var store = useContext(ZustandContext);
+      if (!store) {
         throw new Error('Seems like you have not used zustand provider as an ancestor.');
       }
-
-      return useProviderStore(selector, equalityFn);
+      return traditional.useStoreWithEqualityFn(store, selector, equalityFn);
     };
-
     var useStoreApi = function useStoreApi() {
-      var useProviderStore = react.useContext(ZustandContext);
-
-      if (!useProviderStore) {
+      var store = useContext(ZustandContext);
+      if (!store) {
         throw new Error('Seems like you have not used zustand provider as an ancestor.');
       }
-
-      return react.useMemo(function () {
-        return {
-          getState: useProviderStore.getState,
-          setState: useProviderStore.setState,
-          subscribe: useProviderStore.subscribe,
-          destroy: useProviderStore.destroy
-        };
-      }, [useProviderStore]);
+      return useMemo(function () {
+        return _extends({}, store);
+      }, [store]);
     };
-
     return {
       Provider: Provider,
-      useStore: useStore,
+      useStore: useContextStore,
       useStoreApi: useStoreApi
@@ -73,6 +66,4 @@ };
 
-  exports["default"] = createContext;
+  return createContext;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));

umd/context.production.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).zustandContext={},e.React)}(this,(function(e,t){"use strict";e.default=function(){var e=t.createContext(void 0);return{Provider:function(r){var n=r.initialStore,o=r.createStore,i=r.children,u=t.useRef();return u.current||(n&&(console.warn("Provider initialStore is deprecated and will be removed in the next version."),o||(o=function(){return n})),u.current=o()),t.createElement(e.Provider,{value:u.current},i)},useStore:function(r,n){void 0===n&&(n=Object.is);var o=t.useContext(e);if(!o)throw new Error("Seems like you have not used zustand provider as an ancestor.");return o(r,n)},useStoreApi:function(){var r=t.useContext(e);if(!r)throw new Error("Seems like you have not used zustand provider as an ancestor.");return t.useMemo((function(){return{getState:r.getState,setState:r.setState,subscribe:r.subscribe,destroy:r.destroy}}),[r])}}},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("zustand/traditional")):"function"==typeof define&&define.amd?define(["react","zustand/traditional"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).zustandContext=t(e.React,e.traditional)}(this,(function(e,t){"use strict";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},r.apply(this,arguments)}var n=e.createElement,o=e.createContext,i=e.useContext,u=e.useMemo,a=e.useRef;return function(){var e=o(void 0);return{Provider:function(t){var r=t.createStore,o=t.children,i=a();return i.current||(i.current=r()),n(e.Provider,{value:i.current},o)},useStore:function(r,n){var o=i(e);if(!o)throw new Error("Seems like you have not used zustand provider as an ancestor.");return t.useStoreWithEqualityFn(o,r,n)},useStoreApi:function(){var t=i(e);if(!t)throw new Error("Seems like you have not used zustand provider as an ancestor.");return u((function(){return r({},t)}),[t])}}}}));

umd/index.development.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.zustand = {}, global.React));
-})(this, (function (exports, react) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('zustand/vanilla'), require('react'), require('use-sync-external-store/shim/with-selector')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'zustand/vanilla', 'react', 'use-sync-external-store/shim/with-selector'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.zustand = {}, global.zustandVanilla, global.React, global.useSyncExternalStoreShimWithSelector));
+})(this, (function (exports, vanilla, ReactExports, useSyncExternalStoreExports) { 'use strict';
 
-  function createStore(createState) {
-    var state;
-    var listeners = new Set();
-
-    var setState = function setState(partial, replace) {
-      var nextState = typeof partial === 'function' ? partial(state) : partial;
-
-      if (nextState !== state) {
-        var _previousState = state;
-        state = replace ? nextState : Object.assign({}, state, nextState);
-        listeners.forEach(function (listener) {
-          return listener(state, _previousState);
-        });
-      }
-    };
-
-    var getState = function getState() {
-      return state;
-    };
-
-    var subscribeWithSelector = function subscribeWithSelector(listener, selector, equalityFn) {
-      if (selector === void 0) {
-        selector = getState;
-      }
-
-      if (equalityFn === void 0) {
-        equalityFn = Object.is;
-      }
-
-      console.warn('[DEPRECATED] Please use `subscribeWithSelector` middleware');
-      var currentSlice = selector(state);
-
-      function listenerToAdd() {
-        var nextSlice = selector(state);
-
-        if (!equalityFn(currentSlice, nextSlice)) {
-          var _previousSlice = currentSlice;
-          listener(currentSlice = nextSlice, _previousSlice);
-        }
-      }
-
-      listeners.add(listenerToAdd);
-      return function () {
-        return listeners.delete(listenerToAdd);
-      };
-    };
-
-    var subscribe = function subscribe(listener, selector, equalityFn) {
-      if (selector || equalityFn) {
-        return subscribeWithSelector(listener, selector, equalityFn);
-      }
-
-      listeners.add(listener);
-      return function () {
-        return listeners.delete(listener);
-      };
-    };
-
-    var destroy = function destroy() {
-      return listeners.clear();
-    };
-
-    var api = {
-      setState: setState,
-      getState: getState,
-      subscribe: subscribe,
-      destroy: destroy
-    };
-    state = createState(setState, getState, api);
-    return api;
+  var useDebugValue = ReactExports.useDebugValue;
+  var useSyncExternalStoreWithSelector = useSyncExternalStoreExports.useSyncExternalStoreWithSelector;
+  var didWarnAboutEqualityFn = false;
+  function useStore(api, selector, equalityFn) {
+    if (selector === void 0) {
+      selector = api.getState;
+    }
+    if (equalityFn && !didWarnAboutEqualityFn) {
+      console.warn("[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937");
+      didWarnAboutEqualityFn = true;
+    }
+    var slice = useSyncExternalStoreWithSelector(api.subscribe, api.getState, api.getServerState || api.getState, selector, equalityFn);
+    useDebugValue(slice);
+    return slice;
   }
-
-  var isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-  var useIsomorphicLayoutEffect = isSSR ? react.useEffect : react.useLayoutEffect;
-
-  function create(createState) {
-    var api = typeof createState === 'function' ? createStore(createState) : createState;
-
-    var useStore = function useStore(selector, equalityFn) {
-      if (selector === void 0) {
-        selector = api.getState;
-      }
-
-      if (equalityFn === void 0) {
-        equalityFn = Object.is;
-      }
-
-      var _ref = react.useReducer(function (c) {
-        return c + 1;
-      }, 0),
-          forceUpdate = _ref[1];
-
-      var state = api.getState();
-      var stateRef = react.useRef(state);
-      var selectorRef = react.useRef(selector);
-      var equalityFnRef = react.useRef(equalityFn);
-      var erroredRef = react.useRef(false);
-      var currentSliceRef = react.useRef();
-
-      if (currentSliceRef.current === undefined) {
-        currentSliceRef.current = selector(state);
-      }
-
-      var newStateSlice;
-      var hasNewStateSlice = false;
-
-      if (stateRef.current !== state || selectorRef.current !== selector || equalityFnRef.current !== equalityFn || erroredRef.current) {
-        newStateSlice = selector(state);
-        hasNewStateSlice = !equalityFn(currentSliceRef.current, newStateSlice);
-      }
-
-      useIsomorphicLayoutEffect(function () {
-        if (hasNewStateSlice) {
-          currentSliceRef.current = newStateSlice;
-        }
-
-        stateRef.current = state;
-        selectorRef.current = selector;
-        equalityFnRef.current = equalityFn;
-        erroredRef.current = false;
-      });
-      var stateBeforeSubscriptionRef = react.useRef(state);
-      useIsomorphicLayoutEffect(function () {
-        var listener = function listener() {
-          try {
-            var nextState = api.getState();
-            var nextStateSlice = selectorRef.current(nextState);
-
-            if (!equalityFnRef.current(currentSliceRef.current, nextStateSlice)) {
-              stateRef.current = nextState;
-              currentSliceRef.current = nextStateSlice;
-              forceUpdate();
-            }
-          } catch (error) {
-            erroredRef.current = true;
-            forceUpdate();
-          }
-        };
-
-        var unsubscribe = api.subscribe(listener);
-
-        if (api.getState() !== stateBeforeSubscriptionRef.current) {
-          listener();
-        }
-
-        return unsubscribe;
-      }, []);
-      var sliceToReturn = hasNewStateSlice ? newStateSlice : currentSliceRef.current;
-      react.useDebugValue(sliceToReturn);
-      return sliceToReturn;
+  var createImpl = function createImpl(createState) {
+    if (typeof createState !== 'function') {
+      console.warn("[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`.");
+    }
+    var api = typeof createState === 'function' ? vanilla.createStore(createState) : createState;
+    var useBoundStore = function useBoundStore(selector, equalityFn) {
+      return useStore(api, selector, equalityFn);
     };
+    Object.assign(useBoundStore, api);
+    return useBoundStore;
+  };
+  var create = function create(createState) {
+    return createState ? createImpl(createState) : createImpl;
+  };
+  var react = (function (createState) {
+    {
+      console.warn("[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.");
+    }
+    return create(createState);
+  });
 
-    Object.assign(useStore, api);
+  exports.create = create;
+  exports.default = react;
+  exports.useStore = useStore;
+  Object.keys(vanilla).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: function () { return vanilla[k]; }
+    });
+  });
 
-    useStore[Symbol.iterator] = function () {
-      console.warn('[useStore, api] = create() is deprecated and will be removed in v4');
-      var items = [useStore, api];
-      return {
-        next: function next() {
-          var done = items.length <= 0;
-          return {
-            value: items.shift(),
-            done: done
-          };
-        }
-      };
-    };
-
-    return useStore;
-  }
-
-  exports["default"] = create;
-
   Object.defineProperty(exports, '__esModule', { value: true });
 
 }));

umd/index.production.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).zustand={},e.React)}(this,(function(e,t){"use strict";function r(e){var t,r=new Set,n=function(e,n){var u="function"==typeof e?e(t):e;if(u!==t){var c=t;t=n?u:Object.assign({},t,u),r.forEach((function(e){return e(t,c)}))}},u=function(){return t},c={setState:n,getState:u,subscribe:function(e,n,c){return n||c?function(e,n,c){void 0===n&&(n=u),void 0===c&&(c=Object.is),console.warn("[DEPRECATED] Please use `subscribeWithSelector` middleware");var i=n(t);function o(){var r=n(t);if(!c(i,r)){var u=i;e(i=r,u)}}return r.add(o),function(){return r.delete(o)}}(e,n,c):(r.add(e),function(){return r.delete(e)})},destroy:function(){return r.clear()}};return t=e(n,u,c),c}var n="undefined"==typeof window||!window.navigator||/ServerSideRendering|^Deno\//.test(window.navigator.userAgent)?t.useEffect:t.useLayoutEffect;e.default=function(e){var u="function"==typeof e?r(e):e,c=function(e,r){void 0===e&&(e=u.getState),void 0===r&&(r=Object.is);var c,i=t.useReducer((function(e){return e+1}),0)[1],o=u.getState(),a=t.useRef(o),f=t.useRef(e),s=t.useRef(r),d=t.useRef(!1),v=t.useRef();void 0===v.current&&(v.current=e(o));var l=!1;(a.current!==o||f.current!==e||s.current!==r||d.current)&&(c=e(o),l=!r(v.current,c)),n((function(){l&&(v.current=c),a.current=o,f.current=e,s.current=r,d.current=!1}));var b=t.useRef(o);n((function(){var e=function(){try{var e=u.getState(),t=f.current(e);s.current(v.current,t)||(a.current=e,v.current=t,i())}catch(e){d.current=!0,i()}},t=u.subscribe(e);return u.getState()!==b.current&&e(),t}),[]);var g=l?c:v.current;return t.useDebugValue(g),g};return Object.assign(c,u),c[Symbol.iterator]=function(){console.warn("[useStore, api] = create() is deprecated and will be removed in v4");var e=[c,u];return{next:function(){var t=e.length<=0;return{value:e.shift(),done:t}}}},c},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("zustand/vanilla"),require("react"),require("use-sync-external-store/shim/with-selector")):"function"==typeof define&&define.amd?define(["exports","zustand/vanilla","react","use-sync-external-store/shim/with-selector"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).zustand={},e.zustandVanilla,e.React,e.useSyncExternalStoreShimWithSelector)}(this,(function(e,t,r,n){"use strict";var u=r.useDebugValue,o=n.useSyncExternalStoreWithSelector;function a(e,t,r){void 0===t&&(t=e.getState);var n=o(e.subscribe,e.getState,e.getServerState||e.getState,t,r);return u(n),n}var i=function(e){var r="function"==typeof e?t.createStore(e):e,n=function(e,t){return a(r,e,t)};return Object.assign(n,r),n},c=function(e){return e?i(e):i};e.create=c,e.default=function(e){return c(e)},e.useStore=a,Object.keys(t).forEach((function(r){"default"===r||Object.prototype.hasOwnProperty.call(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),Object.defineProperty(e,"__esModule",{value:!0})}));

umd/middleware.development.js

@@ -8,6 +8,5 @@ (function (global, factory) {
   function _extends() {
-    _extends = Object.assign || function (target) {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
-
         for (var key in source) {
@@ -19,11 +18,21 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
       }
-
       return target;
     };
-
     return _extends.apply(this, arguments);
   }
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
 
-  var redux = function redux(reducer, initial) {
-    return function (set, get, api) {
+  var reduxImpl = function reduxImpl(reducer, initial) {
+    return function (set, _get, api) {
       api.dispatch = function (action) {
@@ -35,7 +44,7 @@ set(function (state) {
       };
-
       api.dispatchFromDevtools = true;
       return _extends({
         dispatch: function dispatch() {
-          return api.dispatch.apply(api, arguments);
+          var _ref;
+          return (_ref = api).dispatch.apply(_ref, arguments);
         }
@@ -45,88 +54,82 @@ }, initial);
   };
+  var redux = reduxImpl;
 
-  function devtools(fn, options) {
+  var _excluded = ["enabled", "anonymousActionType", "store"],
+    _excluded2 = ["connection"];
+  var trackedConnections = new Map();
+  var getTrackedConnectionState = function getTrackedConnectionState(name) {
+    var api = trackedConnections.get(name);
+    if (!api) return {};
+    return Object.fromEntries(Object.entries(api.stores).map(function (_ref) {
+      var key = _ref[0],
+        api = _ref[1];
+      return [key, api.getState()];
+    }));
+  };
+  var extractConnectionInformation = function extractConnectionInformation(store, extensionConnector, options) {
+    if (store === undefined) {
+      return {
+        type: 'untracked',
+        connection: extensionConnector.connect(options)
+      };
+    }
+    var existingConnection = trackedConnections.get(options.name);
+    if (existingConnection) {
+      return _extends({
+        type: 'tracked',
+        store: store
+      }, existingConnection);
+    }
+    var newConnection = {
+      connection: extensionConnector.connect(options),
+      stores: {}
+    };
+    trackedConnections.set(options.name, newConnection);
+    return _extends({
+      type: 'tracked',
+      store: store
+    }, newConnection);
+  };
+  var devtoolsImpl = function devtoolsImpl(fn, devtoolsOptions) {
+    if (devtoolsOptions === void 0) {
+      devtoolsOptions = {};
+    }
     return function (set, get, api) {
-      var _serialize;
-
-      var didWarnAboutNameDeprecation = false;
-
-      if (typeof options === 'string' && !didWarnAboutNameDeprecation) {
-        console.warn('[zustand devtools middleware]: passing `name` as directly will be not allowed in next major' + 'pass the `name` in an object `{ name: ... }` instead');
-        didWarnAboutNameDeprecation = true;
-      }
-
-      var devtoolsOptions = options === undefined ? {
-        name: undefined,
-        anonymousActionType: undefined
-      } : typeof options === 'string' ? {
-        name: options
-      } : options;
-
-      if (typeof (devtoolsOptions == null ? void 0 : (_serialize = devtoolsOptions.serialize) == null ? void 0 : _serialize.options) !== 'undefined') {
-        console.warn('[zustand devtools middleware]: `serialize.options` is deprecated, just use `serialize`');
-      }
-
+      var _devtoolsOptions = devtoolsOptions,
+        enabled = _devtoolsOptions.enabled,
+        anonymousActionType = _devtoolsOptions.anonymousActionType,
+        store = _devtoolsOptions.store,
+        options = _objectWithoutPropertiesLoose(_devtoolsOptions, _excluded);
       var extensionConnector;
-
       try {
-        extensionConnector = window.__REDUX_DEVTOOLS_EXTENSION__ || window.top.__REDUX_DEVTOOLS_EXTENSION__;
-      } catch (_unused) {}
-
+        extensionConnector = (enabled != null ? enabled : "development" !== 'production') && window.__REDUX_DEVTOOLS_EXTENSION__;
+      } catch (e) {}
       if (!extensionConnector) {
-        if (typeof window !== 'undefined') {
+        if (enabled) {
           console.warn('[zustand devtools middleware] Please install/enable Redux devtools extension');
         }
-
         return fn(set, get, api);
       }
-
-      var extension = Object.create(extensionConnector.connect(devtoolsOptions));
-      var didWarnAboutDevtools = false;
-      Object.defineProperty(api, 'devtools', {
-        get: function get() {
-          if (!didWarnAboutDevtools) {
-            console.warn('[zustand devtools middleware] `devtools` property on the store is deprecated ' + 'it will be removed in the next major.\n' + "You shouldn't interact with the extension directly. But in case you still want to " + 'you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly');
-            didWarnAboutDevtools = true;
-          }
-
-          return extension;
-        },
-        set: function set(value) {
-          if (!didWarnAboutDevtools) {
-            console.warn('[zustand devtools middleware] `api.devtools` is deprecated, ' + 'it will be removed in the next major.\n' + "You shouldn't interact with the extension directly. But in case you still want to " + 'you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly');
-            didWarnAboutDevtools = true;
-          }
-
-          extension = value;
-        }
-      });
-      var didWarnAboutPrefix = false;
-      Object.defineProperty(extension, 'prefix', {
-        get: function get() {
-          if (!didWarnAboutPrefix) {
-            console.warn('[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\n' + 'We no longer prefix the actions/names' + devtoolsOptions.name === undefined ? ', pass the `name` option to create a separate instance of devtools for each store.' : ', because the `name` option already creates a separate instance of devtools for each store.');
-            didWarnAboutPrefix = true;
-          }
-
-          return '';
-        },
-        set: function set() {
-          if (!didWarnAboutPrefix) {
-            console.warn('[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\n' + 'We no longer prefix the actions/names' + devtoolsOptions.name === undefined ? ', pass the `name` option to create a separate instance of devtools for each store.' : ', because the `name` option already creates a separate instance of devtools for each store.');
-            didWarnAboutPrefix = true;
-          }
-        }
-      });
+      var _extractConnectionInf = extractConnectionInformation(store, extensionConnector, options),
+        connection = _extractConnectionInf.connection,
+        connectionInformation = _objectWithoutPropertiesLoose(_extractConnectionInf, _excluded2);
       var isRecording = true;
-
       api.setState = function (state, replace, nameOrAction) {
-        set(state, replace);
-        if (!isRecording) return;
-        extension.send(nameOrAction === undefined ? {
-          type: devtoolsOptions.anonymousActionType || 'anonymous'
+        var _extends2;
+        var r = set(state, replace);
+        if (!isRecording) return r;
+        var action = nameOrAction === undefined ? {
+          type: anonymousActionType || 'anonymous'
         } : typeof nameOrAction === 'string' ? {
           type: nameOrAction
-        } : nameOrAction, get());
+        } : nameOrAction;
+        if (store === undefined) {
+          connection == null || connection.send(action, get());
+          return r;
+        }
+        connection == null || connection.send(_extends({}, action, {
+          type: store + "/" + action.type
+        }), _extends({}, getTrackedConnectionState(options.name), (_extends2 = {}, _extends2[store] = api.getState(), _extends2)));
+        return r;
       };
-
       var setStateFromDevtools = function setStateFromDevtools() {
@@ -138,10 +141,16 @@ var originalIsRecording = isRecording;
       };
-
       var initialState = fn(api.setState, get, api);
-      extension.init(initialState);
-
+      if (connectionInformation.type === 'untracked') {
+        connection == null || connection.init(initialState);
+      } else {
+        connectionInformation.stores[connectionInformation.store] = api;
+        connection == null || connection.init(Object.fromEntries(Object.entries(connectionInformation.stores).map(function (_ref2) {
+          var key = _ref2[0],
+            store = _ref2[1];
+          return [key, key === connectionInformation.store ? initialState : store.getState()];
+        })));
+      }
       if (api.dispatchFromDevtools && typeof api.dispatch === 'function') {
         var didWarnAboutReservedActionType = false;
         var originalDispatch = api.dispatch;
-
         api.dispatch = function () {
@@ -151,3 +160,2 @@ for (var _len = arguments.length, a = new Array(_len), _key = 0; _key < _len; _key++) {
           }
-
           if (a[0].type === '__setState' && !didWarnAboutReservedActionType) {
@@ -160,4 +168,3 @@ console.warn('[zustand devtools middleware] "__setState" action type is reserved ' + 'to set state from the devtools. Avoid using it.');
       }
-
-      extension.subscribe(function (message) {
+      connection.subscribe(function (message) {
         switch (message.type) {
@@ -169,9 +176,20 @@ case 'ACTION':
             }
-
             return parseJsonThen(message.payload, function (action) {
               if (action.type === '__setState') {
-                setStateFromDevtools(action.state);
+                if (store === undefined) {
+                  setStateFromDevtools(action.state);
+                  return;
+                }
+                if (Object.keys(action.state).length !== 1) {
+                  console.error("\n                    [zustand devtools middleware] Unsupported __setState action format. \n                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),\n                    and value of this only key should be a state object. Example: { \"type\": \"__setState\", \"state\": { \"abc123Store\": { \"foo\": \"bar\" } } }\n                    ");
+                }
+                var stateFromDevtools = action.state[store];
+                if (stateFromDevtools === undefined || stateFromDevtools === null) {
+                  return;
+                }
+                if (JSON.stringify(api.getState()) !== JSON.stringify(stateFromDevtools)) {
+                  setStateFromDevtools(stateFromDevtools);
+                }
                 return;
               }
-
               if (!api.dispatchFromDevtools) return;
@@ -181,3 +199,2 @@ if (typeof api.dispatch !== 'function') return;
             });
-
           case 'DISPATCH':
@@ -187,35 +204,50 @@ switch (message.payload.type) {
                 setStateFromDevtools(initialState);
-                return extension.init(api.getState());
-
+                if (store === undefined) {
+                  return connection == null ? void 0 : connection.init(api.getState());
+                }
+                return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
               case 'COMMIT':
-                return extension.init(api.getState());
-
+                if (store === undefined) {
+                  connection == null || connection.init(api.getState());
+                  return;
+                }
+                return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
               case 'ROLLBACK':
                 return parseJsonThen(message.state, function (state) {
-                  setStateFromDevtools(state);
-                  extension.init(api.getState());
+                  if (store === undefined) {
+                    setStateFromDevtools(state);
+                    connection == null || connection.init(api.getState());
+                    return;
+                  }
+                  setStateFromDevtools(state[store]);
+                  connection == null || connection.init(getTrackedConnectionState(options.name));
                 });
-
               case 'JUMP_TO_STATE':
               case 'JUMP_TO_ACTION':
                 return parseJsonThen(message.state, function (state) {
-                  setStateFromDevtools(state);
+                  if (store === undefined) {
+                    setStateFromDevtools(state);
+                    return;
+                  }
+                  if (JSON.stringify(api.getState()) !== JSON.stringify(state[store])) {
+                    setStateFromDevtools(state[store]);
+                  }
                 });
-
               case 'IMPORT_STATE':
                 {
                   var _nextLiftedState$comp;
-
                   var nextLiftedState = message.payload.nextLiftedState;
                   var lastComputedState = (_nextLiftedState$comp = nextLiftedState.computedStates.slice(-1)[0]) == null ? void 0 : _nextLiftedState$comp.state;
                   if (!lastComputedState) return;
-                  setStateFromDevtools(lastComputedState);
-                  extension.send(null, nextLiftedState);
+                  if (store === undefined) {
+                    setStateFromDevtools(lastComputedState);
+                  } else {
+                    setStateFromDevtools(lastComputedState[store]);
+                  }
+                  connection == null || connection.send(null, nextLiftedState);
                   return;
                 }
-
               case 'PAUSE_RECORDING':
                 return isRecording = !isRecording;
             }
-
             return;
@@ -226,7 +258,6 @@ }
     };
-  }
-
+  };
+  var devtools = devtoolsImpl;
   var parseJsonThen = function parseJsonThen(stringified, f) {
     var parsed;
-
     try {
@@ -237,20 +268,15 @@ parsed = JSON.parse(stringified);
     }
-
     if (parsed !== undefined) f(parsed);
   };
 
-  var subscribeWithSelector = function subscribeWithSelector(fn) {
+  var subscribeWithSelectorImpl = function subscribeWithSelectorImpl(fn) {
     return function (set, get, api) {
       var origSubscribe = api.subscribe;
-
       api.subscribe = function (selector, optListener, options) {
         var listener = selector;
-
         if (optListener) {
           var equalityFn = (options == null ? void 0 : options.equalityFn) || Object.is;
           var currentSlice = selector(api.getState());
-
           listener = function listener(state) {
             var nextSlice = selector(state);
-
             if (!equalityFn(currentSlice, nextSlice)) {
@@ -261,3 +287,2 @@ var previousSlice = currentSlice;
           };
-
           if (options != null && options.fireImmediately) {
@@ -267,6 +292,4 @@ optListener(currentSlice, currentSlice);
         }
-
         return origSubscribe(listener);
       };
-
       var initialState = fn(set, get, api);
@@ -276,9 +299,41 @@ return initialState;
   };
+  var subscribeWithSelector = subscribeWithSelectorImpl;
 
   var combine = function combine(initialState, create) {
-    return function (set, get, api) {
-      return Object.assign({}, initialState, create(set, get, api));
+    return function () {
+      return Object.assign({}, initialState, create.apply(void 0, arguments));
     };
   };
 
+  function createJSONStorage(getStorage, options) {
+    var storage;
+    try {
+      storage = getStorage();
+    } catch (e) {
+      return;
+    }
+    var persistStorage = {
+      getItem: function getItem(name) {
+        var _getItem;
+        var parse = function parse(str) {
+          if (str === null) {
+            return null;
+          }
+          return JSON.parse(str, options == null ? void 0 : options.reviver);
+        };
+        var str = (_getItem = storage.getItem(name)) != null ? _getItem : null;
+        if (str instanceof Promise) {
+          return str.then(parse);
+        }
+        return parse(str);
+      },
+      setItem: function setItem(name, newValue) {
+        return storage.setItem(name, JSON.stringify(newValue, options == null ? void 0 : options.replacer));
+      },
+      removeItem: function removeItem(name) {
+        return storage.removeItem(name);
+      }
+    };
+    return persistStorage;
+  }
   var toThenable = function toThenable(fn) {
@@ -288,7 +343,5 @@ return function (input) {
         var result = fn(input);
-
         if (result instanceof Promise) {
           return result;
         }
-
         return {
@@ -314,4 +367,3 @@ then: function then(onFulfilled) {
   };
-
-  var persist = function persist(config, baseOptions) {
+  var oldImpl = function oldImpl(config, baseOptions) {
     return function (set, get, api) {
@@ -332,7 +384,2 @@ var options = _extends({
       }, baseOptions);
-
-      if (options.blacklist || options.whitelist) {
-        console.warn("The " + (options.blacklist ? 'blacklist' : 'whitelist') + " option is deprecated and will be removed in the next version. Please use the 'partialize' option instead.");
-      }
-
       var _hasHydrated = false;
@@ -342,7 +389,5 @@ var hydrationListeners = new Set();
       var storage;
-
       try {
         storage = options.getStorage();
       } catch (e) {}
-
       if (!storage) {
@@ -353,25 +398,6 @@ return config(function () {
         }, get, api);
-      } else if (!storage.removeItem) {
-        console.warn("[zustand persist middleware] The given storage for item '" + options.name + "' does not contain a 'removeItem' method, which will be required in v4.");
       }
-
       var thenableSerialize = toThenable(options.serialize);
-
       var setItem = function setItem() {
         var state = options.partialize(_extends({}, get()));
-
-        if (options.whitelist) {
-          Object.keys(state).forEach(function (key) {
-            var _options$whitelist;
-
-            !((_options$whitelist = options.whitelist) != null && _options$whitelist.includes(key)) && delete state[key];
-          });
-        }
-
-        if (options.blacklist) {
-          options.blacklist.forEach(function (key) {
-            return delete state[key];
-          });
-        }
-
         var errorInSync;
@@ -386,12 +412,8 @@ var thenable = thenableSerialize({
         });
-
         if (errorInSync) {
           throw errorInSync;
         }
-
         return thenable;
       };
-
       var savedSetState = api.setState;
-
       api.setState = function (state, replace) {
@@ -401,3 +423,2 @@ savedSetState(state, replace);
       };
-
       var configResult = config(function () {
@@ -408,3 +429,2 @@ set.apply(void 0, arguments);
       var stateFromStorage;
-
       var hydrate = function hydrate() {
@@ -427,3 +447,2 @@ if (!storage) return;
               }
-
               console.error("State loaded from storage couldn't be migrated since no migrate function was provided");
@@ -436,3 +455,2 @@ } else {
           var _get;
-
           stateFromStorage = options.merge(migratedState, (_get = get()) != null ? _get : configResult);
@@ -442,3 +460,3 @@ set(stateFromStorage, true);
         }).then(function () {
-          postRehydrationCallback == null ? void 0 : postRehydrationCallback(stateFromStorage, undefined);
+          postRehydrationCallback == null || postRehydrationCallback(stateFromStorage, undefined);
           _hasHydrated = true;
@@ -449,10 +467,8 @@ finishHydrationListeners.forEach(function (cb) {
         }).catch(function (e) {
-          postRehydrationCallback == null ? void 0 : postRehydrationCallback(undefined, e);
+          postRehydrationCallback == null || postRehydrationCallback(undefined, e);
         });
       };
-
       api.persist = {
         setOptions: function setOptions(newOptions) {
           options = _extends({}, options, newOptions);
-
           if (newOptions.getStorage) {
@@ -464,5 +480,7 @@ storage = newOptions.getStorage();
           var _storage;
-
-          (_storage = storage) == null ? void 0 : _storage.removeItem == null ? void 0 : _storage.removeItem(options.name);
+          (_storage = storage) == null || _storage.removeItem(options.name);
         },
+        getOptions: function getOptions() {
+          return options;
+        },
         rehydrate: function rehydrate() {
@@ -491,4 +509,131 @@ return hydrate();
   };
+  var newImpl = function newImpl(config, baseOptions) {
+    return function (set, get, api) {
+      var options = _extends({
+        storage: createJSONStorage(function () {
+          return localStorage;
+        }),
+        partialize: function partialize(state) {
+          return state;
+        },
+        version: 0,
+        merge: function merge(persistedState, currentState) {
+          return _extends({}, currentState, persistedState);
+        }
+      }, baseOptions);
+      var _hasHydrated2 = false;
+      var hydrationListeners = new Set();
+      var finishHydrationListeners = new Set();
+      var storage = options.storage;
+      if (!storage) {
+        return config(function () {
+          console.warn("[zustand persist middleware] Unable to update item '" + options.name + "', the given storage is currently unavailable.");
+          set.apply(void 0, arguments);
+        }, get, api);
+      }
+      var setItem = function setItem() {
+        var state = options.partialize(_extends({}, get()));
+        return storage.setItem(options.name, {
+          state: state,
+          version: options.version
+        });
+      };
+      var savedSetState = api.setState;
+      api.setState = function (state, replace) {
+        savedSetState(state, replace);
+        void setItem();
+      };
+      var configResult = config(function () {
+        set.apply(void 0, arguments);
+        void setItem();
+      }, get, api);
+      var stateFromStorage;
+      var hydrate = function hydrate() {
+        var _get3;
+        if (!storage) return;
+        _hasHydrated2 = false;
+        hydrationListeners.forEach(function (cb) {
+          var _get2;
+          return cb((_get2 = get()) != null ? _get2 : configResult);
+        });
+        var postRehydrationCallback = (options.onRehydrateStorage == null ? void 0 : options.onRehydrateStorage((_get3 = get()) != null ? _get3 : configResult)) || undefined;
+        return toThenable(storage.getItem.bind(storage))(options.name).then(function (deserializedStorageValue) {
+          if (deserializedStorageValue) {
+            if (typeof deserializedStorageValue.version === 'number' && deserializedStorageValue.version !== options.version) {
+              if (options.migrate) {
+                return options.migrate(deserializedStorageValue.state, deserializedStorageValue.version);
+              }
+              console.error("State loaded from storage couldn't be migrated since no migrate function was provided");
+            } else {
+              return deserializedStorageValue.state;
+            }
+          }
+        }).then(function (migratedState) {
+          var _get4;
+          stateFromStorage = options.merge(migratedState, (_get4 = get()) != null ? _get4 : configResult);
+          set(stateFromStorage, true);
+          return setItem();
+        }).then(function () {
+          postRehydrationCallback == null || postRehydrationCallback(stateFromStorage, undefined);
+          stateFromStorage = get();
+          _hasHydrated2 = true;
+          finishHydrationListeners.forEach(function (cb) {
+            return cb(stateFromStorage);
+          });
+        }).catch(function (e) {
+          postRehydrationCallback == null || postRehydrationCallback(undefined, e);
+        });
+      };
+      api.persist = {
+        setOptions: function setOptions(newOptions) {
+          options = _extends({}, options, newOptions);
+          if (newOptions.storage) {
+            storage = newOptions.storage;
+          }
+        },
+        clearStorage: function clearStorage() {
+          var _storage2;
+          (_storage2 = storage) == null || _storage2.removeItem(options.name);
+        },
+        getOptions: function getOptions() {
+          return options;
+        },
+        rehydrate: function rehydrate() {
+          return hydrate();
+        },
+        hasHydrated: function hasHydrated() {
+          return _hasHydrated2;
+        },
+        onHydrate: function onHydrate(cb) {
+          hydrationListeners.add(cb);
+          return function () {
+            hydrationListeners.delete(cb);
+          };
+        },
+        onFinishHydration: function onFinishHydration(cb) {
+          finishHydrationListeners.add(cb);
+          return function () {
+            finishHydrationListeners.delete(cb);
+          };
+        }
+      };
+      if (!options.skipHydration) {
+        hydrate();
+      }
+      return stateFromStorage || configResult;
+    };
+  };
+  var persistImpl = function persistImpl(config, baseOptions) {
+    if ('getStorage' in baseOptions || 'serialize' in baseOptions || 'deserialize' in baseOptions) {
+      {
+        console.warn('[DEPRECATED] `getStorage`, `serialize` and `deserialize` options are deprecated. Use `storage` option instead.');
+      }
+      return oldImpl(config, baseOptions);
+    }
+    return newImpl(config, baseOptions);
+  };
+  var persist = persistImpl;
 
   exports.combine = combine;
+  exports.createJSONStorage = createJSONStorage;
   exports.devtools = devtools;
@@ -499,4 +644,2 @@ exports.persist = persist;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));

umd/middleware.production.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).zustandMiddleware={})}(this,(function(e){"use strict";function t(){return t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},t.apply(this,arguments)}var n=function(e,t){var n;try{n=JSON.parse(e)}catch(e){console.error("[zustand devtools middleware] Could not parse the received json",e)}void 0!==n&&t(n)},o=function e(t){return function(n){try{var o=t(n);return o instanceof Promise?o:{then:function(t){return e(t)(o)},catch:function(e){return this}}}catch(t){return{then:function(e){return this},catch:function(n){return e(n)(t)}}}}};e.combine=function(e,t){return function(n,o,r){return Object.assign({},e,t(n,o,r))}},e.devtools=function(e,t){return function(o,r,i){var a,s=!1;"string"!=typeof t||s||(console.warn("[zustand devtools middleware]: passing `name` as directly will be not allowed in next majorpass the `name` in an object `{ name: ... }` instead"),s=!0);var c,u=void 0===t?{name:void 0,anonymousActionType:void 0}:"string"==typeof t?{name:t}:t;void 0!==(null==u||null==(a=u.serialize)?void 0:a.options)&&console.warn("[zustand devtools middleware]: `serialize.options` is deprecated, just use `serialize`");try{c=window.__REDUX_DEVTOOLS_EXTENSION__||window.top.__REDUX_DEVTOOLS_EXTENSION__}catch(e){}if(!c)return e(o,r,i);var d=Object.create(c.connect(u)),l=!1;Object.defineProperty(i,"devtools",{get:function(){return l||(console.warn("[zustand devtools middleware] `devtools` property on the store is deprecated it will be removed in the next major.\nYou shouldn't interact with the extension directly. But in case you still want to you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly"),l=!0),d},set:function(e){l||(console.warn("[zustand devtools middleware] `api.devtools` is deprecated, it will be removed in the next major.\nYou shouldn't interact with the extension directly. But in case you still want to you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly"),l=!0),d=e}});var f=!1;Object.defineProperty(d,"prefix",{get:function(){return f||(console.warn("[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\nWe no longer prefix the actions/names"+u.name===void 0?", pass the `name` option to create a separate instance of devtools for each store.":", because the `name` option already creates a separate instance of devtools for each store."),f=!0),""},set:function(){f||(console.warn("[zustand devtools middleware] along with `api.devtools`, `api.devtools.prefix` is deprecated.\nWe no longer prefix the actions/names"+u.name===void 0?", pass the `name` option to create a separate instance of devtools for each store.":", because the `name` option already creates a separate instance of devtools for each store."),f=!0)}});var p=!0;i.setState=function(e,t,n){o(e,t),p&&d.send(void 0===n?{type:u.anonymousActionType||"anonymous"}:"string"==typeof n?{type:n}:n,r())};var v=function(){var e=p;p=!1,o.apply(void 0,arguments),p=e},h=e(i.setState,r,i);if(d.init(h),i.dispatchFromDevtools&&"function"==typeof i.dispatch){var m=!1,y=i.dispatch;i.dispatch=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];"__setState"!==t[0].type||m||(console.warn('[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'),m=!0),y.apply(void 0,t)}}return d.subscribe((function(e){switch(e.type){case"ACTION":return"string"!=typeof e.payload?void console.error("[zustand devtools middleware] Unsupported action format"):n(e.payload,(function(e){"__setState"!==e.type?i.dispatchFromDevtools&&"function"==typeof i.dispatch&&i.dispatch(e):v(e.state)}));case"DISPATCH":switch(e.payload.type){case"RESET":return v(h),d.init(i.getState());case"COMMIT":return d.init(i.getState());case"ROLLBACK":return n(e.state,(function(e){v(e),d.init(i.getState())}));case"JUMP_TO_STATE":case"JUMP_TO_ACTION":return n(e.state,(function(e){v(e)}));case"IMPORT_STATE":var t,o=e.payload.nextLiftedState,r=null==(t=o.computedStates.slice(-1)[0])?void 0:t.state;if(!r)return;return v(r),void d.send(null,o);case"PAUSE_RECORDING":return p=!p}return}})),h}},e.persist=function(e,n){return function(r,i,a){var s=t({getStorage:function(){return localStorage},serialize:JSON.stringify,deserialize:JSON.parse,partialize:function(e){return e},version:0,merge:function(e,n){return t({},n,e)}},n);(s.blacklist||s.whitelist)&&console.warn("The "+(s.blacklist?"blacklist":"whitelist")+" option is deprecated and will be removed in the next version. Please use the 'partialize' option instead.");var c,u=!1,d=new Set,l=new Set;try{c=s.getStorage()}catch(e){}if(!c)return e((function(){console.warn("[zustand persist middleware] Unable to update item '"+s.name+"', the given storage is currently unavailable."),r.apply(void 0,arguments)}),i,a);c.removeItem||console.warn("[zustand persist middleware] The given storage for item '"+s.name+"' does not contain a 'removeItem' method, which will be required in v4.");var f=o(s.serialize),p=function(){var e,n=s.partialize(t({},i()));s.whitelist&&Object.keys(n).forEach((function(e){var t;(null==(t=s.whitelist)||!t.includes(e))&&delete n[e]})),s.blacklist&&s.blacklist.forEach((function(e){return delete n[e]}));var o=f({state:n,version:s.version}).then((function(e){return c.setItem(s.name,e)})).catch((function(t){e=t}));if(e)throw e;return o},v=a.setState;a.setState=function(e,t){v(e,t),p()};var h,m=e((function(){r.apply(void 0,arguments),p()}),i,a),y=function(){if(c){u=!1,d.forEach((function(e){return e(i())}));var e=(null==s.onRehydrateStorage?void 0:s.onRehydrateStorage(i()))||void 0;return o(c.getItem.bind(c))(s.name).then((function(e){if(e)return s.deserialize(e)})).then((function(e){if(e){if("number"!=typeof e.version||e.version===s.version)return e.state;if(s.migrate)return s.migrate(e.state,e.version);console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}})).then((function(e){var t;return h=s.merge(e,null!=(t=i())?t:m),r(h,!0),p()})).then((function(){null==e||e(h,void 0),u=!0,l.forEach((function(e){return e(h)}))})).catch((function(t){null==e||e(void 0,t)}))}};return a.persist={setOptions:function(e){s=t({},s,e),e.getStorage&&(c=e.getStorage())},clearStorage:function(){var e;null==(e=c)||null==e.removeItem||e.removeItem(s.name)},rehydrate:function(){return y()},hasHydrated:function(){return u},onHydrate:function(e){return d.add(e),function(){d.delete(e)}},onFinishHydration:function(e){return l.add(e),function(){l.delete(e)}}},y(),h||m}},e.redux=function(e,n){return function(o,r,i){return i.dispatch=function(t){return o((function(n){return e(n,t)}),!1,t),t},i.dispatchFromDevtools=!0,t({dispatch:function(){return i.dispatch.apply(i,arguments)}},n)}},e.subscribeWithSelector=function(e){return function(t,n,o){var r=o.subscribe;return o.subscribe=function(e,t,n){var i=e;if(t){var a=(null==n?void 0:n.equalityFn)||Object.is,s=e(o.getState());i=function(n){var o=e(n);if(!a(s,o)){var r=s;t(s=o,r)}},null!=n&&n.fireImmediately&&t(s,s)}return r(i)},e(t,n,o)}},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).zustandMiddleware={})}(this,(function(t){"use strict";function e(){return e=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},e.apply(this,arguments)}function n(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)n=o[r],e.indexOf(n)>=0||(i[n]=t[n]);return i}var r=function(t,n){return function(r,i,o){return o.dispatch=function(e){return r((function(n){return t(n,e)}),!1,e),e},o.dispatchFromDevtools=!0,e({dispatch:function(){var t;return(t=o).dispatch.apply(t,arguments)}},n)}},i=["enabled","anonymousActionType","store"],o=["connection"],a=new Map,u=function(t){var e=a.get(t);return e?Object.fromEntries(Object.entries(e.stores).map((function(t){return[t[0],t[1].getState()]}))):{}},s=function(t,r){return void 0===r&&(r={}),function(s,f,l){var d,v=r,p=v.enabled,y=v.anonymousActionType,g=v.store,m=n(v,i);try{d=null!=p&&p&&window.__REDUX_DEVTOOLS_EXTENSION__}catch(t){}if(!d)return t(s,f,l);var h=function(t,n,r){if(void 0===t)return{type:"untracked",connection:n.connect(r)};var i=a.get(r.name);if(i)return e({type:"tracked",store:t},i);var o={connection:n.connect(r),stores:{}};return a.set(r.name,o),e({type:"tracked",store:t},o)}(g,d,m),S=h.connection,b=n(h,o),O=!0;l.setState=function(t,n,r){var i,o=s(t,n);if(!O)return o;var a=void 0===r?{type:y||"anonymous"}:"string"==typeof r?{type:r}:r;return void 0===g?(null==S||S.send(a,f()),o):(null==S||S.send(e({},a,{type:g+"/"+a.type}),e({},u(m.name),((i={})[g]=l.getState(),i))),o)};var w=function(){var t=O;O=!1,s.apply(void 0,arguments),O=t},I=t(l.setState,f,l);if("untracked"===b.type?null==S||S.init(I):(b.stores[b.store]=l,null==S||S.init(Object.fromEntries(Object.entries(b.stores).map((function(t){var e=t[0],n=t[1];return[e,e===b.store?I:n.getState()]}))))),l.dispatchFromDevtools&&"function"==typeof l.dispatch){var T=l.dispatch;l.dispatch=function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];T.apply(void 0,e)}}return S.subscribe((function(t){switch(t.type){case"ACTION":return"string"!=typeof t.payload?void console.error("[zustand devtools middleware] Unsupported action format"):c(t.payload,(function(t){if("__setState"!==t.type)l.dispatchFromDevtools&&"function"==typeof l.dispatch&&l.dispatch(t);else{if(void 0===g)return void w(t.state);1!==Object.keys(t.state).length&&console.error('\n                    [zustand devtools middleware] Unsupported __setState action format. \n                    When using \'store\' option in devtools(), the \'state\' should have only one key, which is a value of \'store\' that was passed in devtools(),\n                    and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }\n                    ');var e=t.state[g];if(null==e)return;JSON.stringify(l.getState())!==JSON.stringify(e)&&w(e)}}));case"DISPATCH":switch(t.payload.type){case"RESET":return w(I),void 0===g?null==S?void 0:S.init(l.getState()):null==S?void 0:S.init(u(m.name));case"COMMIT":return void 0===g?void(null==S||S.init(l.getState())):null==S?void 0:S.init(u(m.name));case"ROLLBACK":return c(t.state,(function(t){if(void 0===g)return w(t),void(null==S||S.init(l.getState()));w(t[g]),null==S||S.init(u(m.name))}));case"JUMP_TO_STATE":case"JUMP_TO_ACTION":return c(t.state,(function(t){void 0!==g?JSON.stringify(l.getState())!==JSON.stringify(t[g])&&w(t[g]):w(t)}));case"IMPORT_STATE":var e,n=t.payload.nextLiftedState,r=null==(e=n.computedStates.slice(-1)[0])?void 0:e.state;if(!r)return;return w(void 0===g?r:r[g]),void(null==S||S.send(null,n));case"PAUSE_RECORDING":return O=!O}return}})),I}},c=function(t,e){var n;try{n=JSON.parse(t)}catch(t){console.error("[zustand devtools middleware] Could not parse the received json",t)}void 0!==n&&e(n)},f=function(t){return function(e,n,r){var i=r.subscribe;return r.subscribe=function(t,e,n){var o=t;if(e){var a=(null==n?void 0:n.equalityFn)||Object.is,u=t(r.getState());o=function(n){var r=t(n);if(!a(u,r)){var i=u;e(u=r,i)}},null!=n&&n.fireImmediately&&e(u,u)}return i(o)},t(e,n,r)}};function l(t,e){var n;try{n=t()}catch(t){return}return{getItem:function(t){var r,i=function(t){return null===t?null:JSON.parse(t,null==e?void 0:e.reviver)},o=null!=(r=n.getItem(t))?r:null;return o instanceof Promise?o.then(i):i(o)},setItem:function(t,r){return n.setItem(t,JSON.stringify(r,null==e?void 0:e.replacer))},removeItem:function(t){return n.removeItem(t)}}}var d=function t(e){return function(n){try{var r=e(n);return r instanceof Promise?r:{then:function(e){return t(e)(r)},catch:function(t){return this}}}catch(e){return{then:function(t){return this},catch:function(n){return t(n)(e)}}}}},v=function(t,n){return"getStorage"in n||"serialize"in n||"deserialize"in n?function(t,n){return function(r,i,o){var a,u=e({getStorage:function(){return localStorage},serialize:JSON.stringify,deserialize:JSON.parse,partialize:function(t){return t},version:0,merge:function(t,n){return e({},n,t)}},n),s=!1,c=new Set,f=new Set;try{a=u.getStorage()}catch(t){}if(!a)return t((function(){console.warn("[zustand persist middleware] Unable to update item '"+u.name+"', the given storage is currently unavailable."),r.apply(void 0,arguments)}),i,o);var l=d(u.serialize),v=function(){var t,n=u.partialize(e({},i())),r=l({state:n,version:u.version}).then((function(t){return a.setItem(u.name,t)})).catch((function(e){t=e}));if(t)throw t;return r},p=o.setState;o.setState=function(t,e){p(t,e),v()};var y,g=t((function(){r.apply(void 0,arguments),v()}),i,o),m=function(){if(a){s=!1,c.forEach((function(t){return t(i())}));var t=(null==u.onRehydrateStorage?void 0:u.onRehydrateStorage(i()))||void 0;return d(a.getItem.bind(a))(u.name).then((function(t){if(t)return u.deserialize(t)})).then((function(t){if(t){if("number"!=typeof t.version||t.version===u.version)return t.state;if(u.migrate)return u.migrate(t.state,t.version);console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}})).then((function(t){var e;return y=u.merge(t,null!=(e=i())?e:g),r(y,!0),v()})).then((function(){null==t||t(y,void 0),s=!0,f.forEach((function(t){return t(y)}))})).catch((function(e){null==t||t(void 0,e)}))}};return o.persist={setOptions:function(t){u=e({},u,t),t.getStorage&&(a=t.getStorage())},clearStorage:function(){var t;null==(t=a)||t.removeItem(u.name)},getOptions:function(){return u},rehydrate:function(){return m()},hasHydrated:function(){return s},onHydrate:function(t){return c.add(t),function(){c.delete(t)}},onFinishHydration:function(t){return f.add(t),function(){f.delete(t)}}},m(),y||g}}(t,n):function(t,n){return function(r,i,o){var a=e({storage:l((function(){return localStorage})),partialize:function(t){return t},version:0,merge:function(t,n){return e({},n,t)}},n),u=!1,s=new Set,c=new Set,f=a.storage;if(!f)return t((function(){console.warn("[zustand persist middleware] Unable to update item '"+a.name+"', the given storage is currently unavailable."),r.apply(void 0,arguments)}),i,o);var v=function(){var t=a.partialize(e({},i()));return f.setItem(a.name,{state:t,version:a.version})},p=o.setState;o.setState=function(t,e){p(t,e),v()};var y,g=t((function(){r.apply(void 0,arguments),v()}),i,o),m=function(){var t;if(f){u=!1,s.forEach((function(t){var e;return t(null!=(e=i())?e:g)}));var e=(null==a.onRehydrateStorage?void 0:a.onRehydrateStorage(null!=(t=i())?t:g))||void 0;return d(f.getItem.bind(f))(a.name).then((function(t){if(t){if("number"!=typeof t.version||t.version===a.version)return t.state;if(a.migrate)return a.migrate(t.state,t.version);console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}})).then((function(t){var e;return y=a.merge(t,null!=(e=i())?e:g),r(y,!0),v()})).then((function(){null==e||e(y,void 0),y=i(),u=!0,c.forEach((function(t){return t(y)}))})).catch((function(t){null==e||e(void 0,t)}))}};return o.persist={setOptions:function(t){a=e({},a,t),t.storage&&(f=t.storage)},clearStorage:function(){var t;null==(t=f)||t.removeItem(a.name)},getOptions:function(){return a},rehydrate:function(){return m()},hasHydrated:function(){return u},onHydrate:function(t){return s.add(t),function(){s.delete(t)}},onFinishHydration:function(t){return c.add(t),function(){c.delete(t)}}},a.skipHydration||m(),y||g}}(t,n)};t.combine=function(t,e){return function(){return Object.assign({},t,e.apply(void 0,arguments))}},t.createJSONStorage=l,t.devtools=s,t.persist=v,t.redux=r,t.subscribeWithSelector=f}));

umd/shallow.development.js

@@ -7,17 +7,67 @@ (function (global, factory) {
 
-  function shallow(objA, objB) {
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+    return arr2;
+  }
+  function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+    if (it) return (it = it.call(o)).next.bind(it);
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      return function () {
+        if (i >= o.length) return {
+          done: true
+        };
+        return {
+          done: false,
+          value: o[i++]
+        };
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  function shallow$1(objA, objB) {
     if (Object.is(objA, objB)) {
       return true;
     }
-
     if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
       return false;
     }
-
+    if (objA instanceof Map && objB instanceof Map) {
+      if (objA.size !== objB.size) return false;
+      for (var _iterator = _createForOfIteratorHelperLoose(objA), _step; !(_step = _iterator()).done;) {
+        var _step$value = _step.value,
+          key = _step$value[0],
+          value = _step$value[1];
+        if (!Object.is(value, objB.get(key))) {
+          return false;
+        }
+      }
+      return true;
+    }
+    if (objA instanceof Set && objB instanceof Set) {
+      if (objA.size !== objB.size) return false;
+      for (var _iterator2 = _createForOfIteratorHelperLoose(objA), _step2; !(_step2 = _iterator2()).done;) {
+        var _value = _step2.value;
+        if (!objB.has(_value)) {
+          return false;
+        }
+      }
+      return true;
+    }
     var keysA = Object.keys(objA);
-
     if (keysA.length !== Object.keys(objB).length) {
       return false;
     }
-
     for (var i = 0; i < keysA.length; i++) {
@@ -28,10 +78,17 @@ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
     }
-
     return true;
   }
 
-  exports["default"] = shallow;
+  var shallow = (function (objA, objB) {
+    {
+      console.warn("[DEPRECATED] Default export is deprecated. Instead use `import { shallow } from 'zustand/shallow'`.");
+    }
+    return shallow$1(objA, objB);
+  });
 
+  exports.default = shallow;
+  exports.shallow = shallow$1;
+
   Object.defineProperty(exports, '__esModule', { value: true });
 
 }));

umd/shallow.production.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).zustandShallow={})}(this,(function(e){"use strict";e.default=function(e,t){if(Object.is(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e);if(n.length!==Object.keys(t).length)return!1;for(var o=0;o<n.length;o++)if(!Object.prototype.hasOwnProperty.call(t,n[o])||!Object.is(e[n[o]],t[n[o]]))return!1;return!0},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).zustandShallow={})}(this,(function(e){"use strict";function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function r(e,r){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(n)return(n=n.call(e)).next.bind(n);if(Array.isArray(e)||(n=function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(e))||r&&e&&"number"==typeof e.length){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function n(e,t){if(Object.is(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;if(e instanceof Map&&t instanceof Map){if(e.size!==t.size)return!1;for(var n,o=r(e);!(n=o()).done;){var i=n.value,a=i[0],f=i[1];if(!Object.is(f,t.get(a)))return!1}return!0}if(e instanceof Set&&t instanceof Set){if(e.size!==t.size)return!1;for(var u,l=r(e);!(u=l()).done;){var s=u.value;if(!t.has(s))return!1}return!0}var c=Object.keys(e);if(c.length!==Object.keys(t).length)return!1;for(var d=0;d<c.length;d++)if(!Object.prototype.hasOwnProperty.call(t,c[d])||!Object.is(e[c[d]],t[c[d]]))return!1;return!0}e.default=function(e,t){return n(e,t)},e.shallow=n,Object.defineProperty(e,"__esModule",{value:!0})}));

umd/vanilla.development.js

@@ -7,12 +7,10 @@ (function (global, factory) {
 
-  function createStore(createState) {
+  var createStoreImpl = function createStoreImpl(createState) {
     var state;
     var listeners = new Set();
-
     var setState = function setState(partial, replace) {
       var nextState = typeof partial === 'function' ? partial(state) : partial;
-
-      if (nextState !== state) {
+      if (!Object.is(nextState, state)) {
         var _previousState = state;
-        state = replace ? nextState : Object.assign({}, state, nextState);
+        state = (replace != null ? replace : typeof nextState !== 'object' || nextState === null) ? nextState : Object.assign({}, state, nextState);
         listeners.forEach(function (listener) {
@@ -23,39 +21,6 @@ return listener(state, _previousState);
     };
-
     var getState = function getState() {
       return state;
     };
-
-    var subscribeWithSelector = function subscribeWithSelector(listener, selector, equalityFn) {
-      if (selector === void 0) {
-        selector = getState;
-      }
-
-      if (equalityFn === void 0) {
-        equalityFn = Object.is;
-      }
-
-      console.warn('[DEPRECATED] Please use `subscribeWithSelector` middleware');
-      var currentSlice = selector(state);
-
-      function listenerToAdd() {
-        var nextSlice = selector(state);
-
-        if (!equalityFn(currentSlice, nextSlice)) {
-          var _previousSlice = currentSlice;
-          listener(currentSlice = nextSlice, _previousSlice);
-        }
-      }
-
-      listeners.add(listenerToAdd);
-      return function () {
-        return listeners.delete(listenerToAdd);
-      };
-    };
-
-    var subscribe = function subscribe(listener, selector, equalityFn) {
-      if (selector || equalityFn) {
-        return subscribeWithSelector(listener, selector, equalityFn);
-      }
-
+    var subscribe = function subscribe(listener) {
       listeners.add(listener);
@@ -66,7 +31,8 @@ return function () {
     };
-
     var destroy = function destroy() {
-      return listeners.clear();
+      {
+        console.warn('[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected.');
+      }
+      listeners.clear();
     };
-
     var api = {
@@ -80,5 +46,15 @@ setState: setState,
     return api;
-  }
+  };
+  var createStore = function createStore(createState) {
+    return createState ? createStoreImpl(createState) : createStoreImpl;
+  };
+  var vanilla = (function (createState) {
+    {
+      console.warn("[DEPRECATED] Default export is deprecated. Instead use import { createStore } from 'zustand/vanilla'.");
+    }
+    return createStore(createState);
+  });
 
-  exports["default"] = createStore;
+  exports.createStore = createStore;
+  exports.default = vanilla;
 
@@ -85,0 +61,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

umd/vanilla.production.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).zustandVanilla={})}(this,(function(e){"use strict";e.default=function(e){var t,n=new Set,r=function(e,r){var i="function"==typeof e?e(t):e;if(i!==t){var o=t;t=r?i:Object.assign({},t,i),n.forEach((function(e){return e(t,o)}))}},i=function(){return t},o={setState:r,getState:i,subscribe:function(e,r,o){return r||o?function(e,r,o){void 0===r&&(r=i),void 0===o&&(o=Object.is),console.warn("[DEPRECATED] Please use `subscribeWithSelector` middleware");var u=r(t);function f(){var n=r(t);if(!o(u,n)){var i=u;e(u=n,i)}}return n.add(f),function(){return n.delete(f)}}(e,r,o):(n.add(e),function(){return n.delete(e)})},destroy:function(){return n.clear()}};return t=e(r,i,o),o},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).zustandVanilla={})}(this,(function(e){"use strict";var t=function(e){var t,n=new Set,o=function(e,o){var u="function"==typeof e?e(t):e;if(!Object.is(u,t)){var r=t;t=(null!=o?o:"object"!=typeof u||null===u)?u:Object.assign({},t,u),n.forEach((function(e){return e(t,r)}))}},u=function(){return t},r={setState:o,getState:u,subscribe:function(e){return n.add(e),function(){return n.delete(e)}},destroy:function(){n.clear()}};return t=e(o,u,r),r},n=function(e){return e?t(e):t};e.createStore=n,e.default=function(e){return n(e)},Object.defineProperty(e,"__esModule",{value:!0})}));

vanilla.d.ts

@@ -1,40 +0,80 @@
-export declare type State = object;
+type SetStateInternal<T> = {
+    _(partial: T | Partial<T> | {
+        _(state: T): T | Partial<T>;
+    }['_'], replace?: boolean | undefined): void;
+}['_'];
+export interface StoreApi<T> {
+    setState: SetStateInternal<T>;
+    getState: () => T;
+    subscribe: (listener: (state: T, prevState: T) => void) => () => void;
+    /**
+     * @deprecated Use `unsubscribe` returned by `subscribe`
+     */
+    destroy: () => void;
+}
+type Get<T, K, F> = K extends keyof T ? T[K] : F;
+export type Mutate<S, Ms> = number extends Ms['length' & keyof Ms] ? S : Ms extends [] ? S : Ms extends [[infer Mi, infer Ma], ...infer Mrs] ? Mutate<StoreMutators<S, Ma>[Mi & StoreMutatorIdentifier], Mrs> : never;
+export type StateCreator<T, Mis extends [StoreMutatorIdentifier, unknown][] = [], Mos extends [StoreMutatorIdentifier, unknown][] = [], U = T> = ((setState: Get<Mutate<StoreApi<T>, Mis>, 'setState', never>, getState: Get<Mutate<StoreApi<T>, Mis>, 'getState', never>, store: Mutate<StoreApi<T>, Mis>) => U) & {
+    $$storeMutators?: Mos;
+};
+export interface StoreMutators<S, A> {
+}
+export type StoreMutatorIdentifier = keyof StoreMutators<unknown, unknown>;
+type CreateStore = {
+    <T, Mos extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [], Mos>): Mutate<StoreApi<T>, Mos>;
+    <T>(): <Mos extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [], Mos>) => Mutate<StoreApi<T>, Mos>;
+};
+export declare const createStore: CreateStore;
 /**
- * @deprecated Use the builtin `Partial<T>` instead of `PartialState<T>`.
- * Additionally turn on `--exactOptionalPropertyTypes` tsc flag.
- * `PartialState` will be removed in next major
+ * @deprecated Use `import { createStore } from 'zustand/vanilla'`
  */
-export declare type PartialState<T extends State, K1 extends keyof T = keyof T, K2 extends keyof T = K1, K3 extends keyof T = K2, K4 extends keyof T = K3> = (Pick<T, K1> | Pick<T, K2> | Pick<T, K3> | Pick<T, K4> | T) | ((state: T) => Pick<T, K1> | Pick<T, K2> | Pick<T, K3> | Pick<T, K4> | T);
-export declare type StateSelector<T extends State, U> = (state: T) => U;
-export declare type EqualityChecker<T> = (state: T, newState: T) => boolean;
-export declare type StateListener<T> = (state: T, previousState: T) => void;
+declare const _default: CreateStore;
+export default _default;
 /**
- * @deprecated Use `StateListener<T>` instead of `StateSliceListener<T>`.
+ * @deprecated Use `unknown` instead of `State`
  */
-export declare type StateSliceListener<T> = (slice: T, previousSlice: T) => void;
-export declare type Subscribe<T extends State> = {
-    (listener: StateListener<T>): () => void;
-    /**
-     * @deprecated Please use `subscribeWithSelector` middleware
-     */
-    <StateSlice>(listener: StateSliceListener<StateSlice>, selector?: StateSelector<T, StateSlice>, equalityFn?: EqualityChecker<StateSlice>): () => void;
+export type State = unknown;
+/**
+ * @deprecated Use `Partial<T> | ((s: T) => Partial<T>)` instead of `PartialState<T>`
+ */
+export type PartialState<T extends State> = Partial<T> | ((state: T) => Partial<T>);
+/**
+ * @deprecated Use `(s: T) => U` instead of `StateSelector<T, U>`
+ */
+export type StateSelector<T extends State, U> = (state: T) => U;
+/**
+ * @deprecated Use `(a: T, b: T) => boolean` instead of `EqualityChecker<T>`
+ */
+export type EqualityChecker<T> = (state: T, newState: T) => boolean;
+/**
+ * @deprecated Use `(state: T, previousState: T) => void` instead of `StateListener<T>`
+ */
+export type StateListener<T> = (state: T, previousState: T) => void;
+/**
+ * @deprecated Use `(slice: T, previousSlice: T) => void` instead of `StateSliceListener<T>`.
+ */
+export type StateSliceListener<T> = (slice: T, previousSlice: T) => void;
+/**
+ * @deprecated Use `(listener: (state: T) => void) => void` instead of `Subscribe<T>`.
+ */
+export type Subscribe<T extends State> = {
+    (listener: (state: T, previousState: T) => void): () => void;
 };
-export declare type SetState<T extends State> = {
-    <K1 extends keyof T, K2 extends keyof T = K1, K3 extends keyof T = K2, K4 extends keyof T = K3>(partial: PartialState<T, K1, K2, K3, K4>, replace?: boolean): void;
-};
-export declare type GetState<T extends State> = () => T;
-export declare type Destroy = () => void;
-export declare type StoreApi<T extends State> = {
-    setState: SetState<T>;
-    getState: GetState<T>;
-    subscribe: Subscribe<T>;
-    destroy: Destroy;
-};
-export declare type StateCreator<T extends State, CustomSetState = SetState<T>, CustomGetState = GetState<T>, CustomStoreApi extends StoreApi<T> = StoreApi<T>> = (set: CustomSetState, get: CustomGetState, api: CustomStoreApi) => T;
-declare function createStore<TState extends State, CustomSetState, CustomGetState, CustomStoreApi extends StoreApi<TState>>(createState: StateCreator<TState, CustomSetState, CustomGetState, CustomStoreApi>): CustomStoreApi;
-declare function createStore<TState extends State>(createState: StateCreator<TState, SetState<TState>, GetState<TState>, any>): StoreApi<TState>;
-export default createStore;
-export interface StoreMutators<S, A> {
-}
-export declare type StoreMutatorIdentifier = keyof StoreMutators<unknown, unknown>;
-export declare type Mutate<S, Ms> = Ms extends [] ? S : Ms extends [[infer Mi, infer Ma], ...infer Mrs] ? Mutate<StoreMutators<S, Ma>[Mi & StoreMutatorIdentifier], Mrs> : never;
+/**
+ * @deprecated You might be looking for `StateCreator`, if not then
+ * use `StoreApi<T>['setState']` instead of `SetState<T>`.
+ */
+export type SetState<T extends State> = {
+    _(partial: T | Partial<T> | {
+        _(state: T): T | Partial<T>;
+    }['_'], replace?: boolean | undefined): void;
+}['_'];
+/**
+ * @deprecated You might be looking for `StateCreator`, if not then
+ * use `StoreApi<T>['getState']` instead of `GetState<T>`.
+ */
+export type GetState<T extends State> = () => T;
+/**
+ * @deprecated Use `StoreApi<T>['destroy']` instead of `Destroy`.
+ */
+export type Destroy = () => void;

vanilla.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function createStore(createState) {
+var createStoreImpl = function createStoreImpl(createState) {
   var state;
   var listeners = new Set();
-
   var setState = function setState(partial, replace) {
     var nextState = typeof partial === 'function' ? partial(state) : partial;
-
-    if (nextState !== state) {
+    if (!Object.is(nextState, state)) {
       var _previousState = state;
-      state = replace ? nextState : Object.assign({}, state, nextState);
+      state = (replace != null ? replace : typeof nextState !== 'object' || nextState === null) ? nextState : Object.assign({}, state, nextState);
       listeners.forEach(function (listener) {
@@ -20,39 +16,6 @@ return listener(state, _previousState);
   };
-
   var getState = function getState() {
     return state;
   };
-
-  var subscribeWithSelector = function subscribeWithSelector(listener, selector, equalityFn) {
-    if (selector === void 0) {
-      selector = getState;
-    }
-
-    if (equalityFn === void 0) {
-      equalityFn = Object.is;
-    }
-
-    console.warn('[DEPRECATED] Please use `subscribeWithSelector` middleware');
-    var currentSlice = selector(state);
-
-    function listenerToAdd() {
-      var nextSlice = selector(state);
-
-      if (!equalityFn(currentSlice, nextSlice)) {
-        var _previousSlice = currentSlice;
-        listener(currentSlice = nextSlice, _previousSlice);
-      }
-    }
-
-    listeners.add(listenerToAdd);
-    return function () {
-      return listeners.delete(listenerToAdd);
-    };
-  };
-
-  var subscribe = function subscribe(listener, selector, equalityFn) {
-    if (selector || equalityFn) {
-      return subscribeWithSelector(listener, selector, equalityFn);
-    }
-
+  var subscribe = function subscribe(listener) {
     listeners.add(listener);
@@ -63,7 +26,8 @@ return function () {
   };
-
   var destroy = function destroy() {
-    return listeners.clear();
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn('[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected.');
+    }
+    listeners.clear();
   };
-
   var api = {
@@ -77,4 +41,18 @@ setState: setState,
   return api;
-}
+};
+var createStore = function createStore(createState) {
+  return createState ? createStoreImpl(createState) : createStoreImpl;
+};
+var vanilla = (function (createState) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn("[DEPRECATED] Default export is deprecated. Instead use import { createStore } from 'zustand/vanilla'.");
+  }
+  return createStore(createState);
+});
 
-exports["default"] = createStore;
+exports.createStore = createStore;
+exports.default = vanilla;
+
+module.exports = vanilla;
+module.exports.createStore = createStore;
+exports.default = module.exports;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

324231

increased by57.73%

Number of package files

141

increased by135%

Lines of code

7085

increased by75.15%

Worsened metrics

Dependency count

4

increased by300%

Number of low quality alerts

5

increased by150%

Number of lines in readme file

531

decreased by-16.11%

Number of low supply chain risk alerts

8

increased byInfinity%