[Cycle.js] Making our toy DOM Driver more flexible

Posted 2020-06-13

Our previous toy DOM Driver is still primitive. We are only able to sends strings as the textContent of the container element. We cannot yet create headers and inputs and all sorts of fancy DOM elements. In this lesson we will see how to send objects that describe what elements should exist, instead of strings as the DOM sink.

 

// Logic (functional)
function main(sources) {
  const click$ = sources.DOM;
  const sinks = {
    DOM: click$
      .startWith(null)
      .flatMapLatest(() => 
        Rx.Observable.timer(0, 1000)
         //describe what element should exist
         .map(i => {
            return {
              tagName: ‘h1‘,
              children: [
                {
                  tagName: ‘span‘,
                  children: [
                    `time esplsed: ${i}`
                  ]
                }
              ] 
            }
         })           
      ),
    Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
  };
  return sinks;
}





// source: input (read) effects
// sink: output (write) effects

// Effects (imperative)
function DOMDriver(obj$) {
  
  function createElement(obj) {
    const element = document.createElement(obj.tagName);
    obj.children
      .filter(c => typeof c === ‘object‘)
      // if it is object, then we need to create another element
      .map(createElement)
      .forEach(c => element.appendChild(c));
    
    obj.children
      .filter(c => typeof c === ‘string‘)
      .forEach(c => element.innerhtml += c);
    return element;
  }
  
  obj$.subscribe(obj => {
    const container = document.querySelector(‘#app‘);
    container.innerHTML = ‘‘;
    const element = createElement(obj);
    container.appendChild(element);
  });
  
  const DOMSource = Rx.Observable.fromEvent(document, ‘click‘);
  return DOMSource;
}

function consoleLogDriver(msg$) {
  msg$.subscribe(msg => console.log(msg));
}

const drivers = {
  DOM: DOMDriver,
  Log: consoleLogDriver,
}

Cycle.run(main, drivers);