Skip to content

Commit 845fdab

Browse files
rtfeldmanrtfeldman
authored
Merge pull request #584 from micahhahn/add-keyed-lazy
Add keyedLazy to scope styles for lists of lazy nodes
2 parents c5ffa8c + 94a5fce commit 845fdab

File tree

4 files changed

+530
-16
lines changed

4 files changed

+530
-16
lines changed

‎src/Html/Styled/Keyed.elm‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module Html.Styled.Keyed exposing
22
( node
33
, ol, ul
4+
, lazyNode, lazyNode2, lazyNode3, lazyNode4, lazyNode5, lazyNode6
45
)
56

67
{-| A keyed node helps optimize cases where children are getting added, moved,
@@ -24,6 +25,11 @@ efficiently.
2425
2526
@docs ol, ul
2627
28+
29+
# Keyed Nodes with Lazy Children
30+
31+
@docs lazyNode, lazyNode2, lazyNode3, lazyNode4, lazyNode5, lazyNode6
32+
2733
-}
2834

2935
import Html.Styled exposing (Attribute, Html)
@@ -50,3 +56,57 @@ ol =
5056
ul : List (Attribute msg) -> List ( String, Html msg ) -> Html msg
5157
ul =
5258
node "ul"
59+
60+
61+
{-| Creates a node that has children that are both keyed **and** lazy.
62+
63+
The unique key for each child serves double duty:
64+
65+
- The key helps the Elm runtime make DOM modifications more efficient
66+
- 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
67+
68+
Some notes about using this function:
69+
70+
- The key must be a valid HTML id
71+
- The key should be unique among other ids on the page and unique among the keys for other siblings
72+
- No other id attributes should be specified on the keyed child nodes - they will be ignored
73+
74+
-}
75+
lazyNode : String -> List (Attribute msg) -> (a -> Html msg) -> List ( String, a ) -> Html msg
76+
lazyNode nodeType properties =
77+
VirtualDom.Styled.keyedLazyNode (VirtualDom.Styled.keyedNode nodeType properties)
78+
79+
80+
{-| Same as `lazyNode`, but checks on 2 arguments.
81+
-}
82+
lazyNode2 : String -> List (Attribute msg) -> (a -> b -> Html msg) -> List ( String, ( a, b ) ) -> Html msg
83+
lazyNode2 nodeType properties =
84+
VirtualDom.Styled.keyedLazyNode2 (VirtualDom.Styled.keyedNode nodeType properties)
85+
86+
87+
{-| Same as `lazyNode`, but checks on 3 arguments.
88+
-}
89+
lazyNode3 : String -> List (Attribute msg) -> (a -> b -> c -> Html msg) -> List ( String, ( a, b, c ) ) -> Html msg
90+
lazyNode3 nodeType properties =
91+
VirtualDom.Styled.keyedLazyNode3 (VirtualDom.Styled.keyedNode nodeType properties)
92+
93+
94+
{-| Same as `lazyNode`, but checks on 4 arguments.
95+
-}
96+
lazyNode4 : String -> List (Attribute msg) -> (a -> b -> c -> d -> Html msg) -> List ( String, { arg1 : a, arg2 : b, arg3 : c, arg4 : d } ) -> Html msg
97+
lazyNode4 nodeType properties =
98+
VirtualDom.Styled.keyedLazyNode4 (VirtualDom.Styled.keyedNode nodeType properties)
99+
100+
101+
{-| Same as `lazyNode`, but checks on 5 arguments.
102+
-}
103+
lazyNode5 : String -> List (Attribute msg) -> (a -> b -> c -> d -> e -> Html msg) -> List ( String, { arg1 : a, arg2 : b, arg3 : c, arg4 : d, arg5 : e } ) -> Html msg
104+
lazyNode5 nodeType properties =
105+
VirtualDom.Styled.keyedLazyNode5 (VirtualDom.Styled.keyedNode nodeType properties)
106+
107+
108+
{-| Same as `lazyNode`, but checks on 6 arguments.
109+
-}
110+
lazyNode6 : String -> List (Attribute msg) -> (a -> b -> c -> d -> e -> f -> Html msg) -> List ( String, { arg1 : a, arg2 : b, arg3 : c, arg4 : d, arg5 : e, arg6 : f } ) -> Html msg
111+
lazyNode6 nodeType properties =
112+
VirtualDom.Styled.keyedLazyNode6 (VirtualDom.Styled.keyedNode nodeType properties)

