3.0.0 • Published 5 months ago
butik v3.0.0
🏪 butik
A fresh alternative to Svelte's built-in stores.
💾 Install
npm i butik
⚡ Quick example
// stores.ts
import { ArrayStore } from 'butik';
export const store = new ArrayStore<string>([]);
// Svelte component
<script lang="ts">
import { store } from '$lib/stores';
const options = ['item 1', 'item 2', 'item 3', 'item 4'];
</script>
{#each options as option}
<input type="checkbox"
checked={store.has(option)}
on:change={() => store.toggle(option)}
>
{/each}
🔨 API
Even though this package is meant to be used with Svelte, it is framework agnostic.
Butik's stores follows the store contract allowing $
-prefixing for stuff like auto-subscriptions and two-way data binding.
interface ISubscribable<T> {
subscribe(listener: EventListener<T>): () => void;
}
interface IReadable<T> {
get(): Readonly<T>;
}
interface IWritable<T> {
set(value: T): void;
update(updater: (value: T) => T): void;
}
get(): Readonly<T>
set(value: T): void
update(updater: (value: T) => T): void
subscribe(listener: (value: T) => void): () => void
// stores.ts
import { Store } from 'butik';
export const store = new Store<string>('');
// Svelte component
<script lang="ts">
import { store } from '$lib/stores';
</script>
<input type="text" bind:value={$store}/>
constructor(store: ISubscribable<T>, derive: (value: T) => U)
// stores.ts
import { Store, DerivedStore } from 'butik';
export const store = new Store<string>('');
const regEx = new RegExp(/^(?!.*\s).{4,30}$/);
export const derivedStore = new DerivedStore(store, (value) => {
return regEx.test(value);
});
// Svelte component
<script lang="ts">
import { store, derivedStore } from '$lib/stores';
</script>
<input type="text" bind:value={$store}/>
<button disabled={!$derivedStore}>Submit</button>
count(): number
has(arg: T | ((value: T) => boolean)): boolean
add(arg: T | T[]): void
remove(arg: T | T[] | ((value: T) => boolean)): void
toggle(item: T): void
// stores.ts
import { ArrayStore } from 'butik';
export const store = new ArrayStore<string>([]);
// Svelte component
<script lang="ts">
import { store } from '$lib/stores';
const options = ['item 1', 'item 2', 'item 3', 'item 4'];
</script>
{#each options as option}
<input type="checkbox"
checked={store.has(option)}
on:change={() => store.toggle(option)}
>
{/each}
toggle(): void
// stores.ts
import { BooleanStore } from 'butik';
export const store = new BooleanStore(false);
// Svelte component
<script lang="ts">
import { store } from '$lib/stores';
</script>
<input type="checkbox" bind:checked={$store}/>
constructor(value: number, min: number | undefined = undefined, max: number | undefined = undefined)
add(amount: number): void
// stores.ts
import { NumberStore } from 'butik';
export const numberStore = new NumberStore(0, 0, 10);
// Svelte component
<script lang="ts">
import { numberStore } from '$lib/stores';
</script>
<input type="number"
bind:value={$numberStore}
min={numberStore.min}
max={numberStore.max}
/>
patch(partial: Partial<T>): void
// stores.ts
import { ObjectStore } from 'butik';
export const objectStore = new ObjectStore({
name: 'John Doe',
age: 50
});
// Svelte component
<script lang="ts">
import { objectStore } from '$lib/stores';
</script>
<input type="number"
value={$objectStore.age}
on:change={(e) => objectStore.patch({ age: e.currentTarget.valueAsNumber })}
/>
duration: number
easeMethod: EaseMethod
constructor(value: number = 0, duration: number = 1000, easeMethod: EaseMethod = cubInOut)
start(targetValue: number, onDone?: () => void): void
stop(): void
// Svelte component
<script lang="ts">
import { Tween } from 'butik';
const tween = new Tween(0, 3000);
</script>
<p style:fontSize={$tween}>{$tween}</p>
<button on:click={() => tween.start(48)}>Start</button>
interface EncodingOptions<T> {
encode?: (value: T) => string | undefined;
decode?: (value: string) => T;
}
syncToLocalStorage<T>(store: IStore<T>, key: string, encodingOptions?: EncodingOptions<T>): () => void
syncToSessionStorage<T>(store: IStore<T>, key: string, encodingOptions?: EncodingOptions<T>): () => void
// stores.ts
import { BooleanStore } from 'butik';
export const store = new BooleanStore(false);
syncToLocalStorage(store, 'storage_key');
3.0.0
5 months ago
2.1.0
5 months ago
2.0.2
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago
1.0.0
5 years ago