fix: allow transition undefined payload + microtask queue handling (#10117)

* fix: allow transition undefined payload

* cleanup

* cleanup

* add microtask queue handling

Author: trueadm

.changeset/clever-chefs-relate.md

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

packages/svelte/src/internal/client/runtime.js

@@ -50,6 +50,8 @@ let current_queued_effects = [];
 
 /** @type {Array<() => void>} */
 let current_queued_tasks = [];
+/** @type {Array<() => void>} */
+let current_queued_microtasks = [];
 let flush_count = 0;
 // Handle signal reactivity tree dependencies and consumer
 
@@ -579,6 +581,11 @@ function flush_queued_effects(effects) {
 
 function process_microtask() {
 	is_micro_task_queued = false;
+	if (current_queued_microtasks.length > 0) {
+		const tasks = current_queued_microtasks.slice();
+		current_queued_microtasks = [];
+		run_all(tasks);
+	}
 	if (flush_count > 101) {
 		return;
 	}
@@ -637,6 +644,18 @@ export function schedule_task(fn) {
 	current_queued_tasks.push(fn);
 }
 
+/**
+ * @param {() => void} fn
+ * @returns {void}
+ */
+export function schedule_microtask(fn) {
+	if (!is_micro_task_queued) {
+		is_micro_task_queued = true;
+		queueMicrotask(process_microtask);
+	}
+	current_queued_microtasks.push(fn);
+}
+
 /**
  * @returns {void}
  */
@@ -697,6 +716,9 @@ export function flushSync(fn) {
 		if (current_queued_pre_and_render_effects.length > 0 || effects.length > 0) {
 			flushSync();
 		}
+		if (is_micro_task_queued) {
+			process_microtask();
+		}
 		if (is_task_queued) {
 			process_task();
 		}

packages/svelte/src/internal/client/transitions.js

@@ -21,7 +21,7 @@ import {
 	managed_effect,
 	managed_pre_effect,
 	mark_subtree_inert,
-	schedule_task,
+	schedule_microtask,
 	untrack
 } from './runtime.js';
 import { raf } from './timing.js';
@@ -279,6 +279,9 @@ function create_transition(dom, init, direction, effect) {
 			// @ts-ignore
 			payload = payload({ direction: curr_direction });
 		}
+		if (payload == null) {
+			return;
+		}
 		const duration = payload.duration ?? 300;
 		const delay = payload.delay ?? 0;
 		const css_fn = payload.css;
@@ -354,11 +357,15 @@ function create_transition(dom, init, direction, effect) {
 				cancelled = false;
 				create_animation();
 			}
-			dispatch_event(dom, 'introstart');
-			if (needs_reverse) {
-				/** @type {Animation | TickAnimation} */ (animation).reverse();
+			if (animation === null) {
+				transition.x();
+			} else {
+				dispatch_event(dom, 'introstart');
+				if (needs_reverse) {
+					/** @type {Animation | TickAnimation} */ (animation).reverse();
+				}
+				/** @type {Animation | TickAnimation} */ (animation).play();
 			}
-			/** @type {Animation | TickAnimation} */ (animation).play();
 		},
 		// out
 		o() {
@@ -368,11 +375,15 @@ function create_transition(dom, init, direction, effect) {
 				cancelled = false;
 				create_animation();
 			}
-			dispatch_event(dom, 'outrostart');
-			if (needs_reverse) {
-				/** @type {Animation | TickAnimation} */ (animation).reverse();
+			if (animation === null) {
+				transition.x();
 			} else {
-				/** @type {Animation | TickAnimation} */ (animation).play();
+				dispatch_event(dom, 'outrostart');
+				if (needs_reverse) {
+					/** @type {Animation | TickAnimation} */ (animation).reverse();
+				} else {
+					/** @type {Animation | TickAnimation} */ (animation).play();
+				}
 			}
 		},
 		// cancel
@@ -671,7 +682,7 @@ function each_item_animate(block, transitions, index, index_is_reactive) {
 				transition.c();
 			}
 		}
-		schedule_task(() => {
+		schedule_microtask(() => {
 			trigger_transitions(transitions, 'key', from);
 		});
 	}

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,16 @@
+<script>
+	import { fade } from 'svelte/transition';
+
+	let show = $state(false);
+	let animate = $state(false);
+
+	function maybe(node, 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}