Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/poppa/svelte-store-enhanced

Enhanced Svelte Stores
https://github.com/poppa/svelte-store-enhanced

state-management svelte svelte-store svelte-stores svelte4

Last synced: 28 days ago
JSON representation

Enhanced Svelte Stores

Awesome Lists containing this project

README 

        
# Svelte Store Enhanced



A collection of "enhanced" Svelte stores



# Table Of Contents



1. [WritableEnhanced](#writableenhancedt)

   1. [Usage](#usage)

2. [ToggleStore](#togglestoret)

   1. [Usage](#usage-1)

3. [Narrow Imports](#narrow-imports)



## Install



```

npm i -D @poppanator/svelte-store-enhanced

```



```

yarn add --dev @poppanator/svelte-store-enhanced

```



## `WritableEnhanced`



This is pretty much a standard `Writable` store with the added `up()` method

which lets you update multiple properties at once in the store data, if the

store data is an object.



It also has the `get()` method which lets you retrieve store data in a

non-Svelte context, i.e. equivalent to Svelte's `get(theStore)`



This is the type declaration for the `WritableEnhanced` store



````ts

/**

 * A store extending a Svelte {@link Writable} store

 *

 * @template T - The type of the data

 */

export type WritableEnhanced = Writable & {

  /**

   * Update the store with `values`

   *

   * These are equivalent

   * ```

   * store.up({ myKey: 'some value' })

   *

   * store.update((curr) => {

   *   curr.myKey = 'some value'

   *   return curr

   * })

   * ```

   */

  up(values: Partial): void



  /**

   * Getter for the internal store data

   *

   * These are equivalent:

   *

   * ```

   * const storeData = someStore.get()

   * ```

   *

   * and

   *

   * ```

   * import { get } from 'svelte/store'

   * const storeData = get(someStore)

   * ```

   */

  get(): T



  /**

   * Get the value of property `key` from the internal store data

   *

   * These are equivalent:

   *

   * ```

   * const someValue = someStore.get('myProp')

   * ```

   *

   * and

   *

   * ```

   * import { get } from 'svelte/store'

   * const storeData = get(someStore).myProp

   * ```

   */

  get(key: K): T[K]

}

````



### Usage



You can either enhance an existing Svelte writable store, or just pass the

initial state to the `wriableEnhanced()` method



```svelte



import { writableEnhanced } from '@poppanator/svelte-store-enhanced'



const store = writableEnhanced({ lang: 'Svelte', version: '3', cool: 'yes' })



store.up({ version: '4', cool: 'very' })



```



The above `store.up(...)` is the equivalent of



```svelte



store.update((curr) => {

  curr.version = '4'

  curr.cool = 'very'



  return curr

})



```



As stated above, you can also "enhance" an existing Svelte writable

store like so:



```svelte



import { writable } from 'svelte/store'

import { writableEnhanced } from '@poppanator/svelte-store-enhanced'



const orgStore = writable({

  name: 'Rich Harris',

  creatorOf: ['svelte', 'rollup', 'degit'],

})



const store = writableEnhanced(orgStore)



```



If you need to retrieve data from a store in a non-Svelte context, you

can call `store.get()`, to get the data. This method also takes a

specific store property as argument if that particular property is

wanted



```ts

// some-file.ts



export function verifyStoreName(store: WritableEnhanced) {

  const name = store.get('name')



  if (name !== 'Rich Harris') {

    throw new Error('Bad Name')

  }

}



export function verifyStore(store: WritableEnhanced) {

  verifyStoreName(store)



  const allData = store.get()



  if (!allData.creatorOf.includes('svelte')) {

    throw new Error('Missing Svelte in creatorOf')

  }

}

```



## `ToggleStore`



The `ToggleStore` is a store for keeping `boolean` states for given

property names. This is useful when implementing things like _accordions_ and

such.



This is the type declaration for the toggle store:



```ts

export type ToggleStore = Writable & {

  /** Toggle the state of `key` */

  toggle: (key: keyof T) => ToggleStore



  /**

   * Set the state of all items

   *

   * @param state -

   *  - `on` will set all items to `true`

   *  - `off` will set all items to `false`

   *  - `toggle` will toggle the state of all items

   */

  every: (state: 'on' | 'off' | 'toggle') => ToggleStore



  /** Set the state of `key` to active, i.e. `true` */

  on: (key: keyof T) => ToggleStore



  /** Set the state of `key` to inactive, i.e. `false` */

  off: (key: keyof T) => ToggleStore



  /** Toggle `key` and disable any other active key  */

  swap: (key: keyof T) => ToggleStore



  /** Reset the store to its initial values */

  reset: () => ToggleStore

}

```



### Usage



```svelte



import { toggle } from '@poppanator/svelte-store-enhanced'



const store = toggle({ one: true, two: false, three: false })





   store.every('on')}>Show All

   store.every('off')}>Hide All




    

      
  • 

         store.swap('one')}>

          
    First
    

        

        
    

          
    This is the first text
    

        
    

      
    • 


      
  • 

         store.swap('two')}>

          
    Second
    

        

        
    

          
    This is the second text
    

        
    

      
    • 


      
  • 

         store.swap('three')}>

          
    Third
    

        

        
    

          
    This is the third text
    

        
    

      
    • 




div {

  display: none;

}



.open div {

  display: block;

}



```



## Narrow Imports



This package has support for importing specific "submodules" directly, without

importing them from the root. This can help with three-shaking and such, if

that is of concern.



> **NOTE!** If you are using Typescript you have to make sure the

> `moduleResolution` option in you `tsconfig.json` is set to `node16` or

> `nodenext`



### Example



```ts

import { wriableEnhanced } from '@poppanator/svelte-store-enhanced/writable-enhanced'

import { toggle } from '@poppanator/svelte-store-enhanced/toggle'

```