[Cycle.js] Hyperscript as our alternative to template languages

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.