New sample : Websocket + Auto refresh + Hot Module replacement

fable-compiler · Aug 21, 2016 · abe4328 · abe4328
1 parent bc65e2b
commit abe4328
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -253,9 +253,10 @@ paket-files/
 
 **/static/js/*
 !**/static/js/.keep
-out/
+**/out/*
 deploy/
 build/
 .paket/paket.exe
 
-public/
+public/
+!samples/web_socket(with_auto_refresh)/out/index.html
diff --git a/samples/web_socket(with_auto_refresh)/Source/Main.fsx b/samples/web_socket(with_auto_refresh)/Source/Main.fsx
@@ -0,0 +1,108 @@
+#r "../node_modules/fable-core/Fable.Core.dll"
+#load "../node_modules/fable-import-virtualdom/Fable.Helpers.Virtualdom.fs"
+open Fable.Core
+open Fable.Core.JsInterop
+open Fable.Import
+open Fable.Import.Browser
+
+open Fable.Helpers.Virtualdom
+open Fable.Helpers.Virtualdom.App
+open Fable.Helpers.Virtualdom.Html
+
+
+open System
+
+type Model =
+  { Input: string
+    Messages: string list}
+
+  static member initial =
+    { Input = ""
+      Messages = []}
+
+type Action =
+  | NoOp
+  | ChangeInput of string
+  | SendEcho
+  | ReceivedEcho of string
+
+let webSocket =
+  WebSocket.Create("wss://echo.websocket.org")
+
+let update (model: Model) action =
+  let model', action' =
+    match action with
+    | ReceivedEcho msg ->
+      { model with Messages = msg :: model.Messages } ,[]
+    | ChangeInput s ->
+      { model with Input = s }, []
+    | SendEcho ->
+      { model with Input = "" }, []
+    | _ ->
+      model, []
+
+  let jsCall =
+    match action with
+    | SendEcho -> webSocket.send(model.Input)
+    | _ -> ()
+
+  model', action'
+
+let inline onInput x = onEvent "oninput" (fun e -> x (unbox e?target?value))
+let onEnter succ nop = onKeyup (fun x -> if (unbox x?keyCode) = 13 then succ else nop)
+
+let viewMessage msg =
+  div
+    []
+    [ span
+        []
+        [ text msg ]
+      br []
+    ]
+
+let view model =
+  div
+    []
+    [ div
+        []
+        [ text "Guide"
+          ol
+            []
+            [ li
+                []
+                [ text "Enter your text" ]
+              li
+                []
+                [ text "Press enter or click the button" ]
+              li
+                []
+                [ text "See the message been received and added to the list" ]
+            ]
+        ]
+      input
+        [ onInput (fun x -> ChangeInput x)
+          property "value" model.Input
+          onEnter SendEcho NoOp ]
+      button
+        [ onMouseClick (fun _ -> SendEcho) ]
+        [ text "Send" ]
+      br []
+      span
+        []
+        [ text "Messages received:" ]
+      div
+        []
+        (model.Messages |> List.map(fun x -> viewMessage x))
+    ]
+
+let webSocketProducer push =
+  webSocket.addEventListener_message(
+    Func<_,_>(fun e ->
+      push(ReceivedEcho (unbox e.data))
+      null
+  )
+)
+
+createApp Model.initial view update
+|> withProducer webSocketProducer
+|> start renderer
diff --git a/samples/web_socket(with_auto_refresh)/fableconfig.json b/samples/web_socket(with_auto_refresh)/fableconfig.json
@@ -0,0 +1,6 @@
+{
+  "module": "amd",
+  "sourceMaps": true,
+  "projFile": "./Source/Main.fsx",
+  "outDir": "out"
+}
diff --git a/samples/web_socket(with_auto_refresh)/out/index.html b/samples/web_socket(with_auto_refresh)/out/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="fr-FR">
+  <head>
+    <meta charSet="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>BridgeStream</title>
+    <meta name="description" content="Application to make draw from Twitch and Youtube live tchat"/>
+    <meta name="author" content="Mangel Maxime"/>
+  </head>
+  <body>
+    <script src="/public/bundle.js"></script>
+  </body>
+</html>
diff --git a/samples/web_socket(with_auto_refresh)/package.json b/samples/web_socket(with_auto_refresh)/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "browser",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "node_modules/.bin/fable",
+    "watch": "npm run build -- -w",
+    "dev": "node_modules/.bin/concurrently 'npm run watch' 'npm run wp-server'",
+    "wp-server": "node_modules/.bin/webpack-dev-server --hot"
+  },
+  "author": "Maxime Mangel <mangel.maxime@outlook.com>",
+  "license": "ISC",
+  "devDependencies": {
+    "concurrently": "^2.2.0",
+    "fable-compiler": "^0.5.6",
+    "fable-import-virtualdom": "^0.6.7",
+    "html-webpack-plugin": "^2.22.0",
+    "source-map-loader": "^0.1.5",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {
+    "core-js": "^2.4.1",
+    "fable-core": "^0.5.4",
+    "virtual-dom": "^2.1.1"
+  },
+  "engines": {
+    "fable": "^0.5.6"
+  }
+}
diff --git a/samples/web_socket(with_auto_refresh)/webpack.config.js b/samples/web_socket(with_auto_refresh)/webpack.config.js
@@ -0,0 +1,29 @@
+var path = require("path");
+var webpack = require("webpack");
+
+var cfg = {
+  devtool: "source-map",
+  entry: "./out/Main.js",
+  output: {
+    path: path.join(__dirname, "public"),
+    publicPath: "/public/",
+    filename: "bundle.js"
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: "source-map-loader",
+        include: "path.join(__dirname, 'public')"
+      }
+    ]
+  },
+  devServer: {
+    contentBase: "out/",
+    inline: true,
+    publicPath: "/public/"
+  }
+};
+
+module.exports = cfg;