Handle arguments that get passed into a component. Clarify the use of __init__ vs mount in component views.

Author: adamghill

django_unicorn/call_method_parser.py

@@ -67,7 +67,7 @@ def _get_expr_string(expr: ast.expr) -> str:
 @lru_cache(maxsize=128, typed=True)
 def eval_value(value):
     """
-    Uses `ast.literal_eval` to parse strings into an appropriate Python primative.
+    Uses `ast.literal_eval` to parse strings into an appropriate Python primitive.
 
     Also returns an appropriate object for strings that look like they represent datetime,
     date, time, duration, or UUID.

django_unicorn/components/unicorn_view.py

@@ -4,7 +4,7 @@
 import pickle
 import sys
 from functools import lru_cache
-from typing import Any, Callable, Dict, List, Sequence, Tuple, Type
+from typing import Any, Callable, Dict, List, Optional, Sequence, Tuple, Type
 
 from django.apps import AppConfig
 from django.conf import settings
@@ -50,6 +50,17 @@
 constructed_views_cache = LRUCache(maxsize=100)
 COMPONENTS_MODULE_CACHE_ENABLED = "pytest" not in sys.modules
 
+STANDARD_COMPONENT_KWARG_KEYS = set(
+    [
+        "id",
+        "component_id",
+        "component_name",
+        "component_key",
+        "parent",
+        "request",
+    ]
+)
+
 
 def convert_to_snake_case(s: str) -> str:
     # TODO: Better handling of dash->snake
@@ -136,6 +147,7 @@ def construct_component(
     component_key,
     parent,
     request,
+    component_args,
     **kwargs,
 ):
     """
@@ -147,6 +159,7 @@ def construct_component(
         component_key=component_key,
         parent=parent,
         request=request,
+        component_args=component_args,
         **kwargs,
     )
 
@@ -166,8 +179,10 @@ class UnicornView(TemplateView):
     component_name: str = ""
     component_key: str = ""
     component_id: str = ""
+    component_args: List = None
+    component_kwargs: Dict = None
 
-    def __init__(self, **kwargs):
+    def __init__(self, component_args: Optional[List] = None, **kwargs):
         self.response_class = UnicornTemplateResponse
 
         self.component_name: str = ""
@@ -212,6 +227,14 @@ def __init__(self, **kwargs):
             if self.parent and self not in self.parent.children:
                 self.parent.children.append(self)
 
+        # Set component args
+        self.component_args = component_args if component_args is not None else []
+
+        # Only include custom kwargs since the standard kwargs are available
+        # as instance variables
+        custom_kwargs = set(kwargs.keys()) - STANDARD_COMPONENT_KWARG_KEYS
+        self.component_kwargs = {k: kwargs[k] for k in list(custom_kwargs)}
+
         self._init_script: str = ""
         self._validate_called = False
         self.errors = {}
@@ -371,25 +394,32 @@ def dispatch(self, request, *args, **kwargs):
         self.mount()
         self.hydrate()
 
-        self._cache_component(request, **kwargs)
+        self._cache_component(request, *args, **kwargs)
 
         return self.render_to_response(
             context=self.get_context_data(),
             component=self,
             init_js=True,
         )
 
-    def _cache_component(self, request: HttpRequest, parent=None, **kwargs):
+    def _cache_component(
+        self, request: HttpRequest, parent=None, component_args=None, **kwargs
+    ):
         """
-        Cache the component in the module and the Django cache. Re-set the `request` that got
-        removed to make the component cacheable.
+        Cache the component in the module and the Django cache. Re-set the `request`
+        that got removed to make the component cacheable.
         """
 
         # Put the location for the component name in a module cache
         location_cache[self.component_name] = (self.__module__, self.__class__.__name__)
 
         # Put the component's class in a module cache
-        views_cache[self.component_id] = (self.__class__, parent, kwargs)
+        views_cache[self.component_id] = (
+            self.__class__,
+            parent,
+            component_args,
+            kwargs,
+        )
 
         # Put the instantiated component into a module cache and the Django cache
         try:
@@ -732,6 +762,8 @@ def _is_public(self, name: str) -> bool:
             "call",
             "calls",
             "component_cache_key",
+            "component_kwargs",
+            "component_args",
         )
         excludes = []
 
