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)},
    amendValue: val => val + 3
  }
})

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 with default amend of add 3')
example.rxAdd('test')
console.log('changing test to 20, 30 directly')
example.test = 20
example.rxAmendValue() // removes global amend
example.test = 30
example.rxSubscribe('test','custom',(prop)=>console.log('#############late subscription to \'test\' after 30 ############',prop))
console.log('amending emitted value with path',example.rxAmendValue('test','path'))
console.log('changing test to 40 via set')
example.set('test',40)
console.log(
  'amending emitted value custom function',
  example.rxAmendValue('test',val => { return { value:val+5, msg:'additional 5 was added to set value'}})
)
example.set('test',50)

console.log('removing amend function ',example.rxAmendValue('test',null))
example.set('test',60)
console.log('making a deeper property \'another.foo\' reactive')
console.log('changing any default amend function ',example.rxAmendValue(val=> val + ':amended'))
example.rxAdd('another.foo')

example.on('foo', (val,path) => { console.log('emitted via just \'foo\' ',val,'path is also emitted:',path)})
example.on('another.foo', (val,path) => { console.log('emitted via just \'another.foo\',',val,'path is undefined',path)})

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)

example.on('demo',(value) => {
  console.log('shoud do simple emit of test>', value)
})
example.emit('demo','test')