FIX solid-db, db: bug with solid not remounting with current data due to proxy issues

.changeset/loose-flies-sell.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/solid-db': patch
+'@tanstack/db': patch
+---
+
+Fixed a bug where cloning non enumerable properties causes solid store to get stuck in a non current state

packages/db/src/proxy.ts

@@ -603,6 +603,8 @@ function deepClone<T extends unknown>(
 
   const symbolProps = Object.getOwnPropertySymbols(obj)
   for (const sym of symbolProps) {
+    if (!Object.prototype.propertyIsEnumerable.call(obj, sym)) continue
+
     clone[sym] = deepClone(
       (obj as Record<string | symbol, unknown>)[sym],
       visited,

packages/db/tests/proxy.test.ts

@@ -101,6 +101,34 @@ describe(`Proxy Library`, () => {
       })
     })
 
+    it(`should not clone non-enumerable symbol metatdata into nested changes`, () => {
+      const metadata = Symbol(`metadata`)
+      const domainSymbol = Symbol(`domain`)
+
+      const obj = {
+        user: {
+          name: `John`,
+          age: 30,
+          [domainSymbol]: `preserved`,
+        },
+      }
+
+      Object.defineProperty(obj.user, metadata, {
+        value: `internal`,
+        enumerable: false,
+      })
+
+      const changes = withChangeTracking(obj, (draft) => {
+        draft.user.age = 31
+      })
+
+      const changedUser = changes.user as Record<string | symbol, unknown>
+
+      expect(changedUser.age).toBe(31)
+      expect(changedUser[domainSymbol]).toBe(`preserved`)
+      expect(Object.getOwnPropertySymbols(changedUser)).not.toContain(metadata)
+    })
+
     it(`should track when properties are deleted from objects`, () => {
       const obj: { name: string; age: number; role?: string } = {
         name: `John`,

packages/solid-db/tests/useLiveQuery.test.tsx

@@ -36,6 +36,14 @@ type Issue = {
   userId: string
 }
 
+type DeepNode = {
+  id: string
+  size: {
+    min: number
+    max: number
+  }
+}
+
 const initialPersons: Array<Person> = [
   {
     id: `1`,
@@ -2587,4 +2595,111 @@ describe(`Query Collections`, () => {
       expect(rendered.result()).toBeUndefined()
     })
   })
+
+  it('single-row reflects the current value on remount', async () => {
+    const nodeId = 'node-1'
+    const collection = createCollection(
+      mockSyncCollectionOptions<DeepNode>({
+        id: `remount-single-nested-test`,
+        getKey: (item) => item.id,
+        initialData: [
+          {
+            id: nodeId,
+            size: { min: 1, max: 10 },
+          },
+        ],
+      }),
+    )
+
+    const updateMax = (max: number) => {
+      collection.update(nodeId, (draft) => {
+        draft.size.max = max
+      })
+    }
+
+    const mount = () =>
+      render(() => {
+        const query = useLiveQuery((q) =>
+          q
+            .from({ source: collection })
+            .where(({ source }) => eq(source.id, nodeId))
+            .findOne(),
+        )
+
+        return <span data-testid="value">{query()?.size.max ?? 'pending'}</span>
+      })
+
+    const first = mount()
+
+    await waitFor(() =>
+      expect(first.getByTestId(`value`).textContent).toBe(`10`),
+    )
+
+    updateMax(777)
+
+    await waitFor(() =>
+      expect(first.getByTestId(`value`).textContent).toBe(`777`),
+    )
+
+    first.unmount()
+
+    const second = mount()
+    await waitFor(() =>
+      expect(second.getByTestId(`value`).textContent).toBe(`777`),
+    )
+  })
+
+  it('array reflects the current value on remount', async () => {
+    const nodeId = 'node-1'
+    const collection = createCollection(
+      mockSyncCollectionOptions<DeepNode>({
+        id: `remount-single-nested-test`,
+        getKey: (item) => item.id,
+        initialData: [
+          {
+            id: nodeId,
+            size: { min: 1, max: 10 },
+          },
+        ],
+      }),
+    )
+
+    const updateMax = (max: number) => {
+      collection.update(nodeId, (draft) => {
+        draft.size.max = max
+      })
+    }
+
+    const mount = () =>
+      render(() => {
+        const query = useLiveQuery((q) =>
+          q
+            .from({ source: collection })
+            .where(({ source }) => eq(source.id, nodeId)),
+        )
+
+        return (
+          <span data-testid="value">{query()[0]?.size.max ?? 'pending'}</span>
+        )
+      })
+
+    const first = mount()
+
+    await waitFor(() =>
+      expect(first.getByTestId(`value`).textContent).toBe(`10`),
+    )
+
+    updateMax(777)
+
+    await waitFor(() =>
+      expect(first.getByTestId(`value`).textContent).toBe(`777`),
+    )
+
+    first.unmount()
+
+    const second = mount()
+    await waitFor(() =>
+      expect(second.getByTestId(`value`).textContent).toBe(`777`),
+    )
+  })
 })