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

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,26 @@ export default test({
55
{
66
code: 'css_unused_selector',
77
message: 'Unused CSS selector ".a + .e"',
8-
start: { character: 242, column: 1, line: 14 },
9-
end: { character: 249, column: 8, line: 14 }
8+
start: { character: 188, column: 1, line: 10 },
9+
end: { character: 195, column: 8, line: 10 }
1010
},
1111
{
1212
code: 'css_unused_selector',
1313
message: 'Unused CSS selector ".b + .c"',
14-
start: { character: 269, column: 1, line: 15 },
15-
end: { character: 276, column: 8, line: 15 }
14+
start: { character: 213, column: 1, line: 11 },
15+
end: { character: 220, column: 8, line: 11 }
1616
},
1717
{
1818
code: 'css_unused_selector',
1919
message: 'Unused CSS selector ".c + .d"',
20-
start: { character: 296, column: 1, line: 16 },
21-
end: { character: 303, column: 8, line: 16 }
20+
start: { character: 238, column: 1, line: 12 },
21+
end: { character: 245, column: 8, line: 12 }
2222
},
2323
{
2424
code: 'css_unused_selector',
2525
message: 'Unused CSS selector ".b + .d"',
26-
start: { character: 323, column: 1, line: 17 },
27-
end: { character: 330, column: 8, line: 17 }
26+
start: { character: 263, column: 1, line: 13 },
27+
end: { character: 270, column: 8, line: 13 }
2828
}
2929
]
3030
});

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

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

88
/* no match */
9-
/* (unused) .a + .e { color: green; }*/
10-
/* (unused) .b + .c { color: green; }*/
11-
/* (unused) .c + .d { color: green; }*/
12-
/* (unused) .b + .d { color: green; }*/
9+
/* (unused) .a + .e { color: red; }*/
10+
/* (unused) .b + .c { color: red; }*/
11+
/* (unused) .c + .d { color: red; }*/
12+
/* (unused) .b + .d { color: red; }*/

‎packages/svelte/tests/css/samples/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/siblings-combinator-await/input.svelte

Lines changed: 6 additions & 9 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; }
@@ -11,15 +7,16 @@
117
.d + .e { color: green; }
128
139
/* no match */
14-
.a + .e { color: green; }
15-
.b + .c { color: green; }
16-
.c + .d { color: green; }
17-
.b + .d { color: green; }
10+
.a + .e { color: red; }
11+
.b + .c { color: red; }
12+
.c + .d { color: red; }
13+
.b + .d { color: red; }
1814
</style>
1915

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

22-
{#await promise}
18+
<!-- non-promise, so that something renders initially -->
19+
{#await true}
2320
<div class="b"></div>
2421
{:then value}
2522
<div class="c"></div>

‎packages/svelte/tests/runtime-legacy/samples/await-block-func-function/_config.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ export default test({
77
};
88
},
99

10-
html: `
11-
Waiting...
12-
`,
13-
1410
async test({ assert, component, target }) {
1511
await (component.thePromise = Promise.resolve({ func: 12345 }));
1612

‎packages/svelte/tests/runtime-legacy/samples/await-catch-no-expression/_config.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,6 @@ export default test({
1313
return { thePromise: deferred.promise };
1414
},
1515

16-
html: `
17-
<br />
18-
<p>the promise is pending</p>
19-
`,
20-
2116
async test({ assert, component, target }) {
2217
deferred.resolve(42);
2318

@@ -27,6 +22,7 @@ export default test({
2722

2823
deferred = create_deferred();
2924
component.thePromise = deferred.promise;
25+
await Promise.resolve();
3026

3127
assert.htmlEqual(target.innerHTML, '<br /><p>the promise is pending</p>');
3228

‎packages/svelte/tests/runtime-legacy/samples/await-conservative-update/_config.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@ import { test } from '../../test';
22
import { sleep } from './sleep.js';
33

44
export default test({
5-
html: `
6-
<p>loading...</p>
7-
`,
8-
95
test({ assert, target }) {
106
return sleep(50).then(() => {
117
assert.htmlEqual(

‎packages/svelte/tests/runtime-legacy/samples/await-containing-if/_config.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,6 @@ export default test({
1313
return { thePromise: deferred.promise, show: true };
1414
},
1515

16-
html: `
17-
<div><p>loading...</p></div>
18-
`,
19-
2016
test({ assert, component, target }) {
2117
deferred.resolve(42);
2218

‎packages/svelte/tests/runtime-legacy/samples/await-in-each/_config.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@ export default test({
1919
return { items };
2020
},
2121

22-
html: `
23-
<p>a title: loading...</p>
24-
`,
25-
2622
test({ assert, target }) {
2723
fulfil(42);
2824

‎packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/_config.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { test } from '../../test';
22

33
export default test({
4-
html: 'Loading...',
54
async test({ assert, component, target }) {
65
await component.test();
76

‎packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous-reactive/_config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { test } from '../../test';
22

33
export default test({
4-
html: '<p>wait for it...</p>',
54
test({ assert, component, target }) {
6-
return component.promise.then(async () => {
5+
return component.promise.then(() => {
76
assert.htmlEqual(
87
target.innerHTML,
98
`

‎packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous/_config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export default test({
77
});
88

99
component.promise = promise;
10+
await Promise.resolve();
1011

1112
assert.htmlEqual(target.innerHTML, '<p>wait for it...</p>');
1213

‎packages/svelte/tests/runtime-legacy/samples/await-then-blowback-reactive/_config.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { ok, test } from '../../test';
33

44
export default test({
55
async test({ assert, component, target }) {
6-
assert.htmlEqual(target.innerHTML, 'Loading...');
7-
86
await component.promise;
97
await Promise.resolve();
108
const span = target.querySelector('span');

‎packages/svelte/tests/runtime-legacy/samples/await-then-catch-anchor/_config.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,11 @@ export default test({
1313
return { thePromise: deferred.promise };
1414
},
1515

16-
html: `
17-
<div><p>loading...</p></div>
18-
`,
19-
2016
test({ assert, component, target }) {
2117
deferred.resolve(42);
2218

2319
return deferred.promise
24-
.then(() => {
20+
.then(async () => {
2521
assert.htmlEqual(
2622
target.innerHTML,
2723
`
@@ -32,6 +28,7 @@ export default test({
3228
deferred = create_deferred();
3329

3430
component.thePromise = deferred.promise;
31+
await Promise.resolve();
3532

3633
assert.htmlEqual(target.innerHTML, '<div><p>loading...</p></div>');
3734

‎packages/svelte/tests/runtime-legacy/samples/await-then-catch-event/_config.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,6 @@ export default test({
1515
};
1616
},
1717

18-
html: `
19-
<p>loading...</p>
20-
`,
21-
2218
test({ assert, component, target, window }) {
2319
deferred.resolve(42);
2420

0 commit comments

Comments
 (0)