ryannhg/elm-spa/3.0.0

NOTE: the latest version is 6.0.0

Renamed to ryan-haskell/elm-spa. It is published under that name, and new versions come out there.

Versions published as ryannhg/elm-spa still install under that name. 13 versions of 13 come from the new location (see their notes).

Rerouted (renamed, verified). The GitHub user or repository was renamed. The tag is still there, at the new name. The Lamdera package server serves a copy recovered from https://github.com/ryan-haskell/elm-spa.

What we checked: The repo moved to github.com/ryan-haskell/elm-spa. Rebuilt with git archive from commit d081ae12a291 of https://github.com/ryan-haskell/elm-spa (zip prefix ryannhg-elm-spa-3a22adc/, America/Los_Angeles times): the zip is byte-identical to the one package.elm-lang.org recorded, SHA-1 70f46a11f2ed5f26b70534d4457429483d5cced7.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/ryannhg/elm-spa/zipball/3.0.0/

Spa

Let's build some single page applications!

Spa.create replaces Browser.application as the entrypoint to your app.

import Global
import Pages
import Routes exposing (routes)
import Spa
import Transitions
import Utils.Spa


main : Utils.Spa.Program Pages.Model Pages.Msg
main =
    Spa.create
        { global =
            { init = Global.init
            , update = Global.update
            , subscriptions = Global.subscriptions
            }
        , page = Pages.page
        , routing =
            { routes = Routes.parsers
            , toPath = Routes.toPath
            , notFound = routes.notFound
            , afterNavigate = Nothing
            }
        , transitions = Transitions.transitions
        , ui = Spa.usingElmUi
        }
{ global :
{ init :
{ navigate : route -> Cmd (Msg globalMsg layoutMsg) }
-> flags
-> ( globalModel, Cmd globalMsg, Cmd (Msg globalMsg layoutMsg) )
, update :
{ navigate : route -> Cmd (Msg globalMsg layoutMsg) }
-> globalMsg
-> globalModel
-> ( globalModel, Cmd globalMsg, Cmd (Msg globalMsg layoutMsg) )
, subscriptions : globalModel -> Sub globalMsg
}
, page :
Page
route
route
layoutModel
layoutMsg
ui_layoutMsg
layoutModel
layoutMsg
ui_layoutMsg
globalModel
globalMsg
(Msg globalMsg layoutMsg)
ui_msg
, routing :
{ routes : List (Parser (route -> route) route)
, toPath : route -> String
, notFound : route
, afterNavigate :
Maybe
( { old : route
, new : route
}
-> globalMsg
)
}
, transitions :
{ layout : Transition ui_msg
, page : Transition ui_msg
, pages :
List
{ path : Path
, transition : Transition ui_msg
}
}
, ui :
{ toHtml : ui_msg -> Html (Msg globalMsg layoutMsg)
, map :
(layoutMsg -> Msg globalMsg layoutMsg) -> ui_layoutMsg -> ui_msg
}
}
-> Program flags globalModel globalMsg layoutModel layoutMsg

Creates a new Program given some one-time configuration:

  • ui - How do we convert our views into Html msg?
  • routing - What are the app's routes?
  • transitions - How should we transition between routes?
  • global - How do we share state between pages?
  • page - What page should we render?
type alias Program flags globalModel globalMsg layoutModel layoutMsg =
Program
flags
(Model flags globalModel layoutModel)
(Msg globalMsg layoutMsg)

An alias for Platform.Program to make annotations a little more clear.

using elm-ui?

If you're a big fan of mdgriffith/elm-ui (or a "not-so-big-fan of CSS"), this package supports using Element msg instead of Html msg for your pages and components.

{ map :
(layoutMsg -> Msg globalMsg layoutMsg)
-> Element layoutMsg
-> Element (Msg globalMsg layoutMsg)
, toHtml : Element msg -> Html msg
}

If you're just using mdgriffith/elm-ui, you can pass this into Spa.create

main =
    Spa.create
        { ui = Spa.usingElmUi
        , -- ...
        }

using html?

{ map :
(layoutMsg -> Msg globalMsg layoutMsg)
-> Html layoutMsg
-> Html (Msg globalMsg layoutMsg)
, toHtml : ui_msg -> ui_msg
}

If you're just using elm/html, you can pass this into Spa.create

main =
    Spa.create
        { ui = Spa.usingHtml
        , -- ...
        }