@@ -764,7 +796,8 @@ def create(
         parent: "UnicornView" = None,
         request: HttpRequest = None,
         use_cache=True,
-        kwargs: Dict[str, Any] = {},
+        component_args: List = None,
+        kwargs: Dict[str, Any] = None,
     ) -> "UnicornView":
         """
         Find and instantiate a component class based on `component_name`.
@@ -776,6 +809,7 @@ def create(
             param component_key: Key of the component to allow multiple components of the same name
                 to be differentiated. Optional.
             param parent: The parent component of the current component.
+            param component_args: Arguments for the component passed in from the template. Defaults to `[]`.
             param kwargs: Keyword arguments for the component passed in from the template. Defaults to `{}`.
 
         Returns:
@@ -785,6 +819,9 @@ def create(
         assert component_id, "Component id is required"
         assert component_name, "Component name is required"
 
+        component_args = component_args if component_args is not None else []
+        kwargs = kwargs if kwargs is not None else {}
+
         @timed
         def _get_component_class(
             module_name: str, class_name: str
@@ -816,7 +853,9 @@ def _get_component_class(
             return cached_component
 
         if component_id in views_cache:
-            (component_class, parent, kwargs) = views_cache[component_id]
+            (component_class, parent, component_args, kwargs) = views_cache[
+                component_id
+            ]
 
             component = construct_component(
                 component_class=component_class,
@@ -825,6 +864,7 @@ def _get_component_class(
                 component_key=component_key,
                 parent=parent,
                 request=request,
+                component_args=component_args,
                 **kwargs,
             )
             logger.debug(f"Retrieve {component_id} from views cache")
@@ -841,20 +881,24 @@ def _get_component_class(
         class_name_not_found = None
         attribute_exception = None
 
-        for (module_name, class_name) in locations:
+        for module_name, class_name in locations:
             try:
                 component_class = _get_component_class(module_name, class_name)
+
                 component = construct_component(
                     component_class=component_class,
                     component_id=component_id,
                     component_name=component_name,
                     component_key=component_key,
                     parent=parent,
                     request=request,
+                    component_args=component_args,
                     **kwargs,
                 )
 
-                component._cache_component(request, parent, **kwargs)
+                component._cache_component(
+                    request, parent=parent, component_args=component_args, **kwargs
+                )
 
                 return component
             except ModuleNotFoundError as e:

django_unicorn/templatetags/unicorn.py

@@ -1,4 +1,4 @@
-from typing import Dict
+from typing import Dict, List
 
 from django import template
 from django.conf import settings
@@ -50,22 +50,28 @@ def unicorn(parser, token):
 
     component_name = parser.compile_filter(contents[1])
 
+    args = []
     kwargs = {}
 
     for arg in contents[2:]:
         try:
-            kwarg = parse_kwarg(arg)
-            kwargs.update(kwarg)
+            parsed_kwarg = parse_kwarg(arg)
+            kwargs.update(parsed_kwarg)
         except InvalidKwarg:
-            pass
+            # Assume it's an arg if invalid kwarg and kwargs is empty
+            if not kwargs:
+                args.append(arg)
 
-    return UnicornNode(component_name, kwargs)
+    return UnicornNode(component_name, args, kwargs)
 
 
 class UnicornNode(template.Node):
-    def __init__(self, component_name: FilterExpression, kwargs: Dict = {}):
+    def __init__(
+        self, component_name: FilterExpression, args: List = None, kwargs: Dict = None
+    ):
         self.component_name = component_name
-        self.kwargs = kwargs
+        self.args = args if args is not None else []
+        self.kwargs = kwargs if kwargs is not None else {}
         self.component_key = ""
         self.parent = None
 
@@ -75,10 +81,16 @@ def render(self, context):
         if hasattr(context, "request"):
             request = context.request
 
-        resolved_kwargs = {}
-
         from ..components import UnicornView
 
+        resolved_args = []
+
+        for value in self.args:
+            resolved_arg = template.Variable(value).resolve(context)
+            resolved_args.append(resolved_arg)
+
+        resolved_kwargs = {}
+
         for key, value in self.kwargs.items():
             try:
                 resolved_value = template.Variable(value).resolve(context)
@@ -178,8 +190,9 @@ def render(self, context):
             component_name=component_name,
             component_key=self.component_key,
             parent=self.parent,
-            kwargs=resolved_kwargs,
             request=request,
+            component_args=resolved_args,
+            kwargs=resolved_kwargs,
         )
 
         extra_context = {}

docs/source/advanced.md

@@ -16,21 +16,56 @@ class HelloWorldView(UnicornView):
 
 ## Instance properties
 
+### component_args
+
+The arguments passed into the component.
+
+```html
+<!-- index.html -->
+{% unicorn 'hello-arg' 'World' %}
+```
+
+```python
+# hello_arg.py
+from django_unicorn.components import UnicornView
+
+class HelloArgView(UnicornView):
+    def mount(self):
+      assert self.component_args[0] == "World"
+```
+
+### component_kwargs
+
+The keyword arguments passed into the component.
+
+```html
+<!-- index.html -->
+{% unicorn 'hello-kwarg' hello='World' %}
+```
+
+```python
+# hello_kwarg.py
+from django_unicorn.components import UnicornView
+
+class HelloKwargView(UnicornView):
+    def mount(self):
+      assert self.component_kwargs["hello"] == "World"
+```
+
 ### request
 
-The current `request` is available on `self` in the component's methods.
+The current `request`.
 
 ```python
 # hello_world.py
 from django_unicorn.components import UnicornView
 
 class HelloWorldView(UnicornView):
-    def __init__(self, *args, **kwargs):
-        super.__init__(**kwargs)
+    def mount(self):
         print("Initial request that rendered the component", self.request)
 
     def test(self):
-        print("callMethod request to re-render the component", self.request)
+        print("AJAX request that re-renders the component", self.request)
 ```
 
 ## Custom methods
@@ -76,22 +111,6 @@ class StateView(UnicornView):
 
 ## Instance methods
 
-### \_\_init\_\_()
-
-Gets called when the component gets constructed for the very first time. Note that constructed components get cached to reduce the amount of time discovering and instantiating them, so `__init__` only gets called the very first time the component gets rendered.
-
-```python
-# hello_world.py
-from django_unicorn.components import UnicornView
-
-class HelloWorldView(UnicornView):
-    name = "original"
-
-    def __init__(self, *args, **kwargs):
-        super().__init__(**kwargs)
-        self.name = "initialized"
-```
-
 ### mount()
 
 Gets called when the component gets initialized or [reset](actions.md#reset).

tests/templates/test_component_args.html

@@ -0,0 +1,3 @@
+<div>
+  <b>{{ hello }}</b>
+</div>