Skip to content

Conversation

@Rich-Harris
Copy link
Member

The way we handle branches is kinda broken in an async world. We assume — quite reasonably unless you're in an async world — that it's safe to simply bail out of a block if the expression is unchanged from before. When it's time to commit a block, we commit whichever branch corresponds to the most recent invocation, which isn't correct. And it's only possible to have one offscreen branch per block. And so on. I'm pretty sure there's some memory leaks in there as well.

This PR adds a new BranchManager class, which each block type can use to control which branches are created when. It ensures that branches are correctly linked to batches, and that they're destroyed at the appropriate time. It handles all the complexities around transitions and as-yet-unresolved batches.

Currently it's used for #if, #await, #key, @render, <svelte:component> and <svelte:element>. It might make sense to use it for <svelte:boundary> as well. It does not currently power #each blocks, which are unique in that their branches aren't mutually exclusive.

I'm hoping that this will enable more work towards #16971 and related issues.

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

@changeset-bot
Copy link

changeset-bot bot commented Oct 18, 2025

🦋 Changeset detected

Latest commit: 4efcc52

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@svelte-docs-bot
Copy link

@github-actions
Copy link
Contributor

Playground

pnpm add https://pkg.pr.new/svelte@16977

component.promise = promise;
// wait for rendering
await Promise.resolve();
await tick();
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

confession, I don't really understand why this change was necessary. but it was

Copy link
Member

@dummdidumm dummdidumm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice how this deduplicates the logic!


if (hydrating) {
// we want to restore everything _except_ this
set_hydrating(false);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to re-enter hydration mode after this? (tbh I don't quite understand why we need to check for hydrating at all here; how can you end up there with hydrating being true?)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Calling restore() will set hydrating back to true if we were initially hydrating. By the time the promise resolves, we've finished hydrating — if we don't set it back to false then all hell breaks loose, because the next time a block effect runs it will enter the wrong code path. Added a comment

Comment on lines 141 to 143
if (this.#legacy && key !== null && typeof key === 'object') {
key = {};
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand this part - what is it supposed to do? key is not guaranteed to be a primitive outside of key blocks, e.g. for snippet or component it's the render function

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you have something like {#key array} and do array = array, the block should re-render. For snippets and components typeof key === 'function' so it won't hit this path. Though I guess I could move the logic to key.js

}

var target = create_text();
anchor.before(target);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could use a comment - why are we creating a text node, make the render function append to that target but then remove that target below?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was something to do with offscreen fragments but it turns out we don't need this any more

Copy link
Member

@dummdidumm dummdidumm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work 👍

@Rich-Harris Rich-Harris merged commit b8627e5 into main Oct 20, 2025
18 checks passed
@Rich-Harris Rich-Harris deleted the branch-manager branch October 20, 2025 13:27
@github-actions github-actions bot mentioned this pull request Oct 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants