fix: some edge cases around autoformatting (#485)

* wip: remove comment support from autofmt

* fix: some edge cases around autoformatting

* fix: revert readme

* fix: failing test

packages/autofmt/tests/fil.rs

@@ -0,0 +1,22 @@
+#[test]
+fn formats_file_properly() {
+    let src = include_str!("./samples/thing.rsx");
+
+    let formatted = dioxus_autofmt::fmt_file(src);
+    let out = dioxus_autofmt::apply_formats(src, formatted);
+
+    println!("{}", out);
+}
+
+#[test]
+fn already_formatted_file_properly() {
+    let src = include_str!("./samples/pre.rsx");
+
+    let formatted = dioxus_autofmt::fmt_file(src);
+
+    dbg!(&formatted);
+
+    let out = dioxus_autofmt::apply_formats(src, formatted);
+
+    println!("{}", out);
+}

packages/autofmt/tests/sample.rs

@@ -1,6 +1,6 @@
 #![allow(unused)]
 
-const SRC: &str = include_str!("./samples/all.rs");
+const SRC: &str = include_str!("./samples/all.rsx");
 
 fn body() -> &'static str {
     &SRC[6..SRC.len() - 3]

packages/autofmt/tests/samples/pre.rsx

@@ -0,0 +1,3 @@
+rsx! {
+    div {}
+}

packages/autofmt/tests/samples/thing.rsx

@@ -0,0 +1,227 @@
+
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            div {
+                key: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+                class: "asdasd",
+            }
+        }
+        h1 {"hi"}
+        h1 {"hi"}
+        h1 {"hi"}
+        h1 {"hi"}
+  div {
+        div {
+            key: "ddd",
+            class: "asd",
+            class: "asd",
+            class: "asd",
+            class: "asd",
+            class: "asd",
+            class: "asd",
+            blah: 123,
+            onclick: move |_| {
+                let blah = 120;
+                true
+            },
+            onclick: move |_| {
+                let blah = 120;
+                true
+            },
+            onclick: move |_| {
+                let blah = 120;
+                true
+            },
+            onclick: move |_| {
+                let blah = 120;
+                true
+            },
+            div {
+                div { "hi" }
+                h2 { class: "asd" }
+            }
+            Component {}
+
+            // Generics
+            Component<Generic> {}
+        }
+    }
+
+    div { adsasd: "asd",
+        h1 { "asd" }
+        div {
+            div { "hello" }
+            div { "goodbye" }
+            div { class: "broccoli", div { "hi" } }
+            div { class: "broccolibroccolibroccolibroccolibroccolibroccolibroccolibroccolibroccolibroccoli",
+                div { "hi" }
+            }
+            div {
+                class: "alksdjasd",
+                onclick: move |_| {
+                    liberty!();
+                },
+                div { "hi" }
+            }
+            commented {
+                // is unparalled
+                class: "asdasd",
+
+                // My genius
+                div { "hi" }
+
+                div {}
+            }
+        }
+    }
+
+
+    // Components
+    Component {
+        adsasd: "asd",
+
+        // this is a comment
+        onclick: move |_| {
+            let blah = 120;
+            let blah = 122;
+        }
+    }
+
+    div {
+        Component {
+            adsasd: "asd",
+            onclick: move |_| {
+                let a = a;
+            },
+            div { "thing" }
+        }
+        Component {
+            asdasd: "asdasd",
+            asdasd: "asdasdasdasdasdasdasdasdasdasd",
+            ..Props {
+                a: 10,
+                b: 20
+            }
+        }
+        Component {
+            asdasd: "asdasd",
+            ..Props {
+                a: 10,
+                b: 20,
+                c: {
+                    fn main() {}
+                },
+            }
+            "content"
+        }
+    }
+
+    div {
+        a: "1234567891012345678910123456789101234567891012345678910123456789101234567891012345678910123456789101234567891012345678910",
+        a: "123",
+        a: "123",
+        a: "123",
+        a: "123",
+        a: "123",
+        a: "123",
+        a: "123",
+        a: "123"
+    }
+
+    // Short attributes
+    div { a: "123", a: "123", a: "123", a: "123", a: "123", a: "123", a: "123", a: "123", a: "123" }
+
+    // Compression
+    h3 { class: "mb-2 text-xl font-bold", "Invite Member" }
+    a { class: "text-white", "Send invitation" }
+
+    // Props on tops
+    h3 { class: "mb-2 text-xl font-bold mb-2 text-xl font-bold mb-2 text-xl font-bold mb-2 text-xl font-bold mb-2 text-xl font-bold",
+        "Invite Member"
+    }
+
+    // No children, minimal props
+    img { class: "mb-6 mx-auto h-24", src: "artemis-assets/images/friends.png", alt: "" }
+
+    // One level compression
+    div {
+        a { class: "py-2 px-3 bg-indigo-500 hover:bg-indigo-600 rounded text-xs text-white", href: "#", "Send invitation" }
+    }
+
+    // Tiny component
+    Component { a: 123 }
+
+    // Expressions
+    ul {
+        div {}
+        (0..10).map(|f| rsx! {
+            li { "hi" }
+        })
+        div {}
+    }
+
+    // Complex nesting with components
+    button {
+        class: "flex items-center pl-3 py-3 pr-2 text-gray-500 hover:bg-indigo-50 rounded",
+        onclick: move |evt| {
+            show_user_menu.set(!show_user_menu.get());
+            evt.cancel_bubble();
+        },
+        onclick: move |evt| show_user_menu.set(!show_user_menu.get()),
+        span { class: "inline-block mr-4", icons::icon_14 {} }
+        span { "Settings" }
+    }
+
+    // Complex nesting with handlers
+    li {
+        Link { class: "flex items-center pl-3 py-3 pr-4 {active_class} rounded", to: "{to}",
+            span { class: "inline-block mr-3", icons::icon_0 {} }
+            span { "{name}" }
+            children.is_some().then(|| 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 })
+        }
+    }
+
+    // No nesting
+    Component {
+        adsasd: "asd",
+        onclick: move |_| {
+            let blah = 120;
+        }
+    }
+
+    // Component path
+    my::thing::Component {
+        adsasd: "asd",
+        onclick: move |_| {
+            let blah = 120;
+        }
+    }
+
+    })
+}

