createViewportIntersectionObserver() — astro Function Reference

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

Function typescript CoreAstro RenderingEngine calls 1 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ createViewportIntersectionObserver() — astro Function Reference

Dependency Diagram

graph TD
  41ad7978_6a9c_8215_6479_75ce204d7cbd["createViewportIntersectionObserver()"]
  315e53ea_6d34_137c_ce5c_8c89aca90db9["index.ts"]
  41ad7978_6a9c_8215_6479_75ce204d7cbd -->|defined in| 315e53ea_6d34_137c_ce5c_8c89aca90db9
  8c99d8e4_b1d5_84e4_ba47_c797c9e87ba9["initViewportStrategy()"]
  8c99d8e4_b1d5_84e4_ba47_c797c9e87ba9 -->|calls| 41ad7978_6a9c_8215_6479_75ce204d7cbd
  1502f987_7806_fcef_2f8e_55d799080686["prefetch()"]
  41ad7978_6a9c_8215_6479_75ce204d7cbd -->|calls| 1502f987_7806_fcef_2f8e_55d799080686
  style 41ad7978_6a9c_8215_6479_75ce204d7cbd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/prefetch/index.ts lines 144–174

function createViewportIntersectionObserver() {
	const timeouts = new WeakMap<HTMLAnchorElement, number>();

	return new IntersectionObserver((entries, observer) => {
		for (const entry of entries) {
			const anchor = entry.target as HTMLAnchorElement;
			const timeout = timeouts.get(anchor);
			// Prefetch if intersecting
			if (entry.isIntersecting) {
				// Debounce viewport prefetches by 300ms
				if (timeout) {
					clearTimeout(timeout);
				}
				timeouts.set(
					anchor,
					setTimeout(() => {
						observer.unobserve(anchor);
						timeouts.delete(anchor);
						prefetch(anchor.href);
					}, 300) as unknown as number,
				);
			} else {
				// If exited viewport but haven't prefetched, cancel it
				if (timeout) {
					clearTimeout(timeout);
					timeouts.delete(anchor);
				}
			}
		}
	});
}