@swiftbrowser/native 0.0.0-stage → 0.10.1

package/swift/Sources/SwiftBrowserNative/Views/ElementView.swift

@@ -0,0 +1,169 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// One element of the tree as a SwiftUI view, by kind (docs/ops-protocol.md,
+/// "Element kinds and props"), recursing into its children. The node is
+/// observable: the body re-evaluates when this node's props or children
+/// change, not when another element's do.
+///
+/// Type-erased per element: the switch has one branch per kind, and a
+/// `ForEach` over children keyed by the protocol's stable ids keeps view
+/// identity (and so state, scroll positions and animations) across passes.
+struct ElementView: View {
+    let node: ElementNode
+
+    var body: AnyView {
+        switch node.kind {
+        // Text and images
+        case "text": return AnyView(TextElement(node: node))
+        case "image": return AnyView(ImageElement(node: node))
+        // Stacks and layout
+        case "vstack": return AnyView(VStackElement(node: node))
+        case "hstack": return AnyView(HStackElement(node: node))
+        case "zstack": return ZStackElement(node: node).reportingSize(of: node)
+        case "spacer": return AnyView(Spacer(minLength: SpacerProps(props: node.props).minLength.map { CGFloat($0) }))
+        case "divider": return AnyView(Divider())
+        case "styled": return node.isSpinner ? AnyView(ProgressView()) : ChildrenView(node: node).styled(node.style)
+        case "decorated": return AnyView(DecoratedElement(node: node))
+        case "geometry": return AnyView(GeometryElement(node: node))
+        case "scrollview": return AnyView(ScrollViewElement(node: node))
+        case "viewthatfits": return AnyView(ViewThatFitsElement(node: node))
+        case "lazyspacer": return AnyView(LazySpacerElement(node: node))
+        case "lazyvgrid": return AnyView(LazyVGridElement(node: node))
+        case "lazyhgrid": return AnyView(LazyHGridElement(node: node))
+        case "grid": return AnyView(GridElement(node: node))
+        case "gridrow": return AnyView(GridRowElement(node: node))
+        // Controls
+        case "button": return AnyView(ButtonElement(node: node))
+        case "toggle": return AnyView(ToggleElement(node: node))
+        case "textfield": return AnyView(TextFieldElement(node: node))
+        case "texteditor": return AnyView(TextEditorElement(node: node))
+        case "picker": return AnyView(PickerElement(node: node))
+        case "slider": return AnyView(SliderElement(node: node))
+        case "stepper": return AnyView(StepperElement(node: node))
+        case "tapgesture": return AnyView(TapGestureElement(node: node))
+        case "gesture": return AnyView(GestureElement(node: node))
+        case "gauge": return AnyView(GaugeElement(node: node))
+        case "datepicker": return AnyView(DatePickerElement(node: node))
+        case "menu": return AnyView(MenuElement(node: node))
+        case "contextmenu": return AnyView(ContextMenuElement(node: node))
+        // Lists
+        case "list": return AnyView(ListElement(node: node))
+        case "section": return AnyView(SectionElement(node: node))
+        case "listrow": return AnyView(ListRowElement(node: node))
+        case "swipeactions": return AnyView(SwipeActionsElement(node: node))
+        // Navigation and presentation
+        case "navstack": return AnyView(NavigationStackElement(node: node))
+        case "navscreen": return AnyView(NavigationScreenElement(node: node))
+        case "navlink": return AnyView(NavigationLinkElement(node: node))
+        case "tabview": return AnyView(TabViewElement(node: node))
+        case "tab": return AnyView(ChildrenView(node: node))
+        case "sheet", "alert":
+            // Presented by the root (PresentationHost), never drawn in place.
+            return AnyView(EmptyView())
+        case "toolbar", "searchfield":
+            // Taken by the enclosing screen; in place they draw nothing.
+            return AnyView(EmptyView())
+        // Shapes and colors
+        case "color": return AnyView(ColorElement(node: node))
+        case "shape": return ShapeElement(node: node).reportingSize(of: node)
+        // The escape hatch
+        case "native": return AnyView(NativeElement(node: node))
+        default: return AnyView(UnsupportedElement(node: node))
+        }
+    }
+}
+
+/// The element's children, in order.
+struct ChildrenView: View {
+    let node: ElementNode
+    var body: some View {
+        ForEach(node.children) { child in
+            ElementView(node: child)
+        }
+    }
+}
+
+/// A kind this renderer does not draw yet: its children, with the kind named
+/// over them in Debug builds (the web renderer draws an unknown symbol as a
+/// visible placeholder for the same reason).
+struct UnsupportedElement: View {
+    let node: ElementNode
+    var body: some View {
+        VStack(spacing: 0) { ChildrenView(node: node) }
+            .overlay(alignment: .topLeading) { marker }
+    }
+
+    @ViewBuilder
+    private var marker: some View {
+        #if DEBUG
+        Text(node.kind)
+            .font(.caption2)
+            .padding(2)
+            .background(Color.red.opacity(0.8), in: RoundedRectangle(cornerRadius: 3))
+            .foregroundStyle(.white)
+            .allowsHitTesting(false)
+        #else
+        EmptyView()
+        #endif
+    }
+}
+
+/// The `native` kind: a view the Swift app registered under `name`.
+struct NativeElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = NativeProps(props: node.props)
+        let app = app
+        let context = NativeViewContext(id: node.id, props: props.props, children: node.children) { value in
+            app?.dispatch(.native(node.id, name: props.name, value: value))
+        }
+        if let view = NativeRegistry.view(name: props.name, context: context) {
+            view
+        } else {
+            UnsupportedElement(node: node)
+        }
+    }
+}
+
+// MARK: - Environment
+
+private struct NativeAppKey: EnvironmentKey {
+    static let defaultValue: NativeApp? = nil
+}
+
+extension EnvironmentValues {
+    /// The app whose tree the views draw, for sending events.
+    var nativeApp: NativeApp? {
+        get { self[NativeAppKey.self] }
+        set { self[NativeAppKey.self] = newValue }
+    }
+}
+extension ElementNode {
+    /// The one child of a `styled` that only sets the secondary color, where
+    /// the protocol encodes a slot SwiftUI draws so by itself; nil otherwise.
+    var secondaryColorContent: ElementNode? {
+        guard kind == "styled", children.count == 1, Set(style.raw.keys) == ["foreground"],
+              case .hierarchical(level: 2, opacity: 1)? = style.foreground
+        else { return nil }
+        return children[0]
+    }
+
+    /// `ProgressView()` with no value, as the protocol emits it: the spinner
+    /// symbol at 20 points in the secondary color. Drawn as the real spinner.
+    var isSpinner: Bool {
+        guard kind == "styled", children.count == 1, case .hierarchical(level: 2, opacity: 1)? = style.foreground else { return false }
+        let sized = children[0]
+        guard sized.kind == "styled", sized.children.count == 1, sized.style.font?.size == 20, sized.style.font?.textStyle == nil,
+              sized.style.font?.weight == nil
+        else { return false }
+        let image = sized.children[0]
+        return image.kind == "image" && image.props.string("systemName") == "progress.indicator"
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Controls.swift

@@ -0,0 +1,268 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// `button`: the child is the label; a tap sends `tap` and returns after the
+/// app's render pass applied.
+struct ButtonElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = ButtonProps(props: node.props)
+        #if os(iOS) || canImport(FoundationBridge)
+        if props.editMode != nil {
+            // An `EditButton`: iOS draws it (the checkmark while editing). Its
+            // binding's setter is the tap; the app's next pass sets the mode.
+            EditButton().environment(\.editMode, Binding(
+                get: { ButtonProps(props: node.props).editMode == "active" ? .active : .inactive },
+                set: { _ in app?.dispatch(.tap(node.id)) }
+            ))
+        } else {
+            plain(props)
+        }
+        #else
+        plain(props)
+        #endif
+    }
+
+    @ViewBuilder
+    private func plain(_ props: ButtonProps) -> some View {
+        let button = Button(role: props.role == "destructive" ? .destructive : props.role == "cancel" ? .cancel : nil) {
+            app?.dispatch(.tap(node.id))
+        } label: {
+            ChildrenView(node: node)
+        }
+        let sized: AnyView = {
+            switch props.controlSize {
+            case "mini": return AnyView(button.controlSize(.mini))
+            case "small": return AnyView(button.controlSize(.small))
+            case "large": return AnyView(button.controlSize(.large))
+            case "extraLarge": return AnyView(button.controlSize(.extraLarge))
+            default: return AnyView(button)
+            }
+        }()
+        switch props.style {
+        // `.borderless` reaches the protocol as `plain` too; outside a list,
+        // where a plain-looking text button is tinted on iOS, draw it so.
+        case "plain": node.ancestor(ofKind: "list") != nil ? AnyView(sized.buttonStyle(.plain)) : AnyView(sized.buttonStyle(.borderless))
+        case "bordered": sized.buttonStyle(.bordered)
+        case "borderedProminent", "glass": sized.buttonStyle(.borderedProminent)
+        default: sized.buttonStyle(.automatic)
+        }
+    }
+}
+
+/// `toggle`: the binding's setter sends `toggle`; by the time it returns the
+/// prop holds the app's new value, which the getter reads.
+struct ToggleElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        Toggle(isOn: Binding(
+            get: { ToggleProps(props: node.props).isOn },
+            set: { app?.dispatch(.toggle(node.id, $0)) }
+        )) {
+            ChildrenView(node: node)
+        }
+    }
+}
+
+/// `textfield`: a controlled field. Each keystroke sends `text`; the app's
+/// state is the truth the getter reads back, with no frame in between
+/// because the dispatch is synchronous.
+struct TextFieldElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+    @FocusState private var focused: Bool
+
+    var body: some View {
+        let props = TextFieldProps(props: node.props)
+        let text = Binding(
+            get: { TextFieldProps(props: node.props).text },
+            set: { app?.dispatch(.text(node.id, $0)) }
+        )
+        let field: AnyView = {
+            if props.secure { return AnyView(SecureField(props.placeholder, text: text)) }
+            if props.vertical { return AnyView(TextField(props.placeholder, text: text, axis: .vertical)) }
+            return AnyView(TextField(props.placeholder, text: text))
+        }()
+        var styled = props.style == "roundedBorder" ? AnyView(field.textFieldStyle(.roundedBorder)) : AnyView(field.textFieldStyle(.plain))
+        // Only what the app set: each of these is a trait of the field to SwiftUI.
+        if props.submit { styled = AnyView(styled.onSubmit { app?.dispatch(.submit(node.id)) }) }
+        if let label = props.submitLabel { styled = AnyView(styled.submitLabel(SubmitLabel(name: label))) }
+        if props.focused != nil {
+            styled = AnyView(styled
+                .focused($focused)
+                .onChange(of: props.focused) { _, wanted in
+                    if let wanted, wanted != focused { focused = wanted }
+                }
+                .onChange(of: focused) { _, now in
+                    if props.focused != now { app?.dispatch(.focus(node.id, now)) }
+                }
+                .onAppear { if props.focused == true { focused = true } })
+        }
+        return styled
+    }
+}
+
+extension SubmitLabel {
+    init(name: String?) {
+        switch name {
+        case "done": self = .done
+        case "go": self = .go
+        case "send": self = .send
+        case "join": self = .join
+        case "route": self = .route
+        case "search": self = .search
+        case "next": self = .next
+        case "continue": self = .continue
+        default: self = .return
+        }
+    }
+}
+
+/// `texteditor`: a multi-line controlled field.
+struct TextEditorElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        TextEditor(text: Binding(
+            get: { node.props.string("text") ?? "" },
+            set: { app?.dispatch(.text(node.id, $0)) }
+        ))
+    }
+}
+
+/// `picker`: the options are strings; choosing sends `select` with the index.
+struct PickerElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = PickerProps(props: node.props)
+        let selection = Binding(
+            get: { PickerProps(props: node.props).selected },
+            set: { app?.dispatch(.select(node.id, $0)) }
+        )
+        let picker = Picker(props.label, selection: selection) {
+            ForEach(Array(props.options.enumerated()), id: \.offset) { index, option in
+                Text(verbatim: option).tag(index)
+            }
+        }
+        switch props.style {
+        case "segmented": picker.pickerStyle(.segmented)
+        case "inline": picker.pickerStyle(.inline)
+        case "wheel":
+            #if os(iOS) || canImport(FoundationBridge)
+            picker.pickerStyle(.wheel)
+            #else
+            picker.pickerStyle(.menu)
+            #endif
+        default: picker.pickerStyle(.menu)
+        }
+    }
+}
+
+struct SliderElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = SliderProps(props: node.props)
+        let value = Binding(
+            get: { SliderProps(props: node.props).value },
+            set: { app?.dispatch(.slide(node.id, $0)) }
+        )
+        let range = props.min...max(props.min, props.max)
+        if node.children.isEmpty {
+            if let step = props.step, step > 0 {
+                Slider(value: value, in: range, step: step)
+            } else {
+                Slider(value: value, in: range)
+            }
+        } else if let step = props.step, step > 0 {
+            Slider(value: value, in: range, step: step) { ChildrenView(node: node) }
+        } else {
+            Slider(value: value, in: range) { ChildrenView(node: node) }
+        }
+    }
+}
+
+/// `stepper`: the label is the child; each half sends `step` ±1.
+struct StepperElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = StepperProps(props: node.props)
+        Stepper {
+            ChildrenView(node: node)
+        } onIncrement: {
+            if props.canIncrement { app?.dispatch(.step(node.id, 1)) }
+        } onDecrement: {
+            if props.canDecrement { app?.dispatch(.step(node.id, -1)) }
+        }
+    }
+}
+
+/// `.onTapGesture`: one child; a tap anywhere on it sends `tap`.
+struct TapGestureElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = TapGestureProps(props: node.props)
+        let content = ChildrenView(node: node).contentShape(Rectangle())
+        if props.location {
+            content.onTapGesture(coordinateSpace: .local) { point in
+                app?.dispatch(.tap(node.id, x: point.x, y: point.y))
+            }
+        } else {
+            content.onTapGesture { app?.dispatch(.tap(node.id)) }
+        }
+    }
+}
+
+/// `Menu { items } label: { label }`: children are `[label, ...items]`.
+struct MenuElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        if let label = node.children.first {
+            Menu {
+                ForEach(node.children.dropFirst()) { ElementView(node: $0) }
+            } label: {
+                ElementView(node: label)
+            }
+            .onAppear {
+                // A lazy menu builds its items on `open`; natively the items
+                // are needed up front, so ask as soon as the menu is on screen.
+                if node.props.bool("deferred") == true { app?.dispatch(.menu(node.id, open: true)) }
+            }
+        }
+    }
+}
+
+/// `.contextMenu { }`: children are `[content, ...items]`.
+struct ContextMenuElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        if let content = node.children.first {
+            ElementView(node: content).contextMenu {
+                ForEach(node.children.dropFirst()) { ElementView(node: $0) }
+            }
+            .onAppear {
+                if node.props.bool("deferred") == true { app?.dispatch(.menu(node.id, open: true)) }
+            }
+        }
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Lists.swift

