Support boilerplate for Elm clients

Lately I was toiling while writing a ClojureScript client. This made me crave Elm. I'm going to rewrite the ClojureScript client using Elm, but along the way, I'm stopping off here and recording my starter boilerplate.
author: William Carroll <wpcarro@gmail.com> 2020-05-17T19·42+0100
committer: William Carroll <wpcarro@gmail.com> 2020-05-17T19·48+0100
commit: 05a2ea6bb7af37d8d5afdc28efddb3e6d2f9e746 (patch)
tree: 816489e0c2d381695b7cd7087cc40c8aca91a69d /boilerplate
parent: 066b1441b29df2d9616eabc8680e912e912cbb07 (diff)
11 files changed, 180 insertions, 0 deletions
diff --git a/boilerplate/elm/.gitignore b/boilerplate/elm/.gitignore
new file mode 100644
index 000000000000..1cb4f3034cc3
--- /dev/null
+++ b/boilerplate/elm/.gitignore
@@ -0,0 +1,3 @@
+/elm-stuff
+/Main.min.js
+/output.css
diff --git a/boilerplate/elm/README.md b/boilerplate/elm/README.md
new file mode 100644
index 000000000000..425d5163ea35
--- /dev/null
+++ b/boilerplate/elm/README.md
@@ -0,0 +1,17 @@
+# Elm
+
+Elm has one of the best developer experiences that I'm aware of. The error
+messages are helpful and the entire experience is optimized to improve the ease
+of writing web applications.
+
+## Developing
+
+If you're interested in contributing, the following will create an environment
+in which you can develop:
+
+```shell
+$ nix-shell
+$ elm-live -- src/Main.elm --output=Main.min.js
+```
+
+You can now view your web client at `http://localhost:8000`!
diff --git a/boilerplate/elm/dir-locals.nix b/boilerplate/elm/dir-locals.nix
new file mode 100644
index 000000000000..498f4b5055f8
--- /dev/null
+++ b/boilerplate/elm/dir-locals.nix
@@ -0,0 +1,3 @@
+let
+  briefcase = import <briefcase> {};
+in briefcase.utils.nixBufferFromShell ./shell.nix
diff --git a/boilerplate/elm/elm.json b/boilerplate/elm/elm.json
new file mode 100644
index 000000000000..a95f80408ec4
--- /dev/null
+++ b/boilerplate/elm/elm.json
@@ -0,0 +1,30 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.1",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.2",
+            "elm/core": "1.0.5",
+            "elm/html": "1.0.0",
+            "elm/random": "1.0.0",
+            "elm/svg": "1.0.1",
+            "elm/time": "1.0.0",
+            "elm-community/list-extra": "8.2.3",
+            "elm-community/maybe-extra": "5.2.0",
+            "elm-community/random-extra": "3.1.0"
+        },
+        "indirect": {
+            "elm/json": "1.1.3",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.2",
+            "owanturist/elm-union-find": "1.0.0"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}
diff --git a/boilerplate/elm/index.css b/boilerplate/elm/index.css
new file mode 100644
index 000000000000..b5c61c956711
--- /dev/null
+++ b/boilerplate/elm/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/boilerplate/elm/index.html b/boilerplate/elm/index.html
new file mode 100644
index 000000000000..ce8f727b6f3b
--- /dev/null
+++ b/boilerplate/elm/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Elm SPA</title>
+    <link rel="stylesheet" href="./output.css" />
+    <script src="./Main.min.js"></script>
+  </head>
+  <body class="font-serif">
+    <div id="mount"></div>
+    <script>
+     Elm.Main.init({node: document.getElementById("mount")});
+    </script>
+  </body>
+</html>
diff --git a/boilerplate/elm/shell.nix b/boilerplate/elm/shell.nix
new file mode 100644
index 000000000000..6f1c8ee23b30
--- /dev/null
+++ b/boilerplate/elm/shell.nix
@@ -0,0 +1,9 @@
+let
+  pkgs = import <nixpkgs> {};
+in pkgs.mkShell {
+  buildInputs = with pkgs; [
+    elmPackages.elm
+    elmPackages.elm-format
+    elmPackages.elm-live
+  ];
+}
diff --git a/boilerplate/elm/src/Landing.elm b/boilerplate/elm/src/Landing.elm
new file mode 100644
index 000000000000..00bb9e281af4
--- /dev/null
+++ b/boilerplate/elm/src/Landing.elm
@@ -0,0 +1,13 @@
+module Landing exposing (render)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import State
+
+
+render : State.Model -> Html State.Msg
+render model =
+    div [ class "pt-10 pb-20 px-10" ]
+        [ p [] [ text "Welcome to the landing page!" ]
+        ]
diff --git a/boilerplate/elm/src/Login.elm b/boilerplate/elm/src/Login.elm
new file mode 100644
index 000000000000..27f1d811a89a
--- /dev/null
+++ b/boilerplate/elm/src/Login.elm
@@ -0,0 +1,13 @@
+module Login exposing (render)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import State
+
+
+render : State.Model -> Html State.Msg
+render model =
+    div [ class "pt-10 pb-20 px-10" ]
+        [ p [] [ text "Please authenticate" ]
+        ]
diff --git a/boilerplate/elm/src/Main.elm b/boilerplate/elm/src/Main.elm
new file mode 100644
index 000000000000..30006460cde9
--- /dev/null
+++ b/boilerplate/elm/src/Main.elm
@@ -0,0 +1,31 @@
+module Main exposing (main)
+
+import Browser
+import Html exposing (..)
+import Landing
+import Login
+import State
+
+
+subscriptions : State.Model -> Sub State.Msg
+subscriptions model =
+    Sub.none
+
+
+view : State.Model -> Html State.Msg
+view model =
+    case model.view of
+        State.Landing ->
+            Landing.render model
+
+        State.Login ->
+            Login.render model
+
+
+main =
+    Browser.element
+        { init = \() -> ( State.init, Cmd.none )
+        , subscriptions = subscriptions
+        , update = State.update
+        , view = view
+        }
diff --git a/boilerplate/elm/src/State.elm b/boilerplate/elm/src/State.elm
new file mode 100644
index 000000000000..c1edae8bb638
--- /dev/null
+++ b/boilerplate/elm/src/State.elm
@@ -0,0 +1,43 @@
+module State exposing (..)
+
+
+type Msg
+    = DoNothing
+    | SetView View
+
+
+type View
+    = Landing
+    | Login
+
+
+type alias Model =
+    { isLoading : Bool
+    , view : View
+    }
+
+
+{-| The initial state for the application.
+-}
+init : Model
+init =
+    { isLoading = False
+    , view = Landing
+    }
+
+
+{-| Now that we have state, we need a function to change the state.
+-}
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        DoNothing ->
+            ( model, Cmd.none )
+
+        SetView x ->
+            ( { model
+                | view = x
+                , isLoading = True
+              }
+            , Cmd.none
+            )
author	William Carroll <wpcarro@gmail.com>	2020-05-17T19·42+0100
committer	William Carroll <wpcarro@gmail.com>	2020-05-17T19·48+0100
commit	05a2ea6bb7af37d8d5afdc28efddb3e6d2f9e746 (patch)
tree	816489e0c2d381695b7cd7087cc40c8aca91a69d /boilerplate
parent	066b1441b29df2d9616eabc8680e912e912cbb07 (diff)