@storeon/solidjs
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Storeon Solid.js

    npm version Build Status

    Storeon logo by Anton Lovchikov

    Solid.js a declarative, efficient, and flexible JavaScript library for building user interfaces. @storeon/solidjs package helps to connect store with Solid.js to provide a better performance and developer experience while remaining so tiny.

    • Size. 172 bytes (+ Storeon itself) instead of ~3kB of Redux (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.

    Install

    npm install -S @storeon/solidjs

    or

    yarn add @storeon/solidjs

    How to use

    Create store using storeon module:

    store.js

    import { createStoreon } from 'storeon'
    
    let counter = store => {
      store.on('@init', () => ({ count: 0 }))
      store.on('inc', ({ count }) => ({ count: count + 1 }))
    }
    
    export const store = createStoreon([counter])

    main.js

    Provide store using StoreonProvider from @storeon/solidjs:

    import { render } from 'solid-js/dom'
    import { StoreonProvider } from '@storeon/solidjs'
    import { store } from './store'
    
    render(
      <StoreonProvider store={store}>
        <App />
      </StoreonProvider>,
      document.body
    )

    Import useStoreon decorator from @storeon/solidjs:

    Counter.jsx

    import { useStoreon } from '@storeon/solidjs'
    
    export default function Counter() {
      const [state, dispatch] = useStoreon()
    
      return (
        <div>
          {state.count}
          <button onClick={() => dispatch('inc')}>inc</button>
        </div>
      )
    }

    Using with TypeScript

    Counter.tsx

    import { useStoreon } from '@storeon/solidjs'
    import { State, Events } from './store'
    
    export default function Counter() {
      const [state, dispatch] = useStoreon<State, Events>()
    
      return (
        <div>
          {state.count}
          <button onClick={() => dispatch('inc')}>inc</button>
        </div>
      )
    }

    Install

    npm i @storeon/solidjs

    DownloadsWeekly Downloads

    11

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    7.31 kB

    Total Files

    7

    Last publish

    Collaborators

    • distolma
    • ai