fix: ensure hmr block effects are transparent for transitions (#12384)

* fix: ensure hmr block effects are transparent for transitions

* add test

Author: trueadm

.changeset/happy-moles-live.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure hmr block effects are transparent for transitions

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;
 

packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Blue.svelte

@@ -0,0 +1 @@
+<div></div>

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>

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');
+	}
+});

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>