@svelte-bin/stores

A collection of useful Svelte stores, such as localStorage, sessionStorage, query parameters, previous store, and more.

Installation

npm i @svelte-bin/stores

Usage

Persisted

A Svelte store that persists to local storage and session storage.

defined the store (default using localStorage)

<script>
	import { persisted } from '@svelte-bin/stores';

	const preferences = persisted('preferences', {
		theme: 'dark',
		language: 'en'
	});
</script>

as sessionStorage

<script>
	import { persisted } from '@svelte-bin/stores';

	const preferences = persisted(
		'preferences',
		{
			theme: 'dark',
			language: 'en'
		},
		{
			storage: 'session'
		}
	);
</script>

Query String

The fastest way to read AND WRITE from query search params in svelte/sveltekit

<script>
	import { queryParam, transform } from '@svelte-bin/stores';

	const theme = queryParam('query', {
		defaultValue: 'dark'
	});

	// using encode/decode
	const counter = queryParam('counter', {
		defaultValue: 0,
		encode: (value) => value.toString(),
		decode: (value) => parseInt(value || '')
	});

	// using transform

	const counter2 = queryParam('counter2', transform.number(0));
</script>

With Previous

Svelte stores have the ability to retain past values, enabling us to execute actions that rely on historical data, such as facilitating transitions between earlier and current values.

<script>
	import { withPrevious } from '@svelte-bin/stores';

	export let name = 'hello world';
	// current is writable, while previous is read-only.
	const [currentName, previousName] = withPrevious('before ');
	// To update the values, assign to the writable store.
	$: $currentName = name;
</script>

transition from {$previousName} to {$currentName}.

numToTrack: number

By default, withPrevious tracks one previous value.

<script>
	const [current, prev1, prev2] = withPrevious(0, { numToTrack: 2 });
</script>

from {$prev2} to {$prev1} to {$current}.

initPrevious: T[]

To initialize previous values with something besides null, pass an array of values from newest to oldest.

Missing values will be filled with null and extra values will be ignored.

<script>
	const [current, prev1, prev2] = withPrevious(0, { numToTrack: 2, initPrevious: [1, 2, 3] });
</script>

from {$prev2} to {$prev1} to {$current}. <!-- from 2 to 1 to 0. -->