chore: use queue_microtask on #await again (#12647)

Now that we've made `mount` and `hydrate` not call `flushSync` anymore, we can go back to using `queue_microtask` inside `#await`, which means people who want to synchronously see the pending block can do so using `flushSync` (as validated by our tests). This essentially reverts #12274

packages/svelte/src/internal/client/dom/blocks/await.js

@@ -139,7 +139,7 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 			} else {
 				// Wait a microtask before checking if we should show the pending state as
 				// the promise might have resolved by the next microtask.
-				Promise.resolve().then(() => {
+				queue_micro_task(() => {
 					if (!resolved) update(PENDING, true);
 				});
 			}

packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html

@@ -1,4 +1,4 @@
 <div class="a svelte-xyz"></div>
-<div class="b svelte-xyz"></div>
-<div class="g svelte-xyz"></div>
-<div class="h svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="h svelte-xyz"></div>

packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
 <style>
 	.a ~ .b { color: green; }
 	.a ~ .c { color: green; }
@@ -16,20 +20,19 @@
 
 <div class="a"></div>
 
-<!-- non-promise, so that something renders initially -->
-{#await true then value}
+{#await promise then value}
 	<div class="b"></div>
 {:catch error}
 	<div class="c"></div>
 {/await}
 
-{#await true}
+{#await promise}
 	<div class="d"></div>
 {:catch error}
 	<div class="e"></div>
 {/await}
 
-{#await true}
+{#await promise}
 	<div class="f"></div>
 {:then error}
 	<div class="g"></div>

packages/svelte/tests/css/samples/general-siblings-combinator-await/_config.js

@@ -5,20 +5,20 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .c"',
-			start: { character: 217, column: 1, line: 13 },
-			end: { character: 224, column: 8, line: 13 }
+			start: { character: 269, column: 1, line: 15 },
+			end: { character: 276, column: 8, line: 15 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".c ~ .d"',
-			start: { character: 242, column: 1, line: 14 },
-			end: { character: 249, column: 8, line: 14 }
+			start: { character: 296, column: 1, line: 16 },
+			end: { character: 303, column: 8, line: 16 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .d"',
-			start: { character: 267, column: 1, line: 15 },
-			end: { character: 274, column: 8, line: 15 }
+			start: { character: 323, column: 1, line: 17 },
+			end: { character: 330, column: 8, line: 17 }
 		}
 	]
 });

packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css

@@ -7,6 +7,6 @@
 	.a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
 
 	/* no match */
-	/* (unused) .b ~ .c { color: red; }*/
-	/* (unused) .c ~ .d { color: red; }*/
-	/* (unused) .b ~ .d { color: red; }*/
+	/* (unused) .b ~ .c { color: green; }*/
+	/* (unused) .c ~ .d { color: green; }*/
+	/* (unused) .b ~ .d { color: green; }*/

packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.html

@@ -1,3 +1,3 @@
 <div class="a svelte-xyz"></div>
-<div class="c svelte-xyz"></div>
-<div class="e svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>

packages/svelte/tests/css/samples/general-siblings-combinator-await/input.svelte

@@ -1,4 +1,6 @@
-
+<script>
+	let promise = Promise.resolve();
+</script>
 
 <style>
 	.a ~ .b { color: green; }
@@ -10,15 +12,14 @@
 	.a ~ .e { color: green; }
 
 	/* no match */
-	.b ~ .c { color: red; }
-	.c ~ .d { color: red; }
-	.b ~ .d { color: red; }
+	.b ~ .c { color: green; }
+	.c ~ .d { color: green; }
+	.b ~ .d { color: green; }
 </style>
 
 <div class="a"></div>
 
-<!-- non-promise, so that something renders initially -->
-{#await true}
+{#await promise}
 	<div class="b"></div>
 {:then value}
 	<div class="c"></div>

packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.html

@@ -1,4 +1,4 @@
 <div class="a svelte-xyz"></div>
-<div class="b svelte-xyz"></div>
-<div class="g svelte-xyz"></div>
-<div class="h svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="h svelte-xyz"></div>

packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
 <style>
 	.a + .b { color: green; }
 	.a + .c { color: green; }
@@ -16,22 +20,21 @@
 
 <div class="a"></div>
 
-<!-- non-promise, so that something renders initially -->
-{#await true then value}
+{#await promise then value}
 	<div class="b"></div>
 {:catch error}
 	<div class="c"></div>
 {/await}
 
-{#await true}
+{#await promise}
 	<div class="d"></div>
 {:catch error}
 	<div class="e"></div>
 {/await}
 
-{#await true}
+{#await promise}
 	<div class="f"></div>
-{:then value}
+{:then error}
 	<div class="g"></div>
 {/await}
 

packages/svelte/tests/css/samples/siblings-combinator-await/_config.js

@@ -5,26 +5,26 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".a + .e"',
-			start: { character: 188, column: 1, line: 10 },
-			end: { character: 195, column: 8, line: 10 }
+			start: { character: 242, column: 1, line: 14 },
+			end: { character: 249, column: 8, line: 14 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b + .c"',
-			start: { character: 213, column: 1, line: 11 },
-			end: { character: 220, column: 8, line: 11 }
+			start: { character: 269, column: 1, line: 15 },
+			end: { character: 276, column: 8, line: 15 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".c + .d"',
-			start: { character: 238, column: 1, line: 12 },
-			end: { character: 245, column: 8, line: 12 }
+			start: { character: 296, column: 1, line: 16 },
+			end: { character: 303, column: 8, line: 16 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b + .d"',
-			start: { character: 263, column: 1, line: 13 },
-			end: { character: 270, column: 8, line: 13 }
+			start: { character: 323, column: 1, line: 17 },
+			end: { character: 330, column: 8, line: 17 }
 		}
 	]
 });

packages/svelte/tests/css/samples/siblings-combinator-await/expected.css

@@ -6,7 +6,7 @@
 	.d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
 
 	/* no match */
-	/* (unused) .a + .e { color: red; }*/
-	/* (unused) .b + .c { color: red; }*/
-	/* (unused) .c + .d { color: red; }*/
-	/* (unused) .b + .d { color: red; }*/
+	/* (unused) .a + .e { color: green; }*/
+	/* (unused) .b + .c { color: green; }*/
+	/* (unused) .c + .d { color: green; }*/
+	/* (unused) .b + .d { color: green; }*/

packages/svelte/tests/css/samples/siblings-combinator-await/expected.html

@@ -1,3 +1,3 @@
 <div class="a svelte-xyz"></div>
-<div class="c svelte-xyz"></div>
-<div class="e svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>

packages/svelte/tests/css/samples/siblings-combinator-await/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
 <style>
 	.a + .b { color: green; }
 	.a + .c { color: green; }
@@ -7,16 +11,15 @@
 	.d + .e { color: green; }
 
 	/* no match */
-	.a + .e { color: red; }
-	.b + .c { color: red; }
-	.c + .d { color: red; }
-	.b + .d { color: red; }
+	.a + .e { color: green; }
+	.b + .c { color: green; }
+	.c + .d { color: green; }
+	.b + .d { color: green; }
 </style>
 
 <div class="a"></div>
 
-<!-- non-promise, so that something renders initially -->
-{#await true}
+{#await promise}
 	<div class="b"></div>
 {:then value}
 	<div class="c"></div>

packages/svelte/tests/css/test.ts

@@ -4,7 +4,7 @@ import * as fs from 'node:fs';
 import { assert } from 'vitest';
 import { compile_directory, try_read_file } from '../helpers.js';
 import { assert_html_equal } from '../html_equal.js';
-import { mount, unmount } from 'svelte';
+import { flushSync, mount, unmount } from 'svelte';
 import { suite, type BaseTest } from '../suite.js';
 import type { CompileOptions, Warning } from '#compiler';
 
@@ -60,6 +60,7 @@ const { test, run } = suite<CssTest>(async (config, cwd) => {
 		const target = window.document.createElement('main');
 
 		const component = mount(ClientComponent, { props: config.props ?? {}, target });
+		flushSync();
 
 		const html = target.innerHTML;
 

packages/svelte/tests/runtime-legacy/samples/await-block-func-function/_config.js

@@ -7,6 +7,10 @@ export default test({
 		};
 	},
 
+	html: `
+		Waiting...
+	`,
+
 	async test({ assert, component, target }) {
 		await (component.thePromise = Promise.resolve({ func: 12345 }));
 

packages/svelte/tests/runtime-legacy/samples/await-catch-no-expression/_config.js

@@ -13,6 +13,11 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
+	html: `
+		<br />
+		<p>the promise is pending</p>
+	`,
+
 	async test({ assert, component, target }) {
 		deferred.resolve(42);
 
@@ -22,7 +27,6 @@ export default test({
 
 		deferred = create_deferred();
 		component.thePromise = deferred.promise;
-		await Promise.resolve();
 
 		assert.htmlEqual(target.innerHTML, '<br /><p>the promise is pending</p>');
 

packages/svelte/tests/runtime-legacy/samples/await-conservative-update/_config.js

@@ -2,6 +2,10 @@ import { test } from '../../test';
 import { sleep } from './sleep.js';
 
 export default test({
+	html: `
+		<p>loading...</p>
+	`,
+
 	test({ assert, target }) {
 		return sleep(50).then(() => {
 			assert.htmlEqual(

packages/svelte/tests/runtime-legacy/samples/await-containing-if/_config.js

@@ -13,6 +13,10 @@ export default test({
 		return { thePromise: deferred.promise, show: true };
 	},
 
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
 	test({ assert, component, target }) {
 		deferred.resolve(42);
 

packages/svelte/tests/runtime-legacy/samples/await-in-each/_config.js

@@ -19,6 +19,10 @@ export default test({
 		return { items };
 	},
 
+	html: `
+		<p>a title: loading...</p>
+	`,
+
 	test({ assert, target }) {
 		fulfil(42);
 

packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/_config.js

@@ -1,6 +1,7 @@
 import { test } from '../../test';
 
 export default test({
+	html: 'Loading...',
 	async test({ assert, component, target }) {
 		await component.test();
 

packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous-reactive/_config.js

@@ -1,8 +1,9 @@
 import { test } from '../../test';
 
 export default test({
+	html: '<p>wait for it...</p>',
 	test({ assert, component, target }) {
-		return component.promise.then(() => {
+		return component.promise.then(async () => {
 			assert.htmlEqual(
 				target.innerHTML,
 				`

packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous/_config.js

@@ -7,7 +7,6 @@ export default test({
 		});
 
 		component.promise = promise;
-		await Promise.resolve();
 
 		assert.htmlEqual(target.innerHTML, '<p>wait for it...</p>');
 

packages/svelte/tests/runtime-legacy/samples/await-then-blowback-reactive/_config.js

@@ -3,6 +3,8 @@ import { ok, test } from '../../test';
 
 export default test({
 	async test({ assert, component, target }) {
+		assert.htmlEqual(target.innerHTML, 'Loading...');
+
 		await component.promise;
 		await Promise.resolve();
 		const span = target.querySelector('span');

packages/svelte/tests/runtime-legacy/samples/await-then-catch-anchor/_config.js

@@ -13,11 +13,15 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
 	test({ assert, component, target }) {
 		deferred.resolve(42);
 
 		return deferred.promise
-			.then(async () => {
+			.then(() => {
 				assert.htmlEqual(
 					target.innerHTML,
 					`
@@ -28,7 +32,6 @@ export default test({
 				deferred = create_deferred();
 
 				component.thePromise = deferred.promise;
-				await Promise.resolve();
 
 				assert.htmlEqual(target.innerHTML, '<div><p>loading...</p></div>');