Pages are the building blocks of elm-spa.

Instead of importing this module, your project will have a Page module with a much simpler type:

module Page exposing (Page, ...)


type Page model msg

This makes all the generic route, effect, and view arguments disappear!

A page that only needs to render a static view.

import Page


page : Page () Never
page =
    Page.static
        { view = view
        }


-- view : View Never

A page that can keep track of application state.

( Inspired by Browser.sandbox )

import Page


page : Page Model Msg
page =
    Page.sandbox
        { init = init
        , update = update
        , view = view
        }


-- init : Model
-- update : Msg -> Model -> Model
-- view : Model -> View Msg

A page that can handle effects like HTTP requests or subscriptions.

( Inspired by Browser.element )

import Page


page : Page Model Msg
page =
    Page.element
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }


-- init : ( Model, Cmd Msg )
-- update : Msg -> Model -> ( Model, Cmd Msg )
-- view : Model -> View Msg
-- subscriptions : Model -> Sub Msg

A page that can handles custom effects like sending a Shared.Msg or other general user-defined effects.

import Effect
import Page


page : Page Model Msg
page =
    Page.advanced
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }


-- init : ( Model, Effect Msg )
-- update : Msg -> Model -> ( Model, Effect Msg )
-- view : Model -> View Msg
-- subscriptions : Model -> Sub Msg

Actions to take when a user visits a protected page

import Gen.Route as Route exposing (Route)


beforeProtectedInit : Shared.Model -> Request () -> Protected User Route
beforeProtectedInit shared _ =
    case shared.user of
        Just user ->
            Provide user


        Nothing ->
            RedirectTo Route.SignIn

Prefixing any of the four functions above with protected will guarantee that the page has access to a user. Here's an example with sandbox:

-- before
Page.sandbox
    { init = init
    , update = update
    , view = view
    }


-- after
Page.protected.sandbox
    (\user ->
        { init = init
        , update = update
        , view = view
        }
    )


-- other functions have same API
init : Model
update : Msg -> Model -> Model
view : Model -> View Msg

A convenient function for use within generated code. Makes it easy to handle init, update, view, and subscriptions for each page!

This function is used by the generated code to connect your pages together.

It's big, spooky, and makes writing elm-spa pages really nice!