Add React Component Support

fable-compiler · Feb 28, 2018 · 376bc0b · 376bc0b
1 parent e47f9bb
commit 376bc0b
Show file tree

Hide file tree

Showing 18 changed files with 1,276 additions and 771 deletions.
diff --git a/.paket/Paket.Restore.targets b/.paket/Paket.Restore.targets
diff --git a/Samples/SSRSample/package.json b/Samples/SSRSample/package.json
@@ -3,9 +3,9 @@
   "dependencies": {
     "babel-polyfill": "6.26.0",
     "babel-runtime": "6.26.0",
-    "react": "16.0.0",
+    "react": "16.2.0",
     "react-bootstrap": "0.31.3",
-    "react-dom": "16.0.0",
+    "react-dom": "16.2.0",
     "remotedev": "0.2.7"
   },
   "devDependencies": {
@@ -15,7 +15,7 @@
     "babel-preset-env": "1.6.0",
     "concurrently": "3.5.0",
     "fable-loader": "1.1.3",
-    "fable-splitter": "^0.1.21",
+    "fable-splitter": "0.1.21",
     "fable-utils": "1.0.6",
     "webpack": "3.7.1",
     "webpack-dev-server": "2.9.1"

diff --git a/Samples/SSRSample/splitter.config.js b/Samples/SSRSample/splitter.config.js
@@ -6,7 +6,7 @@ function resolve(relativePath) {
 }
 
 module.exports = {
-  entry: resolve("src/MyProject.fsproj"),
+  entry: resolve("src/Client/Client.fsproj"),
   outDir: resolve("out"),
   babel: fableUtils.resolveBabelOptions({
     presets: [["env", { modules: "commonjs" }]],

diff --git a/Samples/SSRSample/src/Client/Client.fs b/Samples/SSRSample/src/Client/Client.fs
@@ -51,7 +51,7 @@ Program.mkProgram init update view
 |> Program.withConsoleTrace
 |> Program.withHMR
 #endif
-|> Program.withReact "elmish-app"
+|> Program.withReactHydrate "elmish-app"
 #if DEBUG
 |> Program.withDebugger
 #endif

diff --git a/Samples/SSRSample/src/Client/Client.fsproj b/Samples/SSRSample/src/Client/Client.fsproj
@@ -3,20 +3,19 @@
   <PropertyGroup>
     <TargetFramework>netstandard2.0</TargetFramework>
   </PropertyGroup>
+
+  <Import Project="../Shared/Shared.props" />
+
   <ItemGroup>
-    <Compile Include="../../../../src/Fable.React/Fable.Import.React.fs" />
-    <Compile Include="../../../../src/Fable.React/Fable.Helpers.React.fs" />
     <!--
       Ensure elmish-react using the same fable-react,
       no need for production!
     -->
     <Compile Include="../../paket-files/fable-elmish/react/src/common.fs" />
     <Compile Include="../../paket-files/fable-elmish/react/src/react.fs" />
 
-    <Compile Include="..\Shared\Shared.fs" />
-    <Compile Include="Types.fs" />
-    <Compile Include="View.fs" />
     <Compile Include="Bench.fs" />
+    <Compile Include="withReactHydrate.fs" />
     <Compile Include="Client.fs" />
   </ItemGroup>
   <Import Project="..\..\.paket\Paket.Restore.targets" />

diff --git a/Samples/SSRSample/src/Client/View.fs b/Samples/SSRSample/src/Client/View.fs
@@ -2,11 +2,25 @@
 module Client.View
 
 
+open Fable.Import
+open Fable.Core
+open Fable.Core.JsInterop
 open Fable.Helpers.React
+open Fable.Helpers.Isomorphic
 open Fable.Helpers.React.Props
 open Client.Types
 open Shared
 
+type [<Pojo>] JsCompProps = {
+  text: string
+}
+
+#if FABLE_COMPILER
+let JsComp: React.ComponentClass<JsCompProps> = importDefault "./jsComp"
+#else
+let JsComp = Unchecked.defaultof<React.ComponentClass<JsCompProps>>
+#endif
+
 let show = function
 | Some x -> string x
 | None -> "Loading..."
@@ -32,6 +46,28 @@ let safeComponents =
       str " powered by: "
       components ]
 
+let jsComp (props: JsCompProps) =
+  ofImport "default" "./jsComp" props []
+
+let jsCompServer (props: JsCompProps) =
+  div [] [ str "loading" ]
+
+type [<Pojo>] MyProp = {
+  text: string
+}
+type [<Pojo>] MyState = {
+  text: string
+}
+
+type MyReactComp(initProps: MyProp) as self =
+  inherit React.Component<MyProp, MyState>(initProps) with
+  do self.setInitState { text="my state" }
+
+  override x.render() =
+    div [] [ str (sprintf "prop: %s state: %s" x.props.text x.state.text) ]
+
+
+
 let view (model: Model) (dispatch) =
   div []
     [ h1 [] [ str "SAFE Template" ]
@@ -65,28 +101,50 @@ let view (model: Model) (dispatch) =
         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 ]
+        input [ Type "checkbox"; Checked true; OnChange ignore ]
+        input [ Type "checkbox"; Checked false; OnChange ignore ]
       ]
       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" ]
+        input [ Type "text"; Value "true"; OnChange ignore ]
+        input [ Type "text"; Value "false"; OnChange ignore ]
       ]
 
       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" ] []
+        textarea [ Value "true"; OnChange ignore] []
+        textarea [ Value "false"; OnChange ignore] []
       ]
