rtfeldman / elm-css / Svg.Styled.Keyed

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

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 (Svg.Styled.Attribute msg) -> List ( String, Svg.Styled.Svg msg ) -> Svg.Styled.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

lazyNode : String -> List (Svg.Styled.Attribute msg) -> (a -> Svg.Styled.Svg msg) -> List ( String, a ) -> Svg.Styled.Svg msg

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

The unique key for each child serves double duty:

Some notes about using this function:

lazyNode2 : String -> List (Svg.Styled.Attribute msg) -> (a -> b -> Svg.Styled.Svg msg) -> List ( String, ( a, b ) ) -> Svg.Styled.Svg msg

Same as lazyNode, but checks on 2 arguments.

lazyNode3 : String -> List (Svg.Styled.Attribute msg) -> (a -> b -> c -> Svg.Styled.Svg msg) -> List ( String, ( a, b, c ) ) -> Svg.Styled.Svg msg

Same as lazyNode, but checks on 3 arguments.

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

Same as lazyNode, but checks on 4 arguments.

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

Same as lazyNode, but checks on 5 arguments.

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

Same as lazyNode, but checks on 6 arguments.