uci-utils-rx-class/examples/example.js

import RxClass from '../src/rx-class.js'

class Example extends RxClass  {
  constructor(opts={}){
    super(opts)
    this.test = 10
    this.another = { bar:'bust', foo:3}
  }
}

const example = new Example({
  _rx_ : {
    // handler: value => {console.log('-----------default subscription handler-------', value)}
  }
})

console.log('instance before doing rx on properties\n')
console.log(example)
console.log('--------------------------')

example.on('changed', (prop) => console.log('emitted----a property changed-----',prop))
example.on('test', (val) => console.log('emitted value of test',val))

console.log('making \'test\' reactive')
example.rxAdd('test')
console.log('changing test to 20, 30 directly')
example.test = 20
example.test = 30
example.rxSubscribe('test','custom',(prop)=>console.log('#############late subscription to \'test\' after 30 ############',prop))
console.log('changing test to 40 via set')
example.set('test',40)

console.log('making a deeper property \'another.foo\' reactive')
example.rxAdd('another.foo')

example.another.foo = 7

console.log('direct access of another.foo',example.another.foo)
console.log('access via get of another.foo',example.get('another.foo'))

console.log('making a deeper property \'some.thing\' reactive that did not exist by setting property')
example.set('some.thing','this will be reactive')
console.log(example.$get('some'))
console.log(example.get('some'))
example.set('some.thing','still reactive')
example.some.thing='directly assigned'
console.log('--------------------------')
console.log('instance after adding rx to properties\n')
console.log(example)
console.log('--------------------------')

console.log('now removing reactivity from  \'test\'')
example.rxRemove('test',{confirm:true})
console.log('\'test\' now holds unreactive value')
console.log('--------------------------')
console.log('instance after removing rx from \'test\'\n')
console.log(example)
console.log('--------------------------')
console.log('now removing reactivity from  \'test\' again')
example.rxRemove('test',{confirm:true})

console.log('---------trying out raw $get and $set-----------')
example.a = {}
console.log('$set does to make reactive and returns value set\n',example.$set(example.a,'test.object',{do:'dah', bing:'bong'}))
console.log('getting directy:',example.a)
console.log('using $get with passed object:',example.$get(example.a.test,'object.do'))
console.log('deleting do prop only', example.$del(example.a,'test.object.do',true))
console.log('it\'s gone see:',example.a)