svelte/reactivity

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

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

<!-- 对这些的更改... -->
<input bind:value={url.protocol} />
<input bind:value={url.hostname} />
<input bind:value={url.pathname} />

<hr />

<!-- 将会更新 `href` 并反之亦然 -->
<input bind:value={url.href} />

import {
	class MediaQuery
Creates 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.
<script>
	import { MediaQuery } from 'svelte/reactivity';

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

<h1>{large.current ? 'large screen' : 'small screen'}</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): () => void
Returns 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';

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

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

<h1>{large.current ? '大屏幕' : '小屏幕'}</h1>

import { function createSubscriber(start: (update: () => void) => (() => void) | void): () => void
Returns 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 globalThis
MDN Reference
window.function matchMedia(query: string): MediaQueryList
MDN Reference
matchMedia(`(${query: anyquery})`);

		this.#subscribe = function createSubscriber(start: (update: () => void) => (() => void) | void): () => void
Returns 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) => {
			// 当 `change` 事件发生时，重新运行任何读取 `this.current` 的 effect
			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);

			// 当所有 effect 都被销毁时停止监听
			return () => const off: () => voidoff();
		});
	}

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

		// 返回查询的当前状态，无论我们是否在 effect 中
		return this.#query.MediaQueryList.matches: boolean
MDN Reference
matches;
	}
}