From 37ccf609aafb9d2f92128e0b86f0099a8b74aa3d Mon Sep 17 00:00:00 2001
From: adiguba <frederic.martini@gmail.com>
Date: Thu, 17 Oct 2024 14:55:06 +0200
Subject: [PATCH 1/3] $.component() must use EFFECT_TRANSPARENT

---
 .../client/dom/blocks/svelte-component.js     |  3 +-
 .../samples/transition-component/Foo.svelte   | 13 ++++++++
 .../samples/transition-component/_config.js   | 32 +++++++++++++++++++
 .../samples/transition-component/main.svelte  | 13 ++++++++
 4 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-component/Foo.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-component/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-component/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
index 1c7106bb7f5f..72157eaa40db 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
+++ b/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;
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-component/Foo.svelte b/packages/svelte/tests/runtime-runes/samples/transition-component/Foo.svelte
new file mode 100644
index 000000000000..eef87a1ec5ef
--- /dev/null
+++ b/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>
+
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js
new file mode 100644
index 000000000000..414a8b0cc23b
--- /dev/null
+++ b/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>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-component/main.svelte
new file mode 100644
index 000000000000..1dd29e767bcb
--- /dev/null
+++ b/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}
\ No newline at end of file

From 0b0371d378e2c473b820bacfb1d3b8907ed4e865 Mon Sep 17 00:00:00 2001
From: adiguba <frederic.martini@gmail.com>
Date: Thu, 17 Oct 2024 15:25:34 +0200
Subject: [PATCH 2/3] changeset

---
 .changeset/eight-pans-worry.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eight-pans-worry.md

diff --git a/.changeset/eight-pans-worry.md b/.changeset/eight-pans-worry.md
new file mode 100644
index 000000000000..7bbf99290e16
--- /dev/null
+++ b/.changeset/eight-pans-worry.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix : $.component() break transition

From cb7f39df5455ebd6f96bf1845f797d67e03f436b Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 17 Oct 2024 14:29:49 +0100
Subject: [PATCH 3/3] Update .changeset/eight-pans-worry.md

---
 .changeset/eight-pans-worry.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/eight-pans-worry.md b/.changeset/eight-pans-worry.md
index 7bbf99290e16..61c970b97f4e 100644
--- a/.changeset/eight-pans-worry.md
+++ b/.changeset/eight-pans-worry.md
@@ -2,4 +2,4 @@
 'svelte': patch
 ---
 
-fix : $.component() break transition
+fix: transitions within dynamic components now function correctly