Skip to content

Instantly share code, notes, and snippets.

@roine
Last active April 8, 2021 20:35
Show Gist options
  • Save roine/a2da44f2047d494cabaf715f06a591db to your computer and use it in GitHub Desktop.
Save roine/a2da44f2047d494cabaf715f06a591db to your computer and use it in GitHub Desktop.
Bare minimum for Elm 0.19

From 0.19 Elm introduced 4 ways to boot an app:

  1. sandbox (no outside interaction)
  2. element (simple outside interaction - side effect, flags, subscriptions)
  3. document (same as above but with title tag control)
  4. application (whole SPA features)
module Main exposing (..)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
type alias Model =
()
-- UPDATE
type Msg
= NoOp
update: Msg -> Model -> Model
update msg model =
case msg of
NoOp ->
model
-- VIEW
view: Model -> Html Msg
view model =
div [] [ text "hello world" ]
-- INIT
main: Program () Model Msg
main =
Browser.sandbox
{ init = ()
, update = update
, view = view
}
module Main exposing (..)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
type alias Model =
()
type alias Flags =
()
init : Flags -> ( Model, Cmd Msg )
init flags =
( (), Cmd.none )
-- UPDATE
type Msg
= NoOp
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
-- VIEW
view : Model -> Html Msg
view model =
div [] [ text "hello world" ]
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
-- INIT
main : Program Flags Model Msg
main =
Browser.element
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
}
module Main exposing (..)
import Browser exposing (Document)
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
type alias Model =
()
type alias Flags =
()
init : Flags -> ( Model, Cmd Msg )
init flags =
( (), Cmd.none )
-- UPDATE
type Msg
= NoOp
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
-- VIEW
view : Model -> Document Msg
view model =
{ title = "hello title", body = [ div [] [ text "hello world" ] ] }
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
-- INIT
main : Program Flags Model Msg
main =
Browser.document
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
}
module Main exposing (..)
import Browser exposing (Document)
import Browser.Navigation as Navigation
import Html exposing (Html, a, button, div, li, text, ul)
import Html.Attributes exposing (href)
import Html.Events exposing (onClick)
import Url
import Url.Parser as Parser exposing ((</>), Parser, s)
type alias Model =
{ navigation : Navigation }
type alias Navigation =
{ key : Navigation.Key
, page : Page
}
initialModel : Url.Url -> Navigation.Key -> Model
initialModel url key =
{ navigation =
{ key = key
, page =
case fromUrl url of
Nothing ->
NotFound
Just a ->
a
}
}
parser : Parser (Page -> b) b
parser =
Parser.oneOf
[ Parser.map Home Parser.top
, Parser.map About (s "about")
]
fromUrl : Url.Url -> Maybe Page
fromUrl url =
-- Treat fragment as path for convenience
{ url | path = Maybe.withDefault "" url.fragment, fragment = Nothing }
|> Parser.parse parser
type Page
= Home
| About
| NotFound
type alias Flags =
()
init : Flags -> Url.Url -> Navigation.Key -> ( Model, Cmd Msg )
init flags url key =
( initialModel url key, Cmd.none )
-- UPDATE
type Msg
= UrlRequested Browser.UrlRequest
| UrlChange Url.Url
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case Debug.log "" msg of
UrlRequested urlRequest ->
case urlRequest of
Browser.Internal url ->
( model, Navigation.pushUrl model.navigation.key (Url.toString url) )
Browser.External href ->
( model, Navigation.load href )
UrlChange url ->
let
navigation =
model.navigation
in
( { model
| navigation =
{ navigation
| page =
case fromUrl url of
Nothing ->
NotFound
Just a ->
a
}
}
, Cmd.none
)
-- VIEW
view : Model -> Document Msg
view model =
{ title = "hello title"
, body = [ bodyView model ]
}
bodyView : Model -> Html Msg
bodyView model =
div []
[ text "hello world"
, ul []
[ li [] [ a [ href "#/" ] [ text "Home" ] ]
, li [] [ a [ href "#/about" ] [ text "About" ] ]
]
, div []
[ case model.navigation.page of
NotFound ->
text "Page not Found"
Home ->
text "Home page"
About ->
text "About page"
]
]
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
-- INIT
main : Program Flags Model Msg
main =
Browser.application
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
, onUrlRequest = UrlRequested
, onUrlChange = UrlChange
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment