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

@@ -41,6 +41,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@eslint-react/eslint-plugin": "^1.53.1",
+    "@js-temporal/polyfill": "^0.5.1",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@tanstack/eslint-config": "0.3.3",
     "@tanstack/typedoc-config": "0.3.1",
@@ -60,7 +61,9 @@
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.15",
     "sherif": "^1.9.0",
+    "temporal-polyfill": "^0.3.0",
     "tinyglobby": "^0.2.15",
+    "tsx": "^4.21.0",
     "typescript": "5.6.3",
     "typescript50": "npm:typescript@5.0",
     "typescript51": "npm:typescript@5.1",
@@ -79,4 +82,4 @@
     "@tanstack/svelte-store": "workspace:*",
     "@tanstack/vue-store": "workspace:*"
   }
-}
+}

packages/angular-store/src/index.ts

@@ -90,6 +90,32 @@ function shallow<T>(objA: T, objB: T) {
     return true
   }
 
+  /**
+   * Temporal branding note:
+   * Temporal types (native or polyfill) define `Symbol.toStringTag` values like
+   * `"Temporal.PlainDate"` as part of the TC39 Temporal spec, which makes this
+   * check reliable across realms/polyfills (unlike `instanceof`).
+   *
+   * See:
+   * - https://tc39.es/proposal-temporal/
+   * - https://tc39.es/proposal-temporal/docs/plaindate.html
+   */
+  const tagA = getToStringTag(objA)
+  const tagB = getToStringTag(objB)
+  const isTemporal =
+    tagA !== undefined &&
+    tagB !== undefined &&
+    tagA === tagB &&
+    tagA.startsWith('Temporal.')
+
+  if (isTemporal && hasEquals(objA) && hasEquals(objB)) {
+    try {
+      return objA.equals(objB)
+    } catch {
+      return false
+    }
+  }
+
   const keysA = Object.keys(objA)
   if (keysA.length !== Object.keys(objB).length) {
     return false
@@ -105,3 +131,20 @@ function shallow<T>(objA: T, objB: T) {
   }
   return true
 }
+
+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 getToStringTag(value: unknown): string | undefined {
+  if (typeof value !== 'object' || value === null) return undefined
+  const tag = (value as any)[Symbol.toStringTag]
+  return typeof tag === 'string' ? tag : undefined
+}

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

@@ -162,14 +162,40 @@ export function shallow<T>(objA: T, objB: T) {
     return true
   }
 
+  /**
+   * Temporal branding note:
+   * Temporal types (native or polyfill) define `Symbol.toStringTag` values like
+   * `"Temporal.PlainDate"` as part of the TC39 Temporal spec, which makes this
+   * check reliable across realms/polyfills (unlike `instanceof`).
+   *
+   * See:
+   * - https://tc39.es/proposal-temporal/
+   * - https://tc39.es/proposal-temporal/docs/plaindate.html
+   */
+  const tagA = getToStringTag(objA)
+  const tagB = getToStringTag(objB)
+  const isTemporal =
+    tagA !== undefined &&
+    tagB !== undefined &&
+    tagA === tagB &&
+    tagA.startsWith('Temporal.')
+
+  if (isTemporal && hasEquals(objA) && hasEquals(objB)) {
+    try {
+      return objA.equals(objB)
+    } catch {
+      return false
+    }
+  }
+
   const keysA = getOwnKeys(objA)
   if (keysA.length !== getOwnKeys(objB).length) {
     return false
   }
 
   for (const key of keysA) {
     if (
-      !Object.prototype.hasOwnProperty.call(objB, key as string) ||
+      !Object.prototype.hasOwnProperty.call(objB, key) ||
       !Object.is(objA[key as keyof T], objB[key as keyof T])
     ) {
       return false
@@ -178,6 +204,23 @@ export function shallow<T>(objA: T, objB: T) {
   return true
 }
 
+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 getToStringTag(value: unknown): string | undefined {
+  if (typeof value !== 'object' || value === null) return undefined
+  const tag = (value as any)[Symbol.toStringTag]
+  return typeof tag === 'string' ? tag : undefined
+}
+
 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,10 @@ describe('shallow', () => {
     const objB = new Date('2025-02-10')
     expect(shallow(objA, objB)).toBe(true)
   })
+
+  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

@@ -74,22 +74,65 @@ export function shallow<T>(objA: T, objB: T) {
     return true
   }
 
+  /**
+   * Temporal branding note:
+   * Temporal types (native or polyfill) define `Symbol.toStringTag` values like
+   * `"Temporal.PlainDate"` as part of the TC39 Temporal spec, which makes this
+   * check reliable across realms/polyfills (unlike `instanceof`).
+   *
+   * See:
+   * - https://tc39.es/proposal-temporal/
+   * - https://tc39.es/proposal-temporal/docs/plaindate.html
+   */
+  const tagA = getToStringTag(objA)
+  const tagB = getToStringTag(objB)
+  const isTemporal =
+    tagA !== undefined &&
+    tagB !== undefined &&
+    tagA === tagB &&
+    tagA.startsWith('Temporal.')
+
+  if (isTemporal && hasEquals(objA) && hasEquals(objB)) {
+    try {
+      return objA.equals(objB)
+    } catch {
+      return false
+    }
+  }
+
   const keysA = getOwnKeys(objA)
   if (keysA.length !== getOwnKeys(objB).length) {
     return false
   }
 
-  for (let i = 0; i < keysA.length; i++) {
+  for (const key of keysA) {
     if (
-      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
-      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])
+      !Object.prototype.hasOwnProperty.call(objB, key) ||
+      !Object.is(objA[key as keyof T], objB[key as keyof T])
     ) {
       return false
     }
   }
   return true
 }
 
