4 Projecting the AST
This chapter covers
- Projecting an AST to a visualization as an HTML DOM
- Using a polymorphic, stateless React component to implement the projection iteratively
In chapter 2, we showed how to reduce notated DSL content to abstract syntax trees (ASTs) represented as object-relation diagrams (ORDs). In chapter 3, you learned how to encode ASTs in ORD format, so we have a representation of them in memory as a JavaScript value. In this chapter, we’re going to reverse that process: given an AST in memory, we’ll visualize it as notated DSL content (see figure 4.1). We call this reverse process projection: we project the AST as notated DSL content.
Figure 4.1 Reversing extracting an AST from notated DSL content and encoding it is projecting.
Figure 4.2 illustrates the projection’s implementation in more technological detail. First, we have to get hold of an AST: loading an encoding of it gives us an in-memory representation that we can project. Then, we hand that in-memory representation off to a projection function, which returns an HTML document object model (DOM). Finally, the browser renders that DOM, which gives the domain expert their notated DSL content.
Figure 4.2 A technological sketch of the projection’s implementation
As usual, we’ll be using the RentalRecord Type example, shown again in figure 4.3. The extracted AST for this is shown in figure 2.17, and it’s encoded as listing 3.3. In other words, we’re going to reconstitute figure 4.3 from listing 3.3.