sourstore

A lightweight state management library for Soursop

Instalation

Local

Via NPM:

npm i sourstore

Via Yarn:

yarn add sourstore

CDN

NPM version

<script src="https://cdn.jsdelivr.net/npm/sourstore"></script>

GitHub (dev) version

<script src="https://cdn.jsdelivr.net/gh/natanfeitosa/sourstore@HEAD/dist/sourstore.iife.js"></script>

Quickstart

You can create a small app using babel cdn

<div id="app"></div>
<!-- Load Soursop -->
<script src="https://cdn.jsdelivr.net/npm/soursop"></script>
<Script src="https://cdn.jsdelivr.net/npm/sourstore"></script>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//@jsx soursop.createElement
//@jsxFrag soursop.Fragment

const useCounter = sourstore.defineStore({
  state: () => ({ count: 0 }),
  getters: {
    double(states) {
      return states.count * 2
    },
    triple() {
      return this.count * 3
    },
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

function Counter() {
  const counter = useCounter()
  return (
    <>
      <h1>Counter {counter.count}</h1>
      <h3>Double: {counter.double}</h3>
      <h3>Triple: {counter.triple}</h3>
      <button onClick={counter.increment}>Click here</button>
    </>
  )
}

const container = document.querySelector('#app')
soursop.render(<Counter/>, container)
</script>