+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 getToStringTag(value: unknown): string | undefined {
+  if (typeof value !== 'object' || value === null) return undefined
+  const tag = (value as any)[Symbol.toStringTag]
+  return typeof tag === 'string' ? tag : undefined
+}
+
 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,8 @@ 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 as JsTemporal } from '@js-temporal/polyfill'
+import { Temporal } from 'temporal-polyfill'
 import { shallow, useStore } from '../src/index'
 
 const user = userEvent.setup()
@@ -302,4 +304,16 @@ describe('shallow', () => {
     const objB = new Date('2025-02-10')
     expect(shallow(objA, objB)).toBe(true)
   })
+
+  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)
+  })
+
+  test('supports Temporal from @js-temporal/polyfill', () => {
+    const objA = JsTemporal.PlainDate.from('2025-02-10')
+    const objB = JsTemporal.PlainDate.from('2025-02-10')
+    expect(shallow(objA, objB)).toBe(true)
+  })
 })

packages/solid-store/src/index.tsx

@@ -81,6 +81,32 @@ export function shallow<T>(objA: T, objB: T) {
     return true
   }
 
+  /**
+   * Temporal branding note:
+   * Temporal types (native or polyfill) define `Symbol.toStringTag` values like
+   * `"Temporal.PlainDate"` as part of the TC39 Temporal spec, which makes this
+   * check reliable across realms/polyfills (unlike `instanceof`).
+   *
+   * See:
+   * - https://tc39.es/proposal-temporal/
+   * - https://tc39.es/proposal-temporal/docs/plaindate.html
+   */
+  const tagA = getToStringTag(objA)
+  const tagB = getToStringTag(objB)
+  const isTemporal =
+    tagA !== undefined &&
+    tagB !== undefined &&
+    tagA === tagB &&
+    tagA.startsWith('Temporal.')
+
+  if (isTemporal && hasEquals(objA) && hasEquals(objB)) {
+    try {
+      return objA.equals(objB)
+    } catch {
+      return false
+    }
+  }
+
   const keysA = Object.keys(objA)
   if (keysA.length !== Object.keys(objB).length) {
     return false
@@ -96,3 +122,20 @@ export function shallow<T>(objA: T, objB: T) {
   }
   return true
 }
+
+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 getToStringTag(value: unknown): string | undefined {
+  if (typeof value !== 'object' || value === null) return undefined
+  const tag = (value as any)[Symbol.toStringTag]
+  return typeof tag === 'string' ? tag : undefined
+}