From 4984b045a15ade1b33387ec80d9ad2b71c4a646f Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Fri, 8 Dec 2023 00:27:58 +0000
Subject: [PATCH] add more tests, fix example

---
 packages/svelte/src/main/ambient.d.ts         | 12 +++++++++++-
 .../class-private-raw-state-object/_config.js | 15 +++++++++++++++
 .../main.svelte                               | 19 +++++++++++++++++++
 .../samples/class-raw-state-object/_config.js | 15 +++++++++++++++
 .../class-raw-state-object/main.svelte        |  8 ++++++++
 5 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-raw-state-object/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-raw-state-object/main.svelte

diff --git a/packages/svelte/src/main/ambient.d.ts b/packages/svelte/src/main/ambient.d.ts
index a34144e519..af12fe6a20 100644
--- a/packages/svelte/src/main/ambient.d.ts
+++ b/packages/svelte/src/main/ambient.d.ts
@@ -23,7 +23,17 @@ declare namespace $state {
 	 *
 	 * Example:
 	 * ```ts
-	 * let count = $state.raw(0);
+	 * <script>
+	 *   let items = $state.raw([0]);
+	 *
+	 *   const addItem = () => {
+	 *     items = [...items, items.length];
+	 *   };
+	 * </script>
+	 *
+	 * <button on:click={addItem}>
+	 *   {items.join(', ')}
+	 * </button>
 	 * ```
 	 *
 	 * https://svelte-5-preview.vercel.app/docs/runes#$state-raw
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/_config.js
new file mode 100644
index 0000000000..94aeebc39e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button>`,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		await btn?.click();
+		assert.htmlEqual(target.innerHTML, `<button>0</button>`);
+
+		await btn?.click();
+		assert.htmlEqual(target.innerHTML, `<button>0</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/main.svelte
new file mode 100644
index 0000000000..c79deb24bb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	class Counter {
+		#count = $state.raw();
+
+		constructor(initial_count) {
+			this.#count = { a: initial_count };
+		}
+
+		get count() {
+			return this.#count;
+		}
+		set count(val) {
+			this.#count = val;
+		}
+	}
+	const counter = new Counter(0);
+</script>
+
+<button on:click={() => counter.count.a++}>{counter.count.a}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/_config.js b/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/_config.js
new file mode 100644
index 0000000000..94aeebc39e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button>`,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		await btn?.click();
+		assert.htmlEqual(target.innerHTML, `<button>0</button>`);
+
+		await btn?.click();
+		assert.htmlEqual(target.innerHTML, `<button>0</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/main.svelte
new file mode 100644
index 0000000000..0d6e3f17d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	class Counter {
+		count = $state.raw({ a: 0 });
+	}
+	const counter = new Counter();
+</script>
+
+<button on:click={() => counter.count.a++}>{counter.count.a}</button>