Introduction

Exome is store manager that is designed for managing deeply nested store structures with ease. Can be used with any UI framework. Some of the noteworthy features:

• 📦 Small: Just 0.8 kB minizipped (with 0 dependencies)
• 🚀 Fast: See benchmarks
• 😍 Simple: Uses classes as state
• 🤝 Agnostic: Integrates with any UI framework
• 🔭 Devtools: See devtools extension

Install Exome

First things first, download and install exome package. It can be installed using npm.

npm install exome

Your first store

To create a new store, just build a new class and extend it from Exome. This will make all the necessary setup for state to be listen for actions.

For example create a new counter store, that will have two synchronous actions increment and decrement that will change value for count property.

Create a new store file counter.store.ts and fill it with our first store:

import { Exome } from "exome"
 
// We'll have a store called "CounterStore"
export class CounterStore extends Exome {
  // Set up one property "count" with default value `0`
  public count = 0
 
  // Create two actions that will update "count" value
  public increment() {
    this.count += 1
  }
 
  public decrement() {
    this.count -= 1
  }
}

Now that we have this first store, we can initialize it just like any other class to use it. We can do it in the same file if it's single global store where a lot of different parts need to access it. But if we expect there to be many counters, we can do it wherever we need it.

In this case we want many counters so lets initialize one of them in index.ts.

import { CounterStore } from "./counter.store.ts"
 
// Initialize new counter store
const counterStore = new CounterStore()
 
// It contains default values
counterStore.count // => 0
 
// We can call actions and use this instance as usual
counterStore.increment()
 
counterStore.count // => 1

For now this is not the impressive, currently there's nothing that listens to changes in that instance. So lets do that now using react integration. We'll use jsx in this example so we need to rename index.ts file to index.tsx.

import { useStore } from "exome/react"
import { createRoot } from "react-dom/client";
 
import { CounterStore } from "./counter.store.ts"
 
const counterStore = new CounterStore()
 
function App() {
  // `useStore` will update component on action calls
  const { count, increment, decrement } = useStore(counterStore);
 
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}
 
createRoot(document.body).render(<App />);

Actions don't have to be called in the same component to trigger updates. For example adding this outside the component will update it too:

setInterval(counterStore.increment, 1000);

Live code playground

And there you have it, your first basic store.