class Component {
    init() {
        this.user = store.watch(predicate); // récupère un event emitter
        this.user.on('data' => {
            this.render(data);
        });
    }

    render() {
    
    }
    
    onForm(newData) {
        this.user.emit(new CustomEvent('requestChange', newData));
    }
}

class Store {
    watch(predicate, cb) {
        const ee = new EventEmitter();
        this.getData(predicate).then(data => {
            ee.emit('data', data);
        });
        ee.on('requestChange', newData => {
            this.push(newData).then((data) => {
                ee.emit('data', data);
            });
        });
    }
}

class Store {
    async watch(predicate) {
        const data = await this.get();
        return new Proxy(data, myproxy);
    }
}

graph LR
Store -->|retourne| Proxy
Proxy -->|appeler| Store
Store --> XHR
XHR --> Store
Store --> Proxy

graph LR
Store -->|retourne| Proxy
Proxy -->XHR
XHR --> Proxy
Proxy --> Store

<sib-text
    data-uri="http://api.hd.fr/users/1#name">
</sib-text>

<sib-card
    data-uri="http://api.hd.fr/users/1"
>
    <h1
        sib-data-predicate="#name"
        sib-data-target="innerText"
    >
    </h1>
</sib-card>

predicate = http://api.hd.fr/users/1#name

1. Rendu du template

ee.on('data', data => {
    document.querySelectorAll('sib-data-predicate').map(
    e => {
        const predicate = e.getAttribute('sib-data-predicate');
        const target = e.getAttribute('sib-data-target');

        switch(target) {
            case 'innerText':
                e.innerText = data[predicate];
                break;
        }
    });
})