Svelte ExStore

This package basically acts as a wrapper for writable stores.

Features

1. Connects Redux Devtools to monitor your state. multiple stores in the same +page is also supported.
2. An action uses this keyword to manage your state.
3. Supports primitive value, if you assign primitive value using $init eg. $init: 0, then get(store) return 0.
4. When the state is reference type by default, you can simply access it by this keyword. read reference type, for more details...

Contents

1. Installation
2. Basic Example
3. State Management
4. For Vitest support

Installation

1npm install svelte-exstore

1yarn add svelte-exstore

1pnpm add svelte-exstore

Basic Example

1. Create a store

src/lib/store/count.ts

1import { ex } from "svelte-exstore";
2  
3interface Count {
4  $init: number;
5  increase(): void;
6  decrease(): void;
7  increaseBy(by: number): void;
8  reset(): void;
9}
10
11export const count = ex<Count>({
12  $name: 'count', // store name displayed in devtools, must be unique.
13  $init: 0,
14  increase() {
15    this.$init += 1; // retrieve your current state with `this` keyword.
16  },
17  increaseBy(by) {
18    this.$init += by;
19  },
20  decrease() {
21    this.$init -= 1;
22  },
23  reset() {
24    this.$init = 0;
25  }
26});

2. Bind the store to your component.

src/routes/+page.svelte

1<script lang="ts">
2  import { count } from '$lib/store/count';
3</script>
4
5
6<h1>{$count}</h1>
7<!--  $count is an alias for count.$init  -->
8
9<button on:click={() => count.increase()}>+</button>
10
11<button on:click={() => count.increaseBy(5)}>increase by 5</button>
12
13<button on:click={() => count.reset()}>reset</button>

3. Monitor your state with Redux Devtools.

State Management

Primitive Value

with $init -- get(store) will return $init

count.ts

1interface Count {
2  $init: number;
3  increase: () => void;
4}
5
6const count = ex<Count>({
7  $name: 'count-test-store',
8  $init: 0,
9  increase() {
10    this.$init += 1;
11  }
12});

Count.svelte

1<h1>{$count}</h1>
2<!--  $count is an alias for count.$init  -->

if the state is primitive type, the action can also return the value like this.

count.ts

1interface Count {
2  $init: number;
3  increase: () => void;
4}
5
6const count = ex<Count>({
7  $name: 'count-test-store',
8  $init: 0,
9  increase() {
10    return this.$init + 1; // support only primitive type.
11  }
12});

Reference Value

When the state is reference type by default, you can simply access it by this keyword.

profile.ts

1interface Profile {
2  name: string;
3  age: number;
4  description?: string;
5  increaseAgeBy: (value:number) => void;
6}
7
8const profile = ex<Profile>({
9  $name: 'profile-test-store',
10  name: '',
11  age: 20,
12  increaseAgeBy(value){
13    this.age += value;
14  }
15})

Profile.svelte

1<h1>{$profile.name}</h1>
2<h2>{$profile.age}</h2>
3<h2>{$profile.description ?? ''}</h2>

the default function store.subscribe(), store.set() and store.update() are also available.

1profile.update((state) => {
2  state = { name: 'Jack', age: 30 };
3  return state;
4});
5
6profile.set({});

Profile.svelte

1<button on:click={() => { profile.set({}); }}> Reset Name </button>

the store.subscribe() now provide readonly state by default to prevent unpredictable state change.

1profile.subscribe((value) => {
2  console.log('stage 9: readonly reference', value);
3
4  // if uncomment this, it should throw an error. because the state is readonly.
5  // value.name = 'Jane';
6});

For Vitest support

add this to setupTests.ts

1vi.mock('$app/stores', async () => {
2	const { readable, writable } = await import('svelte/store');
3	/**
4	 * @type {import('$app/stores').getStores}
5	 */
6	const getStores = () => ({
7		navigating: readable(null),
8		page: readable({ url: new URL('http://localhost'), params: {} }),
9		session: writable(null),
10		updated: readable(false)
11	});
12	/** @type {typeof import('$app/stores').page} */
13	const page = {
14		subscribe(fn: () => void) {
15			return getStores().page.subscribe(fn);
16		}
17	};
18	/** @type {typeof import('$app/stores').navigating} */
19	const navigating = {
20		subscribe(fn: () => void) {
21			return getStores().navigating.subscribe(fn);
22		}
23	};
24	/** @type {typeof import('$app/stores').session} */
25	const session = {
26		subscribe(fn: () => void) {
27			return getStores().session.subscribe(fn);
28		}
29	};
30	/** @type {typeof import('$app/stores').updated} */
31	const updated = {
32		subscribe(fn: () => void) {
33			return getStores().updated.subscribe(fn);
34		}
35	};
36	return {
37		getStores,
38		navigating,
39		page,
40		session,
41		updated
42	};
43});
44
45vi.mock('$app/environment', async () => {
46	/** @type {typeof import('$app/environment').browser} */
47	const browser = true;
48	/** @type {typeof import('$app/environment').dev} */
49	const dev = true;
50	/** @type {typeof import('$app/environment').prerendering} */
51	const prerendering = false;
52
53	return {
54		browser,
55		dev,
56		prerendering
57	};
58});