feat: add onReceive modifier

Author: edgarfgp

src/Fabulous.Tests/APISketchTests/ComponentOnReceiveTests.fs

@@ -0,0 +1,102 @@
+namespace Fabulous.Tests.APISketchTests
+
+open NUnit.Framework
+open Fabulous
+open Fabulous.Tests.APISketchTests.Platform
+open TestUI_Widgets
+open System
+open System.Timers
+
+open type View
+open type Context
+
+type IntArgs(delta: int) =
+    inherit EventArgs()
+    member _.Delta = delta
+
+type NetEventSource() =
+    let evt = new Event<EventHandler<IntArgs>, IntArgs>()
+
+    [<CLIEvent>]
+    member _.Tick = evt.Publish
+
+    member _.Fire(delta: int) = evt.Trigger(null, IntArgs delta)
+
+module ComponentOnReceiveTests =
+
+    [<Test>]
+    let ``Component with onReceive increments label when event fires`` () =
+        // Arrange (IObservable<'T> overload via IEvent upcast)
+        use timer = new Timer(10.0)
+        timer.AutoReset <- false // fire once per Start() to make the test deterministic
+
+        let view =
+            Component("onReceive-basic") {
+                let! count = State(0)
+
+                Stack().automationId("root") {
+                    Label(count.Current.ToString()).automationId("label").onReceive(timer.Elapsed, fun _ -> count.Set(count.Current + 1))
+                }
+            }
+
+        let tree = Run.startView view
+        let label = find<TestLabel> tree "label" :> IText
+
+        // Assert initial
+        Assert.AreEqual("0", label.Text)
+
+        // Fire timer twice and assert updates
+        timer.Start()
+        System.Threading.Thread.Sleep(30)
+        Assert.AreEqual("1", label.Text)
+
+        timer.Start()
+        System.Threading.Thread.Sleep(30)
+        Assert.AreEqual("2", label.Text)
+
+    [<Test>]
+    let ``Component onReceive with .NET EventHandler<'T> increments label`` () =
+        // Arrange (IEvent<EventHandler<'T>,'T> overload)
+
+        let src = NetEventSource()
+
+        let view =
+            Component("onReceive-netevent") {
+                let! count = State(0)
+
+                Stack().automationId("root") {
+                    Label(count.Current.ToString()).automationId("label").onReceive(src.Tick, fun args -> count.Set(count.Current + args.Delta))
+                }
+            }
+
+        let tree = Run.startView view
+        let label = find<TestLabel> tree "label" :> IText
+
+        Assert.AreEqual("0", label.Text)
+        src.Fire 1
+        Assert.AreEqual("1", label.Text)
+        src.Fire 2
+        Assert.AreEqual("3", label.Text)
+
+    [<Test>]
+    let ``Component onReceive with F# Event<'T> increments label`` () =
+        // Arrange (Event<'T> overload)
+        let tick = new Event<int>()
+
+        let view =
+            Component("onReceive-fsharp-event") {
+                let! count = State(0)
+
+                Stack().automationId("root") {
+                    Label(count.Current.ToString()).automationId("label").onReceive(tick, fun delta -> count.Set(count.Current + delta))
+                }
+            }
+
+        let tree = Run.startView view
+        let label = find<TestLabel> tree "label" :> IText
+
+        Assert.AreEqual("0", label.Text)
+        tick.Trigger 1
+        Assert.AreEqual("1", label.Text)
+        tick.Trigger 2
+        Assert.AreEqual("3", label.Text)

src/Fabulous.Tests/APISketchTests/TestUI.ComponentBuilders.fs

@@ -0,0 +1,8 @@
+namespace Fabulous.Tests.APISketchTests
+
+open Fabulous
+
+[<AutoOpen>]
+module TestUI_ComponentBuilders =
+    type TestUI_Widgets.View with
+        static member Component<'msg, 'marker when 'msg: equality>(key: string) = ComponentBuilder<'msg, 'marker>(key)

src/Fabulous.Tests/APISketchTests/TestUI.Widgets.fs

@@ -234,6 +234,30 @@ module TestUI_Widgets =
 
                 view :?> TestViewElement
 
