From 9084f1796b77e6dee396c842677204744626582a Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 24 May 2024 17:05:53 +0200
Subject: [PATCH] fix: allow runelike writable as prop (#11768)

Fixes #11742
---
 .changeset/chilly-pans-raise.md                |  5 +++++
 .../src/compiler/phases/2-analyze/index.js     |  4 +++-
 .../store-from-props-runelike/_config.js       | 18 ++++++++++++++++++
 .../store-from-props-runelike/child.svelte     |  5 +++++
 .../store-from-props-runelike/main.svelte      |  8 ++++++++
 .../store-rune-conflic-from-props/input.svelte |  6 ++++++
 .../warnings.json                              | 14 ++++++++++++++
 7 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/chilly-pans-raise.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/main.svelte
 create mode 100644 packages/svelte/tests/validator/samples/store-rune-conflic-from-props/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/store-rune-conflic-from-props/warnings.json

diff --git a/.changeset/chilly-pans-raise.md b/.changeset/chilly-pans-raise.md
new file mode 100644
index 0000000000..02a162dfb8
--- /dev/null
+++ b/.changeset/chilly-pans-raise.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow runelike writable as prop
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 798fdd0653..acd12efcc8 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -285,7 +285,9 @@ export function analyze_component(root, source, options) {
 			!Runes.includes(/** @type {any} */ (name)) ||
 			(declaration !== null &&
 				// const state = $state(0) is valid
-				get_rune(declaration.initial, instance.scope) === null &&
+				(get_rune(declaration.initial, instance.scope) === null ||
+					// rune-line names received as props are valid too (but we have to protect against $props as store)
+					(store_name !== 'props' && get_rune(declaration.initial, instance.scope) === '$props')) &&
 				// allow `import { derived } from 'svelte/store'` in the same file as `const x = $derived(..)` because one is not a subscription to the other
 				!(
 					name === '$derived' &&
diff --git a/packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/_config.js b/packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/_config.js
new file mode 100644
index 0000000000..18880650d7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/_config.js
@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, ok }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => {
+			button?.click();
+		});
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>1</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/child.svelte b/packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/child.svelte
new file mode 100644
index 0000000000..a89955d5e4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { state } = $props();
+</script>
+
+<button onclick={()=> $state++}>{$state}</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/main.svelte b/packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/main.svelte
new file mode 100644
index 0000000000..e1d19fc0c7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-from-props-runelike/main.svelte
@@ -0,0 +1,8 @@
+<svelte:options runes />
+<script>
+	import { writable } from "svelte/store";
+	import Child from "./child.svelte";
+	const state = writable(0);
+</script>
+
+<Child {state} />
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/store-rune-conflic-from-props/input.svelte b/packages/svelte/tests/validator/samples/store-rune-conflic-from-props/input.svelte
new file mode 100644
index 0000000000..be769e18af
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/store-rune-conflic-from-props/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { state } = $props();
+	let x = $state();
+</script>
+
+{$state}
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/store-rune-conflic-from-props/warnings.json b/packages/svelte/tests/validator/samples/store-rune-conflic-from-props/warnings.json
new file mode 100644
index 0000000000..2db49bf418
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/store-rune-conflic-from-props/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "store_rune_conflict",
+		"message": "It looks like you're using the `$state` rune, but there is a local binding called `state`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `state` to avoid the ambiguity",
+		"start": {
+			"line": 3,
+			"column": 9
+		},
+		"end": {
+			"line": 3,
+			"column": 15
+		}
+	}
+]