Immer middleware doc change proposal

[Brammm]

The current immer middleware doc page has the following code example:

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'

type State = {
  count: number
}

type Actions = {
  increment: (qty: number) => void
  decrement: (qty: number) => void
}

export const useCountStore = create(
  immer<State & Actions>((set) => ({
    count: 0,
    increment: (qty: number) =>
      set((state) => {
        state.count += qty
      }),
    decrement: (qty: number) =>
      set((state) => {
        state.count -= qty
      }),
  }))
)

At least in my IDE (PHPStorm 2023.2), this means you get no introspection on where the Actions are being used, besides a reference to the function in the create call. Changing the useCountStore declaration to

export const useCountStore = create<State & Actions>()(
  immer((set) => ({
    count: 0,
    increment: (qty: number) =>
      set((state) => {
        state.count += qty
      }),
    decrement: (qty: number) =>
      set((state) => {
        state.count -= qty
      }),
  }))
)

(note the extra braces after create, as mentioned in the Typescript usage docs) fixes this and returns full introspection.

My typescript knowledge is lacking on explaining why this is, but maybe it would be interesting to switch the types around in the docs as well?

[dai-shi]

export const useCountStore = create<State & Actions>()(

That's correct. immer<State & Actions>((set) => ({ is just wrong.
Can you open a PR?

[Brammm]

Yep, done so here: #2139

[Brammm]

I'm so confused right now. This weekend, moving the type declaration fixed the introspection. I opened up the project again today and... Introspection is broken again...

Edit: disregard, it's a PHPStorm bug, fairly certain.