fix(ClientTriggers): add built-in exit event

examples/vue3/trigger.py

@@ -40,6 +40,10 @@ def call_method_3():
     ctrl.call("method3")
 
 
+def client_exited():
+    print("client exited")
+
+
 # -----------------------------------------------------------------------------
 # UI setup
 # -----------------------------------------------------------------------------
@@ -56,6 +60,7 @@ def call_method_3():
         method1="window.console.log('method 1', $event)",
         method2="window.console.log('method 2', $event)",
         method3="window.console.log('method 3', $event)",
+        exit=client_exited,
     )
     ctrl.call = client_triggers.call
 

trame_client/widgets/trame.py

@@ -192,12 +192,23 @@ class ClientTriggers(AbstractElement):
 
     :param ref: Identifier for the client side DOM elem
     :param **kwargs: List of events to registers with their callbacks
+
+    Built-in events are:
+       - mounted
+       - created
+       - before_destroy
+       - before_unmount
+       - exit
     """
 
     def __init__(self, ref="trame_triggers", children=None, **kwargs):
         self.__name = ref
         super().__init__("trame-client-triggers", children=None, ref=ref, **kwargs)
         self._attr_names += ["ref"]
+        self._event_names += [
+            ("before_destroy", "beforeDestroy"),
+            ("before_unmount", "beforeUnmount"),
+        ]
         self._event_names += list(kwargs.keys())
 
     def call(self, method, *args):

vue2-app/src/components/ClientTriggers.js

@@ -1,7 +1,7 @@
 const { onMounted, onBeforeUnmount } = window.Vue;
 
 export default {
-  emits: ['mounted', 'created', 'beforeDestroy', 'beforeUnmount'],
+  emits: ['mounted', 'created', 'beforeDestroy', 'beforeUnmount', 'exit'],
   setup(props, { emit, expose }) {
     function emitTopic(topic, event) {
       emit(topic, event);
@@ -13,7 +13,9 @@ export default {
       emit('beforeUnmount');
     });
     expose({ emit: emitTopic });
-
+    window.addEventListener('beforeunload', () => {
+      emit('exit');
+    });
     emit('created');
     return { emit: emitTopic };
   },

vue3-app/src/components/TrameClientTriggers.js

@@ -1,7 +1,7 @@
 const { onMounted, onBeforeUnmount } = window.Vue;
 
 export default {
-  emits: ["mounted", "created", "beforeDestroy", "beforeUnmount"],
+  emits: ["mounted", "created", "beforeDestroy", "beforeUnmount", "exit"],
   setup(props, { emit, expose }) {
     function emitTopic(topic, event) {
       emit(topic, event);
@@ -12,6 +12,9 @@ export default {
       emit("beforeDestroy");
       emit("beforeUnmount");
     });
+    window.addEventListener("beforeunload", () => {
+      emit("exit");
+    });
     expose({ emit: emitTopic });
 
     emit("created");

vue3-app/src/core/wslink/protocols/SyncView.js

@@ -1,11 +1,13 @@
 export default (session) => ({
   getArray(hash, binary = true) {
-    return session.call("viewport.geometry.array.get", [hash, binary]).then((res) => {
-      if (res.buffer) {
-        return new Blob([res]);
-      }
-      return res;
-    });
+    return session
+      .call("viewport.geometry.array.get", [hash, binary])
+      .then((res) => {
+        if (res.buffer) {
+          return new Blob([res]);
+        }
+        return res;
+      });
   },
   getViewState(viewId, newSubscription = false) {
     return session.call("viewport.geometry.view.get.state", [