Fix name clash in v-for directives (#136)

Author: berendkleinhaneveld

collagraph/sfc/compiler.py

@@ -675,8 +675,18 @@ def create_children(
                     if parent_node.tag and parent_node.tag[0].isupper():
                         attributes.append(ast_set_slot_name(el, "default"))
 
+            # Check if this tag is a loop variable (from v-for)
+            # Loop variables should not be treated as components
+            is_loop_variable = any(
+                child.tag in loop_vars
+                for loop_dict in list_names
+                for loop_vars in loop_dict.values()
+            )
+
             is_component = (
-                child.tag in names or child.tag[0].isupper() or "." in child.tag
+                (child.tag in names and not is_loop_variable)
+                or child.tag[0].isupper()
+                or "." in child.tag
             )
             result.append(
                 ast_create_fragment(

tests/test_directive_for.py

@@ -698,3 +698,32 @@ def on_button(self, value):
         handler()
 
     assert calls == ["first", "second"]
+
+
+def test_for_context_and_naming(parse_source):
+    """
+    Make sure that using a loop variable can have the same
+    name as an element.
+    """
+    Items, _ = parse_source(
+        """
+        <item
+          v-for="item in items"
+          :value="item['value']"
+        />
+        <script>
+        import collagraph as cg
+        class Items(cg.Component):
+            pass
+        </script>
+        """
+    )
+    state = reactive({"items": [{"value": "a"}, {"value": "b"}]})
+
+    gui = Collagraph(DictRenderer())
+    container = {"type": "root"}
+    gui.render(Items, container, state)
+
+    first_item, second_item = container["children"]
+    assert first_item["attrs"]["value"] == "a"
+    assert second_item["attrs"]["value"] == "b"