Make Our Toy DOM Driver More Flexible

[00:00] Now that we have Cycle.run imported, this isn't anymore a toy version of Cycle JS. We're actually using Cycle JS, except for the drivers which are still very primitive. Drivers are arguably even more important than the run function, because drivers are what cause effects in the real world.

[00:17] With the domDriver, we're only able to send strings as the textContent for the container element. We cannot yet create headers, and inputs, and all sorts of fancy dom elements. Let's extend our domDriver to be more powerful. Instead of strings as a sync, it should receive objects that describe what elements should exist.

[00:39] Here, instead of this string, we're going to send out an object. That object has a tagName of H1 as a header, and as children, it has a string that says "Seconds elapsed" of that much. Basically, we're sending out the description object of what kind of element we want.

[01:03] That's what the domDriver will get here. Instead of the text string, it will receive an object string. What we're supposed to do here is create an element based on that description. Somehow, we need to get an element out of this object. We need a function called createElement that takes the object and creates that element for us.

[01:27] How does that function look like? It takes the object as input, and what we need to create that element. We can do the element is document.createElement with the tagName from that description object, then we need to fill in the contents of that element.

[01:50] Let's say the textContent should be, for instance right now let's just assume that all of these description objects have children. Let's take the first element in that array, and then we can return this element. Overtime we can make this function better and more powerful, but right now we just want it to work.

[02:11] Once we have that element, we just need to put it in the container element. We can do appendChild(element), and there we go. Now, if we run this we see the app is still working, except we're creating many of these elements instead of replacing them.

[02:29] Here what we need to do in the domDrivers, is that we need to clear out everything in the container element. We need to set it to empty string, so then when we run it we're basically cleaning up the dom under this container element, and then recreating everything all over again.

[02:48] Our dom driver is able to create a header element, but this is still hard-coded. We can't still support anything else other than strictly having a string as a first child. We would like to support even more advancing cases, such as here I'm going to give another object. I want that to have a tagName of SPAN, and then that one should have children array which contains that string.

[03:19] How can we support something like this? Once we create the element for the header, while we're processing the children for the header, we need to also create an element for this SPAN. We can do that. We can just iterate over every children here.

[03:39] We can do for Each child description object, we can check what the type is. If the type is an object like the case with the SPAN is, then we need to create that element and append it. We do createElement on child. You'll notice now that this is a recursive function, createElement is inside, createElement, and then once we have that we can append it to the parent.

[04:18] If it's not an object then it's probably a string and we can do like before, textContent we can set it to child. Let's run this and see if it still works. We see seconds elapsed. If we inspect the dom, we can see here that we have div. That's our container. Then we have a header, and inside our header we have there a SPAN evolving over time.

[04:46] Now, we conclude that that's how we can make our domDriver be more useful with ability of specifying all sorts of dom elements and not just strings.