Update remoting to latest, docs for client

Content/build.fsx

@@ -42,7 +42,7 @@ let npmTool = platformTool "npm" "npm.cmd"
 let yarnTool = platformTool "yarn" "yarn.cmd"
 //#endif
 
-let install = lazy DotNet.install DotNet.Release_2_1_300
+let install = lazy DotNet.install DotNet.Versions.Release_2_1_300
 
 let inline withWorkDir wd =
     DotNet.Options.lift install.Value
@@ -221,7 +221,8 @@ open Fake.Core.TargetOperators
     ==> "AppService"
 //#endif
 
-"InstallClient"
+"Clean"
+    ==> "InstallClient"
     ==> "RestoreServer"
     ==> "Run"
 

Content/paket.dependencies

@@ -15,11 +15,9 @@ group Server
 //#if (!remoting && server != "suave")
     nuget Fable.JsonConverter
 //#elseif (remoting && server == "suave")
-    nuget Fable.Remoting.Server ~> 3.6
-    nuget Fable.Remoting.Suave ~> 2.7
+    nuget Fable.Remoting.Suave 
 //#elseif (remoting && server != "suave")
-    nuget Fable.Remoting.Server ~> 3.6
-    nuget Fable.Remoting.Giraffe ~> 2.7
+    nuget Fable.Remoting.Giraffe 
 //#endif
 //#if (deploy == "azure")
     nuget Microsoft.ApplicationInsights.AspNetCore ~> 2.2
@@ -35,7 +33,7 @@ group Client
     nuget Fable.Elmish.React
     nuget Fable.Elmish.HMR
 //#if (remoting)
-    nuget Fable.Remoting.Client ~> 2.5.1
+    nuget Fable.Remoting.Client
 //#endif
 //#if (layout != "none")
     nuget Fulma

Content/src/Client/Client.fs

@@ -17,12 +17,18 @@ open Fulma
 open Fulma.FontAwesome
 #endif
 
-type Model = Counter option
-
+// The model holds data that you want to keep track of while the application is running
+// in this case, we are keeping track of a counter
+// we mark it as optional, because initially it will not be available from the client
+// the initial value will be requested from server
+type Model = { Counter: Counter option }
+
+// The Msg type defines what events/actions can occur while the application is running
+// the state of the application changes *only* in reaction to these events   
 type Msg =
 | Increment
 | Decrement
-| Init of Result<Counter, exn>
+| InitialCountLoaded of Result<Counter, exn>
 
 
 #if (remoting)
@@ -32,39 +38,49 @@ module Server =
     open Fable.Remoting.Client
 
     /// A proxy you can use to talk to server directly
-    let api : ICounterProtocol =
-        Proxy.remoting<ICounterProtocol> {
-            use_route_builder Route.builder
-        }
+    let api : ICounterApi =
+      Remoting.createApi()
+      |> Remoting.withRouteBuilder Route.builder 
+      |> Remoting.buildProxy<ICounterApi>() 
 
 #endif
 
+// defines the initial state and initial command (= side-effect) of the application
 let init () : Model * Cmd<Msg> =
-    let model = None
-    let cmd =
+    let initialModel = { Counter = None }
+    let loadCountCmd = 
 #if remoting
         Cmd.ofAsync
-            Server.api.getInitCounter
+            Server.api.initialCounter
             ()
-            (Ok >> Init)
-            (Error >> Init)
+            (Ok >> InitialCountLoaded)
+            (Error >> InitialCountLoaded)
 #else
         Cmd.ofPromise
             (fetchAs<int> "/api/init")
             []
-            (Ok >> Init)
-            (Error >> Init)
+            (Ok >> InitialCountLoaded)
+            (Error >> InitialCountLoaded)
 #endif
-    model, cmd
-
-let update (msg : Msg) (model : Model) : Model * Cmd<Msg> =
-    let model' =
-        match model,  msg with
-        | Some x, Increment -> Some (x + 1)
-        | Some x, Decrement -> Some (x - 1)
-        | None, Init (Ok x) -> Some x
-        | _ -> None
-    model', Cmd.none
+    initialModel, loadCountCmd
+
+// The update function computes the next state of the application based on the current state and the incoming events/messages 
+// It can also run side-effects (encoded as commands) like calling the server via Http. 
+// these commands in turn, can dispatch messages to which the update function will react.  
+let update (msg : Msg) (currentModel : Model) : Model * Cmd<Msg> =
+    match currentModel.Counter, msg with
+    | Some x, Increment ->
+        let nextModel = { currentModel with Counter = Some (x + 1) } 
+        nextModel, Cmd.none 
+    | Some x, Decrement -> 
+        let nextModel = { currentModel with Counter = Some (x - 1) }
+        nextModel, Cmd.none 
+    | _, InitialCountLoaded (Ok initialCount)-> 
+        let nextModel = { Counter = Some initialCount } 
+        nextModel, Cmd.none
+
+    | _ -> currentModel, Cmd.none 
+
 
 let safeComponents =
     let intersperse sep ls =
@@ -103,8 +119,8 @@ let safeComponents =
           components ]
 
 let show = function
-| Some x -> string x
-| None -> "Loading..."
+| { Counter = Some x } -> string x
+| { Counter = None   } -> "Loading..."
 
 #if (layout == "none")
 let view (model : Model) (dispatch : Msg -> unit) =

Content/src/Server/ServerGiraffe.fs

