First draft for component support

[TimLariviere]

Details here: https://github.com/fabulous-dev/FabPlaygroundCE/blob/main/FabPlaygroundCE/Playground.fs

Simple stateful component

module Counter =
    let body =
        view {
            let! count = state 0
            
            VStack() {
                Label($"Count is {count.Current}")
                    .centerHorizontal()
                
                Button'("Increment", fun () -> count.Set(count.Current + 1))
                Button'("Decrement", fun () -> count.Set(count.Current - 1))
            }
        }

comp.mov

Parent-child communication

module ParentChild =
    let child count =
        view {
            let! multiplier = state 1
            let countMultiplied = count * multiplier.Current
            
            VStack() {
                Label($"Count * {multiplier.Current} = {countMultiplied}")
                    .centerHorizontal()
                    
                Button'("Increment Multiplier", fun () -> multiplier.Set(multiplier.Current + 1))
                Button'("Decrement Multiplier", fun () -> multiplier.Set(multiplier.Current - 1))
            }
        }
        
    let parent =
        view {
            let! count = state 0
            
            VStack() {
                Label($"Count is {count.Current}")
                    .centerHorizontal()
                
                Button'("Increment Count", fun () -> count.Set(count.Current + 1))
                Button'("Decrement Count", fun () -> count.Set(count.Current - 1))
                    
                Component(child count.Current)
            }
        }

compchild.mov

[TimLariviere]

Changed the ergonomics to be more in line with the current DSL:

type Fabulous.Maui.View with
    static member inline SimpleComponent() =
        Component() {
            Label("Hello Component")
                .centerHorizontal()
        }

    static member inline Counter() =
        Component() {
            let! count = state 0
            
            VStack() {
                Label($"Count is {count.Current}")
                    .centerHorizontal()
                
                Button'("Increment", fun () -> count.Set(count.Current + 1))
                Button'("Decrement", fun () -> count.Set(count.Current - 1))
            }
        }
        
    static member inline ParentChild_Child(count: int) =
        Component() {
            let! multiplier = state 1
            let countMultiplied = count * multiplier.Current
            
            VStack() {
                Label($"Count * {multiplier.Current} = {countMultiplied}")
                    .centerHorizontal()
                    
                Button'("Increment Multiplier", fun () -> multiplier.Set(multiplier.Current + 1))
                Button'("Decrement Multiplier", fun () -> multiplier.Set(multiplier.Current - 1))
            }
        }
    
    static member inline ParentChild_Parent() =
        Component() {
            let! count = state 0
            
            VStack() {
                Label($"Count is {count.Current}")
                    .centerHorizontal()
                
                Button'("Increment Count", fun () -> count.Set(count.Current + 1))
                Button'("Decrement Count", fun () -> count.Set(count.Current - 1))
                
                View.ParentChild_Child(count.Current)
            }
        }
        
    static member inline Child(count: BindingRequest<'T>) =
        Component() {
            let! boundCount = count
            
            VStack() {
                Label($"Child.Count is {boundCount.Current}")
                    .centerHorizontal()
                
                Button'("Increment", fun () -> boundCount.Set(boundCount.Current + 1))
                Button'("Decrement", fun () -> boundCount.Set(boundCount.Current - 1))
            }
        }
    
    static member inline BindingBetweenParentAndChild() =
        Component() {
            let! count = state 0
            
            VStack() {
                Label($"Parent.Count is {count.Current}")
                    .centerHorizontal()
                    
                Button'("Increment", fun () -> count.Set(count.Current + 1))
                Button'("Decrement", fun () -> count.Set(count.Current - 1))
                
                View.Child(ofState count)
            }
        }
    
    static member inline SharedContextBetweenComponents() =
        Component() {
            let sharedContext = ComponentContext()
            
            VStack() {
                View.Counter()
                    .withContext(sharedContext)
                    
                View.Counter()
                    .withContext(sharedContext)
            }
        }

[TimLariviere]

@edgarfgp btw I managed to remove the need for the intermediate Border control. Component acts as a proxy widget.
Might require some more tinkering but it's working :)