Dynamic props and nested props

Dynamic properties

You might have already noticed that you can dynamically add properties to a SubX object. And newly added properties are also reactive:

const s = SubX.create({ prop1: 1 })
s.$.subscribe(console.log)
s.prop2 = 2

Console output

{ type: 'SET', path: ['prop2'], val: 2, oldVal: undefined }

In the sample above, prop2 is dynamically added property and we got its events.

Nested objects

It's very common to have nested objects. And this library handles them pretty well. All nested objects in a SubX object are also SubX objects.

const rectangle = SubX.create({ position: { }, size: { } })
rectangle.position.$.subscribe(console.log)
rectangle.size.$.subscribe(console.log)
rectangle.position.x = 0
rectangle.position.y = 0
rectangle.size.width = 200
rectangle.size.height = 100

In the sample above, rectangle is a SubX object. It has two nested objects: positionand size. As I said before, nested objects inside a SubX object are also SubX objects. So positionand size are SubX objects. That's why you can subscribe two theirs events.

Console output

{ type: 'SET', path: ['x'], val: 0, oldVal: undefined }
{ type: 'SET', path: ['y'], val: 0, oldVal: undefined }
{ type: 'SET', path: ['width'], val: 200, oldVal: undefined }
{ type: 'SET', path: ['height'], val: 100, oldVal: undefined }