From f4db54eb60128c93b5e21d24288773350a900068 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 26 Dec 2023 10:19:51 -0800
Subject: [PATCH 1/2] docs: clarify that `$state` works deeply

---
 .../routes/docs/content/01-api/02-runes.md    | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 2cd3392e53bf..82f292c66dd5 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -40,24 +40,26 @@ class Todo {
 
 > In this example, the compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields
 
-Objects and arrays [are made reactive](/#H4sIAAAAAAAAE42QwWrDMBBEf2URhUhUNEl7c21DviPOwZY3jVpZEtIqUBz9e-UUt9BTj7M784bdmZ21wciq48xsPyGr2MF7Jhl9-kXEKxrCoqNLQS2TOqqgPbWd7cgggU3TgCFCAw-RekJ-3Et4lvByEq-drbe_dlsPichZcFYZrT6amQto2pXw5FO88FUYtG90gUfYi3zvWrYL75vxL57zfA07_zfr23k1vjtt-aZ0bQTcbrDL5ZifZcAxKeS8lzDc8X0xDhJ2ItdbX1jlOZMb9VnjyCoKCfMpfwG975NFVwEAAA==):
+Objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAA5WOzWrDMBCEX2VZCpGJcJL25tqGPkeUg382jVJbEtaqUBy9e1GcUii-9LTM7Ow3O-NZD-SxOM5ompGwwDfnUCJ_uST8Jw1MKNHbMHXJKX03ace1MooHYrDtFSp48twwiTm5ig15pr6Ah1RswtjS5As4HiQ8S3g5LZuYRsxelSl3v1xTtoHZGrCmG3T3Uc0ig6pOVfmCzh_A3AV_ESv-QOadL7CFQxbvr6ZgalnI_22xTvxwrPuLcfW8cnO12ogNbGGTwe0G-wgVrOUm6kNHQjQS2nt_A1toJeyzWO5crQxKHG2vz5p6LHgKFE_xG-j7P7S3AQAA):
 
 ```svelte
 <script>
-	let numbers = $state([1, 2, 3]);
+	let obj = $state({
+		nested: {
+			numbers: [1, 2, 3]
+		}
+	});
 </script>
 
-<button onclick={() => numbers.push(numbers.length + 1)}>
+<button onclick={() => obj.nested.numbers.push(obj.nested.numbers.length + 1)}>
 	push
 </button>
 
-<button onclick={() => numbers.pop()}> pop </button>
+<button onclick={() => obj.nested.numbers.pop()}>
+	pop
+</button>
 
-<p>
-	{numbers.join(' + ') || 0}
-	=
-	{numbers.reduce((a, b) => a + b, 0)}
-</p>
+<p>{obj.nested.numbers.join(' + ') || 0} = {obj.nested.numbers.reduce((a, b) => a + b, 0)}</p>
 ```
 
 ### What this replaces

From 72445332a104827065f8be3868fb5fc39aadca02 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 26 Dec 2023 10:29:35 -0800
Subject: [PATCH 2/2] format

---
 .../src/routes/docs/content/01-api/02-runes.md     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 82f292c66dd5..3566330533ce 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -40,7 +40,7 @@ class Todo {
 
 > In this example, the compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields
 
-Objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAA5WOzWrDMBCEX2VZCpGJcJL25tqGPkeUg382jVJbEtaqUBy9e1GcUii-9LTM7Ow3O-NZD-SxOM5ompGwwDfnUCJ_uST8Jw1MKNHbMHXJKX03ace1MooHYrDtFSp48twwiTm5ig15pr6Ah1RswtjS5As4HiQ8S3g5LZuYRsxelSl3v1xTtoHZGrCmG3T3Uc0ig6pOVfmCzh_A3AV_ESv-QOadL7CFQxbvr6ZgalnI_22xTvxwrPuLcfW8cnO12ogNbGGTwe0G-wgVrOUm6kNHQjQS2nt_A1toJeyzWO5crQxKHG2vz5p6LHgKFE_xG-j7P7S3AQAA):
+Objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAA22P3W6DMAyFX8WKJjWoEW23OwZIe46mFwTcNQySiJhJE827TyGV9iOuLJ9jn89e2FUP6FlxXphpRmQFe3OOCUZfLjb-EwdCJpi389RGpfTtpB3V0kgakMCqHip48tQQ8iWqkgx6wq6ARyvJzKPCyRdwPgl4FvBySU6IJWSv0pSHn1xTqpnImmha0w66_agWnkFVpy2r-jwh8kdw7mZ_4xv6gOadbrCHUxakWffjaOQlxm8e_IXBFsc6noWUY93_GLcay8Zeb7XhO9jDLoP7HY4BKtiam7CbW-TpT94IUOslDexBiaQeY4nflAdXM8FG2-mrxo4VNM0YLuEb3K_i5NQBAAA=):
 
 ```svelte
 <script>
@@ -51,7 +51,10 @@ Objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAA5WOzWrDMBCEX2VZCpGJ
 	});
 </script>
 
-<button onclick={() => obj.nested.numbers.push(obj.nested.numbers.length + 1)}>
+<button
+	onclick={() =>
+		obj.nested.numbers.push(obj.nested.numbers.length + 1)}
+>
 	push
 </button>
 
@@ -59,7 +62,12 @@ Objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAA5WOzWrDMBCEX2VZCpGJ
 	pop
 </button>
 
-<p>{obj.nested.numbers.join(' + ') || 0} = {obj.nested.numbers.reduce((a, b) => a + b, 0)}</p>
+<p>
+	{obj.nested.numbers.join(' + ') || 0} = {obj.nested.numbers.reduce(
+		(a, b) => a + b,
+		0
+	)}
+</p>
 ```
 
 ### What this replaces