Merge pull request #22 from Kitware/fix-vue3-remount

fix(vue3): Fix vue3 components remounting every time a key is added to state

Author: jourdain

CHANGELOG.md

@@ -6,7 +6,7 @@
 
 ### Feature
 
-* **loading:** Enable loading screen to be overriden ([`9d13b21`](https://github.com/Kitware/trame-client/commit/9d13b21a7bc99feef6621c1c538f7bb505282616))
+* **loading:** Enable loading screen to be overridden ([`9d13b21`](https://github.com/Kitware/trame-client/commit/9d13b21a7bc99feef6621c1c538f7bb505282616))
 
 ## v2.15.0 (2024-01-17)
 

vue3-app/src/components/TrameTemplate.js

@@ -40,6 +40,15 @@ export function setup() {
 
   // Server update reactivity
   const onDirty = ({ type, keys }) => {
+    if (type === "new-keys") {
+      for (let i = 0; i < keys.length; i++) {
+        const name = keys[i];
+        if (publicAPI[name] === undefined) {
+          publicAPI[name] = toRef(trame, name, modifiedState);
+        }
+      }
+    }
+
     if (type === "dirty-state") {
       for (let i = 0; i < keys.length; i++) {
         modifiedState[keys[i]]();

vue3-app/src/core/trame/state.js

@@ -53,20 +53,20 @@ export class SharedState {
       }
 
       this.mtime += 1;
-      let newKeyCount = 0;
+      const newKeys = [];
       for (let i = 0; i < updatedKeys.length; i++) {
         const key = updatedKeys[i];
         if (this.keyTS[key] === undefined) {
-          newKeyCount++;
+          newKeys.push(key);
         }
         this.keyTS[key] = this.mtime;
       }
 
-      if (newKeyCount) {
-        this.notifyListeners({ type: "refresh" });
-      } else {
-        this.notifyListeners({ type: "dirty-state", keys: updatedKeys });
+      if (newKeys.length > 0) {
+        this.notifyListeners({ type: "new-keys", keys: newKeys });
       }
+
+      this.notifyListeners({ type: "dirty-state", keys: updatedKeys });
     };
 
     this.subscriptions.push(