various Main.elm templates (app, minimum, bootstrap)

App.elm

module App exposing (Flags, Model, Msg(..), init, main, subscriptions, update, view)

import Browser
import Browser.Navigation
import Html exposing (Html, text)
import Url


main =
    Browser.application
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        , onUrlRequest = OnUrlRequest
        , onUrlChange = OnUrlChange
        }


type alias Model =
    { navKey : Browser.Navigation.Key
    , message : String
    }


type alias Flags =
    {}


type Msg
    = OnUrlRequest Browser.UrlRequest
    | OnUrlChange Url.Url


init : Flags -> Url.Url -> Browser.Navigation.Key -> ( Model, Cmd Msg )
init flags url navKey =
    ( Model navKey "init", Cmd.none )


view : Model -> Browser.Document Msg
view model =
    Browser.Document "App"
        [ text model.message ]


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    ( model, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

Bootstrap.elm

module Bootstrap exposing (Flags, Model, Msg(..), init, main, subscriptions, update, view)

import Browser
import Browser.Navigation
import Html exposing (Html, button, div, form, h1, input, label, main_, node, p, pre, text)
import Html.Attributes exposing (class, for, href, id, rel, type_, value)
import Html.Events exposing (onInput)
import Time
import Url


main =
    Browser.application
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        , onUrlRequest = OnUrlRequest
        , onUrlChange = OnUrlChange
        }


type alias Alert =
    { category : String
    , message : String
    }


type alias Detail =
    { title : String
    }


type alias Model =
    { navKey : Browser.Navigation.Key
    , alert : Maybe Alert
    , detail : Detail
    }


type alias Flags =
    {}


type Msg
    = OnUrlRequest Browser.UrlRequest
    | OnUrlChange Url.Url
    | ModelChanged (Model -> String -> Model) String


init : Flags -> Url.Url -> Browser.Navigation.Key -> ( Model, Cmd Msg )
init flags url navKey =
    let
        alert =
            { category = "info", message = "Welcome!" }

        detail =
            { title = "" }
    in
    ( { navKey = navKey
      , alert = Just alert
      , detail = detail
      }
    , Cmd.none
    )


view : Model -> Browser.Document Msg
view model =
    Browser.Document "App"
        [ node "link"
            [ rel "stylesheet"
            , href "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            ]
            []
        , main_ [ class "container" ]
            [ div [ class "jumbotron mt-3" ]
                [ h1 [] [ text "Hello" ]
                , p [ class "lead" ] [ text "Lorem ipsum" ]
                ]
            , viewAlert model.alert
            , div [ class "row-fluid mt-5" ]
                [ viewDetail model.detail ]
            , div [ class "row-fluid mt-5" ]
                [ pre [] [ text (Debug.toString model) ] ]
            ]
        ]


viewAlert : Maybe Alert -> Html Msg
viewAlert alertMaybe =
    case alertMaybe of
        Just alert ->
            div [ class "row-fluid mt-5" ]
                [ div [ class ("alert alert-" ++ alert.category) ] [ text alert.message ] ]

        Nothing ->
            text ""


viewDetail : Detail -> Html Msg
viewDetail detail =
    form []
        [ div [ class "form-group" ]
            [ label [ for "title" ] [ text "Title" ]
            , input
                [ type_ "text"
                , class "form-control"
                , id "title"
                , value detail.title
                , onInput (ModelChanged (\m s -> { m | detail = { detail | title = s } })) -- complicated because we nest `model.detail`
                ]
                []
            ]
        , button [ type_ "submit", class "btn btn-primary" ] [ text "Submit" ]
        ]


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case Debug.log "update" msg of
        -- [url] decide what to do
        OnUrlRequest (Browser.Internal urlUrl) ->
            ( model, Browser.Navigation.pushUrl model.navKey (Url.toString urlUrl) )

        OnUrlRequest (Browser.External urlString) ->
            ( model, Browser.Navigation.load urlString )

        -- [url] given that we _are at this url_ how should our model change?
        OnUrlChange urlUrl ->
            ( model, Cmd.none )

        ModelChanged function string ->
            ( function model string, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

Minimum.elm

module Minimum exposing (Flags, Model, Msg(..), init, main, subscriptions, update, view)

import Browser
import Html exposing (Html, text)


main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }


type alias Model =
    String


type alias Flags =
    {}


type Msg
    = Msg


init : Flags -> ( Model, Cmd Msg )
init flags =
    ( "init", Cmd.none )


view : Model -> Html Msg
view model =
    text model


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    ( model, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

Tailwind.elm

module Tailwind exposing (Flags, Model, Msg(..), init, main, subscriptions, update, view)

import Browser
import Browser.Navigation
import Html exposing (Html, button, div, form, input, label, node, pre, span, text)
import Html.Attributes exposing (class, for, href, id, rel, value)
import Html.Events exposing (onInput)
import Url


main =
    Browser.application
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        , onUrlRequest = OnUrlRequest
        , onUrlChange = OnUrlChange
        }


type alias Alert =
    { color : String
    , message : String
    }


type alias Model =
    { navKey : Browser.Navigation.Key
    , alert : Maybe Alert
    }


type alias Flags =
    {}


type Msg
    = OnUrlRequest Browser.UrlRequest
    | OnUrlChange Url.Url


init : Flags -> Url.Url -> Browser.Navigation.Key -> ( Model, Cmd Msg )
init flags url navKey =
    let
        alert =
            { color = "blue", message = "Welcome!" }
    in
    ( { navKey = navKey
      , alert = Just alert
      }
    , Cmd.none
    )


view : Model -> Browser.Document Msg
view model =
    Browser.Document "App"
        [ node "link"
            [ rel "stylesheet"
            , href "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
            ]
            []
        , div
            [ class "flex bg-gray-200 min-h-screen" ]
            [ div
                [ class "md:w-3/5 my-8 ml-auto mr-auto bg-white min-h-full shadow" ]
                [ div [ class "md:p-4" ]
                    [ viewMaybe viewAlert model.alert
                    , pre [ class "whitespace-pre-wrap" ] [ text (Debug.toString model) ]
                    ]
                ]
            ]
        ]


viewMaybe : (a -> Html msg) -> Maybe a -> Html msg
viewMaybe f maybeValue =
    case maybeValue of
        Just a ->
            f a

        Nothing ->
            text ""


viewAlert : Alert -> Html Msg
viewAlert alert =
    div [ class "mb-5" ]
        [ div [ class ("bg-" ++ alert.color ++ "-100 border border-" ++ alert.color ++ "-400 text-" ++ alert.color ++ "-700 px-4 py-3 md:rounded relative") ]
            [ span [ class "block sm:inline" ] [ text alert.message ]
            ]
        ]


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case Debug.log "update" msg of
        -- [url] decide what to do
        OnUrlRequest (Browser.Internal urlUrl) ->
            ( model, Browser.Navigation.pushUrl model.navKey (Url.toString urlUrl) )

        OnUrlRequest (Browser.External urlString) ->
            ( model, Browser.Navigation.load urlString )

        -- [url] given that we _are at this url_ how should our model change?
        OnUrlChange urlUrl ->
            ( model, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

Worker.elm

module Main exposing (..)


type alias Flags =
    {}


type alias Model =
    String


type Msg
    = Msg


main : Program Flags Model Msg
main =
    Platform.worker
        { init = init
        , update = update
        , subscriptions = subscriptions
        }


init : Flags -> ( Model, Cmd Msg )
init flags =
    ( "", Cmd.none )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    ( "", Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none