@@ -30,16 +30,20 @@ let publicPath = Path.GetFullPath "../Client/public"
 let port = 8085us
 
 let getInitCounter () : Task<Counter> = task { return 42 }
-
-let webApp : HttpHandler =
 #if (remoting)
-    let counterProcotol =
-        { getInitCounter = getInitCounter >> Async.AwaitTask }
-    // creates a HttpHandler for the given implementation
-    remoting counterProcotol {
-        use_route_builder Route.builder
-    }
+
+let counterApi = {
+    initialCounter = getInitCounter >> Async.AwaitTask 
+}
+
+let webApp =
+    Remoting.createApi()
+    |> Remoting.withRouteBuilder Route.builder 
+    |> Remoting.fromValue counterApi 
+    |> Remoting.buildHttpHandler
+
 #else
+let webApp =
     route "/api/init" >=>
         fun next ctx ->
             task {
@@ -48,7 +52,7 @@ let webApp : HttpHandler =
             }
 #endif
 
-let configureApp    (app : IApplicationBuilder) =
+let configureApp (app : IApplicationBuilder) =
     app.UseDefaultFiles()
        .UseStaticFiles()
        .UseGiraffe webApp

Content/src/Server/ServerSaturn.fs

@@ -26,15 +26,18 @@ let publicPath = Path.GetFullPath "../Client/public"
 //#endif
 let port = 8085us
 
-let getInitCounter () : Task<Counter> = task { return 42 }
+let getInitCounter() : Task<Counter> = task { return 42 }
 
 #if (remoting)
+let counterApi = {
+    initialCounter = getInitCounter >> Async.AwaitTask 
+}
+
 let webApp =
-    let server =
-        { getInitCounter = getInitCounter >> Async.AwaitTask }
-    remoting server {
-        use_route_builder Route.builder
-    }
+    Remoting.createApi()
+    |> Remoting.withRouteBuilder Route.builder 
+    |> Remoting.fromValue counterApi 
+    |> Remoting.buildHttpHandler
 
 #else
 let webApp = scope {
@@ -62,7 +65,7 @@ let configureAzure (services:IServiceCollection) =
 #endif
 let app = application {
     url ("http://0.0.0.0:" + port.ToString() + "/")
-    router webApp
+    use_router webApp
     memory_cache
     use_static publicPath
     #if (!remoting)
@@ -71,11 +74,6 @@ let app = application {
     #if (deploy == "azure")
     service_config configureAzure
     #endif
-    #if (remoting)
-    // sitemap diagnostic data cannot be inferred when using Fable.Remoting
-    // Saturn issue at https://github.com/SaturnFramework/Saturn/issues/64
-    disable_diagnostics
-    #endif
     use_gzip
 }
 

Content/src/Server/ServerSuave.fs

@@ -2,6 +2,9 @@
 open System.Net
 
 open Suave
+open Suave.Files 
+open Suave.Successful
+open Suave.Filters
 open Suave.Operators
 
 open Shared
@@ -28,31 +31,32 @@ let config =
           homeFolder = Some publicPath
           bindings = [ HttpBinding.create HTTP (IPAddress.Parse "0.0.0.0") port ] }
 
-let getInitCounter () : Async<Counter> = async { return 42 }
-
-let webApi : WebPart =
+let getInitCounter() : Async<Counter> = async { return 42 }
 #if (remoting)
-    let counterProcotol =
-      { getInitCounter = getInitCounter }
-    // Create a WebPart for the given implementation of the protocol
-    remoting counterProcotol {
-      // define how routes are mapped
-      use_route_builder Route.builder
-    }
+let counterApi = {
+    initialCounter = getInitCounter 
+}
+
+let webApi =
+    Remoting.createApi()
+    |> Remoting.withRouteBuilder Route.builder 
+    |> Remoting.fromValue counterApi 
+    |> Remoting.buildWebPart 
 #else
-    Filters.path "/api/init" >=>
+let webApi =
+    path "/api/init" >=>
         fun ctx ->
             async {
                 let! counter = getInitCounter()
-                return! Successful.OK (string counter) ctx
+                return! OK (string counter) ctx
             }
 #endif
 
 let webApp =
     choose [
         webApi
-        Filters.path "/" >=> Files.browseFileHome "index.html"
-        Files.browseHome
+        path "/" >=> browseFileHome "index.html"
+        browseHome
         RequestErrors.NOT_FOUND "Not found!"
 #if (deploy == "azure")
     ] |> Azure.AI.withAppInsights Azure.AI.buildApiOperationName
@@ -65,4 +69,4 @@ Azure.tryGetEnv "APPINSIGHTS_INSTRUMENTATIONKEY"
     ]
 #endif
 
-startWebServer config webApp
+startWebServer config webApp

Content/src/Shared/Shared.fs

@@ -8,9 +8,8 @@ module Route =
     let builder typeName methodName =
         sprintf "/api/%s/%s" typeName methodName
 
-/// A type that specifies the communication protocol for client and server
-/// Every record field must have the type : 'a -> Async<'b> where 'a can also be `unit`
-/// Add more such fields, implement them on the server and they be directly available on client
-type ICounterProtocol =
-    { getInitCounter : unit -> Async<Counter> }
+/// A type that specifies the communication protocol between client and server
+/// to learn more, read the docs at https://zaid-ajaj.github.io/Fable.Remoting/src/basics.html
+type ICounterApi =
+    { initialCounter : unit -> Async<Counter> }
 #endif