Recursion

As it turns out recursion is an extremely important factor in building (and updating) the DOM.
In hindsight this is actually to be expected because we’re working with a tree of data.

In our previous section we’ve used a minimal version of our vElement only consisting of a tag and className and dom
property. The final definition of our vElement which we’re going to use, is:

  1. type VElement = {
  2.   tag: string,
  3.   props: {
  4.     children: vNodeList || emtpy,
  5.     etc.
  6.   },
  7.   className: string,
  8.   style: string,
  9.   dom: ?Node
  10. }

Because we’re building a tree of data, one property is of extra importance.
Can you guess which one? It’s the children property :smile:

We’ve defined our children property on our props object
because this is the convention that React uses. You can access the
children using this.props.children.

The children property can be empty or a vNodeList. A vNodeList is simply an array of vNodes.
Arrays are pretty good at keeping order and are easy to iterate on.
And that’s exactly what we’re going to need when building a tree :evergreen_tree:

Let’s update the createVElement function.

  1. index.js
  2. ...
  4. function createVElement(tag, config, children = null) {
  5.   const { className } = config;
  7.   return {
  8.     tag: tag,
  9.     props: {
  10.       children: children,
  11.     },
  12.     className: className,
  13.     dom: null,
  14.   }
  15. }

We want to redefine our application with a header and a paragraph. 

  1. index.js
  2. ...
  4. const myApp = createVElement('div', { className:'my-class' }, [
  5.   createVElement('h1', { className:'my-header' }),
  6.   createVElement('p', { className: 'my-paragraph'})
  7. ]);

The HTML equivelant would be:

  1. <div class="my-class">
  2.   <h1 class="my-header"></h1>
  3.   <p class="my-paragraph"></p>
  4. </div>

The important thing to notice is: we now have multiple nodes and that some of these nodes are nested.
How to handle this? Well, the title probably already gave it away, recurse it!

While using recursion we can reuse our mountVElement function, because,
well each child is an vElement that needs to be mounted. We just need to adapt our mountVElement function.
We need to watch for the children property, and if it exists we need to mount its content(s). 

  1. function mountVElement(vElement, parentDOMnode) {
  2.   const { className, tag, props } = vElement;
  4.   //create a native DOM node
  5.   const domNode = document.createElement(tag);
  7.   //for later reference save the DOM node
  8.   //on our vElement
  9.   vElement.dom = domNode;
  11.   if (props.children) {
  12.     //Important: we pass the parentDOMnode 
  13.     //again and again
  14.      children.forEach((child) => 
  15.       mountVElement(child, domNode)
  16.     });
  17.   }
  19.   //add className to native node
  20.   if (className !== undefined) {
  21.     domNode.className = className;
  22.   }
  24.   //Append domNode to to our parentDOMNode
  25.   parentDOMnode.appendChild(domNode);
  26. }

Even with just three (3) nodes, this part can be difficult to understand.
There is a lot of mutating and recursing going on here. Our (atleast mine) mind(s)
aren’t built for this. That’s why computers are awesome ?? .

But with just three nodes we can give it a try. In the table below the
steps are (conceptually) laid out:

Iteration parentDOMNode vElement Resulting DOM
1 body div.my-class body
2 .my-class h1.my-header body div.my-class > h1.my-header
3 .my-class p.my-paragraph body div.my-class > h1.my-header, p.my-paragraph

Hopefully with the above table you can reason about how the DOM is actually built from our vElements.
If not try to place some debugger statements in places you see fit.
Or just accept the fact that mutation and looping can be hard to understand and our working memory is limited :smile:

Warning If you would useconsole.log statement to debug, you will find that the printed domNode(s)
are already mutated before you can inspect them (what is an insight in itself).

Building a complex DOM ?

Now we have made great progression! We this little bit of code we can even create a complex DOM with
lots of nested nodes.

Let’s give it a shot!

  2. const myApp = createVElement('div', { className: 'my-class' }, [
  3.   createVElement('h1', { className:'my-header' }),
  4.   createVElement('div', { className:'my-container' }, [
  5.     createVElement('div', { className:'my-sub-container' }, [
  6.       createVElement('div', { className:'my-sub-sub-container' }, [
  7.         createVElement('div', { className:'my-sub-sub-sub-container' }, [
  8.           createVElement('div', { className:'my-sub-sub-sub-sub-container' }, [
  9.             createVElement('div', { className:'my-sub-sub-sub-sub-sub-container' }, []),
  10.             createVElement('h1', { className:'my-sub-sub-sub-sub-sub-header' }, [])
  11.           ])
  12.         ])
  13.       ])
  14.     ]),
  15.   ])
  16. ]);

No problemo for our code! We can build a deeply nested DOM without any problems. Computers are awesome
indeed, Take that stupid brain!

But what is the role of our vDOM in all of this? Curious? Me too!
Let’s head off to the next section

?