Allow modified views to fill their parent if a child requires it

Sources/TokamakDOM/DOMRenderer.swift

@@ -48,6 +48,25 @@ public final class DOMNode: Target {
   }
 }
 
+private extension AnyView {
+  var axes: [SpacerContainerAxis] {
+    var axes = [SpacerContainerAxis]()
+    if let spacerContainer = mapAnyView(self, transform: { (v: SpacerContainer) in v }) {
+      if spacerContainer.hasSpacer {
+        axes.append(spacerContainer.axis)
+      }
+      if spacerContainer.fillCrossAxis {
+        axes.append(spacerContainer.axis == .horizontal ? .vertical : .horizontal)
+      }
+    }
+    return axes
+  }
+
+  var fillAxes: [SpacerContainerAxis] {
+    children.flatMap(\.fillAxes) + axes
+  }
+}
+
 let log = JSObjectRef.global.console.object!.log.function!
 let document = JSObjectRef.global.document.object!
 let head = document.head.object!
@@ -100,6 +119,14 @@ public final class DOMRenderer: Renderer {
       let lastChild = children[Int(length) - 1].object
     else { return nil }
 
+    let fillAxes = host.view.fillAxes
+    if fillAxes.contains(.horizontal) {
+      lastChild.style.object!.width = "100%"
+    }
+    if fillAxes.contains(.vertical) {
+      lastChild.style.object!.height = "100%"
+    }
+
     return DOMNode(host.view, lastChild, listeners)
   }
 

Sources/TokamakDOM/Modifiers/LayoutModifiers.swift

@@ -79,6 +79,7 @@ private extension EdgeInsets {
 }
 
 extension _PaddingLayout: DOMViewModifier {
+  public var orderDependent: Bool { true }
   public var attributes: [String: String] {
     var padding = [(String, CGFloat)]()
     let insets = self.insets ?? .init(_all: 10)

Sources/TokamakDOM/Modifiers/ViewModifier.swift

@@ -19,6 +19,12 @@ public typealias ModifiedContent = TokamakCore.ModifiedContent
 
 public protocol DOMViewModifier {
   var attributes: [String: String] { get }
+  /// Can the modifier be flattened?
+  var orderDependent: Bool { get }
+}
+
+extension DOMViewModifier {
+  public var orderDependent: Bool { false }
 }
 
 extension ModifiedContent: DOMViewModifier
@@ -42,6 +48,7 @@ extension _ZIndexModifier: DOMViewModifier {
 }
 
 extension _BackgroundModifier: DOMViewModifier where Background == Color {
+  public var orderDependent: Bool { true }
   public var attributes: [String: String] {
     ["style": "background-color: \(background.description)"]
   }

Sources/TokamakDOM/Modifiers/_ViewModifier_Content.swift

@@ -15,16 +15,43 @@
 import Runtime
 import TokamakCore
 
+private protocol AnyModifiedContent {
+  var anyContent: AnyView { get }
+  var anyModifier: DOMViewModifier { get }
+}
+
+extension ModifiedContent: AnyModifiedContent where Modifier: DOMViewModifier, Content: View {
+  var anyContent: AnyView {
+    AnyView(content)
+  }
+
+  var anyModifier: DOMViewModifier {
+    modifier
+  }
+}
+
 extension ModifiedContent: ViewDeferredToRenderer where Content: View {
   public var deferredBody: AnyView {
     if let domModifier = modifier as? DOMViewModifier {
-      return AnyView(HTML("div", domModifier.attributes) {
-        content
-      })
+      if let adjacentModifier = content as? AnyModifiedContent,
+        !(adjacentModifier.anyModifier.orderDependent || domModifier.orderDependent) {
+        // Flatten non-order-dependent modifiers
+        var attr = domModifier.attributes
+        for (key, val) in adjacentModifier.anyModifier.attributes {
+          if let prev = attr[key] {
+            attr[key] = prev + val
+          }
+        }
+        return AnyView(HTML("div", attr) {
+          adjacentModifier.anyContent
+        })
+      } else {
+        return AnyView(HTML("div", domModifier.attributes) {
+          content
+        })
+      }
     } else {
-      return AnyView(HTML("div") {
-        content
-      })
+      return AnyView(content)
     }
   }
 }

Sources/TokamakDOM/Shapes/Shape.swift

@@ -32,6 +32,7 @@ extension _OverlayModifier: DOMViewModifier where Overlay == _ShapeView<_Stroked
 
 // TODO: Implement arbitrary clip paths with CSS `clip-path`
 extension _ClipEffect: DOMViewModifier {
+  public var orderDependent: Bool { true }
   public var attributes: [String: String] {
     if let roundedRect = shape as? RoundedRectangle {
       return ["style": "border-radius: \(roundedRect.cornerSize.width)px; overflow: hidden;"]