Python DOM library shaping up.

Author: ntoll

.gitignore

@@ -1,2 +1,4 @@
 *.swp
 *.min.js
+.coverage
+__pycache__

Makefile

@@ -6,8 +6,11 @@ all:
 	@echo "make test - while serving the app, run the test suite in browser."
 	@echo "make minify - minify the project."
 
-test:
+testjs:
 	python -m webbrowser "SpecRunner.html"
 
+testpy:
+	pytest -v --random-order --cov-report term-missing --cov=polyplug tests/
+
 minify:
 	uglifyjs polyplug.js --compress --mangle -o polyplug.min.js

README.md

@@ -24,6 +24,13 @@ This is the way:
 This project was created for research purposes as part of the efforts to build
 [PyScript](https://pyscript.net).
 
+There are two sides to PolyPlug:
+
+* The `polyplug.js` code to be run in the main thread of the browser.
+* Code, to be run in the interpreter of the scripting language, to communicate
+  with PolyPlug. Currently only `polyplug.py` exists as a reference
+  implementation.
+
 That is all.
 
 ## Developer setup
@@ -35,7 +42,8 @@ $ make
 There's no default Makefile target right now. Try:
 
 make minify - minify the source.
-make test - run the test suite.
+make testjs - run the JavaScript test suite.
+make testpy - run the Python test suite.
 ```
 
 ## Running the tests
@@ -44,6 +52,9 @@ For the sake of simplicity (and familiarity) we use the
 [Jasmine test framework](https://jasmine.github.io/index.html) to exercise the
 JavaScript aspects of our code.
 
+For similar reasons, we use [PyTest](https://pytest.org/) to exercise the
+Pythonic aspects of our code.
+
 ## How it works
 
 Methods of the object returned by the `polyplug` function facilitate all

polyplug.js

@@ -36,6 +36,14 @@ limitations under the License.
 ******************************************************************************/
 
 const polyplug = function() {
+
+    /**************************************************************************
+    Internal state for PolyPlug.
+    **************************************************************************/
+
+    // Tracks event handler functions.
+    const REGISTERED_EVENTS = {};
+
     /**************************************************************************
     Serialization functions for PolyPlug.
     **************************************************************************/
@@ -330,6 +338,14 @@ const polyplug = function() {
     Event handling functions for PolyPlug.
     **************************************************************************/
 
+    function getEventKey(query, eventType, listener) {
+        /*
+        Return a unique key to identify a query/eventType/listener combination.
+        */
+        const sortedQuery = Object.keys(query).sort().reduce((result, key) => (result[key] = query[key], result), {});
+        return JSON.stringify([sortedQuery, eventType, listener]);
+    }
+
     function registerEvent(query, eventType, listener) {
         /*
         Register an event listener, given:
@@ -346,19 +362,41 @@ const polyplug = function() {
         expected function in the most appropriate way.
         */
         const elements = getElements(query);
-        elements.forEach(function(element) {
-            element.addEventListener(eventType, function(e) {
-                const detail = JSON.stringify({
-                    type: e.type,
-                    target: nodeToJS(e.target),
-                    listener: listener
-                });
-                const send = new CustomEvent("polyplugSend", {detail: detail});
-                document.dispatchEvent(send);
+        const eventHandler = function(e) {
+            const detail = JSON.stringify({
+                type: e.type,
+                target: nodeToJS(e.target),
+                listener: listener
             });
+            const send = new CustomEvent("polyplugSend", {detail: detail});
+            document.dispatchEvent(send);
+        }
+        const eventKey = getEventKey(query, eventType, listener);
+        REGISTERED_EVENTS[eventKey] = eventHandler;
+        elements.forEach(function(element) {
+            element.addEventListener(eventType, eventHandler);
         });
     }
 
+    function removeEvent(query, eventType, listener) {
+        /*
+        Remove an event listener, given:
+
+        * target element[s] via a query object (see getElements),
+        * the event type (e.g. "click"), and,
+        * the name of the listener to call in the remote interpreter.
+        */
+        const elements = getElements(query);
+        const eventKey = getEventKey(query, eventType, listener);
+        const eventHandler = REGISTERED_EVENTS[eventKey];
+        if (eventHandler) {
+            elements.forEach(function(element) {
+                element.removeEventListener(eventType, eventHandler);
+            });
+            delete REGISTERED_EVENTS[eventKey];
+        }
+    }
+
     /**************************************************************************
     Message handling functions for PolyPlug.
     **************************************************************************/
@@ -368,27 +406,34 @@ const polyplug = function() {
         Receive a raw message string (containing JSON). Deserialize it and
         dispatch the message to the appropriate handler function.
         */
-        const message = JSON.parse(raw);
-        switch (message.type) {
-            case "updateDOM":
-                onUpdateDOM(message);
-                break;
-            case "registerEvent":
-                onRegisterEvent(message);
-                break;
-            case "stdout":
-                onStdout(message);
-                break;
-            case "stderr":
-                onStderr(message);
-                break;
-            case "error":
-                onError(message);
-                break;
-            default:
-                console.log("Unknown message type.")
-                console.log(message)
-                break;
+        try {
+            const message = JSON.parse(raw);
+            switch (message.type) {
+                case "updateDOM":
+                    onUpdateDOM(message);
+                    break;
+                case "registerEvent":
+                    onRegisterEvent(message);
+                    break;
+                case "removeEvent":
+                    onRemoveEvent(message);
+                    break
+                case "stdout":
+                    onStdout(message);
+                    break;
+                case "stderr":
+                    onStderr(message);
+                    break;
+                case "error":
+                    onError(message);
+                    break;
+                default:
+                    console.log("Unknown message type.")
+                    console.log(message)
+                    break;
+            }
+        } catch (error) {
+            onError(error);
         }
     }
 
@@ -442,6 +487,24 @@ const polyplug = function() {
         registerEvent(msg.query, msg.eventType, msg.listener);
     }
 
+    function onRemoveEvent(msg) {
+        /*
+        Handle requests to unbind the referenced event type on the elements
+        matched by the query.
+
+        Sample message:
+
+        msg = {
+            type: "removeEvent",
+            query: {
+                id: "idOfDomElement"
+            },
+            eventType: "click",
+        }
+        */
+        removeEvent(msg.query, msg.eventType);
+    }
+
     function onStdout(msg) {
         /*
         Handle "normal" STDOUT output.
@@ -505,7 +568,7 @@ const polyplug = function() {
         mutate: mutate,
         getElements: getElements,
         registerEvent: registerEvent,
+        removeEvent: removeEvent,
         receiveMessage: receiveMessage
     }
 };
-