80 lines
3.3 KiB
JavaScript
80 lines
3.3 KiB
JavaScript
import RxClass from '../src/rx-class.js'
|
|
|
|
const log = o => console.dir(o, { depth: 5 })
|
|
|
|
const rxopts = Symbol.for('rx-class-opts')
|
|
|
|
class Example extends RxClass {
|
|
constructor (opts = {}) {
|
|
super(opts)
|
|
this.test = {
|
|
tomrrow: { bar: 'fight', foo: 'fighters' },
|
|
today: { bing: 'bing', bong: { who: 'first', what: 'second' } }
|
|
}
|
|
}
|
|
}
|
|
const opts = {
|
|
[rxopts]: {
|
|
handler: value => { console.log('-----------default subscription handler-------', value) },
|
|
skip: 1
|
|
}
|
|
}
|
|
|
|
console.log('options\n', opts)
|
|
|
|
const example = new Example(opts)
|
|
|
|
// console.log('-----EXAMPLE: TRAVERSE OF EXISTING OBJECT OR WHEN SETTING A PLAIN OBJECT-----------')
|
|
// console.log('instance before doing rx on properties\n')
|
|
// // 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('----- traversing existing object \'test\' and making all leaves reactive ------\n')
|
|
// example.rxAdd('test', { traverse: true })
|
|
// // log(example)
|
|
// console.log('------------------------------------------')
|
|
|
|
// console.log('now get value for bong directly and via get', example.test.today.bong, example.get('test.today.bong'))
|
|
// console.log('Note: using example.get will traverse bong and get actual values')
|
|
|
|
// console.log('adding new property which is made reactive by default \'test.today.bong.why\'')
|
|
// example.set('test.today.bong.why', 'do not know')
|
|
|
|
// console.log('------\'.bong\', raw object ------ \n', example.test.today.bong)
|
|
// console.log('------ \'.bong\', values object ------\n>', example.get('test.today.bong'))
|
|
// console.log('------, note: raw leaf access returns value not [Getter/Setter] ==>', example.test.today.bong.why)
|
|
// console.log('\nnow removing reactivty from \'test\'')
|
|
// example.rxRemove('test', { confirm: true })
|
|
// console.log('------\'.test\', raw object ------ \n', example.test)
|
|
// console.log('--------------------------')
|
|
|
|
console.log('\n\nnow add a completely new object to root of \'foundation\' and make it reactive without traverse')
|
|
example.foundation = { planets: ['Trantor', 'Helcion'], persons: { giskard: { alias: 'daneel' }, hari: { name: 'seldon', planet: 'Helcion' } } }
|
|
console.dir(example.foundation)
|
|
example.rxAdd('foundation.persons.hari.name')
|
|
// console.log('foundation', example.isRx('foundation'))
|
|
console.log(example.isRx('foundation.persons.hari'))
|
|
// console.log('------\'foundation\', raw object ------ \n')
|
|
// // log(example)
|
|
// console.log('get raw nested property raw or with get returns the same')
|
|
// console.log(example.foundation.hari, example.get('foundation.hari'))
|
|
|
|
// console.log('now change one of the nested properties and see if whole object foundation is reactive')
|
|
|
|
// example.foundation.hari.planet = 'Trantor'
|
|
// example.set('foundation.hari.planet', 'Trantor')
|
|
|
|
// console.log(example.foundation)
|
|
// log(example)
|
|
// console.log('--------instance after doing rx----\n')
|
|
// console.log(example)
|
|
// console.log('--------------------------')
|
|
|
|
// console.log('now change a reactive property directly like')
|
|
// console.log('example.foundation.giskard = \'daneel a robot\'')
|
|
// example.foundation.giskard = 'daneel a robot'
|
|
// console.log('the new value extracted by the getter is', example.foundation.giskard)
|