Use Fabulous 3.0.0-pre8

CHANGELOG.md

@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 _No unreleased changes_
 
+## [8.1.0-pre20] - 2024-11-07
+
+### Fixed
+- Use Fabulous 3.0.0-pre8
+
 ## [8.1.0-pre19] - 2024-09-28
 
 ### Fixed
@@ -250,7 +255,8 @@ Essentially v2.8.1 and v8.0.0 are similar except for the required .NET version.
 ### Changed
 - Fabulous.MauiControls has moved from the Fabulous repository to its own repository: [https://github.com/fabulous-dev/Fabulous.MauiControls](https://github.com/fabulous-dev/Fabulous.MauiControls)
 
-[unreleased]: https://github.com/fabulous-dev/Fabulous.MauiControls/compare/8.1.0-pre19...HEAD
+[unreleased]: https://github.com/fabulous-dev/Fabulous.MauiControls/compare/8.1.0-pre20...HEAD
+[8.1.0-pre20]: https://github.com/fabulous-dev/Fabulous.MauiControls/releases/tag/8.1.0-pre20
 [8.1.0-pre19]: https://github.com/fabulous-dev/Fabulous.MauiControls/releases/tag/8.1.0-pre19
 [8.1.0-pre18]: https://github.com/fabulous-dev/Fabulous.MauiControls/releases/tag/8.1.0-pre18
 [8.1.0-pre17]: https://github.com/fabulous-dev/Fabulous.MauiControls/releases/tag/8.1.0-pre17

Directory.Packages.props

@@ -5,7 +5,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageVersion Include="Fabulous" Version="3.0.0-pre7" />
+    <PackageVersion Include="Fabulous" Version="3.0.0-pre8" />
     <PackageVersion Include="FsCheck.NUnit" Version="2.16.6" />
     <PackageVersion Include="FSharp.Core" Version="8.0.200" />
     <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.9.0" />

samples/Components/HelloComponent/App.fs

@@ -5,9 +5,21 @@ open Microsoft.Maui.Hosting
 
 open type Fabulous.Maui.View
 
-module App =
+module App =    
     let view () =
-        Component() { Application(ContentPage() { Label("Hello Component").center() }) }
+        Component("root") {
+            Application() {
+                Window() {
+                    ContentPage() {
+                        (VStack() {
+                            Label("Hello Component")
+                                .centerTextHorizontal()
+                        })
+                            .centerVertical()
+                    }
+                }
+            }
+        }
 
     let createMauiApp () =
         MauiApp.CreateBuilder().UseFabulousApp(view).Build()

samples/Components/MultipleMvus/App.fs

@@ -44,8 +44,8 @@ module App =
                 (VStack(spacing = 25.) {
                     Label("App")
 
-                    Component(Counter.program) {
-                        let! model = Mvu.State
+                    Component("Counter") {
+                        let! model = Context.Mvu(Counter.program)
 
                         VStack() {
                             Label($"Count = {model.Count}")
@@ -54,8 +54,8 @@ module App =
                         }
                     }
 
-                    Component(Form.program) {
-                        let! model = Mvu.State
+                    Component("Form") {
+                        let! model = Context.Mvu(Form.program)
 
                         VStack() {
                             Label($"Hello {model.FirstName} {model.LastName}")

samples/Components/MvuCounter/App.fs

@@ -52,8 +52,8 @@ module App =
     let program = Program.statefulWithCmd init update
 
     let view () =
-        Component(program) {
-            let! model = Mvu.State
+        Component("Counter") {
+            let! model = Context.Mvu(program)
 
             Application(
                 ContentPage() {

samples/Components/SimpleCounter/App.fs

@@ -6,21 +6,51 @@ open Microsoft.Maui.Hosting
 
 open type Fabulous.Maui.View
 
+module EnvironmentKeys =
+    let Count = EnvironmentKey<int>("Count")
+
+module Child =
+    let view name =
+        Component(name) {
+            let! count = Context.Environment(EnvironmentKeys.Count)
+            Label($"[{name}] Count: {count}")
+        }
+
 module App =
+    type Msg =
+        | Increment
+        | Decrement
+        | CountChanged of int
+
+    let program =
+        Program.stateful
+            (fun () -> 0)
+            (fun msg model ->
+                match msg with
+                | Increment -> model + 1
+                | Decrement -> model - 1
+                | CountChanged count -> count)
+
     let view () =
-        Component() {
-            let! count = Context.State(0)
+        Component("root") {
+            let! theme = Context.Environment(EnvironmentKeys.Theme)
+            let! model = Context.Mvu(program)
 
             Application(
                 ContentPage(
                     (VStack() {
-                        Label($"%d{count.Current}").centerTextHorizontal()
-                        Button("Increment", (fun () -> count.Set(count.Current + 1)))
-                        Button("Decrement", (fun () -> count.Set(count.Current - 1)))
+                        Label("Theme is: " + theme.ToString()).centerTextHorizontal()
+                        Label($"%d{model}").centerTextHorizontal()
+                        Button("Increment", Increment)
+                        Button("Decrement", Decrement)
+                        Child.view "Child 1"
+                        Child.view "Child 2"
+                        Child.view "Child 3"
                     })
                         .center()
                 )
             )
+                .environment(EnvironmentKeys.Count, model)
         }
 
     let createMauiApp () =

samples/Components/TicTacComponent/App.fs

@@ -202,8 +202,8 @@ module App =
 
     /// The dynamic 'view' function giving the updated content for the view
     let view () =
-        Component(program) {
-            let! model = Mvu.State
+        Component("TicTacToe") {
+            let! model = Context.Mvu(program)
 
             Application(
                 ContentPage(

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/Gallery.fsproj

@@ -55,7 +55,6 @@
     <Compile Include="Samples\FormattedLabel.fs" />
     <Compile Include="Samples\ImageButton.fs" />
     <Compile Include="Samples\Label.fs" />
-    <Compile Include="Samples\ThemeAware.fs" />
     <Compile Include="Samples.fs" />
     <Compile Include="Overview.fs" />
     <Compile Include="SamplePage.fs" />

samples/Gallery/Samples.fs

@@ -7,7 +7,6 @@ module RegisteredSamples =
         [ ImageButton.sample
           Label.sample
           TextButton.sample
-          ThemeAware.sample
           Border.sample
           Shadow.sample
           Shapes.sample

samples/HelloWorld/App.fs

@@ -1,9 +1,9 @@
 namespace HelloWorld
 
 open Fabulous.Maui
+open Microsoft.Maui.Hosting
 
 open type Fabulous.Maui.View
-open Microsoft.Maui.Hosting
 
 module App =
     let view () =

samples/Navigation/ComponentNavigation/PageA.fs

@@ -49,8 +49,8 @@ module PageA =
         |> Program.withSubscription(subscribe appMsgDispatcher)
 
     let view nav appMsgDispatcher =
-        Component(program nav appMsgDispatcher) {
-            let! model = Mvu.State
+        Component("PageA") {
+            let! model = Context.Mvu(program nav appMsgDispatcher)
 
             ContentPage(
                 Grid(coldefs = [ Star ], rowdefs = [ Star; Auto ]) {

samples/Navigation/ComponentNavigation/PageB.fs

@@ -51,8 +51,8 @@ module PageB =
         |> Program.withSubscription(subscribe appMsgDispatcher)
 
     let view nav appMsgDispatcher arg =
-        Component(program nav appMsgDispatcher, arg) {
-            let! model = Mvu.State
+        Component("PageB") {
+            let! model = Context.Mvu(program nav appMsgDispatcher, arg)
 
             ContentPage(
                 Grid(coldefs = [ Star ], rowdefs = [ Star; Auto ]) {

samples/Navigation/ComponentNavigation/PageC.fs

@@ -58,8 +58,8 @@ module PageC =
         |> Program.withSubscription(subscribe appMsgDispatcher)
 
     let view nav appMsgDispatcher args =
-        Component(program nav appMsgDispatcher, args) {
-            let! model = Mvu.State
+        Component("PageC") {
+            let! model = Context.Mvu(program nav appMsgDispatcher, args)
 
             ContentPage(
                 Grid(coldefs = [ Star ], rowdefs = [ Star; Auto ]) {

samples/Navigation/ComponentNavigation/Sample.fs

@@ -49,8 +49,8 @@ module Sample =
         | NavigationRoute.PageC(someArgs, stepCount) -> AnyPage(PageC.view nav appMsgDispatcher (someArgs, stepCount))
 
     let view nav appMsgDispatcher () =
-        Component(program nav appMsgDispatcher) {
-            let! model = Mvu.State
+        Component("Sample") {
+            let! model = Context.Mvu(program nav appMsgDispatcher)
 
             Application(
                 (NavigationPage() {

src/Fabulous.MauiControls.Tests/WidgetTests.fs

@@ -52,6 +52,8 @@ type WidgetTests() =
                 ContentPage(Label("Hello")).automationId("yourAddress")
             }
 
+        let envContext = new EnvironmentContext()
+
         let treeContext: ViewTreeContext =
             { CanReuseView = MauiViewHelpers.canReuseView
               GetViewNode = ViewNode.get
@@ -64,7 +66,7 @@ type WidgetTests() =
         let navPage = FabNavigationPage()
         let weakRef = WeakReference(navPage)
 
-        let node = new ViewNode(None, treeContext, weakRef)
+        let node = new ViewNode(None, envContext, treeContext, weakRef)
 
         Reconciler.update treeContext.CanReuseView ValueNone (oldWidget.Compile()) node
         Reconciler.update treeContext.CanReuseView (ValueSome(oldWidget.Compile())) (newWidget.Compile()) node

src/Fabulous.MauiControls/AppHostBuilderExtensions.fs

@@ -28,11 +28,22 @@ type AppHostBuilderExtensions =
                   GetViewNode = ViewNode.get
                   GetComponent = Component.get
                   SetComponent = Component.set }
+
+            let envContext = new EnvironmentContext()
+            let app = FabApplication()
+
+            envContext.Set(EnvironmentKeys.Theme, app.RequestedTheme, false)
 
             let def = WidgetDefinitionStore.get widget.Key
-            let struct (_, view) = def.CreateView(widget, treeContext, ValueNone)
-            let app = view :?> Microsoft.Maui.Controls.Application
-            Theme.ListenForChanges(app)
+            let node = def.AttachView(widget, envContext, treeContext, ValueNone, app)
+
+            node.SetHandler(
+                "Theme",
+                app.RequestedThemeChanged.Subscribe(fun args ->
+                    envContext.Set(EnvironmentKeys.Theme, args.RequestedTheme, false)
+                )
+            )
+
             app)
 
     [<Extension>]
@@ -42,8 +53,8 @@ type AppHostBuilderExtensions =
             program.State.Logger,
             program.SyncAction,
             fun () ->
-                (View.Component("_", program.State, arg) {
-                    let! model = Mvu.State
+                (View.Component("_") {
+                    let! model = Context.Mvu(program.State, arg)
                     program.View model
                 })
                     .Compile()
@@ -60,8 +71,8 @@ type AppHostBuilderExtensions =
             program.State.Logger,
             program.SyncAction,
             fun () ->
-                (View.Component("_", program.State, arg) {
-                    let! model = Mvu.State
+                (View.Component("_") {
+                    let! model = Context.Mvu(program.State, arg)
                     program.View model
                 })
                     .Compile()
@@ -81,14 +92,8 @@ type AppHostBuilderExtensions =
             ?syncAction: (unit -> unit) -> unit
         ) : MauiAppBuilder =
         this.UseFabulousApp(
-            (match canReuseView with
-             | Some fn -> fn
-             | None -> MauiViewHelpers.canReuseView),
-            (match logger with
-             | Some logger -> logger
-             | None -> ProgramDefaults.defaultLogger()),
-            (match syncAction with
-             | Some synAction -> synAction
-             | None -> MauiViewHelpers.defaultSyncAction),
-            fun () -> (View.Component("_") { view() }).Compile()
+            (defaultArg canReuseView MauiViewHelpers.canReuseView),
+            (defaultArg logger (ProgramDefaults.defaultLogger())),
+            (defaultArg syncAction MauiViewHelpers.defaultSyncAction),
+            fun () -> view().Compile()
         )

src/Fabulous.MauiControls/Component.fs

@@ -16,20 +16,4 @@ module Component =
 [<AutoOpen>]
 module ComponentBuilders =
     type Fabulous.Maui.View with
-
-        static member inline Component<'msg, 'marker when 'msg: equality>(key: string) = ComponentBuilder<'msg>(key)
-
-        static member inline Component<'msg, 'model, 'marker, 'parentMsg when 'msg: equality and 'parentMsg: equality>
-            (
-                key: string,
-                program: Program<unit, 'model, 'msg>
-            ) =
-            MvuComponentBuilder<unit, 'msg, 'model, 'marker, 'parentMsg>(key, program, ())
-
-        static member inline Component<'arg, 'msg, 'model, 'marker, 'parentMsg when 'msg: equality and 'parentMsg: equality>
-            (
-                key: string,
-                program: Program<'arg, 'model, 'msg>,
-                arg: 'arg
-            ) =
-            MvuComponentBuilder<'arg, 'msg, 'model, 'marker, 'parentMsg>(key, program, arg)
+        static member inline Component<'msg, 'marker when 'msg: equality>(key: string) = ComponentBuilder<'msg, 'marker>(key)

src/Fabulous.MauiControls/Environment.fs

@@ -0,0 +1,8 @@
+namespace Fabulous.Maui
+
+open Fabulous
+open Microsoft.Maui.ApplicationModel
+
+module EnvironmentKeys =
+    let Theme = EnvironmentKey<AppTheme>("Theme")
+