List indentation issue

[halcwb]

When I use the online tool with the following code (cannot create an issue because of a too long url!):

let drawer =
    Mui.drawer [
        // drawer.open' props.IsOpen

        drawer.children 
            [
                Html.div [ prop.className classes.toolbar ]
                props.Items
                |> List.map (fun s ->
                    Mui.listItem 
                        [
                        listItem.button true
                        match state with
                        | Some t when t = s -> listItem.selected true
                        | _ -> listItem.selected false
                        prop.text s
                        prop.onClick (fun _ ->
                        s
                        |> MenuItemClick
                        |> dispatch) 
                        ])
                |> Mui.list 
            ] 
        ]

I get this list indentation with setting: fsharp_multiline_block_brackets_on_same_column=true:

let drawer =
    Mui.drawer
        [
            // drawer.open' props.IsOpen

            drawer.children [ Html.div [ prop.className classes.toolbar ]
                              props.Items
                              |> List.map (fun s ->
                                  Mui.listItem [ listItem.button true
                                                 match state with
                                                 | Some t when t = s -> listItem.selected true
                                                 | _ -> listItem.selected false
                                                 prop.text s
                                                 prop.onClick (fun _ -> s |> MenuItemClick |> dispatch) ])
                              |> Mui.list ]
        ]

So correct for the parent list but wrong for the child lists. When you uncomment the first item in the parent list you'll get:

let drawer =
    Mui.drawer [ drawer.open' props.IsOpen

                 drawer.children [ Html.div [ prop.className classes.toolbar ]
                                   props.Items
                                   |> List.map (fun s ->
                                       Mui.listItem [ listItem.button true
                                                      match state with
                                                      | Some t when t = s -> listItem.selected true
                                                      | _ -> listItem.selected false
                                                      prop.text s
                                                      prop.onClick (fun _ -> s |> MenuItemClick |> dispatch) ])
                                   |> Mui.list ] ]

So all of the lists, parent and child lists, doesn't adhere to the same column setting.

The problem is when you re-indent the above code this will result in errors, I always want list items to be on a 'tab column'.

[nojaf]

Hey @halcwb, is this using https://github.com/cmeeren/Feliz.MaterialUI by any chance?

fsharp_multiline_block_brackets_on_same_column by design has no influence when an Elmish pattern is found.
So this is a bit of a grey area and perhaps could use some more documentation.

In short, when Fantomas detects an expression in the shape of identifier arrayOrListArgument it will format things differently to have better support for Elmish constructs. (See document for some context).

So the expected result here is should be something like:

let drawer =
    Mui.drawer  [
                     // drawer.open' props.IsOpen

                     drawer.children [ Html.div [ prop.className classes.toolbar ]
                                                        ... ]   ]

The bug here is that the Mui.drawer [ singleElement ] is not recognized as an elmish expression. So it takes the fsharp_multiline_block_brackets_on_same_column style there.

Unrelated to the bug, you can use the setting fsharp_single_argument_web_mode=true to align the closing ] to the start column of the expression (see video).

[halcwb]

@nojaf Thanks! using that setting it's much better. I indeed use Feliz. Could there also be a setting that makes sure that all indentation is using the tabs columns. Then you'll never have the problem that with changing the indentation you run into compile errors.

For example:

let cannotIndentList =
    [ "item 1"
      "item 2" ]

let canIndentList =
    [   "item 1"
        "item 2" ]

let canIndentList2 =
    [   "
        item 1"
        "item 2" 
    ]

The same problem also applies to records:

let cannotIndent = 
    { boss1 = "Jeffrey"
      boss2 = "Jeffrey" 
      lackeys = ["Zippy"; "George"; "Bungle"]
    }

let canIndent = 
    { 
        boss1 = "Jeffrey"
        boss2 = "Jeffrey" 
        lackeys = ["Zippy"; "George"; "Bungle"]
    }

[nojaf]

I don't think I understand what you mean here 😅.
Please create a new issue using the feature request template.
We can further discuss it over there.
I'll keep this issue to solve the original problem I mentioned.

[halcwb]

@nojaf I ran into this issue and created a post about it to explain my view: https://informedica.nl/?p=203