Modeling DOM as an exercise - inheritance?

Stream: general

[Marvin]

Hi, I'm new to the language and playing around with creating a representation of the DOM in js. The DOM seems to naturally involve inheritance hierarchy of more than three depths, so I'm wondering what the Lean way to do that is given than this is not an inheritance oriented language.

└── Node
    ├── Document
    │   ├── HTMLDocument
    │   └── XMLDocument
    │
    └── Element
        ├── HTMLElement
        │   ├── HTMLDivElement        (<div>)
        │   ├── HTMLSpanElement       (<span>)
        │   ├── HTMLParagraphElement  (<p>)
        │   │
        │   ├── HTMLAnchorElement     (<a>)
        │   ├── HTMLImageElement      (<img>)
        │   │
        │   ├── HTMLInputElement      (<input>)
        │   ├── HTMLButtonElement     (<button>)
        │   ├── HTMLTextAreaElement   (<textarea>)
        │   │
        │   ├── HTMLFormElement       (<form>)
        │   │
        │   ├── HTMLCanvasElement     (<canvas>)
        │   ├── HTMLVideoElement      (<video>)
        │   ├── HTMLAudioElement      (<audio>)
        │   │
        │   ├── HTMLScriptElement     (<script>)
        │   ├── HTMLStyleElement      (<style>)
        │   │
        │   └── ... many more
        │
        ├── SVGElement
        │   ├── SVGSVGElement         (<svg>)
        │   ├── SVGRectElement        (<rect>)
        │   ├── SVGCircleElement      (<circle>)
        │   └── ...
        │
        └── MathMLElement

Would I still want to do structure inheritance for this, or some combination of inductive types?

[Violeta Hernández]

This seems like a good use case for inductive types. For instance, you should have an SVGRectElement type which stores the size of the rectangle, an. SVGCircleElement type which stores the dimensions of the circle... Then, you could have an SVGElementType which stores one of the SVG element types, and implement whatever functions are common to all SVG elements on said type.

[Violeta Hernández]

If you do need some sort of inheritance functionality, you can probably get by using typeclasses. Though that's hard to say without the specific code.

[Marvin]

How could I express that the SVG inductive type and the HTMLElement inductive type are both "Element"s? That an SVG and a H1 have some category in common. Or should I not try to encode that fact?

[Yury G. Kudryashov]

If there are nodes that can have children of any Element type, then you can do

mutual

inductive Element where
| html (arg : HTMLElement)
| svg (arg : SVGElement)

inductive HTMLElement where
| div (arg : HTMLDivElement)
| span (arg : HTMLSpanElement)

inductive SomeElementType where
| someConstructor (children : Array Element)

end