fix: allow runelike writable as prop

Author: paoloricciuti

.changeset/chilly-pans-raise.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow runelike writable as prop

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' &&

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>
+		`
+		);
+	}
+});

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>

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} />

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}

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
+		}
+	}
+]