astro/dist/runtime/client/media.js

Astro is a modern site builder with web best practices, performance, and DX front-of-mind.

/**
* Hydrate this component when a matching media query is found
*/
const mediaDirective = (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 });
		}
	}
};
export default mediaDirective;