Our previous toy DOM Driver is still primitive. We are only able to send strings as the textContent of the container element. We cannot yet create headers and inputs and all sorts of fancy DOM elements. In this lesson we will see how to send objects that describe what elements should exist, instead of strings as the DOM sink.
Now that we have Cycle core imported, which is just the run function, this isn't anymore a toy version of Cycle.js, we are actually using Cycle.js, except for the drivers. Cycle without drivers is nothing really, because drivers are plug-ins that allow you to create effects, and without effects, nothing happens. Our drivers are still quite toy version, this is very primitive. We are only able to send strings from the main as the text content of the container element.
We cannot yet create headers, and inputs, and all sorts of fantasy DOM elements from the main function. Let's extend our DOM driver to be more powerful. Instead of strings as the sync, let's return instead an object that will describe what elements should exist.
So this function returns an object, and this object describes the element that we want to create has a tag name of H1, so it's a header, and its children are an array with the string saying seconds elapsed is i, so now that we have this object as the sync return to the DOM driver, the DOM driver will not receive a text stream anymore, it will receive an object stream. This object not the element because it's just an object describing what element should exist, so we need to create that object.
Let's make a function called createElement given a description object. We're going to create that element using the function, and then we are going to append as a child this element that we create. So given an object we will create an element document.createElement with the tag name described and then we will set the innerHTML to be let's say the first child, which is the string that we know in this case the string. Of course we need to return our element.
There we go, except as you noticed we are appending many header elements because of course for every description object we are just appending the container element. Instead what we need to do is reset the container innerHTML every time we receive this description object. Now every second it is clearing the container and it is creating this element from the description object and it's appending that element.
But we still have some hard coded code, this part here which doesn't look good, because what if instead of a string you want to have another element, so we need to return here as the child another object that will describe another element, like let's say a SPAN. The SPAN will have a string as child. Now we need to improve our createElement because this object child, zero is now an object, it's not a string.
What we need to do is for every child in this description object we need to filter and see if the child object is an object, then we know that we need to create yet another element, that's why we will map those objects to createElement, so this is now a recursive function, so it means that when it's processing the children of this header, it will notice this object and then it's going to create an element for this description object. For each of these we are going to append the element.
Then there are the other type if one of these childs are a string, in this case the child is a string, then we need to set the innerHTML of the element to be this string. Now we can remove this part. There it goes. If we inspect this element here with Chrome's tools, we can see that there's an H1 and inside it has a SPAN. That's how we go about improving our DOM driver to be more useful so that we can create full-blown applications by describing our entire DOM, our entire desired DOM here in the main.