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
});

0 commit comments

Comments
 (0)