html-patcher-stream

A writeable stream that uses html-patcher to update the DOM with changes

Usage no npm install needed!

<script type="module">
  import htmlPatcherStream from 'https://cdn.skypack.dev/html-patcher-stream';
</script>

README

html-patcher-stream

A wrapper over html-patcher which returns a writable stream. Pipe in your rendered templates and have the dom get patched with any changes since the last render.

Installing

npm install --save html-patcher-stream

Use browserify to make a bundle that uses this module.

API

patcher(element,[initial])

parameters

  • element (Element): The DOM element to patch to
  • [initial] (String): The initial template to render out

returns

  • (WritableStream): Pipe strings into this stream and it'll update the DOM in the element that was provided in the constructor.

Example

var patcher = require("../");
var map = require("through2-map").obj;
var interval = require("interval-stream");
var concat = require("array-concat-stream");
var streamArray = require("stream-array");

var data = ["foo", "bar", "fizz", "baz"];

streamArray(data)
  .pipe(interval(1000))
  .pipe(concat())
  .pipe(map(render))
  .pipe(patcher(document.body, render([])))


function render(items) {
  return "<ul>" + items.map(function (item) {
    return "<li>" + item + "</li>";
  }).join("\n") + "</ul>";
}

/**
 * Should build up the list item by item
 */

Make sure the body has been created before this script is called. Don't execute it while it's still in the header.