fixed delete, has and get

pmndrs · Oct 10, 2024 · 0b93c32 · 0b93c32
1 parent 615f476
commit 0b93c32
Showing 1 changed file with 59 additions and 60 deletions.
diff --git a/examples/test/src/App.tsx b/examples/test/src/App.tsx
@@ -2,34 +2,34 @@ import { useEffect } from 'react'
 import { useSnapshot, proxy, subscribe } from '../../../dist/esm/index.mjs'
 import { proxyMap } from '../../../dist/esm/utils.mjs'
 
-const state = proxyMap()
-const k1 = {}
-state.set(k1, 'hello')
+// const state = proxyMap()
+// const k1 = {}
+// state.set(k1, 'hello')
 
-const App = () => {
-  const snap = useSnapshot(state)
-  const handleClick = () => {
-    state.delete(k1)
-    state.set('foo', 'asdf')
-  }
+// const App = () => {
+//   const snap = useSnapshot(state)
+//   const handleClick = () => {
+//     state.delete(k1)
+//     state.set('foo', 'asdf')
+//   }
 
-  console.log('rendering')
+//   console.log('rendering')
 
-  useEffect(() => {
-    console.log(snap)
-  }, [snap])
-  console.log(snap.get(k1) === k1)
-  return (
-    <>
-      <p>{snap.get(k1)}</p>
-      <p>{snap.has('foo') ? 'foo' : 'no foo'}</p>
-      <button onClick={handleClick}>Click Me</button>
-      <div>{Math.random()}</div>
-    </>
-  )
-}
+//   useEffect(() => {
+//     console.log(snap)
+//   }, [snap])
+//   console.log(snap.get(k1) === k1)
+//   return (
+//     <>
+//       <p>{snap.has(k1) ? 'yes k1' : 'no k1'}</p>
+//       <p>{snap.has('foo') ? 'foo' : 'no foo'}</p>
+//       <button onClick={handleClick}>Click Me</button>
+//       <div>{Math.random()}</div>
+//     </>
+//   )
+// }
 
-export default App
+// export default App
 
 // const state = proxyMap([
 //   ['first', 0],
@@ -58,53 +58,52 @@ export default App
 
 // export default App
 
-// const state = proxyMap([['test', 'test']])
+const state = proxyMap([['test', 'test']])
 
-// setTimeout(() => {
-//   state.set('asdf', 'bar')
-// }, 5000)
+setTimeout(() => {
+  state.set('foo', 'foo: bar')
+}, 3000)
 
-// setTimeout(() => {
-//   state.set('bat', 'foo')
-// }, 7000)
+setTimeout(() => {
+  state.set('bar', 'bar: foo')
+}, 4000)
 
-// setTimeout(() => {
-//   state.set('foo', 'bar')
-//   state.set('test', 'test')
-// }, 9000)
+setTimeout(() => {
+  state.set('test', 'test: test')
+}, 5000)
 
-// const Comp1 = () => {
-//   const snap = useSnapshot(state)
+const Comp1 = () => {
+  const snap = useSnapshot(state)
 
-//   console.log('COMP1 RENDER')
+  console.log('COMP1 RENDER')
 
-//   return <p>{state.has('foo') ? snap.get('foo') : ''}</p>
-// }
+  return <p>Comp 1:{state.get('foo')}</p>
+}
 
-// const Comp2 = () => {
-//   const snap = useSnapshot(state)
+const Comp2 = () => {
+  const snap = useSnapshot(state)
 
-//   console.log('COMP2 RENDER')
+  console.log('COMP2 RENDER')
 
-//   return <p>{state.has('bar') ? snap.get('bar') : ''}</p>
-// }
+  return <p>Comp 2: {state.get('bar')}</p>
+}
 
-// const Comp3 = () => {
-//   const snap = useSnapshot(state)
+const Comp3 = () => {
+  const snap = useSnapshot(state)
 
-//   console.log('COMP3 RENDER')
+  console.log('COMP3 RENDER')
 
-//   return <p>{state.has('test') ? snap.get('test') : ''}</p>
-// }
+  return <p>Comp 3: {snap.get('test')}</p>
+}
 
-// const App = () => {
-//   return (
-//     <>
-//       <Comp1 />
-//       <Comp2 />
-//       <Comp3 />
-//     </>
-//   )
-// }
+const App = () => {
+  return (
+    <>
+      <Comp1 />
+      <Comp2 />
+      <Comp3 />
+    </>
+  )
+}
 
-// export default App
+export default App