No description, website, or topics provided.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.travis.yml
LICENSE
README.md
index.js
package.json

README.md

el-streamo

Crazy streams of (html) elements! Stream through a template into a list.

like sorta but different.

<img src=https://secure.travis-ci.org/'Dominic Tarr'/el-streamo.png?branch=master>

example

var elstreamo = require('el-streamo')
var elstream =
elstreamo.writable('#id', function (data) {
  //return a HTML element. yeah, this function is a template
  var el = document.createElement('pre')
  el.innerText = JSON.stringify(data)
  return el
})

If the data has an id property, this will be assigned to the elements, and you can do updates.

elstream.write({id: 264, value: 'hello'})
elstream.write({id: 265, value: 'there'})
elstream.write({id: 266, value: 'what'})
elstream.write({id: 267, value: 'ever'})

//this will update the template for the first message!
elstream.write({id: 264, value: 'HELLO'})

customization

elstreamo.writable takes more options to enable deletes, and sorting.

estreamo.writable('#id', {
  //return the id to be used for this element.
  id: function (data) {
    return data.id
  },
  //sort function. (see [sort](#sort))
  sort: function (data1, data2) {
    return data1.x - data2.x
  },
  //return true if this element should be deleted
  delete: function (data) {
    return data._delete
  },
  //return an html element
  template: function (data) {
    var el = document.createElement('pre')
    el.innerText = JSON.stringify(data)
    return el
  },
  //if this returns true, clear all elements.
  clear: function (data) {
    return data === 'CLEAR'
  }
})

Above is pretty much the defaults, read the code.

readable

There is also a readable stream for turning DOM events into streams.

elstreamo.readable(element, {
  click: function (e) {
    return 'click!'
  }
})
//make a stream of changes in an input, or pressing enter.
elstreamo.readable(input, {
  keyup: function (e) {
    if (e.keyCode == 13) //enter
      this.queue(input.value)
  },
  change: function (e) {
    this.queue(input.value)
  },
  blur: function () {
    this.queue(input.value)
  }
})

License

MIT