Fix nested astro-island hydration race condition (#7197)

This commit is contained in:
Bjorn Lu 2023-06-06 17:39:25 +08:00 committed by GitHub
parent 64b2b65410
commit d72cfa7cad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 3 deletions

View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix nested astro-island hydration race condition

View file

@ -53,7 +53,8 @@ declare const Astro: {
// Wait with a mutation observer
new MutationObserver((_, mo) => {
mo.disconnect();
this.childrenConnectedCallback();
// Wait until the next macrotask to ensure children are really rendered
setTimeout(() => this.childrenConnectedCallback(), 0);
}).observe(this, { childList: true });
}
}
@ -98,7 +99,11 @@ declare const Astro: {
hydrate = () => {
if (
!this.hydrator ||
(this.parentElement && this.parentElement.closest('astro-island[ssr]'))
// Make sure the island is mounted on the DOM before hydrating. It could be unmounted
// when the parent island hydrates and re-creates this island.
!this.isConnected ||
// Wait for parent island to hydrate first so we hydrate top-down.
this.parentElement?.closest('astro-island[ssr]')
) {
return;
}
@ -129,7 +134,7 @@ declare const Astro: {
window.dispatchEvent(new CustomEvent('astro:hydrate'));
};
attributeChangedCallback() {
if (this.hydrator) this.hydrate();
this.hydrate();
}
}
);

View file

@ -69,6 +69,7 @@ export default async function prebuild(...args) {
sourcefile: filepath,
},
format: 'iife',
target: ['es2018'],
minify,
bundle: true,
write: false,