heerlik

*A lightweight, turnkey alternative for managing your application state.* Designed to: - be small and have zero runtime dependencies - minimise abstractions associated with state updates - be typesafe & immutable - unburden the user from the need to d

Usage no npm install needed!

<script type="module">
  import heerlik from 'https://cdn.skypack.dev/heerlik';
</script>

README

OULIK

Build Status Coverage Status Package Size Dependency count

Unambigiuous, in-line state-management

  • ERGONOMIC - Completely typesafe & compact API with a standardised set of abstractions for state updates
  • DEBUGGABLE - Via the Redux Devtools extension
  • ATOMIC OR COMPOSITE - Use small stores where performance is critical, and a single store everywhere else
  • FAST - Roughly equivalent to Immutable and significantly faster than Immer
  • IMMUTABLE - Every state update will result in a new immutable state tree
  • PORTABLE - Designed to be framework-agnostic. Currently supports bindings for:

MOTIVATION

State operations are typically hidden behind an opaque facade of user-defined 'actions'. Some actions fail to describe a state update accurately while other actions needlessly re-describe very simple operations. Furthermore, as your code evolves, there can be a 'drift' between action types, and the state thay purport to operate on.

This library's unique API makes the precise nature of state updates extremely obvious by exploiting the type system and removing user-defined abstractions. As a result, your state-management becomes far more direct, typesafe, legible, compact, refactorable, and debuggable.

GETTING STARTED

npm install oulik

import { make } from 'oulik';

const getCanvas = make('canvas', {              // <- Your store will be be registered with the Redux Devtools Extension using this name.
  size: { width: 10, height: 10 },              // <- Your initial state must be serializable, but can be a simple primitive value, or something far more nested.
  border: { thickness: 1 }
});

WRITING STATE

getCanvas(s => s.size.width).replaceWith(20);   // Devtools will update your state using the action: `{ type: 'size.width.replaceWith()', payload: 20 }`.

All write options...

READING STATE

const canvasWidth = getCanvas(s => s.size.width).read();

All read options...