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 // Wait with a mutation observer
new MutationObserver((_, mo) => { new MutationObserver((_, mo) => {
mo.disconnect(); mo.disconnect();
this.childrenConnectedCallback(); // Wait until the next macrotask to ensure children are really rendered
setTimeout(() => this.childrenConnectedCallback(), 0);
}).observe(this, { childList: true }); }).observe(this, { childList: true });
} }
} }
@ -98,7 +99,11 @@ declare const Astro: {
hydrate = () => { hydrate = () => {
if ( if (
!this.hydrator || !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; return;
} }
@ -129,7 +134,7 @@ declare const Astro: {
window.dispatchEvent(new CustomEvent('astro:hydrate')); window.dispatchEvent(new CustomEvent('astro:hydrate'));
}; };
attributeChangedCallback() { attributeChangedCallback() {
if (this.hydrator) this.hydrate(); this.hydrate();
} }
} }
); );

View file

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