docs/guides/prevent-rerenders-with-use-shallow.md

@@ -45,7 +45,7 @@ We can fix that using `useShallow`!
 
 ```js
 import { create } from 'zustand'
-import { useShallow } from 'zustand/shallow'
+import { useShallow } from 'zustand/react/shallow'
 
 const useMeals = create(() => ({
   papaBear: 'large porridge-pot',

docs/guides/testing.md

@@ -57,6 +57,11 @@ this means your application logic does not need to be changed or mocked when wri
 
 The mock provided below will enable the relevant test runner to reset the zustand stores after each test.
 
+> **Warning:** In the following examples we are only supporting the curried version of create `(create()(...))`,
+> since it is supported on both JavaScript and TypeScript. If you are using the uncurried version of
+> `create(...)` you will need to update your hooks to use the curried version, or update the mocks in order
+> to support the uncurried version.
+
 ### Jest
 
 In the next steps we are going to setup our Jest environment in order to mock Zustand.
@@ -130,7 +135,13 @@ export default config
 
 ### Vitest
 
-In the next steps we are going to setup our Vitest environment in order to mock Zustand
+In the next steps we are going to setup our Vitest environment in order to mock Zustand.
+
+> **Warning:** In Vitest you can change the [root](https://vitest.dev/config/#root).
+> Due to that, you need make sure that you are creating your `__mocks__` directory in the right place.
+> Let's say that you change the **root** to `./src`, that means you need to create a `__mocks__`
+> directory under `./src`. The end result would be `./src/__mocks__`, rather than `./__mocks__`.
+> Creating `__mocks__` directory in the wrong place can lead to issues when using Vitest.
 
 ```ts
 // __mocks__/zustand.ts

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zustand",
   "private": true,
-  "version": "4.4.2",
+  "version": "4.4.3",
   "description": "🐻 Bear necessities for state management in React",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -65,6 +65,24 @@
       "module": "./esm/shallow.js",
       "default": "./shallow.js"
     },
