onPopState() — astro Function Reference

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

Function typescript CoreAstro RenderingEngine calls 2

Entity Profile

CoreAstro→ RenderingEngine→ onPopState() — astro Function Reference

Dependency Diagram

graph TD
  aad39bf4_3804_f21c_99b5_906d119040a5["onPopState()"]
  2b5c33e2_176e_e839_f05f_7f10493f4f74["router.ts"]
  aad39bf4_3804_f21c_99b5_906d119040a5 -->|defined in| 2b5c33e2_176e_e839_f05f_7f10493f4f74
  3b2e9589_83d6_19e2_100c_4c1b800e1d48["transitionEnabledOnThisPage()"]
  aad39bf4_3804_f21c_99b5_906d119040a5 -->|calls| 3b2e9589_83d6_19e2_100c_4c1b800e1d48
  6b23b6bb_d4a4_83cb_3896_2e31c0316793["transition()"]
  aad39bf4_3804_f21c_99b5_906d119040a5 -->|calls| 6b23b6bb_d4a4_83cb_3896_2e31c0316793
  style aad39bf4_3804_f21c_99b5_906d119040a5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/transitions/router.ts lines 595–616

function onPopState(ev: PopStateEvent) {
	if (!transitionEnabledOnThisPage() && ev.state) {
		// The current page doesn't have View Transitions enabled
		// but the page we navigate to does (because it set the state).
		// Do a full page refresh to reload the client-side router from the new page.
		location.reload();
		return;
	}

	// History entries without state are created by the browser (e.g. for hash links)
	// Our view transition entries always have state.
	// Just ignore stateless entries.
	// The browser will handle navigation fine without our help
	if (ev.state === null) {
		return;
	}
	const state: State = history.state;
	const nextIndex = state.index;
	const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
	currentHistoryIndex = nextIndex;
	transition(direction, originalLocation, new URL(location.href), {}, state);
}