<div id="app"></div>
window.xs = window.xstream.default;
window.xs.fromEvent = window.fromEvent.default;
function createElement(obj) {
const elem = document.createElement(obj.tagName);
obj.children.forEach(child => {
if (typeof child === "object") {
elem.appendChild(createElement(child));
} else {
elem.textContent = child;
}
});
return elem;
}
function main(sources) {
const click$ = sources.DOM;
return {
DOM: click$
.startWith(null)
.map(() => xs.periodic(1000).fold(prev => prev + 1, 0))
.flatten()
.map(i => {
return {
tagName: "H1",
children: [
{
tagName: "SPAN",
children: [`Seconds elapsed: ${i}`]
}
]
};
}),
log: xs.periodic(2000).fold(prev => prev + 1, 0)
};
}
function domDriver(text$) {
text$.subscribe({
next: obj => {
const app = document.querySelector("#app");
app.textContent = "";
const elem = createElement(obj);
app.appendChild(elem);
}
});
const domSource = xs.fromEvent(document, "click");
return domSource;
}
function logDriver(msg$) {
msg$.subscribe({
next: str => {
console.log(str);
}
});
}
Cycle.run(main, {
DOM: domDriver,
log: logDriver
});
View Compiled
This Pen doesn't use any external CSS resources.