json-diff-viewer-component 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-diff-viewer-component",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "description": "Vanilla JS web component for side-by-side JSON diff visualization",
   "keywords": [

package/src/lib/diff.js

@@ -1,4 +1,4 @@
-const TYPE = { UNCHANGED: 'unchanged', ADDED: 'added', REMOVED: 'removed', MODIFIED: 'modified' }
+const TYPE = { UNCHANGED: 'unchanged', ADDED: 'added', REMOVED: 'removed', MODIFIED: 'modified' };
 
 const typeOf = (v) => {
   if (v === null) return 'null';
@@ -8,9 +8,9 @@ const typeOf = (v) => {
 
 const isObj = (v) => v !== null && typeof v === 'object';
 
-const keys = (a, b) => [...new Set([...Object.keys(a || {}), ...Object.keys(b || {})])];
+const allKeys = (a, b) => [...new Set([...Object.keys(a || {}), ...Object.keys(b || {})])];
 
-const node = (key, type, left, right, extra = {}) => ({
+const createNode = (key, type, left, right, extra = {}) => ({
   key,
   type,
   left,
@@ -19,50 +19,69 @@ const node = (key, type, left, right, extra = {}) => ({
   ...extra
 });
 
-const container = (val, isArr) => {
-  if (isArr) return { isArray: true };
+const getContainerProps = (val) => {
+  if (Array.isArray(val)) return { isArray: true };
   if (isObj(val)) return { isObject: true };
   return {};
 };
 
-const childMap = (val, side) => (v, k) => node(
-  k, TYPE.UNCHANGED,
-  side === 'added' ? undefined : v,
-  side === 'added' ? v : undefined,
-  isObj(v) && { children: mapChildren(v, side), ...container(v, Array.isArray(v)) }
-)
+const mapChildrenForSide = (val, side) => {
+  const type = side === 'added' ? TYPE.ADDED : TYPE.REMOVED;
+  const createChildNode = (value, key) => {
+    const leftValue = side === 'added' ? undefined : value;
+    const rightValue = side === 'added' ? value : undefined;
+    const childExtra = isObj(value) ? {
+      children: mapChildrenForSide(value, side),
+      ...getContainerProps(value)
+    } : {};
+    return createNode(key, type, leftValue, rightValue, childExtra);
+  };
 
-const mapChildren = (val, side) => {
-  if (Array.isArray(val)) return val.map(childMap(val, side));
-  if (isObj(val)) return Object.entries(val).map(([k, v]) => childMap(val, side)(v, k));
+  if (Array.isArray(val)) {
+    return val.map((item, index) => createChildNode(item, index));
+  }
+  if (isObj(val)) {
+    return Object.entries(val).map(([k, v]) => createChildNode(v, k));
+  }
   return [];
 };
 
 const diffContainer = (left, right, key, isArr) => {
   const items = isArr
     ? Array.from({ length: Math.max(left?.length || 0, right?.length || 0) }, (_, i) => diff(left?.[i], right?.[i], i))
-    : keys(left, right).map(k => diff(left?.[k], right?.[k], k))
-  const hasDiff = items.some(c => c.hasDiff)
-  return node(key, hasDiff ? TYPE.MODIFIED : TYPE.UNCHANGED, left, right, { children: items, ...container(left, isArr) })
-}
+    : allKeys(left, right).map(k => diff(left?.[k], right?.[k], k));
+  const hasDiff = items.some(c => c.hasDiff);
+  return createNode(key, hasDiff ? TYPE.MODIFIED : TYPE.UNCHANGED, left, right, {
+    children: items,
+    ...getContainerProps(left)
+  });
+};
 
 const diff = (left, right, key = 'root') => {
   if (left === undefined) {
-    const extra = isObj(right) ? { children: mapChildren(right, 'added'), ...container(right, Array.isArray(right)) } : {};
-    return node(key, TYPE.ADDED, left, right, extra);
+    const extra = isObj(right) ? {
+      children: mapChildrenForSide(right, 'added'),
+      ...getContainerProps(right)
+    } : {};
+    return createNode(key, TYPE.ADDED, left, right, extra);
   }
   if (right === undefined) {
-    const extra = isObj(left) ? { children: mapChildren(left, 'removed'), ...container(left, Array.isArray(left)) } : {};
-    return node(key, TYPE.REMOVED, left, right, extra);
+    const extra = isObj(left) ? {
+      children: mapChildrenForSide(left, 'removed'),
+      ...getContainerProps(left)
+    } : {};
+    return createNode(key, TYPE.REMOVED, left, right, extra);
   }
   if (!isObj(left) && !isObj(right)) {
-    if (left === right) return node(key, TYPE.UNCHANGED, left, right);
-    return node(key, TYPE.MODIFIED, left, right);
+    return createNode(key, left === right ? TYPE.UNCHANGED : TYPE.MODIFIED, left, right);
   }
   if (typeOf(left) !== typeOf(right)) {
-    return node(key, TYPE.MODIFIED, left, right, { children: [], ...container(left, Array.isArray(left)) });
+    return createNode(key, TYPE.MODIFIED, left, right, {
+      children: [],
+      ...getContainerProps(left)
+    });
   }
   return diffContainer(left, right, key, Array.isArray(left));
 };
 
-export { diff, TYPE }
+export { diff, TYPE };

package/src/lib/styles.js

@@ -4,6 +4,7 @@ export default `
   --bg: #18181b; --bg2: #27272a; --bdr: #3f3f46;
   --txt: #fafafa; --dim: #a1a1aa;
   --key: #38bdf8; --str: #a78bfa; --num: #34d399; --bool: #fb923c; --nul: #f472b6; --br: #71717a;
+  --slider: var(--mod);
   display: flex; flex-direction: column; font: 13px 'JetBrains Mono', 'Fira Code', monospace;
   background: var(--bg); color: var(--txt); border-radius: 12px; overflow: hidden;
 }
@@ -16,6 +17,8 @@ export default `
 .node.root { padding-left: 0; }
 .line { display: flex; align-items: flex-start; gap: 0.5rem; padding: 2px 4px; border-radius: 4px; cursor: pointer; transition: background .15s; }
 .line:hover { background: rgba(0,0,0,.03); }
+.line.placeholder { cursor: default; pointer-events: none; }
+.line.placeholder:hover { background: transparent; }
 .tog { width: 1rem; flex-shrink: 0; color: var(--br); user-select: none; }
 .tog:hover { color: var(--txt); }
 .key { color: var(--key); }
@@ -41,12 +44,17 @@ export default `
 .preview::after { content: ' items'; }
 .stats { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--bg); border-bottom: 2px solid var(--bdr); font-size: 12px; }
 .stats-items { display: grid; grid-auto-flow: column; gap: 2rem; justify-content: start; }
-.stats-buttons { display: flex; gap: 0.5rem; }
-.btn-filter, .btn-collapse, .btn-expand { padding: 0.5rem; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 10px; color: var(--txt); cursor: pointer; transition: background .15s, border-color .15s; display: flex; align-items: center; justify-content: center; }
-.btn-filter svg, .btn-collapse svg, .btn-expand svg { width: 18px; height: 18px; }
-.btn-filter:hover, .btn-collapse:hover, .btn-expand:hover { background: rgba(0,0,0,.05); box-shadow: 0 0 4px var(--bdr); }
-.btn-filter .checkbox-icon { opacity: 0.3; transition: opacity .15s; }
-.btn-filter .checkbox-icon.checked { opacity: 1; }
+.stats-buttons { display: flex; gap: 0.5rem; align-items: center; }
+.switch { display: inline-block; cursor: pointer; }
+.checkbox { display: none; }
+.slider { width: 48px; height: 24px; background-color: var(--bdr); border-radius: 16px; overflow: hidden; display: flex; align-items: center; border: 3px solid transparent; transition: .3s; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25) inset; cursor: pointer; }
+.slider::before { content: ''; display: block; width: 100%; height: 100%; background-color: var(--txt); transform: translateX(-24px); border-radius: 16px; transition: .3s; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25); }
+.checkbox:checked ~ .slider::before { transform: translateX(24px); box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25); }
+.checkbox:checked ~ .slider { background-color: var(--slider); }
+.checkbox:active ~ .slider::before { transform: translate(0); }
+.btn-collapse, .btn-expand { padding: 0.5rem; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 10px; color: var(--txt); cursor: pointer; transition: background .15s, border-color .15s; display: flex; align-items: center; justify-content: center; }
+.btn-collapse svg, .btn-expand svg { width: 18px; height: 18px; }
+.btn-collapse:hover, .btn-expand:hover { background: rgba(0,0,0,.05); box-shadow: 0 0 4px var(--bdr); }
 .stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .35rem; }
 .stat .dot { width: 8px; height: 8px; }
 .stat-added .dot { background: var(--add); }

package/src/lib/viewer.js

@@ -12,6 +12,44 @@ const format = (val) => {
   return [JSON.stringify(val), "string"];
 };
 
+const buildPath = (path, key) => path ? `${path}.${key}` : String(key);
+
+const filterChildren = (children, showOnlyChanged) =>
+  showOnlyChanged ? children.filter((c) => c.hasDiff) : children;
+
+const isExpanded = (proxy, path) => proxy[path] !== false;
+
+const buildKeyHtml = (key, root, hidden = false) =>
+  root ? "" : `<span class="key"${hidden ? ' style="visibility: hidden;"' : ""}>${key}</span><span class="colon"${hidden ? ' style="visibility: hidden;"' : ""}>:</span>`;
+
+const buildRootClass = (root) => root ? " root" : "";
+
+const getBrackets = (isArray) => isArray ? ["[", "]"] : ["{", "}"];
+
+const collectStats = (tree) => {
+  const stats = Object.fromEntries(STAT_TYPES.map((t) => [t, 0]));
+  const walk = (node, path = "") => {
+    const currentPath = buildPath(path, node.key);
+    if (node.type !== TYPE.UNCHANGED) stats[node.type]++;
+    (node.children || []).forEach((child) => {
+      walk(child, currentPath);
+    });
+  };
+  walk(tree);
+  return stats;
+};
+
+const initializeExpanded = (tree, proxy) => {
+  const walk = (node, path = "") => {
+    const currentPath = buildPath(path, node.key);
+    if ((node.isArray || node.isObject) && !node.hasDiff) proxy[currentPath] = false;
+    (node.children || []).forEach((child) => {
+      walk(child, currentPath);
+    });
+  };
+  walk(tree);
+};
+
 class JsonDiffViewer extends HTMLElement {
   #left = null;
   #right = null;
@@ -26,7 +64,7 @@ class JsonDiffViewer extends HTMLElement {
     },
   });
   #stats = {};
-  #showOnlyChanged = false;
+  #showOnlyChanged = true;
 
   static observedAttributes = ["left", "right"];
   constructor() {
@@ -64,43 +102,45 @@ class JsonDiffViewer extends HTMLElement {
   #compute() {
     if (!this.#left || !this.#right) return;
     this.#tree = diff(this.#left, this.#right);
-    this.#stats = Object.fromEntries(STAT_TYPES.map((t) => [t, 0]));
-    this.#walk(this.#tree, (n) => {
-      if (n.type !== TYPE.UNCHANGED) this.#stats[n.type]++;
-    });
-    for (const k of Object.keys(this.#exp)) delete this.#exp[k];
-    this.#walk(this.#tree, (n, p) => {
-      if ((n.isArray || n.isObject) && !n.hasDiff) this.#exp[p] = false;
+    this.#stats = collectStats(this.#tree);
+    Object.keys(this.#exp).forEach((k) => {
+      delete this.#exp[k];
     });
+    initializeExpanded(this.#tree, this.#exp);
     this.#render();
   }
 
-  #walk(node, fn, path = "") {
-    const currentPath = path ? `${path}.${node.key}` : String(node.key);
-    fn(node, currentPath);
-    for (const child of node.children || []) this.#walk(child, fn, currentPath);
-  }
-
   #collapseAll() {
     if (!this.#tree) return;
     this.#rendering = true;
-    this.#walk(this.#tree, (n, p) => {
-      if (n.isArray || n.isObject) this.#proxy[p] = false;
-    });
+    const walk = (node, path = "") => {
+      const currentPath = buildPath(path, node.key);
+      if (node.isArray || node.isObject) this.#proxy[currentPath] = false;
+      (node.children || []).forEach((child) => {
+        walk(child, currentPath);
+      });
+    };
+    walk(this.#tree);
     this.#rendering = false;
     this.#render();
   }
 
   #expandAll() {
     this.#rendering = true;
-    for (const k of Object.keys(this.#exp)) delete this.#exp[k];
+    Object.keys(this.#exp).forEach((k) => {
+      delete this.#exp[k];
+    });
     this.#rendering = false;
     this.#render();
   }
 
   #render() {
-    if (!this.#tree)
-      return (this.shadowRoot.innerHTML = `<style>${styles}</style><div class="empty">Provide left and right JSON</div>`);
+    if (!this.#tree) {
+      this.shadowRoot.innerHTML = `<style>${styles}</style><div class="empty">Provide left and right JSON</div>`;
+      return;
+    }
+    const panel = this.shadowRoot.querySelector('.panel');
+    const scroll = { top: panel?.scrollTop || 0, left: panel?.scrollLeft || 0 };
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <div class="stats">
@@ -108,12 +148,10 @@ class JsonDiffViewer extends HTMLElement {
           ${STAT_TYPES.map((t) => `<div class="stat stat-${t}"><span class="dot"></span>${this.#stats[t]} ${t.replace("_", " ")}</div>`).join("")}
         </div>
         <div class="stats-buttons">
-          <button class="btn-filter" data-action="filter" aria-label="Show only changed" title="Show only changed">
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="checkbox-icon ${this.#showOnlyChanged ? "checked" : ""}">
-              <path fill="currentColor" d="M4.25 12a7.75 7.75 0 1 1 15.5 0a7.75 7.75 0 0 1-15.5 0" opacity="0.5" />
-              <path fill="currentColor" d="M8.25 12a3.75 3.75 0 1 0 7.5 0a3.75 3.75 0 0 0-7.5 0" />
-            </svg>
-          </button>
+          <label class="switch" aria-label="Show only changed" title="Show only changed">
+            <input type="checkbox" class="checkbox" data-action="filter" ${this.#showOnlyChanged ? "checked" : ""}>
+            <div class="slider"></div>
+          </label>
           <button class="btn-collapse" data-action="collapse" title="Collapse all"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9 15H6q-.425 0-.712-.288T5 14t.288-.712T6 13h4q.425 0 .713.288T11 14v4q0 .425-.288.713T10 19t-.712-.288T9 18zm6-6h3q.425 0 .713.288T19 10t-.288.713T18 11h-4q-.425 0-.712-.288T13 10V6q0-.425.288-.712T14 5t.713.288T15 6z"/></svg></button>
           <button class="btn-expand" data-action="expand" title="Expand all"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M7 17h3q.425 0 .713.288T11 18t-.288.713T10 19H6q-.425 0-.712-.288T5 18v-4q0-.425.288-.712T6 13t.713.288T7 14zM17 7h-3q-.425 0-.712-.288T13 6t.288-.712T14 5h4q.425 0 .713.288T19 6v4q0 .425-.288.713T18 11t-.712-.288T17 10z"/></svg></button>
         </div>
@@ -122,84 +160,113 @@ class JsonDiffViewer extends HTMLElement {
         ${["left", "right"]
           .map((side) => {
             const label = side === "left" ? "Original" : "Modified";
-            return `<div class="panel" data-side="${side}"><div class="header">${label}</div>${this.#node(this.#tree, side, "")}</div>`;
+            return `<div class="panel" data-side="${side}"><div class="header">${label}</div>${this.#renderNode(this.#tree, side, "")}</div>`;
           })
           .join("")}
       </div>`;
     this.#bind();
+    this.shadowRoot.querySelectorAll('.panel').forEach(p => {
+      p.scrollTop = scroll.top;
+      p.scrollLeft = scroll.left;
+    });
   }
 
-  #node(node, side, path, root = true) {
-    const currentPath = path ? `${path}.${node.key}` : String(node.key);
+  #renderNode(node, side, path, root = true, placeholderParam = false) {
+    const currentPath = buildPath(path, node.key);
     const value = node[side];
+    const rootClass = buildRootClass(root);
+    const placeholder = value === undefined && node.children?.length ? true : placeholderParam;
+    const hidden = placeholder ? ' style="visibility: hidden;"' : "";
+    const keyHtml = buildKeyHtml(node.key, root, placeholder);
+
+    if (value === undefined && !node.children?.length) {
+      const otherValue = side === 'left' ? node.right : node.left;
+      const [val, type] = format(otherValue);
+      const hiddenKey = buildKeyHtml(node.key, root, true);
+      return `<div class="node${rootClass}"><div class="line placeholder">${hiddenKey}<span class="val-${type}" style="visibility: hidden;">${val}</span></div></div>`;
+    }
+
+    if (value !== undefined && !node.isArray && !node.isObject) {
+      const [val, type] = format(value);
+      if (placeholder) {
+        return `<div class="node${rootClass}"><div class="line placeholder">${keyHtml}<span class="val-${type}"${hidden}>${val}</span></div></div>`;
+      }
+      const hasDiff = node.hasDiff && node.type !== TYPE.UNCHANGED;
+      const diffClass = hasDiff ? `diff-${node.type}` : "";
+      const nodeDiffClass = hasDiff ? ` ${diffClass}` : "";
+      return `<div class="node${rootClass}${nodeDiffClass}"><div class="line"><span class="tog"></span>${keyHtml}<span class="val-${type}">${val}</span></div></div>`;
+    }
+
+    const [open, close] = getBrackets(node.isArray);
+    const expanded = isExpanded(this.#proxy, currentPath);
+    const children = node.children || [];
+    const filtered = filterChildren(children, this.#showOnlyChanged);
+    const childrenHtml = expanded
+      ? filtered.map((c) => this.#renderNode(c, side, currentPath, false, placeholder)).join("")
+      : "";
+    const preview = `${filtered.length}`;
+
+    if (placeholder) {
+      if (!expanded) {
+        return `<div class="node${rootClass}"><div class="line placeholder">${keyHtml}<span class="br"${hidden}>${open}</span><span class="preview"${hidden}>${preview}</span><span class="br"${hidden}>${close}</span></div></div>`;
+      }
+      return `<div class="node${rootClass}"><div class="line placeholder">${keyHtml}<span class="br"${hidden}>${open}</span></div>${childrenHtml}<div class="line placeholder"><span class="br"${hidden}>${close}</span></div></div>`;
+    }
+
     const hasDiff = node.hasDiff && node.type !== TYPE.UNCHANGED;
     const diffClass = hasDiff ? `diff-${node.type}` : "";
-    const hasChildDiff = node.hasDiff && node.children?.some((c) => c.hasDiff);
+    const hasChildDiff = node.hasDiff && children.some((c) => c.hasDiff);
     const dotType = node.type === TYPE.UNCHANGED ? "modified" : node.type;
     const dot = hasChildDiff ? `<span class="dot dot-${dotType}"></span>` : "";
-    const keyHtml = root
-      ? ""
-      : `<span class="key">${node.key}</span><span class="colon">:</span>`;
-    const rootClass = root ? " root" : "";
     const nodeDiffClass = hasDiff && !hasChildDiff ? ` ${diffClass}` : "";
+    const toggle = expanded ? "▼" : "▶";
+    const dataPath = ` data-p="${currentPath}"`;
 
-    if (!node.isArray && !node.isObject) {
-      const [val, type] = format(value);
-      return `<div class="node${rootClass}${nodeDiffClass}"><div class="line"><span class="tog"></span>${dot}${keyHtml}<span class="val-${type}">${val}</span></div></div>`;
-    }
-
-    const [open, close] = node.isArray ? ["[", "]"] : ["{", "}"];
-    const isExpanded = this.#proxy[currentPath] !== false;
-    const filteredChildren = this.#showOnlyChanged
-      ? node.children?.filter((c) => c.hasDiff) || []
-      : node.children || [];
-    const childrenHtml =
-      filteredChildren
-        .map((c) => this.#node(c, side, currentPath, false))
-        .join("") || "";
-    const preview = `${filteredChildren.length}`;
-
-    if (!isExpanded) {
-      return `<div class="node${rootClass}${nodeDiffClass}"><div class="line" data-p="${currentPath}"><span class="tog">▶</span>${dot}${keyHtml}<span class="br">${open}</span><span class="preview">${preview}</span><span class="br">${close}</span></div></div>`;
+    if (!expanded) {
+      return `<div class="node${rootClass}${nodeDiffClass}"><div class="line"${dataPath}><span class="tog">${toggle}</span>${dot}${keyHtml}<span class="br">${open}</span><span class="preview">${preview}</span><span class="br">${close}</span></div></div>`;
     }
 
-    return `<div class="node${rootClass}${nodeDiffClass}"><div class="line" data-p="${currentPath}"><span class="tog">▼</span>${dot}${keyHtml}<span class="br">${open}</span></div>${childrenHtml}<div class="line"><span class="tog"></span><span class="br">${close}</span></div></div>`;
+    return `<div class="node${rootClass}${nodeDiffClass}"><div class="line"${dataPath}><span class="tog">${toggle}</span>${dot}${keyHtml}<span class="br">${open}</span></div>${childrenHtml}<div class="line"><span class="tog"></span><span class="br">${close}</span></div></div>`;
   }
 
   #bind() {
     const [leftPanel, rightPanel] = this.shadowRoot.querySelectorAll(".panel");
-    let syncing = false;
+    const syncing = { value: false };
 
     const syncScroll = (source) => () => {
-      if (syncing) return;
-      syncing = true;
+      if (syncing.value) return;
+      syncing.value = true;
       const target = source === leftPanel ? rightPanel : leftPanel;
       target.scrollTop = source.scrollTop;
       target.scrollLeft = source.scrollLeft;
-      syncing = false;
+      syncing.value = false;
     };
 
     leftPanel?.addEventListener("scroll", syncScroll(leftPanel));
     rightPanel?.addEventListener("scroll", syncScroll(rightPanel));
 
-    for (const el of this.shadowRoot.querySelectorAll("[data-p]")) {
+    Array.from(this.shadowRoot.querySelectorAll("[data-p]")).forEach((el) => {
       el.onclick = () => {
         this.#proxy[el.dataset.p] = this.#proxy[el.dataset.p] === false;
       };
-    }
+    });
 
-    this.shadowRoot
-      .querySelector('[data-action="filter"]')
-      ?.addEventListener("click", () => {
-        this.#showOnlyChanged = !this.#showOnlyChanged;
+    const filterCheckbox = this.shadowRoot.querySelector(`[data-action="filter"]`);
+    if (filterCheckbox) {
+      filterCheckbox.addEventListener("change", (e) => {
+        this.#showOnlyChanged = e.target.checked;
         this.#render();
       });
-    this.shadowRoot
-      .querySelector('[data-action="collapse"]')
-      ?.addEventListener("click", () => this.#collapseAll());
-    this.shadowRoot
-      .querySelector('[data-action="expand"]')
-      ?.addEventListener("click", () => this.#expandAll());
+    }
+
+    const actions = {
+      collapse: () => this.#collapseAll(),
+      expand: () => this.#expandAll(),
+    };
+
+    Object.entries(actions).forEach(([action, handler]) => {
+      this.shadowRoot.querySelector(`[data-action="${action}"]`)?.addEventListener("click", handler);
+    });
   }
 }