domnode-dom
Turn DOM elements into readable / writable streams.
Designed for use with Browserify and domnode.
var domstream = input = document output = document // replace the contents entirely with plain text generated// by the <input> element!domstream // grab a url and replace the body with its contents! http // extend mimetypes:domstreamWriteStreamprototype { var img = document imgsrc = data return img} // now anything you type will be used as the source for an image tag!// or replace the contents entirely with plain text!domstream
To view the example:
$ git clone git://github.com/chrisdickinson/domnode-dom.git$ cd domnode-dom.git$ browserify example.js > examples/main.bundle.js$ python -m SimpleHTTPServer 9090 &; bg;$ open http://localhost:9090/
API
domstream = require('domstream') -> DOMStream object
Write API
domstream.createWriteStream(el, mimetype) -> DOMStream.WriteStream
Creates a writable stream out of an element. Writing to this stream
will replace the contents of el
with the incoming data (transformed
by the mimetype.)
domstream.createAppendStream(el, mimetype) -> DOMStream.WriteStream
As above, this will create a writable stream to an element's contents.
However, unlike the above, writes to this element will append their data (transformed by mimetype) to the element, instead of replacing it.
Mimetypes
Currently only two mimetypes are supported:
text/plain
andtext/html
. The writable stream object dispatches based on its mimetype in the following fashion:
text/html
->writeStream.constructTextHtml
text/plain
->writeStream.constructTextPlain
application/json
->writeStream.constructApplicationJson
(example only)
text/plain
will properly create text nodes out of incoming data, whiletext/html
will create full DOMNodes out of the incoming data.
Read API
domstream.createReadStream(el, eventName[, preventDefault=true]) -> DOMStream.ReadStream
Creates a readable stream out of eventName
events emitted by el
.
In most cases, the emitted event will simply be the DOM event object.
However, in the case of submit
, change
, keyup
and keydown
, the
emitted data will be the current value of the element.
In the case of form elements, the current value will be a key-value mapping of all of their constituent inputs:
anchor
var form = document text = document anchor = document var domstream = // will emit dom Event objects on clickdomstream // will emit the current value of the input on keyupdomstream // will emit an object containing { text: <value of text input> }// when submitteddomstream
LICENSE
MIT.