feat(ClientTriggers): now emit exit event

Author: jourdain

examples/triggerBug.py

@@ -0,0 +1,24 @@
+from trame.app import get_server
+from trame.ui.html import DivLayout
+from trame.widgets import client, html, trame
+
+
+server = get_server(client_type="vue3")
+
+
+def app_exit():
+    print("App exited")
+
+
+with DivLayout(server):
+    a = client.ClientTriggers(exit=app_exit)
+    b = trame.ClientTriggers(exit=app_exit)
+    print(f"{a=}")
+    print(f"{b=}")
+    html.H1("App")
+
+    # trame.ListBrowser()  # Uncommenting this line makes the `exit` event not trigger the callback
+
+if __name__ == "__main__":
+
+    server.start()

trame_components/widgets/trame.py

@@ -43,7 +43,7 @@ class ClientStateChange(HtmlElement):
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("trame-client-state-change", children, **kwargs)
+        super().__init__("tc-client-state-change", children, **kwargs)
         self._attr_names += [
             ("value", ":value"),
             "immediate",
@@ -65,7 +65,7 @@ class ClientTriggers(HtmlElement):
 
     def __init__(self, ref="trame_triggers", children=None, **kwargs):
         self.__name = ref
-        super().__init__("trame-client-triggers", children=None, ref=ref, **kwargs)
+        super().__init__("tc-client-triggers", children=None, ref=ref, **kwargs)
         self._attr_names += ["ref"]
         self._event_names += list(kwargs.keys())
 
@@ -89,7 +89,7 @@ class Cursor(HtmlElement):
     """
 
     def __init__(self, **kwargs):
-        super().__init__("trame-cursor", **kwargs)
+        super().__init__("tc-cursor", **kwargs)
         self._attr_names += ["active", "cursors"]
 
 
@@ -113,7 +113,7 @@ class LifeCycleMonitor(HtmlElement):
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("trame-life-cycle-monitor", children, **kwargs)
+        super().__init__("tc-life-cycle-monitor", children, **kwargs)
         self._attr_names += [
             "name",
             "type",
@@ -153,7 +153,7 @@ class MouseTrap(HtmlElement):
     """
 
     def __init__(self, **kwargs):
-        super().__init__("trame-mouse-trap", **kwargs)
+        super().__init__("tc-mouse-trap", **kwargs)
         self._attributes["_trame_mapping"] = ':mapping="trame__mousetrap"'
         self._event_names += [*kwargs.keys()]
 
@@ -189,7 +189,7 @@ class SizeObserver(HtmlElement):
     """
 
     def __init__(self, _name, **kwargs):
-        super().__init__("trame-size-observer", **kwargs)
+        super().__init__("tc-size-observer", **kwargs)
         self._attr_names += [
             "name",
         ]
@@ -241,7 +241,7 @@ class FloatCard(HtmlElement):
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("trame-float-card", children, **kwargs)
+        super().__init__("tc-float-card", children, **kwargs)
         self._attr_names += [
             "handle_color",
             "handle_position",
@@ -292,7 +292,7 @@ class ListBrowser(HtmlElement):
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("trame-list-browser", children, **kwargs)
+        super().__init__("tc-list-browser", children, **kwargs)
         self._attr_names += [
             "path_icon",
             "path_selected_icon",
@@ -350,7 +350,7 @@ class GitTree(HtmlElement):
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("trame-git-tree", children, **kwargs)
+        super().__init__("tc-git-tree", children, **kwargs)
         self._attr_names += [
             "sources",
             "actives",
@@ -406,7 +406,7 @@ class XaiHeatMap(HtmlElement):
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("trame-xai-heat-map", children, **kwargs)
+        super().__init__("tc-xai-heat-map", children, **kwargs)
         self._attr_names += [
             "heatmap",
             "shape",
@@ -461,7 +461,7 @@ class XaiImage(HtmlElement):
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("trame-xai-image", children, **kwargs)
+        super().__init__("tc-xai-image", children, **kwargs)
         self._attr_names += [
             "src",
             "max_height",
@@ -498,7 +498,7 @@ def __init__(self, children=None, **kwargs):
 
 class LineSeed(HtmlElement):
     def __init__(self, children=None, **kwargs):
-        super().__init__("trame-line-seed", children, **kwargs)
+        super().__init__("tc-line-seed", children, **kwargs)
         self._attr_names += [
             ("point_1", "point1"),
             ("point_2", "point2"),

vue-components/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");

vue-components/src/components/TrameListBrowser.js

@@ -121,7 +121,7 @@ export default {
           return true;
         }
         const txt = [item.text.toLowerCase(), item.type.toLowerCase()].join(
-          "  ",
+          "  "
         );
         const tokens = filterValues.value;
         for (let i = 0; i < tokens.length; i++) {

vue-components/src/components/index.js

@@ -13,17 +13,16 @@ import TrameXaiImage from "./TrameXaiImage";
 import TrameLineSeed from "./TrameLineSeed";
 
 export default {
-  TrameClientStateChange,
-  TrameClientTriggers,
-  TrameCursor,
-  TrameFloatCard,
-  TrameGitTree,
-  TrameLifeCycleMonitor,
-  TrameListBrowser,
-  TrameMouseTrap,
-  TrameSizeObserver,
-  TrameXaiHeatMap,
-  TrameXaiImage,
-
-  TrameLineSeed,
+  TcClientStateChange: TrameClientStateChange,
+  TcClientTriggers: TrameClientTriggers,
+  TcCursor: TrameCursor,
+  TcFloatCard: TrameFloatCard,
+  TcGitTree: TrameGitTree,
+  TcLifeCycleMonitor: TrameLifeCycleMonitor,
+  TcListBrowser: TrameListBrowser,
+  TcMouseTrap: TrameMouseTrap,
+  TcSizeObserver: TrameSizeObserver,
+  TcXaiHeatMap: TrameXaiHeatMap,
+  TcXaiImage: TrameXaiImage,
+  TcLineSeed: TrameLineSeed,
 };