Provide functionality that will be introduced or changed in the next version.

Pseudo-namespace for keys

You may sometimes find yourself using an element many times in a page. In such cases, it is useful to give key a pseudo-namespace.

In the following bad example, a View called userCard is reused many times.

import Tepa exposing (ViewContext)
import Tepa.Html as Html exposing (Html)
import Tepa.Mixin as Mixin


userCards :
    { users : List User
    }
    -> ViewContext
    -> Html
userCards param context =
    Html.node "ol"
        []
        ( List.map
            (\user ->
                userCard
                    { user = user
                    }
                    context
            )
            param.users
        )


userCard :
    { user : User
    }
    -> ViewContext
    -> Html
userCard param ({ setKey } as context) =
    Html.div
        [ Mixin.class "userCard"
        ]
        [ if user.isEditing then
            userNameForm param context
          else
            Html.div []
                [ Html.span
                    [ Mixin.class "userCard_name"
                    ]
                    [ Html.text param.user.name
                    ]
                , Html.button
                    [ Mixin.class "userCard_editButton"
                    , Mixin.attribute "type" "button"
                    , setKey "editButton"
                    ]
                    [ Html.text "Edit"
                    ]
                ]
        ]


type alias User = {
    id : String
    name : String
    isEditing : Bool
}

This will result in duplicate use of the key named "editButton", which cannot be manipulated properly from the Procedure. Furthermore, since the name "editButton" is too generic, it is possible that a key with the same name is accidentally used in a completely unrelated location. In such cases, pseudo-namespace is useful. When passing a ViewContext from a parent element to a child element, you can push unique prefix string for it:

import Tepa
import Tepa.Html as Html exposing (Html)
import Tepa.Mixin as Mixin
import Tepa.Next as Tepa exposing (ViewContext)


userCards param context =
    Html.node "ol"
        []
        (List.map
            (\user ->
                userCard
                    { user = user
                    }
                    (Tepa.pushNamespace ("userCard_" ++ user.id) context)
            )
            param.users
        )


userCard param context =
    Html.div
        [ Mixin.class "userCard"
        ]
        [ if user.isEditing then
            userNameForm param context


          else
            Html.div []
                [ Html.span
                    [ Mixin.class "userCard_name"
                    ]
                    [ Html.text param.user.name
                    ]
                , Html.button
                    [ Mixin.class "userCard_editButton"
                    , Mixin.attribute "type" "button"
                    , Tepa.setKey context ".editButton"
                    ]
                    [ Html.text "Edit"
                    ]
                ]
        ]

In the above example, the actual key name given to the edit button would be "userCard_user01.editButton"; that is, you would be able to access the element from the Procedure as follows:

Procedure.awaitViewEvent
    { key = "userCard_user01.editButton"
    , type_ = "click"
    }

The pushNamespace can be nested; for example, you can use pushNamespace further within userCard as follows:

userCard param context =
    Html.div
        [ Mixin.class "userCard"
        ]
        [ if user.isEditing then
            userNameForm
                param
                (Tepa.pushNamespace ".userNameForm" context)


          else
            Html.div []
                [ Html.span
                    [ Mixin.class "userCard_name"
                    ]
                    [ Html.text param.user.name
                    ]
                , Html.button
                    [ Mixin.class "userCard_editButton"
                    , Mixin.attribute "type" "button"
                    , Tepa.setKey context ".editButton"
                    ]
                    [ Html.text "Edit"
                    ]
                ]
        ]

In this case, using setKey context ".foo" in userNameForm will actually give the key name userCard_user01.userNameForm.foo.