This package is a part of the KDFramework
that handles the conversion from KDDom
tree and regular DOM Element
.
KDDomOperations
This is a collection of diff-patch
operations that work efficiently on KDDom
view trees.
This package exports the following:
KDDomPatch
is a object type to represent a patch operation that can be applied to aDOM Element
.KDDomDiff
is a utility class that holds functions for creating a queue ofKDDomPatch
operations.KDDomPatcher
acts as a bridge to automatically convertKDDom
tree to a regularDOM
element. It utilizesvdom/patch-op
. It automatically manages the state for you.createElement
is a function that you can manually use to create the initial representation of theKDDom
tree as a normalDOM
element.
Motivation
We needed a performant way to do diff calculations between the various possible states of a KDDom
tree. After some research we saw that
virtual-dom
does exactly what we want but, it uses its own DOM node interface VNode
to achieve this. So we applied the virtual-dom
diff algorithm to our own KDViewNode
dom node interface and created KDDomDiff
, which utilizes the same algorithm for diffing but in a more KDFramework
fashion. Additionally, it directly utilizes virtual-dom
patch operations when possible, with the fallback to our own wrappers. Thanks to all of the contributors for their awesome work on virtual-dom.
Example
require 'kdf-dom-operations' require 'kdf-dom' count = 0 # create a view that represents <div>#{count}</div> view = partial: count # create dom element and append it to body. domNode = createElement viewdocumentbodyappendChild domNode # setup a patcher to handle diff/patch # operations for you. patcher = node: view # setup the update logic. setInterval -> count += 1 next = partial: count # tell patcher to # render next state. patcherrender next 500
More API references will be added here for individual classes. Documentation is WIP.
Installation
npm install kdf-dom-operations