From 125156d7d51c44e1d9fcec8f53738c5c10a28165 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 10 Jul 2024 15:36:13 +0100
Subject: [PATCH] fix: ensure hmr block effects are transparent for transitions
 (#12384)

* fix: ensure hmr block effects are transparent for transitions

* add test
---
 .changeset/happy-moles-live.md                |  5 ++++
 .../svelte/src/internal/client/dev/hmr.js     |  3 ++-
 .../component-transition-hmr/Blue.svelte      |  1 +
 .../component-transition-hmr/Red.svelte       | 10 +++++++
 .../component-transition-hmr/_config.js       | 27 +++++++++++++++++++
 .../component-transition-hmr/main.svelte      | 14 ++++++++++
 6 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/happy-moles-live.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Blue.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Red.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/component-transition-hmr/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/component-transition-hmr/main.svelte

diff --git a/.changeset/happy-moles-live.md b/.changeset/happy-moles-live.md
new file mode 100644
index 0000000000..c73be815b0
--- /dev/null
+++ b/.changeset/happy-moles-live.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure hmr block effects are transparent for transitions
diff --git a/packages/svelte/src/internal/client/dev/hmr.js b/packages/svelte/src/internal/client/dev/hmr.js
index 0d0edd4ddc..050901cd7c 100644
--- a/packages/svelte/src/internal/client/dev/hmr.js
+++ b/packages/svelte/src/internal/client/dev/hmr.js
@@ -1,4 +1,5 @@
 /** @import { Source, Effect } from '#client' */
+import { EFFECT_TRANSPARENT } from '../constants.js';
 import { block, branch, destroy_effect } from '../reactivity/effects.js';
 import { set_should_intro } from '../render.js';
 import { get } from '../runtime.js';
@@ -44,7 +45,7 @@ export function hmr(source) {
 
 				if (ran) set_should_intro(true);
 			});
-		});
+		}, EFFECT_TRANSPARENT);
 
 		ran = true;
 
diff --git a/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Blue.svelte b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Blue.svelte
new file mode 100644
index 0000000000..7c89b545c5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Blue.svelte
@@ -0,0 +1 @@
+<div></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Red.svelte b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Red.svelte
new file mode 100644
index 0000000000..e28b4d689c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Red.svelte
@@ -0,0 +1,10 @@
+<script>
+	function show(node) {
+			return {
+					duration: 500,
+					css: (t) => `opacity: ${t}`,
+			}
+	}
+</script>
+
+<div class="red" in:show></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/_config.js b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/_config.js
new file mode 100644
index 0000000000..74195ed077
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/_config.js
@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		hmr: true
+	},
+
+	async test({ assert, target, raf }) {
+		const [b1] = target.querySelectorAll('button');
+
+		b1.click();
+
+		flushSync();
+
+		b1.click();
+
+		flushSync();
+
+		raf.tick(0);
+
+		raf.tick(250);
+		const div = /** @type {HTMLDivElement} */ (target.querySelector('.red'));
+		assert.equal(div.style.opacity, '0.5');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/main.svelte b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/main.svelte
new file mode 100644
index 0000000000..cf83bde7bd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/main.svelte
@@ -0,0 +1,14 @@
+<script>
+  import Red from "./Red.svelte"
+  import Blue from "./Blue.svelte"
+  const comps = {
+    Red,
+    Blue
+  };
+  let activeComp = $state("Red")
+</script>
+
+<main>
+  <button onclick={() => activeComp = activeComp === "Red" ? "Blue" : "Red"}>toggle</button>
+  <svelte:component this={comps[activeComp]} />
+</main>