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

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

Code to be refactored:

functionMain (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). map (i =i),}; returnsinks;}

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:

functionh (TagName, children) {return{tagname:tagname, children:children}}//Logic (functional)functionMain (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). map (i =i),}; returnsinks;}

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

functionh (TagName, children) {return{tagname:tagname, children:children}}functionH1 (children) {return{tagName:' H1 ', Children:children}}functionspan (children) {return{tagName:' SPAN ', Children:children}}//Logic (functional)functionMain (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). map (i =i),}; returnsinks;}

The reason why we ' re introducing this function in the first place was 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 was a precursor to the 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 is this array With the span. Then we can also simplify this error function as that.

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