more

packages/svelte/tests/runtime-runes/samples/async-prop/_config.js

@@ -1,33 +1,51 @@
 import { tick } from 'svelte';
-import { deferred } from '../../../../src/internal/shared/utils.js';
 import { test } from '../../test';
 
-/** @type {ReturnType<typeof deferred>} */
-let d;
-
 export default test({
-	html: `<p>pending</p>`,
+	html: `
-
+		<button>reset</button>
-	get props() {
+		<button>hello</button>
-		d = deferred();
+		<button>again</button>
+		<p>pending</p>
+	`,
 
-		return {
+	async test({ assert, target }) {
-			promise: d.promise
+		const [reset, hello, again] = target.querySelectorAll('button');
-		};
-	},
 
-	async test({ assert, target, component }) {
+		hello.click();
-		d.resolve('hello');
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>again</button>
+				<h1>hello</h1>
+			`
+		);
 
-		d = deferred();
+		reset.click();
-		component.promise = d.promise;
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>again</button>
+				<h1>hello</h1>
+			`
+		);
 
-		d.resolve('hello again');
+		again.click();
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<h1>hello again</h1>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>again</button>
+				<h1>hello again</h1>
+			`
+		);
 	}
 });

packages/svelte/tests/runtime-runes/samples/async-prop/main.svelte

@@ -1,11 +1,15 @@
 <script>
 	import Child from './Child.svelte';
 
-	let { promise } = $props();
+	let deferred = $state(Promise.withResolvers());
 </script>
 
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+<button onclick={() => deferred.resolve('hello again')}>again</button>
+
 <svelte:boundary>
-	<Child value={await promise} />
+	<Child value={await deferred.promise} />
 
 	{#snippet pending()}
 		<p>pending</p>

packages/svelte/tests/runtime-runes/samples/async-render-tag/_config.js

@@ -1,32 +1,51 @@
 import { tick } from 'svelte';
-import { deferred } from '../../../../src/internal/shared/utils.js';
 import { test } from '../../test';
 
-/** @type {ReturnType<typeof deferred>} */
-let d;
-
 export default test({
-	html: `<p>pending</p>`,
+	html: `
-
+		<button>reset</button>
-	get props() {
+		<button>hello</button>
-		d = deferred();
+		<button>wheee</button>
+		<p>pending</p>
+	`,
 
-		return {
+	async test({ assert, target }) {
-			promise: d.promise
+		const [reset, hello, wheee] = target.querySelectorAll('button');
-		};
-	},
 
-	async test({ assert, target, component }) {
+		hello.click();
-		d.resolve('hello');
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>wheee</button>
+				<h1>hello</h1>
+			`
+		);
 
-		component.promise = (d = deferred()).promise;
+		reset.click();
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>wheee</button>
+				<h1>hello</h1>
+			`
+		);
 
-		d.resolve('wheee');
+		wheee.click();
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<h1>wheee</h1>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>hello</button>
+				<button>wheee</button>
+				<h1>wheee</h1>
+			`
+		);
 	}
 });

packages/svelte/tests/runtime-runes/samples/async-render-tag/main.svelte

@@ -1,13 +1,17 @@
 <script>
-	let { promise } = $props();
+	let deferred = $state(Promise.withResolvers());
 </script>
 
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+<button onclick={() => deferred.resolve('wheee')}>wheee</button>
+
 {#snippet hello(message)}
 	<h1>{message}</h1>
 {/snippet}
 
 <svelte:boundary>
-	{@render hello(await promise)}
+	{@render hello(await deferred.promise)}
 
 	{#snippet pending()}
 		<p>pending</p>

packages/svelte/tests/runtime-runes/samples/async-svelte-element/_config.js

@@ -1,32 +1,51 @@
 import { tick } from 'svelte';
-import { deferred } from '../../../../src/internal/shared/utils.js';
 import { test } from '../../test';
 
-/** @type {ReturnType<typeof deferred>} */
-let d;
-
 export default test({
-	html: `<p>pending</p>`,
+	html: `
-
+		<button>reset</button>
-	get props() {
+		<button>h1</button>
-		d = deferred();
+		<button>h2</button>
+		<p>pending</p>
+	`,
 
-		return {
+	async test({ assert, target }) {
-			promise: d.promise
+		const [reset, h1, h2] = target.querySelectorAll('button');
-		};
-	},
 
-	async test({ assert, target, component }) {
+		h1.click();
-		d.resolve('h1');
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>h1</button>
+				<button>h2</button>
+				<h1>hello</h1>
+			`
+		);
 
-		component.promise = (d = deferred()).promise;
+		reset.click();
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>h1</button>
+				<button>h2</button>
+				<h1>hello</h1>
+			`
+		);
 
-		d.resolve('h2');
+		h2.click();
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<h2>hello</h2>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+				<button>h1</button>
+				<button>h2</button>
+				<h2>hello</h2>
+			`
+		);
 	}
 });

packages/svelte/tests/runtime-runes/samples/async-svelte-element/main.svelte

@@ -1,9 +1,13 @@
 <script>
-	let { promise } = $props();
+	let deferred = $state(Promise.withResolvers());
 </script>
 
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve('h1')}>h1</button>
+<button onclick={() => deferred.resolve('h2')}>h2</button>
+
 <svelte:boundary>
-	<svelte:element this={await promise}>hello</svelte:element>
+	<svelte:element this={await deferred.promise}>hello</svelte:element>
 
 	{#snippet pending()}
 		<p>pending</p>