fix variable in context (#16)

Author: michael-yin

docs/source/slot.md

@@ -118,6 +118,21 @@ Notes:
 <a href="/">Post 2</a>
 ```
 
+Or you can use django for loop do this:
+
+```django
+{% component 'blog' as component %}
+    {% call blog_component.header %}
+        <a href="/">My Site</a>
+    {% endcall %}
+    {% for post in qs %}
+        {% call component.posts %}
+            <a href="/">{{ post.title }}</a>     
+        {% endcall %}
+    {% endfor %}
+{% endcomponent %}
+```
+
 ## Connect other component in the slot
 
 This is the **killer feature**, so please read it carefully.

src/django_viewcomponent/fields.py

@@ -5,11 +5,13 @@ class FieldValue:
     def __init__(
         self,
         nodelist,
+        field_context,
         dict_data: dict,
         component: None,
         parent_component=None,
     ):
         self._nodelist = nodelist
+        self._field_context = field_context
         self._dict_data = dict_data
         self._component = component
         self._parent_component = parent_component
@@ -48,7 +50,7 @@ def render(self):
             # self._component is Component class
             return self._render_for_component_cls(self._component)
         elif self._component is None:
-            return self._nodelist.render(self._parent_component.component_context)
+            return self._nodelist.render(self._field_context)
         else:
             raise ValueError(f"Invalid component variable {self._component}")
 
@@ -102,45 +104,40 @@ def filled(self):
     def required(self):
         return self._required
 
-    def handle_call(self, nodelist, **kwargs):
+    def handle_call(self, nodelist, context, **kwargs):
         raise NotImplementedError("You must implement the `handle_call` method.")
 
 
 class RendersOneField(BaseSlotField):
-    def handle_call(self, nodelist, **kwargs):
+    def handle_call(self, nodelist, context, **kwargs):
         value_instance = FieldValue(
             nodelist=nodelist,
+            field_context=context,
             dict_data={**kwargs},
             component=self._component,
             parent_component=self.parent_component,
         )
 
+        self._value = value_instance.render()
         self._filled = True
-        self._value = value_instance
 
 
 class FieldValueListWrapper:
-    """
-    This helps render FieldValue eagerly when component template has
-    {% for panel in self.panels.value %}, this can avoid issues if `panel` of the for loop statement
-    # override context variables in some cases.
-    """
-
     def __init__(self):
         self.data = []
 
     def append(self, value):
         self.data.append(value)
 
     def __iter__(self):
-        for field_value in self.data:
-            yield field_value.render()
+        yield from self.data
 
 
 class RendersManyField(BaseSlotField):
-    def handle_call(self, nodelist, **kwargs):
+    def handle_call(self, nodelist, context, **kwargs):
         value_instance = FieldValue(
             nodelist=nodelist,
+            field_context=context,
             dict_data={**kwargs},
             component=self._component,
             parent_component=self.parent_component,
@@ -149,5 +146,5 @@ def handle_call(self, nodelist, **kwargs):
         if self._value is None:
             self._value = FieldValueListWrapper()
 
-        self._value.append(value_instance)
+        self._value.append(value_instance.render())
         self._filled = True

src/django_viewcomponent/templatetags/viewcomponent_tags.py

@@ -75,6 +75,7 @@ def render(self, context):
             )
 
         resolved_kwargs["nodelist"] = self.nodelist
+        resolved_kwargs["context"] = context
 
         component_token, field_token = self.args[0].token.split(".")
         component_instance = FilterExpression(component_token, self.parser).resolve(

tests/test_render_field.py

@@ -10,12 +10,6 @@
 
 @pytest.mark.django_db
 class TestRenderFieldComponentContextLogic:
-    """
-    HeaderComponent.get_context_data add extra context data
-
-    We can still access the value via {{ site_name }}
-    """
-
     class HeaderComponent(component.Component):
         def __init__(self, classes, **kwargs):
             self.classes = classes
@@ -43,15 +37,19 @@ def __init__(self, post, **kwargs):
         """
 
     class BlogComponent(component.Component):
-        header = RendersOneField(required=True, component="header")
-        posts = RendersManyField(required=True, component="post")
+        header = RendersOneField(component="header")
+        posts = RendersManyField(component="post")
+        wrappers = RendersManyField()
 
         template = """
         {% load viewcomponent_tags %}
         {{ self.header.value }}
         {% for post in self.posts.value %}
           {{ post }}
         {% endfor %}
+        {% for wrapper in self.wrappers.value %}
+          {{ wrapper }}
+        {% endfor %}
         """
 
     @pytest.fixture(autouse=True)
@@ -61,6 +59,12 @@ def register_component(self):
         component.registry.register("post", self.PostComponent)
 
     def test_field_context_logic(self):
+        """
+        HeaderComponent.get_context_data add extra context data
+
+        We can still access the value via {{ site_name }}
+        """
+
         for i in range(5):
             title = f"test {i}"
             description = f"test {i}"
@@ -104,6 +108,56 @@ def test_field_context_logic(self):
         """
         assert_dom_equal(expected, rendered)
 
+    def test_field_context_logic_2(self):
+        """
+        can still concatenate the HTML manually and pass to slot field
+        """
+        for i in range(5):
+            title = f"test {i}"
+            description = f"test {i}"
+            Post.objects.create(title=title, description=description)
+
+        qs = Post.objects.all()
+
+        template = Template(
+            """
+            {% load viewcomponent_tags %}
+            {% component 'blog' as component %}
+                {% call component.header classes='text-lg' %}
+                    <a href="/"> {{ site_name }} </a>
+                {% endcall %}
+                {% for post in qs %}
+                    {% call component.wrappers %}
+                        <h1>{{ post.title }}</h1>
+                        <div>{{ post.description }}</div>
+                    {% endcall %}
+                {% endfor %}
+            {% endcomponent %}
+            """,
+        )
+        rendered = template.render(Context({"qs": qs}))
+        expected = """
+        <h1 class="text-lg">
+            <a href="/">My Site</a>
+        </h1>
+
+        <h1>test 0</h1>
+        <div>test 0</div>
+
+        <h1>test 1</h1>
+        <div>test 1</div>
+
+        <h1>test 2</h1>
+        <div>test 2</div>
+
+        <h1>test 3</h1>
+        <div>test 3</div>
+
+        <h1>test 4</h1>
+        <div>test 4</div>
+        """
+        assert_dom_equal(expected, rendered)
+
 
 @pytest.mark.django_db
 class TestRenderFieldComponentParameterString: