fix(adapters): make shallow equality handle Temporal value objects

.changeset/olive-pens-draw.md

@@ -0,0 +1,10 @@
+---
+'@tanstack/angular-store': patch
+'@tanstack/preact-store': patch
+'@tanstack/svelte-store': patch
+'@tanstack/react-store': patch
+'@tanstack/solid-store': patch
+'@tanstack/vue-store': patch
+---
+
+Fix adapter `shallow` equality for keyless value objects (e.g. Temporal) so updates aren’t skipped.

package.json

@@ -60,6 +60,7 @@
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.15",
     "sherif": "^1.9.0",
+    "temporal-polyfill": "^0.3.0",
     "tinyglobby": "^0.2.15",
     "typescript": "5.6.3",
     "typescript50": "npm:typescript@5.0",

packages/angular-store/src/index.ts

@@ -95,6 +95,30 @@ function shallow<T>(objA: T, objB: T) {
     return false
   }
 
+  // Many "value objects" (e.g. Temporal) have no enumerable keys, which would
+  // otherwise make any two instances appear "shallow equal". Only treat
+  // keyless values as equal when both are plain objects or both are arrays.
+  if (keysA.length === 0) {
+    const aIsPlain = isPlainObject(objA)
+    const bIsPlain = isPlainObject(objB)
+    const aIsArray = Array.isArray(objA)
+    const bIsArray = Array.isArray(objB)
+
+    if ((aIsPlain && bIsPlain) || (aIsArray && bIsArray)) {
+      return true
+    }
+
+    if (hasEquals(objA) && hasEquals(objB)) {
+      try {
+        return objA.equals(objB)
+      } catch {
+        return false
+      }
+    }
+
+    return false
+  }
+
   for (let i = 0; i < keysA.length; i++) {
     if (
       !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
@@ -105,3 +129,20 @@ function shallow<T>(objA: T, objB: T) {
   }
   return true
 }
+
+function isPlainObject(value: unknown): value is object {
+  if (typeof value !== 'object' || value === null) return false
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}
+
+function hasEquals<TValue>(
+  value: TValue,
+): value is TValue & { equals: (other: unknown) => boolean } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'equals' in (value as object) &&
+    typeof (value as any).equals === 'function'
+  )
+}

packages/angular-store/tests/index.test.ts

@@ -3,6 +3,7 @@ import { Component, effect } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { Store } from '@tanstack/store'
+import { Temporal } from 'temporal-polyfill'
 import { injectStore } from '../src/index'
 
 describe('injectStore', () => {
@@ -142,4 +143,52 @@ describe('dataType', () => {
       debugElement.query(By.css('p#displayStoreVal')).nativeElement.textContent,
     ).toContain(new Date('2025-03-29T21:06:40.401Z'))
   })
+
+  test('temporal change trigger re-render', () => {
+    const store = new Store({ date: Temporal.PlainDate.from('2025-03-29') })
+
+    @Component({
+      template: `
+        <div>
+          <p id="displayStoreVal">{{ storeVal().toString() }}</p>
+          <button id="updateDate" (click)="updateDate()">Update date</button>
+        </div>
+      `,
+      standalone: true,
+    })
+    class MyCmp {
+      storeVal = injectStore(store, (state) => state.date)
+
+      constructor() {
+        effect(() => {
+          console.log(this.storeVal())
+        })
+      }
+
+      updateDate() {
+        store.setState((v) => ({
+          ...v,
+          date: Temporal.PlainDate.from('2025-03-30'),
+        }))
+      }
+    }
+
+    const fixture = TestBed.createComponent(MyCmp)
+    fixture.detectChanges()
+
+    const debugElement = fixture.debugElement
+
+    expect(
+      debugElement.query(By.css('p#displayStoreVal')).nativeElement.textContent,
+    ).toContain('2025-03-29')
+
+    debugElement
+      .query(By.css('button#updateDate'))
+      .triggerEventHandler('click', null)
+
+    fixture.detectChanges()
+    expect(
+      debugElement.query(By.css('p#displayStoreVal')).nativeElement.textContent,
+    ).toContain('2025-03-30')
+  })
 })

packages/preact-store/src/index.ts

@@ -167,6 +167,30 @@ export function shallow<T>(objA: T, objB: T) {
     return false
   }
 
+  // Many "value objects" (e.g. Temporal) have no enumerable keys, which would
+  // otherwise make any two instances appear "shallow equal". Only treat
+  // keyless values as equal when both are plain objects or both are arrays.
+  if (keysA.length === 0) {
+    const aIsPlain = isPlainObject(objA)
+    const bIsPlain = isPlainObject(objB)
+    const aIsArray = Array.isArray(objA)
+    const bIsArray = Array.isArray(objB)
+
+    if ((aIsPlain && bIsPlain) || (aIsArray && bIsArray)) {
+      return true
+    }
+
+    if (hasEquals(objA) && hasEquals(objB)) {
+      try {
+        return objA.equals(objB)
+      } catch {
+        return false
+      }
+    }
+
+    return false
+  }
+
   for (const key of keysA) {
     if (
       !Object.prototype.hasOwnProperty.call(objB, key as string) ||
@@ -178,6 +202,23 @@ export function shallow<T>(objA: T, objB: T) {
   return true
 }
 
+function isPlainObject(value: unknown): value is object {
+  if (typeof value !== 'object' || value === null) return false
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}
+
+function hasEquals<TValue>(
+  value: TValue,
+): value is TValue & { equals: (other: unknown) => boolean } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'equals' in (value as object) &&
+    typeof (value as any).equals === 'function'
+  )
+}
+
 function getOwnKeys(obj: object): Array<string | symbol> {
   return (Object.keys(obj) as Array<string | symbol>).concat(
     Object.getOwnPropertySymbols(obj),

packages/preact-store/tests/index.test.tsx

@@ -3,6 +3,7 @@ import { render, waitFor } from '@testing-library/preact'
 import { Derived, Store } from '@tanstack/store'
 import { useState } from 'preact/hooks'
 import { userEvent } from '@testing-library/user-event'
+import { Temporal } from 'temporal-polyfill'
 import { shallow, useStore } from '../src/index'
 
 const user = userEvent.setup()
@@ -303,4 +304,14 @@ describe('shallow', () => {
     const objB = new Date('2025-02-10')
     expect(shallow(objA, objB)).toBe(true)
   })
+
+  test('should return false for empty object vs empty array', () => {
+    expect(shallow({}, [])).toBe(false)
+  })
+
+  test('should return false for temporal objects with different values', () => {
+    const objA = Temporal.PlainDate.from('2025-02-10')
+    const objB = Temporal.PlainDate.from('2025-02-11')
+    expect(shallow(objA, objB)).toBe(false)
+  })
 })

packages/react-store/src/index.ts

@@ -79,6 +79,27 @@ export function shallow<T>(objA: T, objB: T) {
     return false
   }
 
+  if (keysA.length === 0) {
+    const aIsPlain = isPlainObject(objA)
+    const bIsPlain = isPlainObject(objB)
+    const aIsArray = Array.isArray(objA)
+    const bIsArray = Array.isArray(objB)
+
+    if ((aIsPlain && bIsPlain) || (aIsArray && bIsArray)) {
+      return true
+    }
+
+    if (hasEquals(objA) && hasEquals(objB)) {
+      try {
+        return objA.equals(objB)
+      } catch {
+        return false
+      }
+    }
+
+    return false
+  }
+
   for (let i = 0; i < keysA.length; i++) {
     if (
       !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
@@ -90,6 +111,23 @@ export function shallow<T>(objA: T, objB: T) {
   return true
 }
 
+function isPlainObject(value: unknown): value is object {
+  if (typeof value !== 'object' || value === null) return false
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}
+
+function hasEquals<TValue>(
+  value: TValue,
+): value is TValue & { equals: (other: unknown) => boolean } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'equals' in (value as object) &&
+    typeof (value as any).equals === 'function'
+  )
+}
+
 function getOwnKeys(obj: object): Array<string | symbol> {
   return (Object.keys(obj) as Array<string | symbol>).concat(
     Object.getOwnPropertySymbols(obj),

packages/react-store/tests/index.test.tsx

@@ -3,6 +3,7 @@ import { render, waitFor } from '@testing-library/react'
 import { Derived, Store } from '@tanstack/store'
 import { useState } from 'react'
 import { userEvent } from '@testing-library/user-event'
+import { Temporal } from 'temporal-polyfill'
 import { shallow, useStore } from '../src/index'
 
 const user = userEvent.setup()
@@ -302,4 +303,14 @@ describe('shallow', () => {
     const objB = new Date('2025-02-10')
     expect(shallow(objA, objB)).toBe(true)
   })
+
+  test('should return false for empty object vs empty array', () => {
+    expect(shallow({}, [])).toBe(false)
+  })
+
+  test('should return false for temporal objects with different values', () => {
+    const objA = Temporal.PlainDate.from('2025-02-10')
+    const objB = Temporal.PlainDate.from('2025-02-11')
+    expect(shallow(objA, objB)).toBe(false)
+  })
 })

packages/solid-store/src/index.tsx

@@ -86,6 +86,30 @@ export function shallow<T>(objA: T, objB: T) {
     return false
   }
 
+  // Many "value objects" (e.g. Temporal) have no enumerable keys, which would
+  // otherwise make any two instances appear "shallow equal". Only treat
+  // keyless values as equal when both are plain objects or both are arrays.
+  if (keysA.length === 0) {
+    const aIsPlain = isPlainObject(objA)
+    const bIsPlain = isPlainObject(objB)
+    const aIsArray = Array.isArray(objA)
+    const bIsArray = Array.isArray(objB)
+
+    if ((aIsPlain && bIsPlain) || (aIsArray && bIsArray)) {
+      return true
+    }
+
+    if (hasEquals(objA) && hasEquals(objB)) {
+      try {
+        return objA.equals(objB)
+      } catch {
+        return false
+      }
+    }
+
+    return false
+  }
+
   for (let i = 0; i < keysA.length; i++) {
     if (
       !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
@@ -96,3 +120,20 @@ export function shallow<T>(objA: T, objB: T) {
   }
   return true
 }
+
+function isPlainObject(value: unknown): value is object {
+  if (typeof value !== 'object' || value === null) return false
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}
+
+function hasEquals<TValue>(
+  value: TValue,
+): value is TValue & { equals: (other: unknown) => boolean } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'equals' in (value as object) &&
+    typeof (value as any).equals === 'function'
+  )
+}

packages/solid-store/tests/index.test.tsx

@@ -1,7 +1,8 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, test } from 'vitest'
 import { render, renderHook } from '@solidjs/testing-library'
 import { Store } from '@tanstack/store'
-import { useStore } from '../src/index'
+import { Temporal } from 'temporal-polyfill'
+import { shallow, useStore } from '../src/index'
 
 describe('useStore', () => {
   it.todo('allows us to select state using a selector', () => {
@@ -53,3 +54,15 @@ describe('useStore', () => {
     expect(result()).toStrictEqual(new Date('2025-03-29T21:06:40.401Z'))
   })
 })
+
+describe('shallow', () => {
+  test('should return false for empty object vs empty array', () => {
+    expect(shallow({}, [])).toBe(false)
+  })
+
+  test('should return false for temporal objects with different values', () => {
+    const objA = Temporal.PlainDate.from('2025-02-10')
+    const objB = Temporal.PlainDate.from('2025-02-11')
+    expect(shallow(objA, objB)).toBe(false)
+  })
+})