MediaQuery Class — svelte Architecture
Architecture documentation for the MediaQuery class in index.d.ts from the svelte codebase.
Entity Profile
Dependency Diagram
graph TD 51cef591_be25_354c_b08f_797e781df111["MediaQuery"] 6bd9d090_a582_e05c_669e_d53d4e7245f2["index.d.ts"] 51cef591_be25_354c_b08f_797e781df111 -->|defined in| 6bd9d090_a582_e05c_669e_d53d4e7245f2 afaaf805_dd8b_5d58_7668_365b7e43f7f2["set()"] 51cef591_be25_354c_b08f_797e781df111 -->|method| afaaf805_dd8b_5d58_7668_365b7e43f7f2 ed27ac89_6b00_92b0_07ec_21fa22ebded6["subscribe()"] 51cef591_be25_354c_b08f_797e781df111 -->|method| ed27ac89_6b00_92b0_07ec_21fa22ebded6 b975324f_fd26_bc7c_a1ef_08ec547b623f["constructor()"] 51cef591_be25_354c_b08f_797e781df111 -->|method| b975324f_fd26_bc7c_a1ef_08ec547b623f 5ba0525f_6468_9181_a406_45aa0601050f["of()"] 51cef591_be25_354c_b08f_797e781df111 -->|method| 5ba0525f_6468_9181_a406_45aa0601050f c0c87dc0_ffa1_a611_feae_ddfdd9868269["current()"] 51cef591_be25_354c_b08f_797e781df111 -->|method| c0c87dc0_ffa1_a611_feae_ddfdd9868269 fda52368_88b6_5ac0_e74c_11e6e2d9cbf0["update()"] 51cef591_be25_354c_b08f_797e781df111 -->|method| fda52368_88b6_5ac0_e74c_11e6e2d9cbf0 0881bc9b_dbf9_5510_c4e1_b39cc61ed24c["spring()"] 51cef591_be25_354c_b08f_797e781df111 -->|method| 0881bc9b_dbf9_5510_c4e1_b39cc61ed24c 2785bf65_6b08_71f0_4535_4522f7ac573d["tweened()"] 51cef591_be25_354c_b08f_797e781df111 -->|method| 2785bf65_6b08_71f0_4535_4522f7ac573d b840d201_8fb8_9d91_f78e_f5e06b119cc8["target()"] 51cef591_be25_354c_b08f_797e781df111 -->|method| b840d201_8fb8_9d91_f78e_f5e06b119cc8
Relationship Graph
Source Code
packages/svelte/types/index.d.ts lines 1987–2204
declare module 'svelte/motion' {
import type { MediaQuery } from 'svelte/reactivity';
// TODO we do declaration merging here in order to not have a breaking change (renaming the Spring interface)
// this means both the Spring class and the Spring interface are merged into one with some things only
// existing on one side. In Svelte 6, remove the type definition and move the jsdoc onto the class in spring.js
export interface Spring<T> extends Readable<T> {
set(new_value: T, opts?: SpringUpdateOpts): Promise<void>;
/**
* @deprecated Only exists on the legacy `spring` store, not the `Spring` class
*/
update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
/**
* @deprecated Only exists on the legacy `spring` store, not the `Spring` class
*/
subscribe(fn: (value: T) => void): Unsubscriber;
precision: number;
damping: number;
stiffness: number;
}
/**
* A wrapper for a value that behaves in a spring-like fashion. Changes to `spring.target` will cause `spring.current` to
* move towards it over time, taking account of the `spring.stiffness` and `spring.damping` parameters.
*
* ```svelte
* <script>
* import { Spring } from 'svelte/motion';
*
* const spring = new Spring(0);
* </script>
*
* <input type="range" bind:value={spring.target} />
* <input type="range" bind:value={spring.current} disabled />
* ```
* @since 5.8.0
*/
export class Spring<T> {
constructor(value: T, options?: SpringOpts);
/**
* Create a spring whose value is bound to the return value of `fn`. This must be called
* inside an effect root (for example, during component initialisation).
*
* ```svelte
* <script>
* import { Spring } from 'svelte/motion';
*
* let { number } = $props();
*
* const spring = Spring.of(() => number);
* </script>
* ```
*/
static of<U>(fn: () => U, options?: SpringOpts): Spring<U>;
/**
* Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.
*
* If `options.instant` is `true`, `spring.current` immediately matches `spring.target`.
*
* If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for
* the specified number of milliseconds. This is useful for things like 'fling' gestures.
*/
set(value: T, options?: SpringUpdateOpts): Promise<void>;
damping: number;
precision: number;
stiffness: number;
/**
* The end value of the spring.
* This property only exists on the `Spring` class, not the legacy `spring` store.
*/
target: T;
/**
* The current value of the spring.
* This property only exists on the `Spring` class, not the legacy `spring` store.
*/
get current(): T;
}
Defined In
Source
Frequently Asked Questions
What is the MediaQuery class?
MediaQuery is a class in the svelte codebase, defined in packages/svelte/types/index.d.ts.
Where is MediaQuery defined?
MediaQuery is defined in packages/svelte/types/index.d.ts at line 1987.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free