ivix

Application state management library for ivi inspired by Redux.

ivi library provides a low level API that allows to build almost zero cost connect components, and ivix API is designed to get the most out of it, for example selector checking doesn't need any memory allocations when nothing is changed.

Current Status

Experimental.

Usage Example

import { createStore, selectData, connectComponent } from "ivix";
import { render, update, $h, Events } from "ivi";
 
const store = createStore(
    { counter: 0 },
    function (prev, action) {
        switch (action.type) {
            case "INCREMENT":
                return { ...prev, counter: prev.counter + 1 };
            case "DECREMENT":
                return { ...prev, counter: prev.counter - 1 };
        }
        return prev;
    },
    update,
);
 
function inc() { store.dispatch({ type: "INCREMENT" }); }
function dec() { store.dispatch({ type: "DECREMENT" }); }
 
function selectCounter(prev) {
    const counter = store.getState().counter;
    if (prev && prev.in === counter) {
        return prev;
    }
    return selectData(counter);
}
 
function CounterDisplay(counter) {
    return $h("div").children([
        counter,
        $h("button").events({ click: Events.onClick(() => { inc(); }) }).children("+1"),
        $h("button").events({ click: Events.onClick(() => { dec(); }) }).children("-1"),
    ]);
}
 
const $CounterDisplay = connectComponent(selectCounter, CounterDisplay);
 
render($CounterDisplay(), document.getElementById("app"));

API

Create Store

function createStore<T, U>(
    state: T,
    reducer: (prev: T, action: U) => T,
    onChange: () => void,
): Store<T, U>;

Connect

VNode factory constructors that connect selectors.

function connect<T, U, K>(
    select: (prev: SelectData<K, U> | null, props: null | T, context: Context) => SelectData<K, U>,
    render: (props: U, context: Context) => IVNode<any>,
): (props: null | T) => VNode<T>;
 
function connectComponent<T, U, K>(
    select: (prev: SelectData<K, U> | null, props: null | T, context: Context) => SelectData<K, U>,
    component: ComponentClass<U>,
): (props: null | T) => VNode<null | T>;

Selectors

Helper functions to write selectors.

By default, all selectors are memoized locally, with this helper functions it is possible to create selectors memoized globally, or somewhere else, for example in Context.

function selectData<T, U>(i: T, o?: U): SelectData<T, U>;
 
function memoizeSelector<T, U extends SelectData>(
    select: (prev: U | null, props: T, context: Context) => U,
    ref: (v?: U | null) => U | null,
): (prev: U | null, props: T, context: Context) => U;
 
function memoizeSelectorGlobally<T, U extends SelectData>(
    select: (prev: U | null, props: T, context: Context) => U,
): (prev: U | null, props: T, context: Context) => U;

Mutable Collections

Mutable collections are tiny wrappers around primitive javascript collections with a method that creates a new instance with the same items.

They can be used as an efficient way to modify collections and update references, so it is easy to detect when something is changed.

class MutableArray<T> {
    readonly items: T[];
    constructor(items: T[] = []);
    update(): MutableArray<T>;
}
 
class MutableSet<V> {
    readonly items: Set<V>;
    constructor(items: Set<V> = new Set<V>());
    update(): MutableSet<V>;
}
 
class MutableMap<K, V> {
    readonly items: Map<K, V>;
    constructor(items: Map<K, V> = new Map<K, V>());
    update(): MutableMap<K, V>;
}