Al Baker - Svelte

The count is 0

This section uses a writable store and different components to increment, decrement, and reset a count. This page looks like this:

xml

<div class="mx-4 my-2">
	<p class="my-2">The count is {$count}</p>
	
	<Incrementer />
	<Decrementer />
	<Resetter />
</div>

The Incrementer.svelte and Decrementer.svelte have functions that change the count on click of a button, and Resetter.svelte sets the count to 0.

typescript

import { count } from '$lib/stores/count.ts';

function increment() {
	count.update((n) => n + 1);
}

The count.ts file that holds the count store looks like this:

typescript

import { writable } from 'svelte/store';

export const count = writable(0);

The time is 9:24:59 AM

This page has been open for 0 seconds

This section uses a readable store to show the current time and a derived store that uses the time to show how long the page has been open.

xml

<p class="mx-4 my-2">The time is {formatter.format($time)}</p>
<p class="mx-4 my-2">
	This page has been open for
	{$elapsed}
	{$elapsed === 1 ? 'second' : 'seconds'}
</p>

This time.ts file that holds the elapsed store looks like this:

typescript

import { readable, derived } from 'svelte/store';

export const time = readable(new Date(), function start(set) {
	const interval = setInterval(() => {
		set(new Date());
	}, 1000);
	
	return function stop() {
		clearInterval(interval);
	};
});
	
const start = new Date();
	
export const elapsed = derived(
	time,
	($time) => Math.round(($time - start) / 1000)
);

The custom count is 0.

This section uses a custom writable store with increment, decrement, and reset methods to avoid exposing set and update. The customCount.ts file looks like this:

typescript

import { writable } from 'svelte/store';

function createCount() {
	const { subscribe, set, update } = writable(0);
	
	return {
		subscribe,
		increment: () => update(n => n + 1),
		decrement: () => update(n => n - 1),
		reset: () => set(0)
	};
}
	
export const customCount = createCount();

Your Name:

Hello Thor! Are you learning lots about Svelte?

This section binds the value of an input field to a writable store, and allows the user to update the name directly inside the component using an onclick handler.

xml

<label class="mx-4 my-2">
Your Name: 
<input
	type="text"
	bind:value={$name}
	class="text-surface-800 my-2 p-2 rounded-md bg-tertiary-200"/>
</label>

<p class="mx-4">{$greeting}</p>
<button class="btn variant-filled-secondary mx-4 mt-2" on:click={() => ($name += '!')}>
	Add another exclamation mark!
</button>

Stores