packages/autofmt/tests/sink.rs

@@ -15,27 +15,18 @@ rsx! {
 
     let formatted = fmt_file(src);
 
-    println!("{formatted:?}");
+    println!("{formatted:#?}");
 }
 
 #[test]
 fn formats_valid_rust_src_with_indents() {
-    let mut src = r#"
+    let src = r#"
 #[inline_props]
 fn NavItem<'a>(cx: Scope, to: &'static str, children: Element<'a>, icon: Shape) -> Element {
     const ICON_SIZE: u32 = 36;
 
     rsx! {
-        div {
-
-            h1 {"thing"}
-
-
-        }
-
-
-
-
+        div { h1 { "thing" } }
     }
 }
 "#
@@ -43,12 +34,7 @@ fn NavItem<'a>(cx: Scope, to: &'static str, children: Element<'a>, icon: Shape)
 
     let formatted = fmt_file(&src);
 
-    let block = formatted.into_iter().next().unwrap();
-
-    src.replace_range(
-        block.start - 1..block.end + 1,
-        &format!("{{ {}    }}", &block.formatted),
-    );
+    assert!(formatted.is_empty());
 }
 
 #[test]
@@ -59,23 +45,15 @@ fn NavItem<'a>(cx: Scope, to: &'static str, children: Element<'a>, icon: Shape)
     const ICON_SIZE: u32 = 36;
 
     rsx! {
-        div {
-
-            h1 {"thing"}
-
-
-        }
-
-
+        div { h1 { "thing" } }
     }
 
     rsx! {
         div {
-
             Ball {
-                a: rsx!{
-                    "asdasd"
-                }
+                a: rsx! {
+    "asdasd"
+}
             }
         }
     }
@@ -85,23 +63,15 @@ fn NavItem<'a>(cx: Scope, to: &'static str, children: Element<'a>, icon: Shape)
     const ICON_SIZE: u32 = 36;
 
     rsx! {
-        div {
-
-            h1 {"thing"}
-
-
-        }
-
-
+        div { h1 { "thing" } }
     }
 
     rsx! {
         div {
-
             Ball {
-                a: rsx!{
-                    "asdasd"
-                }
+                a: rsx! {
+    "asdasd"
+}
             }
         }
     }
@@ -126,7 +96,7 @@ fn empty_blocks() {
     let src = r###"
 pub fn Alert(cx: Scope) -> Element {
     cx.render(rsx! {
-        div { }
+        div {}
     })
 }
 "###