visibleDirective() — astro Function Reference

Architecture documentation for the visibleDirective() function in visible.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ visibleDirective() — astro Function Reference

Dependency Diagram

graph TD
  87a8d8d4_7fe1_5dd4_682a_6e1c1613290b["visibleDirective()"]
  37aa8300_5daa_9e08_6eed_8c19ecdbf4a1["visible.ts"]
  87a8d8d4_7fe1_5dd4_682a_6e1c1613290b -->|defined in| 37aa8300_5daa_9e08_6eed_8c19ecdbf4a1
  style 87a8d8d4_7fe1_5dd4_682a_6e1c1613290b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/visible.ts lines 9–35

const visibleDirective: ClientDirective = (load, options, el) => {
	const cb = async () => {
		const hydrate = await load();
		await hydrate();
	};

	const rawOptions =
		typeof options.value === 'object' ? (options.value as ClientVisibleOptions) : undefined;

	const ioOptions: IntersectionObserverInit = {
		rootMargin: rawOptions?.rootMargin,
	};

	const io = new IntersectionObserver((entries) => {
		for (const entry of entries) {
			if (!entry.isIntersecting) continue;
			// As soon as we hydrate, disconnect this IntersectionObserver for every `astro-island`
			io.disconnect();
			cb();
			break; // break loop on first match
		}
	}, ioOptions);

	for (const child of el.children) {
		io.observe(child);
	}
};