mdebray/tvl-depot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Support boilerplate for Elm clients

Browse source 
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.
This commit is contained in:
William Carroll 2020-05-17 20:42:18 +01:00
parent 066b1441b2
commit 05a2ea6bb7
11 changed files with 180 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
boilerplate/elm/.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
/elm-stuff
/Main.min.js
/output.css

17
boilerplate/elm/README.md Normal file
View file

@ -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`!

3
boilerplate/elm/dir-locals.nix Normal file
View file

@ -0,0 +1,3 @@
let
briefcase = import <briefcase> {};
in briefcase.utils.nixBufferFromShell ./shell.nix

30
boilerplate/elm/elm.json Normal file
View file

@ -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": {}
}
}

3
boilerplate/elm/index.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

15
boilerplate/elm/index.html Normal file
View file

@ -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>

9
boilerplate/elm/shell.nix Normal file
View file

@ -0,0 +1,9 @@
let
pkgs = import <nixpkgs> {};
in pkgs.mkShell {
buildInputs = with pkgs; [
elmPackages.elm
elmPackages.elm-format
elmPackages.elm-live
];
}

13
boilerplate/elm/src/Landing.elm Normal file
View file

@ -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!" ]
]

13
boilerplate/elm/src/Login.elm Normal file
View file

@ -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" ]
]

31
boilerplate/elm/src/Main.elm Normal file
View file

@ -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
}

43
boilerplate/elm/src/State.elm Normal file
View file

@ -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
)