`<|` usage in style-elements

[mdgriffith]

In style-elements, the most common function is:

el : List Attribute -> Element -> Element

Which leads to multiline usage of <|, such as:

test =
    el
        [ width fill
        , height fill
        , Color.background white
        ]
    <|
        el
            [ center
            , Color.text white
            , Color.background blue
            ]
            (text "Welcome!")

In this case I find this formatting hard to scan because the dedented <| breaks my focus on nesting level. I've also seen some devs switch their views to be inverted (I assume) in order to use |> for it's formatting characteristics.

It occurred to me that an alternative might be to maintain the indenting behavior of <|, but to avoid the hard break.

test =
    el
        [ width fill
        , height fill
        , Color.background white
        ]
        <| el
            [ center
            , Color.text white
            , Color.background blue
            ]
            (text "Welcome!")

This would allow quick visual checking of which element is the child of which.

I think this would preserve <|'s identity compared to |> as this would only be for the case of a multiline left side and would still include indenting behavior.

I know this was discussed in the original <| formatting issue

The example of crazyness given in that issue is:

foo x =
    fn
        ++ bar
    <|
        a 1 <|
            b 2
                ++ baz
            <|
                c 3

which would reformat(I think..maybe?) as

foo x =
    fn
        ++ bar
        <| a 1 <|
            b 2
                ++ baz
                <| c 3

which still feels pretty crazy to me, which seems like a good thing.

(so much appreciation for this library ❤️ )

[rtfeldman]

Makes sense to me!

[avh4]

What about indenting the <| but not joining the lines?

test =
    el
        [ width fill
        , height fill
        , Color.background white
        ]
        <|
        el
            [ center
            , Color.text white
            , Color.background blue
            ]
            (text "Welcome!")

foo x =
    fn
        ++ bar
        <|
        a 1 <|
            b 2
                ++ baz
                <|
                c 3

Also, do you have a file you could link to from a non-trivial project that uses uses style-elements and follows that pattern of using <| ?

[mdgriffith]

Ok, so I reached out to the community to see some realworld examples where this formatting case shows up and the main thing I found is that this case isn't common.

However the upcoming v5 release will make it much more likely because style definitions are moving into the attribute list.

So, once v5 is out I'll look at finding some code examples. At some point I was planning on making a style-elements version of Richard's spa example, that might be a good place to see what happens formatting wise.