componentsignatures.md

Type signatures for elm-html components (without effects)

First, consider the following type aliases

type alias Init options state = options -> state
-- type alias Init option state = Vector -> options -> state
-- alternative version if using inline styles

type alias Update action state = action -> state -> state

type alias View action state = Address action -> state -> Html

Simple component or container component of known children

init : Init Options State

update : Update Action State

view : View Action State

Examples include:

• Button
• Checkbox
• Label
• Image
• Card with an image, a label, and a button
• Radio group with known radio buttons
• Dropdown with known items

Container component of unknown number of unknown children

init : Update Context state
    -> Init options state
    -> Init (Options options) (State state)

update : Update Context state 
      -> Update action state 
      -> Update (Action action) (State state)

view : View action state 
    -> View (Action action) (State state)

Examples include:

• Tabs
• Pages
• Grids
• Slideshows
• Radio groups of unknown radio buttons
• Dropdown with unknown items

Container component of known number of unknown children

init : Update Context1 state1 -> Init options1 state1
    -> Update Context2 state2 -> Init options2 state2
    -> Update Context3 state3 -> Init options3 state3
    -> ...
    -> Init (Options options1 options2 options3 ...) (State state1 state2 state3 ...)

update : Update Context1 state1 -> Update action1 state1
      -> Update Context2 state2 -> Update action2 state2
      -> Update Context3 state3 -> Update action3 state3
      ...
      -> Update (Action action1 action2 action3 ...) (State state1 state2 state3 ...)
      
view : View action1 state1
    -> View action2 state2
    -> View action3 state3
    ...
    -> View (Action action1 action2 action3 ...) (State state1 state2 state3 ...)

Examples include:

• Toolbar + MainPage combo
• Header + Body + Footer combo
• The Holy Grail Layout
• Card with unknown front and back
• Background + Foreground