fix: prevent hydration error on async `{@html ...}` (#17999)

Fixes #17981
pull/17955/merge
Simon H 4 months ago committed by GitHub
parent 54ba176d2c
commit 669f6b45a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: prevent hydration error on async `{@html ...}`

@ -101,7 +101,7 @@ export function process_children(nodes, initial, is_element, context) {
if (is_static_element(node)) {
skipped += 1;
} else if (
node.type === 'EachBlock' &&
(node.type === 'EachBlock' || node.type === 'HtmlTag') &&
nodes.length === 1 &&
is_element &&
// In case it's wrapped in async the async logic will want to skip sibling nodes up until the end, hence we cannot make this controlled
@ -109,8 +109,6 @@ export function process_children(nodes, initial, is_element, context) {
!node.metadata.expression.is_async()
) {
node.metadata.is_controlled = true;
} else if (node.type === 'HtmlTag' && nodes.length === 1 && is_element) {
node.metadata.is_controlled = true;
} else {
const id = flush_node(
false,

@ -0,0 +1,10 @@
import { tick } from 'svelte';
import { test } from '../../test';
export default test({
mode: ['hydrate'],
async test({ assert, target }) {
await tick();
assert.htmlEqual(target.innerHTML, `<div><div><p>first test</p></div> other test</div>`);
}
});

@ -0,0 +1,14 @@
<script>
function firstTest() {
return Promise.resolve('<p>first test</p>');
}
function otherTest() {
return Promise.resolve('other test');
}
</script>
<div>
<div>{@html await firstTest()}</div>
{await otherTest()}
</div>
Loading…
Cancel
Save