https://github.com/storeon/svelte

A tiny (179 bytes) connector for Storeon and Svelte
https://github.com/storeon/svelte

Last synced: 7 days ago
JSON representation

A tiny (179 bytes) connector for Storeon and Svelte

• Host: GitHub
• URL: https://github.com/storeon/svelte
• Owner: storeon
• License: mit
• Created: 2019-05-16T06:53:22.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-27T13:32:56.000Z (about 1 year ago)
• Last Synced: 2024-09-24T04:22:57.378Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 3.08 MB
• Stars: 56
• Watchers: 2
• Forks: 4
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Storeon Svelte

[![npm version](https://badge.fury.io/js/%40storeon%2Fsvelte.svg)](https://www.npmjs.com/package/@storeon/svelte)

[![Build Status](https://travis-ci.org/storeon/svelte.svg?branch=master)](https://travis-ci.org/storeon/svelte)



[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/svelte` has several advantages compared with the built-in one.

- **Size**. 179 bytes (+ Storeon itself) instead of 485 bytes (minified and gzipped).

- **Ecosystem**. Many additional [tools] can be combined with a store.

- **Speed**. Bind components to the changes in the exact store that you need.

[storeon]: https://github.com/storeon/storeon

[tools]: https://github.com/storeon/storeon#tools

[svelte]: https://github.com/sveltejs/svelte

[size limit]: https://github.com/ai/size-limit

[demo]: https://codesandbox.io/s/admiring-beaver-edi8m

[article]: https://evilmartians.com/chronicles/storeon-redux-in-173-bytes

## Install

```sh

npm install -S @storeon/svelte

```

or

```sh

yarn add @storeon/svelte

```

## How to use ([Demo])

Create store using `storeon` module:

#### `store.js`

```javascript

import { createStoreon } from 'storeon'

let counter = store => {

  store.on('@init', () => ({ count: 0 }))

  store.on('inc', ({ count }) => ({ count: count + 1 }))

}

export const store = createStoreon([counter])

```

Using TypeScript you can pass `State` and `Events` interface to the `createStoreon` function:

#### `store.ts`

```typescript

import { StoreonModule, createStoreon } from 'storeon'

interface State {

  count: number

}

interface Events {

  'inc': undefined

  'set': number

}

let counter = (store: StoreonModule) => {

  store.on('@init', () => ({ count: 0 }))

  store.on('inc', ({ count }) => ({ count: count + 1 }))

  store.on('set', (_, event) => ({ count: event}))

};

export const store = createStoreon([counter])

```

#### `App.svelte`

Provide store to Svelte Context using `provideStoreon` from `@storeon/svelte`

```html

  import { provideStoreon } from '@storeon/svelte'

  import { store } from './store'

  import Counter from './Counter.svelte'

  provideStoreon(store)

```

Import `useStoreon` function from our `@storeon/svelte` module and use it for getting state and dispatching new events:

#### `Child.svelte`

```html

  import { useStoreon } from '@storeon/svelte';

  const { count, dispatch } = useStoreon('count');

  function increment() {

    dispatch('inc');

  }

The count is {$count}


+

```

Using typescript you can pass `State` and `Events` interfaces to `useStoreon` function to be full type safe

```html

  import { useStoreon } from '@storeon/svelte';

  import { State, Events } from './store'

  const { count, dispatch } = useStoreon<State, Events>('count');

  function increment() {

    dispatch('inc');

  }

The count is {$count}


+

```

## Usage with [@storeon/router](https://github.com/storeon/router)

If you want to use the @storeon/svelte with the `@storeon/router` you should import the `router.createRouter` from `@storeon/router` and add this module to `createStoreon`

#### `store.js`

```js

import { createStoreon } from 'storeon'

import { createRouter } from '@storeon/router';

const store = createStoreon([

  createRouter([

    ['/', () => ({ page: 'home' })],

    ['/blog', () => ({ page: 'blog' })],

  ])

])

```

And use it like:

#### `App.svelte`

```html

  import { provideStoreon } from '@storeon/svelte'

  import { store } from './store'

  import Counter from './Child.svelte'

  provideStoreon(store)

```

#### `Child.svelte`

```html

  import { useStoreon } from '@storeon/svelte';

  import router from '@storeon/router'

  const { [router.key]: route } = useStoreon(router.key)

You can access the router like default svelte store via $:

{$route.match.page}

```