test

packages/svelte/tests/runtime-runes/samples/async-effect-triggers-await/_config.js

@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>1</p>
+				<p>1</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>2</p>
+				<p>2</p>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-effect-triggers-await/main.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	let data = $state(Promise.resolve(0));
+
+	let count = $state(0);
+	let unrelated = $state(0);
+
+	$effect(() => {
+		data = Promise.resolve(count)
+		unrelated = count;
+	});
+</script>
+
+<svelte:boundary>
+	<button onclick={() => count += 1}>increment</button>
+	<p>{JSON.stringify((await data), null, 2)}</p>
+	{#if true}
+		<!-- inside if block to force it into a different render effect -->
+		<p>{unrelated}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>