fix: workaround bug with proc_macro2 regarding multibyte chars

formatter/Cargo.toml

@@ -12,7 +12,7 @@ leptosfmt-pretty-printer.workspace = true
 rstml = "0.10.6"
 syn = { version = "2.0.18", features = ["visit", "full", "extra-traits"] }
 leptosfmt-prettyplease = { features = ["verbatim"], version = "0.2.11" }
-proc-macro2 = { version = "1.0.52", features = ["span-locations"] }
+proc-macro2 = { version = "1.0.68", features = ["span-locations"] }
 thiserror = "1.0.40"
 crop = "0.3.0"
 serde = { version = "1.0.163", features = ["derive"] }

formatter/src/collect_comments.rs

@@ -1,10 +1,10 @@
 use std::collections::HashMap;
 
-use crop::{Rope, RopeSlice};
+use crop::{Rope};
 
-use proc_macro2::{LineColumn, Span, TokenStream, TokenTree};
+use proc_macro2::{Span, TokenStream, TokenTree};
 
-use crate::line_column_to_byte;
+use crate::{get_text_beween_spans};
 
 pub(crate) fn extract_whitespace_and_comments(
     source: &Rope,
@@ -45,13 +45,6 @@ pub(crate) fn extract_whitespace_and_comments(
     whitespace_and_comments
 }
 
-fn get_text_beween_spans(rope: &Rope, start: LineColumn, end: LineColumn) -> RopeSlice<'_> {
-    let start_byte = line_column_to_byte(rope, start);
-    let end_byte = line_column_to_byte(rope, end);
-
-    return rope.byte_slice(start_byte..end_byte);
-}
-
 fn traverse_token_stream(tokens: TokenStream, cb: &mut impl FnMut(&TokenTree)) {
     for token in tokens {
         match token {

formatter/src/formatter/attribute.rs

@@ -91,7 +91,7 @@ mod tests {
     #[test]
     fn key_value_str_attr() {
         let formatted = format_attribute! { key="K-123" };
-        assert_snapshot!(formatted, @r###"key="K-123""###);
+        assert_snapshot!(formatted, @r#"key="K-123""#);
     }
 
     #[test]
@@ -116,7 +116,7 @@ mod tests {
 
         // literal string value
         let f = format_attr_with_brace_style! { Always => alt="test img" };
-        assert_snapshot!(f, @r###"alt={"test img"}"###);
+        assert_snapshot!(f, @r#"alt={"test img"}"#);
     }
 
     #[test]
@@ -136,7 +136,7 @@ mod tests {
 
         // literal string value
         let f = format_attr_with_brace_style! { AlwaysUnlessLit => alt="test img" };
-        assert_snapshot!(f, @r###"alt="test img""###);
+        assert_snapshot!(f, @r#"alt="test img""#);
     }
 
     #[test]
@@ -155,7 +155,7 @@ mod tests {
 
         // literal string value without braces
         let f = format_attr_with_brace_style! { Preserve => alt="test img" };
-        assert_snapshot!(f, @r###"alt="test img""###);
+        assert_snapshot!(f, @r#"alt="test img""#);
     }
 
     #[test]
@@ -174,6 +174,6 @@ mod tests {
 
         // literal string value
         let f = format_attr_with_brace_style! { WhenRequired => alt={"test img"} };
-        assert_snapshot!(f, @r###"alt="test img""###);
+        assert_snapshot!(f, @r#"alt="test img""#);
     }
 }

formatter/src/formatter/element.rs

@@ -217,17 +217,17 @@ mod tests {
     #[test]
     fn child_element() {
         let formatted = format_element! { <div><span>"hello"</span></div> };
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         <div>
             <span>"hello"</span>
         </div>
-        "###);
+        "#);
     }
 
     #[test]
     fn child_element_single_textual() {
         let formatted = format_element! { <div>"hello"</div> };
-        insta::assert_snapshot!(formatted, @r###"<div>"hello"</div>"###);
+        insta::assert_snapshot!(formatted, @r#"<div>"hello"</div>"#);
     }
 
     #[test]
@@ -239,34 +239,34 @@ mod tests {
     #[test]
     fn child_element_single_textual_single_attr() {
         let formatted = format_element! { <div key=12>"hello"</div> };
-        insta::assert_snapshot!(formatted, @r###"<div key=12>"hello"</div>"###);
+        insta::assert_snapshot!(formatted, @r#"<div key=12>"hello"</div>"#);
     }
 
     #[test]
     fn child_element_single_textual_multi_attr() {
         let formatted = format_element! { <div key=12 width=100>"hello"</div> };
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         <div key=12 width=100>
             "hello"
         </div>
-        "###);
+        "#);
     }
 
     #[test]
     fn child_element_two_textual() {
         let formatted = format_element! { <div>"The count is" {count}</div> };
-        insta::assert_snapshot!(formatted, @r###"<div>"The count is" {count}</div>"###);
+        insta::assert_snapshot!(formatted, @r#"<div>"The count is" {count}</div>"#);
     }
 
     #[test]
     fn child_element_many_textual() {
         let formatted = format_element! { <div>"The current count is: " {count} ". Increment by one is this: " {count + 1}</div> };
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         <div>
             "The current count is: " {count}
             ". Increment by one is this: " {count + 1}
         </div>
-        "###);
+        "#);
     }
 
     #[test]
@@ -369,13 +369,13 @@ mod tests {
             </div>
         "#});
 
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         <div>
             <div class="foo">
                 <i class="bi-google"></i>
                 "Sign in with google"
             </div>
         </div>
-        "###);
+        "#);
     }
 }

formatter/src/formatter/expr.rs

@@ -157,15 +157,15 @@ mod tests {
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
             </div>"#};
 
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         <div>
             "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
         </div>
-        "###);
+        "#);
     }
 
     #[test]
@@ -174,9 +174,9 @@ mod tests {
                     "    foo"
             </div>"#};
 
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         <div>"    foo"</div>
-        "###);
+        "#);
     }
 
     #[test]
@@ -189,14 +189,91 @@ mod tests {
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
             </div>"#};
 
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         <div>
             "        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
         </div>
+        "#);
+    }
+
+    #[test]
+    fn multiline_raw_string_as_child() {
+        let formatted = format_element! {r#"<div>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </div>"#};
+
+        insta::assert_snapshot!(formatted, @r###"
+        <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
         "###);
     }
+
+    #[test]
+    fn test_raws() {
+        let formatted = format_element!(
+            r#"<div>
+        <div class=format!("grid grid-cols-4 gap-1 {extend_tw_classes}")>
+        <button
+            class="hover:bg-blue-300 bg-slate-400 mt-6 rounded-md border-cyan-500 border-2 drop-shadow-lg"
+            on:click=first
+        >
+              First
+        </button>
+
+        <button
+            class="hover:bg-blue-300 bg-slate-400 mt-6 rounded-md border-cyan-500 border-2 drop-shadow-lg"
+            on:click=previous
+        >
+              Previous
+        </button>
+
+        <button
+            class="hover:bg-blue-300 bg-slate-400 mt-6 rounded-md border-cyan-500 border-2 drop-shadow-lg"
+            on:click=next
+        >
+              Next
+        </button>
+        </div></div>"#
+        );
+
+        insta::assert_snapshot!(formatted, @r#"
+        <div>
+            <div class=format!(
+                "grid grid-cols-4 gap-1 {extend_tw_classes}"
+            )>
+                <button
+                    class="hover:bg-blue-300 bg-slate-400 mt-6 rounded-md border-cyan-500 border-2 drop-shadow-lg"
+                    on:click=first
+                >
+                    First
+                </button>
+                <button
+                    class="hover:bg-blue-300 bg-slate-400 mt-6 rounded-md border-cyan-500 border-2 drop-shadow-lg"
+                    on:click=previous
+                >
+                    Previous
+                </button>
+                <button
+                    class="hover:bg-blue-300 bg-slate-400 mt-6 rounded-md border-cyan-500 border-2 drop-shadow-lg"
+                    on:click=next
+                >
+                    Next
+                </button>
+            </div>
+        </div>
+        "#);
+    }
 }

formatter/src/formatter/fragment.rs

@@ -36,33 +36,33 @@ mod tests {
     #[test]
     fn fragment_child_element() {
         let formatted = format_fragment! { <><span>"hello"</span></> };
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         <>
             <span>"hello"</span>
         </>
-        "###);
+        "#);
     }
 
     #[test]
     fn fragment_child_element_single_textual() {
         let formatted = format_fragment! { <>"hello"</> };
-        insta::assert_snapshot!(formatted, @r###"<>"hello"</>"###);
+        insta::assert_snapshot!(formatted, @r#"<>"hello"</>"#);
     }
 
     #[test]
     fn fragment_child_element_two_textual() {
         let formatted = format_fragment! { <>"The count is" {count}</> };
-        insta::assert_snapshot!(formatted, @r###"<>"The count is" {count}</>"###);
+        insta::assert_snapshot!(formatted, @r#"<>"The count is" {count}</>"#);
     }
 
     #[test]
     fn fragment_child_element_many_textual() {
         let formatted = format_fragment! { <>"The current count is: " {count} ". Increment by one is this: " {count + 1}</> };
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         <>
             "The current count is: " {count}
             ". Increment by one is this: " {count + 1}
         </>
-        "###);
+        "#);
     }
 }

formatter/src/formatter/mac.rs

@@ -202,54 +202,54 @@ mod tests {
     #[test]
     fn one_liner() {
         let formatted = view_macro!(view! { cx, <div>"hi"</div> });
-        insta::assert_snapshot!(formatted, @r###"view! { cx, <div>"hi"</div> }"###);
+        insta::assert_snapshot!(formatted, @r#"view! { cx, <div>"hi"</div> }"#);
     }
 
     #[test]
     fn with_nested_nodes() {
         let formatted = view_macro!(view! { cx, <div><span>"hi"</span></div> });
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         view! { cx,
             <div>
                 <span>"hi"</span>
             </div>
         }
-        "###);
+        "#);
     }
 
     #[test]
     fn with_global_class() {
         let formatted = view_macro!(view! { cx, class = STYLE, <div><span>"hi"</span></div> });
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         view! { cx, class=STYLE,
             <div>
                 <span>"hi"</span>
             </div>
         }
-        "###);
+        "#);
     }
 
     #[test]
     fn no_reactive_scope() {
         let formatted = view_macro!(view! { <div><span>"hi"</span></div> });
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         view! {
             <div>
                 <span>"hi"</span>
             </div>
         }
-        "###);
+        "#);
     }
 
     #[test]
     fn no_reactive_scope_with_global_class() {
         let formatted = view_macro!(view! { class = STYLE, <div><span>"hi"</span></div> });
-        insta::assert_snapshot!(formatted, @r###"
+        insta::assert_snapshot!(formatted, @r#"
         view! { class=STYLE,
             <div>
                 <span>"hi"</span>
             </div>
         }
-        "###);
+        "#);
     }
 }