lell -
Make all your data observable without changing the way you do anything
Very small learning curve, enormous power.
Quick Use
Pop a model, subclassing Le is better but unnecessary
// model.js var livingPerson = name:'z' power_level:9000// orvar livingPerson = name:'z'power_level:9000 // if person extends Le moduleexports = person:livingPerson
Read and subscribe!
// components/person.jsvar model = Component { superprops thisstate = person:modelperson } { modelperson } { modelpersonpower_level++ // auto updates view } { var person = modelperson return <div> <span>personname</span> - personpower_level <button onClick=thistapIncreasePowerLevel /> </div> }
Installation
Via npm:
npm install --save lell
Then require/import:
//orvar Le = Levar Ll = Ll
Usage
Objects/Classes
Quick Living Entity
Just instantiate an Le with a payload
The only keys that cause events are the ones passed into the constructor
var aPerson = name:'z'power_level:9000 var aLivingPerson = aPerson aLivingPerson aLivingPersonpower_level++// console output: 9001
An observable class
Extending an Le is only necessary if you can't init with all your properties or you just want convenience methods (like ajax requests)
The living properties are only the ones we initialize with, so we have have to make sure our initial state holds all keys we wish to cause updates which is set in the _defaults
method
{ // having defaults makes these fields observable even if you haven't initialized with them return name:'' power_level:0 } { superagent } var aLivingPerson = aLivingPerson aLivingPersonname = 'z'// z aLivingPerson// z
Entity Mapping
Provide a map in your Le subclass so that an initial payload is initialized with Le's
{ return friends:Person bestFriend:Person } var friendlyPerson = name:'z' bestFriend: name:'s' power_level:9000 friends: name:'b' power_level:9001 name:'n' power_level:9002 // subscribe to bestFriend changesfriendlyPersonbestFriendfriendlyPersonfriends0
Some state information
Le's have state information you can use to help your web interfaces, ie, agnostic new/edit react views
var p = console//newppower_level = 9000console//newconsole// ["power_level"]pconsole// originalconsole// [] var ep = name:'z' power_level:9000console// originaleppower_level++console// updatedeppower_level--console// originaleppower_level++console// updatedepconsole// originalconsole// []
Rx.Observable available
The Rx observable subject is made available to you:
aLivingPersonsubject aLivingPersonpower_level = 9000// 9000
Silent Updates
Update your instance without kicking off an update
aLivingPerson aLivingPerson// no events
Lists
You can easily create living lists (Ll) that send notifications when the underlying array changes
You need to make changes through the array through the Lls methods addItems
, removeItems
, setItems
Quick list
We can make a simple living list
//orvar Ll = Ll var abe = ...var bush = ...var people = abe bush var livingPeople = people // this means {people: people} livingPeople var kennedy = ... livingPeople// 3livingPeople// 1livingPeople// 2
Sorted List
This is where Lls start getting good, you can supply a sort key/func to your Ll and your list will be sorted (borrows lodash _.sortBy
)
var people = name:'z' power_level:9001 name:'y' power_level:9000var livingPeople = people sort:'power_level' livingPeople livingPeople// x
Meant for Le's
Okay, that wasn't that cool, but Ll's are best when holding Le's
var livingPersonZ = name:'z'power_level:8999var livingPersonY = name:'y'power_level:9000 var livingPeople = people:livingPersonZ livingPersonY sort:'power_level' console// y livingPeople livingPersonZpower_level = 9001// z
Cool, huh? We have a reactive list
Subscribe each
You can listen to all of the items in a list, so when any Le in an Ll changes, you can be notified with that Le
livingPeople livingPersonZpower_level++// 9002
Rx.Observable availability
The observables are available to you, one for the list, subject
, and one for the subscribeEach, itemChangeSubject
// note, you need to pluck people, because the root subject signals with the Le {people, sort}livingPeoplesubject livingPeoplesubject
Subclassing is favorable
It really makes things convenient
var defaultState = people:personA personB sort:'power_level' { state = state ? _ : Object superstate } var initialState = people:personA personC personXvar livingPeople = people livingPeople
Future
- Auto Hydrate/Serialize entire Le/Ll store between server/client
- Le actions
License
The MIT License (MIT)
Copyright (c) 2016 ark
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.