Svg.Styled.Lazy

A not-quite-drop-in replacement for the Svg.Lazy module from the elm-lang/svg package.

The only difference between this and the lazy from elm-lang/svg is that the caller must call toUnstyled inside the function being passed to lazy.

For example:

    import Css exposing (backgroundColor, rgb)
    import Svg.Styled exposing (Svg, circle, svg, toUnstyled)
    import Svg.Styled.Attributes exposing (css, cx, cy, r, viewBox)
    import Svg.Styled.Lazy exposing (lazy)
    import VirtualDom




    view : Model -> Svg Msg
    view model =
        svg [ viewBox "0 0 100 100" ]
            [ lazy viewCircle model.radius
            ]




    viewCircle : Int -> VirtualDom.Node msg
    viewCircle radius =
        circle
            [ cx "60"
            , cy "60"
            , r (toString radius)
            , css [ backgroundColor (rgb 200 0 0) ]
            ]
            |> toUnstyled -- toUnstyled must happen inside viewCircle!

lazy : (a -> Node msg) -> a -> Svg msg

A performance optimization that delays the building of virtual DOM nodes.

Calling (view model) will definitely build some virtual DOM, perhaps a lot of it. Calling (lazy view model) delays the call until later. During diffing, we can check to see if model is referentially equal to the previous value used, and if so, we just stop. No need to build up the tree structure and diff it, we know if the input to view is the same, the output must be the same!

lazy2 : (a -> b -> Node msg) -> a -> b -> Svg msg

Same as lazy but checks on two arguments.

lazy3 : (a -> b -> c -> Node msg) -> a -> b -> c -> Svg msg

Same as lazy but checks on three arguments.

rtfeldman/elm-css/14.0.0

Svg.Styled.Lazy

Modules