👽 Make API more convinient

Author: distolma

README.md

@@ -4,15 +4,15 @@
 
 A tiny connector for [Storeon] and [Svelte]. ([Demo])
 
-Size is only 185 bytes (minified and gzipped). It uses [Size Limit] to control size.
+Size is only 187 bytes (minified and gzipped). It uses [Size Limit] to control size.
 
 Read more about Storeon [article].
 
 ## 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/svelte` has several advantages compared with the built-in one.
 
-- **Size**. 185 bytes instead of 426 bytes (minified and gzipped).
+- **Size**. 187 bytes instead of 426 bytes (minified and gzipped).
 - **Ecosystem**. Many additional [tools] can be combined with a store.
 - **Speed**. It tracks what parts of state were changed and re-renders only components based on the changes.
 
@@ -75,29 +75,29 @@ export const store = createStoreon<State, Events>([counter])
 
 #### `App.svelte`
 
-Provide store to Svelte Context using `setStore` from `@storeon/svelte`
+Provide store to Svelte Context using `provideStoreon` from `@storeon/svelte`
 
 ```html
 <script>
-  import { setStore } from '@storeon/svelte'
+  import { provideStoreon } from '@storeon/svelte'
   import { store } from './store'
   import Counter from './Counter.svelte'
 
-  setStore(store)
+  provideStoreon(store)
 </script>
 
 <Counter />
 ```
 
-Import `getStore` function from our `@storeon/svelte` module and use it for getting state and dispatching new events:
+Import `useStoreon` function from our `@storeon/svelte` module and use it for getting state and dispatching new events:
 
 #### `Child.svelte`
 
 ```html
 <script>
-  import { getStore } from '@storeon/svelte';
+  import { useStoreon } from '@storeon/svelte';
 
-  const { count, dispatch } = getStore('count');
+  const { count, dispatch } = useStoreon('count');
 
   function increment() {
     dispatch('inc');
@@ -108,13 +108,13 @@ Import `getStore` function from our `@storeon/svelte` module and use it for gett
 
 <button on:click={increment}>+</button>
 ```
-Using typescript you can pass `State` and `Events` interfaces to `getStore` function to be full type safe
+Using typescript you can pass `State` and `Events` interfaces to `useStoreon` function to be full type safe
 ```html
 <script lang="typescript">
-  import { getStore } from '@storeon/svelte';
+  import { useStoreon } from '@storeon/svelte';
   import { State, Events } from './store'
 
-  const { count, dispatch } = getStore<State, Events>('count');
+  const { count, dispatch } = useStoreon<State, Events>('count');
 
   function increment() {
     dispatch('inc');
@@ -146,22 +146,22 @@ And use it like:
 #### `App.svelte`
 ```html
 <script>
-  import { setStore } from '@storeon/svelte'
+  import { provideStoreon } from '@storeon/svelte'
   import { store } from './store'
   import Counter from './Child.svelte'
 
-  setStore(store)
+  provideStoreon(store)
 </script>
 
 <Counter />
 ```
 #### `Child.svelte`
 ```html
 <script>
-  import { getStore } from '@storeon/svelte';
+  import { useStoreon } from '@storeon/svelte';
   import router from '@storeon/router'
 
-  const { [router.key]: route } = getStore(router.key)
+  const { [router.key]: route } = useStoreon(router.key)
 </script>
 
 You can access the router like default svelte store via $:

example/App.svelte

@@ -3,9 +3,9 @@
   import Main from './components/Main.svelte'
   import { store } from './store'
   import { SHOW_ACTIVE, SHOW_COMPLETED, SHOW_ALL } from './constants/TodoFilters'
-  import { setStore } from '..'
+  import { provideStoreon } from '..'
 
