Correctly apply Style props on both mount/update

Example/Gluon/GluonApp.swift

@@ -19,20 +19,25 @@ struct Counter: LeafComponent {
     let (sliding, setSliding) = hooks.state(0.5 as Float)
 
     let children = count < 15 ? [
-      Button.node(.init(handlers: [
-        .touchUpInside: Handler {
-          setCount(count + 1)
-        },
-      ]), "Increment"),
+      Button.node(.init(
+        handlers: [.touchUpInside: Handler { setCount(count + 1) }],
+        style: Style(backgroundColor: .red)
+      ), "Increment"),
 
-      Label.node(.init(alignment: .center), "\(count)"),
+      Label.node(.init(
+        alignment: .center,
+        style: Style(backgroundColor: .green)
+      ), "\(count)"),
 
       Slider.node(.init(
         value: sliding,
         valueHandler: Handler { setSliding($0) }
       )),
 
-      Label.node(.init(alignment: .center), "\(sliding)"),
+      Label.node(.init(
+        alignment: .center,
+        style: Style(backgroundColor: .blue)
+      ), "\(sliding)"),
     ] : []
 
     return StackView.node(.init(axis: .vertical,

Sources/Gluon/HostComponents/Props/Color.swift

@@ -31,4 +31,7 @@ public struct Color: Equatable {
 
   public static var white = Color(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
   public static var black = Color(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
+  public static var red = Color(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
+  public static var green = Color(red: 0.0, green: 1.0, blue: 0.0, alpha: 1.0)
+  public static var blue = Color(red: 0.0, green: 0.0, blue: 1.0, alpha: 1.0)
 }

Sources/Gluon/HostComponents/Props/Style.swift

@@ -12,8 +12,24 @@ public protocol StyleProps {
 public struct Style: Equatable {
   public let alpha: Double?
   public let backgroundColor: Color?
-  public let clipsToBounds: Bool?
   public let center: Point?
+  public let clipsToBounds: Bool?
   public let frame: Rectangle?
   public let isHidden: Bool?
+
+  public init(
+    alpha: Double? = nil,
+    backgroundColor: Color? = nil,
+    center: Point? = nil,
+    clipsToBounds: Bool? = nil,
+    frame: Rectangle? = nil,
+    isHidden: Bool? = nil
+  ) {
+    self.alpha = alpha
+    self.backgroundColor = backgroundColor
+    self.center = center
+    self.clipsToBounds = clipsToBounds
+    self.frame = frame
+    self.isHidden = isHidden
+  }
 }

Sources/GluonUIKit/Components/Protocols/UIKitViewComponent.swift

@@ -14,6 +14,19 @@ public protocol UIKitViewComponent: UIKitHostComponent, HostComponent {
   static func update(_ view: Target, _ props: Props, _ children: Children)
 }
 
+private func applyStyle<T: UIView, P: StyleProps>(_ target: T, _ props: P) {
+  guard let style = props.style else {
+    return
+  }
+
+  style.alpha.flatMap { target.alpha = CGFloat($0) }
+  style.backgroundColor.flatMap { target.backgroundColor = UIColor($0) }
+  style.clipsToBounds.flatMap { target.clipsToBounds = $0 }
+  style.center.flatMap { target.center = CGPoint($0) }
+  style.frame.flatMap { target.frame = CGRect($0) }
+  style.isHidden.flatMap { target.isHidden = $0 }
+}
+
 extension UIKitViewComponent where Target == Target.DefaultValue,
   Props: StyleProps {
   public static func mountTarget(to parent: UIKitTarget,
@@ -30,6 +43,7 @@ extension UIKitViewComponent where Target == Target.DefaultValue,
     }
 
     let target = Target.defaultValue
+    applyStyle(target, props)
     update(target, props, children)
 
     switch parent {
@@ -61,14 +75,7 @@ extension UIKitViewComponent where Target == Target.DefaultValue,
       return
     }
 
-    if let style = props.style {
-      style.alpha.flatMap { target.alpha = CGFloat($0) }
-      style.backgroundColor.flatMap { target.backgroundColor = UIColor($0) }
-      style.clipsToBounds.flatMap { target.clipsToBounds = $0 }
-      style.center.flatMap { target.center = CGPoint($0) }
-      style.frame.flatMap { target.frame = CGRect($0) }
-      style.isHidden.flatMap { target.isHidden = $0 }
-    }
+    applyStyle(target, props)
 
     update(target, props, children)
   }