@adrianhelvik/fragdom

@adrianhelvik/fragdom

Fragdom is a thin wrapper around the DOM that adds fragment nodes. It is implemented in preparation for a virtual DOM library.

The idea is that you should be able to replace usage of the real DOM with this library and get the addition of fragment nodes.

With normal DOM, you can create document fragments, but these do not become child nodes of an element they are inserted into. Instead the child nodes are moved to the new element.

The core differences with Fragdom is that you get fragdom.createFragment() and that DOM updates don't take effect before you call .reconcile() on an element (or one of its parents).

Some differences from the real DOM

Reconciliation

To persist DOM updates, you must call .reconcile() on the element. This reconciles all child nodes as well.

If you want the DOM updates to be applied in the next animation frame, you can call .reconcileAsync().

Retrieving real DOM nodes

You can access the real DOM node by using the .realNode getter on Element and Text. On fragment nodes, realNode is an array.

If the node has not been reconciled, accessing this property throws an error.

Instance attributes

When setAttribute or removeAttribute is called with a key beginning with $, it is considered an instance attribute.

This is to simplify reconciliation of instance attributes.

Example

https://unpkg.com/@adrianhelvik/fragdom/example.html

Plan

• Implementation
  • Node.prototype
    • .appendChild(node)
    • .removeChild(node)
    • .contains(node)
    • .remove()
    • .realNode
  • Element.prototype
    • .setAttribute(key, value)
    • .removeAttribute(key)
    • .reconcile()
    • .realNode
    • .reconcileAsync()
  • Fragment.prototype
    • .reconcile()
    • .realNode
    • .reconcileAsync()
  • Text.prototype
    • .reconcile()
    • .realNode
    • .reconcileAsync()
• Review
  • Review exposed API. Are more methods needed?
  • Review #dirty conditions for Fragment agains API
  • Review error conditions
• Documentation
  • Node.prototype
    • .appendChild(node)
    • .removeChild(node)
    • .contains(node)
    • .remove()
    • .realNode
  • Element.prototype
    • .reconcile()
    • .realNode
  • Fragment.prototype
    • .reconcile()
    • .realNode
  • Text.prototype
    • .reconcile()
    • .realNode
• Publish to NPM