A Block is a fundamental building block of DOM. It is a chunk of DOM which Can not be structural changed. It can only have its attributes changed. A Block can have BlockHoles embedded in its DOM. A BlockHole can contain other Blocks and it is the only way in which DOM can be changed structurally.

A Block is a collection of DOM nodes and Directives for those nodes.

A Block is responsible for instantiating the Directives and for inserting / removing itself to/from DOM.

A Block can be created from BlockFactory.

class Block implements ElementWrapper {
 List<dom.Node> elements;
 ElementWrapper previous = null;
 ElementWrapper next = null;

 Function onInsert;
 Function onRemove;
 Function onMove;

 List<dynamic> _directives = [];

 Block(List<dom.Node> this.elements);

 Block insertAfter(ElementWrapper previousBlock) {
   // Update Link List.
   next = previousBlock.next;
   if (next != null) {
     next.previous = this;
   }
   previous = previousBlock;
   previousBlock.next = this;

   // Update DOM
   List<dom.Node> previousElements = previousBlock.elements;
   dom.Node previousElement = previousElements[previousElements.length - 1];
   dom.Node insertBeforeElement = previousElement.nextNode;
   dom.Node parentElement = previousElement.parentNode;
   bool preventDefault = false;

   Function insertDomElements = () {
     for(var i = 0, ii = elements.length; i < ii; i++) {
       parentElement.insertBefore(elements[i], insertBeforeElement);
     }
   };

   if (onInsert != null) {
     onInsert({
       "preventDefault": () {
         preventDefault = true;
         return insertDomElements;
       },
       "element": elements[0]
     });
   }

   if (!preventDefault) {
     insertDomElements();
   }
   return this;
 }

 Block remove() {
   bool preventDefault = false;

   Function removeDomElements = () {
     for(var j = 0, jj = elements.length; j < jj; j++) {
       dom.Node current = elements[j];
       dom.Node next = j+1 < jj ? elements[j+1] : null;

       while(next != null && current.nextNode != next) {
         current.nextNode.remove();
       }
       elements[j].remove();
     }
   };

   if (onRemove != null) {
     onRemove({
       "preventDefault": () {
         preventDefault = true;
         return removeDomElements();
       },
       "element": elements[0]
     });
   }

   if (!preventDefault) {
     removeDomElements();
   }

   // Remove block from list
   if (previous != null && (previous.next = next) != null) {
     next.previous = previous;
   }
   next = previous = null;
   return this;
 }

 Block moveAfter(ElementWrapper previousBlock) {
   var previousElements = previousBlock.elements,
       previousElement = previousElements[previousElements.length - 1],
       insertBeforeElement = previousElement.nextNode,
       parentElement = previousElement.parentNode,
       blockElements = elements;

   for(var i = 0, ii = blockElements.length; i < ii; i++) {
     parentElement.insertBefore(blockElements[i], insertBeforeElement);
   }

   // Remove block from list
   previous.next = next;
   if (next != null) {
     next.previous = previous;
   }
   // Add block to list
   next = previousBlock.next;
   if (next != null) {
     next.previous = this;
   }
   previous = previousBlock;
   previousBlock.next = this;
   return this;
 }
}