michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix video persistence regression (#8271)

Browse source 
* Fix video persistence regression

* Adding a changeset
This commit is contained in:
Matthew Phillips 2023-08-29 15:46:06 -04:00 committed by GitHub
parent 834a00d2d3
commit 16f09dfff7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tame-knives-shake.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix video persistence regression

6
packages/astro/components/ViewTransitions.astro
View file

@ -165,18 +165,16 @@ const { fallback = 'animate' } = Astro.props as Props;
// Persist elements in the existing body // Persist elements in the existing body
const oldBody = document.body; const oldBody = document.body;
document.body.replaceWith(doc.body);
for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) { for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) {
const id = el.getAttribute(PERSIST_ATTR); const id = el.getAttribute(PERSIST_ATTR);
const newEl = doc.querySelector(`[${PERSIST_ATTR}="${id}"]`); const newEl = document.querySelector(`[${PERSIST_ATTR}="${id}"]`);
if (newEl) { if (newEl) {
// The element exists in the new page, replace it with the element // The element exists in the new page, replace it with the element
// from the old page so that state is preserved. // from the old page so that state is preserved.
newEl.replaceWith(el); 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 // Simulate scroll behavior of Safari and
// Chromium based browsers (Chrome, Edge, Opera, ...) // Chromium based browsers (Chrome, Edge, Opera, ...)

14
packages/astro/src/runtime/server/astro-island.ts
View file

@ -52,14 +52,8 @@ declare const Astro: {
public hydrator: any; public hydrator: any;
static observedAttributes = ['props']; static observedAttributes = ['props'];
disconnectedCallback() { disconnectedCallback() {
document.addEventListener( document.removeEventListener('astro:after-swap', this.unmount);
'astro:after-swap', document.addEventListener('astro:after-swap', this.unmount, { once: true });
() => {
// If element wasn't persisted, fire unmount event
if (!this.isConnected) this.dispatchEvent(new CustomEvent('astro:unmount'));
},
{ once: true }
);
} }
connectedCallback() { connectedCallback() {
if (!this.hasAttribute('await-children') || this.firstChild) { if (!this.hasAttribute('await-children') || this.firstChild) {
@ -176,6 +170,10 @@ declare const Astro: {
attributeChangedCallback() { attributeChangedCallback() {
this.hydrate(); this.hydrate();
} }
unmount = () => {
// If element wasn't persisted, fire unmount event
if (!this.isConnected) this.dispatchEvent(new CustomEvent('astro:unmount'));
}
} }
); );
} }