stores

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

store_rune_conflict warning

This warning occurs when you use a `$%name%` rune but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription instead of referencing the local variable. Rename the local variable to avoid the ambiguity.

MediaQuery class creates reactive media query listener

MediaQuery is available since Svelte 5.7.0. It creates a media query and provides a `current` property that reflects whether or not the query matches. The constructor takes a `query` parameter (a media query string) and an optional `fallback` parameter (fallback value for the server). During server-side rendering, there is no way to know the correct value, potentially causing content to change upon hydration, so using media queries in CSS instead is recommended when possible.

SvelteDate is a reactive Date wrapper

SvelteDate is a reactive version of the built-in Date object. Reading the date via methods like `date.getTime()`, `date.toString()`, or through formatters like `Intl.DateTimeFormat` in an effect or derived will cause re-evaluation when the date value changes.

SvelteMap is a reactive Map wrapper

SvelteMap is a reactive version of the built-in Map object. Reading contents of the map (by iterating, reading `map.size`, or calling `map.get()` or `map.has()`) in an effect or derived will cause re-evaluation when the map is updated. Values in a reactive map are not made deeply reactive. SvelteMap provides additional methods: `getOrInsert(key, value)` and `getOrInsertComputed(key, callbackFn)`.

SvelteSet is a reactive Set wrapper

SvelteSet is a reactive version of the built-in Set object. Reading contents of the set (by iterating, reading `set.size`, or calling `set.has()`) in an effect or derived will cause re-evaluation when the set is updated. Values in a reactive set are not made deeply reactive.

SvelteURL is a reactive URL wrapper

SvelteURL is a reactive version of the built-in URL object. Reading properties like `url.href` or `url.pathname` in an effect or derived will cause re-evaluation when the URL changes. The `searchParams` property is an instance of SvelteURLSearchParams.

SvelteURLSearchParams is a reactive URLSearchParams wrapper

SvelteURLSearchParams is a reactive version of the built-in URLSearchParams object. Reading its contents (by iterating or calling `params.get()` or `params.getAll()`) in an effect or derived will cause re-evaluation when the params are updated. It provides a `[REPLACE](params: URLSearchParams): void` method.

createSubscriber integrates external event systems with Svelte reactivity

createSubscriber is available since Svelte 5.7.0 and returns a subscribe function that integrates external event-based systems with Svelte's reactivity. The function signature is `createSubscriber(start: (update: () => void) => (() => void) | void): () => void`. When subscribe is called inside an effect, the start callback is called with an update function that re-runs the effect when called. If start returns a cleanup function, it is called when the effect is destroyed. If subscribe is called in multiple effects, start is only called once while effects are active, and the teardown function is only called when all effects are destroyed.

createSubscriber example with MediaQuery implementation

Here is an example implementation of MediaQuery using createSubscriber: ```js 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 makes the getter reactive, if read in an effect this.#subscribe(); // Return the current state of the query, whether or not we're in an effect return this.#query.matches; } } ```

Import reactive utilities from svelte/reactivity

The following reactive utilities can be imported from 'svelte/reactivity': MediaQuery, SvelteDate, SvelteMap, SvelteSet, SvelteURL, SvelteURLSearchParams, and createSubscriber.

Give your agent this brain