lom_atom

lom_atom

State management with error handling and reactive cache done right.

Alternative standalone implementation of eigenmethod mol_atom.

• About 11kb minified
• Memory-efficient
• Simpler, less core concept than mobx
• Loading status / error handling features

Usage examples with reactive-di: example source, demo, todomvc benchmark

Install npm install --save lom_atom

• Observable property
• Observable get/set
• Controlling cache
• Method-style properties
• Computed values
• Side effects
• Key-value
• Actions

Observable property

import {mem} from 'lom_atom'
class Todo {
    @mem title = ''
}
const todo = new Todo()
todo.title = '123'

Observable get/set

import {mem} from 'lom_atom'
class Todo {
    @mem set title(next: string) {
        // test next
    }
    @mem get title(): string {
        return 'default'
    }
}
const todo = new Todo()
todo.title = '123'

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

Lom atom memoized property can interact with upstream (server, etc). Each observable or computed property can be used in 6 cases: get, force get, set, force set, reset, push. Modifiers helps to produce and control side effects for making network requests.

import {mem} from 'lom_atom'

class TodoList {
    @mem set todos(todos: Todo) {
        fetch({
            url: '/todos',
            method: 'POST',
            body: JSON.stringify(todos)
        })
            .catch(error => this.todos = mem.cache(error))

        console.log('set handler')

        throw new mem.Wait()
    }

    @mem get todos() {
        console.log('get handler')

        fetch('/todos')
            .then((data) => this.todos = mem.cache(data))
            .catch(error => this.todos = mem.cache(error))

        throw new mem.Wait()
    }
}
const list = new TodoList()

Modifier usage	Description	When call handler	Handler
store.todos	Try to get value from cache, if empty - fetch upstream	If cache is empty or upstream changed	get todos (): Todo[] {}
store.todos = mem.force()	Reset cache and force load from upstream	Always	get todos (): Todo[] {}
store.todos = []	Set value to upstream	If value is differs from cache	set todos (todos: Todo[]) {}
store.todos = mem.force([])	Force set value to upstream	If value is differs from cache	set todos (todos: Todo[]) {}
store.todos = mem.cache()	Reset cache, but not fetch from upstream	Never	No
store.todos = mem.cache([])	Save async answer from upstream to cache	Never	No

Key-value

Basic dictionary support. First argument is an key of any type. See eigenmethod mol_mem.

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

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

Actions

State updates are asynchronous, but sometime we need to do transactional synced updates via action helper:

import {action, mem} from 'lom_atom'
class Some {
    @mem name = ''
    @mem id = ''

    @action set(id: string, name: string) {
        this.id = id
        this.name = name
    }
}
const some = new Some()

// Transactionally changed in current tick:
action(() => {
    some.name = 'test'
    some.id = '123'
})

// or

some.set('123', 'test')

Changelog

3.0.5 (2017-11-29)

<a name="3.0.4"></a>