cleanup

Author: trueadm

.changeset/clever-chefs-relate.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow transition undefined payload

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

@@ -0,0 +1,40 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>show</button><button>animate</button>`,
+
+	async test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>show</button><button>animate</button><h1>Hello\n!</h1>`
+		);
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, `<button>show</button><button>animate</button>`);
+
+		flushSync(() => {
+			btn2.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, `<button>show</button><button>animate</button>`);
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>show</button><button>animate</button><h1 style="opacity: 0;">Hello\n!</h1>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/if-transition-undefined/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { fade } from 'svelte/transition';
+
+	let show = $state(false);
+	let animate = $state(false);
+
+	function maybe(node, animate) {
+		console.log('maybe - animate?', animate);
+		if (animate) return fade(node);
+	}
+</script>
+
+<button onclick={() => show = !show}>show</button><button onclick={() => animate = !animate}>animate</button>
+
+{#if show}
+	<h1 transition:maybe={animate}>Hello {name}!</h1>
+{/if}