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!
@@ -59,7 +78,14 @@ public final class DOMRenderer: Renderer {
 
   public init<V: View>(_ view: V, _ ref: JSObjectRef) {
     rootRef = ref
-    rootRef.style = "display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: hidden;"
+    rootRef.style = """
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    """
 
     let rootStyle = document.createElement!("style").object!
     rootStyle.innerHTML = .string(tokamakStyles)
@@ -100,6 +126,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 isOrderDependent: 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 isOrderDependent: Bool { get }
+}
+
+extension DOMViewModifier {
+  public var isOrderDependent: Bool { false }
 }
 
 extension ModifiedContent: DOMViewModifier
@@ -42,6 +48,7 @@ extension _ZIndexModifier: DOMViewModifier {
 }
 
 extension _BackgroundModifier: DOMViewModifier where Background == Color {
+  public var isOrderDependent: 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.isOrderDependent || domModifier.isOrderDependent) {
+        // 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

@@ -18,7 +18,8 @@
 import TokamakCore
 
 // Border modifier
-extension _OverlayModifier: DOMViewModifier where Overlay == _ShapeView<_StrokedShape<TokamakCore.Rectangle._Inset>, Color> {
+extension _OverlayModifier: DOMViewModifier
+  where Overlay == _ShapeView<_StrokedShape<TokamakCore.Rectangle._Inset>, Color> {
   public var attributes: [String: String] {
     let style = overlay.shape.style.dashPhase == 0 ? "solid" : "dashed"
     return ["style": """
@@ -32,6 +33,7 @@ extension _OverlayModifier: DOMViewModifier where Overlay == _ShapeView<_Stroked
 
 // TODO: Implement arbitrary clip paths with CSS `clip-path`
 extension _ClipEffect: DOMViewModifier {
+  public var isOrderDependent: Bool { true }
   public var attributes: [String: String] {
     if let roundedRect = shape as? RoundedRectangle {
       return ["style": "border-radius: \(roundedRect.cornerSize.width)px; overflow: hidden;"]