{"id":203,"date":"2020-12-19T12:27:48","date_gmt":"2020-12-19T11:27:48","guid":{"rendered":"https:\/\/informedica.nl\/?p=203"},"modified":"2021-01-20T22:36:28","modified_gmt":"2021-01-20T21:36:28","slug":"feliz-indentation-and-fantomas","status":"publish","type":"post","link":"https:\/\/informedica.nl\/?p=203","title":{"rendered":"Feliz indentation and Fantomas"},"content":{"rendered":"\n

Indentation is important in F#, as it defines the code blocks and the separate code elements. Using Feliz<\/a> to define a view, in a Fable.React application, the indentation matters just as much, and even more. <\/p>\n\n\n\n

Fantomas<\/a> is a beautiful tool that automatically formats your code and ensures consistency, also in indentation. But using code like with the Feliz library, there some serious drawbacks.<\/p>\n\n\n

<\/p>\n\n\n

For example this is Feliz code formatted by Fantomas<\/a>:<\/p>\n\n\n\n

let render (state: State) (dispatch: Msg -> unit) =\n    let filter = createFilter state.Generics state.Indications state.Routes state.Patients dispatch\n    let details =\n        match state.Details with\n        | HasNotStartedYet -> \"## Geen generiek gekozen\"\n        | InProgress -> \"## Doseringen worden opgehaald ...\"\n        | Resolved s -> s.Trim()\n        |> markdown.source\n        |> List.singleton\n        |> List.append [ markdown.escapeHtml false ]\n        |> Markdown.markdown\n    Mui.themeProvider\n        [ themeProvider.theme defaultTheme\n          themeProvider.children\n              [ Html.div\n                  [ [ Fable.MaterialUI.Icons.menuIcon \"\", (fun _ -> ToggleEdit |> dispatch) ]\n                    |> Components.TitleBar.render (state.Versions |> printTitle)\n\n                    if state.EditView then \n                        Html.div [ \n                            prop.style [ style.marginTop 100 ]\n                            prop.text \"Edit view\" \n                        ]\n                    else \n                        Mui.container\n                            [ prop.style\n                                [ style.marginTop 90\n                                  style.padding 10 ]\n                              container.maxWidth.md\n                              prop.children\n                                  [ \/\/ search\n                                    Html.div\n                                        [ prop.style [ style.padding 10 ]\n                                          paper.children filter ]\n                                    match state.Generics with\n                                    | Resolved _ ->\n                                        \/\/ details\n                                        Mui.paper\n                                            [ prop.style\n                                                [ style.padding 10\n                                                  style.color Colors.indigo.``900`` ]\n                                              prop.children [ details ] ]\n                                    | _ -> Html.none ] ] ] ] ]<\/code><\/pre>\n\n\n\n
This indentation however has a couple of problems. <\/p>\n\n\n\n
  1. It is very hard to see which are the different elements in the code. <\/li>
  2. When you indent pieces of this code, it quickly results in hard to debug indentation errors.<\/li><\/ol>\n\n\n\n
    This is because of the following indentation structure:<\/p>\n\n\n\n
        Mui.themeProvider [ themeProvider.theme defaultTheme\n                        themeProvider.children [ Html.div [ [ Fable.MaterialUI.Icons.menuIcon \"\",\n                                                              (fun _ -> ToggleEdit |> dispatch) ]\n                                                            |> Components.TitleBar.render (state.Versions |> printTitle) ] ] ]\n<\/code><\/pre>\n\n\n\n
    So every list argument starts at the same line as the list opening: i.e. <\/p>\n\n\n\n
    \/\/ fantomas formatted\nHtml.div [ prop.style [ style.marginTop 40 ]\n           prop.children [ Mui.typography [ prop.text \"the fantomas way\" ] ] ]\n\/\/ easier to extract and indent\nHtml.div [ \n    prop.style [\n        style.marginTop 40\n    ]\n    prop.children [\n        Mui.typography [\n            prop.text \"easier to extract and indent\"\n        ]\n    ]\n]<\/code><\/pre>\n\n\n\n
    When you reformat the original  code to:<\/p>\n\n\n\n
    let render (state: State) (dispatch: Msg -> unit) =\n    let filter = createFilter state.Generics state.Indications state.Routes state.Patients dispatch\n\n    let details =\n        match state.Details with\n        | HasNotStartedYet -> \"## Geen generiek gekozen\"\n        | InProgress -> \"## Doseringen worden opgehaald ...\"\n        | Resolved s -> s.Trim()\n        |> markdown.source\n        |> List.singleton\n        |> List.append [ markdown.escapeHtml false ]\n        |> Markdown.markdown\n\n    Mui.themeProvider [ \n            themeProvider.theme defaultTheme\n            themeProvider.children [ \n                Html.div [ \n                    [ \n                        Fable.MaterialUI.Icons.menuIcon \"\", (fun _ -> ToggleEdit |> dispatch) \n                    ]\n                    |> Components.TitleBar.render (state.Versions |> printTitle)\n\n                    if state.EditView then \n                        Html.div [ \n                            prop.style [ style.marginTop 100 ]\n                            prop.text \"Edit view\" \n                        ]\n                    else \n                        Mui.container [ \n                            prop.style [ \n                                style.marginTop 90\n                                style.padding 10 \n                            ]\n                            container.maxWidth.md\n                            prop.children [ \n                                \/\/ search\n                                Html.div [ \n                                    prop.style [ style.padding 10 ]\n                                    paper.children filter \n                                ]\n\n                                match state.Generics with\n                                | Resolved _ ->\n                                    \/\/ details\n                                    Mui.paper [ \n                                        prop.style [ \n                                            style.padding 10\n                                            style.color Colors.indigo.``900`` \n                                        ]\n                                        prop.children [ details ] \n                                    ]\n                                | _ -> Html.none \n                            ] \n                        ] \n                ] \n            ] \n        ]<\/code><\/pre>\n\n\n\n
    This is easier to read and identify the different elements. Also, when you need to add indentation, because for example you want to wrap things in an additional div, this is far easier to do. <\/p>\n\n\n\n
    Even the editor view is much nicer as it allows you to collapse each individual element:<\/p>\n\n\n\n
    \"\"
    With the right indentation formatting, you can collapse each different element.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
    Indentation is important in F#, as it defines the code blocks and the separate code elements. Using Feliz to define a view, in a Fable.React application, the indentation matters just as much, and even more. Fantomas is a beautiful tool that automatically formats your code and ensures consistency, also in indentation. But using code like … <\/p>\n
    Continue reading “Feliz indentation and Fantomas”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-203","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/posts\/203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/informedica.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=203"}],"version-history":[{"count":6,"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/posts\/203\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/posts\/203\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/informedica.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informedica.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informedica.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}