Fixes to autofmt, make it more aggressive (#2230)

* fix: fmt unterminated if, be more aggressive with line splits

* Fix: Handle long exprs in for/if statements

packages/autofmt/tests/samples/collapse_expr.rsx

@@ -1,4 +1,7 @@
 fn itworks() {
-    rsx!( "{name}", "{name}", "{name}" )
+    rsx! {
+        "{name}"
+        "{name}"
+        "{name}"
+    }
 }
-

packages/autofmt/tests/samples/complex.rsx

@@ -48,5 +48,9 @@ rsx! {
         }
     }
 
-    div { "asdbascasdbasd", "asbdasbdabsd", {asbdabsdbasdbas} }
+    div {
+        "asdbascasdbasd"
+        "asbdasbdabsd"
+        {asbdabsdbasdbas}
+    }
 }

packages/autofmt/tests/samples/docsite.rsx

@@ -0,0 +1,106 @@
+pub(crate) fn Nav() -> Element {
+    rsx! {
+        SearchModal {}
+        header {
+            class: "sticky top-0 z-30 bg-white dark:text-gray-200 dark:bg-ideblack border-b dark:border-stone-700 h-16 bg-opacity-80 backdrop-blur-sm",
+            class: if HIGHLIGHT_NAV_LAYOUT() { "border border-orange-600 rounded-md" },
+            div { class: "lg:py-2 px-2 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6 h-16",
+                button {
+                    class: "bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100]",
+                    class: if !SHOW_DOCS_NAV() { "hidden" },
+                    onclick: move |_| {
+                        let mut sidebar = SHOW_SIDEBAR.write();
+                        *sidebar = !*sidebar;
+                    },
+                    MaterialIcon { name: "menu", size: 24, color: MaterialIconColor::Dark }
+                }
+                div { class: "flex z-50 md:flex-1 px-2", LinkList {} }
+
+                div { class: "hidden md:flex h-full justify-end ml-2 flex-1",
+                    div { class: "hidden md:flex items-center",
+                        Search {}
+                        div { class: "hidden lg:flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800",
+                            label {
+                                class: "sr-only",
+                                id: "headlessui-listbox-label-2",
+                                "Theme"
+                            }
+                            Link {
+                                to: "https://discord.gg/XgGxMSkvUM",
+                                class: "block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300",
+                                new_tab: true,
+                                span { class: "sr-only", "Dioxus on Discord" }
+                                crate::icons::DiscordLogo {}
+                            }
+                            Link {
+                                to: "https://github.com/dioxuslabs/dioxus",
+                                class: "ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300",
+                                new_tab: true,
+                                span { class: "sr-only", "Dioxus on GitHub" }
+                                crate::icons::Github2 {}
+                            }
+                        }
+                        div { class: "hidden lg:flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800",
+                            label {
+                                class: "sr-only",
+                                id: "headlessui-listbox-label-2",
+                                "Theme"
+                            }
+                            Link {
+                                to: Route::Deploy {},
+                                class: "md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold",
+                                "DEPLOY"
+                            }
+                            if LOGGED_IN() {
+                                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"
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn SidebarSection(chapter: &'static SummaryItem<BookRoute>) -> Element {
+    let link = chapter.maybe_link()?;
+
+    let sections = link.nested_items.iter().map(|chapter| {
+        rsx! {
+            SidebarChapter { chapter }
+        }
+    });
+
+    let _ = rsx! {
+        SidebarChapter { chapter }
+    };
+
+    rsx! {
+        SidebarChapter { chapter }
+    };
+
+    rsx! {
+        div {}
+    };
+
+    rsx! { "hi" }
+
+    rsx! {
+        div { class: "full-chapter pb-4 mb-6",
+            if let Some(url) = &link.location {
+                Link {
+                    onclick: move |_| *SHOW_SIDEBAR.write() = false,
+                    to: Route::Docs { child: *url },
+                    h3 { class: "font-semibold mb-4", "{link.name}" }
+                }
+            }
+            ul { class: "ml-1", {sections} }
+        }
+    }
+}

packages/autofmt/tests/samples/fat_exprs.rsx

@@ -0,0 +1,31 @@
+//! Exprs that are too long to fit on one line
+
+fn it_works() {
+    rsx! {
+        div {
+            if thing
+                .some_long_method_that_is_too_long_to_fit_on_one_line()
+                .some_long_method_that_is_too_long_to_fit_on_one_line()
+                .some_long_method_that_is_too_long_to_fit_on_one_line({
+                    chain()
+                        .some_long_method_that_is_too_long_to_fit_on_one_line()
+                        .some_long_method_that_is_too_long_to_fit_on_one_line()
+                })
+            {
+                "hi"
+            }
+
+            for item in thing
+                .some_long_method_that_is_too_long_to_fit_on_one_line()
+                .some_long_method_that_is_too_long_to_fit_on_one_line()
+                .some_long_method_that_is_too_long_to_fit_on_one_line({
+                    chain()
+                        .some_long_method_that_is_too_long_to_fit_on_one_line()
+                        .some_long_method_that_is_too_long_to_fit_on_one_line()
+                })
+            {
+                "hi"
+            }
+        }
+    }
+}

packages/autofmt/tests/samples/immediate_expr.rsx

@@ -1,4 +1,5 @@
 fn it_works() {
-    rsx!({()})
+    rsx! {
+        {()}
+    }
 }
-

packages/autofmt/tests/samples/letsome.rsx

@@ -0,0 +1,12 @@
+#[component]
+fn SidebarSection() -> Element {
+    rsx! {
+        if let Some(url) = &link.location {
+            "hi {url}"
+        }
+
+        if val.is_empty() {
+            "No content"
+        }
+    }
+}

packages/autofmt/tests/samples/messy_indent.rsx

@@ -8,6 +8,10 @@ fn SaveClipboard() -> Element {
     };
 
     rsx! {
-        div { "hello world", "hello world", "hello world" }
+        div {
+            "hello world"
+            "hello world"
+            "hello world"
+        }
     }
 }

packages/autofmt/tests/samples/multirsx.rsx

@@ -4,12 +4,20 @@ rsx! {
     div {}
 
     // hi
-    div { "abcd", "ball", "s" }
+    div {
+        "abcd"
+        "ball"
+        "s"
+    }
 
     //
     //
     //
-    div { "abcd", "ball", "s" }
+    div {
+        "abcd"
+        "ball"
+        "s"
+    }
 
     //
     //

packages/autofmt/tests/samples/raw_strings.rsx

@@ -1,6 +1,11 @@
 rsx! {
     // Raw text strings
-    button { r#"Click me"#, r##"Click me"##, r######"Click me"######, r#"dynamic {1}"# }
+    button {
+        r#"Click me"#
+        r##"Click me"##
+        r######"Click me"######
+        r#"dynamic {1}"#
+    }
 
     // Raw attribute strings
     div {

packages/autofmt/tests/samples/shorthand.rsx

@@ -0,0 +1,62 @@
+#[component]
+fn SomePassthru(class: String, id: String, children: Element) -> Element {
+    rsx! {
+        div {
+            // Comments
+            class,
+            "hello world"
+        }
+        h1 { class, "hello world" }
+
+        h1 { class, {children} }
+
+        h1 { class, id, {children} }
+
+        h1 { class,
+            "hello world"
+            {children}
+        }
+
+        h1 { id,
+            "hello world"
+            {children}
+        }
+
+        Other { class, children }
+
+        Other { class,
+            "hello world"
+            {children}
+        }
+
+        div {
+            // My comment here 1
+            // My comment here 2
+            // My comment here 3
+            // My comment here 4
+            class: "asdasd",
+
+            // Comment here
+            onclick: move |_| {
+                let a = 10;
+                let b = 40;
+                let c = 50;
+            },
+
+            // my comment
+
+            // This here
+            "hi"
+        }
+
+        // Comment head
+        div { class: "asd", "Jon" }
+
+        // Comment head
+        div {
+            // Collapse
+            class: "asd",
+            "Jon"
+        }
+    }
+}

packages/autofmt/tests/samples/simple.rsx

@@ -1,6 +1,9 @@
 rsx! {
     div { "hello world!" }
-    div { "hello world!", "goodbye world!" }
+    div {
+        "hello world!"
+        "goodbye world!"
+    }
 
     // Simple div
     div { "hello world!" }
@@ -8,18 +11,32 @@ rsx! {
     // Compression with attributes
     div { key: "{a}", class: "ban", style: "color: red" }
 
+    // But not too many attributes (3 max)
+    div {
+        id: "{a}",
+        class: "ban",
+        style: "color: red",
+        value: "{b}"
+    }
+
     // Nested one level
-    div { div { "nested" } }
+    div {
+        div { "nested" }
+    }
 
     // Nested two level
     div {
-        div { h1 { "highly nested" } }
+        div {
+            h1 { "highly nested" }
+        }
     }
 
     // Anti-Nested two level
     div {
         div {
-            div { h1 { "highly nested" } }
+            div {
+                h1 { "highly nested" }
+            }
         }
     }
 

packages/autofmt/tests/samples/trailing_expr.rsx

@@ -1,7 +1,10 @@
 fn it_works() {
     rsx! {
         div {
-            span { "Description: ", {package.description.as_deref().unwrap_or("❌❌❌❌ missing")} }
+            span {
+                "Description: "
+                {package.description.as_deref().unwrap_or("❌❌❌❌ missing")}
+            }
         }
     }
 }