feat: allow `await` in components #15844

Rich-Harris · 2025-04-28T22:18:43Z

This is the PR to go with #15845. Feedback and questions should happen on the discussion rather than here.

Closes #1857, closes #3203, closes #5501

How this works

I'll likely flesh this out in more detail later, but a few quick bullet points:

state changes are now scoped to a Batch. This was always implied (we would flush effects in a microtask, if a flushSync didn't get there first, so that a++; b++ would result in one flush rather than two) but now it's explicit
Batch has a process method that is responsible for calling process_effects. Whereas previously this would result in effects running immediately (albeit in two phases, so that e.g. $effect effects happen after other updates), this now only happens for async effects (so that we can know if a state change resulted in async work) and block effects (so that we can know if a newly-created branch has async work, or if newly-destroyed branches can be skipped). All other effects (i.e. user effects, or those that update the DOM) are added to the batch
if, after flushing everything, the batch is 'settled', we run the remaining effects. Otherwise, those effects will be scheduled when the batch's async deriveds resolve
batches track the previous values of their sources, so that changes can be momentarily reverted in the case of overlapping batches
blocks like {#if ...} etc no longer append or remove branches directly. Instead, they do that in a commit callback belonging to the batch, which runs when everything is settled
we introduce the concept of an async derived, which isn't actually a derived at all — it's a source and an async effect (which is just a normal effect with a flag that lets process_effects run it eagerly) in a trenchcoat. This is because deriveds are lazy and would never update in time
you create an async derived whenever you have a $derived with an await expression (that isn't inside a function), or whenever you have an await expression in a template effect
accordingly, $.template_effect now takes a third argument, which is an array of all async deriveds
control flow blocks ({#if ...} et al) can also contain await expressions, in which case they are wrapped in an $.async block. These simply pass the async derived to the inner logic, so that the blocks themselves don't need to be aware that they're dealing with async values

I'm sure I'm overlooking a ton of stuff but that's as much braindump as I can give right now. Will add comments to more of the source code as and when I can.

WIP

This is not finished; there are bugs, and parts of the code are a little messy. Some stuff could possibly be extracted into a separate PR so that this one is smaller and more focused (e.g. converting boundaries to the Boundary class).

make preserve_context more accurate
extract getAbortSignal into separate PR?

Before submitting the PR, please make sure you do the following

It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
Prefix your PR title with feat:, fix:, chore:, or docs:.
This message body should clearly illustrate what problems it solves.
Ideally, include a test that fails without this PR but passes with it.
If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

Run the tests with pnpm test and lint the project with pnpm lint

…e'll see)

This reverts commit 2585516.

elliott-with-the-longest-name-on-github · 2025-06-27T20:20:56Z

documentation/docs/98-reference/.generated/client-warnings.md

+Detected reactivity loss
+```
+
+TODO


TODO (and below)

elliott-with-the-longest-name-on-github · 2025-06-27T20:21:36Z

documentation/docs/98-reference/.generated/shared-errors.md

+Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+```
+
+TODO


packages/svelte/src/compiler/migrate/index.js

elliott-with-the-longest-name-on-github

I'm still working through files (seriously this thing is HUGE) but I figured I should go ahead and submit what comments I do have. So far, really impressed by the general cleanliness.

elliott-with-the-longest-name-on-github · 2025-06-27T20:34:01Z

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -406,7 +420,9 @@ export function analyze_component(root, source, options) {

 	const component_name = get_component_name(options.filename);

-	const runes = options.runes ?? Array.from(module.scope.references.keys()).some(is_rune);
+	const runes =


cannot wait to nuke these heuristics in 6

elliott-with-the-longest-name-on-github · 2025-06-27T20:34:38Z

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js

 import { build_attribute_value } from '../shared/element.js';
 import { build_event_handler } from './events.js';
 import { determine_slot } from '../../../../../utils/slot.js';
+import { create_derived } from '../../utils.js';


unused

Suggested change

import { create_derived } from '../../utils.js';

elliott-with-the-longest-name-on-github · 2025-06-27T20:53:21Z

packages/svelte/src/reactivity/create-subscriber.js

@@ -69,7 +69,7 @@ export function createSubscriber(start) {
 				subscribers += 1;

 				return () => {
-					tick().then(() => {
+					queueMicrotask(() => {
 						// Only count down after timeout, else we would reach 0 before our own render effect reruns,


Suggested change

// Only count down after timeout, else we would reach 0 before our own render effect reruns,

// Only count down after a microtask, else we would reach 0 before our own render effect reruns,

elliott-with-the-longest-name-on-github · 2025-06-27T20:54:01Z

packages/svelte/src/index-client.js

 import { is_array } from './internal/shared/utils.js';
 import { user_effect } from './internal/client/index.js';
 import * as e from './internal/client/errors.js';
 import { lifecycle_outside_component } from './internal/shared/errors.js';
-import { legacy_mode_flag } from './internal/flags/index.js';
+import { async_mode_flag, legacy_mode_flag } from './internal/flags/index.js';


Suggested change

import { async_mode_flag, legacy_mode_flag } from './internal/flags/index.js';

import { legacy_mode_flag } from './internal/flags/index.js';

unused

elliott-with-the-longest-name-on-github · 2025-06-27T20:54:19Z

packages/svelte/src/index-client.js

+ */
+export function getAbortSignal() {
+	if (active_reaction === null) {
+		throw new Error('TODO getAbortSignal can only be called inside a reaction');


elliott-with-the-longest-name-on-github · 2025-07-01T23:03:47Z

packages/svelte/src/internal/client/reactivity/batch.js

+/** @type {Map<Derived, any> | null} */
+export let batch_deriveds = null;
+
+/** TODO handy for debugging, but we should probably eventually delete it */


is eventually today or some later time

elliott-with-the-longest-name-on-github · 2025-07-01T23:52:05Z

packages/svelte/src/internal/client/reactivity/batch.js

+
+						for (const [source, value] of this.#current) {
+							batch.#current.set(source, value);
+							// TODO what about batch.#previous?


worth it to wrap up these todos?

elliott-with-the-longest-name-on-github · 2025-07-01T23:59:45Z

packages/svelte/src/internal/client/reactivity/batch.js

+
+/**
+ * Forcibly remove all current batches
+ * TODO investigate why we need this in tests


TODO if it matters

elliott-with-the-longest-name-on-github · 2025-07-02T00:00:43Z

packages/svelte/src/internal/client/reactivity/batch.js

+/** TODO handy for debugging, but we should probably eventually delete it */
+let uid = 1;
+
+export class Batch {


This class would really benefit from good JSDoc, especially given its reach across the codebase, especially on complex methods like process. I can see what the code does but trying to intuit why is quite challenging

elliott-with-the-longest-name-on-github · 2025-07-02T00:02:36Z

packages/svelte/src/internal/client/reactivity/async.js

+ * @param {Array<() => Promise<any>>} async
+ * @param {(values: Value[]) => any} fn
+ */
+export function flatten(sync, async, fn) {


Another one that would really benefit from JSDoc

Rich-Harris added 30 commits February 26, 2025 16:35

fix

4e417e1

fix

f90132c

fix

ac33857

add callsite to effect tree logs

9b36b6b

fix

3c350db

tidy

8a96f23

simplify

eb8c8e6

simplify

52d4ade

fix

47a1693

skip test

94da28f

fix

ee71311

fix

a0a4d4f

add $effect.pending()

31882d1

try this

49480f0

fix

5bcdb13

merge main -> async

3d970d2

add TODO

3decb67

Merge branch 'main' into async

8ba4f71

align with main

90cdc16

fix

02efac9

merge main

d5922f8

merge main

fcbb54d

is_async -> has_await

888fc31

merge main

4b7130e

Merge branch 'main' into async

94a4b11

don't update a focused input (may need to add a blur handler later, w…

ab0ec6f

…e'll see)

merge main

cc2b888

docs

521b228

fix

037e289

remove indirection

6688eb8

Rich-Harris added 2 commits June 26, 2025 21:54

dry out

2585516

Revert "dry out"

3eee9d5

This reverts commit 2585516.

Rich-Harris marked this pull request as ready for review June 27, 2025 01:59

Rich-Harris added 6 commits June 27, 2025 09:43

dry out

7d6b603

dry out

7bbb640

use let for block-scoped stuff

a1a289e

dry out

97f8110

dry out

53137a1

tidy up

b3bcdaf

elliott-with-the-longest-name-on-github reviewed Jun 27, 2025

View reviewed changes

packages/svelte/src/compiler/migrate/index.js Show resolved Hide resolved

Rich-Harris and others added 17 commits June 27, 2025 17:12

only wrap awaits in $.save when necessary

aa14305

oops

1c66278

Merge branch 'main' into async

88b9fdb

merge main

1a6cd7d

merge main

aff0f50

remove TODO comment (just checked)

4d05b1b

oops, leftover

73fb7a1

simplify

80de2ca

unused

ff0662a

remove logging

e2bcd8c

tweak

2e854de

unused

f6976fd

unused

9386b77

remove logging

d96991a

partial fix

36947c5

fix

923d8f6

merge main

09792a0

elliott-with-the-longest-name-on-github reviewed Jul 2, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: allow `await` in components #15844

feat: allow `await` in components #15844

Rich-Harris commented Apr 28, 2025 •

edited

Loading

Uh oh!

elliott-with-the-longest-name-on-github Jun 27, 2025

Uh oh!

elliott-with-the-longest-name-on-github Jun 27, 2025

Uh oh!

Uh oh!

elliott-with-the-longest-name-on-github left a comment

Uh oh!

elliott-with-the-longest-name-on-github Jun 27, 2025

Uh oh!

elliott-with-the-longest-name-on-github Jun 27, 2025

Uh oh!

elliott-with-the-longest-name-on-github Jun 27, 2025

Uh oh!

elliott-with-the-longest-name-on-github Jun 27, 2025

Uh oh!

elliott-with-the-longest-name-on-github Jun 27, 2025

Uh oh!

elliott-with-the-longest-name-on-github Jul 1, 2025

Uh oh!

elliott-with-the-longest-name-on-github Jul 1, 2025

Uh oh!

elliott-with-the-longest-name-on-github Jul 1, 2025

Uh oh!

elliott-with-the-longest-name-on-github Jul 2, 2025

Uh oh!

elliott-with-the-longest-name-on-github Jul 2, 2025

Uh oh!

Uh oh!

	// Only count down after timeout, else we would reach 0 before our own render effect reruns,
	// Only count down after a microtask, else we would reach 0 before our own render effect reruns,

	import { async_mode_flag, legacy_mode_flag } from './internal/flags/index.js';
	import { legacy_mode_flag } from './internal/flags/index.js';

Uh oh!

feat: allow await in components #15844

Are you sure you want to change the base?

feat: allow await in components #15844

Conversation

Rich-Harris commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How this works

WIP

Before submitting the PR, please make sure you do the following

Tests and linting

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elliott-with-the-longest-name-on-github left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

feat: allow `await` in components #15844

feat: allow `await` in components #15844

Rich-Harris commented Apr 28, 2025 •

edited

Loading