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.
This commit is contained in:
William Carroll
parent
066b1441b2
commit
05a2ea6bb7
11 changed files with 180 additions and 0 deletions
3
boilerplate/elm/.gitignore
vendored
Normal file
3
boilerplate/elm/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/elm-stuff
|
||||
/Main.min.js
|
||||
/output.css
|
||||
17
boilerplate/elm/README.md
Normal file
17
boilerplate/elm/README.md
Normal 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
3
boilerplate/elm/dir-locals.nix
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
let
|
||||
briefcase = import <briefcase> {};
|
||||
in briefcase.utils.nixBufferFromShell ./shell.nix
|
||||
30
boilerplate/elm/elm.json
Normal file
30
boilerplate/elm/elm.json
Normal 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
3
boilerplate/elm/index.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
15
boilerplate/elm/index.html
Normal file
15
boilerplate/elm/index.html
Normal 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
9
boilerplate/elm/shell.nix
Normal 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
13
boilerplate/elm/src/Landing.elm
Normal 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
13
boilerplate/elm/src/Login.elm
Normal 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
31
boilerplate/elm/src/Main.elm
Normal 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
43
boilerplate/elm/src/State.elm
Normal 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
|
||||
)
|
||||
Loading…
Reference in a new issue