Handle calling a function in a JavaScript module, not just a function.

Author: adamghill

django_unicorn/static/js/component.js

@@ -121,13 +121,38 @@ export class Component {
    * @param {Array} calls A list of objects that specify the methods to call.
    *
    * `calls`: [{"fn": "someFunctionName"},]
+   * `calls`: [{"fn": "someFunctionName", args: ["world"]},]
+   * `calls`: [{"fn": "SomeModule.someFunctionName"},]
+   * `calls`: [{"fn": "SomeModule.someFunctionName", args: ["world", "universe"]},]
+   *
+   * Returns:
+   * Array of results for each method call.
    */
   callCalls(calls) {
     calls = calls || [];
+    const results = [];
 
     calls.forEach((call) => {
-      this.window[call.fn](...call.args);
+      let functionName = call.fn;
+      let module = this.window;
+
+      call.fn.split(".").forEach((obj, idx) => {
+        // only traverse down modules to the first dot, because the last portion is the function name
+        if (idx < call.fn.split(".").length - 1) {
+          module = module[obj];
+          // account for the period when slicing
+          functionName = functionName.slice(obj.length + 1);
+        }
+      });
+
+      if (call.args) {
+        results.push(module[functionName](...call.args));
+      } else {
+        results.push(module[functionName]());
+      }
     });
+
+    return results;
   }
 
   /**

example/unicorn/components/js.py

@@ -16,6 +16,9 @@ class JsView(UnicornView):
     def call_javascript(self):
         self.call("callAlert", "world")
 
+    def call_javascript_module(self):
+        self.call("HelloJs.hello", "world!")
+
     def get_now(self):
         self.select2_datetime = now()
 

example/unicorn/templates/unicorn/js.html

@@ -7,10 +7,21 @@
         function callAlert(name) {
             alert("hello, " + name);
         }
+
+        var HelloJs = (function() {
+            var self = {};
+
+            self.hello = function(name){
+                alert("Hello " + name)
+            }
+
+            return self;
+        }());
     </script>
 
     <h2>
         <button unicorn:click="call_javascript">Component view calls JavaScript</button>
+        <button unicorn:click="call_javascript_module">Component view calls JavaScript module</button>
     </h2>
 
     <div>

tests/js/component/callCalls.test.js

@@ -0,0 +1,45 @@
+import test from "ava";
+import { getComponent } from "../utils.js";
+
+test("callCalls with function name", (t) => {
+  const functionName = "someFunction";
+  const component = getComponent();
+
+  component.window[functionName] = () => {
+    return true;
+  };
+
+  const actual = component.callCalls([{ fn: functionName }]);
+  t.deepEqual(actual, [true]);
+});
+
+test("callCalls with function name and arg", (t) => {
+  const functionName = "someFunction";
+  const component = getComponent();
+
+  component.window[functionName] = (argOne) => {
+    return `${argOne}!!`;
+  };
+
+  const actual = component.callCalls([{ fn: functionName, args: ["great"] }]);
+  t.deepEqual(actual, ["great!!"]);
+});
+
+test("callCalls with module and arg", (t) => {
+  const component = getComponent();
+
+  component.window.SomeModule = (() => {
+    const self = {};
+
+    self.someFunction = (name) => {
+      return `${name}!`;
+    };
+
+    return self;
+  })();
+
+  const actual = component.callCalls([
+    { fn: "SomeModule.someFunction", args: ["howdy"] },
+  ]);
+  t.deepEqual(actual, ["howdy!"]);
+});