Fix formatting of multi-line expressions in template

Author: berendkleinhaneveld

ruff_cgx/template_formatter.py

@@ -1,4 +1,5 @@
 import logging
+import textwrap
 
 from collagraph.sfc.parser import Comment, TextElement
 
@@ -156,7 +157,7 @@ def sort_attr(attr):
     return f"{len(SORTING)}{attr}"
 
 
-def format_attribute(key, value):
+def format_attribute(key, value, indent="", single_attribute=True):
     """
     Format an attribute key-value pair.
 
@@ -176,6 +177,9 @@ def format_attribute(key, value):
             return f'{key}="{formatted_value}"'
         else:
             formatted_value = format_python_expression(value)
+            formatted_value = textwrap.indent(
+                formatted_value, indent + ("" if single_attribute else INDENT)
+            ).lstrip()
             return f'{key}="{formatted_value}"'
 
     return f'{key}="{value}"'
@@ -194,12 +198,14 @@ def format_node(node, depth: int) -> list[str]:
         if node.attrs:
             if len(node.attrs) == 1:
                 key, val = next(iter(node.attrs.items()))
-                attr = format_attribute(key, val)
+                attr = format_attribute(key, val, indent, single_attribute=True)
                 start = f"{start} {attr}"
             else:
                 attrs = []
                 for key in sorted(node.attrs, key=sort_attr):
-                    attr = format_attribute(key, node.attrs[key])
+                    attr = format_attribute(
+                        key, node.attrs[key], indent, single_attribute=False
+                    )
                     attrs.append(f"{indent}{INDENT}{attr}")
 
                 start = "\n".join([start, *attrs])

ruff_cgx/utils.py

@@ -291,7 +291,8 @@ def run_ruff_format(
         if use_single_quotes:
             config_file = Path(directory) / "ruff.toml"
             config_file.write_text(
-                '[format]\nquote-style = "single"\n', encoding="utf-8"
+                'indent-width = 2\n[format]\nquote-style = "single"\n',
+                encoding="utf-8",
             )
             ruff_command.extend(["--config", str(config_file)])
 

tests/test_formatter.py

@@ -678,3 +678,95 @@ class Meta(cg.Component):
     ).lstrip()
 
     assert formatted == expected
+
+
+def test_format_multiline_dict_template():
+    content = textwrap.dedent(
+        """
+        <template>
+        <item :value="{'foo': 'foo', 'bar': 'bar', 'test': some_really_long_name_such_that_it_should_wrap()}" />
+        </template>
+
+        <script>
+        import collagraph as cg
+
+
+        class Test(cg.Component):
+            def some_really_long_name_such_that_it_should_wrap(self):
+                return 2
+        </script>
+        """
+    ).lstrip()
+
+    formatted = format_cgx_content(content)
+    expected = textwrap.dedent(
+        """
+        <template>
+          <item :value="{
+            'foo': 'foo',
+            'bar': 'bar',
+            'test': some_really_long_name_such_that_it_should_wrap(),
+          }" />
+        </template>
+
+        <script>
+        import collagraph as cg
+
+
+        class Test(cg.Component):
+            def some_really_long_name_such_that_it_should_wrap(self):
+                return 2
+        </script>
+        """
+    ).lstrip()
+
+    assert formatted == expected
+
+
+def test_format_multiline_dict_template_multi_attrs():
+    content = textwrap.dedent(
+        """
+        <template>
+          <wrapper>
+            <item :value="{'foo': 'foo','bar': 'bar','test':'some_really_long_name_such_that_it_should_wrap'}" :foo="foo" :bar="bar" />
+          </wrapper>
+        </template>
+
+        <script>
+        import collagraph as cg
+
+
+        class Item(cg.Component):
+            pass
+        </script>
+        """
+    ).lstrip()
+
+    formatted = format_cgx_content(content)
+    expected = textwrap.dedent(
+        """
+        <template>
+          <wrapper>
+            <item
+              :bar="bar"
+              :foo="foo"
+              :value="{
+                'foo': 'foo',
+                'bar': 'bar',
+                'test': 'some_really_long_name_such_that_it_should_wrap',
+              }"
+            />
+          </wrapper>
+        </template>
+
+        <script>
+        import collagraph as cg
+
+
+        class Item(cg.Component):
+            pass
+        </script>
+        """
+    ).lstrip()
+
+    assert formatted == expected