Merge 74f54502fa into 5edd8b0602

.changeset/nasty-candles-press.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid forward the transition property inside EffectNodes in HMR

packages/svelte/src/internal/client/dev/hmr.js

@@ -5,7 +5,8 @@ import { hydrate_node, hydrating } from '../dom/hydration.js';
 import { block, branch, destroy_effect } from '../reactivity/effects.js';
 import { set, source } from '../reactivity/sources.js';
 import { set_should_intro } from '../render.js';
-import { active_effect, get } from '../runtime.js';
+import { get } from '../runtime.js';
+import { assign_nodes } from '../dom/template.js';
 
 /**
  * @template {(anchor: Comment, props: any) => any} Component
@@ -60,7 +61,10 @@ export function hmr(fn) {
 			// Forward the nodes from the inner effect to the outer active effect which would
 			// get them if the HMR wrapper wasn't there. Do this inside the block not outside
 			// so that HMR updates to the component will also update the nodes on the active effect.
-			/** @type {Effect} */ (active_effect).nodes = effect.nodes;
+			if (effect.nodes) {
+				// only forward the start and end node
+				assign_nodes(effect.nodes.start, effect.nodes.end);
+			}
 		}, EFFECT_TRANSPARENT);
 
 		ran = true;

packages/svelte/tests/runtime-runes/samples/hmr-transition-events/Drawer.svelte

@@ -0,0 +1,16 @@
+<script >
+	function fade(_) {
+		return {
+			delay: 100,
+			duration: 100,
+			css: (t) => `opacity: ${t}`
+		};
+	}
+</script>
+<p
+	transition:fade
+	onintrostart={() => console.log('introstart')}
+	onintroend={() => console.log('introend')}
+	onoutrostart={() => console.log('outrostart')}
+	onoutroend={() => console.log('outroend')}
+>delayed fade</p>

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

@@ -0,0 +1,36 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		hmr: true
+	},
+	test({ assert, raf, target, logs }) {
+		const [btn] = target.querySelectorAll('button');
+
+		// in
+		flushSync(() => btn.click());
+		assert.deepEqual(logs, []);
+		raf.tick(1);
+		assert.deepEqual(logs, []);
+
+		raf.tick(100);
+		assert.deepEqual(logs, ['introstart']);
+
+		raf.tick(200);
+		assert.deepEqual(logs, ['introstart', 'introend']);
+
+		// out
+		flushSync(() => btn.click());
+		assert.deepEqual(logs, ['introstart', 'introend']);
+		raf.tick(201);
+		assert.deepEqual(logs, ['introstart', 'introend']);
+
+		raf.tick(300);
+		assert.deepEqual(logs, ['introstart', 'introend', 'outrostart']);
+
+		raf.tick(400);
+		assert.deepEqual(logs, ['introstart', 'introend', 'outrostart', 'outroend']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/hmr-transition-events/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Drawer from "./Drawer.svelte"
+
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => (visible = !visible)}>toggle</button>
+
+{#if visible}
+	<Drawer />
+{/if}