From db8cba3216e791f760886605e307a9ad790a1724 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 16 Jan 2024 12:34:37 +0100
Subject: [PATCH] fix: react to mutated slot props in legacy mode (#10197)

If a list is passed to a component and an item of that list is passed as a slot prop back up, then mutating a property of that item did not result in a rerun. The reason was that derived is using object identity equality, resulting in the value not being updated. To fix it, we use safe-equals in this situations instead.
---
 .changeset/olive-shirts-complain.md           |  5 ++++
 .../3-transform/client/visitors/template.js   |  7 +++++-
 .../svelte/src/internal/client/runtime.js     | 12 +++++++++
 packages/svelte/src/internal/index.js         |  1 +
 .../component-slot-let-mutated/Nested.svelte  |  9 +++++++
 .../component-slot-let-mutated/_config.js     | 25 +++++++++++++++++++
 .../component-slot-let-mutated/main.svelte    | 10 ++++++++
 7 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/olive-shirts-complain.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/Nested.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/main.svelte

diff --git a/.changeset/olive-shirts-complain.md b/.changeset/olive-shirts-complain.md
new file mode 100644
index 0000000000..56387284db
--- /dev/null
+++ b/.changeset/olive-shirts-complain.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: react to mutated slot props in legacy mode
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 1e11ac0162..ae7cbbec2b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -2886,7 +2886,12 @@ export const template_visitors = {
 			const name = node.expression === null ? node.name : node.expression.name;
 			return b.const(
 				name,
-				b.call('$.derived', b.thunk(b.member(b.id('$$slotProps'), b.id(node.name))))
+				b.call(
+					// in legacy mode, sources can be mutated but they're not fine-grained.
+					// Using the safe-equal derived version ensures the slot is still updated
+					state.analysis.runes ? '$.derived' : '$.derived_safe_equal',
+					b.thunk(b.member(b.id('$$slotProps'), b.id(node.name)))
+				)
 			);
 		}
 	},
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 97804e11ce..dc117a26d3 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -1307,6 +1307,18 @@ export function derived(init) {
 	return signal;
 }
 
+/**
+ * @template V
+ * @param {() => V} init
+ * @returns {import('./types.js').ComputationSignal<V>}
+ */
+/*#__NO_SIDE_EFFECTS__*/
+export function derived_safe_equal(init) {
+	const signal = derived(init);
+	signal.e = safe_equal;
+	return signal;
+}
+
 /**
  * @template V
  * @param {V} initial_value
diff --git a/packages/svelte/src/internal/index.js b/packages/svelte/src/internal/index.js
index 709ec9dee9..3d6fd591cc 100644
--- a/packages/svelte/src/internal/index.js
+++ b/packages/svelte/src/internal/index.js
@@ -7,6 +7,7 @@ export {
 	source,
 	mutable_source,
 	derived,
+	derived_safe_equal,
 	prop,
 	user_effect,
 	render_effect,
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/Nested.svelte
new file mode 100644
index 0000000000..e1a46088ef
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<div>
+	{#each things as thing}
+		<slot {thing}/>
+	{/each}
+</div>
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/_config.js b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/_config.js
new file mode 100644
index 0000000000..165bbbf586
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/_config.js
@@ -0,0 +1,25 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>mutate</button>
+		<div>
+			<span>hello</span>
+		</div>
+	`,
+
+	async test({ assert, target }) {
+		target.querySelector('button')?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>mutate</button>
+				<div>
+					<span>bye</span>
+				</div>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/main.svelte b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/main.svelte
new file mode 100644
index 0000000000..9f9eafcd7e
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-mutated/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	let things = [{ text: 'hello' }];
+</script>
+
+<button on:click={() => things[0].text = 'bye'}>mutate</button>
+<Nested {things} let:thing>
+	<span>{thing.text}</span>
+</Nested>