Explore rendering code as a flat list

[alvarlagerlof]

Problem

Currently, the code renderer currently makes use of DOM nesting for indentation. At specific points, Nodes get left margin, and all of their children inherits that, and may also add more margin, and so on.

x-ref: https://twitter.com/alvarlagerlof/status/1689075800694272000

This may be an inefficient way to render the code though. Each indentation layer creates at least one new DOM element, containing a lot of children. So the minimum number of elements is not just one per line of code, but one per line of code + one per indentation change.

Proposed solution

Since the indentation is already calculated based on the structure of the code, it should be possible to calculate it in JS and render the whole tree as a flat list, with calculated indentation accumulated at the beginning of each element.

This would probably easily allow windowing as well, to only render the part of the tree that is visible in the viewport.

The expand/collapse functionality of the codebase would probably suffer though, I'm not sure what to do with that right now.