await

<script lang="ts">
	let a = $state(1);
	let b = $state(2);

	async function add(a, b) {
		await new Promise((f) => setTimeout(f, 500)); // artificial delay
		return a + b;
	}
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {await add(a, b)}</p>

<script>
	let a = $state(1);
	let b = $state(2);

	async function add(a, b) {
		await new Promise((f) => setTimeout(f, 500)); // artificial delay
		return a + b;
	}
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {await add(a, b)}</p>

async function function one(x: number): Promise<number>function one(x: number): Promise<number>one(x: numberx: numberx: number) { return x: numberx: numberx; }
async function function two(y: number): Promise<number>function two(y: number): Promise<number>two(y: numbery: numbery: number) { return y: numbery: numbery; }
let let x: numberlet x: numberx = 
function $state<1>(initial: 1): 1 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
function $state<1>(initial: 1): 1 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(1);
let let y: numberlet y: numbery = 
function $state<2>(initial: 2): 2 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
function $state<2>(initial: 2): 2 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(2);
// cut
// `b` will not be created until `a` has resolved,
// but once created they will update independently
// even if `x` and `y` update simultaneously
let let a: numberlet a: numbera = 
function $derived<number>(expression: number): number
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression
function $derived<number>(expression: number): number
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await function one(x: number): Promise<number>function one(x: number): Promise<number>one(let x: numberlet x: numberx));
let let b: numberlet b: numberb = 
function $derived<number>(expression: number): number
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression
function $derived<number>(expression: number): number
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await function two(y: number): Promise<number>function two(y: number): Promise<number>two(let y: numberlet y: numbery));

/** @param {number} x */
async function function one(x: number): Promise<number>
@paramxfunction one(x: number): Promise<number>
@paramxone(x: number
@paramxx: number
@paramxx) { return x: number
@paramxx: number
@paramxx; }
/** @param {number} y */
async function function two(y: number): Promise<number>
@paramyfunction two(y: number): Promise<number>
@paramytwo(y: number
@paramyy: number
@paramyy) { return y: number
@paramyy: number
@paramyy; }
let let x: numberlet x: numberx = 
function $state<1>(initial: 1): 1 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
function $state<1>(initial: 1): 1 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(1);
let let y: numberlet y: numbery = 
function $state<2>(initial: 2): 2 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
function $state<2>(initial: 2): 2 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(2);
// cut
// `b` will not be created until `a` has resolved,
// but once created they will update independently
// even if `x` and `y` update simultaneously
let let a: numberlet a: numbera = 
function $derived<number>(expression: number): number
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression
function $derived<number>(expression: number): number
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await function one(x: number): Promise<number>
@paramxfunction one(x: number): Promise<number>
@paramxone(let x: numberlet x: numberx));
let let b: numberlet b: numberb = 
function $derived<number>(expression: number): number
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression
function $derived<number>(expression: number): number
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await function two(y: number): Promise<number>
@paramyfunction two(y: number): Promise<number>
@paramytwo(let y: numberlet y: numbery));

<script lang="ts">
	import { function fork(fn: () => void): Fork
Creates a 'fork', in which state changes are evaluated but not applied to the DOM.
This is useful for speculatively loading data (for example) when you suspect that
the user is about to take some action.
Frameworks like SvelteKit can use this to preload data when the user touches or
hovers over a link, making any subsequent navigation feel instantaneous.
The fn parameter is a synchronous function that modifies some state. The
state changes will be reverted after the fork is initialised, then reapplied
if and when the fork is eventually committed.
When it becomes clear that a fork will not be committed (e.g. because the
user navigated elsewhere), it must be discarded to avoid leaking memory.
@since5.42fork } from 'svelte';
	import 
type Menu = SvelteComponent<Record<string, any>, any, any>
const Menu: LegacyComponentTypeMenu from './Menu.svelte';
	import type { Fork } from 'svelte';

	let let open: booleanopen = 
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial valuestate(false);
	let let pending: Fork | nullpending: Fork | null = null;

	function function (local function) preload(): voidpreload() {
		let pending: Fork | nullpending ??= function fork(fn: () => void): Fork
Creates a 'fork', in which state changes are evaluated but not applied to the DOM.
This is useful for speculatively loading data (for example) when you suspect that
the user is about to take some action.
Frameworks like SvelteKit can use this to preload data when the user touches or
hovers over a link, making any subsequent navigation feel instantaneous.
The fn parameter is a synchronous function that modifies some state. The
state changes will be reverted after the fork is initialised, then reapplied
if and when the fork is eventually committed.
When it becomes clear that a fork will not be committed (e.g. because the
user navigated elsewhere), it must be discarded to avoid leaking memory.
@since5.42fork(() => {
			let open: booleanopen = true;
		});
	}

	function function (local function) discard(): voiddiscard() {
		let pending: Fork | nullpending?.Fork.discard(): void
Discard the forkdiscard();
		let pending: Fork | nullpending = null;
	}
</script>

<button
	onfocusin={function (local function) preload(): voidpreload}
	onfocusout={function (local function) discard(): voiddiscard}
	onpointerenter={function (local function) preload(): voidpreload}
	onpointerleave={function (local function) discard(): voiddiscard}
	onclick={() => {
		let pending: Fork | nullpending?.Fork.commit(): Promise<void>
Commit the fork. The promise will resolve once the state change has been appliedcommit();
		let pending: Fork | nullpending = null;

		// in case `pending` didn't exist
		// (if it did, this is a no-op)
		let open: booleanopen = true;
	}}
>open menu</button>

{#if let open: booleanopen}
	<!-- any async work inside this component will start
	     as soon as the fork is created -->
	<const Menu: LegacyComponentTypeMenu onclose={() => let open: booleanopen = false} />
{/if}

<script>
	import { fork } from 'svelte';
	import Menu from './Menu.svelte';

	let open = $state(false);

	/** @type {import('svelte').Fork | null} */
	let pending = null;

	function preload() {
		pending ??= fork(() => {
			open = true;
		});
	}

	function discard() {
		pending?.discard();
		pending = null;
	}
</script>

<button
	onfocusin={preload}
	onfocusout={discard}
	onpointerenter={preload}
	onpointerleave={discard}
	onclick={() => {
		pending?.commit();
		pending = null;

		// in case `pending` didn't exist
		// (if it did, this is a no-op)
		open = true;
	}}
>open menu</button>

{#if open}
	<!-- any async work inside this component will start
	     as soon as the fork is created -->
	<Menu onclose={() => open = false} />
{/if}