fix: reduce if block nesting
#17662
Closing issue
Describe the bug
I’m encountering a Maximum call stack size exceeded error at a relatively shallow component nesting depth.
The issue became worse starting with [email protected]; before that, it only resulted in a hydration warning.
Reproduction
Playground (42) Solid (600+) Vue (600+) Real world component
Logs
System Info
System:
OS: Linux 6.12 cpe:/o:nixos:nixos:25.11 25.11 (Xantusia)
CPU: (12) x64 Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz
Memory: 2.36 GB / 15.56 GB
Container: Yes
Shell: 5.3.3 - /run/current-system/sw/bin/bash
Binaries:
Node: 24.11.1 - /nix/store/4l88l3qm9qbvizwfy32rfjpzz2nh1x4j-nodejs-24.11.1/bin/node
npm: 11.6.2 - /nix/store/4l88l3qm9qbvizwfy32rfjpzz2nh1x4j-nodejs-24.11.1/bin/npm
pnpm: 10.26.1 - /nix/store/0mkcl4bgin1q6r1g0zyj3drynpa300ir-pnpm-10.26.1/bin/pnpm
Browsers:
Brave Browser: 144.1.86.146
npmPackages:
svelte: catalog: => 5.48.0
Severity
annoyance
Pull request
This reduces if block nesting similar to how we did it in #15250 (which got lost during the await feature introduction): If the if expression doesn't contain an await expression or is not dependent on a blocker that is not already resolved, then we can avoid creating a separate $.if() statement. The one trade-off is that we'll do re-invocations for all the conditions leading up to the condition that matches. Therefore non-simple if expressions are wrapper in $.derived to avoid excessive recomputations.
closes #17659 (~320 markers in prod mode possible now; less in dev because of our "wrap this component with devtime info" method) helps with #15200
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:, ordocs:. - 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 testand lint the project withpnpm lint
Info
🦋 Changeset detected
Latest commit: 55fbae1
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
pnpm add https://pkg.pr.new/svelte@17662nicely done!
This reduces if block nesting similar to how we did it in #15250 (which got lost during the `await` feature introduction): If the if expression doesn't contain an await expression or is not dependent on a blocker that is not already resolved, then we can avoid creating a separate `$.if()` statement. The one trade-off is that we'll do re-invocations for all the conditions leading up to the condition that matches. Therefore non-simple if expressions are wrapper in `$.derived` to avoid excessive recomputations. closes #17659 (~320 markers in prod mode possible now; less in dev because of our "wrap this component with devtime info" method) helps with #15200
Pro tip: You can prefix GitHub URLs of issues, PRs or discussions with svcl.dev/ to view them on this page! Also try it on a GitHub release ;)