search

dillonkearns / elm-review-html-to-elm

Turn HTML into Elm. With support for elm-tailwind-modules.
http://html-to-elm.com/
BSD 3-Clause "New" or "Revised" License
97 stars 10 forks source link

Possible formatting improvements #15

Open dillonkearns opened 2 years ago

dillonkearns commented 2 years ago

Out of curiosity after #14, I checked to see whether there are any other formatting blemishes and ran a diff of the ete-test output. It's pretty close now, but I wonder if using https://github.com/mdgriffith/elm-codegen could get it all the way to nicely formatted code. It hasn't been officially released yet, but I used it for one project and it's already quite a useful tool.

I'm not sure if elm-codegen would support adding multiline comments in some of the places that they can be inserted by this tool, though.

Here are the remaining diffs with how elm-format 0.8.5 formats the code:

diff --git a/ete-tests/examples/Comments.elm b/ete-tests/examples/Comments.elm
index ee4aed2..a7dce32 100644
--- a/ete-tests/examples/Comments.elm
+++ b/ete-tests/examples/Comments.elm
@@ -15,14 +15,12 @@ main =

 result =
     {- Outer comment -}
-        div []
-        [         {- Inner comment 1 -}
-                {- Inner comment 2 -}
-        span []
+    div []
+        [ {- Inner comment 1 -} {- Inner comment 2 -}
+          span []
             [ text "1" ]
         , span []
             [ text "2" ]
         , span []
             [ text "3" ]
         ]

diff --git a/ete-tests/examples/Example1.elm b/ete-tests/examples/Example1.elm
index cd1989d..bb7a9e8 100644
--- a/ete-tests/examples/Example1.elm
+++ b/ete-tests/examples/Example1.elm
@@ -15,7 +15,7 @@ main =

 result =
     {- This example requires Tailwind CSS v2.0+ -}
-        div
+    div
         [ css
             [ Tw.rounded_md
             , Tw.bg_yellow_50
@@ -32,8 +32,8 @@ result =
                     [ Tw.flex_shrink_0
                     ]
                 ]
-                [                 {- Heroicon name: solid/exclamation -}
-                Svg.svg
+                [ {- Heroicon name: solid/exclamation -}
+                  Svg.svg
                     [ SvgAttr.css
                         [ Tw.h_5
                         , Tw.w_5
@@ -77,4 +77,3 @@ result =
                 ]
             ]
         ]

diff --git a/ete-tests/examples/Example3.elm b/ete-tests/examples/Example3.elm
index 4fd3c79..7d6a6bc 100644
--- a/ete-tests/examples/Example3.elm
+++ b/ete-tests/examples/Example3.elm
@@ -15,7 +15,7 @@ main =

 result =
     {- This example requires Tailwind CSS v2.0+ -}
-        div
+    div
         [ css
             [ Tw.bg_white
             ]
@@ -262,8 +262,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -295,8 +295,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -430,8 +430,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -463,8 +463,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -496,8 +496,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -631,8 +631,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -664,8 +664,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -697,8 +697,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -730,8 +730,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -865,8 +865,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -898,8 +898,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -931,8 +931,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -964,8 +964,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -997,8 +997,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -1030,8 +1030,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -1063,8 +1063,8 @@ result =
                                     , Tw.space_x_3
                                     ]
                                 ]
-                                [                                 {- Heroicon name: solid/check -}
-                                Svg.svg
+                                [ {- Heroicon name: solid/check -}
+                                  Svg.svg
                                     [ SvgAttr.css
                                         [ Tw.flex_shrink_0
                                         , Tw.h_5
@@ -1096,4 +1096,3 @@ result =
                 ]
             ]
         ]

diff --git a/ete-tests/examples/NestedPseudoclassInBreakpoint.elm b/ete-tests/examples/NestedPseudoclassInBreakpoint.elm
index 3b76e69..5a1e51d 100644
--- a/ete-tests/examples/NestedPseudoclassInBreakpoint.elm
+++ b/ete-tests/examples/NestedPseudoclassInBreakpoint.elm
@@ -20,7 +20,7 @@ result =
                 [ Tw.bg_gray_100
                 , Bp.lg
                     [ Tw.bg_white
-                    , Css.hover 
+                    , Css.hover
                         [ Tw.bg_gray_200
                         ]
                     ]
@@ -38,4 +38,3 @@ result =
             ]
             []
         ]

diff --git a/ete-tests/examples/NonStringAttributes.elm b/ete-tests/examples/NonStringAttributes.elm
index d5f2ab9..b169e78 100644
--- a/ete-tests/examples/NonStringAttributes.elm
+++ b/ete-tests/examples/NonStringAttributes.elm
@@ -58,8 +58,8 @@ result =
                 ]
                 [ text "It was a dark and stormy night..." ]
             ]
-        ,         {- The second value will be selected initially -}
-        select
+        , {- The second value will be selected initially -}
+          select
             [ Attr.name "choice"
             , Attr.size 2
             ]
@@ -195,4 +195,3 @@ result =
                 ]
             ]
         ]

diff --git a/ete-tests/examples/XlinkAttributes.elm b/ete-tests/examples/XlinkAttributes.elm
index 909c9b9..6d1a945 100644
--- a/ete-tests/examples/XlinkAttributes.elm
+++ b/ete-tests/examples/XlinkAttributes.elm
@@ -28,8 +28,8 @@ result =
                     [ text "MDN Web Docs" ]
                 ]
             ]
-        ,         {-  Design tools sometimes generate svgs with xlink attributes. This is a real-world example.  -}
-        Svg.svg
+        , {- Design tools sometimes generate svgs with xlink attributes. This is a real-world example. -}
+          Svg.svg
             [ SvgAttr.height "16"
             , SvgAttr.viewBox "0 0 16 16"
             , SvgAttr.width "16"
@@ -82,4 +82,3 @@ result =
                 ]
             ]
         ]