# ivix

> Javascript (TypeScript) state management library for ivi.

Latest version **0.1.0** (published 2017-03-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install ivix
pnpm add ivix
yarn add ivix
bun add ivix
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-03-09 |
| First published | 2017-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Boris Kaul |
| Maintainers | localvoid |
| Keywords | ivi, state, redux, ui, virtual, dom, virtualdom, vdom, diff, browser, typescript |

## Links

- npm: https://www.npmjs.com/package/ivix
- Repository: https://github.com/ivijs/ivix
- Issues: https://github.com/ivijs/ivix/issues
- npm.io page: https://npm.io/package/ivix

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2017-03-09

## README

# ivix

Application state management library for [ivi](https://ivijs.github.io/ivi/) inspired by [Redux](http://redux.js.org/).

[ivi](https://ivijs.github.io/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

```js
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

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

### Connect

VNode factory constructors that connect selectors.

```ts
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`.

```ts
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.

```ts
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>;
}
```

---
_Source: https://npm.io/package/ivix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._