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

This will become protected, and protected will be removed in the v6 release. Keeping them both to prevent a version bump!

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:

import Page


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


-- init : User -> Model
-- update : User -> Msg -> Model -> Model
-- update : User -> 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!

Deprecated! Will be replaced by protected2