+
+      div [] [
+        span [] [ str "Test React.Fragment:" ]
+        fragment []
+          [ span [] [ str "child 1" ]
+            span [] [ str "child 2" ]
+            span [] [ str "child 3" ]
+            span [] [ str "child 4" ]
+          ]
+      ]
+
+      div [] [
+        span [] [ str "Test escape:" ]
+        fragment []
+          [ span
+              [ Data ("value", "<div>\"\'&</div>");
+                Style [ Display "<div>\"\'&</div>"]
+              ]
+              [ str "<div>\"\'&</div>" ]
+          ]
+      ]
+
+      div [] [
+        span [] [ str "Test js component:" ]
+        hybridView jsComp jsCompServer { text="I'm rendered by a js Component!" }
+      ]
+
+      ofType<MyReactComp, _, _> { text="my prop" } []
     ]
diff --git a/Samples/SSRSample/src/Client/jsComp.js b/Samples/SSRSample/src/Client/jsComp.js
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default function JsComp({ text }) {
+  return React.createElement('div', null, text)
+}
+
diff --git a/Samples/SSRSample/src/Client/withReactHydrate.fs b/Samples/SSRSample/src/Client/withReactHydrate.fs
@@ -0,0 +1,17 @@
+namespace Client
+
+open Elmish.React
+
+[<RequireQualifiedAccess>]
+module Program =
+    open Fable.Import.Browser
+    let withReactHydrate placeholderId (program:Elmish.Program<_,_,_,_>) =
+        let setState dispatch =
+            let viewWithDispatch = program.view dispatch
+            fun model ->
+                Fable.Import.ReactDom.hydrate(
+                    lazyViewWith (fun x y -> obj.ReferenceEquals(x,y)) viewWithDispatch model,
+                    document.getElementById(placeholderId)
+                )
+
+        { program with setState = setState }
diff --git a/Samples/SSRSample/src/Server/Server.fs b/Samples/SSRSample/src/Server/Server.fs
@@ -19,7 +19,7 @@ open System.Diagnostics
 
 let clientPath = Path.Combine("..","Client") |> Path.GetFullPath
 let port = 8085us
-let assetsBaseUrl = "http://localhost:8082"
+let assetsBaseUrl = "http://localhost:8080"
 
 let initState: Model = {
   counter = Some 42
@@ -50,7 +50,7 @@ let htmlTemplate =
           script []
             [ rawText (sprintf """
             var __INIT_STATE__ = %s
-            """ (toJson (toJson initState))) ]
+            """ (toJson (toJson initState))) ] // call toJson twice to output json as js string in html
           script [ _src (assetsBaseUrl + "/public/bundle.js") ] []
         ]
     ]

diff --git a/Samples/SSRSample/src/Server/Server.fsproj b/Samples/SSRSample/src/Server/Server.fsproj
@@ -4,13 +4,9 @@
     <OutputType>Exe</OutputType>
     <TargetFramework>netcoreapp2.0</TargetFramework>
   </PropertyGroup>
+  <Import Project="../Shared/Shared.props" />
   <ItemGroup>
-    <Compile Include="../../../../src/Fable.React/Fable.Import.React.fs" />
-    <Compile Include="../../../../src/Fable.React/Fable.Helpers.React.fs" />
     <Compile Include="../../../../src/Fable.React/Fable.Helpers.ReactServer.fs" />
-    <Compile Include="../Shared/Shared.fs" />
-    <Compile Include="../Client/Types.fs" />
-    <Compile Include="../Client/View.fs" />
     <Compile Include="./FableJson.fs" />
     <Compile Include="./Server.fs" />
   </ItemGroup>

diff --git a/Samples/SSRSample/src/Shared/Shared.props b/Samples/SSRSample/src/Shared/Shared.props
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project>
+  <ItemGroup>
+    <Compile Include="../../../../src/Fable.React/Fable.Import.React.fs" />
+    <Compile Include="../../../../src/Fable.React/Fable.Helpers.React.fs" />
+    <Compile Include="../../../../src/Fable.React/Fable.Helpers.Isomorphic.fs" />
+    <Compile Include="../Shared/Shared.fs" />
+    <Compile Include="../Client/Types.fs" />
+    <Compile Include="../Client/View.fs" />
+  </ItemGroup>
+</Project>
+
diff --git a/Samples/SSRSample/src/yarn.lock b/Samples/SSRSample/src/yarn.lock
@@ -0,0 +1,109 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+fbjs@^0.8.16:
+  version "0.8.16"
+  resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+iconv-lite@~0.4.13:
+  version "0.4.19"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+js-tokens@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+object-assign@^4.1.0, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  dependencies:
+    asap "~2.0.3"
+
+prop-types@^15.6.0:
+  version "15.6.1"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
+react-dom@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+react@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.npmjs.org/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+ua-parser-js@^0.7.9:
+  version "0.7.17"
+  resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
+
+whatwg-fetch@>=0.10.0:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"