fix : $.component() break transition (#13646)

* $.component() must use EFFECT_TRANSPARENT

* changeset

* Update .changeset/eight-pans-worry.md

---------

Co-authored-by: Dominic Gannaway <[email protected]>

Author: adiguba

.changeset/eight-pans-worry.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: transitions within dynamic components now function correctly

packages/svelte/src/internal/client/dom/blocks/svelte-component.js

@@ -1,4 +1,5 @@
 /** @import { TemplateNode, Dom, Effect } from '#client' */
+import { EFFECT_TRANSPARENT } from '../../constants.js';
 import { block, branch, pause_effect } from '../../reactivity/effects.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
 
@@ -34,7 +35,7 @@ export function component(node, get_component, render_fn) {
 		if (component) {
 			effect = branch(() => render_fn(anchor, component));
 		}
-	});
+	}, EFFECT_TRANSPARENT);
 
 	if (hydrating) {
 		anchor = hydrate_node;

packages/svelte/tests/runtime-runes/samples/transition-component/Foo.svelte

@@ -0,0 +1,13 @@
+<script>
+	function fade(_) {
+		return {
+			duration: 100,
+			css: (t) => `opacity: ${t}`
+		};
+	}
+
+
+</script>
+
+<p transition:fade>foo</p>
+

packages/svelte/tests/runtime-runes/samples/transition-component/_config.js

@@ -0,0 +1,32 @@
+import { flushSync } from '../../../../src/index-client.js';
+import { test } from '../../test';
+
+/**
+ * $.component() should not break transition
+ * https://github.com/sveltejs/svelte/issues/13645
+ */
+export default test({
+	test({ assert, raf, target }) {
+		const btn = target.querySelector('button');
+
+		// in
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>toggle</button><p style="opacity: 0;">foo</p><p style="opacity: 0;">foo</p>'
+		);
+
+		raf.tick(50);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>toggle</button><p style="opacity: 0.5;">foo</p><p style="opacity: 0.5;">foo</p>'
+		);
+
+		raf.tick(100);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>toggle</button><p style="">foo</p><p style="">foo</p>'
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/transition-component/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import Foo from './Foo.svelte';
+	const Comp = { Foo };
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => (visible = !visible)}>toggle</button>
+
+{#if visible}
+	<Foo />
+	<Comp.Foo />
+{/if}