fix: handle Temporal objects correctly in proxy deepClone and deepEqual (#434)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Oliver Beattie <oliver@obeattie.com>
Co-authored-by: Kevin De Porre <kevin@electric-sql.com>

Author: 4 people

.changeset/thick-singers-appear.md

@@ -0,0 +1,11 @@
+---
+"@tanstack/db": patch
+---
+
+Fix handling of Temporal objects in proxy's deepClone and deepEqual functions
+
+- Temporal objects (like Temporal.ZonedDateTime) are now properly preserved during cloning instead of being converted to empty objects
+- Added detection for all Temporal API object types via Symbol.toStringTag
+- Temporal objects are returned directly from deepClone since they're immutable
+- Added proper equality checking for Temporal objects using their built-in equals() method
+- Prevents unnecessary proxy creation for immutable Temporal objects

packages/db/package.json

@@ -8,7 +8,8 @@
   },
   "devDependencies": {
     "@vitest/coverage-istanbul": "^3.0.9",
-    "arktype": "^2.1.20"
+    "arktype": "^2.1.20",
+    "temporal-polyfill": "^0.3.0"
   },
   "exports": {
     ".": {

packages/db/src/collection.ts

@@ -1,4 +1,5 @@
 import { withArrayChangeTracking, withChangeTracking } from "./proxy"
+import { deepEquals } from "./utils"
 import { SortedMap } from "./SortedMap"
 import {
   createSingleRowRefProxy,
@@ -1448,7 +1449,7 @@ export class CollectionImpl<
         const isRedundantSync =
           completedOp &&
           newVisibleValue !== undefined &&
-          this.deepEqual(completedOp.value, newVisibleValue)
+          deepEquals(completedOp.value, newVisibleValue)
 
         if (!isRedundantSync) {
           if (
@@ -1472,7 +1473,7 @@ export class CollectionImpl<
           } else if (
             previousVisibleValue !== undefined &&
             newVisibleValue !== undefined &&
-            !this.deepEqual(previousVisibleValue, newVisibleValue)
+            !deepEquals(previousVisibleValue, newVisibleValue)
           ) {
             events.push({
               type: `update`,
@@ -1715,29 +1716,6 @@ export class CollectionImpl<
     }
   }
 
-  private deepEqual(a: any, b: any): boolean {
-    if (a === b) return true
-    if (a == null || b == null) return false
-    if (typeof a !== typeof b) return false
-
-    if (typeof a === `object`) {
-      if (Array.isArray(a) !== Array.isArray(b)) return false
-
-      const keysA = Object.keys(a)
-      const keysB = Object.keys(b)
-      if (keysA.length !== keysB.length) return false
-
-      const keysBSet = new Set(keysB)
-      for (const key of keysA) {
-        if (!keysBSet.has(key)) return false
-        if (!this.deepEqual(a[key], b[key])) return false
-      }
-      return true
-    }
-
-    return false
-  }
-
   public validateData(
     data: unknown,
     type: `insert` | `update`,

packages/db/src/proxy.ts

@@ -3,6 +3,8 @@
  * and provides a way to retrieve those changes.
  */
 
+import { deepEquals, isTemporal } from "./utils"
+
 /**
  * Simple debug utility that only logs when debug mode is enabled
  * Set DEBUG to true in localStorage to enable debug logging
@@ -133,6 +135,13 @@ function deepClone<T extends unknown>(
     return clone as unknown as T
   }
 
+  // Handle Temporal objects
+  if (isTemporal(obj)) {
+    // Temporal objects are immutable, so we can return them directly
+    // This preserves all their internal state correctly
+    return obj
+  }
+
   const clone = {} as Record<string | symbol, unknown>
   visited.set(obj as object, clone)
 
@@ -156,107 +165,6 @@ function deepClone<T extends unknown>(
   return clone as T
 }
 
-/**
- * Deep equality check that handles special types like Date, RegExp, Map, and Set
- */
-function deepEqual<T>(a: T, b: T): boolean {
-  // Handle primitive types
-  if (a === b) return true
-
-  // If either is null or not an object, they're not equal
-  if (
-    a === null ||
-    b === null ||
-    typeof a !== `object` ||
-    typeof b !== `object`
-  ) {
-    return false
-  }
-
-  // Handle Date objects
-  if (a instanceof Date && b instanceof Date) {
-    return a.getTime() === b.getTime()
-  }
-
-  // Handle RegExp objects
-  if (a instanceof RegExp && b instanceof RegExp) {
-    return a.source === b.source && a.flags === b.flags
-  }
-
-  // Handle Map objects
-  if (a instanceof Map && b instanceof Map) {
-    if (a.size !== b.size) return false
-
-    const entries = Array.from(a.entries())
-    for (const [key, val] of entries) {
-      if (!b.has(key) || !deepEqual(val, b.get(key))) {
-        return false
-      }
-    }
-
-    return true
-  }
-
-  // Handle Set objects
-  if (a instanceof Set && b instanceof Set) {
-    if (a.size !== b.size) return false
-
-    // Convert to arrays for comparison
-    const aValues = Array.from(a)
-    const bValues = Array.from(b)
-
-    // Simple comparison for primitive values
-    if (aValues.every((val) => typeof val !== `object`)) {
-      return aValues.every((val) => b.has(val))
-    }
-
-    // For objects in sets, we need to do a more complex comparison
-    // This is a simplified approach and may not work for all cases
-    return aValues.length === bValues.length
-  }
-
-  // Handle arrays
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) return false
-
-    for (let i = 0; i < a.length; i++) {
-      if (!deepEqual(a[i], b[i])) return false
-    }
-
-    return true
-  }
-
-  // Handle TypedArrays
-  if (
-    ArrayBuffer.isView(a) &&
-    ArrayBuffer.isView(b) &&
-    !(a instanceof DataView) &&
-    !(b instanceof DataView)
-  ) {
-    const typedA = a as unknown as TypedArray
-    const typedB = b as unknown as TypedArray
-    if (typedA.length !== typedB.length) return false
-
-    for (let i = 0; i < typedA.length; i++) {
-      if (typedA[i] !== typedB[i]) return false
-    }
-
-    return true
-  }
-
-  // Handle plain objects
-  const keysA = Object.keys(a as object)
-  const keysB = Object.keys(b as object)
-
-  if (keysA.length !== keysB.length) return false
-
-  return keysA.every(
-    (key) =>
-      Object.prototype.hasOwnProperty.call(b, key) &&
-      deepEqual((a as any)[key], (b as any)[key])
-  )
-}
-
 let count = 0
 function getProxyCount() {
   count += 1
@@ -392,7 +300,7 @@ export function createChangeProxy<
         )
 
         // If the value is not equal to original, something is still changed
-        if (!deepEqual(currentValue, originalValue)) {
+        if (!deepEquals(currentValue, originalValue)) {
           debugLog(`Property ${String(prop)} is different, returning false`)
           return false
         }
@@ -411,7 +319,7 @@ export function createChangeProxy<
         const originalValue = (state.originalObject as any)[sym]
 
         // If the value is not equal to original, something is still changed
-        if (!deepEqual(currentValue, originalValue)) {
+        if (!deepEquals(currentValue, originalValue)) {
           debugLog(`Symbol property is different, returning false`)
           return false
         }
@@ -741,12 +649,13 @@ export function createChangeProxy<
           return value.bind(ptarget)
         }
 
-        // If the value is an object, create a proxy for it
+        // If the value is an object (but not Date, RegExp, or Temporal), create a proxy for it
         if (
           value &&
           typeof value === `object` &&
           !((value as any) instanceof Date) &&
-          !((value as any) instanceof RegExp)
+          !((value as any) instanceof RegExp) &&
+          !isTemporal(value)
         ) {
           // Create a parent reference for the nested object
           const nestedParent = {
@@ -779,11 +688,11 @@ export function createChangeProxy<
         )
 
         // Only track the change if the value is actually different
-        if (!deepEqual(currentValue, value)) {
+        if (!deepEquals(currentValue, value)) {
           // Check if the new value is equal to the original value
           // Important: Use the originalObject to get the true original value
           const originalValue = changeTracker.originalObject[prop as keyof T]
-          const isRevertToOriginal = deepEqual(value, originalValue)
+          const isRevertToOriginal = deepEquals(value, originalValue)
           debugLog(
             `value:`,
             value,