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:
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
@mem title = ''const todo = todotitle = '123'
Observable get/set
@mem { // test next } @mem get : string return 'default' const todo = todotitle = '123'
Computed values
One decorator for all cases.
@mem todos = @mem { return thistodos }
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 4 cases: get, set, cache set, cache reset. Modifiers helps to produce and control side effects for making network requests.
@mem { const promise = console throw 'Loading /todos...' promise } @mem get : Todos console throw @memmanual get : IUser throw {} @mem { return todos: thistodos user: thisuser } @mem { return todos: mem user: mem }const list =
this.todos
- get value, if cache is empty - invokesget todos
and actualize cache.this.todos = data
- set value, if cache empty - pass value toset todos() {}
and actualize cache.mem.cache(this.todos = data)
- set new value or error directly into cache (push).mem.cache(list.todosWithUser)
- deep reset cache for todosWithUser all its dependencies (todos) and notify all dependants about changes.@mem.manual get user() {...}
- exclude user from deep reset.mem.reset(list.todosWithUser)
resets todos but not user. If you want to reset user, use helper directly on user:mem.cache(list.user)
mem.async(this.todos)
- initiate parallel loading todos and user (wrap error in proxy, do not throw error if data are fetching).throw new Promise(...)
- Load data and handle errors and pending State
Key-value
Basic dictionary support. First argument is an key of any type. See eigenmethod mol_mem.
@memkey : Todo if next === undefined // get mode return {} return next const list = list // set todolist // get todo
Actions
Wrapping method in action decorator enables error handling in component event callbacks. Without it, unhandlered exception throws only into console.
State updates are asynchronous, but sometime we need to do transactional synced updates via action helper: @action.sync
(Usable for react input, without it cursor position jumps due to asyncronous state updates)
@action.defer
runs decorated action on the next tick (Usable for passing valid mounted DOM-node from refs into action in the react).
@mem name = '' @mem id = '' @action { thisid = id thisname = name } @actionsync { thisid = id thisname = name }const some = // View updates on next tick:some // View updates in current tick:some