Fix: #2604, Fix: #2240, Fix: #2341, Fix #1355 - Better error handling and and spaces handling in autofmt (#2736)

* add new autofmt sample
* Feat: implement rustfmt::skip support for rsx
* generally improve error handling with better expect messages
* wip: nested rsx formatting and expression formatting
* nested rsx formatting works
* collapse autofmt crate
* cast indent through macros
* use proper whitespace
* no more eating comments!
* Use proper error handling

packages/autofmt/tests/samples/attributes.rsx

@@ -30,7 +30,7 @@ rsx! {
         a: "123",
         a: "123",
         a: "123",
-        a: "123"
+        a: "123",
     }
 
     div {
@@ -42,6 +42,6 @@ rsx! {
         a: "123",
         a: "123",
         a: "123",
-        a: "123"
+        a: "123",
     }
 }

packages/autofmt/tests/samples/basic_expr.rsx

@@ -0,0 +1,8 @@
+fn itworks() {
+    rsx! {
+        div {
+            "hi"
+            {children}
+        }
+    }
+}

packages/autofmt/tests/samples/comments.rsx

@@ -33,4 +33,30 @@ rsx! {
         class: "asd",
         "Jon"
     }
+
+    // comments inline
+    div { // inline
+        // Collapse
+        class: "asd", // super inline
+        class: "asd", // super inline
+        "Jon" // all the inline
+        // Comments at the end too
+    }
+
+    // please dont eat me 1
+    div { // please dont eat me 2
+        // please dont eat me 3
+    }
+
+    // please dont eat me 1
+    div { // please dont eat me 2
+        // please dont eat me 3
+        abc: 123,
+    }
+
+    // please dont eat me 1
+    div {
+        // please dont eat me 3
+        abc: 123,
+    }
 }

packages/autofmt/tests/samples/commentshard.rsx

@@ -36,7 +36,7 @@ rsx! {
             class: "hello world",
 
             // todo some work in here
-            class: "hello world"
+            class: "hello world",
         }
 
         div {

packages/autofmt/tests/samples/complex.rsx

@@ -22,14 +22,17 @@ rsx! {
                 span {
                     class: "inline-block ml-auto hover:bg-gray-500",
                     onclick: move |evt| {
-                        // open.set(!open.get());
                         evt.cancel_bubble();
                     },
                     icons::icon_8 {}
                 }
             })}
         }
-        div { class: "px-4", {is_current.then(|| rsx!{ children })} }
+        div { class: "px-4",
+            {is_current.then(|| rsx! {
+                {children}
+            })}
+        }
     }
 
     // No nesting
@@ -37,7 +40,7 @@ rsx! {
         adsasd: "asd",
         onclick: move |_| {
             let blah = 120;
-        }
+        },
     }
 
     // Component path
@@ -45,7 +48,7 @@ rsx! {
         adsasd: "asd",
         onclick: move |_| {
             let blah = 120;
-        }
+        },
     }
 
     for i in 0..10 {

packages/autofmt/tests/samples/docsite.rsx

@@ -15,7 +15,7 @@ pub(crate) fn Nav() -> Element {
                     MaterialIcon {
                         name: "menu",
                         size: 24,
-                        color: MaterialIconColor::Dark
+                        color: MaterialIconColor::Dark,
                     }
                 }
                 div { class: "flex z-50 md:flex-1 px-2", LinkList {} }
@@ -59,7 +59,7 @@ pub(crate) fn Nav() -> Element {
                                 Link { to: Route::Homepage {},
                                     img {
                                         src: "https://avatars.githubusercontent.com/u/10237910?s=40&v=4",
-                                        class: "ml-4 h-10 rounded-full w-auto"
+                                        class: "ml-4 h-10 rounded-full w-auto",
                                     }
                                 }
                             }

packages/autofmt/tests/samples/ifchain_forloop.rsx

@@ -24,4 +24,15 @@ rsx! {
     } else {
         h3 {}
     }
+
+    div {
+        class: "asdasd",
+        class: if expr { "asdasd" } else { "asdasd" },
+        class: if expr { "asdasd" },
+        class: if expr { "asdasd" } else if expr { "asdasd" } else { "asdasd" },
+
+        // comments?
+        class: if expr { "asdasd" } else if expr { "asdasd" } else { "asdasd" }, // comments!!?
+        // comments?
+    }
 }

packages/autofmt/tests/samples/long_exprs.rsx

@@ -6,7 +6,9 @@ rsx! {
                     section { class: "body-font overflow-hidden dark:bg-ideblack",
                         div { class: "container px-6 mx-auto",
                             div { class: "-my-8 divide-y-2 divide-gray-100",
-                                {POSTS.iter().enumerate().map(|(id, post)| rsx! { BlogPostItem { post: post, id: id } })}
+                                {POSTS.iter().enumerate().map(|(id, post)| rsx! {
+                                    BlogPostItem { post, id }
+                                })}
                             }
                         }
                     }

packages/autofmt/tests/samples/manual_props.rsx

@@ -10,7 +10,7 @@ rsx! {
         Component {
             asdasd: "asdasd",
             asdasd: "asdasdasdasdasdasdasdasdasdasd",
-            ..Props { a: 10, b: 20 }
+            ..Props { a: 10, b: 20 },
         }
         Component {
             asdasd: "asdasd",

packages/autofmt/tests/samples/many_exprs.rsx

@@ -103,12 +103,21 @@ fn app() -> Element {
     rsx! {
         div {
             {
-                let millis = timer.with(|t| t.duration().saturating_sub(t.started_at.map(|x| x.elapsed()).unwrap_or(Duration::ZERO)).as_millis());
-                format!("{:02}:{:02}:{:02}.{:01}",
-                        millis / 1000 / 3600 % 3600,
-                        millis / 1000 / 60 % 60,
-                        millis / 1000 % 60,
-                        millis / 100 % 10)
+                let millis = timer
+                    .with(|t| {
+                        t.duration()
+                            .saturating_sub(
+                                t.started_at.map(|x| x.elapsed()).unwrap_or(Duration::ZERO),
+                            )
+                            .as_millis()
+                    });
+                format!(
+                    "{:02}:{:02}:{:02}.{:01}",
+                    millis / 1000 / 3600 % 3600,
+                    millis / 1000 / 60 % 60,
+                    millis / 1000 % 60,
+                    millis / 100 % 10,
+                )
             }
         }
         div {
@@ -119,7 +128,7 @@ fn app() -> Element {
                 value: format!("{:02}", timer.read().hours),
                 oninput: move |e| {
                     timer.write().hours = e.value().parse().unwrap_or(0);
-                }
+                },
             }
 
             input {
@@ -129,7 +138,7 @@ fn app() -> Element {
                 value: format!("{:02}", timer.read().minutes),
                 oninput: move |e| {
                     timer.write().minutes = e.value().parse().unwrap_or(0);
-                }
+                },
             }
 
             input {
@@ -139,7 +148,7 @@ fn app() -> Element {
                 value: format!("{:02}", timer.read().seconds),
                 oninput: move |e| {
                     timer.write().seconds = e.value().parse().unwrap_or(0);
-                }
+                },
             }
         }
 
@@ -155,7 +164,7 @@ fn app() -> Element {
                         }
                     })
             },
-            { timer.with(|t| if t.started_at.is_none() { "Start" } else { "Stop" }) }
+            {timer.with(|t| if t.started_at.is_none() { "Start" } else { "Stop" })}
         }
         div { id: "app",
             button {
@@ -165,7 +174,10 @@ fn app() -> Element {
                     window_preferences.write().with_decorations = !decorations;
                 },
                 {
-                    format!("with decorations{}", if window_preferences.read().with_decorations { " ✓" } else { "" }).to_string()
+                    format!(
+                        "with decorations{}",
+                        if window_preferences.read().with_decorations { " ✓" } else { "" },
+                    )
                 }
             }
             button {
@@ -178,16 +190,28 @@ fn app() -> Element {
                 },
                 width: 100,
                 {
-                    format!("always on top{}", if window_preferences.read().always_on_top { " ✓" } else { "" })
+                    format!(
+                        "always on top{}",
+                        if window_preferences.read().always_on_top { " ✓" } else { "" },
+                    )
                 }
             }
         }
         {
             exit_button(
                 Duration::from_secs(3),
-                |trigger, delay| rsx! {
-                    {format!("{:0.1?}", trigger.read().map(|inst| (delay.as_secs_f32() - inst.elapsed().as_secs_f32()))) }
-                }
+                |trigger, delay| {
+                    rsx! {
+                        {
+                            format!(
+                                "{:0.1?}",
+                                trigger
+                                    .read()
+                                    .map(|inst| (delay.as_secs_f32() - inst.elapsed().as_secs_f32())),
+                            )
+                        }
+                    }
+                },
             )
         }
     }

packages/autofmt/tests/samples/misplaced.rsx

@@ -15,7 +15,7 @@ pub(crate) fn Nav() -> Element {
                     MaterialIcon {
                         name: "menu",
                         size: 24,
-                        color: MaterialIconColor::Dark
+                        color: MaterialIconColor::Dark,
                     }
                 }
                 div { class: "flex z-50 md:flex-1 px-2", LinkList {} }

packages/autofmt/tests/samples/nested.rsx

@@ -36,7 +36,7 @@ fn App() -> Element {
                             "hi!!"
                             "womh"
                         }
-                    };
+                    }
                     println!("hi")
                 },
                 "hi"
@@ -83,7 +83,7 @@ fn App() -> Element {
                                                                 "so22mething nested?"
                                                             }
                                                         }
-                                                    }
+                                                    },
                                                 }
                                             }
                                         };
@@ -93,11 +93,11 @@ fn App() -> Element {
                                                 "something nested?"
                                             }
                                         }
-                                    }
+                                    },
                                 }
-                            }
+                            },
                         }
-                    }
+                    },
                 }
             },
             onrender: move |_| {
@@ -121,12 +121,14 @@ fn App() -> Element {
                                 }
                             }
                         },
-                        {rsx! {
-                            div2 {
-                                h12 { "hi" }
-                                "so22mething nested?"
+                        {
+                            rsx! {
+                                div2 {
+                                    h12 { "hi" }
+                                    "so22mething nested?"
+                                }
                             }
-                        }}
+                        }
                     }
                 }
             },
@@ -138,7 +140,7 @@ fn App() -> Element {
                             "something nested?"
                         }
                     };
-                }
+                },
             }
         }
     }

packages/autofmt/tests/samples/oneline.rsx

@@ -0,0 +1 @@
+rsx! { "hello world" }

packages/autofmt/tests/samples/raw_strings.rsx

@@ -12,6 +12,6 @@ rsx! {
         width: r#"10px"#,
         height: r##"{10}px"##,
         "raw-attr": r###"raw-attr"###,
-        "raw-attr2": r###"{100}"###
+        "raw-attr2": r###"{100}"###,
     }
 }

packages/autofmt/tests/samples/simple.rsx

@@ -16,7 +16,7 @@ rsx! {
         id: "{a}",
         class: "ban",
         style: "color: red",
-        value: "{b}"
+        value: "{b}",
     }
 
     // Nested one level

packages/autofmt/tests/samples/skip.rsx

@@ -0,0 +1,36 @@
+/// dont format this component
+#[rustfmt::skip]
+#[component]
+fn SidebarSection() -> Element {
+    rsx! {
+        div {
+            "hi" div {} div {}
+        }
+    }
+}
+
+/// dont format this component
+#[component]
+fn SidebarSection() -> Element {
+    // format this
+    rsx! {
+        div { "hi" }
+    }
+
+    // and this
+    rsx! {
+        div {
+            "hi"
+            div {}
+            div {}
+        }
+    }
+
+    // but not this
+    #[rustfmt::skip]
+    rsx! {
+        div {
+            "hi" div {} div {}
+        }
+    }
+}

packages/autofmt/tests/samples/spaces.rsx

@@ -0,0 +1,14 @@
+rsx! {
+    if let Some(Some(record)) = &*records.read_unchecked() {
+        {
+            let (label, value): (Vec<String>, Vec<f64>) = record
+                .iter()
+                .rev()
+                .map(|d| (d.model.clone().expect("work"), d.row_total))
+                .collect();
+            rsx! {
+                BarChart { id: "bar-plot".to_string(), x: value, y: label }
+            }
+        }
+    }
+}

packages/autofmt/tests/samples/staged.rsx

@@ -9,18 +9,20 @@ rsx! {
 
     div { {some_expr} }
     div {
-        {
-            POSTS.iter().enumerate().map(|(id, post)| rsx! {
-                BlogPostItem { post, id }
-            })
-        }
+        {POSTS.iter().enumerate().map(|(id, post)| rsx! {
+            BlogPostItem { post, id }
+        })}
     }
 
     div { class: "123123123123123123123123123123123123",
-        {some_really_long_expr_some_really_long_expr_some_really_long_expr_some_really_long_expr_}
+        {
+            some_really_long_expr_some_really_long_expr_some_really_long_expr_some_really_long_expr_
+        }
     }
 
     div { class: "-my-8 divide-y-2 divide-gray-100",
-        {POSTS.iter().enumerate().map(|(id, post)| rsx! { BlogPostItem { post: post, id: id } })}
+        {POSTS.iter().enumerate().map(|(id, post)| rsx! {
+            BlogPostItem { post, id }
+        })}
     }
 }