fix: balance indent signals on multi-level jumps in embedded tagged templates (#783)

Author: bartlomieju

src/generation/generate.rs

@@ -3087,12 +3087,13 @@ fn maybe_gen_tagged_tpl_with_external_formatter<'a>(node: &TaggedTpl<'a>, contex
     // count indent characters
     let mut pos = line.chars().take_while(|ch| *ch == indent_char).count();
     let indent_level = if indent_width == 0 { 0 } else { pos / indent_width as usize };
-    if indent_level > current_indent_level {
+    while indent_level > current_indent_level {
       items.push_signal(Signal::StartIndent);
-      current_indent_level = indent_level;
-    } else if indent_level < current_indent_level {
+      current_indent_level += 1;
+    }
+    while indent_level < current_indent_level {
       items.push_signal(Signal::FinishIndent);
-      current_indent_level = indent_level;
+      current_indent_level -= 1;
     }
     let mut parts = line[pos..].split(placeholder_text).enumerate().peekable();
     while let Some((i, part)) = parts.next() {

tests/specs/external_formatter/html.txt

@@ -49,3 +49,51 @@ export const Layout = (props: Props) =>
             </body>
         </html>
     `;
+
+== should format html with multi-level indent jumps (regression for deno#29963) ==
+const a = html`<a><svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
+  <path d="" />
+</svg></a>`;
+[expect]
+const a = html`
+    <a><svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
+            <path d="" />
+        </svg></a>
+`;
+
+== should format html with multi-level indent jumps and an expression placeholder ==
+const a = html`<a><svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
+  <path d="${pathData}" />
+</svg></a>`;
+[expect]
+const a = html`
+    <a><svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
+            <path d="${pathData}" />
+        </svg></a>
+`;
+
+== should format html with three-level indent jump in a single transition ==
+const a = html`<a><b><svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
+  <path d="" />
+</svg></b></a>`;
+[expect]
+const a = html`
+    <a><b><svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
+                <path d="" />
+            </svg></b></a>
+`;
+
+== should format html with multiple multi-level indent jumps in the same template ==
+const a = html`<a><svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
+  <path d="" />
+</svg><svg viewBox="0 0 32 32" width="30" height="30" fill="blue">
+  <circle r="5" />
+</svg></a>`;
+[expect]
+const a = html`
+    <a><svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
+            <path d="" />
+        </svg><svg viewBox="0 0 32 32" width="30" height="30" fill="blue">
+            <circle r="5" />
+        </svg></a>
+`;