Move Text/Image attributes to modifiers (#972)

* Add TextModifier type and move text attributes to modifiers

* Document Text attributes

* Update other docs, examples, and tests

* Add image modifiers

* Document modifiers and label

* Fix watchOS build

* Apply suggestions from code review

* Attempt test fix

Author: carson-katri

Sources/LiveViewNative/Image Modifiers/AntialiasedModifier.swift

@@ -0,0 +1,31 @@
+//
+//  AntialiasedModifier.swift
+//  LiveViewNative
+//
+//  Created by Carson Katri on 6/1/23.
+//
+
+import SwiftUI
+
+/// Enables/disables antialiasing.
+///
+/// ```html
+/// <Image system-name="heart.fill" modifiers={antialiased(@native, is_active: true)} />
+/// ```
+///
+/// ## Arguments
+/// * ``isActive``
+#if swift(>=5.8)
+@_documentation(visibility: public)
+#endif
+struct AntialiasedModifier: ImageModifier, Decodable {
+    /// Specifies if antialiasing is enabled.
+    #if swift(>=5.8)
+    @_documentation(visibility: public)
+    #endif
+    private let isActive: Bool
+    
+    func apply(to image: SwiftUI.Image) -> SwiftUI.Image {
+        image.antialiased(isActive)
+    }
+}

Sources/LiveViewNative/Image Modifiers/ImageModifier.swift

@@ -0,0 +1,82 @@
+//
+//  ImageModifier.swift
+//  LiveViewNative
+//
+//  Created by Carson Katri on 6/1/23.
+//
+
+import SwiftUI
+import LiveViewNativeCore
+
+enum ImageModifierType: String, Decodable {
+    case resizable
+    case antialiased
+    case symbolRenderingMode = "symbol_rendering_mode"
+    case renderingMode = "rendering_mode"
+    case interpolation
+    
+    func decode(from decoder: Decoder) throws -> any ImageModifier {
+        switch self {
+        case .resizable:
+            return try ResizableModifier(from: decoder)
+        case .antialiased:
+            return try AntialiasedModifier(from: decoder)
+        case .symbolRenderingMode:
+            return try SymbolRenderingModeModifier(from: decoder)
+        case .renderingMode:
+            return try RenderingModeModifier(from: decoder)
+        case .interpolation:
+            return try InterpolationModifier(from: decoder)
+        }
+    }
+}
+
+/// A modifier that applies to an ``Image``.
+protocol ImageModifier {
+    /// Modify the `Image` and return the new `Image` type.
+    func apply(to image: SwiftUI.Image) -> SwiftUI.Image
+}
+
+struct ImageModifierStack: Decodable, AttributeDecodable {
+    var stack: [any ImageModifier]
+    
+    init(_ stack: [any ImageModifier]) {
+        self.stack = stack
+    }
+    
+    init(from attribute: LiveViewNativeCore.Attribute?) throws {
+        guard let value = attribute?.value else { throw AttributeDecodingError.missingAttribute(Self.self) }
+        self = try makeJSONDecoder().decode(Self.self, from: Data(value.utf8))
+    }
+    
+    enum ImageModifierContainer: Decodable {
+        case modifier(any ImageModifier)
+        case end
+        
+        init(from decoder: Decoder) throws {
+            let type = try decoder.container(keyedBy: CodingKeys.self).decode(String.self, forKey: .type)
+            if let modifierType = ImageModifierType(rawValue: type) {
+                self = .modifier(try modifierType.decode(from: decoder))
+            } else {
+                self = .end
+            }
+        }
+        
+        enum CodingKeys: CodingKey {
+            case type
+        }
+    }
+    
+    init(from decoder: Decoder) throws {
+        var container = try decoder.unkeyedContainer()
+        self.stack = []
+        while !container.isAtEnd {
+            switch try container.decode(ImageModifierContainer.self) {
+            case let .modifier(modifier):
+                self.stack.append(modifier)
+            case .end:
+                return
+            }
+        }
+    }
+}

Sources/LiveViewNative/Image Modifiers/InterpolationModifier.swift

@@ -0,0 +1,70 @@
+//
+//  InterpolationModifier.swift
+//  
+//
+//  Created by Carson.Katri on 6/1/23.
+//
+
+import SwiftUI
+
+/// Set the quality level for an ``Image`` that requires interpolation.
+///
+/// When an image is resized (such as with the ``ResizableModifier`` modifier), it is interpolated.
+/// Use this modifier to set the quality of interpolation.
+///
+/// ```html
+/// <Image
+///   name="dot_green"
+///   modifiers={@native |> resizable() |> interpolation(interpolation: :none)}
+/// />
+/// <Image
+///   name="dot_green"
+///   modifiers={@native |> resizable() |> interpolation(interpolation: :medium)}
+/// />
+/// ```
+///
+/// ## Arguments
+/// * ``interpolation``
+#if swift(>=5.8)
+@_documentation(visibility: public)
+#endif
+struct InterpolationModifier: ImageModifier, Decodable {
+    /// The interpolation quality.
+    ///
+    /// See ``LiveViewNative/SwiftUI/Image/Interpolation`` for a list of possible values.
+    #if swift(>=5.8)
+    @_documentation(visibility: public)
+    #endif
+    private let interpolation: SwiftUI.Image.Interpolation
+    
+    func apply(to image: SwiftUI.Image) -> SwiftUI.Image {
+        image.interpolation(interpolation)
+    }
+}
+
+/// The quality level used to render an interpolated ``Image``.
+///
+/// Possible values:
+/// * `low`
+/// * `medium`
+/// * `high`
+/// * `none`
+#if swift(>=5.8)
+@_documentation(visibility: public)
+#endif
+extension SwiftUI.Image.Interpolation: Decodable {
+    public init(from decoder: Decoder) throws {
+        let container = try decoder.singleValueContainer()
+        switch try container.decode(String.self) {
+        case "low":
+            self = .low
+        case "medium":
+            self = .medium
+        case "high":
+            self = .high
+        case "none":
+            self = .none
+        case let `default`: throw DecodingError.dataCorrupted(.init(codingPath: container.codingPath, debugDescription: "Unknown interpolation '\(`default`)'"))
+        }
+    }
+}

Sources/LiveViewNative/Image Modifiers/RenderingModeModifier.swift

@@ -0,0 +1,68 @@
+//
+//  RenderingModeModifier.swift
+//  LiveViewNative
+//
+//  Created by Carson Katri on 6/1/23.
+//
+
+import SwiftUI
+
+/// Specifies how ``Image`` elements are rendered.
+///
+/// The `original` mode renders pixels as they appear in the original image.
+/// The `template` mode renders nontransparent pixels as the foreground color.
+///
+/// ```html
+/// <Image name="dot_green" modifiers={rendering_mode(@native, mode: :original)} />
+/// <Image name="dot_green" modifiers={rendering_mode(@native, mode: :template)} />
+/// ```
+///
+/// This modifier can also be used to render multicolor SF Symbols.
+/// The `original` mode allows the symbol to use its predefined colors.
+///
+/// ```html
+/// <Image
+///   system-name="person.crop.circle.badge.plus"
+///   modifiers={rendering_mode(@native, mode: :original)}
+/// />
+/// ```
+///
+/// ## Arguments
+/// * ``mode``
+#if swift(>=5.8)
+@_documentation(visibility: public)
+#endif
+struct RenderingModeModifier: ImageModifier, Decodable {
+    /// The rendering mode to use.
+    ///
+    /// See ``LiveViewNative/SwiftUI/Image/TemplateRenderingMode`` for a list of possible values.
+    #if swift(>=5.8)
+    @_documentation(visibility: public)
+    #endif
+    private let mode: SwiftUI.Image.TemplateRenderingMode
+    
+    func apply(to image: SwiftUI.Image) -> SwiftUI.Image {
+        image.renderingMode(mode)
+    }
+}
+
+/// The mode used to render an ``Image``.
+///
+/// Possible values:
+/// * `original`
+/// * `template`
+#if swift(>=5.8)
+@_documentation(visibility: public)
+#endif
+extension SwiftUI.Image.TemplateRenderingMode: Decodable {
+    public init(from decoder: Decoder) throws {
+        let container = try decoder.singleValueContainer()
+        switch try container.decode(String.self) {
+        case "original":
+            self = .original
+        case "template":
+            self = .template
+        case let `default`: throw DecodingError.dataCorrupted(.init(codingPath: container.codingPath, debugDescription: "Unknown rendering mode '\(`default`)'"))
+        }
+    }
+}

Sources/LiveViewNative/Image Modifiers/ResizableModifier.swift

@@ -0,0 +1,64 @@
+//
+//  ResizableModifier.swift
+//  LiveViewNative
+//
+//  Created by Carson Katri on 6/1/23.
+//
+
+import SwiftUI
+
+/// Enables an image to fill the available space.
+///
+/// ```html
+/// <Image system-name="heart.fill" modifiers={resizable(@native)} />
+/// <Image system-name="heart.fill" modifiers={resizable(@native, resizing_mode: :tile)} />
+/// ```
+///
+/// ## Arguments
+/// * ``capInsets``
+/// * ``resizingMode``
+#if swift(>=5.8)
+@_documentation(visibility: public)
+#endif
+struct ResizableModifier: ImageModifier, Decodable {
+    /// Marks an inset that is not resized.
+    ///
+    /// See ``LiveViewNative/SwiftUI/EdgeInsets`` for more details.
+    #if swift(>=5.8)
+    @_documentation(visibility: public)
+    #endif
+    private let capInsets: EdgeInsets?
+    
+    /// The mode for resizing.
+    ///
+    /// See ``LiveViewNative/SwiftUI/Image/ResizingMode`` for a list of possible values.
+    #if swift(>=5.8)
+    @_documentation(visibility: public)
+    #endif
+    private let resizingMode: SwiftUI.Image.ResizingMode
+    
+    func apply(to image: SwiftUI.Image) -> SwiftUI.Image {
+        image.resizable(capInsets: capInsets ?? .init(), resizingMode: resizingMode)
+    }
+}
+
+/// The mode used to resize an ``Image``.
+///
+/// Possible values:
+/// * `stretch`
+/// * `tile`
+#if swift(>=5.8)
+@_documentation(visibility: public)
+#endif
+extension SwiftUI.Image.ResizingMode: Decodable {
+    public init(from decoder: Decoder) throws {
+        let container = try decoder.singleValueContainer()
+        switch try container.decode(String.self) {
+        case "stretch":
+            self = .stretch
+        case "tile":
+            self = .tile
+        case let `default`: throw DecodingError.dataCorrupted(.init(codingPath: container.codingPath, debugDescription: "Unknown resizing mode '\(`default`)'"))
+        }
+    }
+}

Sources/LiveViewNative/Modifiers/Drawing and Graphics Modifiers/ForegroundColorModifier.swift

@@ -19,7 +19,7 @@ import SwiftUI
 #if swift(>=5.8)
 @_documentation(visibility: public)
 #endif
-struct ForegroundColorModifier: ViewModifier, Decodable {
+struct ForegroundColorModifier: ViewModifier, Decodable, TextModifier {
     /// The foreground color to use when rendering the view.
     #if swift(>=5.8)
     @_documentation(visibility: public)
@@ -29,4 +29,8 @@ struct ForegroundColorModifier: ViewModifier, Decodable {
     func body(content: Content) -> some View {
         content.foregroundColor(color)
     }
+    
+    func apply(to text: SwiftUI.Text) -> SwiftUI.Text {
+        text.foregroundColor(color)
+    }
 }

Sources/LiveViewNative/Modifiers/Images Modifiers/SymbolRenderingModeModifier.swift

@@ -20,7 +20,7 @@ import SwiftUI
 #if swift(>=5.8)
 @_documentation(visibility: public)
 #endif
-struct SymbolRenderingModeModifier: ViewModifier, Decodable {
+struct SymbolRenderingModeModifier: ViewModifier, Decodable, ImageModifier {
     /// A symbol rendering mode.
     #if swift(>=5.8)
     @_documentation(visibility: public)
@@ -48,6 +48,10 @@ struct SymbolRenderingModeModifier: ViewModifier, Decodable {
         content.symbolRenderingMode(mode)
     }
 
+    func apply(to image: SwiftUI.Image) -> SwiftUI.Image {
+        image.symbolRenderingMode(mode)
+    }
+    
     enum CodingKeys: String, CodingKey {
         case mode
     }

Sources/LiveViewNative/Modifiers/Layout Adjustments Modifiers/SafeAreaInsetModifier.swift

@@ -19,7 +19,7 @@ import SwiftUI
 ///     ...
 ///     <GroupBox template={:bottom_bar} id="bottom_bar">
 ///         <HStack template={:label}>
-///             <Text font-weight="bold" font="title2">Bottom Bar</Text>
+///             <Text>Bottom Bar</Text>
 ///             <Spacer />
 ///         </HStack>
 ///         <Text>This will allow the list to scroll further up so no rows are covered.</Text>

Sources/LiveViewNative/Modifiers/Lists Modifiers/BadgeModifier.swift

@@ -39,7 +39,7 @@ import SwiftUI
 /// <List>
 ///   <Text id="a" modifiers={@native |> badge(content: :error)}>
 ///     Server A
-///     <Text template={:error} color="system-red">
+///     <Text template={:error} modifiers={foreground_color(:red)}>
 ///       Down
 ///     </Text>
 ///   </Text>
@@ -86,7 +86,7 @@ struct BadgeModifier<R: RootRegistry>: ViewModifier, Decodable {
         #if os(iOS) || os(macOS)
         if let reference = self.content {
             content
-                .badge(context.children(of: element, forTemplate: reference).first?.asElement().flatMap(Text<R>.init(overrideElement:))?.body)
+                .badge(context.children(of: element, forTemplate: reference).first?.asElement().flatMap(Text<R>.init(element:))?.body)
         } else if let label {
             content.badge(label)
         } else if let count {