‎src/Svg/Styled/Keyed.elm‎

Lines changed: 93 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
module Svg.Styled.Keyed exposing (node)
1+
module Svg.Styled.Keyed exposing
2+
( node
3+
, lazyNode, lazyNode2, lazyNode3, lazyNode4, lazyNode5, lazyNode6
4+
)
25

36
{-| A keyed node helps optimize cases where children are getting added, moved,
47
removed, etc. Common examples include:
@@ -16,6 +19,11 @@ efficiently.
1619
1720
@docs node
1821
22+
23+
# Keyed Nodes with Lazy Children
24+
25+
@docs lazyNode, lazyNode2, lazyNode3, lazyNode4, lazyNode5, lazyNode6
26+
1927
-}
2028

2129
import Svg.Styled exposing (Attribute, Svg)
@@ -30,3 +38,87 @@ the DOM modifications more efficient.
3038
node : String -> List (Attribute msg) -> List ( String, Svg msg ) -> Svg msg
3139
node name =
3240
VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" name
41+
42+
43+
{-| Creates a node that has children that are both keyed **and** lazy.
44+
45+
The unique key for each child serves double duty:
46+
47+
- The key helps the Elm runtime make DOM modifications more efficient
48+
- 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
49+
50+
Some notes about using this function:
51+
52+
- The key must be a valid HTML id
53+
- The key should be unique among other ids on the page and unique among the keys for other siblings
54+
- No other id attributes should be specified on the keyed child nodes - they will be ignored
55+
56+
-}
57+
lazyNode :
58+
String
59+
-> List (Attribute msg)
60+
-> (a -> Svg msg)
61+
-> List ( String, a )
62+
-> Svg msg
63+
lazyNode nodeType properties =
64+
VirtualDom.Styled.keyedLazyNode (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)
65+
66+
67+
{-| Same as `lazyNode`, but checks on 2 arguments.
68+
-}
69+
lazyNode2 :
70+
String
71+
-> List (Attribute msg)
72+
-> (a -> b -> Svg msg)
73+
-> List ( String, ( a, b ) )
74+
-> Svg msg
75+
lazyNode2 nodeType properties =
76+
VirtualDom.Styled.keyedLazyNode2 (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)
77+
78+
79+
{-| Same as `lazyNode`, but checks on 3 arguments.
80+
-}
81+
lazyNode3 :
82+
String
83+
-> List (Attribute msg)
84+
-> (a -> b -> c -> Svg msg)
85+
-> List ( String, ( a, b, c ) )
86+
-> Svg msg
87+
lazyNode3 nodeType properties =
88+
VirtualDom.Styled.keyedLazyNode3 (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)
89+
90+
91+
{-| Same as `lazyNode`, but checks on 4 arguments.
92+
-}
93+
lazyNode4 :
94+
String
95+
-> List (Attribute msg)
96+
-> (a -> b -> c -> d -> Svg msg)
97+
-> List ( String, { arg1 : a, arg2 : b, arg3 : c, arg4 : d } )
98+
-> Svg msg
99+
lazyNode4 nodeType properties =
100+
VirtualDom.Styled.keyedLazyNode4 (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)
101+
102+
103+
{-| Same as `lazyNode`, but checks on 5 arguments.
104+
-}
105+
lazyNode5 :
106+
String
107+
-> List (Attribute msg)
108+
-> (a -> b -> c -> d -> e -> Svg msg)
109+
-> List ( String, { arg1 : a, arg2 : b, arg3 : c, arg4 : d, arg5 : e } )
110+
-> Svg msg
111+
lazyNode5 nodeType properties =
112+
VirtualDom.Styled.keyedLazyNode5 (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)
113+
114+
115+
{-| Same as `lazyNode`, but checks on 6 arguments.
116+
-}
117+
lazyNode6 :
118+
String
119+
-> List (Attribute msg)
120+
-> (a -> b -> c -> d -> e -> f -> Svg msg)
121+
-> List ( String, { arg1 : a, arg2 : b, arg3 : c, arg4 : d, arg5 : e, arg6 : f } )
122+
-> Svg msg
123+
lazyNode6 nodeType properties =
124+
VirtualDom.Styled.keyedLazyNode6 (VirtualDom.Styled.keyedNodeNS "http://www.w3.org/2000/svg" nodeType properties)

0 commit comments

Comments
 (0)