[{"name":"Page","comment":" This module allows you to combine multiple apps created with `Browser.element` into a single application, with or without URL control. The key feature of the `Page` type is that, unlike other attempts to simplify SPA development, it does not use type variables (it's `Page`, not `Page model msg`). This allows you to combine all the pages into a single `List Page`, `Dict String Page`, `Random.Generator Page`, or any other data structure.\n\nUsers need to write a bit of boilerplate. For example, if you want to use the digital clock application (discussed in the official guide's subscription section), you'll need to set up a corresponding module like this. (This code is based on the one in the official guide, with `Page` substituted for `Browser` and `page` for `main`.)\n\n    module Pages.Clock exposing (page)\n\n    -- Show the current time in your time zone.\n    --\n    -- Read how it works:\n    --   https://guide.elm-lang.org/effects/time.html\n    --\n    -- For an analog clock, check out this SVG example:\n    --   https://elm-lang.org/examples/clock\n\n    import Html exposing (..)\n    import Page\n    import Task\n    import Time\n\n\n    -- MAIN\n    initiate =\n        Page.element\n            -- -main = Browser.element\n            { init = init\n            , view = view\n            , update = update\n            , subscriptions = subscriptions\n            }\n\n    -- MODEL\n    type alias Model =\n        { zone : Time.Zone\n        , time : Time.Posix\n        }\n\n    init : () -> ( Model, Cmd Msg )\n    init _ =\n        ( Model Time.utc (Time.millisToPosix 0)\n        , Task.perform AdjustTimeZone Time.here\n        )\n\n    -- UPDATE\n    type Msg\n        = Tick Time.Posix\n        | AdjustTimeZone Time.Zone\n\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            Tick newTime ->\n                ( { model | time = newTime }\n                , Cmd.none\n                )\n\n            AdjustTimeZone newZone ->\n                ( { model | zone = newZone }\n                , Cmd.none\n                )\n\n    -- SUBSCRIPTIONS\n    subscriptions : Model -> Sub Msg\n    subscriptions model =\n        Time.every 1000 Tick\n\n    -- VIEW\n    view : Model -> Html Msg\n    view model =\n        let\n            hour =\n                String.fromInt (Time.toHour model.zone model.time)\n\n            minute =\n                String.fromInt (Time.toMinute model.zone model.time)\n\n            second =\n                String.fromInt (Time.toSecond model.zone model.time)\n        in\n        h1 [] [ text (hour ++ \":\" ++ minute ++ \":\" ++ second) ]\n\nAnd the main app looks like this:\n\n    module Main exposing (..)\n\n    import Browser\n    import Html as H exposing (Html)\n    import Html.Events exposing (onClick)\n    import Pages.Clock\n\n    type alias Model =\n        { page : Page\n        }\n\n    type Msg\n        = PageUpdated Page.Msg\n        | PageReset\n\n    init : () -> ( Model, Cmd Msg )\n    init _ =\n        let\n            ( initialPage, initialCmd ) =\n                Page.unwrapMsg <| Pages.Clock.initiate ()\n        in\n        ( Model initialPage\n        , Cmd.map PageUpdated initialCmd\n        )\n\n    subscriptions : Model -> Sub Msg\n    subscriptions model =\n        -- Don't forget to add this line!\n        Page.subscribe model.page\n\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            PageUpdated m ->\n                -- These lines are boilerplate code.\n                -- You can copy & paste them.\n                let\n                    ( newPage, newCmd ) =\n                        Page.unwrapMsg m\n                in\n                ( { model\n                    | page = newPage\n                  }\n                , Cmd.map PageUpdated newCmd\n                )\n\n            PageReset ->\n                init ()\n\n    view : Model -> Html Msg\n    view model =\n        H.div []\n            [ Page.mapView PageUpdated model.page\n            , H.br [] []\n            , H.button [ onClick PageReset ] [ H.text \"Reset\" ]\n            ]\n\n    main : Program () Model Msg\n    main =\n        Browser.element\n            { init = init\n            , subscriptions = subscriptions\n            , update = update\n            , view = view\n            }\n\nFor usage with multiple pages, see [the GitHub repository](https://github.com/kudzu-forest/elm-page).\n\n\n# Types\n\n@docs Page, Msg\n\n\n# Handling Msg\n\n@docs unwrapMsg\n\n\n# Creation\n\n@docs empty, sandbox, element\n\n\n# Usage\n\n@docs mapView, subscribe\n\n","unions":[{"name":"Msg","comment":" A `Msg` type emitted from the page module. You need to use `unwrapMsg` to access this value. See the example above.\n","args":[],"cases":[]},{"name":"Page","comment":" A custom type that can store the same information as `Browser.element`.\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"element","comment":" Similar to `Browser.element`. At initialization, you can pass a value of any type as flags. The resulting `(Page, Cmd Page.Msg)` will be returned wrapped in `Page.Msg`, so you need to `unwrap` the `Page.Msg` value like in the example above or call `update` during the initialization phase, as shown in examples in [the GitHub repository](https://github.com/kudzu-forest/elm-page). ","type":"{ init : flag -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg, update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), view : model -> Html.Html msg } -> flag -> Page.Msg"},{"name":"empty","comment":" An empty page. useful for initialization.\n","type":"Page.Page"},{"name":"mapView","comment":" You can use your page with this function. See the example above.\n","type":"(Page.Msg -> appMsg) -> Page.Page -> Html.Html appMsg"},{"name":"sandbox","comment":" Similar to `Browser.sandbox`. You can create a `Page` easily by just substituting `Page` for `Browser`.\n","type":"{ init : model, update : msg -> model -> model, view : model -> Html.Html msg } -> Page.Msg"},{"name":"subscribe","comment":" Don't forget to use this in your `subscriptions` in the parent module!\n","type":"(Page.Msg -> appMsg) -> Page.Page -> Platform.Sub.Sub appMsg"},{"name":"unwrapMsg","comment":" The only way to handle messages from a child component.\n","type":"Page.Msg -> ( Page.Page, Platform.Cmd.Cmd Page.Msg )"}],"binops":[]}]