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

Posted 2020-06-14

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.