elm-stuff

.gitignore

@@ -15,3 +15,4 @@ figwheel_server.log
 neo4j/*
 resources/public/js/out
 .rebel_readline_history
+/elm-stuff

elm.json

@@ -0,0 +1,24 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src/frontend"
+    ],
+    "elm-version": "0.19.0",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.1",
+            "elm/core": "1.0.2",
+            "elm/html": "1.0.0"
+        },
+        "indirect": {
+            "elm/json": "1.1.3",
+            "elm/time": "1.0.0",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.2"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}

project.clj

@@ -51,8 +51,7 @@
                              [lein-bikeshed "0.5.1"]
                              [lein-cloverage "1.1.0"]
                              [cider/cider-nrepl "LATEST"]
-                             [lein-kibit "LATEST"]]
-                   :source-paths ["src" "env/dev/clj"]}
+                             [lein-kibit "LATEST"]]}
              :uberjar {:aot :all
                        :main wanijo.main}}
 

src/frontend/viz.elm

@@ -0,0 +1,31 @@
+module Main exposing (Msg(..), main, update, view)
+
+import Browser
+import Html exposing (Html, button, div, text)
+import Html.Events exposing (onClick)
+
+
+main =
+    Browser.sandbox { init = 0, update = update, view = view }
+
+
+type Msg
+    = Increment
+    | Decrement
+
+
+update msg model =
+    case msg of
+        Increment ->
+            model + 1
+
+        Decrement ->
+            model - 1
+
+
+view model =
+    div []
+        [ button [ onClick Decrement ] [ text "-" ]
+        , div [] [ text (String.fromInt model) ]
+        , button [ onClick Increment ] [ text "+" ]
+        ]

src/wanijo/visualisation/view.clj

@@ -5,7 +5,10 @@
 (defn index [req]
   (view/layout!
    :request req
-   :bottom nil
+   :head (include-js "/js/frontend.js")
+   :bottom [:script
+            "Elm.Main.init({node: document.getElementById('visualisation')})"]
    :content
    [[:h1 "Visualisation"]
-    [:div#visualisation]]))
+    [:div#visualisation]
+    ]))