From 2ca3c87d1831e648c547115c5df2c50b5f13fd69 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 12 Dec 2023 11:34:59 +0000
Subject: [PATCH] fix: correctly reflect readonly proxy marker (#9893)

---
 .changeset/rotten-bags-type.md                      |  5 +++++
 packages/svelte/src/internal/client/proxy/proxy.js  |  8 ++++++--
 .../samples/state-readonly/Component.svelte         | 11 +++++++++++
 .../samples/state-readonly/Component2.svelte        |  5 +++++
 .../runtime-runes/samples/state-readonly/_config.js | 13 +++++++++++++
 .../samples/state-readonly/main.svelte              | 12 ++++++++++++
 6 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/rotten-bags-type.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-readonly/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-readonly/Component2.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-readonly/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-readonly/main.svelte

diff --git a/.changeset/rotten-bags-type.md b/.changeset/rotten-bags-type.md
new file mode 100644
index 0000000000..0a69089e93
--- /dev/null
+++ b/.changeset/rotten-bags-type.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly reflect readonly proxy marker
diff --git a/packages/svelte/src/internal/client/proxy/proxy.js b/packages/svelte/src/internal/client/proxy/proxy.js
index eb392749e0..105bbe4e20 100644
--- a/packages/svelte/src/internal/client/proxy/proxy.js
+++ b/packages/svelte/src/internal/client/proxy/proxy.js
@@ -149,8 +149,9 @@ const handler = {
 	},
 
 	get(target, prop, receiver) {
-		if (DEV && prop === READONLY_SYMBOL) return target[READONLY_SYMBOL];
-
+		if (DEV && prop === READONLY_SYMBOL) {
+			return Reflect.get(target, READONLY_SYMBOL);
+		}
 		const metadata = target[STATE_SYMBOL];
 		let s = metadata.s.get(prop);
 
@@ -184,6 +185,9 @@ const handler = {
 	},
 
 	has(target, prop) {
+		if (DEV && prop === READONLY_SYMBOL) {
+			return Reflect.has(target, READONLY_SYMBOL);
+		}
 		if (prop === STATE_SYMBOL) {
 			return true;
 		}
diff --git a/packages/svelte/tests/runtime-runes/samples/state-readonly/Component.svelte b/packages/svelte/tests/runtime-runes/samples/state-readonly/Component.svelte
new file mode 100644
index 0000000000..9916a9abe0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-readonly/Component.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Component2 from './Component2.svelte';
+	const {state} = $props();
+
+	function render(state) {
+    return state
+  }
+</script>
+
+<Component2 state={render(state)} />
+
diff --git a/packages/svelte/tests/runtime-runes/samples/state-readonly/Component2.svelte b/packages/svelte/tests/runtime-runes/samples/state-readonly/Component2.svelte
new file mode 100644
index 0000000000..88575acd3c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-readonly/Component2.svelte
@@ -0,0 +1,5 @@
+<script>
+	const {state} = $props();
+</script>
+
+{state}
diff --git a/packages/svelte/tests/runtime-runes/samples/state-readonly/_config.js b/packages/svelte/tests/runtime-runes/samples/state-readonly/_config.js
new file mode 100644
index 0000000000..a1f7effeae
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-readonly/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		await btn?.click();
+		assert.htmlEqual(target.innerHTML, `<button></button>\n[object Object]`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-readonly/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-readonly/main.svelte
new file mode 100644
index 0000000000..ec6cc9aeba
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-readonly/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Component from './Component.svelte';
+
+	let state = $state();
+</script>
+
+<button onclick={() => {
+	state = {}
+}}></button>
+{#if state}
+	<Component state={state} />
+{/if}