breaking: make non-bindable props read-only

.changeset/two-ties-guess.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: make non-bindable props read-only

packages/svelte/messages/compile-errors/script.md

@@ -6,6 +6,8 @@
 
 > Cannot assign to %thing%
 
+> Cannot assign to %thing%. %suggestion%
+
 ## constant_binding
 
 > Cannot bind to %thing%

packages/svelte/src/compiler/errors.js

@@ -69,13 +69,14 @@ export function bindable_invalid_location(node) {
 }
 
 /**
- * Cannot assign to %thing%
+ * Cannot assign to %thing%. %suggestion%
  * @param {null | number | NodeLike} node
  * @param {string} thing
+ * @param {string | undefined | null} [suggestion]
  * @returns {never}
  */
-export function constant_assignment(node, thing) {
+export function constant_assignment(node, thing, suggestion) {
-	e(node, "constant_assignment", `Cannot assign to ${thing}`);
+	e(node, "constant_assignment", suggestion ? `Cannot assign to ${thing}. ${suggestion}` : `Cannot assign to ${thing}`);
 }
 
 /**

packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js

@@ -23,6 +23,14 @@ export function validate_assignment(node, argument, state) {
 				e.constant_assignment(node, 'derived state');
 			}
 
+			if (binding?.kind === 'prop') {
+				e.constant_assignment(
+					node,
+					'a non-bindable prop',
+					'Use `$state.link(...)` to create a local copy of the value'
+				);
+			}
+
 			if (binding?.kind === 'each') {
 				e.each_item_invalid_assignment(node);
 			}

packages/svelte/tests/runtime-runes/samples/props-default-reactivity/Counter.svelte

@@ -14,7 +14,3 @@
 <button onclick={() => (non_bindable.count += 1)}>
 	mutate: {non_bindable.count}
 </button>
-
-<button onclick={() => (non_bindable = { count: non_bindable.count + 1 })}>
-	reassign: {non_bindable.count}
-</button>

packages/svelte/tests/runtime-runes/samples/props-default-reactivity/_config.js

@@ -6,11 +6,10 @@ export default test({
 		<button>mutate: 0</button>
 		<button>reassign: 0</button>
 		<button>mutate: 0</button>
-		<button>reassign: 0</button>
 	`,
 
 	async test({ assert, target }) {
-		const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
 
 		flushSync(() => {
 			btn1?.click();
@@ -22,7 +21,6 @@ export default test({
 				<button>mutate: 1</button>
 				<button>reassign: 1</button>
 				<button>mutate: 0</button>
-				<button>reassign: 0</button>
 			`
 		);
 
@@ -36,7 +34,6 @@ export default test({
 				<button>mutate: 2</button>
 				<button>reassign: 2</button>
 				<button>mutate: 0</button>
-				<button>reassign: 0</button>
 			`
 		);
 
@@ -50,7 +47,6 @@ export default test({
 				<button>mutate: 3</button>
 				<button>reassign: 3</button>
 				<button>mutate: 0</button>
-				<button>reassign: 0</button>
 			`
 		);
 
@@ -64,35 +60,6 @@ export default test({
 				<button>mutate: 3</button>
 				<button>reassign: 3</button>
 				<button>mutate: 0</button>
-				<button>reassign: 0</button>
-			`
-		);
-
-		flushSync(() => {
-			btn4?.click();
-		});
-
-		assert.htmlEqual(
-			target.innerHTML,
-			`
-				<button>mutate: 3</button>
-				<button>reassign: 3</button>
-				<button>mutate: 2</button>
-				<button>reassign: 2</button>
-			`
-		);
-
-		flushSync(() => {
-			btn3?.click();
-		});
-
-		assert.htmlEqual(
-			target.innerHTML,
-			`
-				<button>mutate: 3</button>
-				<button>reassign: 3</button>
-				<button>mutate: 2</button>
-				<button>reassign: 2</button>
 			`
 		);
 	}