Merge branch 'main' into test/vanilla-shallow-pure-iterable-false

Author: sukvvon

docs/apis/shallow.md

@@ -25,6 +25,7 @@ const equal = shallow(a, b)
   - [Comparing Maps](#comparing-maps)
 - [Troubleshooting](#troubleshooting)
   - [Comparing objects returns `false` even if they are identical.](#comparing-objects-returns-false-even-if-they-are-identical)
+  - [Comparing objects with different prototypes](#comparing-objects-with-different-prototypes)
 
 ## Types
 
@@ -224,3 +225,24 @@ In this modified example, `objectLeft` and `objectRight` have the same top-level
 primitive values. Since `shallow` function only compares the top-level properties, it will return
 `true` because the primitive values (`firstName`, `lastName`, and `age`) are identical in both
 objects.
+
+### Comparing objects with different prototypes
+
+The `shallow` function checks whether the two objects have the same prototype. If their prototypes
+are referentially different, shallow will return `false`. This comparison is done using:
+
+```ts
+Object.getPrototypeOf(a) === Object.getPrototypeOf(b)
+```
+
+> [!IMPORTANT]
+> Objects created with the object initializer (`{}`) or with `new Object()` inherit from
+> `Object.prototype` by default. However, objects created with `Object.create(proto)` inherit from
+> the proto you pass in—which may not be `Object.prototype.`
+
+```ts
+const a = Object.create({}) // -> prototype is `{}`
+const b = {} // -> prototype is `Object.prototype`
+
+shallow(a, b) // -> false
+```

docs/middlewares/devtools.md

@@ -24,6 +24,7 @@ const nextStateCreatorFn = devtools(stateCreatorFn, devtoolsOptions)
 - [Usage](#usage)
   - [Debugging a store](#debugging-a-store)
   - [Debugging a Slices pattern based store](#debugging-a-slices-pattern-based-store)
+  - [Cleanup](#cleanup)
 - [Troubleshooting](#troubleshooting)
   - [Only one store is displayed](#only-one-store-is-displayed)
   - [Action names are labeled as 'anonymous'](#all-action-names-are-labeled-as-anonymous)
@@ -156,6 +157,27 @@ const useJungleStore = create<JungleStore>()(
 )
 ```
 
+### Cleanup
+
+When a store is no longer needed, you can clean up the Redux DevTools connection by calling the `cleanup` method on the store:
+
+```ts
+import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
+
+const useStore = create(
+  devtools((set) => ({
+    count: 0,
+    increment: () => set((state) => ({ count: state.count + 1 })),
+  })),
+)
+
+// When you're done with the store, clean it up
+useStore.devtools.cleanup()
+```
+
+This is particularly useful in applications that wrap store in context or create multiple stores dynamically.
+
 ## Troubleshooting
 
 ### Only one store is displayed

src/middleware/devtools.ts

@@ -65,6 +65,9 @@ type StoreDevtools<S> = S extends {
   ? {
       setState(...args: [...args: TakeTwo<Sa1>, action?: Action]): Sr1
       setState(...args: [...args: TakeTwo<Sa2>, action?: Action]): Sr2
+      devtools: {
+        cleanup: () => void
+      }
     }
   : never
 
@@ -146,6 +149,19 @@ const extractConnectionInformation = (
   return { type: 'tracked' as const, store, ...newConnection }
 }
 
+const removeStoreFromTrackedConnections = (
+  name: string | undefined,
+  store: string | undefined,
+) => {
+  if (store === undefined) return
+  const connectionInfo = trackedConnections.get(name)
+  if (!connectionInfo) return
+  delete connectionInfo.stores[store]
+  if (Object.keys(connectionInfo.stores).length === 0) {
+    trackedConnections.delete(name)
+  }
+}
+
 const devtoolsImpl: DevtoolsImpl =
   (fn, devtoolsOptions = {}) =>
   (set, get, api) => {
@@ -200,6 +216,17 @@ const devtoolsImpl: DevtoolsImpl =
       )
       return r
     }) as NamedSet<S>
+    ;(api as StoreApi<S> & StoreDevtools<S>).devtools = {
+      cleanup: () => {
+        if (
+          connection &&
+          typeof (connection as any).unsubscribe === 'function'
+        ) {
+          ;(connection as any).unsubscribe()
+        }
+        removeStoreFromTrackedConnections(options.name, store)
+      },
+    }
 
     const setStateFromDevtools: StoreApi<S>['setState'] = (...a) => {
       const originalIsRecording = isRecording

src/middleware/persist.ts

@@ -47,18 +47,15 @@ export function createJSONStorage<S>(
         }
         return JSON.parse(str, options?.reviver) as StorageValue<S>
       }
-      const str = (storage as StateStorage).getItem(name) ?? null
+      const str = storage.getItem(name) ?? null
       if (str instanceof Promise) {
         return str.then(parse)
       }
       return parse(str)
     },
     setItem: (name, newValue) =>
-      (storage as StateStorage).setItem(
-        name,
-        JSON.stringify(newValue, options?.replacer),
-      ),
-    removeItem: (name) => (storage as StateStorage).removeItem(name),
+      storage.setItem(name, JSON.stringify(newValue, options?.replacer)),
+    removeItem: (name) => storage.removeItem(name),
   }
   return persistStorage
 }

src/vanilla/shallow.ts

@@ -57,14 +57,18 @@ export function shallow<T>(valueA: T, valueB: T): boolean {
   ) {
     return false
   }
-  if (!isIterable(valueA) || !isIterable(valueB)) {
-    return compareEntries(
-      { entries: () => Object.entries(valueA) },
-      { entries: () => Object.entries(valueB) },
-    )
+  if (Object.getPrototypeOf(valueA) !== Object.getPrototypeOf(valueB)) {
+    return false
   }
-  if (hasIterableEntries(valueA) && hasIterableEntries(valueB)) {
-    return compareEntries(valueA, valueB)
+  if (isIterable(valueA) && isIterable(valueB)) {
+    if (hasIterableEntries(valueA) && hasIterableEntries(valueB)) {
+      return compareEntries(valueA, valueB)
+    }
+    return compareIterables(valueA, valueB)
   }
-  return compareIterables(valueA, valueB)
+  // assume plain objects
+  return compareEntries(
+    { entries: () => Object.entries(valueA) },
+    { entries: () => Object.entries(valueB) },
+  )
 }

tests/devtools.test.tsx

@@ -98,7 +98,11 @@ const extensionConnector = {
         subscribers.push(f)
         return () => {}
       }),
-      unsubscribe: vi.fn(),
+      unsubscribe: vi.fn(() => {
+        connectionMap.delete(
+          areNameUndefinedMapsNeeded ? options.testConnectionId : key,
+        )
+      }),
       send: vi.fn(),
       init: vi.fn(),
       error: vi.fn(),
@@ -2448,3 +2452,40 @@ describe('when create devtools was called multiple times with `name` and `store`
     })
   })
 })
+
+describe('cleanup', () => {
+  it('should unsubscribe from devtools when cleanup is called', async () => {
+    const options = { name: 'test' }
+    const store = createStore(devtools(() => ({ count: 0 }), options))
+    const [connection] = getNamedConnectionApis(options.name)
+    store.devtools.cleanup()
+
+    expect(connection.unsubscribe).toHaveBeenCalledTimes(1)
+  })
+
+  it('should remove store from tracked connection after cleanup', async () => {
+    const options = {
+      name: 'test-store-name',
+      store: 'test-store-id',
+      enabled: true,
+    }
+
+    const store1 = createStore(devtools(() => ({ count: 0 }), options))
+    store1.devtools.cleanup()
+    const store2 = createStore(devtools(() => ({ count: 0 }), options))
+
+    const [connection] = getNamedConnectionApis(options.name)
+
+    store2.setState({ count: 15 }, false, 'updateCount')
+    expect(connection.send).toHaveBeenLastCalledWith(
+      { type: `${options.store}/updateCount` },
+      { [options.store]: { count: 15 } },
+    )
+
+    store1.setState({ count: 20 }, false, 'ignoredAction')
+    expect(connection.send).not.toHaveBeenLastCalledWith(
+      { type: `${options.store}/ignoredAction` },
+      expect.anything(),
+    )
+  })
+})

tests/vanilla/shallow.test.tsx

@@ -172,6 +172,25 @@ describe('shallow', () => {
   })
 })
 
+describe('mixed cases', () => {
+  const obj = { 0: 'foo', 1: 'bar' }
+  const arr = ['foo', 'bar']
+  const set = new Set(['foo', 'bar'])
+  const map = new Map([
+    [0, 'foo'],
+    [1, 'bar'],
+  ])
+
+  it('compares different data structures', () => {
+    expect(shallow<unknown>(obj, arr)).toBe(false)
+    expect(shallow<unknown>(obj, set)).toBe(false)
+    expect(shallow<unknown>(obj, map)).toBe(false)
+    expect(shallow<unknown>(arr, set)).toBe(false)
+    expect(shallow<unknown>(arr, map)).toBe(false)
+    expect(shallow<unknown>(set, map)).toBe(false)
+  })
+})
+
 describe('generators', () => {
   it('pure iterable', () => {
     function* gen() {