Nested children past the first level

.gitignore

@@ -109,6 +109,9 @@ venv.bak/
 pip-wheel-metadata
 TODO.md
 
+# pycharm
+.idea/
+
 node_modules/
 tags
 staticfiles/

django_unicorn/components/unicorn_template_response.py

@@ -152,12 +152,16 @@ def render(self):
                 self.component._init_script = init_script
                 self.component._json_tag = json_tag
             else:
-                json_tags = []
-                json_tags.append(json_tag)
-
-                for child in self.component.children:
-                    init_script = f"{init_script} {child._init_script}"
-                    json_tags.append(child._json_tag)
+                json_tags = [json_tag]
+
+                descendants = []
+                descendants.append(self.component)
+                while descendants:
+                    descendant = descendants.pop()
+                    for child in descendant.children:
+                        init_script = f"{init_script} {child._init_script}"
+                        json_tags.append(child._json_tag)
+                        descendants.append(child)
 
                 script_tag = soup.new_tag("script")
                 script_tag["type"] = "module"

django_unicorn/components/unicorn_view.py

@@ -28,7 +28,7 @@
     UnicornCacheError,
 )
 from ..settings import get_setting
-from ..utils import get_cacheable_component, is_non_string_sequence
+from ..utils import CacheableComponent, is_non_string_sequence
 from .fields import UnicornField
 from .unicorn_template_response import UnicornTemplateResponse
 
