correcly apply client-side JSON patch

Author: rmorshea

src/client/packages/idom-client-react/src/utils.js

@@ -2,31 +2,50 @@ import React from "react";
 import jsonpatch from "fast-json-patch";
 
 export function useJsonPatchCallback(initial) {
-  const model = React.useRef(initial);
+  const doc = React.useRef(initial);
   const forceUpdate = useForceUpdate();
 
   const applyPatch = React.useCallback(
-    (pathPrefix, patch) => {
-      if (pathPrefix) {
-        patch = patch.map((op) =>
-          Object.assign({}, op, { path: pathPrefix + op.path })
-        );
+    (path, patch) => {
+      if (!path) {
+        // We CANNOT mutate the part of the document because React checks some
+        // attributes of the model (e.g. model.attributes.style is checked for
+        // identity).
+        doc.current = applyNonMutativePatch(doc, patch, false, false, true);
+      } else {
+        // We CAN mutate the document here though because we know that nothing above
+        // The patch `path` is changing. Thus, maintaining the identity for that section
+        // of the model is accurate.
+        applyMutativePatch(doc.current, [
+          {
+            op: "replace",
+            path: path,
+            // We CANNOT mutate the part of the document where the actual patch is being
+            // applied. Instead we create a copy because React checks some attributes of
+            // the model (e.g. model.attributes.style is checked for identity). The part
+            // of the document above the `path` can be mutated though because we know it
+            // has not changed.
+            value: applyNonMutativePatch(
+              jsonpatch.getValueByPointer(doc.current, path),
+              patch
+            ),
+          },
+        ]);
       }
-      // Always return a newDocument because React checks some attributes of the model
-      // (e.g. model.attributes.style is checked for identity)
-      model.current = jsonpatch.applyPatch(
-        model.current,
-        patch,
-        false,
-        false,
-        true
-      ).newDocument;
       forceUpdate();
     },
-    [model]
+    [doc]
   );
 
-  return [model.current, applyPatch];
+  return [doc.current, applyPatch];
+}
+
+function applyNonMutativePatch(doc, patch) {
+  return jsonpatch.applyPatch(doc, patch, false, false, true).newDocument;
+}
+
+function applyMutativePatch(doc, patch) {
+  jsonpatch.applyPatch(doc, patch, false, true, true).newDocument;
 }
 
 function useForceUpdate() {

temp.py

@@ -0,0 +1,103 @@
+import random
+
+import idom
+
+
+@idom.component
+def RangeWords(text):
+    highlight_range, set_highlight_range = idom.hooks.use_state([])
+
+    def update_range(index):
+        if highlight_range == []:
+            set_highlight_range([index])
+        elif highlight_range == [index]:
+            set_highlight_range([])
+        elif index in [highlight_range[-1], highlight_range[0]]:
+            set_highlight_range([index])
+        elif index < highlight_range[0]:
+            set_highlight_range(list(range(index, highlight_range[0] + 1)))
+        else:
+            set_highlight_range(list(range(highlight_range[0], index + 1)))
+
+    divs = [
+        idom.html.div(
+            {
+                "onClick": lambda e, i=i: update_range(i),
+                "style": {
+                    "backgroundColor": "aquamarine"
+                    if i in highlight_range
+                    else "white",
+                    "display": "inline",
+                    "padding": "5px",
+                },
+            },
+            word,
+            key=str(random.random()),
+        )
+        for i, word in enumerate(text.split())
+    ]
+
+    return idom.html.div(
+        {
+            "style": {
+                "width": "95%",
+                "display": "flex",
+                "flex-wrap": "wrap",
+                "margin": "5px",
+            }
+        },
+        divs,
+    )
+
+
+@idom.component
+def WorkSentDiv(tfname):
+
+    sid, set_sid = idom.hooks.use_state(0)
+
+    works = {
+        "bubs": [
+            "it was the best of times, it was the blurst of times.",
+            "they will break upon this fortress like water on rock.",
+            "ah those heady days of yore.",
+            "forge ahead, no matter the cost.",
+            "bring me the head of alfredo garcia.",
+            "there were monsters aboard that ship, and truly we were them.",
+        ],
+        "zugzug": [
+            "나도너도나도 웰웰웰 아하아하.",
+            "섬웨어 오버 더 레인보.",
+            "유 캔트 듀 댓 온 테레비즌.",
+            "컴퓨터 프로그램잉.",
+            "어메이징 테일즈.",
+            "대츠 오케이!",
+            "데르즈 노 비지니스 라이크 쇼 비지니스",
+        ],
+    }
+
+    def get_stext(tfname, sid):
+        if sid < len(works[tfname]):
+            return works[tfname][sid]
+        else:
+            return "no more sentences"
+
+    def btn_click(count):
+        if sid + count < 0:
+            return
+
+        set_sid(sid + count)
+
+    return idom.html.div(
+        idom.html.div(f"sentence id: {sid}"),
+        idom.html.button({"onClick": lambda e: btn_click(-1)}, "Prev"),
+        idom.html.button({"onClick": lambda e: btn_click(1)}, "Next"),
+        RangeWords(get_stext(tfname, sid)),
+    )
+
+
+@idom.component
+def DualWorkView():
+    return idom.html.div(WorkSentDiv("bubs"), WorkSentDiv("zugzug"))
+
+
+idom.run(DualWorkView)