+        let startView (view: WidgetBuilder<'msg, 'marker>) : TestViewElement =
+            let logger =
+                { Log = fun _ -> ()
+                  MinLogLevel = LogLevel.Fatal }
+
+            let envContext = new EnvironmentContext(logger)
+
+            let treeContext: ViewTreeContext =
+                { CanReuseView = ViewHelpers.canReuseView
+                  GetViewNode = ViewNode.getViewNode
+                  Logger = logger
+                  Dispatch = fun _ -> ()
+                  GetComponent = Component.getComponent
+                  SetComponent = Component.setComponent
+                  SyncAction = fun fn -> fn() }
+
+            let widget = view.Compile()
+            let widgetDef = WidgetDefinitionStore.get widget.Key
+
+            let struct (_node, rootView) =
+                widgetDef.CreateView(widget, envContext, treeContext, ValueNone)
+
+            rootView :?> TestViewElement
+
 //module View =
 //    let inline map (fn: 'oldMsg -> 'newMsg) (this: WidgetBuilder<'oldMsg, 'marker>) : WidgetBuilder<'newMsg, 'marker> =
 //        this.MapMsg fn

src/Fabulous.Tests/Fabulous.Tests.fsproj

@@ -11,7 +11,9 @@
     <Compile Include="APISketchTests\TestUI.ViewUpdaters.fs" />
     <Compile Include="APISketchTests\TestUI.Attributes.fs" />
     <Compile Include="APISketchTests\TestUI.Widgets.fs" />
+    <Compile Include="APISketchTests\TestUI.ComponentBuilders.fs" />
     <Compile Include="APISketchTests\APISketchTests.fs" />
+    <Compile Include="APISketchTests\ComponentOnReceiveTests.fs" />
     <Compile Include="Generators.fs" />
     <Compile Include="AttributesTests.fs" />
     <Compile Include="ViewTests.fs" />

src/Fabulous/Components/OnReceive.fs

@@ -0,0 +1,40 @@
+namespace Fabulous
+
+open System
+open System.Runtime.CompilerServices
+open Fabulous.ScalarAttributeDefinitions
+
+module OnReceiveAttribute =
+    let OnReceive: SimpleScalarAttributeDefinition<IViewNode -> IDisposable> =
+        { Key =
+            SimpleScalarAttributeDefinition.CreateAttributeData(
+                ScalarAttributeComparers.noCompare,
+                (fun _ (newValueOpt: (IViewNode -> IDisposable) voption) (node: IViewNode) ->
+                    match node.TryGetHandler("onReceive") with
+                    | ValueSome d -> d.Dispose()
+                    | ValueNone -> ()
+
+                    match newValueOpt with
+                    | ValueNone -> node.RemoveHandler("onReceive")
+                    | ValueSome subscribe ->
+                        let d = subscribe node
+                        node.SetHandler("onReceive", d))
+            )
+            |> AttributeDefinitionStore.registerScalar
+          Name = "OnReceive" }
+
+type OnReceiveExtensions =
+    [<Extension>]
+    static member onReceive(this: WidgetBuilder<'msg, 'marker>, source: IObservable<'T>, action: 'T -> unit) =
+        let subscribe (node: IViewNode) : IDisposable =
+            source.Subscribe(fun value -> node.TreeContext.SyncAction(fun () -> action value))
+
+        this.AddScalar(OnReceiveAttribute.OnReceive.WithValue(subscribe))
+
+    [<Extension>]
+    static member onReceive(this: WidgetBuilder<'msg, 'marker>, source: IEvent<EventHandler<'T>, 'T>, action: 'T -> unit) =
+        OnReceiveExtensions.onReceive(this, (source :> IObservable<'T>), action)
+
+    [<Extension>]
+    static member onReceive(this: WidgetBuilder<'msg, 'marker>, source: Event<'T>, action: 'T -> unit) =
+        OnReceiveExtensions.onReceive(this, (source.Publish :> IObservable<'T>), action)

src/Fabulous/Fabulous.fsproj

@@ -53,6 +53,7 @@
     <Compile Include="Components\Environment.fs" />
     <Compile Include="Components\EnvironmentObject.fs" />
     <Compile Include="Components\Mvu.fs" />
+    <Compile Include="Components\OnReceive.fs" />
     <Compile Include="View.fs" />
   </ItemGroup>
   <ItemGroup>