From 5c49543094ec7d8c132010cf4a32178f27558985 Mon Sep 17 00:00:00 2001
From: Matt Smith <matthewgarysmith@gmail.com>
Date: Mon, 6 Jan 2025 14:11:32 -0500
Subject: [PATCH] Fix: SvelteKit post-handlers tutorial (#1085)

* Fix tutorial to work with immutable data prop

* Remove extraneous $bindable rune on data prop

* Update apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../+assets/app-b/src/routes/+page.svelte                 | 6 ++++--
 .../03-sveltekit/07-api-routes/02-post-handlers/index.md  | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
index 89ff6d39b..185eff222 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	let { data = $bindable() } = $props();
+	let { data } = $props();
 </script>
 
 <div class="centered">
@@ -26,11 +26,13 @@
 
 				const { id } = await response.json();
 
-				data.todos = [...data.todos, {
+				const todos = [...data.todos, {
 					id,
 					description
 				}];
 
+				data = { ...data, todos };
+
 				input.value = '';
 			}}
 		/>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
index 3a83537f0..8a44b9daf 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
@@ -74,14 +74,16 @@ We're returning a response with a [201 Created](https://http.dog/201) status and
 
 +++		const { id } = await response.json();
 
-		data.todos = [...data.todos, {
+		const todos = [...data.todos, {
 			id,
 			description
-		}];+++
+		}];
+
+		data = { ...data, todos };+++
 
 		input.value = '';
 	}}
 />
 ```
 
-> [!NOTE] You should only mutate `data` in such a way that you'd get the same result by reloading the page.
+> [!NOTE] You should only update `data` in such a way that you'd get the same result by reloading the page. The `data` prop is not _deeply_ reactive, so you need to replace it — mutations like `data.todos = todos` will not cause a re-render.