Splitting Mvu and Component widgets

samples/Calculator/App.fs

@@ -3,6 +3,7 @@ namespace Calculator
 open System
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 open Microsoft.Maui.Controls
 open Microsoft.Maui.Graphics
 

samples/Components/MultipleMvus/App.fs

@@ -2,6 +2,7 @@ namespace MultipleMvus
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Components/MvuCounter/App.fs

@@ -2,6 +2,7 @@ namespace MvuCounter
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Components/SimpleCounter/App.fs

@@ -2,6 +2,7 @@ namespace SimpleCounter
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Components
 open Microsoft.Maui.Hosting
 
 open type Fabulous.Maui.View

samples/Components/TicTacComponent/App.fs

@@ -6,6 +6,7 @@ open Microsoft.Maui.ApplicationModel
 open Microsoft.Maui.Devices
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/CounterApp/App.fs

@@ -2,6 +2,7 @@ namespace CounterApp
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Gallery/App.fs

@@ -1,6 +1,5 @@
 namespace Gallery
 
-open Fabulous.Maui.SmallScalars
 open Microsoft.FSharp.Core
 open Fabulous
 open Fabulous.Maui

samples/Gallery/Overview.fs

@@ -1,6 +1,7 @@
 namespace Gallery
 
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 open type Fabulous.Maui.View
 
 module Overview =

samples/Gallery/SamplePage.fs

@@ -2,6 +2,7 @@ namespace Gallery
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 open type Fabulous.Maui.View
 
 module SamplePage =

samples/Gallery/Samples/TextButton.fs

@@ -2,6 +2,7 @@ namespace Gallery.Samples
 
 open Gallery
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 open Microsoft.Maui.Graphics
 open type Fabulous.Maui.View
 

samples/Navigation/BasicNavigation/PageA.fs

@@ -1,6 +1,7 @@
 namespace NavigationSample
 
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Navigation/BasicNavigation/PageB.fs

@@ -1,6 +1,7 @@
 namespace NavigationSample
 
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Navigation/BasicNavigation/PageC.fs

@@ -1,6 +1,7 @@
 namespace NavigationSample
 
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Navigation/BasicNavigation/Sample.fs

@@ -2,6 +2,7 @@ namespace NavigationSample
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Navigation/ComponentNavigation/PageA.fs

@@ -2,6 +2,7 @@ namespace ComponentNavigation
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Navigation/ComponentNavigation/PageB.fs

@@ -2,6 +2,7 @@ namespace ComponentNavigation
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Navigation/ComponentNavigation/PageC.fs

@@ -2,6 +2,7 @@ namespace ComponentNavigation
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Navigation/NavigationPath/PageA.fs

@@ -2,6 +2,7 @@ namespace NavigationSample
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Navigation/NavigationPath/PageB.fs

@@ -2,6 +2,7 @@ namespace NavigationSample
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Navigation/NavigationPath/PageC.fs

@@ -2,6 +2,7 @@ namespace NavigationSample
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/Playground/App.fs

@@ -2,6 +2,7 @@ namespace Playground
 
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

samples/TicTacToe/App.fs

@@ -6,6 +6,7 @@ open Microsoft.Maui.ApplicationModel
 open Microsoft.Maui.Devices
 open Fabulous
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 

src/Fabulous.MauiControls.Tests/WidgetTests.fs

@@ -6,11 +6,12 @@ open Microsoft.Maui.ApplicationModel
 open NUnit.Framework
 
 open Fabulous.Maui
+open Fabulous.Maui.Mvu
 
 open type Fabulous.Maui.View
 
 [<TestFixture>]
-type WidgetTests() =
+type WidgetTests() =    
     [<Test>]
     member _.``Changing pages in a NavigationPage will trigger Mounted and Unmounted messages``() =
         let dispatchedMsgs = ResizeArray<string>()

src/Fabulous.MauiControls/ComponentViews/Controls/Button.fs

