mediaDirective() — astro Function Reference

Architecture documentation for the mediaDirective() function in media.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ mediaDirective() — astro Function Reference

Dependency Diagram

graph TD
  4ab36ac9_9a9d_2b78_d3dc_dc511e78cd69["mediaDirective()"]
  01ab2549_4bc5_bedb_64e4_2c6dea668e57["media.ts"]
  4ab36ac9_9a9d_2b78_d3dc_dc511e78cd69 -->|defined in| 01ab2549_4bc5_bedb_64e4_2c6dea668e57
  style 4ab36ac9_9a9d_2b78_d3dc_dc511e78cd69 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/media.ts lines 6–20

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

	if (options.value) {
		const mql = matchMedia(options.value);
		if (mql.matches) {
			cb();
		} else {
			mql.addEventListener('change', cb, { once: true });
		}
	}
};