Add formatting for v-for expressions

Author: berendkleinhaneveld

ruff_cgx/template_formatter.py

@@ -64,7 +64,48 @@ def format_python_expression(expr: str) -> str:
         return expr
 
 
-def format_template(template_node):
+def format_list_expression(expr: str) -> str:
+    """
+    Format a Python list expression (v-for syntax) using ruff with single quotes.
+
+    The v-for syntax is: "item in items" or "(item, index) in items"
+    We need to format both the target and iterable parts separately.
+
+    Args:
+        expr: The list expression as a string (e.g., "item in items")
+
+    Returns:
+        Formatted expression as a string (using single quotes)
+    """
+    if not expr or not expr.strip():
+        return expr
+
+    try:
+        expr = expr.strip()
+
+        # Split on ' in ' to separate target from iterable
+        # We use the first occurrence to handle cases where
+        # 'in' might appear in the iterable
+        parts = expr.split(" in ", 1)
+
+        if len(parts) != 2:
+            # If no ' in ' found, return as-is (malformed v-for expression)
+            return expr
+
+        target, iterable = parts
+
+        # Format each part using format_python_expression
+        formatted_target = format_python_expression(target.strip())
+        formatted_iterable = format_python_expression(iterable.strip())
+
+        return f"{formatted_target} in {formatted_iterable}"
+
+    except Exception as e:
+        logger.debug(f"Could not format list expression '{expr}': {e}")
+        return expr
+
+
+def format_template(template_node) -> tuple[list[str], tuple[int, int]]:
     """
     Returns formatted node and the original location of the template node
     """
@@ -130,16 +171,17 @@ def format_attribute(key, value):
     # Format Python expressions in bindings, events, and directives
     if key.startswith((":", "@", "v-")) and isinstance(value, str) and value.strip():
         value = value.strip()
-        # For v-for, don't format as it has special syntax
-        # For v-slot, don't format as it has special syntax
-        if not key.startswith(("v-for", "v-slot", "#")):
+        if key.startswith("v-for"):
+            formatted_value = format_list_expression(value)
+            return f'{key}="{formatted_value}"'
+        else:
             formatted_value = format_python_expression(value)
             return f'{key}="{formatted_value}"'
 
     return f'{key}="{value}"'
 
 
-def format_node(node, depth):
+def format_node(node, depth: int) -> list[str]:
     result = []
     indent = depth * INDENT
 

tests/data/template.cgx

@@ -6,7 +6,7 @@
 	@example="hai" :attr="10"
 	   blaat="True"
 	attribute />
-	<nested>
+	<nested  #header  >
 		<attrs
 			key3="fda"
 			key0="blasd"
@@ -35,7 +35,7 @@ comment
  	v-else>
  	<!-- Some comment here -->
  </toet>
- <item> 	With text content <!--toet --> bloeb</item>
+ <item  v-slot:footer > 	With text content <!--toet --> bloeb</item>
     </root>
 </template>
 

tests/test_formatter_cli.py

@@ -51,7 +51,7 @@ def test_format_template(capsys, data_path):
                   blaat="True"
                   @example="hai"
                 />
-                <nested>
+                <nested #header>
                   <attrs
                     key0="blasd"
                     :key1="'asdf'"
@@ -83,7 +83,7 @@ def test_format_template(capsys, data_path):
                 <toet v-else>
                   <!-- Some comment here -->
                 </toet>
-                <item>
+                <item v-slot:footer>
                   With text content
                   <!--toet -->
                   bloeb

tests/test_formatter_template.py

@@ -118,3 +118,7 @@ def test_format_attribute_with_expression():
     # v-if directive with expression
     result = format_attribute("v-if", "counter==0")
     assert result == 'v-if="counter == 0"'
+
+    # v-for directive with expression
+    result = format_attribute("v-for", " it  in  enumerate( items, start = 0 ) ")
+    assert result == 'v-for="it in enumerate(items, start=0)"'