initHoverStrategy() — astro Function Reference

Architecture documentation for the initHoverStrategy() function in index.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 3 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ initHoverStrategy() — astro Function Reference

Dependency Diagram

graph TD
  90b6d96b_d7f2_cf1e_695c_fcf15d5c6440["initHoverStrategy()"]
  315e53ea_6d34_137c_ce5c_8c89aca90db9["index.ts"]
  90b6d96b_d7f2_cf1e_695c_fcf15d5c6440 -->|defined in| 315e53ea_6d34_137c_ce5c_8c89aca90db9
  6ed5ea2f_503c_fb78_a8ee_5c3ea9f2de4f["init()"]
  6ed5ea2f_503c_fb78_a8ee_5c3ea9f2de4f -->|calls| 90b6d96b_d7f2_cf1e_695c_fcf15d5c6440
  70bfc884_b3b0_e84b_4b73_06d369aade2b["elMatchesStrategy()"]
  90b6d96b_d7f2_cf1e_695c_fcf15d5c6440 -->|calls| 70bfc884_b3b0_e84b_4b73_06d369aade2b
  c855800f_f956_d749_63eb_d18456243299["onPageLoad()"]
  90b6d96b_d7f2_cf1e_695c_fcf15d5c6440 -->|calls| c855800f_f956_d749_63eb_d18456243299
  1502f987_7806_fcef_2f8e_55d799080686["prefetch()"]
  90b6d96b_d7f2_cf1e_695c_fcf15d5c6440 -->|calls| 1502f987_7806_fcef_2f8e_55d799080686
  style 90b6d96b_d7f2_cf1e_695c_fcf15d5c6440 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/prefetch/index.ts lines 74–122

function initHoverStrategy() {
	let timeout: number;

	// Handle focus listeners
	document.body.addEventListener(
		'focusin',
		(e) => {
			if (elMatchesStrategy(e.target, 'hover')) {
				handleHoverIn(e);
			}
		},
		{ passive: true },
	);
	document.body.addEventListener('focusout', handleHoverOut, { passive: true });

	// Handle hover listeners. Re-run each time on page load.
	onPageLoad(() => {
		for (const anchor of document.getElementsByTagName('a')) {
			// Skip if already listening
			if (listenedAnchors.has(anchor)) continue;
			// Add listeners for anchors matching the strategy
			if (elMatchesStrategy(anchor, 'hover')) {
				listenedAnchors.add(anchor);
				anchor.addEventListener('mouseenter', handleHoverIn, { passive: true });
				anchor.addEventListener('mouseleave', handleHoverOut, { passive: true });
			}
		}
	});

	function handleHoverIn(e: Event) {
		const href = (e.target as HTMLAnchorElement).href;

		// Debounce hover prefetches by 80ms
		if (timeout) {
			clearTimeout(timeout);
		}
		timeout = setTimeout(() => {
			prefetch(href);
		}, 80) as unknown as number;
	}

	// Cancel prefetch if the user hovers away
	function handleHoverOut() {
		if (timeout) {
			clearTimeout(timeout);
			timeout = 0;
		}
	}
}