From 3624a4c2a00cda7e18ddf6331015995dabd30932 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 9 Jan 2024 10:29:23 +0100
Subject: [PATCH] feat: allow modifiying derived props (#10080)

It's an unnecessary restruction because it can be worked around (hide it behind a getter/setter), already works for bind:x and prevents valid use cases
---
 .changeset/hungry-trees-travel.md                 |  5 +++++
 .../src/compiler/phases/2-analyze/validation.js   | 14 +++++++-------
 .../runes-no-derived-assignment/main.svelte       |  4 ++--
 .../samples/runes-no-derived-update/main.svelte   |  4 ++--
 .../samples/derived-proxy/_config.js              | 15 +++++++++++++++
 .../samples/derived-proxy/main.svelte             |  7 +++++++
 6 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/hungry-trees-travel.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-proxy/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-proxy/main.svelte

diff --git a/.changeset/hungry-trees-travel.md b/.changeset/hungry-trees-travel.md
new file mode 100644
index 000000000000..d90a448daa44
--- /dev/null
+++ b/.changeset/hungry-trees-travel.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: allow modifiying derived props
diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
index 40244f97d0cc..f64b0268ab1f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/validation.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -854,6 +854,13 @@ function validate_assignment(node, argument, state) {
 
 	let left = /** @type {import('estree').Expression | import('estree').Super} */ (argument);
 
+	if (left.type === 'Identifier') {
+		const binding = state.scope.get(left.name);
+		if (binding?.kind === 'derived') {
+			error(node, 'invalid-derived-assignment');
+		}
+	}
+
 	/** @type {import('estree').Expression | import('estree').PrivateIdentifier | null} */
 	let property = null;
 
@@ -862,13 +869,6 @@ function validate_assignment(node, argument, state) {
 		left = left.object;
 	}
 
-	if (left.type === 'Identifier') {
-		const binding = state.scope.get(left.name);
-		if (binding?.kind === 'derived') {
-			error(node, 'invalid-derived-assignment');
-		}
-	}
-
 	if (left.type === 'ThisExpression' && property?.type === 'PrivateIdentifier') {
 		if (state.private_derived_state.includes(property.name)) {
 			error(node, 'invalid-derived-assignment');
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-assignment/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-assignment/main.svelte
index f89cc7b6bab6..3bf836f6c586 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-assignment/main.svelte
+++ b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-assignment/main.svelte
@@ -1,5 +1,5 @@
 <script>
 	const a = $state(0);
-	const b = $derived({ a });
-	b.a += 1;
+	let b = $derived(a);
+	b = 1;
 </script>
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-update/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-update/main.svelte
index a4aca48089eb..d266c95bb872 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-update/main.svelte
+++ b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-update/main.svelte
@@ -1,5 +1,5 @@
 <script>
 	const a = $state(0);
-	const b = $derived({ a });
-	b.a++;
+	let b = $derived(a);
+	b++;
 </script>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-proxy/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-proxy/_config.js
new file mode 100644
index 000000000000..32340d018a0e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-proxy/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0 / 0</button><button>0 / 0</button>`,
+
+	async test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		await btn1?.click();
+		assert.htmlEqual(target.innerHTML, `<button>1 / 2</button><button>1 / 2</button>`);
+
+		await btn2?.click();
+		assert.htmlEqual(target.innerHTML, `<button>2 / 4</button><button>2 / 4</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-proxy/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-proxy/main.svelte
new file mode 100644
index 000000000000..ddbc56aa7b09
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-proxy/main.svelte
@@ -0,0 +1,7 @@
+<script>
+  let count = $state(0);
+  let double = $derived({ get value() { return count * 2}, set value(c) { count = c / 2 } });
+</script>
+
+<button on:click={() => count++}>{count} / {double.value}</button>
+<button on:click={() => double.value += 2}>{count} / {double.value}</button>