[{"name":"Emitter","comment":" This module allows you to create a page module or UI component that can emit `Msg` to your app. If you haven't checked out the `Page` module in this package yet, it's recommended to start with `Page`, then move on to this module later. Some boilerplate code is required.\n\n\n# Terminology\n\nTo simplify the explanations throughout this document, let's introduce some terminology:\n\n  - `InnerMsg`\n      - The message type you define for use within the `Emitter`.\n  - `AppMsg`\n      - The message type used by your application, which incorporates `Emitter AppMsg` as a component.\n  - `EmittedValue`\n      - A type that the component emits.\n      - You will need to convert these values into `AppMsg` within the main app's code.\n\n\n# Example Code\n\nHere’s an example of how to define your user form component:\n\n    module UserForm exposing (User, initiate)\n\n    import Browser.Dom\n    import Emitter exposing (Emitter)\n    import Html as H exposing (Html)\n    import Html.Attributes as HA\n    import Html.Events as HE\n    import Task\n\n    type alias Model =\n        { nameInput : String\n        , ageInput : String\n        , tried : Bool\n        }\n\n    init : () -> ( Model, Cmd Msg )\n    init _ =\n        ( { nameInput = \"\"\n          , ageInput = \"\"\n          , tried = False\n          }\n        , Cmd.none\n        )\n\n    type alias User =\n        { name : String\n        , age : Int\n        }\n\n    type Msg\n        = NoOp\n        | UserInputName String\n        | UserInputAge String\n        | SubmitButtonClicked\n        | Emit User\n\n    cmdEmission : User -> Cmd Msg\n    cmdEmission user =\n    -- This is the first piece of boilerplate code.\n        Task.perform Emit (Task.succeed user)\n\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            NoOp -> ( model, Cmd.none )\n\n            UserInputName name ->\n                ( { model | nameInput = name }, Cmd.none )\n\n            UserInputAge age ->\n                ( { model | ageInput = age }, Cmd.none )\n\n            SubmitButtonClicked ->\n                let\n                    newModel = { model | tried = True }\n                in\n                if model.nameInput /= \"\" then\n                    case String.toInt model.ageInput of\n                        Just age ->\n                            if 0 <= age && age <= 150 then\n                                ( newModel, cmdEmission (User model.nameInput age) )\n                            else\n                                ( newModel, Browser.Dom.focus \"ageInputField\" |> Task.attempt (\\_ -> NoOp) )\n\n                        Nothing ->\n                            ( newModel, Browser.Dom.focus \"ageInputField\" |> Task.attempt (\\_ -> NoOp) )\n                else\n                    ( newModel, Browser.Dom.focus \"nameInputField\" |> Task.attempt (\\_ -> NoOp) )\n\n            Emit user ->\n                -- This is the second piece of boilerplate code.\n                -- You can copy and paste these lines!\n                -- It may seem like it causes an infinite loop, but that's not the case because the `Cmd` is captured by the anonymous function passed below as the first argument of `Emitter.element`.\n                ( model, cmdEmission user )\n\n    view : Model -> Html Msg\n    view model =\n        H.div []\n            [ if model.tried && model.nameInput == \"\" then\n                H.span [ HA.style \"color\" \"red\" ] [ H.text \"Your name must not be empty.\" ]\n              else\n                H.text \"\"\n            , H.br [] []\n            , H.input\n                [ HA.id \"nameInputField\"\n                , HA.type_ \"text\"\n                , HA.placeholder \"Input your name\"\n                , HA.value model.nameInput\n                , HE.onInput UserInputName\n                ]\n                []\n            , H.br [] []\n            , H.span [ HA.style \"color\" \"red\" ]\n                [ if not model.tried then\n                    H.text \"\"\n                  else if model.ageInput == \"\" then\n                    H.text \"Your age must not be empty.\"\n                  else\n                    case String.toInt model.ageInput of\n                        Nothing -> H.text \"Please input a valid integer.\"\n                        Just age ->\n                            if age < 0 then\n                                H.text \"Please come back after you are born.\"\n                            else if age > 150 then\n                                H.text \"You should contact Guinness World Records about your longevity.\"\n                            else\n                                H.text \"\"\n                ]\n            , H.br [] []\n            , H.input\n                [ HA.id \"ageInputField\"\n                , HA.type_ \"text\"\n                , HA.placeholder \"Input your age\"\n                , HA.value model.ageInput\n                , HE.onInput UserInputAge\n                ]\n                []\n            , H.br [] []\n            , H.button [ HE.onClick SubmitButtonClicked ] [ H.text \"Submit\" ]\n            ]\n\n    initiate : (User -> appMsg) -> () -> Emitter.Msg appMsg\n    initiate =\n        Emitter.element\n            (\\msg ->\n                case msg of\n                    Emit user -> Just user\n\n                    _ -> Nothing\n            )\n            { init = init\n            , subscriptions = \\_ -> Sub.none\n            , update = update\n            , view = view\n            }\n\nThe module you defined can be used as follows:\n\n    module Main exposing (..)\n\n    import Browser\n    import Emitter exposing (Emitter)\n    import Html as H exposing (Html)\n    import Html.Attributes as HA\n    import UserForm exposing (User)\n\n    type alias Model =\n        { userForm : Emitter Msg\n        , user : Maybe User\n        }\n\n    init : () -> ( Model, Cmd Msg )\n    init _ =\n        let\n            emitterMsg =\n                UserForm.initiate UserSubmitted ()\n\n            ( emt, _, _ ) =\n                Emitter.unwrapMsg emitterMsg\n        in\n        update (FormUpdated emitterMsg) { userForm = emt, user = Nothing }\n\n    type Msg\n        = FormUpdated (Emitter.Msg Msg)\n        | UserSubmitted User\n\n    subscriptions : Model -> Sub Msg\n    subscriptions model =\n        Emitter.subscribe FormUpdated model.userForm\n\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            FormUpdated emitterMsg ->\n                let\n                    ( emt, cmdInner, cmdMsg ) =\n                        Emitter.unwrapMsg emitterMsg\n                in\n                ( { model | userForm = emt }, Cmd.batch [ Cmd.map FormUpdated cmdInner, cmdMsg ] )\n\n            UserSubmitted user ->\n                ( { model | user = Just user }, Cmd.none )\n\n    view : Model -> Html Msg\n    view model =\n        H.div []\n            [ H.div [ HA.style \"border\" \"ridge 3px pink\" ] [ Emitter.mapView FormUpdated model.userForm ]\n            , case model.user of\n                Nothing ->\n                    H.text \"\"\n\n                Just user ->\n                    H.text (\"Hello, \" ++ user.name ++ \"!\")\n            ]\n\n    main : Program () Model Msg\n    main =\n        Browser.element { init = init, subscriptions = subscriptions, update = update, view = view }\n\n\n# Types\n\n@docs Emitter, Msg\n\n\n# Creation\n\n\n@docs empty,element\n\n\n# Usage\n\n@docs subscribe, mapView, unwrapMsg\n\n\n\n","unions":[{"name":"Emitter","comment":" A custom type that represents a UI module that can emit `AppMsg`. No type variables for its inner state or `InnerMsg` are needed.\n","args":["appMsg"],"cases":[]},{"name":"Msg","comment":" This `Emitter.Msg` value is used to pass through your `Emitter` and the entire application. See the example above for more details.\n","args":["appMsg"],"cases":[]}],"aliases":[],"values":[{"name":"element","comment":" Similar to `Page.element`, but with two additional arguments:\n\n  - The first argument is a function that specifies how your component emits a value that can be captured outside the stream of `InnerMsg`.\n      - This function monitors all `InnerMsg`s.\n      - If the message is intended to emit a value to the main app, let it return `Just emittedValue`.\n      - Otherwise, return `Nothing`.\n  - The third argument is a converter from `EmittedValue` to `AppMsg`.\n      - Typically, the first and second arguments are defined in the component module, while the third and fourth arguments are defined in the main app module.\n\nBe sure to check the example code in the [GitHub repository](https://github.com/kudzu-forest/elm-page).\n","type":"(msg -> Maybe.Maybe emitted) -> { 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 } -> (emitted -> appMsg) -> flag -> Emitter.Msg appMsg"},{"name":"empty","comment":" Similar to `Page.empty`, but requires two dummy values to pass type checking.\n","type":"(a -> appMsg) -> b -> Emitter.Emitter appMsg"},{"name":"mapView","comment":" Similar to `Page.mapView`, this function maps over the view of the `Emitter`.\n","type":"(Emitter.Msg appMsg -> appMsg) -> Emitter.Emitter appMsg -> Html.Html appMsg"},{"name":"subscribe","comment":" Similar to `Page.subscribe`, this function maps over the subscriptions of the `Emitter`.\n","type":"(Emitter.Msg appMsg -> appMsg) -> Emitter.Emitter appMsg -> Platform.Sub.Sub appMsg"},{"name":"unwrapMsg","comment":" Similar to `Page.unwrapMsg`, but the returned tuple includes, as its third component, a `Cmd msg` that inserts the emitted `AppMsg` into the main loop of the application.\n","type":"Emitter.Msg appMsg -> ( Emitter.Emitter appMsg, Platform.Cmd.Cmd (Emitter.Msg appMsg), Platform.Cmd.Cmd appMsg )"}],"binops":[]},{"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":[]}]