breaking(types): Add higher kinded mutator types

.github/workflows/test-multiple-versions.yml

@@ -46,7 +46,7 @@ jobs:
  - run: yarn install --frozen-lockfile --check-files
  - name: Install alpha testing-library
  if: ${{ matrix.testing == 'alpha' }}
- run: yarn add -D @testing-library/react@alpha
+ run: yarn add -D @testing-library/react@13.0.0-alpha.5
  - name: Patch for React 16
  if: ${{ startsWith(matrix.react, '16.') }}
  run: |

package.json

@@ -1,7 +1,10 @@
 {
  "name": "zustand",
  "private": true,
- "version": "3.7.1",
+ "version": "4.0.0-beta.2",
+ "publishConfig": {
+ "tag": "next"
+ },
  "description": "🐻 Bear necessities for state management in React",
  "main": "./index.js",
  "types": "./index.d.ts",
@@ -130,13 +133,17 @@
  "tests/**/*.{js,ts,tsx}"
  ]
  },
+ "dependencies": {
+ "use-sync-external-store": "1.0.0-rc.1-next-629036a9c-20220224"
+ },
  "devDependencies": {
  "@babel/core": "^7.17.5",
  "@babel/plugin-external-helpers": "^7.16.7",
  "@babel/plugin-transform-react-jsx": "^7.17.3",
  "@babel/plugin-transform-runtime": "^7.17.0",
  "@babel/plugin-transform-typescript": "^7.16.8",
  "@babel/preset-env": "^7.16.11",
+ "@redux-devtools/extension": "^3.2.2",
  "@rollup/plugin-babel": "^5.3.1",
  "@rollup/plugin-node-resolve": "^13.1.3",
  "@rollup/plugin-replace": "^4.0.0",
@@ -147,6 +154,7 @@
  "@types/jest": "^27.4.1",
  "@types/react": "^17.0.39",
  "@types/react-dom": "^17.0.11",
+ "@types/use-sync-external-store": "^0.0.3",
  "@typescript-eslint/eslint-plugin": "^5.12.1",
  "@typescript-eslint/parser": "^5.12.1",
  "concurrently": "^7.0.0",
@@ -167,12 +175,16 @@
  "prettier": "^2.5.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
+ "redux": "^5.0.0-alpha.0",
  "rollup": "^2.68.0",
  "rollup-plugin-esbuild": "^4.8.2",
  "rollup-plugin-terser": "^7.0.2",
  "shx": "^0.3.4",
  "typescript": "^4.5.5"
  },
+ "resolutions": {
+ "date-fns": "2.27.0"
+ },
  "peerDependencies": {
  "react": ">=16.8"
  },

readme.md

@@ -106,23 +106,6 @@ const treats = useStore(
 )
 ```
 
-## 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
 
 The `set` function has a second argument, `false` by default. Instead of merging, it will replace the state model. Be careful not to wipe out parts you rely on, like actions.
@@ -468,7 +451,33 @@ devtools(..., { anonymousActionType: 'unknown', ... })
 
 ## 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 rules of hooks.
+
+The flexible method available since v4 is to use vanilla store.
+
+```jsx
+import { createContext, useContext } from 'react'
+import { createStore, useStore } from 'zustand'
+
+const store = createStore(...) // vanilla store without hooks
+
+const StoreContext = createContext()
+
+const App = () => (
+ <StoreContext.Provider value={store}>
+ ...
+ </StoreContext.Provider>
+)
+
+const Component = () => {
+ const store = useContext(StoreContext)
+ const slice = useStore(store, selector)
+ ...
+}
+```
+
+Alternatively, a special `createContext` is provided since v3.5,
+which avoid misusing the store hook.
 
 ```jsx
 import create from 'zustand'
