Skip to content

Commit c92620d

Browse files
Rich-HarrisRich-Harris
authored
feat: skip pending block for already-resolved promises (#12274)
* feat: skip pending block for already-resolved promises * update tests * update docs
1 parent b1cf2ec commit c92620d

File tree

49 files changed

+116
-178
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+116
-178
lines changed

‎.changeset/chatty-ghosts-unite.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
feat: skip pending block for already-resolved promises

‎packages/svelte/src/internal/client/dom/blocks/await.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
139139
} else {
140140
// Wait a microtask before checking if we should show the pending state as
141141
// the promise might have resolved by the next microtask.
142-
queue_micro_task(() => {
142+
Promise.resolve().then(() => {
143143
if (!resolved) update(PENDING, true);
144144
});
145145
}

‎packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div class="a svelte-xyz"></div>
2-
<div class="d svelte-xyz"></div>
3-
<div class="f svelte-xyz"></div>
4-
<div class="h svelte-xyz"></div>
2+
<div class="b svelte-xyz"></div>
3+
<div class="g svelte-xyz"></div>
4+
<div class="h svelte-xyz"></div>

‎packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
<script>
2-
let promise = Promise.resolve();
3-
</script>
4-
51
<style>
62
.a ~ .b { color: green; }
73
.a ~ .c { color: green; }
@@ -20,19 +16,20 @@
2016

2117
<div class="a"></div>
2218

23-
{#await promise then value}
19+
<!-- non-promise, so that something renders initially -->
20+
{#await true then value}
2421
<div class="b"></div>
2522
{:catch error}
2623
<div class="c"></div>
2724
{/await}
2825

29-
{#await promise}
26+
{#await true}
3027
<div class="d"></div>
3128
{:catch error}
3229
<div class="e"></div>
3330
{/await}
3431

35-
{#await promise}
32+
{#await true}
3633
<div class="f"></div>
3734
{:then error}
3835
<div class="g"></div>

‎packages/svelte/tests/css/samples/general-siblings-combinator-await/_config.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@ export default test({
55
{
66
code: 'css_unused_selector',
77
message: 'Unused CSS selector ".b ~ .c"',
8-
start: { character: 269, column: 1, line: 15 },
9-
end: { character: 276, column: 8, line: 15 }
8+
start: { character: 217, column: 1, line: 13 },
9+
end: { character: 224, column: 8, line: 13 }
1010
},
1111
{
1212
code: 'css_unused_selector',
1313
message: 'Unused CSS selector ".c ~ .d"',
14-
start: { character: 296, column: 1, line: 16 },
15-
end: { character: 303, column: 8, line: 16 }
14+
start: { character: 242, column: 1, line: 14 },
15+
end: { character: 249, column: 8, line: 14 }
1616
},
1717
{
1818
code: 'css_unused_selector',
1919
message: 'Unused CSS selector ".b ~ .d"',
20-
start: { character: 323, column: 1, line: 17 },
21-
end: { character: 330, column: 8, line: 17 }
20+
start: { character: 267, column: 1, line: 15 },
21+
end: { character: 274, column: 8, line: 15 }
2222
}
2323
]
2424
});

‎packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
.a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
88

99
/* no match */
10-
/* (unused) .b ~ .c { color: green; }*/
11-
/* (unused) .c ~ .d { color: green; }*/
12-
/* (unused) .b ~ .d { color: green; }*/
10+
/* (unused) .b ~ .c { color: red; }*/
11+
/* (unused) .c ~ .d { color: red; }*/
12+
/* (unused) .b ~ .d { color: red; }*/

‎packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<div class="a svelte-xyz"></div>
2-
<div class="b svelte-xyz"></div>
3-
<div class="e svelte-xyz"></div>
2+
<div class="c svelte-xyz"></div>
3+
<div class="e svelte-xyz"></div>

‎packages/svelte/tests/css/samples/general-siblings-combinator-await/input.svelte

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
<script>
2-
let promise = Promise.resolve();
3-
</script>
1+
42

53
<style>
64
.a ~ .b { color: green; }
@@ -12,14 +10,15 @@
1210
.a ~ .e { color: green; }
1311
1412
/* no match */
15-
.b ~ .c { color: green; }
16-
.c ~ .d { color: green; }
17-
.b ~ .d { color: green; }
13+
.b ~ .c { color: red; }
14+
.c ~ .d { color: red; }
15+
.b ~ .d { color: red; }
1816
</style>
1917

2018
<div class="a"></div>
2119

22-
{#await promise}
20+
<!-- non-promise, so that something renders initially -->
21+
{#await true}
2322
<div class="b"></div>
2423
{:then value}
2524
<div class="c"></div>

‎packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div class="a svelte-xyz"></div>
2-
<div class="d svelte-xyz"></div>
3-
<div class="f svelte-xyz"></div>
4-
<div class="h svelte-xyz"></div>
2+
<div class="b svelte-xyz"></div>
3+
<div class="g svelte-xyz"></div>
4+
<div class="h svelte-xyz"></div>

‎packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/input.svelte

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
<script>
2-
let promise = Promise.resolve();
3-
</script>
4-
51
<style>
62
.a + .b { color: green; }
73
.a + .c { color: green; }
@@ -20,21 +16,22 @@
2016

2117
<div class="a"></div>
2218

23-
{#await promise then value}
19+
<!-- non-promise, so that something renders initially -->
20+
{#await true then value}
2421
<div class="b"></div>
2522
{:catch error}
2623
<div class="c"></div>
2724
{/await}
2825

29-
{#await promise}
26+
{#await true}
3027
<div class="d"></div>
3128
{:catch error}
3229
<div class="e"></div>
3330
{/await}
3431

35-
{#await promise}
32+
{#await true}
3633
<div class="f"></div>
37-
{:then error}
34+
{:then value}
3835
<div class="g"></div>
3936
{/await}
4037

0 commit comments

Comments
 (0)