@@ -0,0 +1,175 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// `list`: every direct child that is not a `section` is one row. The
+/// protocol's `listrow` wrapper carries the edit-mode flags; `onDelete` and
+/// `onMove` on the rows of each container send `delete` and `move`.
+struct ListElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = ListProps(props: node.props)
+        let list = List {
+            ListRowsView(children: node.children)
+        }
+        let styled: AnyView = {
+            switch props.style {
+            case "plain": return AnyView(list.listStyle(.plain))
+            case "sidebar": return AnyView(list.listStyle(.sidebar))
+            // `grouped` is what a `Form` emits: a Form draws its controls (a
+            // menu picker's value, say) as a form does.
+            case "grouped": return AnyView(Form { ListRowsView(children: node.children) })
+            #if os(iOS) || canImport(FoundationBridge)
+            default: return AnyView(list.listStyle(.insetGrouped))
+            #else
+            default: return AnyView(list.listStyle(.inset))
+            #endif
+            }
+        }()
+        let refreshable = props.refreshable ? AnyView(styled.refreshable { app?.dispatch(.refresh(node.id)) }) : styled
+        #if os(iOS) || canImport(FoundationBridge)
+        if let editing = props.editing {
+            refreshable.environment(\.editMode, .constant(editing ? .active : .inactive))
+        } else {
+            refreshable
+        }
+        #else
+        refreshable
+        #endif
+    }
+}
+
+/// The rows of a `list` or `section`: sections render as `Section`s, the rest
+/// as rows in one `ForEach` so `onMove` and `onDelete` see them as siblings.
+struct ListRowsView: View {
+    /// The container's children (a `list`'s, or a `section`'s without its header and footer elements).
+    let children: [ElementNode]
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let rows = children.filter { $0.kind != "section" }
+        let movable = rows.contains { $0.kind == "listrow" && ListRowProps(props: $0.props).movable }
+        let deletable = rows.contains { $0.kind == "listrow" && ListRowProps(props: $0.props).deletable }
+        let onDelete: ((IndexSet) -> Void)? = deletable
+            ? { offsets in
+                for offset in offsets.sorted(by: >) where rows.indices.contains(offset) {
+                    app?.dispatch(.delete(rows[offset].id))
+                }
+            }
+            : nil
+        let onMove: ((IndexSet, Int) -> Void)? = movable
+            ? { offsets, destination in
+                // `to` is the index among the container's children before which
+                // the row goes, counted before it leaves, like `move(fromOffsets:toOffset:)`.
+                let base = children.count - rows.count
+                for offset in offsets where rows.indices.contains(offset) {
+                    app?.dispatch(.move(rows[offset].id, to: base + destination))
+                }
+            }
+            : nil
+        ForEach(children.filter { $0.kind == "section" }) { section in
+            SectionElement(node: section)
+        }
+        ForEach(rows) { row in
+            ElementView(node: row)
+                .moveDisabled(row.kind == "listrow" ? !ListRowProps(props: row.props).movable : true)
+                .deleteDisabled(row.kind == "listrow" ? !ListRowProps(props: row.props).deletable : true)
+        }
+        .onDelete(perform: onDelete)
+        .onMove(perform: onMove)
+    }
+}
+
+/// `section`: header and footer are strings; `sectionheader`/`sectionfooter`
+/// children are view headers.
+struct SectionElement: View {
+    let node: ElementNode
+
+    var body: some View {
+        let props = SectionProps(props: node.props)
+        let header = node.children.first { $0.kind == "sectionheader" }
+        let footer = node.children.first { $0.kind == "sectionfooter" }
+        let rows = node.children.filter { $0.kind != "sectionheader" && $0.kind != "sectionfooter" }
+        let title = props.header.flatMap { $0.isEmpty ? nil : $0 }
+        let note = props.footer.flatMap { $0.isEmpty ? nil : $0 }
+        if header != nil || footer != nil {
+            // View headers and footers (`sectionheader` / `sectionfooter` children).
+            Section {
+                ListRowsView(children: rows)
+            } header: {
+                if let header {
+                    ChildrenView(node: header)
+                } else if let title {
+                    Text(verbatim: title)
+                }
+            } footer: {
+                if let footer {
+                    ChildrenView(node: footer)
+                } else if let note {
+                    Text(verbatim: note)
+                }
+            }
+        } else if let title, let note {
+            // String headers and footers are `Text`s, as `Section("…")` makes them.
+            Section { ListRowsView(children: rows) } header: { Text(verbatim: title) } footer: { Text(verbatim: note) }
+        } else if let title {
+            Section(title) { ListRowsView(children: rows) }
+        } else if let note {
+            Section { ListRowsView(children: rows) } footer: { Text(verbatim: note) }
+        } else {
+            Section { ListRowsView(children: rows) }
+        }
+    }
+}
+
+/// `listrow`: the row's content with its edit-mode hints; a tap on a
+/// selectable row sends `tap`.
+struct ListRowElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = ListRowProps(props: node.props)
+        // A row's children are one row: a stack when there are several.
+        let content: AnyView = node.children.count == 1 ? AnyView(ElementView(node: node.children[0])) : AnyView(HStack(spacing: 0) { ChildrenView(node: node) })
+        if props.selectable {
+            let tappable = content
+                .contentShape(Rectangle())
+                .onTapGesture { app?.dispatch(.tap(node.id)) }
+            if props.selected {
+                tappable.listRowBackground(Color.accentColor.opacity(0.15))
+            } else {
+                tappable
+            }
+        } else {
+            content
+        }
+    }
+}
+
+/// `.swipeActions`: children are `[content, ...trailing actions, ...leading actions]`
+/// (`trailing` and `leading` count them).
+struct SwipeActionsElement: View {
+    let node: ElementNode
+
+    var body: some View {
+        if let content = node.children.first {
+            let trailingCount = node.props.int("trailing") ?? 0
+            let actions = Array(node.children.dropFirst())
+            let trailing = Array(actions.prefix(trailingCount))
+            let leading = Array(actions.dropFirst(trailingCount))
+            ElementView(node: content)
+                .swipeActions(edge: .trailing, allowsFullSwipe: node.props.bool("fullSwipeTrailing") ?? false) {
+                    ForEach(trailing) { ElementView(node: $0) }
+                }
+                .swipeActions(edge: .leading, allowsFullSwipe: node.props.bool("fullSwipeLeading") ?? false) {
+                    ForEach(leading) { ElementView(node: $0) }
+                }
+        }
+    }
+}
+#endif