Now Particularly Misnamed
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    domnode-dompublic

    domnode-dom

    Turn DOM elements into readable / writable streams.

    Designed for use with Browserify and domnode.

     
    var domstream = require('domstream')
      , input = document.querySelector('input[type=text]')
      , output = document.querySelector('div#output')
     
    // replace the contents entirely with plain text generated
    // by the <input> element!
    domstream
      .createReadStream(input)
      .pipe(domstream.createWriteStream(output, 'text/plain'))
     
     
    // grab a url and replace the body with its contents!
     
    http
      .get('/some/url')
      .pipe(domstream.createAppendStream(output, 'text/html'))
     
    // extend mimetypes:
    domstream.WriteStream.prototype.constructImagePng = function(data) {
      var img = document.createElement('img')
      img.src = 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
      .createReadStream(input)
      .pipe(domstream.createWriteStream(output, 'image/png'))
     

    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 and text/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, while text/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:

     
    <form id="form">
        <input type="text" id="text" name="text" />
        <input type="submit" name="submit" value="submit" />
    </form>
    <a href="#" id="anchor">anchor</a>
     
     
    var form = document.getElementById('form')
      , text = document.getElementById('text')
      , anchor = document.getElementById('anchor')
     
    var domstream = require('domstream')
     
    // will emit dom Event objects on click
    domstream.createReadStream(anchor, 'click')
      .on('data', function(data) { console.log(data) })
     
    // will emit the current value of the input on keyup
    domstream.createReadStream(text, 'keyup')
      .on('data', function(data) { console.log(data) })
     
    // will emit an object containing { text: <value of text input> }
    // when submitted
    domstream.createReadStream(form, 'submit')
      .on('data', function(data) { console.log(data) })
     

    LICENSE

    MIT.

    Keywords

    none

    install

    npm i domnode-dom

    Downloadsweekly downloads

    513

    version

    0.0.4

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar