dotto.x

Dotto.x is a tiny state manager for React, Svelte, and vanilla JS.

• Lightweight. Core is less than 135 bytes (minified and gzipped). Zero dependencies.
• Easy but strong. Simple working principle without magic but with all features from big state managers.
• Deep observable. You can subscribe and follow pinpoint changes without thinking about multiple re-renders and memoization.
• Strong plugin system. You can enhance your store with plugins. Logging, undoing changes, connecting Redux-devtools, and anything else.
• Tree Shakable. All library is split into small modules.
• Strong TypeScript support.

---

Status

⚠️ ⚠️ ⚠️

Project is in progress now. Please wait for version 1.0.0.

TODOS

• [ ] Documentation
• [ ] JSDoc comments
• [ ] Vue, RN, Solid bindings
• [ ] Examples on all frameworks

Installation

Using npm

npm i dotto.x

Using yarn

yarn add dotto.x

Basic usage

Atomic stores

import { createAtom } from 'dotto.x'

const userName = createAtom('John')

userName.listen(value => {
  // do something
})

userName.set('John Constantine')

Mutable stores

import { createStore } from 'dotto.x'

const user = createStore({ name: 'John' })

user.watch('name', value => {
  // do something
})

userName.set('name', 'John Constantine')

Computed

Combine your stores

Subscribe to store or part of stores using take.

import { createStore, computed, take } from 'dotto.x'

const user = createStore({ name: 'John', id: 'some_id' })
const projects = createStore({
  some_id: { name: 'Portfolio' },
  some_other_id: { name: 'Awesome Project' }
})

const targetProject = computed(() => {
  let userId = take(user, 'id')
  return take(projects, userId)
})

targetProject.subscribe(value => /* do something */)

user.set('id', 'some_other_id')

Computed operators

take

• get value and subscribe to this paths

deep

• get value and subscribe to all store

Use with React

Install dotto.x binding to React:

Using npm

npm i @dotto.x/react

Using yarn

yarn add @dotto.x/react

store.js

import { createStore, computed, take, update } from 'dotto.x'

const user = createStore({ name: 'John', id: 'some_id' })
const projects = createStore({
  some_id: { name: 'Portfolio' },
  some_other_id: { name: 'Awesome Project' }
})

export const targetProject = computed(() => {
  let userId = take(user, 'id')
  return take(projects, userId)
})

export const changeUser = newUser => {
  return update(user, () => newUser)
}

ProjectCard.jsx

import { useStore } from '@dotto.x/react'
import { targetProject } from './store'

export const ProjectCard = () => {
  const project = useStore(targetProject)
  return <div>{project.name}</div>
}