@@ -490,6 +499,7 @@ const Component = () => {
  ...
 }
 ```
+
 <details>
  <summary>createContext usage in real components</summary>
 

rollup.config.js

@@ -60,6 +60,9 @@ function createESMConfig(input, output) {
  resolve({ extensions }),
  replace({
  __DEV__: '(import.meta.env&&import.meta.env.MODE)!=="production"',
+ // a workround for #829
+ 'use-sync-external-store/shim/with-selector':
+ 'use-sync-external-store/shim/with-selector.js',
  preventAssignment: true,
  }),
  getEsbuild('node12'),

src/context.ts

@@ -6,47 +6,33 @@ import {
  useMemo,
  useRef,
 } from 'react'
-import { EqualityChecker, State, StateSelector, UseBoundStore } from 'zustand'
+import { EqualityChecker, State, StateSelector, StoreApi, useStore } from '.'
 
-/**
- * @deprecated Use `typeof MyContext.useStore` instead.
- */
-export type UseContextStore<T extends State> = {
- (): T
- <U>(selector: StateSelector<T, U>, equalityFn?: EqualityChecker<U>): U
+type UseContextStore<S extends StoreApi<State>> = {
+  (): ExtractState<S>
+  <U>(
+ selector: StateSelector<ExtractState<S>, U>,
+  equalityFn?: EqualityChecker<U>
+ ): U
 }
 
-function createContext<
- TState extends State,
- TUseBoundStore extends UseBoundStore<TState> = UseBoundStore<TState>
->() {
- const ZustandContext = reactCreateContext<TUseBoundStore | undefined>(
- undefined
- )
+type ExtractState<S> = S extends { getState: () => infer T } ? T : never
+
+type WithoutCallSignature<T> = { [K in keyof T]: T[K] }
+
+function createContext<S extends StoreApi<State>>() {
+ const ZustandContext = reactCreateContext<S | undefined>(undefined)
 
  const Provider = ({
- initialStore,
  createStore,
  children,
  }: {
- /**
- * @deprecated
- */
- initialStore?: TUseBoundStore
- createStore: () => TUseBoundStore
+ createStore: () => S
  children: ReactNode
  }) => {
- const storeRef = useRef<TUseBoundStore>()
+ const storeRef = useRef<S>()
 
  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()
  }
 
@@ -57,50 +43,45 @@ function createContext<
  )
  }
 
- const useStore: UseContextStore<TState> = <StateSlice>(
- selector?: StateSelector<TState, StateSlice>,
- equalityFn = Object.is
+ const useBoundStore = (<StateSlice = ExtractState<S>>(
+ selector?: StateSelector<ExtractState<S>, StateSlice>,
+ equalityFn?: EqualityChecker<StateSlice>
  ) => {
- // 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(
- selector as StateSelector<TState, StateSlice>,
+ return useStore(
+ store,
+ selector as StateSelector<ExtractState<S>, StateSlice>,
  equalityFn
  )
- }
+ }) as UseContextStore<S>
 
- const useStoreApi = (): {
- getState: TUseBoundStore['getState']
- setState: TUseBoundStore['setState']
- subscribe: TUseBoundStore['subscribe']
- destroy: TUseBoundStore['destroy']
- } => {
- // ZustandContext value is guaranteed to be stable.
- const useProviderStore = useContext(ZustandContext)
- if (!useProviderStore) {
+ const useStoreApi = () => {
+ 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]
+ () =>
+ ({
+ getState: store.getState,
+ setState: store.setState,
+ subscribe: store.subscribe,
+ destroy: store.destroy,
+ } as WithoutCallSignature<S>),
+ [store]
  )
  }
 
  return {
  Provider,
- useStore,
+ useStore: useBoundStore,
  useStoreApi,
  }
 }

src/middleware.ts

@@ -3,3 +3,4 @@ export * from './middleware/devtools'
 export * from './middleware/subscribeWithSelector'
 export * from './middleware/combine'
 export * from './middleware/persist'
+export * from './middleware/immer'

src/middleware/combine.ts

@@ -1,25 +1,18 @@
-import { GetState, SetState, State, StoreApi } from '../vanilla'
-import { NamedSet } from './devtools'
+import { State, StateCreator, StoreMutatorIdentifier } from '../vanilla'
 
-type Combine<T, U> = Omit<T, keyof U> & U
+type Write<T, U> = Omit<T, keyof U> & U
 
-export const combine =
- <PrimaryState extends State, SecondaryState extends State>(
- initialState: PrimaryState,
- create: (
- // Note: NamedSet added for convenience
- 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>>
- ) =>
- Object.assign(
- {},
- initialState,
- create(set as any, get as any, api as any)
- ) as Combine<PrimaryState, SecondaryState>
+type Combine = <
+ T extends State,
+ U extends State,
+ Mps extends [StoreMutatorIdentifier, unknown][] = [],
+ Mcs extends [StoreMutatorIdentifier, unknown][] = []
+>(
+ initialState: T,
+ additionalStateCreator: StateCreator<T, Mps, Mcs, U>
+) => StateCreator<Write<T, U>, Mps, Mcs>
+
+export const combine: Combine =
+ (initialState, create) =>
+ (...a) =>
+ Object.assign({}, initialState, (create as any)(...a))