[Cycle.js] Fine-grained control over the DOM Source

Currently in our main() function, we get click$ event.

function main(sources) {
const click$ = sources.DOM;
const sinks = {
DOM: click$
.startWith(null)
.flatMapLatest(() =>
Rx.Observable.timer(0, 1000)
//describe what element should exist
.map(i => {
return {
tagName: 'h1',
children: [
{
tagName: 'span',
children: [
`time esplsed: ${i}`
]
}
]
}
})
),
Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
};
return sinks;
}

What if we want to change it to mouse event? we need to somehow modiy the DOMSource it return from:

function DOMDriver(obj$) {

function createElement(obj) {
const element = document.createElement(obj.tagName);
obj.children
.filter(c => typeof c === 'object')
// if it is object, then we need to create another element
.map(createElement)
.forEach(c => element.appendChild(c));

obj.children
.filter(c => typeof c === 'string')
.forEach(c => element.innerHTML += c);
return element;
}

obj$.subscribe(obj => {
const container = document.querySelector('#app');
container.innerHTML = '';
const element = createElement(obj);
container.appendChild(element);
});

const DOMSource = Rx.Observable.fromEvent(document, 'click');
return DOMSource;
}

So for main() function, we need to call a function able to manage the tagName and eventType:

const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');

And for the DomDirver, we need add a function which enable user to pass down element and eventType:

const DOMSource = {
selectEvents: function(tagName, eventName){
return Rx.Observable.fromEvent(document, eventName);
}
};

-------------------------

Code:

// Logic (functional)
function main(sources) {
const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');
const sinks = {
DOM: mouseover$
.startWith(null)
.flatMapLatest(() =>
Rx.Observable.timer(0, 1000)
//describe what element should exist
.map(i => {
return {
tagName: 'h1',
children: [
{
tagName: 'span',
children: [
`time esplsed: ${i}`
]
}
]
}
})
),
Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
};
return sinks;
}

// source: input (read) effects
// sink: output (write) effects

// Effects (imperative)
function DOMDriver(obj$) {

function createElement(obj) {
const element = document.createElement(obj.tagName);
obj.children
.filter(c => typeof c === 'object')
// if it is object, then we need to create another element
.map(createElement)
.forEach(c => element.appendChild(c));

obj.children
.filter(c => typeof c === 'string')
.forEach(c => element.innerHTML += c);
return element;
}

obj$.subscribe(obj => {
const container = document.querySelector('#app');
container.innerHTML = '';
const element = createElement(obj);
container.appendChild(element);
});

const DOMSource = {
selectEvents: function(tagName, eventName){
return Rx.Observable.fromEvent(document, eventName);
}
};
return DOMSource;
}

function consoleLogDriver(msg$) {
msg$.subscribe(msg => console.log(msg));
}

const drivers = {
DOM: DOMDriver,
Log: consoleLogDriver,
}

Cycle.run(main, drivers);