A Pen by francesco agati.

index.html

<div id="counter1"></div>
<span id="counter2"></span>
<span id="incr">[+]</span>

rendering-pipeline-with-bacon.js-and-mercury-virtual-dom.markdown

rendering pipeline with bacon.js and mercury virtual dom

A Pen by francesco agati on CodePen.

License.

script.livescript

h = mercury.h
        
diff  = (stream) -> 
  stream.patches = mercury.diff stream.old-frame,stream.new-frame
  stream
    
    
patch = (streams) -> request-animation-frame ->
    for stream in streams
      node = document.get-element-by-id(stream.node-id)
      if node.children.length is 0
        child = mercury.create stream.new-frame
        node.append-child child
      else
        mercury.patch node.children.0, stream.patches

            
acc = (old-frame,new-frame) ->
  | old-frame is null => new-frame:new-frame,old-frame:new-frame
  | _           => new-frame:new-frame,old-frame:old-frame
            
pipeline-rendering = new Bacon.Bus!
pipeline-rendering.map(diff)
  .bufferWithTimeOrCount(16, 3)
  .do-action(patch)
  .log!


render-fn = (counter) ->
  -> 
    h \div do
      * h \span "Hello counter "
        h \span "#{counter++}"


render1 = do ->
  
  template = render-fn 0
  
  Bacon.from-poll 100, -> new Bacon.Next template! 
  .diff(null,acc)
  .map ->  it.node-id = 'counter1'; it;
  .log!

render2 = do ->
  
  template = render-fn 0
  
  stream = $(document.body)
    .as-event-stream \click,'#incr'
    .to-property ""
    .map -> template!
    .diff(null,acc)
    .map ->  it.node-id = 'counter2'; it;
  stream
  
pipeline-rendering.plug render1
pipeline-rendering.plug render2

style.css

    html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }