fixed issue with .has() when new value is added and then deleted or c…

src/vanilla/utils/proxyMap.ts

@@ -87,12 +87,9 @@ export function proxyMap<K, V>(entries?: Iterable<[K, V]> | undefined | null) {
     },
     has(key: K) {
       const map = getMapForThis(this)
-      const exists = map.has(key)
-      if (!exists) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this.index // touch property for tracking
-      }
-      return exists
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      this.data.length // touch property for tracking
+      return map.has(key)
     },
     set(key: K, value: V) {
       if (!isProxy(this)) {

src/vanilla/utils/proxySet.ts

@@ -72,12 +72,9 @@ export function proxySet<T>(initialValues?: Iterable<T> | null) {
     has(value: T) {
       const map = getMapForThis(this)
       const v = maybeProxify(value)
-      const exists = map.has(v)
-      if (!exists) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this.index // touch property for tracking
-      }
-      return exists
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      this.data.length // touch property for tracking
+      return map.has(v)
     },
     add(value: T) {
       if (!isProxy(this)) {

tests/proxyMap.test.tsx

@@ -319,6 +319,7 @@ describe('proxyMap internal', () => {
     ).toBe(false)
   })
 })
+
 describe('snapshot', () => {
   it('should error when trying to mutate a snapshot', () => {
     const state = proxyMap()
@@ -375,3 +376,40 @@ describe('snapshot', () => {
     expect(snap2.get('key1')).toBe('val1modified')
   })
 })
+
+describe('ui updates - useSnapshot', async () => {
+  it('should update ui when calling has before and after deleting a key', async () => {
+    const state = proxyMap()
+    const TestComponent = () => {
+      const snap = useSnapshot(state)
+
+      return (
+        <>
+          <p>has key: {`${snap.has('key')}`}</p>
+          <button onClick={() => state.set('key', 'value')}>set key</button>
+          <button onClick={() => state.delete('key')}>delete key</button>
+        </>
+      )
+    }
+
+    const { getByText } = render(
+      <StrictMode>
+        <TestComponent />
+      </StrictMode>,
+    )
+
+    await waitFor(() => {
+      getByText('has key: false')
+    })
+
+    fireEvent.click(getByText('set key'))
+    await waitFor(() => {
+      getByText('has key: true')
+    })
+
+    fireEvent.click(getByText('delete key'))
+    await waitFor(() => {
+      getByText('has key: false')
+    })
+  })
+})

tests/proxySet.test.tsx

@@ -365,3 +365,40 @@ describe('snapshot behavior', () => {
     expect(snap2.has('val2')).toBe(true)
   })
 })
+
+describe('ui updates - useSnapshot', async () => {
+  it('should update ui when calling has before and after deleting a value', async () => {
+    const state = proxySet()
+    const TestComponent = () => {
+      const snap = useSnapshot(state)
+
+      return (
+        <>
+          <p>has value: {`${snap.has('value')}`}</p>
+          <button onClick={() => state.add('value')}>add value</button>
+          <button onClick={() => state.delete('value')}>delete value</button>
+        </>
+      )
+    }
+
+    const { getByText } = render(
+      <StrictMode>
+        <TestComponent />
+      </StrictMode>,
+    )
+
+    await waitFor(() => {
+      getByText('has value: false')
+    })
+
+    fireEvent.click(getByText('add value'))
+    await waitFor(() => {
+      getByText('has value: true')
+    })
+
+    fireEvent.click(getByText('delete value'))
+    await waitFor(() => {
+      getByText('has value: false')
+    })
+  })
+})