Tokamak

Tokamak copied to clipboard

In cases such as

Text("foo")
  .padding(5)
  .padding(10)
  .padding(42)

three new divs are created each with a separate padding. I wonder if there's a good (probably renderer-specific) way to collapse these into a single div with the modifiers merged in a sensible way. The merge logic could easily get complicated, so we need to be sure that this optimization is actually warranted.

Interesting connection I see here is that the domAttributes modifier discussed in #231 would essentially require this collapse/merge logic to work, so maybe it would be best to start with that one first to understand how this would be implemented.

We already do some flattening in ModifiedContent, but it could definitely be improved.

One thing to be careful of is:

.padding()
.background(Color.red)

should become:

padding: 8px;
background-color: red;

Whereas the reverse

.background(Color.red)
.padding()

should become:

margin: 8px;
background-color: red;

Getting the order right is going to be the trickiest part IMO.

Since margins can collapse against each other in some circumstances I think it would be best to stick to padding. Maybe have a way to tag modifiers as either dependent on or causing a change to view metrics? Then it would be possible to combine, for example, background and border modifiers, and a wrapped padding modifier would be added to a new HTML element.

Maybe we could try something similar to operator fusion in Combine: https://jasdev.me/fusion-primer