Use Xain for elements

xain-el.js

'use strict';

const {reactive, link, pipe, observable, observe} = require('xain');

function Xain(state) {
    class _Xain {
        constructor(props={}) {
            const reaction = this.constructor.reaction || (() => ({}));
            this.props = reactive(Object.assign({}, reaction(state), props));
            observe(this.props, this.__renderToScreen.bind(this));
            this.__renderToScreen();
        }
        __renderToScreen() {
            console.log(this.render());
        }
        render() {
            return '';
        }
    }

    return _Xain
}

const state = observable({
    firstName: 'Foo',
    lastName: 'Bar',
    age: 5
})

class Foo extends Xain(state) {
    static reaction(state) {
        return {
            name: link(state, ({firstName, lastName}) => firstName + ' ' + lastName),
            age: pipe(state, 'age')
        }
    }
    render() {
        const {name, age} = this.props;
        return `<div>${name} - ${age}</div>`;
    }
}


let x = new Foo()
state.firstName = 'Rawr';
state.firstName = 'Rawr';