serapath / dom-stream

stream dom elements

dom-stream

stream a dom element and it's updates into a dom element container

usage

npm install dom-stream

var bel = require('bel')
var domstream = require('dom-stream')

function demoComponent (opts) {
  opts || (opts = {})
  opts.placeholder = bel`<div class='loading'>...</div>` // optional
  
  var el$ = domstream(opts) // el$ is a read stream AND dom element
  
  el$.on('data', function (el) { console.log('dom element update', el) })
  setTimeout(next, 500, 0) // update dom element el$
  
  return el$
  function next (i) { el$.push(render(i)); setTimeout(next, 500, i++) }
  function render () { return bel`<div>update ${i}</div>` }
}

var el$ = demoComponent()
document.body.appendChild(el$)

demo https://serapath.github.io/dom-stream/

dom-stream's Issues

inspiration

// example of switching - how system operates over time
// use eventstream1 until eventcomboX happens, then switch to eventstream2
var startEditEe = extractEventE(label, 'dblclick')
    .mapE(function() {
        li.className = 'editing';
        edit.focous();
        return extractValueE(edit);
    });
var stopEditEe = mergeE(returnPressE(edit), blurE(edit))
    .mapE(function(){
        li.className = todo.completed ? 'completed' : '';
        return oneE(sentinel);
    });
var eventsE = switchE(mergeE(startEditEe, stopEditEe));