feat: use-sync-external-store

.size-snapshot.json

@@ -1,36 +1,36 @@
 {
   "index.js": {
-    "bundled": 3993,
-    "minified": 1614,
-    "gzipped": 786,
+    "bundled": 2419,
+    "minified": 919,
+    "gzipped": 471,
     "treeshaked": {
       "rollup": {
-        "code": 124,
-        "import_statements": 14
+        "code": 46,
+        "import_statements": 46
       },
       "webpack": {
-        "code": 1144
+        "code": 1063
       }
     }
   },
   "index.mjs": {
-    "bundled": 3993,
-    "minified": 1614,
-    "gzipped": 786,
+    "bundled": 2419,
+    "minified": 919,
+    "gzipped": 471,
     "treeshaked": {
       "rollup": {
-        "code": 124,
-        "import_statements": 14
+        "code": 46,
+        "import_statements": 46
       },
       "webpack": {
-        "code": 1144
+        "code": 1063
       }
     }
   },
   "vanilla.js": {
-    "bundled": 1352,
-    "minified": 444,
-    "gzipped": 288,
+    "bundled": 1362,
+    "minified": 454,
+    "gzipped": 293,
     "treeshaked": {
       "rollup": {
         "code": 0,
@@ -42,9 +42,9 @@
     }
   },
   "vanilla.mjs": {
-    "bundled": 1352,
-    "minified": 444,
-    "gzipped": 288,
+    "bundled": 1362,
+    "minified": 454,
+    "gzipped": 293,
     "treeshaked": {
       "rollup": {
         "code": 0,
@@ -112,30 +112,30 @@
     }
   },
   "context.js": {
-    "bundled": 1516,
-    "minified": 840,
-    "gzipped": 418,
+    "bundled": 1236,
+    "minified": 753,
+    "gzipped": 358,
     "treeshaked": {
       "rollup": {
-        "code": 14,
-        "import_statements": 14
+        "code": 30,
+        "import_statements": 30
       },
       "webpack": {
-        "code": 998
+        "code": 1047
       }
     }
   },
   "context.mjs": {
-    "bundled": 1516,
-    "minified": 840,
-    "gzipped": 418,
+    "bundled": 1236,
+    "minified": 753,
+    "gzipped": 358,
     "treeshaked": {
       "rollup": {
-        "code": 14,
-        "import_statements": 14
+        "code": 30,
+        "import_statements": 30
       },
       "webpack": {
-        "code": 998
+        "code": 1047
       }
     }
   }

package.json

@@ -1,7 +1,10 @@
 {
   "name": "zustand",
   "private": true,
-  "version": "3.5.10",
+  "version": "4.0.0-alpha.3",
+  "publishConfig": {
+    "tag": "alpha"
+  },
   "description": "🐻 Bear necessities for state management in React",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -118,6 +121,9 @@
       "tests/**/*.{js,ts,tsx}"
     ]
   },
+  "dependencies": {
+    "use-sync-external-store": "^0.0.0-experimental-b1a1cb116-20210924"
+  },
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@babel/plugin-external-helpers": "^7.14.5",
@@ -132,6 +138,7 @@
     "@types/jest": "^27.0.1",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
+    "@types/use-sync-external-store": "^0.0.0",
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.29.3",
     "concurrently": "^6.2.1",

src/context.ts

@@ -6,42 +6,34 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import { EqualityChecker, UseStore } from 'zustand'
-import { State, StateSelector } from './vanilla'
+import {
+  EqualityChecker,
+  State,
+  StateSelector,
+  StoreApi,
+  useStore,
+} from 'zustand'
 
 export interface UseContextStore<T extends State> {
   (): T
   <U>(selector: StateSelector<T, U>, equalityFn?: EqualityChecker<U>): U
 }
 
 function createContext<TState extends State>() {
-  const ZustandContext = reactCreateContext<UseStore<TState> | undefined>(
+  const ZustandContext = reactCreateContext<StoreApi<TState> | undefined>(
     undefined
   )
 
   const Provider = ({
-    initialStore,
     createStore,
     children,
   }: {
-    /**
-     * @deprecated
-     */
-    initialStore?: UseStore<TState>
-    createStore: () => UseStore<TState>
+    createStore: () => StoreApi<TState>
     children: ReactNode
   }) => {
-    const storeRef = useRef<UseStore<TState>>()
+    const storeRef = useRef<StoreApi<TState>>()
 
     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()
     }
 
@@ -52,45 +44,44 @@ function createContext<TState extends State>() {
     )
   }
 
-  const useStore: UseContextStore<TState> = <StateSlice>(
+  const useBoundStore: UseContextStore<TState> = <StateSlice>(
     selector?: StateSelector<TState, StateSlice>,
     equalityFn = Object.is
   ) => {
-    // ZustandContext value is guaranteed to be stable.
-    const useProviderStore = useContext(ZustandContext)
-    if (!useProviderStore) {
+    const store = useContext(ZustandContext)
+    if (!store) {
       throw new Error(
         'Seems like you have not used zustand provider as an ancestor.'
       )
     }
-    return useProviderStore(
+    return useStore(
+      store,
       selector as StateSelector<TState, StateSlice>,
       equalityFn
     )
   }
 
   const useStoreApi = () => {
-    // ZustandContext value is guaranteed to be stable.
-    const useProviderStore = useContext(ZustandContext)
-    if (!useProviderStore) {
+    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,
+        getState: store.getState,
+        setState: store.setState,
+        subscribe: store.subscribe,
+        destroy: store.destroy,
       }),
-      [useProviderStore]
+      [store]
     )
   }
 
   return {
     Provider,
-    useStore,
+    useStore: useBoundStore,
     useStoreApi,
   }
 }

src/index.ts

@@ -1,137 +1,12 @@
-import { useEffect, useLayoutEffect, useReducer, useRef } from 'react'
-import createImpl, {
-  Destroy,
-  EqualityChecker,
-  GetState,
-  SetState,
-  State,
-  StateCreator,
-  StateSelector,
-  StoreApi,
-  Subscribe,
-} from './vanilla'
 export * from './vanilla'
-
-// For server-side rendering: https://github.com/pmndrs/zustand/pull/34
-// Deno support: https://github.com/pmndrs/zustand/issues/347
-const isSSR =
-  typeof window === 'undefined' ||
-  !window.navigator ||
-  /ServerSideRendering|^Deno\//.test(window.navigator.userAgent)
-
-const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect
-
-export interface UseStore<T extends State> {
-  (): T
-  <U>(selector: StateSelector<T, U>, equalityFn?: EqualityChecker<U>): U
-  setState: SetState<T>
-  getState: GetState<T>
-  subscribe: Subscribe<T>
-  destroy: Destroy
-}
-
-export default function create<TState extends State>(
-  createState: StateCreator<TState> | StoreApi<TState>
-): UseStore<TState> {
-  const api: StoreApi<TState> =
-    typeof createState === 'function' ? createImpl(createState) : createState
-
-  const useStore: any = <StateSlice>(
-    selector: StateSelector<TState, StateSlice> = api.getState as any,
-    equalityFn: EqualityChecker<StateSlice> = Object.is
-  ) => {
-    const [, forceUpdate] = useReducer((c) => c + 1, 0) as [never, () => void]
-
-    const state = api.getState()
-    const stateRef = useRef(state)
-    const selectorRef = useRef(selector)
-    const equalityFnRef = useRef(equalityFn)
-    const erroredRef = useRef(false)
-
-    const currentSliceRef = useRef<StateSlice>()
-    if (currentSliceRef.current === undefined) {
-      currentSliceRef.current = selector(state)
-    }
-
-    let newStateSlice: StateSlice | undefined
-    let hasNewStateSlice = false
-
-    // The selector or equalityFn need to be called during the render phase if
-    // they change. We also want legitimate errors to be visible so we re-run
-    // them if they errored in the subscriber.
-    if (
-      stateRef.current !== state ||
-      selectorRef.current !== selector ||
-      equalityFnRef.current !== equalityFn ||
-      erroredRef.current
-    ) {
-      // Using local variables to avoid mutations in the render phase.
-      newStateSlice = selector(state)
-      hasNewStateSlice = !equalityFn(
-        currentSliceRef.current as StateSlice,
-        newStateSlice
-      )
-    }
-
-    // Syncing changes in useEffect.
-    useIsomorphicLayoutEffect(() => {
-      if (hasNewStateSlice) {
-        currentSliceRef.current = newStateSlice as StateSlice
-      }
-      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 as StateSlice,
-              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() // state has changed before subscription
-      }
-      return unsubscribe
-    }, [])
-
-    return hasNewStateSlice
-      ? (newStateSlice as StateSlice)
-      : currentSliceRef.current
-  }
-
-  Object.assign(useStore, api)
-
-  // For backward compatibility (No TS types for this)
-  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
-}
+export { default as createStore } from './vanilla'
+export * from './react'
+export { default } from './react'
+
+// For v3 compatibility
+import { UseBoundStore } from './react'
+import { State } from './vanilla'
+/**
+ * @deprecated rename to UseBoundStore
+ */
+export interface UseStore<T extends State> extends UseBoundStore<T> {}