Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can create our own template language is to write a function that returns these objects for us. This lessons shows how we can use these functions as a DSL to create our DOM description objects.

 

Code to be refactored:

function main(sources) {  const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');  const sinks = {    DOM: mouseover$      .startWith(null)      .flatMapLatest(() =>         Rx.Observable.timer(0, 1000)         .map(i => {           return {             tagName: 'H1',             children: [               {                 tagName: 'SPAN',                 children: [                    `Seconds elapsed: ${i}`                 ]               }             ]           };         })                 ),    Log: Rx.Observable.timer(0, 2000).map(i => 2*i),  };  return sinks;}

Inside map, return a large object which represent html element.  

 

We can create a function which accept 'tagName'and 'children', to simply our main function:

function h(tagName, children) {    return {    tagName: tagName,    children: children  }}// Logic (functional)function main(sources) {  const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');  const sinks = {    DOM: mouseover$      .startWith(null)      .flatMapLatest(() =>         Rx.Observable.timer(0, 1000)         .map(i =>  h('H1', [               h('SPAN', [                    `Seconds elapsed: ${i}`                 ])             ])         )                 ),    Log: Rx.Observable.timer(0, 2000).map(i => 2*i),  };  return sinks;}

 

Also we can create function for each tagName to even simply our code:

function h(tagName, children) {    return {    tagName: tagName,    children: children  }}function h1(children){    return {    tagName: 'H1',    children: children  }}function span(children){   return {    tagName: 'SPAN',    children: children  } }// Logic (functional)function main(sources) {  const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');  const sinks = {    DOM: mouseover$      .startWith(null)      .flatMapLatest(() =>         Rx.Observable.timer(0, 1000)         .map(i =>  h1([              span([                    `Seconds elapsed: ${i}`                 ])             ])         )                 ),    Log: Rx.Observable.timer(0, 2000).map(i => 2*i),  };  return sinks;}

 

The reason why we're introducing this function in the first place is that it looks really similar to what exists in cycle-dom, and it's a function called hyperscript. That's where the H comes from. That's our alternative to a template language.

This is a precursor to what we're going to see in cycle-dom. We're going to replace this outermost object, as well, with return H of H1 as a tag name, and the children are this array with the span. Then we can also simplify this error function like that.