feat(deepReactive): add deepReactive client detection

Author: jourdain

examples/deep_reactive_v2.py

@@ -0,0 +1,68 @@
+from trame.app import TrameApp
+from trame.ui.html import DivLayout
+from trame.widgets import html
+from trame_dataclass.v2 import StateDataModel, Sync, watch
+
+
+class Data(StateDataModel):
+    values_reactive = Sync(list[int], list, client_deep_reactive=True)
+    values = Sync(list[int], list)
+
+    @watch("values_reactive")
+    def _on_values_reactive(self, v):
+        print("values_reactive", v)
+
+    @watch("values")
+    def _on_values(self, _):
+        print("values")
+
+
+class Test(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server)
+        self.data = Data(self.server)
+        self.data.values = [1, 2, 3, 4, 5]
+        self.data.values_reactive = [1, 2, 3, 4, 5]
+        self._build_ui()
+
+    def _build_ui(self):
+        with DivLayout(self.server) as self.ui:
+            with self.data.provide_as("data"):
+                html.Hr()
+                html.Div("Regular Array")
+                html.Button("Add", click="data.values.push(1)")
+                html.Hr()
+                with html.Div(v_for="v, i in data.values", key="i"):
+                    html.Input(
+                        type="range",
+                        v_model_number="data.values[i]",
+                        min=0,
+                        max=10,
+                        step=1,
+                    )
+                    html.Button("+ (js)", click="data.values[i]++")
+                    html.Button("- (js)", click="data.values[i]--")
+                html.Hr()
+                html.Div("Deep reactive Array")
+                html.Button("Add", click="data.values_reactive.push(1)")
+                html.Hr()
+                with html.Div(v_for="v, i in data.values_reactive", key="i"):
+                    html.Input(
+                        type="range",
+                        v_model_number="data.values_reactive[i]",
+                        min=0,
+                        max=10,
+                        step=1,
+                    )
+                    html.Button("+ (js)", click="data.values_reactive[i]++")
+                    html.Button("- (js)", click="data.values_reactive[i]--")
+                html.Hr()
+
+
+def main():
+    app = Test()
+    app.server.start()
+
+
+if __name__ == "__main__":
+    main()

src/trame_dataclass/module/protocol_v2.py

@@ -1,3 +1,4 @@
+from loguru import logger
 from wslink import register as export_rpc
 from wslink.websocket import LinkProtocol
 
@@ -10,6 +11,7 @@ def compute_definition(trame_dataclass_class):
         "name": trame_dataclass_class.__name__,
         "dataclass_containers": list(trame_dataclass_class.DATACLASS_NAMES),
         "client_only": list(client_only),
+        "deep_reactive": list(trame_dataclass_class.CLIENT_DEEP_REACTIVE),
     }
 
 
@@ -77,6 +79,7 @@ def update_state(self, msg):
         for dc_id, state in msg.items():
             obj = get_instance(dc_id)
             if obj is not None:
+                logger.debug("Update state {}: {}", dc_id, state)
                 obj.update_from_client_state(state)
 
     def push_delta(self, msg):

src/trame_dataclass/v2.py

@@ -125,7 +125,13 @@ def _save_field(name, src, dst, encoder=None):
 
 def _setup_class_fields(owner):
     # set
-    for key in ["FIELD_NAMES", "DATACLASS_NAMES", "CLIENT_NAMES", "CLIENT_ONLY_NAMES"]:
+    for key in [
+        "FIELD_NAMES",
+        "DATACLASS_NAMES",
+        "CLIENT_NAMES",
+        "CLIENT_ONLY_NAMES",
+        "CLIENT_DEEP_REACTIVE",
+    ]:
         if not hasattr(owner, key):
             setattr(owner, key, set())
     # dict
@@ -479,8 +485,10 @@ def __init__(
         default=None,
         convert: FieldEncoder = None,
         has_dataclass: bool = False,
+        client_deep_reactive: bool = False,
         type_checking: TypeValidation = TypeValidation.WARNING,
     ):
+        self._client_deep_reactive = client_deep_reactive
         self._type_checking = type_checking
         self._type = get_origin(_type) or _type
         if self._type in (Union, types.UnionType):
@@ -547,6 +555,9 @@ class Sync(ServerOnly):
     def __set_name__(self, owner, name):
         _setup_class_fields(owner)
 
