fix(vue3): fix vue3 components remounting every time a key is added t…

…o state
Kitware · Feb 16, 2024 · 417a71f · 417a71f
1 parent ca92820
commit 417a71f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/vue3-app/src/components/TrameTemplate.js b/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]]();

diff --git a/vue3-app/src/core/trame/state.js b/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(