Koerper

Körper, from Middle High German, from Latin corpus, meaning body.

Koerper provides a virtual DOM interface, based on Wizdom, that implements an additional "body" node type and proxies attributes and event listeners through the actual document. Body nodes enable encapsulation of a region within a document without necessitating a container element. This enables Gutentag to farm out portions of its actual document to components, giving those components great flexibility to determine the shape of their content, simultanously allowing components to be composed with any structure. This is particularly useful for components that do not need a container element, like repeat and reveal tags, as well as components that need to be peers in the flex-box model.

Installation

npm install --save koerper

Examples

Koerper provides a Document constructor that accepts an element from the actual document. The virtual document will control the content of the actual node.

var Document = require("koerper");
var document = new Document(window.document.body);

The document has a createBody() method that will return an instance of the new body node type.

var body = document.createBody();

Body elements can be added and removed from the virtual document, and their content will be added or removed from their corresponding position in the actual document.

body.appendChild(document.createTextNode("Guten Tag, Welt!"));
var em = document.createElement("em");
em.appendChild(body);
document.documentElement.appendChild(em);

Body elements can contain deeply nested body elements and retain the ability to add and remove their children from the actual document.

var subBody = document.createBody();
body.appendChild(subBody);

Because body nodes do not introduce container elements, you can even interpolate text on the actual document.

var body = document.createBody();
var greet = document.createTextNode("Guten Tag");
var who = document.createTextNode("Welt");
body.appendChild(greet);
body.appendChild(document.createTextNode(", ");
body.appendChild(who);
body.appendChild(document.createTextNode("!");
document.documentElement.appendChild(body);

And you can insert or remove the body within another body.

var quoted = document.createBody();
quoted.appendChild(document.createTextNode("\\""));
quoted.appendChild(body);
quoted.appendChild(document.createTextNode("\\""));
 
// later ...
quoted.removeChild(body);

Copyright and License

Copyright (c) 2015 Kristopher Michael Kowal and contributors. All rights reserved. MIT License.