yaasl - yet another atomic store library

• yaasl - yet another atomic store library
  • Motivation
  • Installation
  • Quickstart
  • Usage examples [ Vanilla typescript, React (or Preact) ]

This project is meant for personal use. I won't stop you from using it, but I would rather recommend to use a similar and more mature solution like jotai.

See the docs for detailed documentation.

Motivation

TL;DR - It's fun and I dislike the jotai API.

Note: Jotai is really cool, and I love the work of dai-shi generally.

See this page for a full explanation.

Installation

You can install a yaasl package like you would do with any other:

npm i @yaasl/<package>

Available packages:

Name	Description
@yaasl/core	Core package for vanilla JS.
@yaasl/devtools	Adapter to use redux browser devtools
@yaasl/react	React bindings for yaasl.
@yaasl/preact	Preact bindings for yaasl.

Quickstart

1. Pick one of the main packages

npm i @yaasl/core
npm i @yaasl/react
npm i @yaasl/preact

2. Create an atom

import { createAtom } from "@yaasl/core"

const myAtom = createAtom({ defaultValue: 0 })

3. Use the atom

// Read
const currentValue = myAtom.get(atom)
// Write
myAtom.set(nextValue)
// Subscribe to changes
myAtom.subscribe(value => {
  console.log(value)
})

Usage examples

Vanilla typescript

import { createAtom, CONFIG, localStorage } from "@yaasl/core"

// Provide an app name to yaasl
CONFIG.name = "demo-vanilla"

// Create a counter atom that is connected to the local storage
const counter = createAtom({
  name: "counter", // local storage key will be "demo-vanilla/counter"
  defaultValue: 0,
  effects: [localStorage()],
})

const setupCounter = (element: HTMLButtonElement) => {
  const updateCounterText = (value: number) =>
    (element.innerHTML = `count is ${value}`)

  element.addEventListener("click", () => {
    // Set the value of the atom
    counter.set(previous => previous + 1)
  })

  // Subscribe to value changes
  counter.subscribe(value => updateCounterText(value))

  // Read the value of the atom in the store
  updateCounterText(counter.get())
}

const counter = document.getElementById("counter")
setupCounter(counter)

React (or Preact)

import { createAtom, CONFIG, localStorage, useAtom } from "@yaasl/react" // or "@yaasl/preact"

// Provide an app name to yaasl
CONFIG.name = "demo-react"

// Create a counter atom that is connected to the local storage
const counter = createAtom({
  name: "counter", // local storage key will be "demo-react/counter"
  defaultValue: 0,
  effects: [localStorage()],
})

export const Counter = () => {
  // Use the atom like you would use a state
  const value = useAtom(counter)

  const onClick = () => counter.set(previous => previous + 1)

  return <button onClick={onClick}>count is {value}</button>
}