@@ -0,0 +1,54 @@
+namespace Fabulous.Maui.Components
+
+open System.Runtime.CompilerServices
+open Microsoft.Maui.Controls
+open Fabulous
+open Fabulous.Maui
+
+type IFabComponentButton =
+    inherit IFabButton
+    inherit IFabComponentView
+
+module Button =
+    let Clicked =
+        Attributes.defineEventNoArgNoDispatch "Button_Clicked" (fun target -> (target :?> Button).Clicked)
+
+    let Pressed =
+        Attributes.defineEventNoArgNoDispatch "Button_Pressed" (fun target -> (target :?> Button).Pressed)
+
+    let Released =
+        Attributes.defineEventNoArgNoDispatch "Button_Released" (fun target -> (target :?> Button).Released)
+
+[<AutoOpen>]
+module ButtonBuilders =
+    type Fabulous.Maui.View with
+
+        /// <summary>Create a Button widget with a text and listen for the Click event</summary>
+        /// <param name="text">The button on the tex</param>
+        /// <param name="onClicked">Function to execute</param>
+        static member inline Button(text: string, onClicked: unit -> unit) =
+            WidgetBuilder<unit, IFabComponentButton>(Button.WidgetKey, Button.Text.WithValue(text), Button.Clicked.WithValue(onClicked))
+
+[<Extension>]
+type ButtonModifiers =
+
+    /// <summary>Listen for the Pressed event</summary>
+    /// <param name="this">Current widget</param>
+    /// <param name="fn">TODO</param>
+    [<Extension>]
+    static member inline onPressed(this: WidgetBuilder<'msg, #IFabComponentButton>, fn: unit -> unit) =
+        this.AddScalar(Button.Pressed.WithValue(fn))
+
+    /// <summary>Listen for the Released event</summary>
+    /// <param name="this">Current widget</param>
+    /// <param name="fn">TODO</param>
+    [<Extension>]
+    static member inline onReleased(this: WidgetBuilder<'msg, #IFabComponentButton>, fn: unit -> unit) =
+        this.AddScalar(Button.Released.WithValue(fn))
+
+    /// <summary>Link a ViewRef to access the direct Button control instance</summary>
+    /// <param name="this">Current widget</param>
+    /// <param name="value">The ViewRef instance that will receive access to the underlying control</param>
+    [<Extension>]
+    static member inline reference(this: WidgetBuilder<'msg, IFabComponentButton>, value: ViewRef<Button>) =
+        this.AddScalar(ViewRefAttributes.ViewRef.WithValue(value.Unbox))

src/Fabulous.MauiControls/ComponentViews/Pages/ContentPage.fs

@@ -0,0 +1,46 @@
+namespace Fabulous.Maui.Components
+
+open System.Runtime.CompilerServices
+open Fabulous
+open Fabulous.Maui
+open Fabulous.StackAllocatedCollections.StackList
+open Microsoft.Maui.Controls
+
+type IFabComponentContentPage =
+    inherit IFabContentPage
+    inherit IFabComponentPage
+
+module ContentPage =
+    let SizeAllocated =
+        Attributes.defineEventNoDispatch<SizeAllocatedEventArgs> "ContentPage_SizeAllocated" (fun target -> (target :?> FabContentPage).SizeAllocated)
+
+[<AutoOpen>]
+module ContentPageBuilders =
+    type Fabulous.Maui.View with
+
+        /// <summary>Create a ContentPage with a content widget</summary>
+        /// <param name="content">The content widget</param>
+        static member inline ContentPage<'msg, 'marker when 'marker :> IFabView>(content: WidgetBuilder<'msg, 'marker>) =
+            WidgetBuilder<'msg, IFabComponentContentPage>(
+                ContentPage.WidgetKey,
+                AttributesBundle(StackList.empty(), ValueSome [| ContentPage.Content.WithValue(content.Compile()) |], ValueNone)
+            )
+
+        static member inline ContentPage<'msg, 'childMarker>() =
+            SingleChildBuilder<'msg, IFabComponentContentPage, 'childMarker>(ContentPage.WidgetKey, ContentPage.Content)
+
+[<Extension>]
+type ContentPageModifiers =
+    /// <summary>Listen for SizeAllocated event</summary>
+    /// <param name="this">Current widget</param>
+    /// <param name="fn">TODO</param>
+    [<Extension>]
+    static member inline onSizeAllocated(this: WidgetBuilder<'msg, #IFabComponentContentPage>, fn: SizeAllocatedEventArgs -> unit) =
+        this.AddScalar(ContentPage.SizeAllocated.WithValue(fn))
+
+    /// <summary>Link a ViewRef to access the direct ContentPage control instance</summary>
+    /// <param name="this">Current widget</param>
+    /// <param name="value">The ViewRef instance that will receive access to the underlying control</param>
+    [<Extension>]
+    static member inline reference(this: WidgetBuilder<'msg, IFabComponentContentPage>, value: ViewRef<ContentPage>) =
+        this.AddScalar(ViewRefAttributes.ViewRef.WithValue(value.Unbox))

src/Fabulous.MauiControls/ComponentViews/Pages/_Page.fs

@@ -0,0 +1,47 @@
+namespace Fabulous.Maui.Components
+
+open System.Runtime.CompilerServices
+open Fabulous
+open Fabulous.Maui
+open Microsoft.Maui.Controls
+
+type IFabComponentPage =
+    inherit IFabPage
+    inherit IFabComponentVisualElement
+
+module Page =
+    let Appearing =
+        Attributes.defineEventNoArgNoDispatch "Page_Appearing" (fun target -> (target :?> Page).Appearing)
+
+    let Disappearing =
+        Attributes.defineEventNoArgNoDispatch "Page_Disappearing" (fun target -> (target :?> Page).Disappearing)
+
+    let NavigatedTo =
+        Attributes.defineEventNoDispatch "NavigatedTo" (fun target -> (target :?> Page).NavigatedTo)
+
+    let NavigatedFrom =
+        Attributes.defineEventNoDispatch "NavigatedFrom" (fun target -> (target :?> Page).NavigatedFrom)
+
+[<Extension>]
+type PageModifiers =
+    /// <summary>Listen to the Appearing event</summary>
+    /// <param name="this">Current widget</param>
+    /// <param name="msg">Message to dispatch</param>
+    [<Extension>]
+    static member inline onAppearing(this: WidgetBuilder<'msg, #IFabComponentPage>, fn: unit -> unit) =
+        this.AddScalar(Page.Appearing.WithValue(fn))
+
+    /// <summary>Listen to the Disappearing event</summary>
+    /// <param name="this">Current widget</param>
+    /// <param name="msg">Message to dispatch</param>
+    [<Extension>]
+    static member inline onDisappearing(this: WidgetBuilder<'msg, #IFabComponentPage>, fn: unit -> unit) =
+        this.AddScalar(Page.Disappearing.WithValue(fn))
+
+    [<Extension>]
+    static member inline onNavigatedTo(this: WidgetBuilder<'msg, #IFabComponentPage>, fn: unit -> unit) =
+        this.AddScalar(Page.NavigatedTo.WithValue(fn))
+
+    [<Extension>]
+    static member inline onNavigatedFrom(this: WidgetBuilder<'msg, #IFabComponentPage>, fn: unit -> unit) =
+        this.AddScalar(Page.NavigatedFrom.WithValue(fn))

src/Fabulous.MauiControls/ComponentViews/_Element.fs

@@ -0,0 +1,23 @@
+namespace Fabulous.Maui.Components
+
+open System.Runtime.CompilerServices
+open Fabulous
+open Fabulous.Maui
+
+type IFabComponentElement = inherit IFabElement
+
+[<Extension>]
+type ElementModifiers =
+    /// <summary>Listen to the widget being mounted</summary>
+    /// <param name="this">Current widget</param>
+    /// <param name="fn">TODO</param>
+    [<Extension>]
+    static member inline onMounted(this: WidgetBuilder<'msg, #IFabComponentElement>, fn: unit -> unit) =
+        this // TODO: Lifecycle.Mounted is inside Fabulous but doesn't have a component equivalent
+
+    /// <summary>Listen to the widget being unmounted</summary>
+    /// <param name="this">Current widget</param>
+    /// <param name="fn">TODO</param>
+    [<Extension>]
+    static member inline onUnmounted(this: WidgetBuilder<'msg, #IFabComponentElement>, fn: unit -> unit) =
+        this // TODO: Lifecycle.Unmounted is inside Fabulous but doesn't have a component equivalent

src/Fabulous.MauiControls/ComponentViews/_NavigableElement.fs

@@ -0,0 +1,8 @@
+namespace Fabulous.Maui.Components
+
+open Fabulous.Maui
+
+type IFabComponentNavigableElement =
+    inherit IFabNavigableElement
+    inherit IFabComponentElement
+

src/Fabulous.MauiControls/ComponentViews/_View.fs

@@ -0,0 +1,7 @@
+namespace Fabulous.Maui.Components
+
+open Fabulous.Maui
+
+type IFabComponentView =
+    inherit IFabView
+    inherit IFabComponentElement