Component

Build custom elements with Elm. A component's Input record defines its attributes, and its Output type defines its events.

Components

type Component input state msg output

A custom element definition. Create one with define.

define :

{ init : input -> ( state, Cmd msg )

, receive : input -> Maybe msg

, update : msg -> state -> ( state, Cmd msg, List output )

, view : state -> Html msg

, subscriptions : state -> Sub msg

}

-> Component input state msg output

Define a component. init receives the initial input. receive gets the complete input after an attribute changes; return Nothing to ignore the change. Keep any input needed by view in the component's state.

The list returned by update contains events for the host. Return [] when there are none.

component =
    Component.define
        { init = init
        , receive = Just << Received
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }

Generated bridge

The build tool uses these. Component authors do not call them directly.

type alias Event =

{ name : String

, detail : Value

}

Used by generated code to send an event to the host. Component authors emit their Output values instead.

program :

Decoder input

-> (output -> Event)

-> { inputChanged : (Value -> Msg msg) -> Sub (Msg msg)

, connectionChanged : (Bool -> Msg msg) -> Sub (Msg msg)

, outputSent : Value -> Cmd (Msg msg)

}

-> Component input state msg output

-> Program Value (Model state) (Msg msg)

Connect a component to generated ports and codecs. The build tool calls this from a generated Elm entry point; component modules use define.

An element keeps its state when it leaves the page and returns. Its subscriptions pause while it is detached.

Modules

Component

n1kben/elm-web-components/1.0.5

Component

Components

Generated bridge

Modules