From 394a774228966e24eb75756e622f43fccb62e0ca Mon Sep 17 00:00:00 2001
From: David Maskasky <dmaskasky@otter.ai>
Date: Wed, 11 Oct 2023 12:12:49 -0700
Subject: [PATCH] doc: Update examples for Immer and Valtio

Update the inline and codesandbox examples for Immer and Valtio to more accurately and clearly showcase their functionalities.
---
 docs/integrations/immer.mdx  | 37 +++++++++++++++++++++---------------
 docs/integrations/valtio.mdx | 16 +++++++++++-----
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/docs/integrations/immer.mdx b/docs/integrations/immer.mdx
index 4700fbefa4..d152342dfd 100644
--- a/docs/integrations/immer.mdx
+++ b/docs/integrations/immer.mdx
@@ -24,17 +24,20 @@ The signature of writeFunction is `(get, set, update: (draft: Draft<Value>) => v
 import { useAtom } from 'jotai'
 import { atomWithImmer } from 'jotai-immer'
 
-const countAtom = atomWithImmer(0)
+const countAtom = atomWithImmer({ value: 0 })
 
 const Counter = () => {
   const [count] = useAtom(countAtom)
-  return <div>count: {count}</div>
+  return <div>count: {count.value}</div>
 }
 
 const Controls = () => {
   const [, setCount] = useAtom(countAtom)
   // setCount === update : (draft: Draft<Value>) => void
-  const inc = () => setCount((c) => (c = c + 1))
+  const inc = () =>
+    setCount((draft) => {
+      ++draft.value
+    })
   return <button onClick={inc}>+1</button>
 }
 ```
@@ -43,7 +46,7 @@ const Controls = () => {
 
 Check this example with atomWithImmer:
 
-<CodeSandbox id="4xnr17" />
+<CodeSandbox id="83l6sr" />
 
 ## withImmer
 
@@ -53,18 +56,21 @@ Check this example with atomWithImmer:
 import { useAtom, atom } from 'jotai'
 import { withImmer } from 'jotai-immer'
 
-const primitiveAtom = atom(0)
+const primitiveAtom = atom({ value: 0 })
 const countAtom = withImmer(primitiveAtom)
 
 const Counter = () => {
   const [count] = useAtom(countAtom)
-  return <div>count: {count}</div>
+  return <div>count: {count.value}</div>
 }
 
 const Controls = () => {
   const [, setCount] = useAtom(countAtom)
   // setCount === update : (draft: Draft<Value>) => void
-  const inc = () => setCount((c) => (c = c + 1))
+  const inc = () =>
+    setCount((draft) => {
+      ++draft.value
+    })
   return <button onClick={inc}>+1</button>
 }
 ```
@@ -73,7 +79,7 @@ const Controls = () => {
 
 Check this example with withImmer:
 
-<CodeSandbox id="9188j1" />
+<CodeSandbox id="fn49h2" />
 
 ## useImmerAtom
 
@@ -83,17 +89,20 @@ This hook takes an atom and replaces the atom's `writeFunction` with the new imm
 import { useAtom } from 'jotai'
 import { useImmerAtom } from 'jotai-immer'
 
-const primitiveAtom = atom(0)
+const primitiveAtom = atom({ value: 0 })
 
 const Counter = () => {
   const [count] = useImmerAtom(primitiveAtom)
-  return <div>count: {count}</div>
+  return <div>count: {count.value}</div>
 }
 
 const Controls = () => {
   const [, setCount] = useImmerAtom(primitiveAtom)
   // setCount === update : (draft: Draft<Value>) => void
-  const inc = () => setCount((c) => (c = c + 1))
+  const inc = () =>
+    setCount((draft) => {
+      ++draft.value
+    })
   return <button onClick={inc}>+1</button>
 }
 ```
@@ -104,10 +113,8 @@ It would be better if you don't use `withImmer` and `atomWithImmer` with `useImm
 
 Check this example with useImmerAtom:
 
-<CodeSandbox id="tyivk0" />
+<CodeSandbox id="np7y97" />
 
 ## Demo
 
-FIXME: update this demo
-
-<CodeSandbox id="ms9pv" />
+<CodeSandbox id="9q4dg7" />
diff --git a/docs/integrations/valtio.mdx b/docs/integrations/valtio.mdx
index 31dc927fe5..fbfc40d42a 100644
--- a/docs/integrations/valtio.mdx
+++ b/docs/integrations/valtio.mdx
@@ -32,7 +32,6 @@ It's two-way binding and you can change the value from both ends.
 ```jsx
 import { useAtom } from 'jotai'
 import { atomWithProxy } from 'jotai-valtio'
-import { proxy } from 'valtio/vanilla'
 
 const proxyState = proxy({ count: 0 })
 const stateAtom = atomWithProxy(proxyState)
@@ -42,11 +41,18 @@ const Counter = () => {
   return (
     <>
       count: {state.count}
+      proxyState: {proxyState.count}
       <button
         onClick={() =>
           setState((prev) => ({ ...prev, count: prev.count + 1 }))
         }>
-        button
+        inc atom
+      </button>
+      <button
+        onClick={() => {
+          ++proxyState.count
+        }}>
+        inc proxy
       </button>
     </>
   )
@@ -82,7 +88,7 @@ const countProxyAtom = mutableAtom(0)
 
 function IncrementButton() {
   const countProxy = useAtomValue(countProxyAtom)
-  return <button onClick={() => countProxy.value++}>+</button>
+  return <button onClick={() => ++countProxy.value}>+</button>
 }
 ```
 
@@ -110,11 +116,11 @@ const countProxyAtom = mutableAtom(0)
 atom(
   (get) => {
     const countProxy = get(countProxyAtom)
-    countProxy.value++ // This will cause an infinite loop
+    ++countProxy.value // This will cause an infinite loop
   },
   (get, set) => {
     const countProxy = get(countProxyAtom)
-    countProxy.value++ // This is fine
+    ++countProxy.value // This is fine
   }
 )
 ```