Home / Class/ MediaQuery Class — svelte Architecture

MediaQuery Class — svelte Architecture

Architecture documentation for the MediaQuery class in media-query.js from the svelte codebase.

Entity Profile

Dependency Diagram

graph TD
  1aea5f41_f788_1e74_9230_94ed8ed9ba5c["MediaQuery"]
  1d26e65a_8f51_acd9_1974_56655d57e188["media-query.js"]
  1aea5f41_f788_1e74_9230_94ed8ed9ba5c -->|defined in| 1d26e65a_8f51_acd9_1974_56655d57e188
  10b48c36_e2cf_aac5_20bf_b2b44da2ea4e["constructor()"]
  1aea5f41_f788_1e74_9230_94ed8ed9ba5c -->|method| 10b48c36_e2cf_aac5_20bf_b2b44da2ea4e

Relationship Graph

Source Code

packages/svelte/src/reactivity/media-query.js lines 37–55

export class MediaQuery extends ReactiveValue {
	/**
	 * @param {string} query A media query string
	 * @param {boolean} [fallback] Fallback value for the server
	 */
	constructor(query, fallback) {
		let final_query =
			parenthesis_regex.test(query) ||
			// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
			query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
				? query
				: `(${query})`;
		const q = window.matchMedia(final_query);
		super(
			() => q.matches,
			(update) => on(q, 'change', update)
		);
	}
}

Frequently Asked Questions

What is the MediaQuery class?
MediaQuery is a class in the svelte codebase, defined in packages/svelte/src/reactivity/media-query.js.
Where is MediaQuery defined?
MediaQuery is defined in packages/svelte/src/reactivity/media-query.js at line 37.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free