Storeon Svelte

A tiny connector for Storeon and Svelte. (Demo)

Size is only 284 bytes (minified and gzipped). It uses Size Limit to control size

Why?

Svelte is the smallest JS framework, but even so, it contains many built-in features. One of them is a svelte/store. But why we need to use a third-party store? @storeon/svetle has several advantages compared with the built-in one.

Size. 284 bytes instead of 426 bytes (minified and gzipped).
Ecosystem. Many additional tools can be combined with a store.
Fast. It tracks what parts of state were changed and re-renders only components based on the changes.

Install

This module includes storeon module as a dependency so you don't need to install storeon itself

npm install @storeon/svelte

How to use

Use createSvelteStore from the @storeon/svelte package instead of using createStore from the svelte package. It accepts the same API as createStore function (array of modules)

`store.js`

import { createSvelteStore } from "@storeon/svelte";

let counter = store => {
  store.on("@init", () => ({ count: 0 }));
  store.on("inc", ({ count }) => ({ count: count + 1 }));
};

export const connect = createSvelteStore([counter]);

Using TypeScript you can pass State interface to the createSvelteStore function

`store.ts`

import { createSvelteStore, Store } from "@storeon/svelte";

interface State {
  count: number;
}

let counter = (store: Store<State>) => {
  store.on("@init", () => ({ count: 0 }));
  store.on("inc", ({ count }) => ({ count: count + 1 }));
};

export const connect = createSvelteStore<State>([counter]);

Import connect function from our ./store and use it for getting state and dispatching new events

`App.svelte`

<script>
  import { connect } from "./store.js";

  const [dispatch, count] = connect("count");

  function increment() {
    dispatch("inc");
  }
</script>

<h1>The count is {$count}</h1>

<button on:click="{increment}">+</button>

denisraslov/svelte