+        if self._client_deep_reactive:
+            owner.CLIENT_DEEP_REACTIVE.add(name)
+
         if self._has_dataclass:
             owner.DATACLASS_NAMES.add(name)
 
@@ -562,6 +573,10 @@ def __set_name__(self, owner, name):
 class ClientOnly(ServerOnly):
     def __set_name__(self, owner, name):
         _setup_class_fields(owner)
+
+        if self._client_deep_reactive:
+            owner.CLIENT_DEEP_REACTIVE.add(name)
+
         self._name = name
         owner.TYPE_CHECKING[name] = self._type_checking
         owner.FIELD_NAMES.add(name)

vue-components/src/core.js

@@ -12,6 +12,12 @@ function updateWidget(id, objectState, widgetState) {
   Object.assign(widgetState.data, objectState.refs);
 }
 
+function updateServerState(serverState, partialState) {
+  for (const [key, value] of Object.entries(partialState)) {
+    serverState[key] = JSON.stringify(value);
+  }
+}
+
 export class DataclassManager {
   constructor() {
     this.client = null;
@@ -24,6 +30,9 @@ export class DataclassManager {
     this.dataToVue = {};
     this.pendingClientServerQueue = [];
     this.pendingFlushRequest = 0;
+    this.triggers = {};
+    this.deepReactiveWatchers = {};
+    this.pendingDeepReactives = {};
   }
 
   connect(client) {
@@ -40,10 +49,13 @@ export class DataclassManager {
           return;
         }
 
-        Object.assign(this.dataStates[id].server, state);
+        // Capture server state for update comparison
+        updateServerState(this.dataStates[id].server, state);
         for (const [key, value] of Object.entries(state)) {
           if (this.isDataClass(id, key)) {
             await this.handleNestedDataClass(id, key, value);
+          } else if (this.isDeepReactive(id, key)) {
+            this.dataStates[id].refs[key].value = reactive(value);
           } else {
             this.dataStates[id].refs[key].value = value;
           }
@@ -52,7 +64,7 @@ export class DataclassManager {
   }
 
   updateServer(id, name, value) {
-    this.pendingClientServerQueue.push([id, name, value]);
+    this.pendingClientServerQueue.push([id, name, JSON.stringify(value)]);
     this.flushToServer();
   }
 
@@ -64,11 +76,12 @@ export class DataclassManager {
     const msg = {};
     let sendingSomething = 0;
     while (this.pendingClientServerQueue.length) {
-      const [id, name, value] = this.pendingClientServerQueue.shift();
+      const [id, name, strValue] = this.pendingClientServerQueue.shift();
+      const value = JSON.parse(strValue);
       let valueToSend = value;
 
       // Handle nested dataclass
-      if (value !== null && this.isDataClass(id, name)) {
+      if (valueToSend !== null && this.isDataClass(id, name)) {
         if (Array.isArray(value)) {
           // array[id...]
           valueToSend = value.map((v) => v._id);
@@ -86,10 +99,13 @@ export class DataclassManager {
           }
         }
       }
-      if (
-        JSON.stringify(this.dataStates[id].server[name]) ===
-        JSON.stringify(valueToSend)
-      ) {
+      if (this.dataStates[id].server[name] === strValue) {
+        console.log(
+          "skip",
+          valueToSend,
+          "server>",
+          this.dataStates[id].server[name],
+        );
         continue;
       }
       if (!msg[id]) {
@@ -116,13 +132,45 @@ export class DataclassManager {
   }
 
   isDataClass(id, name) {
-    return this.typeDefinitions[
-      this.dataTypes[id]
-    ].dataclass_containers.includes(name);
+    return this.typeDefinitions[this.dataTypes[id]].dataclass_containers[name];
   }
 
   isClientOnly(id, name) {
-    return this.typeDefinitions[this.dataTypes[id]]?.client_only.includes(name);
+    return this.typeDefinitions[this.dataTypes[id]]?.client_only[name];
+  }
+
+  isDeepReactive(id, name) {
+    const result =
+      this.typeDefinitions[this.dataTypes[id]]?.deep_reactive[name];
+    return result;
+  }
+
+  makeDeepReactive(id, name, value) {
+    console.log("makeDeepReactive", id, name, value);
+    const fullKey = `${id}::${name}`;
+    const unwatch = this.deepReactiveWatchers[fullKey];
+    if (unwatch) {
+      console.log("unwatch");
+      unwatch();
+    }
+    this.deepReactiveWatchers[fullKey] = null;
+
+    if (value === null || value === undefined) {
+      return value;
+    }
+
+    const r = reactive(value);
+    const trigger = this.triggers[fullKey];
+    if (!trigger) {
+      if (!this.pendingDeepReactives[id]) {
+        this.pendingDeepReactives[id] = [];
+      }
+      this.pendingDeepReactives[id].push([fullKey, r]);
+    } else {
+      console.log("add watch", fullKey);
+      this.deepReactiveWatchers[fullKey] = watch(r, trigger);
+    }
+    return r;
   }
 
   async handleNestedDataClass(id, key, value) {
@@ -156,7 +204,19 @@ export class DataclassManager {
         }
       }
       if (!this.dataStates[id].refs[key]) {
-        this.dataStates[id].refs[key] = ref(newArray);
+        if (this.isDeepReactive(id, key)) {
+          this.dataStates[id].refs[key] = ref(
+            this.makeDeepReactive(id, key, newArray),
+          );
+        } else {
+          this.dataStates[id].refs[key] = ref(newArray);
+        }
+      } else if (this.isDeepReactive(id, key)) {
+        this.dataStates[id].refs[key].value = this.makeDeepReactive(
+          id,
+          key,
+          newArray,
+        );
       } else {
         this.dataStates[id].refs[key].value = newArray;
       }
@@ -204,6 +264,19 @@ export class DataclassManager {
     }
   }
 
+  getTrigger(id, key, refs) {
+    const fullKey = `${id}::${key}`;
+    const fn = this.triggers[fullKey];
+    if (fn) {
+      return fn;
+    }
+    this.triggers[fullKey] = () => {
+      this.updateServer(id, key, refs[key].value);
+      console.log("push to server", id, key);
+    };
+    return this.triggers[fullKey];
+  }
+
   async fetchState(id) {
     const refs = { _id: id };
     const data = await this.client
@@ -212,7 +285,10 @@ export class DataclassManager {
       .call("trame.dataclass.state.get", [id]);
 
     this.dataTypes[id] = data.definition;
-    this.dataStates[id] = { refs, server: data.state };
+    this.dataStates[id] = {
+      refs,
+      server: JSON.parse(JSON.stringify(data.state)),
+    };
 
     if (!this.typeDefinitions[data.definition]) {
       await this.fetchDefinition(data.definition);
@@ -223,14 +299,22 @@ export class DataclassManager {
       if (this.isDataClass(id, key)) {
         refs[key] = ref(null);
         await this.handleNestedDataClass(id, key, value);
+      } else if (this.isDeepReactive(id, key)) {
+        refs[key] = ref(this.makeDeepReactive(id, key, value));
       } else {
         refs[key] = ref(value);
       }
       if (!this.isClientOnly(id, key)) {
-        watch(
-          () => refs[key].value,
-          (v) => this.updateServer(id, key, v),
-        );
+        const trigger = this.getTrigger(id, key, refs);
+        watch(refs[key], trigger);
+
+        const items = this.pendingDeepReactives[id] || [];
+        while (items.length) {
+          const [fullKey, r] = items.pop();
+          const trigger = this.getTrigger(id, key, refs);
+          this.deepReactiveWatchers[fullKey] = watch(r, trigger);
+          console.log("watch", fullKey, r);
+        }
       }
     }
 
@@ -251,7 +335,19 @@ export class DataclassManager {
       .getSession()
       .call("trame.dataclass.definition.get", [id]);
 
-    this.typeDefinitions[id] = data;
+    this.typeDefinitions[id] = {
+      ...data,
+      dataclass_containers: {},
+      client_only: {},
+      deep_reactive: {},
+    };
+    const toDict = ["dataclass_containers", "client_only", "deep_reactive"];
+    while (toDict.length) {
+      const arrayName = toDict.pop();
+      for (let i = 0; i < data[arrayName].length; i++) {
+        this.typeDefinitions[id][arrayName][data[arrayName][i]] = 1;
+      }
+    }
   }
 
   unlink(dataId, componentId) {