swapBodyElement() — astro Function Reference

Architecture documentation for the swapBodyElement() function in swap-functions.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 3 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ swapBodyElement() — astro Function Reference

Dependency Diagram

graph TD
  3d1986b3_a5c3_1ecd_66e2_b7d4e1f116b2["swapBodyElement()"]
  12084e8e_15f3_27ac_8f8b_d442375ff33d["swap-functions.ts"]
  3d1986b3_a5c3_1ecd_66e2_b7d4e1f116b2 -->|defined in| 12084e8e_15f3_27ac_8f8b_d442375ff33d
  af9df8a2_d80a_7f14_9281_908d8b85f14f["swap()"]
  af9df8a2_d80a_7f14_9281_908d8b85f14f -->|calls| 3d1986b3_a5c3_1ecd_66e2_b7d4e1f116b2
  a0484c86_a5ad_d0be_c721_d084aadc950b["shouldCopyProps()"]
  3d1986b3_a5c3_1ecd_66e2_b7d4e1f116b2 -->|calls| a0484c86_a5ad_d0be_c721_d084aadc950b
  3befea5e_8217_7a6a_e774_983c2d7dbae6["isSameProps()"]
  3d1986b3_a5c3_1ecd_66e2_b7d4e1f116b2 -->|calls| 3befea5e_8217_7a6a_e774_983c2d7dbae6
  917fd60c_49ef_0698_5ba7_d23f06fc5c08["attachShadowRoots()"]
  3d1986b3_a5c3_1ecd_66e2_b7d4e1f116b2 -->|calls| 917fd60c_49ef_0698_5ba7_d23f06fc5c08
  style 3d1986b3_a5c3_1ecd_66e2_b7d4e1f116b2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/transitions/swap-functions.ts lines 73–98

export function swapBodyElement(newElement: Element, oldElement: Element) {
	// this will reset scroll Position
	oldElement.replaceWith(newElement);

	for (const el of oldElement.querySelectorAll(`[${PERSIST_ATTR}]`)) {
		const id = el.getAttribute(PERSIST_ATTR);
		const newEl = newElement.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);
			// For islands, copy over the props to allow them to re-render
			if (
				newEl.localName === 'astro-island' &&
				shouldCopyProps(el as HTMLElement) &&
				!isSameProps(el, newEl)
			) {
				el.setAttribute('ssr', '');
				el.setAttribute('props', newEl.getAttribute('props')!);
			}
		}
	}

	// This will upgrade any Declarative Shadow DOM in the new body.
	attachShadowRoots(newElement);
}