Client: Elmish

CompositionalIT · Dec 20, 2023 · 1e39a36 · 1e39a36
1 parent 0e47e2f
commit 1e39a36
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 20 deletions.
diff --git a/client/Program.fs b/client/Program.fs
@@ -1,7 +1,17 @@
-open Feliz
-open Browser
-open Feliz.JSX.React
+open Elmish
+open Elmish.React
 
-let private root = document.getElementById "root" |> ReactDOM.createRoot
+#if DEBUG
+open Elmish.Debug
+open Elmish.HMR
+#endif
 
-[ App.MyComponent() |> toReact ] |> React.strictMode |> root.render
+Program.mkProgram Ui.init Ui.update Ui.view
+#if DEBUG
+|> Program.withConsoleTrace
+#endif
+|> Program.withReactSynchronous "root"
+#if DEBUG
+|> Program.withDebugger
+#endif
+|> Program.run
diff --git a/client/Ui.fs b/client/Ui.fs
@@ -1,28 +1,42 @@
-module App
+module Ui
 
 open Browser.Dom
 open Feliz
 open Fable.Core
 open Fable.Remoting.Client
+open Elmish
+open Feliz.JSX.React
 
-let private loadData () =
-    let api =
-        Remoting.createApi ()
-        |> Remoting.withRouteBuilder Route.builder
-        |> Remoting.buildProxy<IApi>
+type Model = string option
 
-    async {
-        let! data = api.Greet()
-        console.log data
-        window.alert $"Data received: '{data}'"
-    }
-    |> Async.StartImmediate
+type Message =
+    | GetData
+    | GotData of string
+
+let api =
+    Remoting.createApi ()
+    |> Remoting.withRouteBuilder Route.builder
+    |> Remoting.buildProxy<IApi>
+
+let init () = None, Cmd.none
+
+let update msg model =
+    match msg with
+    | GetData -> None, Cmd.OfAsync.perform api.Greet () GotData
+    | GotData data -> Some data, Cmd.none
 
 [<JSX.Component>]
-let MyComponent () =
+let MyComponent model dispatch =
+    match model with
+    | Some model -> window.alert model
+    | None -> ()
+
     JSX.jsx
         $"""
-    <button id="btnFetch" onClick={fun _ -> loadData ()}>
+    <button onClick={fun _ -> dispatch GetData}>
         Fetch Data!
     </button>
-"""
+"""
+    |> toReact
+
+let view model dispatch = MyComponent model dispatch
diff --git a/client/client.fsproj b/client/client.fsproj
@@ -10,6 +10,9 @@
     </ItemGroup>
     <ItemGroup>
         <PackageReference Include="Fable.Core" Version="4.2.0" />
+        <PackageReference Include="Fable.Elmish.Debugger" Version="4.0.0" />
+        <PackageReference Include="Fable.Elmish.HMR" Version="7.0.0" />
+        <PackageReference Include="Fable.Elmish.React" Version="4.0.0" />
         <PackageReference Include="Fable.Remoting.Client" Version="7.29.0" />
         <PackageReference Include="Fable.SimpleHttp" Version="3.6.0" />
         <PackageReference Include="Feliz" Version="2.7.0" />

diff --git a/client/index.html b/client/index.html
@@ -7,6 +7,10 @@
 
 <body>
     <div id="root"></div>
+    <!-- Polyfill for remotedev -->
+    <script type="text/javascript">
+        var global = global || window;
+    </script>
     <script type="module" src="/output/Program.jsx"></script>
 </body>