Skip to content

Commit 85f2f16

Browse files
dummdidummdummdidumm
authored
chore: use queue_microtask on #await again (#12647)
Now that we've made `mount` and `hydrate` not call `flushSync` anymore, we can go back to using `queue_microtask` inside `#await`, which means people who want to synchronously see the pending block can do so using `flushSync` (as validated by our tests). This essentially reverts #12274
1 parent 32c4e47 commit 85f2f16

File tree

52 files changed

+272
-112
lines changed

Some content is hidden

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

52 files changed

+272
-112
lines changed

‎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-
Promise.resolve().then(() => {
142+
queue_micro_task(() => {
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="b svelte-xyz"></div>
3-
<div class="g svelte-xyz"></div>
4-
<div class="h svelte-xyz"></div>
2+
<div class="d svelte-xyz"></div>
3+
<div class="f 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: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<script>
2+
let promise = Promise.resolve();
3+
</script>
4+
15
<style>
26
.a ~ .b { color: green; }
37
.a ~ .c { color: green; }
@@ -16,20 +20,19 @@
1620

1721
<div class="a"></div>
1822

19-
<!-- non-promise, so that something renders initially -->
20-
{#await true then value}
23+
{#await promise then value}
2124
<div class="b"></div>
2225
{:catch error}
2326
<div class="c"></div>
2427
{/await}
2528

26-
{#await true}
29+
{#await promise}
2730
<div class="d"></div>
2831
{:catch error}
2932
<div class="e"></div>
3033
{/await}
3134

32-
{#await true}
35+
{#await promise}
3336
<div class="f"></div>
3437
{:then error}
3538
<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: 217, column: 1, line: 13 },
9-
end: { character: 224, column: 8, line: 13 }
8+
start: { character: 269, column: 1, line: 15 },
9+
end: { character: 276, column: 8, line: 15 }
1010
},
1111
{
1212
code: 'css_unused_selector',
1313
message: 'Unused CSS selector ".c ~ .d"',
14-
start: { character: 242, column: 1, line: 14 },
15-
end: { character: 249, column: 8, line: 14 }
14+
start: { character: 296, column: 1, line: 16 },
15+
end: { character: 303, column: 8, line: 16 }
1616
},
1717
{
1818
code: 'css_unused_selector',
1919
message: 'Unused CSS selector ".b ~ .d"',
20-
start: { character: 267, column: 1, line: 15 },
21-
end: { character: 274, column: 8, line: 15 }
20+
start: { character: 323, column: 1, line: 17 },
21+
end: { character: 330, column: 8, line: 17 }
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: red; }*/
11-
/* (unused) .c ~ .d { color: red; }*/
12-
/* (unused) .b ~ .d { color: red; }*/
10+
/* (unused) .b ~ .c { color: green; }*/
11+
/* (unused) .c ~ .d { color: green; }*/
12+
/* (unused) .b ~ .d { color: green; }*/

‎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="c svelte-xyz"></div>
3-
<div class="e svelte-xyz"></div>
2+
<div class="b svelte-xyz"></div>
3+
<div class="e svelte-xyz"></div>

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

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

35
<style>
46
.a ~ .b { color: green; }
@@ -10,15 +12,14 @@
1012
.a ~ .e { color: green; }
1113
1214
/* no match */
13-
.b ~ .c { color: red; }
14-
.c ~ .d { color: red; }
15-
.b ~ .d { color: red; }
15+
.b ~ .c { color: green; }
16+
.c ~ .d { color: green; }
17+
.b ~ .d { color: green; }
1618
</style>
1719

1820
<div class="a"></div>
1921

20-
<!-- non-promise, so that something renders initially -->
21-
{#await true}
22+
{#await promise}
2223
<div class="b"></div>
2324
{:then value}
2425
<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="b svelte-xyz"></div>
3-
<div class="g svelte-xyz"></div>
4-
<div class="h svelte-xyz"></div>
2+
<div class="d svelte-xyz"></div>
3+
<div class="f svelte-xyz"></div>
4+
<div class="h svelte-xyz"></div>

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

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

1721
<div class="a"></div>
1822

19-
<!-- non-promise, so that something renders initially -->
20-
{#await true then value}
23+
{#await promise then value}
2124
<div class="b"></div>
2225
{:catch error}
2326
<div class="c"></div>
2427
{/await}
2528

26-
{#await true}
29+
{#await promise}
2730
<div class="d"></div>
2831
{:catch error}
2932
<div class="e"></div>
3033
{/await}
3134

32-
{#await true}
35+
{#await promise}
3336
<div class="f"></div>
34-
{:then value}
37+
{:then error}
3538
<div class="g"></div>
3639
{/await}
3740

‎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: 188, column: 1, line: 10 },
9-
end: { character: 195, column: 8, line: 10 }
8+
start: { character: 242, column: 1, line: 14 },
9+
end: { character: 249, column: 8, line: 14 }
1010
},
1111
{
1212
code: 'css_unused_selector',
1313
message: 'Unused CSS selector ".b + .c"',
14-
start: { character: 213, column: 1, line: 11 },
15-
end: { character: 220, column: 8, line: 11 }
14+
start: { character: 269, column: 1, line: 15 },
15+
end: { character: 276, column: 8, line: 15 }
1616
},
1717
{
1818
code: 'css_unused_selector',
1919
message: 'Unused CSS selector ".c + .d"',
20-
start: { character: 238, column: 1, line: 12 },
21-
end: { character: 245, column: 8, line: 12 }
20+
start: { character: 296, column: 1, line: 16 },
21+
end: { character: 303, column: 8, line: 16 }
2222
},
2323
{
2424
code: 'css_unused_selector',
2525
message: 'Unused CSS selector ".b + .d"',
26-
start: { character: 263, column: 1, line: 13 },
27-
end: { character: 270, column: 8, line: 13 }
26+
start: { character: 323, column: 1, line: 17 },
27+
end: { character: 330, column: 8, line: 17 }
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: red; }*/
10-
/* (unused) .b + .c { color: red; }*/
11-
/* (unused) .c + .d { color: red; }*/
12-
/* (unused) .b + .d { color: red; }*/
9+
/* (unused) .a + .e { color: green; }*/
10+
/* (unused) .b + .c { color: green; }*/
11+
/* (unused) .c + .d { color: green; }*/
12+
/* (unused) .b + .d { color: green; }*/

‎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="c svelte-xyz"></div>
3-
<div class="e svelte-xyz"></div>
2+
<div class="b svelte-xyz"></div>
3+
<div class="e svelte-xyz"></div>

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<script>
2+
let promise = Promise.resolve();
3+
</script>
4+
15
<style>
26
.a + .b { color: green; }
37
.a + .c { color: green; }
@@ -7,16 +11,15 @@
711
.d + .e { color: green; }
812
913
/* no match */
10-
.a + .e { color: red; }
11-
.b + .c { color: red; }
12-
.c + .d { color: red; }
13-
.b + .d { color: red; }
14+
.a + .e { color: green; }
15+
.b + .c { color: green; }
16+
.c + .d { color: green; }
17+
.b + .d { color: green; }
1418
</style>
1519

1620
<div class="a"></div>
1721

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

‎packages/svelte/tests/css/test.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as fs from 'node:fs';
44
import { assert } from 'vitest';
55
import { compile_directory, try_read_file } from '../helpers.js';
66
import { assert_html_equal } from '../html_equal.js';
7-
import { mount, unmount } from 'svelte';
7+
import { flushSync, mount, unmount } from 'svelte';
88
import { suite, type BaseTest } from '../suite.js';
99
import type { CompileOptions, Warning } from '#compiler';
1010

@@ -60,6 +60,7 @@ const { test, run } = suite<CssTest>(async (config, cwd) => {
6060
const target = window.document.createElement('main');
6161

6262
const component = mount(ClientComponent, { props: config.props ?? {}, target });
63+
flushSync();
6364

6465
const html = target.innerHTML;
6566

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

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

10+
html: `
11+
Waiting...
12+
`,
13+
1014
async test({ assert, component, target }) {
1115
await (component.thePromise = Promise.resolve({ func: 12345 }));
1216

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

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

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

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

2328
deferred = create_deferred();
2429
component.thePromise = deferred.promise;
25-
await Promise.resolve();
2630

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

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

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

44
export default test({
5+
html: `
6+
<p>loading...</p>
7+
`,
8+
59
test({ assert, target }) {
610
return sleep(50).then(() => {
711
assert.htmlEqual(

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

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

16+
html: `
17+
<div><p>loading...</p></div>
18+
`,
19+
1620
test({ assert, component, target }) {
1721
deferred.resolve(42);
1822

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

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

22+
html: `
23+
<p>a title: loading...</p>
24+
`,
25+
2226
test({ assert, target }) {
2327
fulfil(42);
2428

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

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

33
export default test({
4+
html: 'Loading...',
45
async test({ assert, component, target }) {
56
await component.test();
67

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

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

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

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

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

99
component.promise = promise;
10-
await Promise.resolve();
1110

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

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

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

44
export default test({
55
async test({ assert, component, target }) {
6+
assert.htmlEqual(target.innerHTML, 'Loading...');
7+
68
await component.promise;
79
await Promise.resolve();
810
const span = target.querySelector('span');

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

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

16+
html: `
17+
<div><p>loading...</p></div>
18+
`,
19+
1620
test({ assert, component, target }) {
1721
deferred.resolve(42);
1822

1923
return deferred.promise
20-
.then(async () => {
24+
.then(() => {
2125
assert.htmlEqual(
2226
target.innerHTML,
2327
`
@@ -28,7 +32,6 @@ export default test({
2832
deferred = create_deferred();
2933

3034
component.thePromise = deferred.promise;
31-
await Promise.resolve();
3235

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

0 commit comments

Comments
 (0)