Add component key to allow targeting separate components of the same name on a page.

Author: adamghill

django_unicorn/components.py

@@ -87,6 +87,7 @@ def __init__(
         using=None,
         component_name=None,
         component_id=None,
+        component_key="",
         frontend_context_variables={},
         init_js=False,
         **kwargs,
@@ -103,6 +104,7 @@ def __init__(
 
         self.component_id = component_id
         self.component_name = component_name
+        self.component_key = component_key
         self.frontend_context_variables = frontend_context_variables
         self.init_js = init_js
 
@@ -121,13 +123,15 @@ def render(self):
         root_element = UnicornTemplateResponse._get_root_element(soup)
         root_element["unicorn:id"] = self.component_id
         root_element["unicorn:name"] = self.component_name
+        root_element["unicorn:key"] = self.component_key
         root_element["unicorn:checksum"] = checksum
 
         if self.init_js:
             script_tag = soup.new_tag("script")
             init = {
                 "id": self.component_id,
                 "name": self.component_name,
+                "key": self.component_key,
                 "data": orjson.loads(self.frontend_context_variables),
             }
             init = orjson.dumps(init).decode("utf-8")
@@ -166,6 +170,7 @@ def _desoupify(soup):
 class UnicornView(TemplateView):
     response_class = UnicornTemplateResponse
     component_name: str = ""
+    component_key: str = ""
     request = None
 
     # Caches to reduce the amount of time introspecting the class
@@ -292,6 +297,7 @@ def render(self, init_js=False) -> str:
             context=self.get_context_data(),
             component_name=self.component_name,
             component_id=self.component_id,
+            component_key=self.component_key,
             frontend_context_variables=frontend_context_variables,
             init_js=init_js,
         )
@@ -561,6 +567,7 @@ def _is_public(self, name: str) -> bool:
             # Component methods
             "component_id",
             "component_name",
+            "component_key",
             "reset",
             "mount",
             "hydrate",
@@ -591,6 +598,7 @@ def _is_public(self, name: str) -> bool:
     def create(
         component_id: str,
         component_name: str,
+        component_key: str = "",
         use_cache=True,
         request: HttpRequest = None,
         kwargs: Dict[str, Any] = {},
@@ -602,6 +610,8 @@ def create(
             param component_id: Id of the component. Required.
             param component_name: Name of the component. Used to locate the correct `UnicornView`
                 component class and template if necessary. Required.
+            param component_key: Key of the component to allow multiple components of the same name
+                to be differentiated. Optional.
             param use_cache: Get component from cache or force construction of component. Defaults to `True`.
             param kwargs: Keyword arguments for the component passed in from the template. Defaults to `{}`.
         
@@ -613,13 +623,11 @@ def create(
         assert component_name, "Component name is required"
 
         if use_cache:
-            cache_key = f"{component_name}-{component_id}"
-
-            if cache_key in constructed_views_cache:
-                component = constructed_views_cache[cache_key]
+            if component_id in constructed_views_cache:
+                component = constructed_views_cache[component_id]
                 component.setup(request)
                 component._validate_called = False
-                logger.debug(f"Retrieve {cache_key} from constructed views cache")
+                logger.debug(f"Retrieve {component_id} from constructed views cache")
                 return component
 
         locations = []
@@ -672,6 +680,7 @@ def _get_component_class(
                 component = component_class(
                     component_id=component_id,
                     component_name=component_name,
+                    component_key=component_key,
                     request=request,
                     **kwargs,
                 )
@@ -680,8 +689,7 @@ def _get_component_class(
                 component._validate_called = False
 
                 # Put the component in a "cache" to skip looking for the component on the next request
-                cache_key = f"{component_name}-{component_id}"
-                constructed_views_cache[cache_key] = component
+                constructed_views_cache[component_id] = component
 
                 return component
             except ModuleNotFoundError as e:

django_unicorn/static/js/component.js

@@ -15,6 +15,7 @@ export class Component {
   constructor(args) {
     this.id = args.id;
     this.name = args.name;
+    this.key = args.key;
     this.messageUrl = args.messageUrl;
     this.csrfTokenHeaderName = args.csrfTokenHeaderName;
 

django_unicorn/static/js/unicorn.js

@@ -1,5 +1,5 @@
 import { Component } from "./component.js";
-import { isEmpty } from "./utils.js";
+import { hasValue, isEmpty } from "./utils.js";
 
 let messageUrl = "";
 const csrfTokenHeaderName = "X-CSRFToken";
@@ -28,26 +28,59 @@ export function componentInit(args) {
 }
 
 /**
- * Call an action on the specified component.
+ * Gets the component with the specified name or key.
+ * Component keys are searched first, then names.
+ *
+ * @param {String} componentNameOrKey The name or key of the component to search for.
  */
-export function call(componentName, methodName) {
+export function getComponent(componentNameOrKey) {
   let component;
 
   Object.keys(components).forEach((id) => {
     if (isEmpty(component)) {
       const _component = components[id];
 
-      if (_component.name === componentName) {
+      if (_component.key === componentNameOrKey) {
         component = _component;
       }
     }
   });
 
+  if (isEmpty(component)) {
+    Object.keys(components).forEach((id) => {
+      if (isEmpty(component)) {
+        const _component = components[id];
+
+        if (_component.name === componentNameOrKey) {
+          component = _component;
+        }
+      }
+    });
+  }
+
   if (!component) {
-    throw Error("No component found for: ", componentName);
+    throw Error(`No component found for: ${componentNameOrKey}`);
   }
 
+  return component;
+}
+
+/**
+ * Call an action on the specified component.
+ */
+export function call(componentNameOrKey, methodName) {
+  const component = getComponent(componentNameOrKey);
+
   component.callMethod(methodName, (err) => {
     console.error(err);
   });
 }
+
+/**
+ * Gets the last return value.
+ */
+export function getReturnValue(componentNameOrKey) {
+  const component = getComponent(componentNameOrKey);
+
+  return component.return.value;
+}

django_unicorn/templatetags/unicorn.py

@@ -1,3 +1,5 @@
+from typing import Dict
+
 from django import template
 from django.conf import settings
 
@@ -52,9 +54,13 @@ def unicorn(parser, token):
 
 
 class UnicornNode(template.Node):
-    def __init__(self, component_name, kwargs):
+    def __init__(self, component_name: str, kwargs: Dict):
         self.component_name = component_name
         self.kwargs = kwargs
+        self.component_key = ""
+
+        if "key" in kwargs:
+            self.component_key = kwargs.pop("key")
 
     def render(self, context):
         request = None
@@ -79,6 +85,7 @@ def render(self, context):
         view = UnicornView.create(
             component_id=component_id,
             component_name=self.component_name,
+            component_key=self.component_key,
             kwargs=resolved_kwargs,
             request=request,
         )

example/www/templates/www/index.html

@@ -7,6 +7,8 @@ <h2>Index</h2>
 
 <button onclick="Unicorn.call('hello_world', 'set_name');">Method call from outside of the component</button>
 
+<button onclick="alert(Unicorn.getReturnValue('hello_world'));">Last return value from component</button>
+
 {% unicorn 'unicorn.components.hello_world.HelloWorldView' %}
 
 {% endblock content %}

example/www/templates/www/text-inputs.html

@@ -5,6 +5,10 @@
 
 <h2>Text inputs</h2>
 
-{% unicorn 'text-inputs' %}
+<button onclick="Unicorn.call('zxcv', 'set_name');">Method call from outside of the component</button>
+
+{% unicorn 'text-inputs' key="asdf" %}
+
+{% unicorn 'text-inputs' key="zxcv" %}
 
 {% endblock content %}

tests/views/message/test_call_method.py

@@ -1,4 +1,5 @@
 import orjson
+import shortuuid
 
 from django_unicorn.utils import generate_checksum
 
@@ -9,7 +10,7 @@ def test_message_call_method(client):
         "actionQueue": [{"payload": {"name": "test_method"}, "type": "callMethod",}],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -29,7 +30,7 @@ def test_message_call_method_redirect(client):
         "actionQueue": [{"payload": {"name": "test_redirect"}, "type": "callMethod",}],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -54,7 +55,7 @@ def test_message_call_method_refresh_redirect(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -80,7 +81,7 @@ def test_message_call_method_hash_update(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -103,7 +104,7 @@ def test_message_call_method_return_value(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -115,7 +116,10 @@ def test_message_call_method_return_value(client):
     body = orjson.loads(response.content)
 
     assert "return" in body
-    assert body["return"] == "booya"
+    return_data = body["return"]
+    assert return_data.get("method") == "test_return_value"
+    assert return_data.get("params") == []
+    assert return_data.get("value") == "booya"
 
 
 def test_message_call_method_setter(client):
@@ -124,7 +128,7 @@ def test_message_call_method_setter(client):
         "actionQueue": [{"payload": {"name": "method_count=2"}, "type": "callMethod",}],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -146,7 +150,7 @@ def test_message_call_method_nested_setter(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -168,7 +172,7 @@ def test_message_call_method_toggle(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -190,7 +194,7 @@ def test_message_call_method_nested_toggle(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -212,7 +216,7 @@ def test_message_call_method_params(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -234,7 +238,7 @@ def test_message_call_method_no_validation(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -256,7 +260,7 @@ def test_message_call_method_validation(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(

tests/views/message/test_db_input.py

@@ -1,5 +1,6 @@
 import orjson
 import pytest
+import shortuuid
 
 from django_unicorn.utils import generate_checksum
 from example.coffee.models import Flavor
@@ -25,7 +26,7 @@ def test_message_db_input_update(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     response = client.post(
@@ -72,7 +73,7 @@ def test_message_db_input_create(client):
         ],
         "data": data,
         "checksum": generate_checksum(orjson.dumps(data)),
-        "id": "FDHcbzGf",
+        "id": shortuuid.uuid()[:8],
     }
 
     assert Flavor.objects.all().count() == 0