updateDOM() — astro Function Reference

Architecture documentation for the updateDOM() function in router.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 1 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ updateDOM() — astro Function Reference

Dependency Diagram

graph TD
  62bdb204_6184_ebff_415b_317982b36093["updateDOM()"]
  2b5c33e2_176e_e839_f05f_7f10493f4f74["router.ts"]
  62bdb204_6184_ebff_415b_317982b36093 -->|defined in| 2b5c33e2_176e_e839_f05f_7f10493f4f74
  6b23b6bb_d4a4_83cb_3896_2e31c0316793["transition()"]
  6b23b6bb_d4a4_83cb_3896_2e31c0316793 -->|calls| 62bdb204_6184_ebff_415b_317982b36093
  e109865a_50f0_f5e3_9564_1b171d3ba481["moveToLocation()"]
  62bdb204_6184_ebff_415b_317982b36093 -->|calls| e109865a_50f0_f5e3_9564_1b171d3ba481
  style 62bdb204_6184_ebff_415b_317982b36093 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/transitions/router.ts lines 274–331

async function updateDOM(
	preparationEvent: TransitionBeforePreparationEvent,
	options: Options,
	currentTransition: Transition,
	historyState?: State,
	fallback?: Fallback,
) {
	async function animate(phase: string) {
		function isInfinite(animation: Animation) {
			const effect = animation.effect;
			if (!effect || !(effect instanceof KeyframeEffect) || !effect.target) return false;
			const style = window.getComputedStyle(effect.target, effect.pseudoElement);
			return style.animationIterationCount === 'infinite';
		}
		const currentAnimations = document.getAnimations();
		// Trigger view transition animations waiting for data-astro-transition-fallback
		document.documentElement.setAttribute(OLD_NEW_ATTR, phase);
		const nextAnimations = document.getAnimations();
		const newAnimations = nextAnimations.filter(
			(a) => !currentAnimations.includes(a) && !isInfinite(a),
		);
		// Wait for all new animations to finish (resolved or rejected).
		// Do not reject on canceled ones.
		return Promise.allSettled(newAnimations.map((a) => a.finished));
	}

	const animateFallbackOld = async () => {
		if (
			fallback === 'animate' &&
			!currentTransition.transitionSkipped &&
			!preparationEvent.signal.aborted
		) {
			try {
				await animate('old');
			} catch {
				// animate might reject as a consequence of a call to skipTransition()
				// ignored on purpose
			}
		}
	};

	const pageTitleForBrowserHistory = document.title; // document.title will be overridden by swap()
	const swapEvent = await doSwap(
		preparationEvent,
		currentTransition.viewTransition!,
		animateFallbackOld,
	);
	moveToLocation(swapEvent.to, swapEvent.from, options, pageTitleForBrowserHistory, historyState);
	triggerEvent(TRANSITION_AFTER_SWAP);

	if (fallback === 'animate') {
		if (!currentTransition.transitionSkipped && !swapEvent.signal.aborted) {
			animate('new').finally(() => currentTransition.viewTransitionFinished!());
		} else {
			currentTransition.viewTransitionFinished!();
		}
	}
}