lom_atom

lom_atom

State management with error handling and reactive cache done right.

Alternative standalone implementation of eigenmethod mol_atom.

• Tiny size (about 7kb minified)
• Memory-efficient
• Simpler, less core concept than mobx
• Loading status / error handling features

Install npm install --save lom_atom

Observable state

import {mem} from 'lom_atom'
class Todo {
    id = Math.random()
    @mem title = ''
    @mem finished = false
}

Computed values

One decorator for all cases.

class TodoList {
    @mem todos = []
    @mem get unfinishedTodos() {
        return this.todos.filter((todo) => !todo.finished)
    }
}

Like mobx, unfinishedTodos is updated automatically when a todo changed.

Side effects

Like mobx reaction produces a side effect for making network requests, etc. But side effects in lom are simpler.

class TodoList {
    @mem set todos(todos: Todo | Error) {}

    @mem get todos() {
        // Side effect, cached in mem
        fetch('/todos')
            .then((todos) => {
                this.todos = todos
            })
            .catch(e => this.todos = e)

        throw new mem.Wait()
    }

    @mem get unfinishedTodos() {
        return this.todos.filter((todo) => !todo.finished)
    }
}

class Listener {
    _list = new TodoList()
    @mem listen() {
        try {
            console.log('total todos:', this._list.todos.length)
            console.log('unfinished todos:', this._list.unfinishedTodos.length)
        } catch (e) {
            if (e instanceof mem.Wait) {
                console.log('loading...')
            } else {
                console.error('error', e.message)
            }
        }
    }
}

const listener = new Listener()
listener.listen()

Cache management

Killer feature, grabbed from mol_atom. We can reset cache on get or obviously set cache value, using magic force property.

import {force, mem} from 'lom_atom'

class TodoList {
    @force force: TodoList

    @mem set todos(todos: Todo | Error) {
        console.log('set handler')
    }

    @mem get todos() {
        console.log('get handler')
        return [someTodo]
    }
}
const list = new TodoList()

list.todos = [someTodo] // console: set handler
list.todos = [someTodo] // someTodo already set - no handler call

list.force.todos = [someTodo] // force, console: set handler

list.todos // console: get handler

list.todos // return cached value

list.force.todos // console: get handler

Key-value

Basic dictionary support. See eigenmethod mol_mem.

class TodoList {
    @mem.key todo(id: string, next?: Todo, force?: boolean): Todo {
        if (next === undefined) {
            return {}
        }

        return next
    }
}
const list = new TodoList()
list.todo('1', {id: 1, title: 'Todo 1'}) // set todo
list.todo('1') // get todo

Changelog

1.0.11 (2017-08-24)

<a name="1.0.10"></a>