Merge branch 'main' into feat/deprecate-apis-toward-v5

.codesandbox/ci.json

@@ -6,7 +6,8 @@
     "simple-react-browserify-x9yni",
     "simple-snowpack-react-o1gmx",
     "react-parcel-onewf",
-    "next-js-uo1h0"
+    "next-js-uo1h0",
+    "pavlobu-zustand-demo-frutec"
   ],
   "node": "14"
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -19,7 +19,7 @@ assignees: ''
 
 Please do not ask questions in issues.
 
-- [ ] I understand this is not a question.
+- [ ] I've already opened a [discussion](https://github.com/pmndrs/zustand/discussions) before opening this issue.
 
 Please fill this template if you're filling an issue regarding TypeScript.
 

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

@@ -33,8 +33,8 @@ jobs:
           - 18.0.0
           - 18.1.0
           - 18.2.0
-          - 18.3.0-next-353c30252-20221202
-          - 0.0.0-experimental-353c30252-20221202
+          - 18.3.0-next-de7d1c907-20221223
+          - 0.0.0-experimental-de7d1c907-20221223
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2

docs/guides/auto-generating-selectors.md

@@ -69,7 +69,7 @@ const increase = useBearStore.use.increment()
 
 For a working example of this, see the [Code Sandbox](https://codesandbox.io/s/zustand-auto-generate-selectors-forked-rl8v5e?file=/src/selectors.ts).
 
-## 3rd-party Libraries
+## Third-party Libraries
 
 - [auto-zustand-selectors-hook](https://github.com/Albert-Gao/auto-zustand-selectors-hook)
 - [react-hooks-global-state](https://github.com/dai-shi/react-hooks-global-state)

docs/guides/how-to-reset-state.md

@@ -27,7 +27,7 @@ const initialState: State = {
 }
 
 // create store
-const useSlice = create<State & Actions>((set, get) => ({
+const useSlice = create<State & Actions>()((set, get) => ({
   ...initialState,
 
   addSalmon: (qty: number) => {
@@ -44,30 +44,24 @@ const useSlice = create<State & Actions>((set, get) => ({
 }))
 ```
 
-Resetting multiple stores at once instead of individual stores
+Resetting multiple stores at once
 
 ```ts
-import _create, { StateCreator, StoreApi, UseBoundStore } from 'zustand'
+import _create, { StateCreator } from 'zustand'
 
 const resetters: (() => void)[] = []
 
-export const create = <TState extends unknown>(
-  createState: StateCreator<TState> | StoreApi<TState>
-): UseBoundStore<StoreApi<TState>> => {
-  // We need to use createState as never to support StateCreator<TState> and
-  // StoreApi<TState> at the same time.
-  // We also need to re-type slice to UseBoundStore<StoreApi<TState>>
-  const slice: UseBoundStore<StoreApi<TState>> = _create(createState as never)
-  const initialState = slice.getState()
-
+export const create = (<T extends unknown>(f: StateCreator<T> | undefined) => {
+  if (f === undefined) return create
+  const store = _create(f)
+  const initialState = store.getState()
   resetters.push(() => {
-    slice.setState(initialState, true)
+    store.setState(initialState, true)
   })
+  return store
+}) as typeof _create
 
-  return slice
-}
-
-export const resetAllSlices = () => {
+export const resetAllStores = () => {
   for (const resetter of resetters) {
     resetter()
   }
@@ -78,3 +72,4 @@ export const resetAllSlices = () => {
 
 - Basic: https://codesandbox.io/s/zustand-how-to-reset-state-basic-demo-rrqyon
 - Advanced: https://codesandbox.io/s/zustand-how-to-reset-state-advanced-demo-gtu0qe
+- Immer: https://codesandbox.io/s/how-to-reset-state-advance-immer-demo-nyet3f

docs/guides/updating-state.md

@@ -98,21 +98,21 @@ merging that in with the new state values. Like so:
 This is very long! Let's explore some alternatives that will make your life
 easier.
 
-### With immer
+### With Immer
 
-Many people use [immer](https://github.com/immerjs/immer) to update nested
+Many people use [Immer](https://github.com/immerjs/immer) to update nested
 values. Immer can be used anytime you need to update nested state such as in
 React, Redux and of course, Zustand!
 
-You can use immer to shorten your state updates for deeply nested object. Let's
+You can use Immer to shorten your state updates for deeply nested object. Let's
 take a look at an example:
 
 ```ts
   immerInc: () =>
     set(produce((state: State) => { ++state.deep.nested.obj.count })),
 ```
 
-What a reduction!. [Please take note of the gotchas listed here](../integrations/updating-draft-states.md).
+What a reduction! Please take note of the [gotchas listed here](../integrations/immer-middleware.md).
 
 ### With optics-ts
 
@@ -123,7 +123,7 @@ There is another option with [optics-ts](https://github.com/akheron/optics-ts/):
     set(O.modify(O.optic<State>().path("deep.nested.obj.count"))((c) => c + 1)),
 ```
 
-Unlike immer, optics-ts doesn't use proxies or mutation syntax.
+Unlike Immer, optics-ts doesn't use proxies or mutation syntax.
 
 ### With Ramda
 

docs/integrations/updating-draft-states.md → docs/integrations/immer-middleware.md

@@ -3,13 +3,15 @@ title: Immer middleware
 nav: 16
 ---
 
-The [Immer](https://github.com/immerjs/immer) middleware enables you to use an immutable state in a more convenient
-way. Also, with `Immer` you can simplify handling immutable data structures on
-`Zustand`.
+The [Immer](https://github.com/immerjs/immer) middleware enables you
+to use immutable state in a more convenient way.
+Also, with Immer, you can simplify handling
+immutable data structures in Zustand.
 
 ## Installation
 
-In order to use the Immer middleware in `Zustand`, you will need to install `Immer` as a direct dependency.
+In order to use the Immer middleware in Zustand,
+you will need to install Immer as a direct dependency.
 
 ```bash
 npm install immer
@@ -47,7 +49,7 @@ export const useCountStore = create(
 )
 ```
 
-Updating a complex states
+Updating complex states
 
 ```ts
 import create from 'zustand'
@@ -101,22 +103,25 @@ export const useTodoStore = create(
 
 ## Gotchas
 
-On this page we can find some things that we need to keep in mind when we are
-using `Zustand` with `Immer`.
+In this section you will find some things
+that you need to keep in mind when using Zustand with Immer.
 
 ### My subscriptions aren't being called
 
-If you are using `Immer`, make sure you are actually following the rules of
-[Immer](https://immerjs.github.io/immer/pitfalls).
+If you are using Immer,
+make sure you are actually following
+[the rules of Immer](https://immerjs.github.io/immer/pitfalls).
 
 For example, you have to add `[immerable] = true` for
-[class objects](https://immerjs.github.io/immer/complex-objects) to work. If
-you don't do this, `Immer` will still mutate the object, but not as a proxy, so
-it will also update the current state. `Zustand` checks if the state has
-actually changed, so since both the current state as well as the next state are
-equal (if you don't do it correctly), it will skip calling the subscriptions.
+[class objects](https://immerjs.github.io/immer/complex-objects) to work.
+If you don't do this, Immer will still mutate the object,
+but not as a proxy, so it will also update the current state.
+Zustand checks if the state has actually changed,
+so since both the current state and the next state are
+equal (if you don't do it correctly),
+Zustand will skip calling the subscriptions.
 
 ## CodeSandbox Demo
 
-- Basic: https://codesandbox.io/s/zustand-updating-draft-states-basic-demo-zkp22g
-- Advanced: https://codesandbox.io/s/zustand-updating-draft-states-advanced-demo-3znqzk
+- [Basic](https://codesandbox.io/s/zustand-updating-draft-states-basic-demo-zkp22g),
+- [Advanced](https://codesandbox.io/s/zustand-updating-draft-states-advanced-demo-3znqzk).