pete-murphy/elm-css/1.0.0

Svg.Styled.Keyed

A keyed node helps optimize cases where children are getting added, moved, removed, etc. Common examples include:

  • The user can delete items from a list.
  • The user can create new items in a list.
  • You can sort a list based on name or date or whatever.

When you use a keyed node, every child is paired with a string identifier. This makes it possible for the underlying diffing algorithm to reuse nodes more efficiently.

Keyed Nodes

node : String -> List (Attribute msg) -> List ( String, Svg msg ) -> Svg msg

Works just like Svg.node, but you add a unique identifier to each child node. You want this when you have a list of nodes that is changing: adding nodes, removing nodes, etc. In these cases, the unique identifiers help make the DOM modifications more efficient.

Keyed Nodes with Lazy Children

String
-> List (Attribute msg)
-> (a -> Svg msg)
-> List ( String, a )
-> Svg msg

Creates a node that has children that are both keyed and lazy.

The unique key for each child serves double duty:

  • The key helps the Elm runtime make DOM modifications more efficient
  • The key becomes the id of child and the css generated by lazy becomes scoped to that id allowing the browser to save time calculating styles

Some notes about using this function:

  • The key must be a valid HTML id
  • The key should be unique among other ids on the page and unique among the keys for other siblings
  • No other id attributes should be specified on the keyed child nodes - they will be ignored
String
-> List (Attribute msg)
-> (a -> b -> Svg msg)
-> List ( String, ( a, b ) )
-> Svg msg

Same as lazyNode, but checks on 2 arguments.

String
-> List (Attribute msg)
-> (a -> b -> c -> Svg msg)
-> List ( String, ( a, b, c ) )
-> Svg msg

Same as lazyNode, but checks on 3 arguments.

String
-> List (Attribute msg)
-> (a -> b -> c -> d -> Svg msg)
-> List
( String
, { arg1 : a
, arg2 : b
, arg3 : c
, arg4 : d
}
)
-> Svg msg

Same as lazyNode, but checks on 4 arguments.

String
-> List (Attribute msg)
-> (a -> b -> c -> d -> e -> Svg msg)
-> List
( String
, { arg1 : a
, arg2 : b
, arg3 : c
, arg4 : d
, arg5 : e
}
)
-> Svg msg

Same as lazyNode, but checks on 5 arguments.

String
-> List (Attribute msg)
-> (a -> b -> c -> d -> e -> f -> Svg msg)
-> List
( String
, { arg1 : a
, arg2 : b
, arg3 : c
, arg4 : d
, arg5 : e
, arg6 : f
}
)
-> Svg msg

Same as lazyNode, but checks on 6 arguments.