-  setStore(store)
+  provideStoreon(store)
 
   function updateFilter() {
     if (window.location.hash === '#active') {

example/components/Footer.svelte

@@ -1,8 +1,8 @@
 <script >
-  import { getStore } from '../..'
+  import { useStoreon } from '../..'
   import { SHOW_ACTIVE, SHOW_ALL, SHOW_COMPLETED } from '../constants/TodoFilters'
 
-  const { dispatch, todos, filter } = getStore('todos', 'filter')
+  const { dispatch, todos, filter } = useStoreon('todos', 'filter')
 
   function handleClearCompleted() {
     dispatch('todo/clear_completed')

example/components/Header.svelte

@@ -1,8 +1,8 @@
 <script >
   import { ENTER } from '../constants/keyCodes'
-  import { getStore } from '../..'
+  import { useStoreon } from '../..'
 
-  const { dispatch } = getStore()
+  const { dispatch } = useStoreon()
 
   function handleKeydown(event) {
     if (event.which === ENTER && event.target.value.trim()) {

example/components/Main.svelte

@@ -2,9 +2,9 @@
   import Footer from './Footer.svelte'
   import TodoItem from './TodoItem.svelte'
   import { SHOW_ACTIVE, SHOW_ALL, SHOW_COMPLETED } from '../constants/TodoFilters'
-  import { getStore } from '../..'
+  import { useStoreon } from '../..'
 
-  const { dispatch, todos, filter } = getStore('todos', 'filter')
+  const { dispatch, todos, filter } = useStoreon('todos', 'filter')
 
   function handleCompleteAll() {
     dispatch('todo/complete_all')

index.d.ts

@@ -10,7 +10,7 @@ type Subscribable<State> = {
   };
 }
 
-export declare function setStore(store: StoreonStore): void
-export declare function getStore<State, Events = any>(...keys: (keyof State)[]): Subscribable<State> & {
+export declare function provideStoreon(store: StoreonStore): void
+export declare function useStoreon<State, Events = any>(...keys: (keyof State)[]): Subscribable<State> & {
   dispatch: StoreonDispatch<Events & createStoreon.DispatchableEvents<State>>
 }

index.js

@@ -1,17 +1,17 @@
-let { getContext, setContext } = require('svelte')
+const { getContext, setContext } = require('svelte')
 
 const STORE = typeof Symbol !== 'undefined' ? Symbol('storeon') : '@@storeon'
 
-function setStore (store) {
+function provideStoreon (store) {
   setContext(STORE, store)
 }
 
-function getStore (...keys) {
+function useStoreon (...keys) {
   let store = getContext(STORE)
   if (process.env.NODE_ENV !== 'production' && !store) {
     throw new Error(
       'Could not find storeon context value.' +
-      'Please ensure you provide store using "setStore" function'
+      'Please ensure you provide store using "provideStoreon" function'
     )
   }
 
@@ -48,4 +48,4 @@ function getStore (...keys) {
   return data
 }
 
-module.exports = { setStore, getStore }
+module.exports = { provideStoreon, useStoreon }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storeon/svelte",
   "version": "0.5.2",
-  "description": "A tiny (185 bytes) connector for Storeon and Svelte",
+  "description": "A tiny (187 bytes) connector for Storeon and Svelte",
   "main": "index.js",
   "repository": "https://github.com/distolma/storeon-svelte.git",
   "author": "Dmytro Mostovyi <[email protected]>",
@@ -58,7 +58,7 @@
   "size-limit": [
     {
       "path": "index.js",
-      "limit": "185 B",
+      "limit": "187 B",
       "ignore": [
         "svelte"
       ]

test/index.test.js

@@ -1,7 +1,7 @@
 let { getContext, setContext } = require('svelte')
 let { createStoreon } = require('storeon')
 
-let { getStore, setStore } = require('..')
+let { useStoreon, provideStoreon } = require('..')
 
 jest.mock('svelte')
 
@@ -34,14 +34,14 @@ afterEach(() => {
 it('set store to svelte context', () => {
   let store = setupStore()
   setContext.mockImplementationOnce(() => {})
-  setStore(store)
+  provideStoreon(store)
 
   expect(setContext).toHaveBeenCalledWith(expect.anything(), store)
   expect(setContext).toHaveBeenCalledTimes(1)
 })
 
 it('get store from svelte context', () => {
-  let store = getStore()
+  let store = useStoreon()
 
   expect(store).toBeDefined()
   expect(store.dispatch).toBeDefined()
@@ -50,18 +50,18 @@ it('get store from svelte context', () => {
 it('get error if store context not provided', () => {
   getContext.mockRestore()
 
-  expect(() => getStore()).toThrow(Error)
+  expect(() => useStoreon()).toThrow(Error)
 })
 
 it('should start with init value', () => {
-  let { count } = getStore('count')
+  let { count } = useStoreon('count')
 
   count.subscribe(value => expect(value).toBe(0))
 })
 
 it('should be reactive', () => {
   let currentValue
-  let { count, dispatch } = getStore('count')
+  let { count, dispatch } = useStoreon('count')
 
   count.subscribe(value => { currentValue = value })
 
@@ -76,7 +76,7 @@ it('should not emit changes on other dispatches', () => {
   let fooSpyCb = jest.fn()
   let countSpyCb = jest.fn()
 
-  let { foo, count, dispatch } = getStore('foo', 'count')
+  let { foo, count, dispatch } = useStoreon('foo', 'count')
 
   foo.subscribe(fooSpyCb)
   count.subscribe(countSpyCb)
@@ -95,7 +95,7 @@ it('should not emit changes on other dispatches', () => {
 
 it('shoud to be unsubscribed', () => {
   let currentValue
-  let { count, dispatch } = getStore('count')
+  let { count, dispatch } = useStoreon('count')
 
   let unsubscribe = count.subscribe(value => { currentValue = value })