SvelteRéférence

svelte/reactivity

Svelte fournit des versions réactives de différents utilitaires intégrés comme SvelteMap, SvelteSet et SvelteURL. Ces utilitaires peuvent être importés depuis svelte/reactivity et utilisés de la même manière que leurs équivalents natifs.

<script>
	import { SvelteURL } from 'svelte/reactivity';

	const url = new SvelteURL('https://example.com/path');
</script>

<!-- les changements de valeur de ces inputs... -->
<input bind:value={url.protocol} />
<input bind:value={url.hostname} />
<input bind:value={url.pathname} />

<hr />

<!-- vont mettre à jour `url` et vice-versa -->
<input bind:value={url.href} />

import {
	class MediaQueryCreates a media query and provides a current property that reflects whether or not it matches.
Use it carefully — during server-side rendering, there is no way to know what the correct value should be, potentially causing content to change upon hydration.
If you can use the media query in CSS to achieve the same effect, do that.
&#x3C;script>
	import { MediaQuery } from 'svelte/reactivity';

	const large = new MediaQuery('min-width: 800px');
&#x3C;/script>

&#x3C;h1>{large.current ? 'large screen' : 'small screen'}&#x3C;/h1>
@extendsReactiveValue<boolean> *
@since5.7.0MediaQuery,
	class SvelteDateSvelteDate,
	class SvelteMap<K, V>SvelteMap,
	class SvelteSet<T>SvelteSet,
	class SvelteURLSvelteURL,
	class SvelteURLSearchParamsSvelteURLSearchParams,
	function createSubscriber(start: (update: () => void) => (() => void) | void): () => voidReturns a subscribe function that, if called in an effect (including expressions in the template),
calls its start callback with an update function. Whenever update is called, the effect re-runs.
If start returns a function, it will be called when the effect is destroyed.
If subscribe is called in multiple effects, start will only be called once as long as the effects
are active, and the returned teardown function will only be called when all effects are destroyed.
It’s best understood with an example. Here’s an implementation of MediaQuery:
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}
@since5.7.0createSubscriber
} from 'svelte/reactivity';

MediaQuery

Disponible à partir de la version 5.7.0

Crée une media query et fournit une propriété current qui reflète si oui ou non celle-ci correspond.

Servez-vous en avec précaution — pendant le rendu côté serveur, il n’y a aucun moyen de connaître la valeur correcte, causant potentiellement des problèmes de contenu lors de l’hydratation. Si vous pouvez utiliser une media query en CSS pour obtenir le même résultat, faites-le.

<script>
	import { MediaQuery } from 'svelte/reactivity';

	const large = new MediaQuery('min-width: 800px');
</script>

<h1>{large.current ? 'écran large' : 'écran pas large'}</h1>

class MediaQuery extends ReactiveValue<boolean> {…}

constructor(query: string, fallback?: boolean | undefined);

query Une chaîne de caractères de media query
fallback Valeur de secours pour le serveur

SvelteDate

class SvelteDate extends Date {…}

constructor(...params: any[]);

#private;

SvelteMap

class SvelteMap<K, V> extends Map<K, V> {…}

constructor(value?: Iterable<readonly [K, V]> | null | undefined);

set(key: K, value: V): this;

#private;

SvelteSet

class SvelteSet<T> extends Set<T> {…}

constructor(value?: Iterable<T> | null | undefined);

add(value: T): this;

#private;

SvelteURL

class SvelteURL extends URL {…}

get searchParams(): SvelteURLSearchParams;

#private;

SvelteURLSearchParams

class SvelteURLSearchParams extends URLSearchParams {…}

[REPLACE](params: URLSearchParams): void;

#private;

createSubscriber

Disponible à partir de la version 5.7.0

Renvoie une fonction subscribe qui, si appelée dans un effet (incluant les expressions du template), appelle son callback start avec une fonction update. Chaque fois que update est appelée, l’effect sera rejoué.

Si start renvoie une fonction, celle-ci sera appelée lorsque l’effet sera détruit.

Si subscribe est appelée dans plusieurs effets, start ne sera appelé qu’une seule fois tant que les effets sont actifs, et la fonction de “destruction” renvoyée ne sera appelée que lorsque tous les effets concernées seront détruits.

On comprend mieux cette fonctionnalité avec un exemple. Voici l’implémentation de MediaQuery :

import { function createSubscriber(start: (update: () => void) => (() => void) | void): () => voidReturns a subscribe function that, if called in an effect (including expressions in the template),
calls its start callback with an update function. Whenever update is called, the effect re-runs.
If start returns a function, it will be called when the effect is destroyed.
If subscribe is called in multiple effects, start will only be called once as long as the effects
are active, and the returned teardown function will only be called when all effects are destroyed.
It’s best understood with an example. Here’s an implementation of MediaQuery:
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}
@since5.7.0createSubscriber } from 'svelte/reactivity';
import { function on<Type extends keyof WindowEventMap>(window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type]) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)Attaches an event handler to the window and returns a function that removes the handler. Using this
rather than addEventListener will preserve the correct order relative to handlers added declaratively
(with attributes like onclick), which use event delegation for performance reasons
on } from 'svelte/events';

export class class MediaQueryMediaQuery {
	#query;
	#subscribe;

	constructor(query: anyquery) {
		this.#query = var window: Window & typeof globalThisMDN Reference
window.function matchMedia(query: string): MediaQueryListMDN Reference
matchMedia(`(${query: anyquery})`);

		this.#subscribe = function createSubscriber(start: (update: () => void) => (() => void) | void): () => voidReturns a subscribe function that, if called in an effect (including expressions in the template),
calls its start callback with an update function. Whenever update is called, the effect re-runs.
If start returns a function, it will be called when the effect is destroyed.
If subscribe is called in multiple effects, start will only be called once as long as the effects
are active, and the returned teardown function will only be called when all effects are destroyed.
It’s best understood with an example. Here’s an implementation of MediaQuery:
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}
@since5.7.0createSubscriber((update: () => voidupdate) => {
			// lorsque l'évènement `change` se produit, rejoue tout effet qui lit `this.current`
			const const off: () => voidoff = on<MediaQueryList, "change">(element: MediaQueryList, type: "change", handler: (this: MediaQueryList, event: MediaQueryListEvent) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)Attaches an event handler to an element and returns a function that removes the handler. Using this
rather than addEventListener will preserve the correct order relative to handlers added declaratively
(with attributes like onclick), which use event delegation for performance reasons
on(this.#query, 'change', update: () => voidupdate);

			// arrête d'écouter lorsque tous les effets sont détruits
			return () => const off: () => voidoff();
		});
	}

	get MediaQuery.current: booleancurrent() {
		this.#subscribe();

		// renvoie l'état courant de la query, que l'on soit ou non dans un effet
		return this.#query.MediaQueryList.matches: booleanMDN Reference
matches;
	}
}

function createSubscriber(
	start: (update: () => void) => (() => void) | void
): () => void;

Modifier cette page sur Github

précédent suivant

svelte/reactivity/window svelte/server