Custom DOMCursor

Terminology - In the source code and docs, "child" refers to the existing element, and "rival" refers to the reference element attempting to be matched (e.g., virtual DOM). The role of the DOMCursor is to most "logically" match children elements to rival (VDOM) elements.

The DOMCursor is in charge of matching elements when a component reconciles. That is to say, when a component re-renders (e.g. a user clicks and modifies something), it attempts to match the the newly rendered element generated from the dom or render phase of the lifecycle (e.g. the virtual DOM), with it's original in the real, existing DOM.

Modulo's modular design extends to DOM element pairing as well. By extending the simple built-in DOMCursor, we can include basic reconciler features such as keyed elements, like in React and other frameworks, or even more complex logic if we so desire.

Motivation: Optimizing large components

When to optimize - Why do we want to do this? The purpose is if you know that Modulo's automatic reconciliation "guesses" are causing your program to be slow. This often happens when adding and removing elements in large, complex components with many elements in a row with the same tag name. Ideally, eleeents should simply be hidden or shown, so this is only useful if thye are actually getting removed and inserted in the DOM, and the default Modulo matching ends up caussing slow-downs.

The main reason you will want to extend the DOMCursor class is for optimizing large components that update often. This can happen in UX-intensive applications, such as tables that get insertions, swaps, and deletions in the middle. By writing custom code to better matching element, we can make fewer DOM transformations.

Example 1: Adding example simple custom logic

In the following example, we show how you can add custom logic specific to your optimization needs or component, in this case to 1) skip over already-rendered elements with the skip-me attribute, and 2) compare other elements with the first element resolved when selecting with the repalce-me-with attribute.

Example 2: Upgrading to KeyedCursor for key= support

By extending the above to keep track of "keyed" elements into the following class, we can create a KeyedCursor that supports the keyed element matching feature when activated, for huge speed improvements when used correctly, and only very little extra overhead compared to the default DOMCursor: