diff options
| author |  Bjorn Lu <bjornlu.dev@gmail.com>
| 2023-06-06 17:39:25 +0800 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-06-06 17:39:25 +0800 |
| commit | d72cfa7cad758192163712ceb269405659fd14bc (patch) | |
| tree | a8921fd1967a75e29e5081a2cab32755de6df71c | |
| parent | 64b2b654109cda3dfdefec5104682eb96aaaead3 (diff) | |
| download | astro-d72cfa7cad758192163712ceb269405659fd14bc.tar.gz astro-d72cfa7cad758192163712ceb269405659fd14bc.tar.zst astro-d72cfa7cad758192163712ceb269405659fd14bc.zip | |
Fix nested astro-island hydration race condition (#7197)
| -rw-r--r-- | .changeset/light-sheep-hunt.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/runtime/server/astro-island.ts | 11 | ||||
| -rw-r--r-- | scripts/cmd/prebuild.js | 1 |
3 files changed, 14 insertions, 3 deletions
diff --git a/.changeset/light-sheep-hunt.md b/.changeset/light-sheep-hunt.md new file mode 100644 index 000000000..a32ab2d44 --- /dev/null +++ b/.changeset/light-sheep-hunt.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix nested astro-island hydration race condition diff --git a/packages/astro/src/runtime/server/astro-island.ts b/packages/astro/src/runtime/server/astro-island.ts index 60db5b6b1..b24e6c0be 100644 --- a/packages/astro/src/runtime/server/astro-island.ts +++ b/packages/astro/src/runtime/server/astro-island.ts @@ -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(); } } ); diff --git a/scripts/cmd/prebuild.js b/scripts/cmd/prebuild.js index 99208a29f..305298f72 100644 --- a/scripts/cmd/prebuild.js +++ b/scripts/cmd/prebuild.js @@ -69,6 +69,7 @@ export default async function prebuild(...args) { sourcefile: filepath, }, format: 'iife', + target: ['es2018'], minify, bundle: true, write: false, |