Combine trees

Now that we have a basic site working in tree form, we can manipulate that tree to suit our needs without needing to adjust our server and build infrastructure. For example, we can readily combine trees to create larger trees.

In the course of this tutorial, we’ve created three parallel tree implementations, backed by an object, a folder tree, and a function. We can combine those trees to make a larger tree with three branches, each of which is defined differently, but each of which can be explored using the same AsyncTree interface.

Using ObjectTree to combine trees

Our ObjectTree class turns out to be a useful tool to combine the three trees of HTML pages from htmlFiles.js, htmlFn.js, and htmlObject.js. We take the exports from those three files, then use them as values in an object. The keys of that object will name the tree’s branches — files, function, and object — letting us route requests into the appropriate branch with those names.

We can define this combination by updating SiteTree.js:

/* src/combine/SiteTree.js */

We apply our indexPages transform to give the overall tree an index page. Having done that, we can drop the use of indexPages in the individual trees. For example, the object-backed tree in htmlObject.js no longer needs to define index pages:

/* src/combine/htmlObject.js */

import tree from "./object.js";
import transform from "./transform.js";

export default transform(tree);

To contrast the values coming from each branch of this tree, we can update the object, files, and function trees so that they each define different names.

Our combined tree is quite large: