🏪 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');