@@ -166,26 +166,35 @@ def construct_component(
 
 
 class UnicornView(TemplateView):
-    response_class = UnicornTemplateResponse
+    # These class variables are required to set these via kwargs
     component_name: str = ""
     component_key: str = ""
     component_id: str = ""
-    request = None
-    parent = None
-    children = []
 
-    # Caches to reduce the amount of time introspecting the class
-    _methods_cache: Dict[str, Callable] = {}
-    _attribute_names_cache: List[str] = []
-    _hook_methods_cache: List[str] = []
+    def __init__(self, **kwargs):
+        self.response_class = UnicornTemplateResponse
 
-    # Dictionary with key: attribute name; value: pickled attribute value
-    _resettable_attributes_cache: Dict[str, Any] = {}
+        self.component_name: str = ""
+        self.component_key: str = ""
+        self.component_id: str = ""
 
-    # JavaScript method calls
-    calls = []
+        # Without these instance variables calling UnicornView() outside the
+        # Django view/template logic (i.e. in unit tests) results in odd results.
+        self.request: HttpRequest = None
+        self.parent: UnicornView = None
+        self.children: List[UnicornView] = []
+
+        # Caches to reduce the amount of time introspecting the class
+        self._methods_cache: Dict[str, Callable] = {}
+        self._attribute_names_cache: List[str] = []
+        self._hook_methods_cache: List[str] = []
+
+        # Dictionary with key: attribute name; value: pickled attribute value
+        self._resettable_attributes_cache: Dict[str, Any] = {}
+
+        # JavaScript method calls
+        self.calls = []
 
-    def __init__(self, **kwargs):
         super().__init__(**kwargs)
 
         assert self.component_name, "Component name is required"
@@ -395,27 +404,17 @@ def _cache_component(self, request: HttpRequest, parent=None, **kwargs):
         # Put the component's class in a module cache
         views_cache[self.component_id] = (self.__class__, parent, kwargs)
 
-        cacheable_component = None
-
         # Put the instantiated component into a module cache and the Django cache
         try:
-            cacheable_component = get_cacheable_component(self)
+            with CacheableComponent(self):
+                if COMPONENTS_MODULE_CACHE_ENABLED:
+                    constructed_views_cache[self.component_id] = self
+
+                cache = caches[get_cache_alias()]
+                cache.set(self.component_cache_key, self)
         except UnicornCacheError as e:
             logger.warning(e)
 
-        if cacheable_component:
-            if COMPONENTS_MODULE_CACHE_ENABLED:
-                constructed_views_cache[self.component_id] = cacheable_component
-
-            cache = caches[get_cache_alias()]
-            cache.set(cacheable_component.component_cache_key, cacheable_component)
-
-        # Re-set `request` on the component that got removed when making it cacheable
-        self.request = request
-
-        for child in self.children:
-            child.request = request
-
     @timed
     def get_frontend_context_variables(self) -> str:
         """
@@ -509,6 +508,7 @@ def get_context_data(self, **kwargs):
                     "component_id": self.component_id,
                     "component_name": self.component_name,
                     "component_key": self.component_key,
+                    "component": self,
                     "errors": self.errors,
                 }
             }

django_unicorn/static/unicorn/js/component.js

@@ -259,7 +259,7 @@ export class Component {
       } else {
         // Can hard-code `forceModelUpdate` to `true` since it is always required for
         // `callMethod` actions
-        this.setModelValues(triggeringElements, true);
+        this.setModelValues(triggeringElements, true, true);
       }
     });
   }
@@ -448,9 +448,10 @@ export class Component {
    * Sets all model values.
    * @param {[Element]} triggeringElements The elements that triggered the event.
    */
-  setModelValues(triggeringElements, forceModelUpdates) {
+  setModelValues(triggeringElements, forceModelUpdates, updateParents) {
     triggeringElements = triggeringElements || [];
     forceModelUpdates = forceModelUpdates || false;
+    updateParents = updateParents || false;
 
     let lastTriggeringElement = null;
 
@@ -490,6 +491,13 @@ export class Component {
         this.setValue(element);
       }
     });
+
+    if (updateParents) {
+      const parent = this.getParentComponent();
+      if (parent) {
+        parent.setModelValues(triggeringElements, forceModelUpdates, updateParents);
+      }
+    }
   }
 
   /**

django_unicorn/static/unicorn/js/eventListeners.js

@@ -287,7 +287,7 @@ export function addModelEventListener(component, element, eventType) {
             triggeringElements.push(element);
           }
 
-          component.setModelValues(triggeringElements, forceModelUpdate);
+          component.setModelValues(triggeringElements, forceModelUpdate, true);
         }
       }
     );

django_unicorn/static/unicorn/js/messageSender.js

@@ -135,7 +135,7 @@ export function send(component, callback) {
       component.return = responseJson.return || {};
       component.hash = responseJson.hash;
 
-      const parent = responseJson.parent || {};
+      let parent = responseJson.parent || {};
       const rerenderedComponent = responseJson.dom || {};
       const partials = responseJson.partials || [];
       const { checksum } = responseJson;
@@ -160,7 +160,7 @@ export function send(component, callback) {
       }
 
       // Refresh the parent component if there is one
-      if (hasValue(parent) && hasValue(parent.id)) {
+      while (hasValue(parent) && hasValue(parent.id)) {
         const parentComponent = component.getParentComponent(parent.id);
 
         if (parentComponent && parentComponent.id === parent.id) {
@@ -193,6 +193,7 @@ export function send(component, callback) {
             child.refreshEventListeners();
           });
         }
+        parent = parent.parent || {};
       }
 
       if (partials.length > 0) {

django_unicorn/templatetags/unicorn.py

@@ -120,6 +120,17 @@ def render(self, context):
 
         if "parent" in resolved_kwargs:
             self.parent = resolved_kwargs.pop("parent")
+        else:
+            # if there is no explicit parent, but this node is rendering under an existing
+            # unicorn template, set that as the parent
+            try:
+                implicit_parent = template.Variable("unicorn.component").resolve(
+                    context
+                )
+                if implicit_parent:
+                    self.parent = implicit_parent
+            except template.VariableDoesNotExist:
+                pass  # no implicit parent present
 
         component_id = None
 

django_unicorn/utils.py

@@ -72,33 +72,55 @@ def dicts_equal(dictionary_one: Dict, dictionary_two: Dict) -> bool:
     return is_valid
 
 
-def get_cacheable_component(
-    component: "django_unicorn.views.UnicornView",
-) -> "django_unicorn.views.UnicornView":
+class CacheableComponent:
     """
-    Converts a component into something that is cacheable/pickleable.
+    Updates a component into something that is cacheable/pickleable. Use in a `with` statement
+    or explicitly call `__enter__` `__exit__` to use. It will restore the original component
+    on exit.
     """
 
-    component.request = None
-
-    if component.extra_context:
-        component.extra_context = None
-
-    if component.parent:
-        component.parent = get_cacheable_component(component.parent)
-
-    for child in component.children:
-        if child.request is not None:
-            child = get_cacheable_component(child)
-
-    try:
-        pickle.dumps(component)
-    except (TypeError, AttributeError, NotImplementedError, pickle.PicklingError) as e:
-        raise UnicornCacheError(
-            f"Cannot cache component '{type(component)}' because it is not picklable: {type(e)}: {e}"
-        ) from e
-
-    return component
+    def __init__(self, component: "django_unicorn.views.UnicornView"):
+        self._state = {}
+        self.cacheable_component = component
+
+    def __enter__(self):
+        components = []
+        components.append(self.cacheable_component)
+        while components:
+            component = components.pop()
+            if component.component_id in self._state:
+                continue
+            if hasattr(component, "extra_context"):
+                extra_context = component.extra_context
+                component.extra_context = None
+            else:
+                extra_context = None
+            request = component.request
+            component.request = None
+            self._state[component.component_id] = (component, request, extra_context)
+            if component.parent:
+                components.append(component.parent)
+            for child in component.children:
+                components.append(child)
+
+        for component, _, _ in self._state.values():
+            try:
+                pickle.dumps(component)
+            except (
+                TypeError,
+                AttributeError,
+                NotImplementedError,
+                pickle.PicklingError,
+            ) as e:
+                raise UnicornCacheError(
+                    f"Cannot cache component '{type(component)}' because it is not picklable: {type(e)}: {e}"
+                ) from e
+
+    def __exit__(self, *args):
+        for component, request, extra_context in self._state.values():
+            component.request = request
+            if extra_context:
+                component.extra_context = extra_context
 
 
 def get_type_hints(obj) -> Dict:

django_unicorn/views/__init__.py

@@ -24,7 +24,7 @@
     get_serial_enabled,
     get_serial_timeout,
 )
-from django_unicorn.utils import generate_checksum, get_cacheable_component
+from django_unicorn.utils import CacheableComponent, generate_checksum
 from django_unicorn.views.action_parsers import call_method, sync_input
 from django_unicorn.views.objects import ComponentRequest
 from django_unicorn.views.utils import set_property_from_data
@@ -207,7 +207,8 @@ def _process_component_request(
     cache = caches[get_cache_alias()]
 
     try:
-        cache.set(component.component_cache_key, get_cacheable_component(component))
+        with CacheableComponent(component):
+            cache.set(component.component_cache_key, component)
     except UnicornCacheError as e:
         logger.warning(e)
 
@@ -307,8 +308,9 @@ def _process_component_request(
             )
 
     parent_component = component.parent
+    parent_res = res
 
-    if parent_component:
+    while parent_component:
         # TODO: Should parent_component.hydrate() be called?
         parent_frontend_context_variables = loads(
             parent_component.get_frontend_context_variables()
@@ -325,10 +327,12 @@ def _process_component_request(
             component.parent_rendered(parent_dom)
 
             try:
-                cache.set(
-                    parent_component.component_cache_key,
-                    get_cacheable_component(parent_component),
-                )
+
+                with CacheableComponent(parent_component):
+                    cache.set(
+                        parent_component.component_cache_key,
+                        parent_component,
+                    )
             except UnicornCacheError as e:
                 logger.warning(e)
 
@@ -340,7 +344,10 @@ def _process_component_request(
                 }
             )
 
-        res.update({"parent": parent})
+        parent_res.update({"parent": parent})
+        component = parent_component
+        parent_component = parent_component.parent
+        parent_res = parent
 
     return res
 

docs/source/changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.49.3
+
+- Fix: Support nested children past the first level ([#476](https://github.com/adamghill/django-unicorn/pull/507).
+
+[All changes since 0.49.2](https://github.com/adamghill/django-unicorn/compare/0.49.2...0.49.3).
+
 ## v0.49.2
 
 - Fix: Calling methods with a model typehint would fail after being called multiple times ([#476](https://github.com/adamghill/django-unicorn/pull/476) by [stat1c-void](https://github.com/stat1c-void)).

example/coffee/management/commands/import_flavors.py

@@ -2,7 +2,7 @@
 
 from django.core.management.base import BaseCommand, CommandError
 
-from ...models import Flavor
+from ...models import Favorite, Flavor
 
 
 class Command(BaseCommand):
@@ -20,3 +20,4 @@ def handle(self, *args, **options):
                 parent = Flavor.objects.filter(name=parent_name).first()
                 flavor = Flavor(name=name, label=label, parent=parent)
                 flavor.save()
+                Favorite.objects.create(flavor=flavor)