diff options
| -rw-r--r-- | .changeset/tame-knives-shake.md | 5 | ||||
| -rw-r--r-- | packages/astro/components/ViewTransitions.astro | 6 | ||||
| -rw-r--r-- | packages/astro/src/runtime/server/astro-island.ts | 14 |
3 files changed, 13 insertions, 12 deletions
diff --git a/.changeset/tame-knives-shake.md b/.changeset/tame-knives-shake.md new file mode 100644 index 000000000..3801de2b3 --- /dev/null +++ b/.changeset/tame-knives-shake.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix video persistence regression diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 15bad445d..0800b0033 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -165,18 +165,16 @@ const { fallback = 'animate' } = Astro.props as Props; // Persist elements in the existing body const oldBody = document.body; + document.body.replaceWith(doc.body); for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) { const id = el.getAttribute(PERSIST_ATTR); - const newEl = doc.querySelector(`[${PERSIST_ATTR}="${id}"]`); + const newEl = document.querySelector(`[${PERSIST_ATTR}="${id}"]`); if (newEl) { // The element exists in the new page, replace it with the element // from the old page so that state is preserved. newEl.replaceWith(el); } } - // Only replace the existing body *AFTER* persistent elements are moved over - // This avoids disconnecting `astro-island` nodes multiple times - document.body.replaceWith(doc.body); // Simulate scroll behavior of Safari and // Chromium based browsers (Chrome, Edge, Opera, ...) diff --git a/packages/astro/src/runtime/server/astro-island.ts b/packages/astro/src/runtime/server/astro-island.ts index 2c88f0373..b45bdcbdd 100644 --- a/packages/astro/src/runtime/server/astro-island.ts +++ b/packages/astro/src/runtime/server/astro-island.ts @@ -52,14 +52,8 @@ declare const Astro: { public hydrator: any; static observedAttributes = ['props']; disconnectedCallback() { - document.addEventListener( - 'astro:after-swap', - () => { - // If element wasn't persisted, fire unmount event - if (!this.isConnected) this.dispatchEvent(new CustomEvent('astro:unmount')); - }, - { once: true } - ); + document.removeEventListener('astro:after-swap', this.unmount); + document.addEventListener('astro:after-swap', this.unmount, { once: true }); } connectedCallback() { if (!this.hasAttribute('await-children') || this.firstChild) { @@ -176,6 +170,10 @@ declare const Astro: { attributeChangedCallback() { this.hydrate(); } + unmount = () => { + // If element wasn't persisted, fire unmount event + if (!this.isConnected) this.dispatchEvent(new CustomEvent('astro:unmount')); + } } ); } |