Nondigestible Purple Mayonnaise
    Have ideas to improve npm?Join in the discussion! »

    vnstore
    TypeScript icon, indicating that this package has built-in type declarations

    1.7.10 • Public • Published

    vnstore

    A lightweight library to manage state + listen to state changes globally

    TODO

    • split react stuff into it's own repo
    • combine vnstore + vnlocal. store just has a persist option
    • fix typings on the react stuff
      • also in general need to just solidify the API there

    Getting Started

    npm i -s vnstore
    
    import {vnstore} from 'vnstore'
    
    const $items = vnstore()

    vncontext

    import {vncontext, useContextHost, useProp} from 'vnstore'
    
    const ctx = vncontext({count: 0})
    
    const Parent = () => {
      const {host, setProp} = useContextHost(ctx)
    
      return host(
        <div>
          <Child />
        </div>
      )
    }
    
    const Child = () => {
      const setProp = useSetProp(ctx)
      const count = useProp(ctx, 'count')
    
      return (
        <div>
          <span>{count}</span>
          <button onClick={() => setProp('count', count + 1)} />
        </div>
      )
    }

    vnstore

    Store Config

    vnstore({
        fetcher: () => [], // a function which will return a list of items (either sync or as a promise) to fetch a list of items
        dependsOn: [], // a list of stores that when the selection changes will cause this store to be refreshed
        lazy: true, // call the fetcher one when items are needed
    })
    
    /** fetcher example */
    
    const $items = vnstore({
        fetcher: () => fetchItemsAsync()
    })
    $items.refresh() // this will call fetchItemsAsync() and populate the store with it's response
    
    /** lazy example */
    
    const $items = vnstore({
        fetcher: () => fetchItemsAsync(),
        lazy: true
    })
    // fetchItemsAsync() not called yet
    $items.list$(...)
    // fetchItemsAsync() is called now
    
    
    /** dependsOn example */
    
    const $items = vnstore()
    
    const $childrenItems = vnstore({
        fetcher: () => fetchChildrenAsync(),
        dependsOn: [$items]
    })
    
    $items.select('a')
    // fetchChildrenAsync() is called
    
    $items.select('b')
    // fetchChildrenAsync() is called again

    Data fetching

    $items.loading() // false
    $items.loading$(isLoading => ...)
    $items.useLoading() // false
    
    $items.refresh()
    $items.loading() // true

    Setters

    $items.insert({id: 'a', prop1: 'abc', prop2: 'def'})
    $items.insert([
      {id: 'a', prop1: 'abc', prop2: 'def'},
      {id: 'b', prop1: 'nice', prop2: 'one'}
    ])
    $items.update('a', {prop1: 'ABC'})
    $items.delete('a')
    $items.select('a')
    $items.size() // number

    Getters

    $items.list() // Item[]
    $items.list(e => e.prop1 === 'qwerty') // Item[]
    $items.map() // Map<string,Item>
    $items.get('a') // Item | undefined
    $items.selected() // Item | undefined

    Listeners

    $items.list$(items => /* Item[] */)
    $items.list$(e => e.prop1 === 'qwerty', items => /* Item[] */)
    $items.map$(e => /* Map<string,Item> */)
    $items.get$('a', e => /* Item | undefined */)
    $items.selected$(e => /* Item | undefined */)

    React hooks

    Hooks use listeners and will rerender component when items change

    $items.useList() // Item[]
    $items.useList(e => e.prop1 === 'qwerty') // Item[]
    $items.useMap() // Map<string,Item>
    $items.useGet('a') // Item | undefined
    $items.useSelected() // Item | undefined

    Other

    $items.reset()
    $items.list() // []

    Install

    npm i vnstore

    DownloadsWeekly Downloads

    137

    Version

    1.7.10

    License

    MIT

    Unpacked Size

    96.6 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar