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

…y but evidently it isn't

…ears unnecessary

…ses a double flush and makes debugging harder

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

More feedback -- still looking really good

elliott-with-the-longest-name-on-github · 2025-07-03T20:45:33Z

packages/svelte/src/internal/client/dom/blocks/svelte-component.js

-	block(() => {
-		if (component === (component = get_component())) return;
+	/** @type {DocumentFragment | null} */
+	var offscreen_fragment = null;


this whole thing is so crazy in such a cool way

elliott-with-the-longest-name-on-github · 2025-07-03T20:46:33Z

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

+export function async(node, expressions, fn) {
+	var boundary = get_pending_boundary();
+
+	// TODO why is this necessary? doesn't it happen inside `async_derived` inside `flatten`?


elliott-with-the-longest-name-on-github · 2025-07-03T20:51:45Z

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

+				this.#pending_effect = branch(() => pending(this.#anchor));
+			}
+		} else if (this.parent) {
+			throw new Error('TODO show pending snippet on parent');


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

elliott-with-the-longest-name-on-github · 2025-07-03T20:54:29Z

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

+	}
+
+	/** @param {1 | -1} d */
+	update_pending_count(d) {


this is really nicely expressive

elliott-with-the-longest-name-on-github · 2025-07-03T21:02:33Z

packages/svelte/src/compiler/utils/builders.js

+		let has_await = false;
+
+		walk(expression.body.argument, null, {
+			AwaitExpression(node, context) {


Suggested change

AwaitExpression(node, context) {

AwaitExpression(_node, context) {

silence warning

elliott-with-the-longest-name-on-github · 2025-07-03T21:04:05Z

packages/svelte/src/compiler/types/index.d.ts

@@ -5,6 +5,7 @@ import type { ICompileDiagnostic } from '../utils/compile_diagnostic.js';
 import type { StateCreationRuneName } from '../../utils.js';
 import type {
 	AssignmentExpression,
+	AwaitExpression,


Suggested change

AwaitExpression,

elliott-with-the-longest-name-on-github · 2025-07-03T21:04:29Z

packages/svelte/src/compiler/phases/types.d.ts

+	AwaitExpression,
+	CallExpression,
 	ClassBody,
 	Comment,


Suggested change

AwaitExpression,

CallExpression,

ClassBody,

Comment,

CallExpression,

ClassBody,

elliott-with-the-longest-name-on-github · 2025-07-03T21:06:07Z

packages/svelte/src/compiler/phases/scope.js

 	walk(ast, state, {
+		AwaitExpression(node, context) {


should we add a TODO: Remove in 6 comment, since we won't need heuristic runes detection then?

elliott-with-the-longest-name-on-github · 2025-07-03T21:10:13Z

packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js

@@ -25,6 +25,10 @@ export function CallExpression(node, context) {
 		return b.arrow([], b.block([]));
 	}

+	if (rune === '$effect.pending') {


would this not be true because we always render the pending snippet during SSR? or is $effect.pending only true after the initial pending render? if so confusing naming

Rich-Harris added 30 commits April 19, 2025 21:02

more

e247f66

guarantee fork

d42b358

forks.js -> batch.js

5000aae

rename forks to batches

d465537

fix

9b5f00b

simplify

5a3f7c2

note to self

011741e

tweak

623fb50

tweak

4a56c2a

privatise

f30fd26

failing test

6eac199

note to self

1f02fdf

reinstate scheduling optimisation

3ee25bb

WIP

e5579fd

consistent behaviour

2e813f1

simplify

6e26478

WIP

5518e98

tidy

c0ff1d0

tweak

0f5b3cd

fix

32f753d

compile playground with dev: false

f73a5e9

failing test

2087b3e

shuffle

ec81491

WIP

45f4cc5

WIP

9e0bd4f

WIP

0bc6e69

WIP

43eeca9

WIP

1cb4e24

WIP

21e4c44

WIP

1c31363

Rich-Harris added 27 commits July 2, 2025 13:08

unused

a100bdc

fix

70a01fc

no idea what a 'boundary micro task' is or why it was deemed necessar…

36a9059

…y but evidently it isn't

remove queue_boundary_micro_task

a678030

oops

1bf4949

note

8ba64c0

tidy up

9bedb7f

remove TODO

636c809

make method private

8ffa726

simplify

c028371

flesh out await_reactivity_loss warning

7a08d9b

tweak

1626c22

update test

beaae35

fix

cda99a1

null out from_async_derived in more places

94415f0

tidy up test

77b4f56

failing test

2629561

merge main

1d0a945

unused

9c13fef

fix test

70c9f4b

fix

f043519

simplify. no idea what the async_mode_flag stuff is about, but it app…

c78e8e0

…ears unnecessary

add async_derived_orphan error

c268124

regenerate

b78dd16

flesh out await_outside_boundary message

e888b5b

add some JSDoc

cf2bdd1

only update $effect.pending() if someone is listening, since it cau…

6b1ac77

…ses a double flush and makes debugging harder

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

View reviewed changes

Rich-Harris added 2 commits July 3, 2025 17:16

tweak logic to make it clearer why and when we commit a batch

c3aabc1

add a couple of comments

2325a5a

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 left a comment

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

Uh oh!

TMZ Celebrity News – Breaking Stories, Videos & Gossip

🎥 Watch TMZ Live

	AwaitExpression(node, context) {
	AwaitExpression(_node, context) {

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!

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!

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!

TMZ Celebrity News – Breaking Stories, Videos & Gossip

🎥 Watch TMZ Live

feat: allow `await` in components #15844

feat: allow `await` in components #15844

Rich-Harris commented Apr 28, 2025 •

edited

Loading