Feature/polymorphic (#17)

Author: michael-yin

docs/source/slot.md

@@ -394,3 +394,36 @@ class BlogComponent(component.Component):
         {% endfor %}
         """
 ```
+
+
+## Polymorphic slots
+
+Polymorphic slots can render one of several possible slots.
+
+For example, consider this list item component that can be rendered with either an icon or an avatar. 
+
+```python
+class ListItemComponent(component.Component):
+    item = RendersOneField(
+        types={
+            "avatar": AvatarComponent,
+            "icon": lambda key, **kwargs: IconComponent(key=key),
+        },
+    )
+```
+
+The values in `types` can be the same as `component` argument in `RendersOneField`, it can be a string, a class, a function
+
+Filling the slot is done calling `{field}_{type}`, please note the `type` key is set as `suffix` to the slot field.
+
+```django
+{% load viewcomponent_tags %}
+
+{% component 'list_item' as component %}
+    {% call component.item_avatar alt='username' src='http://some-site.com/my_avatar.jpg' %}{% endcall %}
+{% endcomponent %}
+
+{% component 'list_item' as component %}
+    {% call component.item_icon key='arrow-down' %}{% endcall %}
+{% endcomponent %}
+```

pyproject.toml

@@ -61,6 +61,7 @@ lint.ignore = [
     "SIM118",
     "UP031",
     "PT011",
+    "PLR0913",
 ]
 lint.select = ["ALL"]
 exclude = ["migrations"]

src/django_viewcomponent/fields.py

@@ -6,12 +6,16 @@ def __init__(
         self,
         nodelist,
         field_context,
+        polymorphic_type,
+        polymorphic_types,
         dict_data: dict,
         component: None,
         parent_component=None,
     ):
         self._nodelist = nodelist
         self._field_context = field_context
+        self._polymorphic_type = polymorphic_type
+        self._polymorphic_types = polymorphic_types
         self._dict_data = dict_data
         self._component = component
         self._parent_component = parent_component
@@ -20,17 +24,27 @@ def __str__(self):
         return self.render()
 
     def render(self):
+        if self._polymorphic_types:
+            component_expression = self._polymorphic_types[self._polymorphic_type]
+            return self._render(component_expression)
+        else:
+            component_expression = self._component
+            return self._render(component_expression)
+
+    def _render(self, target):
         from django_viewcomponent.component import Component
 
-        if isinstance(self._component, str):
+        if isinstance(target, str):
             return self._render_for_component_cls(
-                component_registry.get(self._component),
+                component_registry.get(target),
             )
-        elif not isinstance(self._component, type) and callable(self._component):
-            # self._component is function
-            callable_component = self._component
+        elif not isinstance(target, type) and callable(target):
+            # target is function
+            callable_component = target
+            content = self._nodelist.render(self._field_context)
             result = callable_component(
                 self=self._parent_component,
+                content=content,
                 **self._dict_data,
             )
 
@@ -43,16 +57,16 @@ def render(self):
                 raise ValueError(
                     f"Callable slot component must return str or Component instance. Got {result}",
                 )
-        elif isinstance(self._component, type) and issubclass(
-            self._component,
+        elif isinstance(target, type) and issubclass(
+            target,
             Component,
         ):
-            # self._component is Component class
-            return self._render_for_component_cls(self._component)
-        elif self._component is None:
+            # target is Component class
+            return self._render_for_component_cls(target)
+        elif target is None:
             return self._nodelist.render(self._field_context)
         else:
-            raise ValueError(f"Invalid component variable {self._component}")
+            raise ValueError(f"Invalid component variable {target}")
 
     def _render_for_component_cls(self, component_cls):
         component = component_cls(
@@ -62,29 +76,31 @@ def _render_for_component_cls(self, component_cls):
         return self._render_for_component_instance(component)
 
     def _render_for_component_instance(self, component):
-        component.component_context = self._parent_component.component_context
+        component.component_context = self._field_context
 
         with component.component_context.push():
-            updated_context = component.get_context_data()
-
             # create slot fields
             component.create_slot_fields()
 
-            component.content = self._nodelist.render(updated_context)
+            # render content first
+            component.content = self._nodelist.render(component.component_context)
 
             component.check_slot_fields()
 
+            updated_context = component.get_context_data()
+
             return component.render(updated_context)
 
 
 class BaseSlotField:
     parent_component = None
 
-    def __init__(self, value=None, required=False, component=None, **kwargs):
-        self._value = value
+    def __init__(self, required=False, component=None, types=None, **kwargs):
+        self._value = None
         self._filled = False
         self._required = required
         self._component = component
+        self._types = types
 
     @classmethod
     def initialize_fields(cls):
@@ -104,15 +120,21 @@ def filled(self):
     def required(self):
         return self._required
 
-    def handle_call(self, nodelist, context, **kwargs):
+    @property
+    def types(self):
+        return self._types
+
+    def handle_call(self, nodelist, context, polymorphic_type, **kwargs):
         raise NotImplementedError("You must implement the `handle_call` method.")
 
 
 class RendersOneField(BaseSlotField):
-    def handle_call(self, nodelist, context, **kwargs):
+    def handle_call(self, nodelist, context, polymorphic_type, **kwargs):
         value_instance = FieldValue(
             nodelist=nodelist,
             field_context=context,
+            polymorphic_type=polymorphic_type,
+            polymorphic_types=self.types,
             dict_data={**kwargs},
             component=self._component,
             parent_component=self.parent_component,
@@ -134,10 +156,12 @@ def __iter__(self):
 
 
 class RendersManyField(BaseSlotField):
-    def handle_call(self, nodelist, context, **kwargs):
+    def handle_call(self, nodelist, context, polymorphic_type, **kwargs):
         value_instance = FieldValue(
             nodelist=nodelist,
             field_context=context,
+            polymorphic_type=polymorphic_type,
+            polymorphic_types=self.types,
             dict_data={**kwargs},
             component=self._component,
             parent_component=self.parent_component,

src/django_viewcomponent/templatetags/viewcomponent_tags.py

@@ -84,15 +84,29 @@ def render(self, context):
         if not component_instance:
             raise ValueError(f"Component {component_token} not found in context")
 
-        field = getattr(component_instance, field_token, None)
-        if not field:
+        available_slot_fields_map = {}
+        # iterate all attributes of the component instance and add the BaseSlotField to the list
+        for field_name in dir(component_instance):
+            field = getattr(component_instance, field_name)
+            if isinstance(field, BaseSlotField):
+                types = field.types
+                if types:
+                    for polymorphic_type in types:
+                        available_slot_fields_map[
+                            f"{field_name}_{polymorphic_type}"
+                        ] = [field, polymorphic_type]
+                else:
+                    available_slot_fields_map[field_name] = [field, None]
+
+        if field_token not in available_slot_fields_map:
             raise ValueError(
                 f"Field {field_token} not found in component {component_token}",
             )
 
-        if isinstance(field, BaseSlotField):
-            # call field
-            return field.handle_call(**resolved_kwargs) or ""
+        field, polymorphic_type = available_slot_fields_map[field_token]
+        resolved_kwargs["polymorphic_type"] = polymorphic_type
+
+        return field.handle_call(**resolved_kwargs) or ""
 
 
 class ComponentNode(Node):

tests/test_render_field.py

@@ -21,7 +21,7 @@ def get_context_data(self):
 
         template = """
             <h1 class="{{ self.classes }}">
-              {{ self.content }}
+                <a href="/"> {{ site_name }} </a>
             </h1>
         """
 
@@ -76,9 +76,7 @@ def test_field_context_logic(self):
             """
             {% load viewcomponent_tags %}
             {% component 'blog' as component %}
-                {% call component.header classes='text-lg' %}
-                    <a href="/"> {{ site_name }} </a>
-                {% endcall %}
+                {% call component.header classes='text-lg' %}{% endcall %}
                 {% for post in qs %}
                     {% call component.posts post=post %}{% endcall %}
                 {% endfor %}
@@ -123,9 +121,7 @@ def test_field_context_logic_2(self):
             """
             {% load viewcomponent_tags %}
             {% component 'blog' as component %}
-                {% call component.header classes='text-lg' %}
-                    <a href="/"> {{ site_name }} </a>
-                {% endcall %}
+                {% call component.header classes='text-lg' %}{% endcall %}
                 {% for post in qs %}
                     {% call component.wrappers %}
                         <h1>{{ post.title }}</h1>
@@ -518,3 +514,60 @@ def test_field_component_parameter(self):
         <div>test 4</div>
         """
         assert_dom_equal(expected, rendered)
+
+
+@pytest.mark.django_db
+class TestRenderFieldTypes:
+    """
+    Polymorphic slots
+    """
+
+    class AvatarComponent(component.Component):
+        def __init__(self, src, alt, **kwargs):
+            self.src = src
+            self.alt = alt
+
+        template = """
+            <img src="{{ self.src }}" alt="{{ self.alt }}">
+        """
+
+    class ListItemComponent(component.Component):
+        item = RendersOneField(
+            required=True,
+            types={
+                "avatar": "avatar",
+                "span": lambda content, **kwargs: mark_safe(f"<span>{content}</span>"),
+            },
+        )
+
+        template = """
+            <li>{{ self.item.value }}</li>
+        """
+
+    @pytest.fixture(autouse=True)
+    def register_component(self):
+        component.registry.register("list_item", self.ListItemComponent)
+        component.registry.register("avatar", self.AvatarComponent)
+
+    def test_field_component_parameter(self):
+        template = Template(
+            """
+            {% load viewcomponent_tags %}
+            {% component 'list_item' as component %}
+                {% call component.item_avatar alt='username' src='http://some-site.com/my_avatar.jpg' %}{% endcall %}
+            {% endcomponent %}
+            {% component 'list_item' as component %}
+                {% call component.item_span %}username{% endcall %}
+            {% endcomponent %}
+            """,
+        )
+        rendered = template.render(Context({}))
+        expected = """
+        <li>
+            <img src="http://some-site.com/my_avatar.jpg" alt="username">
+        </li>
+        <li>
+            <span>username</span>
+        </li>
+        """
+        assert_dom_equal(expected, rendered)