fix(serverState): improve cache with circular dep

Author: jourdain

examples/test_client_edits.py

@@ -0,0 +1,118 @@
+import time
+
+from trame.app import TrameApp
+from trame.ui.html import DivLayout
+from trame.widgets import client, html
+from trame_dataclass.v2 import StateDataModel, Sync, watch
+
+
+class Node(StateDataModel):
+    name = Sync(str)
+    prev = Sync(StateDataModel, None, has_dataclass=True)
+    next = Sync(StateDataModel, None, has_dataclass=True)
+
+
+class Item(StateDataModel):
+    value = Sync(int, 1)
+    name = Sync(str, "hello")
+
+
+class Container(StateDataModel):
+    a = Sync(Item, has_dataclass=True)
+    b = Sync(Item, has_dataclass=True)
+    items = Sync(list[Item], list, has_dataclass=True)
+    map = Sync(dict[Item], dict, has_dataclass=True, client_deep_reactive=True)
+    loop = Sync(Node, has_dataclass=True)
+
+    @watch("a")
+    def _a_change(self, a):
+        print("a changed", a)
+
+    @watch("b")
+    def _b_change(self, b):
+        print("b changed", b)
+
+    @watch("items")
+    def _items_change(self, items):
+        print("items changed", items)
+
+    @watch("map")
+    def _map_change(self, map):
+        print("map changed", map)
+
+    @watch("loop")
+    def _loop_change(self, loop):
+        print("loop changed", loop)
+
+
+class Test(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server)
+        self.data = Container(self.server)
+        self.data.a = Item(self.server, value=10)
+        self.data.b = Item(self.server, value=20)
+        self.data.items = [Item(self.server, value=i) for i in range(3)]
+        self.data.map = {f"key_{i}": Item(self.server, value=i) for i in range(3)}
+
+        a = Node(self.server, name="a")
+        b = Node(self.server, name="b")
+        c = Node(self.server, name="c")
+        self.data.loop = a
+        a.next = b
+        b.next = c
+        c.next = a
+        a.prev = c
+        b.prev = a
+        c.prev = b
+
+        self.hold_refs = [self.data.a, self.data.b, a, b, c]
+        self._build_ui()
+
+    def add(self):
+        self.data.items = [*self.data.items, Item(self.server, value=time.time())]
+
+    def _build_ui(self):
+        with DivLayout(self.server) as self.ui:
+            client.Script("""
+                function swap(data) {
+                    const b = data.b;
+                    const a = data.a;
+                    data.b = a;
+                    data.a = b;
+                }
+            """)
+            with self.data.provide_as("data"):
+                html.Button("Swap", click="window.swap(data)")
+                html.Button("Add", click=self.add)
+                html.Button(
+                    "Pop",
+                    click="data.items = data.items.filter((v,i) => i + 1 < data.items.length)",
+                )
+                html.Button(
+                    "Add keys", click="data.map[Date.now()] = data.map['key_0']"
+                )
+                html.Button("Next", click="data.loop = data.loop.next")
+
+                html.Div("A: {{ data.a }}")
+                html.Div("B: {{ data.b }}")
+
+                with html.Ul():
+                    html.Li("{{ item.value }}", v_for="item, i in data.items", key="i")
+
+                with html.Ul():
+                    html.Li("{{ k }}: {{ v }}", v_for="v, k in data.map", key="k")
+
+                html.Div("{{ data.loop?.name }}")
+                html.Div("{{ data.loop?.next?.name }}")
+                html.Div("{{ data.loop?.next?.next?.name }}")
+                html.Div("{{ data.loop?.next?.next?.next?.name }}")
+                html.Div("{{ data.loop?.next?.next?.next?.next?.name }}")
+
+
+def main():
+    app = Test()
+    app.server.start()
+
+
+if __name__ == "__main__":
+    main()

vue-components/src/core.js

@@ -1,4 +1,4 @@
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, isReactive, toRaw } from "vue";
 
 function updateWidget(id, objectState, widgetState) {
   if (widgetState.data._id !== id) {
@@ -14,8 +14,9 @@ function updateWidget(id, objectState, widgetState) {
 
 function updateServerState(serverState, partialState) {
   for (const [key, value] of Object.entries(partialState)) {
-    serverState[key] = JSON.stringify(value);
+    serverState[key] = JSON.stringify([value]);
   }
+  return serverState;
 }
 
 export class DataclassManager {
@@ -68,10 +69,42 @@ export class DataclassManager {
   }
 
   updateServer(id, name, value) {
-    this.pendingClientServerQueue.push([id, name, JSON.stringify(value)]);
+    if (this.isDataClass(id, name)) {
+      this.pendingClientServerQueue.push([
+        id,
+        name,
+        JSON.stringify([this.serializeDataClass(value)]),
+      ]);
+    } else {
+      this.pendingClientServerQueue.push([id, name, JSON.stringify([value])]);
+    }
     this.flushToServer();
   }
 
+  serializeDataClass(value) {
+    if (value === null) {
+      return value;
+    }
+    if (Array.isArray(value)) {
+      // array[id...]
+      return value.map((v) => v._id);
+    }
+
+    // dict[str, id] or direct dataclass
+    if (value._id) {
+      // => direct dataclass
+      return value._id;
+    }
+
+    // => dict[str,id]
+    const result = {};
+    for (const [k, v] of Object.entries(value)) {
+      result[k] = v._id;
+    }
+
+    return result;
+  }
+
   async flushToServer() {
     if (this.pendingFlushRequest) {
       return;
@@ -81,28 +114,9 @@ export class DataclassManager {
     let sendingSomething = 0;
     while (this.pendingClientServerQueue.length) {
       const [id, name, strValue] = this.pendingClientServerQueue.shift();
-      const value = JSON.parse(strValue);
+      const [value] = JSON.parse(strValue);
       let valueToSend = value;
 
-      // Handle nested dataclass
-      if (value !== null && this.isDataClass(id, name)) {
-        if (Array.isArray(value)) {
-          // array[id...]
-          valueToSend = value.map((v) => v._id);
-        } else {
-          // dict[str, id] or direct dataclass
-          if (value._id) {
-            // => direct dataclass
-            valueToSend = value._id;
-          } else {
-            // => dict[str,id]
-            valueToSend = {};
-            for (const [k, v] in Object.entries(value)) {
-              valueToSend[k] = v._id;
-            }
-          }
-        }
-      }
       if (this.dataStates[id].server[name] === strValue) {
         continue;
       }
@@ -184,7 +198,7 @@ export class DataclassManager {
       }
     } else if (Array.isArray(value)) {
       // array structure
-      const newArray = [];
+      const newArray = this.wrapValue(id, key, []);
       for (let i = 0; i < value.length; i++) {
         const objId = value[i];
         let needUpdate = false;
@@ -234,7 +248,7 @@ export class DataclassManager {
       }
     } else {
       // dict structure
-      const newStruct = reactive({});
+      const newStruct = this.wrapValue(id, key, {});
 
       for (const [k, objId] of Object.entries(value)) {
         if (!this.internalReactiveObjects[objId]) {
@@ -280,7 +294,7 @@ export class DataclassManager {
       this.dataTypes[id] = data.definition;
       this.dataStates[id] = {
         refs,
-        server: JSON.parse(JSON.stringify(data.state)),
+        server: updateServerState({}, data.state),
       };
 
       if (!this.typeDefinitions[data.definition]) {