Merge branch 'main' into svelte-custom-renderer

.changeset/fresh-chicken-itch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: never mark a child effect root as inert

packages/svelte/src/internal/client/reactivity/effects.js

@@ -661,16 +661,22 @@ function pause_children(effect, transitions, local) {
 
 	while (child !== null) {
 		var sibling = child.next;
-		var transparent =
-			(child.f & EFFECT_TRANSPARENT) !== 0 ||
-			// If this is a branch effect without a block effect parent,
-			// it means the parent block effect was pruned. In that case,
-			// transparency information was transferred to the branch effect.
-			((child.f & BRANCH_EFFECT) !== 0 && (effect.f & BLOCK_EFFECT) !== 0);
-		// TODO we don't need to call pause_children recursively with a linked list in place
-		// it's slightly more involved though as we have to account for `transparent` changing
-		// through the tree.
-		pause_children(child, transitions, transparent ? local : false);
+
+		// If this child is a root effect, then it will become an independent root when its parent
+		// is destroyed, it should therefore not become inert nor partake in transitions.
+		if ((child.f & ROOT_EFFECT) === 0) {
+			var transparent =
+				(child.f & EFFECT_TRANSPARENT) !== 0 ||
+				// If this is a branch effect without a block effect parent,
+				// it means the parent block effect was pruned. In that case,
+				// transparency information was transferred to the branch effect.
+				((child.f & BRANCH_EFFECT) !== 0 && (effect.f & BLOCK_EFFECT) !== 0);
+			// TODO we don't need to call pause_children recursively with a linked list in place
+			// it's slightly more involved though as we have to account for `transparent` changing
+			// through the tree.
+			pause_children(child, transitions, transparent ? local : false);
+		}
+
 		child = sibling;
 	}
 }

packages/svelte/tests/runtime-runes/samples/effect-root-6/Child.svelte

@@ -0,0 +1,14 @@
+<script>
+	export function increment() {
+		inc();
+	}
+	let inc;
+	$effect.root(() => {
+		let count = $state(0);
+		let double = $derived(count * 2);
+		inc = () => {
+			count++;
+			console.log('count', count, 'double', double);
+		}
+	})
+</script>

packages/svelte/tests/runtime-runes/samples/effect-root-6/_config.js

@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// Test that $effect.root continues to be operational after its parent effect has been destroyed
+export default test({
+	test({ assert, target, logs }) {
+		const [hide, increment] = target.querySelectorAll('button');
+
+		hide.click();
+		flushSync();
+		increment.click();
+		assert.deepEqual(logs, ['count', 1, 'double', 2]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/effect-root-6/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Child from "./Child.svelte";
+	let show = $state(true);
+	let child = $state();
+	let increment;
+	$effect(() => {
+		if (child) increment = child.increment;
+	});
+</script>
+
+<button onclick={() => show = false}>hide</button>
+<button onclick={() => increment()}>increment</button>
+{#if show}
+	<Child bind:this={child} />
+{/if}