diff options
| author |  Artem Zhirov <mail@azhirov.ru>
| 2024-09-17 19:23:48 +0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2024-09-17 16:23:48 +0200 |
| commit | 0b59fe74d5922c572007572ddca8d11482e2fb5c (patch) | |
| tree | 736af204566b31fa4609ec9f49e367c55d810e62 | |
| parent | 00ea675409229048d52fe87aea256729aa4e89b9 (diff) | |
| download | astro-0b59fe74d5922c572007572ddca8d11482e2fb5c.tar.gz astro-0b59fe74d5922c572007572ddca8d11482e2fb5c.tar.zst astro-0b59fe74d5922c572007572ddca8d11482e2fb5c.zip | |
Fix: prevent island re-rendering when using transition:persist (#11854) (#11915)
https://github.com/withastro/astro/issues/11854
| -rw-r--r-- | .changeset/seven-bees-love.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/transitions/swap-functions.ts | 10 |
2 files changed, 14 insertions, 1 deletions
diff --git a/.changeset/seven-bees-love.md b/.changeset/seven-bees-love.md new file mode 100644 index 000000000..f1305c982 --- /dev/null +++ b/.changeset/seven-bees-love.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix: prevent island from re-rendering when using transition:persist (#11854) diff --git a/packages/astro/src/transitions/swap-functions.ts b/packages/astro/src/transitions/swap-functions.ts index e2d8557f5..c99de8d3d 100644 --- a/packages/astro/src/transitions/swap-functions.ts +++ b/packages/astro/src/transitions/swap-functions.ts @@ -77,7 +77,11 @@ export function swapBodyElement(newElement: Element, oldElement: Element) { // from the old page so that state is preserved. newEl.replaceWith(el); // For islands, copy over the props to allow them to re-render - if (newEl.localName === 'astro-island' && shouldCopyProps(el as HTMLElement)) { + if ( + newEl.localName === 'astro-island' && + shouldCopyProps(el as HTMLElement) && + !isSameProps(el, newEl) + ) { el.setAttribute('ssr', ''); el.setAttribute('props', newEl.getAttribute('props')!); } @@ -133,6 +137,10 @@ const shouldCopyProps = (el: HTMLElement): boolean => { return persistProps == null || persistProps === 'false'; }; +const isSameProps = (oldEl: Element, newEl: Element) => { + return oldEl.getAttribute('props') === newEl.getAttribute('props'); +}; + export const swapFunctions = { deselectScripts, swapRootAttributes, |