Add ability to call JavaScript functions from the component view.

Author: adamghill

django_unicorn/components/unicorn_template_response.py

@@ -78,6 +78,7 @@ def render(self):
                 "name": self.component.component_name,
                 "key": self.component.component_key,
                 "data": orjson.loads(frontend_context_variables),
+                "calls": self.component.calls,
             }
             init = orjson.dumps(init).decode("utf-8")
             init_script = f"Unicorn.componentInit({init});"

django_unicorn/components/unicorn_view.py

@@ -109,6 +109,7 @@ def construct_component(
         **kwargs,
     )
 
+    component.calls = []
     component.children = []
     component._children_set = False
 
@@ -135,6 +136,9 @@ class UnicornView(TemplateView):
     # Dictionary with key: attribute name; value: pickled attribute value
     _resettable_attributes_cache: Dict[str, Any] = {}
 
+    # JavaScript method calls
+    calls = []
+
     def __init__(self, **kwargs):
         super().__init__(**kwargs)
 
@@ -211,15 +215,39 @@ def reset(self):
                 )
                 pass
 
+    def call(self, function_name):
+        """
+        Add a JavaScript method name and arguments to be called after the component is rendered.
+        """
+        self.calls.append({"fn": function_name})
+
     def mount(self):
         """
-        Hook that gets called when a component is first created.
+        Hook that gets called when the component is first created.
         """
         pass
 
     def hydrate(self):
         """
-        Hook that gets called when a component's data is hydrated.
+        Hook that gets called when the component's data is hydrated.
+        """
+        pass
+
+    def complete(self):
+        """
+        Hook that gets called when the component's methods are all called.
+        """
+        pass
+
+    def rendered(self, html):
+        """
+        Hook that gets called after the component has been rendered.
+        """
+        pass
+
+    def parent_rendered(self, html):
+        """
+        Hook that gets called after the component's parent has been rendered.
         """
         pass
 
@@ -561,13 +589,18 @@ def _is_public(self, name: str) -> bool:
             "update",
             "calling",
             "called",
+            "complete",
+            "rendered",
+            "parent_rendered",
             "validate",
             "is_valid",
             "get_frontend_context_variables",
             "errors",
             "updated",
             "parent",
             "children",
+            "call",
+            "calls",
         )
         excludes = []
 
@@ -628,6 +661,7 @@ def _get_component_class(
             component = constructed_views_cache[component_id]
             component.setup(request)
             component._validate_called = False
+            component.calls = []
             logger.debug(f"Retrieve {component_id} from constructed views cache")
 
             return component

django_unicorn/static/js/component.js

@@ -8,7 +8,7 @@ import {
 import { components } from "./store.js";
 import { send } from "./messageSender.js";
 import morphdom from "./morphdom/2.6.1/morphdom.js";
-import { $, contains, hasValue, isEmpty, isFunction, walk } from "./utils.js";
+import { $, hasValue, isEmpty, isFunction, walk } from "./utils.js";
 
 /**
  * Encapsulate component.
@@ -20,7 +20,7 @@ export class Component {
     this.key = args.key;
     this.messageUrl = args.messageUrl;
     this.csrfTokenHeaderName = args.csrfTokenHeaderName;
-    this.data = args.data;
+    this.data = args.data || {};
     this.syncUrl = `${this.messageUrl}/${this.name}`;
 
     this.document = args.document || document;
@@ -49,6 +49,8 @@ export class Component {
     this.init();
     this.refreshEventListeners();
     this.initPolling();
+
+    this.callCalls(args.calls);
   }
 
   /**
@@ -113,6 +115,20 @@ export class Component {
     return parentComponent;
   }
 
+  /**
+   * Call JavaScript functions on the `window`.
+   * @param {Array} calls A list of objects that specify the methods to call.
+   *
+   * `calls`: [{"fn": "someFunctionName"},]
+   */
+  callCalls(calls) {
+    calls = calls || [];
+
+    calls.forEach((call) => {
+      this.window[call.fn]();
+    });
+  }
+
   /**
    * Sets event listeners on unicorn elements.
    */

django_unicorn/static/js/messageSender.js

@@ -223,6 +223,9 @@ export function send(component, callback) {
         });
       });
 
+      // Call any JavaScript functions from the response
+      component.callCalls(responseJson.calls);
+
       const triggeringElements = component.lastTriggeringElements;
       component.lastTriggeringElements = [];
 

django_unicorn/views.py

@@ -501,6 +501,7 @@ def _process_component_request(
         "id": component_request.id,
         "data": updated_data,
         "errors": component.errors,
+        "calls": component.calls,
         "checksum": generate_checksum(orjson.dumps(component_request.data)),
     }
 

example/unicorn/components/js.py

@@ -2,55 +2,19 @@
 
 
 class JsView(UnicornView):
+    def mount(self):
+        # self.call("callAlert")
+        pass
+
+    def call_javascript(self):
+        self.call("callAlert")
+
+    def choose_state():
+        pass
+
     states = (
         "Alabama",
         "Alaska",
-        "Arizona",
-        "Arkansas",
-        "California",
-        "Colorado",
-        "Connecticut",
-        "Delaware",
-        "Florida",
-        "Georgia",
-        "Hawaii",
-        "Idaho",
-        "Illinois",
-        "Indiana",
-        "Iowa",
-        "Kansas",
-        "Kentucky",
-        "Louisiana",
-        "Maine",
-        "Maryland",
-        "Massachusetts",
-        "Michigan",
-        "Minnesota",
-        "Mississippi",
-        "Missouri",
-        "Montana",
-        "Nebraska",
-        "Nevada",
-        "New Hampshire",
-        "New Jersey",
-        "New Mexico",
-        "New York",
-        "North Carolina",
-        "North Dakota",
-        "Ohio",
-        "Oklahoma",
-        "Oregon",
-        "Pennsylvania",
-        "Rhode Island",
-        "South Carolina",
-        "South Dakota",
-        "Tennessee",
-        "Texas",
-        "Utah",
-        "Vermont",
-        "Virginia",
-        "Washington",
-        "West Virginia",
         "Wisconsin",
         "Wyoming",
     )

example/unicorn/templates/unicorn/js.html

@@ -1,5 +1,20 @@
 <div>
-    {% for state in states %}
-    {{ state }}
-    {% endfor %}
+    <script>
+        function callAlert() {
+            alert("hello");
+        }
+    </script>
+
+    <h2>
+        <button unicorn:click="call_javascript">Component view calls JavaScript</button>
+    </h2>
+
+    <div>
+        <h2>
+            <code>javascript_exclude</code>
+        </h2>
+        {% for state in states %}
+        {{ state }}
+        {% endfor %}
+    </div>
 </div>

tests/components/test_get_locations.py

@@ -108,12 +108,8 @@ def test_get_locations_apps_setting_set(settings):
 def test_get_locations_apps_setting_invalid(settings):
     settings.UNICORN["APPS"] = "project"
 
-    expected = [
-        ("HelloWorldView", "project.components.hello_world"),
-    ]
-
     with pytest.raises(AssertionError) as e:
-        actual = get_locations("hello-world")
+        get_locations("hello-world")
 
     assert e.type == AssertionError
     settings.UNICORN["APPS"] = ("unicorn",)

tests/templatetags/test_unicorn_render.py

@@ -29,6 +29,13 @@ def __init__(self, *args, **kwargs):
         self.model_id = kwargs.get("model_id")
 
 
+class FakeComponentCalls(UnicornView):
+    template_name = "templates/test_component_parent.html"
+
+    def mount(self):
+        self.call("testCall")
+
+
 def test_unicorn_render_kwarg():
     token = Token(
         TokenType.TEXT,
@@ -219,3 +226,33 @@ def test_unicorn_render_parent_component_one_script_tag(settings):
 
     assert "<script" in html
     assert len(re.findall("<script", html)) == 1
+
+
+def test_unicorn_render_calls(settings):
+    settings.DEBUG = True
+    token = Token(
+        TokenType.TEXT,
+        "unicorn 'tests.templatetags.test_unicorn_render.FakeComponentCalls'",
+    )
+    unicorn_node = unicorn(None, token)
+    context = {}
+    html = unicorn_node.render(context)
+
+    assert "<script" in html
+    assert len(re.findall("<script", html)) == 1
+    assert '"calls":[{"fn":"testCall"}]});' in html
+
+
+def test_unicorn_render_calls_no_mount_call(settings):
+    settings.DEBUG = True
+    token = Token(
+        TokenType.TEXT,
+        "unicorn 'tests.templatetags.test_unicorn_render.FakeComponentParent'",
+    )
+    unicorn_node = unicorn(None, token)
+    context = {}
+    html = unicorn_node.render(context)
+
+    assert "<script" in html
+    assert len(re.findall("<script", html)) == 1
+    assert '"calls":[]});' in html

tests/views/message/test_calls.py

@@ -0,0 +1,41 @@
+from django_unicorn.components import UnicornView
+from tests.views.message.utils import post_and_get_response
+
+
+class FakeCallsComponent(UnicornView):
+    template_name = "templates/test_component.html"
+
+    def test_call(self):
+        self.call("testCall")
+
+    def test_call2(self):
+        self.call("testCall2")
+
+
+FAKE_CALLS_COMPONENT_URL = "/message/tests.views.message.test_calls.FakeCallsComponent"
+
+
+def test_message_calls(client):
+    action_queue = [
+        {"payload": {"name": "test_call"}, "type": "callMethod", "target": None,}
+    ]
+
+    response = post_and_get_response(
+        client, url=FAKE_CALLS_COMPONENT_URL, action_queue=action_queue
+    )
+
+    body = response.json()
+    assert body.get("calls") == [{"fn": "testCall"}]
+
+
+def test_message_multiple_calls(client):
+    action_queue = [
+        {"payload": {"name": "test_call"}, "type": "callMethod", "target": None,},
+        {"payload": {"name": "test_call2"}, "type": "callMethod", "target": None,},
+    ]
+    response = post_and_get_response(
+        client, url=FAKE_CALLS_COMPONENT_URL, action_queue=action_queue
+    )
+
+    body = response.json()
+    assert body.get("calls") == [{"fn": "testCall"}, {"fn": "testCall2"}]