+    "./vanilla/shallow": {
+      "types": "./vanilla/shallow.d.ts",
+      "import": {
+        "types": "./esm/vanilla/shallow.d.mts",
+        "default": "./esm/vanilla/shallow.mjs"
+      },
+      "module": "./esm/vanilla/shallow.js",
+      "default": "./vanilla/shallow.js"
+    },
+    "./react/shallow": {
+      "types": "./react/shallow.d.ts",
+      "import": {
+        "types": "./esm/react/shallow.d.mts",
+        "default": "./esm/react/shallow.mjs"
+      },
+      "module": "./esm/react/shallow.js",
+      "default": "./react/shallow.js"
+    },
     "./traditional": {
       "types": "./traditional.d.ts",
       "import": {
@@ -93,6 +111,8 @@
     "build:middleware": "rollup -c --config-middleware",
     "build:middleware:immer": "rollup -c --config-middleware_immer",
     "build:shallow": "rollup -c --config-shallow",
+    "build:vanilla:shallow": "rollup -c --config-vanilla_shallow",
+    "build:react:shallow": "rollup -c --config-react_shallow",
     "build:traditional": "rollup -c --config-traditional",
     "build:context": "rollup -c --config-context",
     "postbuild": "yarn patch-d-ts && yarn copy && yarn patch-esm-ts",

readme.md

@@ -88,7 +88,7 @@ If you want to construct a single object with multiple state-picks inside, simil
 
 ```jsx
 import { create } from 'zustand'
-import { useShallow } from 'zustand/shallow'
+import { useShallow } from 'zustand/react/shallow'
 
 const useBearStore = create((set) => ({
   bears: 0,

src/middleware/devtools.ts

@@ -8,7 +8,7 @@ import type {
 type Config = Parameters<
   (Window extends { __REDUX_DEVTOOLS_EXTENSION__?: infer T }
     ? T
-    : any)['connect']
+    : { connect: (param: any) => any })['connect']
 >[0]
 
 declare module '../vanilla' {

src/react/shallow.ts

@@ -0,0 +1,13 @@
+import { useRef } from 'react'
+import { shallow } from '../vanilla/shallow.ts'
+
+export function useShallow<S, U>(selector: (state: S) => U): (state: S) => U {
+  const prev = useRef<U>()
+
+  return (state) => {
+    const next = selector(state)
+    return shallow(prev.current, next)
+      ? (prev.current as U)
+      : (prev.current = next)
+  }
+}

src/shallow.ts

@@ -1,54 +1,8 @@
-import { useRef } from 'react'
+import { shallow } from './vanilla/shallow.ts'
 
-export function shallow<T>(objA: T, objB: T) {
-  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 (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)
-  if (keysA.length !== Object.keys(objB).length) {
-    return false
-  }
-  for (let i = 0; i < keysA.length; i++) {
-    if (
-      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
-      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])
-    ) {
-      return false
-    }
-  }
-  return true
-}
+// We will export this in v5 and remove default export
+// export { shallow } from './vanilla/shallow.ts'
+// export { useShallow } from './react/shallow.ts'
 
 /**
  * @deprecated Use `import { shallow } from 'zustand/shallow'`
@@ -62,13 +16,4 @@ export default ((objA, objB) => {
   return shallow(objA, objB)
 }) as typeof shallow
 
-export function useShallow<S, U>(selector: (state: S) => U): (state: S) => U {
-  const prev = useRef<U>()
-
-  return (state) => {
-    const next = selector(state)
-    return shallow(prev.current, next)
-      ? (prev.current as U)
-      : (prev.current = next)
-  }
-}
+export { shallow }

src/vanilla/shallow.ts

@@ -0,0 +1,49 @@
+export function shallow<T>(objA: T, objB: T) {
+  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 (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)
+  if (keysA.length !== Object.keys(objB).length) {
+    return false
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (
+      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
+      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])
+    ) {
+      return false
+    }
+  }
+  return true
+}

tests/shallow.test.tsx

@@ -2,99 +2,8 @@ import { useState } from 'react'
 import { act, fireEvent, render } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { create } from 'zustand'
-import { shallow, useShallow } from 'zustand/shallow'
-
-describe('shallow', () => {
-  it('compares primitive values', () => {
-    expect(shallow(true, true)).toBe(true)
-    expect(shallow(true, false)).toBe(false)
-
-    expect(shallow(1, 1)).toBe(true)
-    expect(shallow(1, 2)).toBe(false)
-
-    expect(shallow('zustand', 'zustand')).toBe(true)
-    expect(shallow('zustand', 'redux')).toBe(false)
-  })
-
-  it('compares objects', () => {
-    expect(shallow({ foo: 'bar', asd: 123 }, { foo: 'bar', asd: 123 })).toBe(
-      true
-    )
-
-    expect(
-      shallow({ foo: 'bar', asd: 123 }, { foo: 'bar', foobar: true })
-    ).toBe(false)
-
-    expect(
-      shallow({ foo: 'bar', asd: 123 }, { foo: 'bar', asd: 123, foobar: true })
-    ).toBe(false)
-  })
-
-  it('compares arrays', () => {
-    expect(shallow([1, 2, 3], [1, 2, 3])).toBe(true)
-
-    expect(shallow([1, 2, 3], [2, 3, 4])).toBe(false)
-
-    expect(
-      shallow([{ foo: 'bar' }, { asd: 123 }], [{ foo: 'bar' }, { asd: 123 }])
-    ).toBe(false)
-
-    expect(shallow([{ foo: 'bar' }], [{ foo: 'bar', asd: 123 }])).toBe(false)
-  })
-
-  it('compares Maps', () => {
-    function createMap<T extends object>(obj: T) {
-      return new Map(Object.entries(obj))
-    }
-
-    expect(
-      shallow(
-        createMap({ foo: 'bar', asd: 123 }),
-        createMap({ foo: 'bar', asd: 123 })
-      )
-    ).toBe(true)
-
-    expect(
-      shallow(
-        createMap({ foo: 'bar', asd: 123 }),
-        createMap({ foo: 'bar', foobar: true })
-      )
-    ).toBe(false)
-
-    expect(
-      shallow(
-        createMap({ foo: 'bar', asd: 123 }),
-        createMap({ foo: 'bar', asd: 123, foobar: true })
-      )
-    ).toBe(false)
-  })
-
-  it('compares Sets', () => {
-    expect(shallow(new Set(['bar', 123]), new Set(['bar', 123]))).toBe(true)
-
-    expect(shallow(new Set(['bar', 123]), new Set(['bar', 2]))).toBe(false)
-
-    expect(shallow(new Set(['bar', 123]), new Set(['bar', 123, true]))).toBe(
-      false
-    )
-  })
-
-  it('compares functions', () => {
-    function firstFnCompare() {
-      return { foo: 'bar' }
-    }
-
-    function secondFnCompare() {
-      return { foo: 'bar' }
-    }
-
-    expect(shallow(firstFnCompare, firstFnCompare)).toBe(true)
-
-    expect(shallow(secondFnCompare, secondFnCompare)).toBe(true)
-
-    expect(shallow(firstFnCompare, secondFnCompare)).toBe(false)
-  })
-})
+import { useShallow } from 'zustand/react/shallow'
+import { shallow } from 'zustand/vanilla/shallow'
 
 describe('types', () => {
   it('works with useBoundStore and array selector (#1107)', () => {
@@ -123,17 +32,6 @@ describe('types', () => {
   })
 })
 
-describe('unsupported cases', () => {
-  it('date', () => {
-    expect(
-      shallow(
-        new Date('2022-07-19T00:00:00.000Z'),
-        new Date('2022-07-20T00:00:00.000Z')
-      )
-    ).not.toBe(false)
-  })
-})
-
 describe('useShallow', () => {
   const testUseShallowSimpleCallback =
     vi.fn<[{ selectorOutput: string[]; useShallowOutput: string[] }]>()