@yuneta/gobj-ui 7.23.143 → 7.23.145

package/src/json_view_helpers.js

@@ -5,7 +5,8 @@
  *      viewer).  Kept out of the gclass so it can be unit-tested with
  *      no DOM: collapsed-sentinel detection, path (segments) algebra,
  *      search matching, timestamp recognition/formatting, the JSON
- *      type discriminator and the text view's capped dump.
+ *      type discriminator and the text view's capped dump -- and the
+ *      differences of two documents, for the JSON pad's compare.
  *
  *      Path convention mirrors the C kernel (kw_collapse / kw_find_path
  *      in kwid.c): segments are joined by the backtick delimiter, arrays
@@ -14,6 +15,7 @@
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
+import {json2flat, flat_diff} from "@yuneta/gobj-js";
 
 /*
  *  Path delimiter, identical to the kernel's `delimiter` in kwid.c.
@@ -397,3 +399,56 @@ export function count_branches(value)
     }
     return n;
 }
+
+/************************************************************
+ *  What differs between two documents: one row per id of
+ *  their flat form (json2flat), sorted by id in natural order,
+ *  so `[2]` comes before `[10]`:
+ *
+ *      [{id, kind: "added"|"removed"|"changed", from?, to?}]
+ *
+ *  `from` is the first document's value and `to` the second's:
+ *  an added row has no `from`, a removed row no `to`.
+ *
+ *  Two roots that are not containers of the same kind have no
+ *  ids in common to compare by: they are one value each, and
+ *  the row that says they differ has the empty id.
+ *
+ *  Throws what json2flat throws (a document too deep).
+ ************************************************************/
+export function json_diff_rows(doc_a, doc_b)
+{
+    const kind_of = (v) => {
+        if(Array.isArray(v)) {
+            return "array";
+        }
+        if(v !== null && typeof v === "object") {
+            return "object";
+        }
+        return "scalar";
+    };
+
+    let kind_a = kind_of(doc_a);
+    if(kind_a === "scalar" || kind_a !== kind_of(doc_b)) {
+        if(JSON.stringify(doc_a) === JSON.stringify(doc_b)) {
+            return [];
+        }
+        return [{id: "", kind: "changed", from: doc_a, to: doc_b}];
+    }
+
+    let diff = flat_diff(json2flat(doc_a), json2flat(doc_b));
+    let rows = [];
+    for(const id of Object.keys(diff.added)) {
+        rows.push({id: id, kind: "added", to: diff.added[id]});
+    }
+    for(const id of Object.keys(diff.removed)) {
+        rows.push({id: id, kind: "removed", from: diff.removed[id]});
+    }
+    for(const id of Object.keys(diff.changed)) {
+        rows.push({id: id, kind: "changed", from: diff.changed[id].from, to: diff.changed[id].to});
+    }
+
+    const collator = new Intl.Collator("en", {numeric: true});
+    rows.sort((x, y) => collator.compare(x.id, y.id));
+    return rows;
+}

package/src/json_view_helpers.test.js

@@ -21,9 +21,52 @@ import {
     is_pure_collection,
     has_branch,
     count_branches,
+    json_diff_rows,
 } from "./json_view_helpers.js";
 
 
+/*============================================================
+ *      json_diff_rows
+ *============================================================*/
+test("json_diff_rows: two equal documents have no rows, whatever their key order", () => {
+    expect(json_diff_rows({a: 1, b: [1, {c: null}]}, {b: [1, {c: null}], a: 1})).toEqual([]);
+});
+
+test("json_diff_rows: one row per differing id, sorted by id", () => {
+    let a = {a: 1, b: {c: [1, 2]}, e: "x"};
+    let b = {a: 2, b: {c: [1]}, d: {}, e: "x"};
+    expect(json_diff_rows(a, b)).toEqual([
+        {id: "a",       kind: "changed", from: 1, to: 2},
+        {id: "b`c`[1]", kind: "removed", from: 2},
+        {id: "d",       kind: "added",   to: {}},
+    ]);
+});
+
+test("json_diff_rows: array indexes sort as numbers, [2] before [10]", () => {
+    let a = [];
+    let b = [];
+    for(let i = 0; i < 12; i++) {
+        a.push(i);
+        b.push((i === 2 || i === 10)? -1 : i);
+    }
+    expect(json_diff_rows(a, b).map((r) => r.id)).toEqual(["[2]", "[10]"]);
+});
+
+test("json_diff_rows: a leaf that becomes a container is one id gone and one new", () => {
+    expect(json_diff_rows({a: 1}, {a: {b: 2}})).toEqual([
+        {id: "a",   kind: "removed", from: 1},
+        {id: "a`b", kind: "added",   to: 2},
+    ]);
+});
+
+test("json_diff_rows: roots that are not containers of one kind are one value each", () => {
+    expect(json_diff_rows(1, 1)).toEqual([]);
+    expect(json_diff_rows("x", "y")).toEqual([{id: "", kind: "changed", from: "x", to: "y"}]);
+    expect(json_diff_rows({}, [])).toEqual([{id: "", kind: "changed", from: {}, to: []}]);
+    expect(json_diff_rows(null, {a: 1})).toEqual([{id: "", kind: "changed", from: null, to: {a: 1}}]);
+});
+
+
 /*============================================================
  *      json_type
  *============================================================*/

package/src/yui_icons.css

@@ -392,3 +392,15 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill-rule='evenodd' d='M190 32h68l150 448h-72l-40-120H152l-40 120H40L190 32zM172 300h104l-52-158-52 158z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill-rule='evenodd' d='M190 32h68l150 448h-72l-40-120H152l-40 120H40L190 32zM172 300h104l-52-158-52 158z'/%3E%3C/svg%3E");
 }
+
+/*  Two columns, for "a second pane beside the first" (the JSON pad).  */
+.yi-columns::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='M0 96C0 60.7 28.7 32 64 32h384c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 32v288h160V128H64zm224 0v288h160V128H288z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='M0 96C0 60.7 28.7 32 64 32h384c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 32v288h160V128H64zm224 0v288h160V128H288z'/%3E%3C/svg%3E");
+}
+
+/*  Two opposite arrows, for "compare" (the JSON pad's differences).  */
+.yi-right-left::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 64L480 160 352 256V192H64V128H352ZM160 256L32 352 160 448V384H448V320H160Z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 64L480 160 352 256V192H64V128H352ZM160 256L32 352 160 448V384H448V320H160Z'/%3E%3C/svg%3E");
+}