Add data-reactroot

Samples/SSRSample/package.json

@@ -15,6 +15,7 @@
     "babel-preset-env": "1.6.0",
     "concurrently": "3.5.0",
     "fable-loader": "1.1.3",
+    "fable-splitter": "^0.1.21",
     "fable-utils": "1.0.6",
     "webpack": "3.7.1",
     "webpack-dev-server": "2.9.1"
@@ -27,6 +28,7 @@
     "restoreClient": "cd src/Client && yarn install",
     "restoreNetClient": "dotnet restore src/Client/Client.fsproj",
     "prestartClient": "concurrently \"npm run restoreClient\" \"npm run restoreNetClient\" ",
-    "startClient": "cd src/Client && dotnet fable webpack-dev-server"
+    "startClient": "cd src/Client && dotnet fable webpack-dev-server",
+    "buildClientLib": "fable-splitter ./src/Client/Client.fsproj -o ./src/Client/bin/lib --config ./splitter.config.js"
   }
 }

Samples/SSRSample/splitter.config.js

@@ -0,0 +1,18 @@
+const path = require("path");
+const fableUtils = require("fable-utils");
+
+function resolve(relativePath) {
+    return path.join(__dirname, relativePath);
+}
+
+module.exports = {
+  entry: resolve("src/MyProject.fsproj"),
+  outDir: resolve("out"),
+  babel: fableUtils.resolveBabelOptions({
+    presets: [["env", { modules: "commonjs" }]],
+    sourceMaps: true,
+  }),
+  fable: {
+    define: ["DEBUG"]
+  }
+}

Samples/SSRSample/src/Client/Bench.fs

@@ -0,0 +1,34 @@
+module Client.Bench
+
+open Fable.Core
+open Fable.Core.JsInterop
+open Fable.PowerPack.Fetch
+open Client.Types
+open Client.View
+open Fable.Import.React
+open Fable.Import.Browser
+open Shared
+
+let initState: Model = {
+  counter = Some 42
+  someString = "Some String"
+  someFloat = 11.11
+  someInt = 22
+}
+
+[<Emit("typeof process.platform !== 'undefined'")>]
+let isNode: bool = jsNative
+
+let jsRenderBench () =
+  if not isNode then () else
+
+  let renderToString: ReactElement -> string = importMember "react-dom/server"
+  let mutable len = 10000
+  console.log(renderToString (view initState ignore))
+  console.time("render")
+  while len > 0 do
+    renderToString (view initState ignore) |> ignore
+    len <- len - 1
+  console.timeEnd("render")
+
+jsRenderBench ()

Samples/SSRSample/src/Client/Client.fs

@@ -8,17 +8,21 @@ open Fable.Core.JsInterop
 open Fable.PowerPack.Fetch
 open Client.Types
 open Client.View
+open Fable.Import.React
 open Fable.Import.Browser
 open Shared
 
+Client.Bench.jsRenderBench()
+
+
 // let div = document.getElementById("elmish-app")
 // div.innerHTML <- ""
 // console.log("root", div)
 
 
 let init () =
   // Init model by server side state
-  let model = !!window?__INIT_STATE__
+  let model = ofJson<Model> !!window?__INIT_STATE__
   // let cmd =
   //   Cmd.ofPromise
   //     (fetchAs<int> "/api/init")
@@ -37,8 +41,6 @@ let update msg (model : Model) =
   model', Cmd.none
 
 
-
-
 #if DEBUG
 open Elmish.Debug
 open Elmish.HMR

Samples/SSRSample/src/Client/Client.fsproj

@@ -16,6 +16,7 @@
     <Compile Include="..\Shared\Shared.fs" />
     <Compile Include="Types.fs" />
     <Compile Include="View.fs" />
+    <Compile Include="Bench.fs" />
     <Compile Include="Client.fs" />
   </ItemGroup>
   <Import Project="..\..\.paket\Paket.Restore.targets" />

Samples/SSRSample/src/Client/View.fs

@@ -41,12 +41,52 @@ let view (model: Model) (dispatch) =
       div [] [ str (show model.counter) ]
       button [ OnClick (fun _ -> dispatch Increment) ] [ str "+" ]
       safeComponents
-      div [] [ str model.someString ]
-      div [] [ ofFloat model.someFloat ]
-      div [] [ ofInt model.someInt ]
-
-      div [ Id "someId"; Data ("aa", "bb") ] [ str "data-aa" ]
-      input [ Type "checkbox"; DefaultChecked true ]
-      div [ HTMLAttr.Custom ("cc", "dd") ] [ str "Custom HTMLAttr" ]
-      div [ Style [ Display "block"; CSSProp.Custom ("color", "red") ] ] [ str "Custom CSSProp" ]
+      div [] [
+        span [] [ str "Test str:" ]
+        span [] [ str model.someString ]
+      ]
+      div [] [
+        span [] [ str "Test ofFloat:" ]
+        span [] [ ofFloat model.someFloat ]
+      ]
+      div [] [
+        span [] [ str "Test ofInt:" ]
+        span [] [ ofInt model.someInt ]
+      ]
+      div [] [
+        span [] [ str "Test html attr:" ]
+        span [ Id "someId"; Data ("aa", "bb"); HTMLAttr.Custom ("cc", "dd") ] [ str "data-aa" ]
+      ]
+      div [] [
+        span [] [ str "Test CSS prop:" ]
+        div [ Style [ Display "block"; CSSProp.Custom ("color", "red") ] ] [ str "Custom CSSProp" ]
+      ]
+      div [] [
+        span [] [ str "Test checkbox:" ]
+        input [ Type "checkbox"; DefaultChecked true ]
+        input [ Type "checkbox"; DefaultChecked false ]
+        input [ Type "checkbox"; Checked true ]
+        input [ Type "checkbox"; Checked false ]
+        input [ Type "checkbox"; Checked true; DefaultChecked false ]
+        input [ Type "checkbox"; DefaultChecked true; Checked false ]
+      ]
+      div [] [
+        span [] [ str "Test value:" ]
+        input [ Type "text"; DefaultValue "true" ]
+        input [ Type "text"; DefaultValue "false" ]
+        input [ Type "text"; Value "true" ]
+        input [ Type "text"; Value "false" ]
+        input [ Type "text"; Value "true"; DefaultValue "false" ]
+        input [ Type "text"; DefaultValue "true"; Value "false" ]
+      ]
+
+      div [] [
+        span [] [ str "Test textarea:" ]
+        textarea [ DefaultValue "true" ] []
+        textarea [ DefaultValue "false" ] []
+        textarea [ Value "true" ] []
+        textarea [ Value "false" ] []
+        textarea [ Value "true"; DefaultValue "false" ] []
+        textarea [ DefaultValue "true"; Value "false" ] []
+      ]
     ]

Samples/SSRSample/src/Server/Server.fs

@@ -15,10 +15,11 @@ open Giraffe.Serialization.Json
 open Newtonsoft.Json
 
 open Shared
+open System.Diagnostics
 
 let clientPath = Path.Combine("..","Client") |> Path.GetFullPath
 let port = 8085us
-let assetsBaseUrl = "http://localhost:8080"
+let assetsBaseUrl = "http://localhost:8082"
 
 let initState: Model = {
   counter = Some 42
@@ -27,6 +28,18 @@ let initState: Model = {
   someInt = 22
 }
 
+let bench () =
+  let watch = Stopwatch()
+  watch.Start()
+  let times = 10000
+  for i = 1 to times do
+    Fable.Helpers.ReactServer.renderToString(Client.View.view initState ignore)
+    |> ignore
+  watch.Stop()
+  printfn "render %d times: %dms" times watch.ElapsedMilliseconds
+
+bench ()
+
 let getInitCounter () : Task<Model> = task { return initState }
 
 let htmlTemplate =
@@ -37,7 +50,7 @@ let htmlTemplate =
           script []
             [ rawText (sprintf """
             var __INIT_STATE__ = %s
-            """ (toJson initState)) ]
+            """ (toJson (toJson initState))) ]
           script [ _src (assetsBaseUrl + "/public/bundle.js") ] []
         ]
     ]

Samples/SSRSample/src/Shared/Shared.fs

@@ -1,8 +1,10 @@
 namespace Shared
+open Fable.Core
+open Fable.Core.JsInterop
 
 type Counter = int
 
-
+[<Pojo>]
 type Model = {
   counter: Counter option
   someString: string