From 05a2ea6bb7af37d8d5afdc28efddb3e6d2f9e746 Mon Sep 17 00:00:00 2001 From: William Carroll Date: Sun, 17 May 2020 20:42:18 +0100 Subject: 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. --- boilerplate/elm/.gitignore | 3 +++ boilerplate/elm/README.md | 17 ++++++++++++++++ boilerplate/elm/dir-locals.nix | 3 +++ boilerplate/elm/elm.json | 30 ++++++++++++++++++++++++++++ boilerplate/elm/index.css | 3 +++ boilerplate/elm/index.html | 15 ++++++++++++++ boilerplate/elm/shell.nix | 9 +++++++++ boilerplate/elm/src/Landing.elm | 13 +++++++++++++ boilerplate/elm/src/Login.elm | 13 +++++++++++++ boilerplate/elm/src/Main.elm | 31 +++++++++++++++++++++++++++++ boilerplate/elm/src/State.elm | 43 +++++++++++++++++++++++++++++++++++++++++ 11 files changed, 180 insertions(+) create mode 100644 boilerplate/elm/.gitignore create mode 100644 boilerplate/elm/README.md create mode 100644 boilerplate/elm/dir-locals.nix create mode 100644 boilerplate/elm/elm.json create mode 100644 boilerplate/elm/index.css create mode 100644 boilerplate/elm/index.html create mode 100644 boilerplate/elm/shell.nix create mode 100644 boilerplate/elm/src/Landing.elm create mode 100644 boilerplate/elm/src/Login.elm create mode 100644 boilerplate/elm/src/Main.elm create mode 100644 boilerplate/elm/src/State.elm 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 {}; +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 @@ + + + + + Elm SPA + + + + +
+ + + 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 {}; +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 + ) -- cgit 1.4.1