transition() — astro Function Reference

Source Code

packages/astro/src/transitions/router.ts lines 340–575

async function transition(
	direction: Direction,
	from: URL,
	to: URL,
	options: Options,
	historyState?: State,
) {
	// The most recent navigation always has precedence
	// Yes, there can be several navigation instances as the user can click links
	// while we fetch content or simulate view transitions. Even synchronous creations are possible
	// e.g. by calling navigate() from an transition event.
	// Invariant: all but the most recent navigation are already aborted.

	const currentNavigation = abortAndRecreateMostRecentNavigation();

	// not ours
	if (!transitionEnabledOnThisPage() || location.origin !== to.origin) {
		if (currentNavigation === mostRecentNavigation) mostRecentNavigation = undefined;
		location.href = to.href;
		return;
	}

	const navigationType = historyState
		? 'traverse'
		: options.history === 'replace'
			? 'replace'
			: 'push';

	if (navigationType !== 'traverse') {
		updateScrollPosition({ scrollX, scrollY });
	}
	if (samePage(from, to) && !options.formData) {
		if ((direction !== 'back' && to.hash) || (direction === 'back' && from.hash)) {
			moveToLocation(to, from, options, document.title, historyState);
			if (currentNavigation === mostRecentNavigation) mostRecentNavigation = undefined;
			return;
		}
	}

	const prepEvent = await doPreparation(
		from,
		to,
		direction,
		navigationType,
		options.sourceElement,
		options.info,
		currentNavigation!.controller.signal,
		options.formData,
		defaultLoader,
	);
	if (prepEvent.defaultPrevented || prepEvent.signal.aborted) {
		if (currentNavigation === mostRecentNavigation) mostRecentNavigation = undefined;
		if (!prepEvent.signal.aborted) {
			// not aborted -> delegate to browser
			location.href = to.href;
		}
		// and / or exit
		return;
	}

	async function defaultLoader(preparationEvent: TransitionBeforePreparationEvent) {
		const href = preparationEvent.to.href;
		const init: RequestInit = { signal: preparationEvent.signal };
		if (preparationEvent.formData) {
			init.method = 'POST';
			const form =
				preparationEvent.sourceElement instanceof HTMLFormElement
					? preparationEvent.sourceElement
					: preparationEvent.sourceElement instanceof HTMLElement &&
							'form' in preparationEvent.sourceElement
						? (preparationEvent.sourceElement.form as HTMLFormElement)
						: preparationEvent.sourceElement?.closest('form');
			// Form elements without enctype explicitly set default to application/x-www-form-urlencoded.
			// In order to maintain compatibility with Astro 4.x, we need to check the value of enctype
			// on the attributes property rather than accessing .enctype directly. Astro 5.x may
			// introduce defaulting to application/x-www-form-urlencoded as a breaking change, and then
			// we can access .enctype directly.
			//
			// Note: getNamedItem can return null in real life, even if TypeScript doesn't think so, hence
			// the ?.
			init.body =