json-diff-viewer-component 0.1.0 → 0.2.0

package/README.md

@@ -1,8 +1,21 @@
-# json-diff-viewer
-
-**Compare JSON side-by-side, visually**
-
-A zero-dependency web component for visualizing JSON differences with synchronized scrolling, collapsible nodes, and syntax highlighting. Perfect for debugging, API comparisons, and configuration diffs
+<div align="center">
+    <img src="public/logo.svg" alt="logo" height="128" />
+    <h2>json-diff-viewer</h2>
+    <h5>
+        Compare JSON side-by-side, visually
+    </h5>
+    <p>
+        A zero-dependency web component for visualizing JSON differences
+        <br>
+        with synchronized scrolling, collapsible nodes, and syntax highlighting
+        <br>
+        Perfect for debugging, API comparisons, and configuration diffs
+    </p>
+    <img src="public/screenshot.png" alt="demo" width="80%" />
+    <h5>
+        <a href="https://metaory.github.io/json-diff-viewer-component/" target="_blank">metaory.github.io/json-diff-viewer-component</a>
+    </h5>
+</div>
 
 ## Features
 
@@ -101,7 +114,7 @@ watch(
       viewerRef.value.setData(props.left, props.right);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 ```
@@ -119,52 +132,52 @@ watch(
 
 ## Styling
 
-Override CSS custom properties:
+Customize the component by overriding CSS custom properties (design tokens) on the `json-diff-viewer` element. All tokens are defined on `:host` and can be overridden from outside the shadow DOM.
+
+### Design Tokens
 
 ```css
 json-diff-viewer {
   /* Diff colors */
-  --added: #22c55e;
-  --removed: #ef4444;
-  --modified: #eab308;
-  --type-changed: #f97316;
-  --unchanged: #71717a;
+  --add: #22c55e; /* Added items */
+  --rem: #ef4444; /* Removed items */
+  --mod: #eab308; /* Modified items */
+  --typ: #f97316; /* Type changed items */
+
+  /* Backgrounds */
+  --bg: #18181b; /* Main background */
+  --bg2: #27272a; /* Panel background */
 
-  /* Background */
-  --bg: #18181b;
-  --bg-panel: #27272a;
-  --border: #3f3f46;
+  /* Borders */
+  --bdr: #3f3f46; /* Border color */
 
   /* Text */
-  --text: #fafafa;
-  --text-dim: #a1a1aa;
-
-  /* Syntax */
-  --key: #38bdf8;
-  --string: #a78bfa;
-  --number: #34d399;
-  --boolean: #fb923c;
-  --null: #f472b6;
-  --bracket: #71717a;
-
-  /* Layout */
-  --radius: 12px;
-  --font: "JetBrains Mono", monospace;
+  --txt: #fafafa; /* Primary text */
+  --dim: #a1a1aa; /* Dimmed/secondary text */
+
+  /* Syntax highlighting */
+  --key: #38bdf8; /* Object keys */
+  --str: #a78bfa; /* String values */
+  --num: #34d399; /* Number values */
+  --bool: #fb923c; /* Boolean values */
+  --nul: #f472b6; /* Null values */
+  --br: #71717a; /* Brackets and braces */
 }
 ```
 
-### Light Theme
+Create your own theme by overriding these tokens. For example, a light theme:
 
 ```css
 json-diff-viewer {
   --bg: #fafafa;
-  --bg-panel: #ffffff;
-  --border: #e4e4e7;
-  --text: #18181b;
-  --text-dim: #71717a;
+  --bg2: #ffffff;
+  --bdr: #e4e4e7;
+  --txt: #18181b;
+  --dim: #71717a;
   --key: #0284c7;
-  --string: #7c3aed;
-  --number: #059669;
+  --str: #7c3aed;
+  --num: #059669;
+  /* ... override other tokens as needed */
 }
 ```
 

package/package.json

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

package/src/lib/diff.js

@@ -1,12 +1,29 @@
 const TYPE = { UNCHANGED: 'unchanged', ADDED: 'added', REMOVED: 'removed', MODIFIED: 'modified', TYPE_CHANGED: 'type_changed' }
 
-const typeOf = v => v === null ? 'null' : Array.isArray(v) ? 'array' : typeof v
-const isObj = v => v !== null && typeof v === 'object'
-const keys = (a, b) => [...new Set([...Object.keys(a || {}), ...Object.keys(b || {})])]
+const typeOf = (v) => {
+  if (v === null) return 'null';
+  if (Array.isArray(v)) return 'array';
+  return typeof v;
+};
 
-const node = (key, type, left, right, extra = {}) => ({ key, type, left, right, hasDiff: type !== TYPE.UNCHANGED, ...extra })
+const isObj = (v) => v !== null && typeof v === 'object';
 
-const container = (val, isArr) => isArr ? { isArray: true } : isObj(val) ? { isObject: true } : {}
+const keys = (a, b) => [...new Set([...Object.keys(a || {}), ...Object.keys(b || {})])];
+
+const node = (key, type, left, right, extra = {}) => ({
+  key,
+  type,
+  left,
+  right,
+  hasDiff: type !== TYPE.UNCHANGED,
+  ...extra
+});
+
+const container = (val, isArr) => {
+  if (isArr) return { isArray: true };
+  if (isObj(val)) return { isObject: true };
+  return {};
+};
 
 const childMap = (val, side) => (v, k) => node(
   k, TYPE.UNCHANGED,
@@ -15,9 +32,11 @@ const childMap = (val, side) => (v, k) => node(
   isObj(v) && { children: mapChildren(v, side), ...container(v, Array.isArray(v)) }
 )
 
-const mapChildren = (val, side) =>
-  Array.isArray(val) ? val.map(childMap(val, side)) :
-  isObj(val) ? Object.entries(val).map(([k, v]) => childMap(val, side)(v, k)) : []
+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));
+  return [];
+};
 
 const diffContainer = (left, right, key, isArr) => {
   const items = isArr
@@ -28,11 +47,23 @@ const diffContainer = (left, right, key, isArr) => {
 }
 
 const diff = (left, right, key = 'root') => {
-  if (left === undefined) return node(key, TYPE.ADDED, left, right, isObj(right) && { children: mapChildren(right, 'added'), ...container(right, Array.isArray(right)) })
-  if (right === undefined) return node(key, TYPE.REMOVED, left, right, isObj(left) && { children: mapChildren(left, 'removed'), ...container(left, Array.isArray(left)) })
-  if (!isObj(left) && !isObj(right)) return node(key, left === right ? TYPE.UNCHANGED : typeOf(left) !== typeOf(right) ? TYPE.TYPE_CHANGED : TYPE.MODIFIED, left, right)
-  if (typeOf(left) !== typeOf(right)) return node(key, TYPE.TYPE_CHANGED, left, right, { children: [], ...container(left, Array.isArray(left)) })
-  return diffContainer(left, right, key, Array.isArray(left))
-}
+  if (left === undefined) {
+    const extra = isObj(right) ? { children: mapChildren(right, 'added'), ...container(right, Array.isArray(right)) } : {};
+    return node(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);
+  }
+  if (!isObj(left) && !isObj(right)) {
+    if (left === right) return node(key, TYPE.UNCHANGED, left, right);
+    if (typeOf(left) !== typeOf(right)) return node(key, TYPE.TYPE_CHANGED, left, right);
+    return node(key, TYPE.MODIFIED, left, right);
+  }
+  if (typeOf(left) !== typeOf(right)) {
+    return node(key, TYPE.TYPE_CHANGED, left, right, { children: [], ...container(left, Array.isArray(left)) });
+  }
+  return diffContainer(left, right, key, Array.isArray(left));
+};
 
 export { diff, TYPE }

package/src/lib/styles.js

@@ -44,8 +44,11 @@ export default `
 .preview::after { content: ' items'; }
 .stats { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--bg); border-bottom: 2px solid var(--bdr); font-size: 12px; }
 .stats-buttons { display: flex; gap: 0.5rem; }
-.btn-collapse, .btn-expand { padding: 0.35rem 0.75rem; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; color: var(--txt); font-size: 11px; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
-.btn-collapse:hover, .btn-expand:hover { background: rgba(255,255,255,.05); border-color: var(--dim); }
+.btn-filter, .btn-collapse, .btn-expand { padding: 0.5rem; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; 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(255,255,255,.05); border-color: var(--dim); }
+.btn-filter .checkbox-icon { opacity: 0.3; transition: opacity .15s; }
+.btn-filter .checkbox-icon.checked { opacity: 1; }
 .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

@@ -1,109 +1,203 @@
-import { diff, TYPE } from './diff.js'
-import styles from './styles.js'
+import { diff, TYPE } from "./diff.js";
+import styles from "./styles.js";
 
-const STAT_TYPES = ['added', 'removed', 'modified', 'type_changed']
+const STAT_TYPES = ["added", "removed", "modified", "type_changed"];
 
-const format = val => ({
-  null: ['null', 'null'],
-  undefined: ['undefined', 'null'],
-  string: [val, 'string'],
-  number: [String(val), 'number'],
-  boolean: [String(val), 'boolean']
-})[val === null ? 'null' : typeof val] || [JSON.stringify(val), 'string']
+const format = (val) => {
+  if (val === null) return ["null", "null"];
+  if (val === undefined) return ["undefined", "null"];
+  const type = typeof val;
+  if (type === "string") return [val, "string"];
+  if (type === "number" || type === "boolean") return [String(val), type];
+  return [JSON.stringify(val), "string"];
+};
 
 class JsonDiffViewer extends HTMLElement {
-  #left = null
-  #right = null
-  #tree = null
-  #exp = {}
-  #proxy = new Proxy(this.#exp, { set: (t, k, v) => (t[k] = v, this.#render(), true) })
-  #stats = {}
-
-  static observedAttributes = ['left', 'right']
-  constructor() { super(); this.attachShadow({ mode: 'open' }) }
-  connectedCallback() { this.#render() }
-  attributeChangedCallback(n, _, v) { n === 'left' ? this.#left = JSON.parse(v) : this.#right = JSON.parse(v); this.#compute() }
-  set left(v) { this.#left = v; this.#compute() }
-  set right(v) { this.#right = v; this.#compute() }
-  get left() { return this.#left }
-  get right() { return this.#right }
-  setData(l, r) { this.#left = l; this.#right = r; this.#compute() }
+  #left = null;
+  #right = null;
+  #tree = null;
+  #exp = {};
+  #rendering = false;
+  #proxy = new Proxy(this.#exp, {
+    set: (t, k, v) => {
+      t[k] = v;
+      if (!this.#rendering) this.#render();
+      return true;
+    },
+  });
+  #stats = {};
+  #showOnlyChanged = false;
+
+  static observedAttributes = ["left", "right"];
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.#render();
+  }
+  attributeChangedCallback(name, _, value) {
+    if (name === "left") this.#left = JSON.parse(value);
+    if (name === "right") this.#right = JSON.parse(value);
+    this.#compute();
+  }
+  set left(v) {
+    this.#left = v;
+    this.#compute();
+  }
+  set right(v) {
+    this.#right = v;
+    this.#compute();
+  }
+  get left() {
+    return this.#left;
+  }
+  get right() {
+    return this.#right;
+  }
+  setData(left, right) {
+    this.#left = left;
+    this.#right = right;
+    this.#compute();
+  }
 
   #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 => n.type !== TYPE.UNCHANGED && this.#stats[n.type]++)
-    for (const k in this.#exp) delete this.#exp[k]
-    this.#walk(this.#tree, (n, p) => (n.isArray || n.isObject) && !n.hasDiff && (this.#exp[p] = false))
-    this.#render()
+    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.#render();
   }
 
-  #walk(node, fn, path = '') {
-    const p = path ? `${path}.${node.key}` : String(node.key)
-    fn(node, p)
-    for (const c of node.children || []) this.#walk(c, fn, p)
+  #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.#walk(this.#tree, (n, p) => (n.isArray || n.isObject) && (this.#exp[p] = false))
-    this.#render()
+    if (!this.#tree) return;
+    this.#rendering = true;
+    this.#walk(this.#tree, (n, p) => {
+      if (n.isArray || n.isObject) this.#proxy[p] = false;
+    });
+    this.#rendering = false;
+    this.#render();
   }
 
   #expandAll() {
-    for (const k in this.#exp) delete this.#exp[k]
-    this.#render()
+    this.#rendering = true;
+    for (const k of Object.keys(this.#exp)) 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)
+      return (this.shadowRoot.innerHTML = `<style>${styles}</style><div class="empty">Provide left and right JSON</div>`);
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <div class="stats">
-        ${STAT_TYPES.map(t => `<div class="stat stat-${t}"><span class="dot"></span>${this.#stats[t]} ${t.replace('_', ' ')}</div>`).join('')}
+        ${STAT_TYPES.map((t) => `<div class="stat stat-${t}"><span class="dot"></span>${this.#stats[t]} ${t.replace("_", " ")}</div>`).join("")}
         <div class="stats-buttons">
-          <button class="btn-collapse" data-action="collapse">Collapse All</button>
-          <button class="btn-expand" data-action="expand">Expand All</button>
+          <button class="btn-filter" data-action="filter" aria-label="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="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+            </svg>
+          </button>
+          <button class="btn-collapse" data-action="collapse"><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"><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>
       </div>
       <div class="container">
-        ${['left', 'right'].map(s => `<div class="panel" data-side="${s}"><div class="header">${s === 'left' ? 'Original' : 'Modified'}</div>${this.#node(this.#tree, s, '')}</div>`).join('')}
-      </div>`
-    this.#bind()
+        ${["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>`;
+          })
+          .join("")}
+      </div>`;
+    this.#bind();
   }
 
-  #node(n, side, path, root = true) {
-    const p = path ? `${path}.${n.key}` : String(n.key)
-    const val = n[side]
-    const cls = n.hasDiff && n.type !== TYPE.UNCHANGED ? `diff-${n.type}` : ''
-    const dot = n.hasDiff && n.children?.some(c => c.hasDiff) ? `<span class="dot dot-${n.type === TYPE.UNCHANGED ? 'modified' : n.type}"></span>` : ''
-    const key = root ? '' : `<span class="key">${n.key}</span><span class="colon">:</span>`
-
-    if (!n.isArray && !n.isObject) {
-      const [v, t] = format(val)
-      return `<div class="node${root ? ' root' : ''}"><div class="line ${cls}"><span class="tog"></span>${dot}${key}<span class="val-${t}">${v}</span></div></div>`
+  #node(node, side, path, root = true) {
+    const currentPath = path ? `${path}.${node.key}` : String(node.key);
+    const value = node[side];
+    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 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" : "";
+
+    if (!node.isArray && !node.isObject) {
+      const [val, type] = format(value);
+      return `<div class="node${rootClass}"><div class="line ${diffClass}"><span class="tog"></span>${dot}${keyHtml}<span class="val-${type}">${val}</span></div></div>`;
     }
 
-    const [open, close] = n.isArray ? ['[', ']'] : ['{', '}']
-    const exp = this.#proxy[p] !== false
-
-    if (!exp) return `<div class="node${root ? ' root' : ''}"><div class="line ${cls}" data-p="${p}"><span class="tog">▶</span>${dot}${key}<span class="br">${open}</span><span class="preview">${n.children?.length || 0}</span><span class="br">${close}</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}"><div class="line ${diffClass}" 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>`;
+    }
 
-    return `<div class="node${root ? ' root' : ''}"><div class="line ${cls}" data-p="${p}"><span class="tog">▼</span>${dot}${key}<span class="br">${open}</span></div>${n.children?.map(c => this.#node(c, side, p, false)).join('') || ''}<div class="line"><span class="tog"></span><span class="br">${close}</span></div></div>`
+    return `<div class="node${rootClass}"><div class="line ${diffClass}" 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>`;
   }
 
   #bind() {
-    const [l, r] = this.shadowRoot.querySelectorAll('.panel')
-    let sync = false
-    const scroll = src => e => { if (sync) return; sync = true; const t = src === l ? r : l; t.scrollTop = src.scrollTop; t.scrollLeft = src.scrollLeft; sync = false }
-    l?.addEventListener('scroll', scroll(l))
-    r?.addEventListener('scroll', scroll(r))
-    for (const el of this.shadowRoot.querySelectorAll('[data-p]')) el.onclick = () => (this.#proxy[el.dataset.p] = this.#proxy[el.dataset.p] === false)
-    this.shadowRoot.querySelector('[data-action="collapse"]')?.addEventListener('click', () => this.#collapseAll())
-    this.shadowRoot.querySelector('[data-action="expand"]')?.addEventListener('click', () => this.#expandAll())
+    const [leftPanel, rightPanel] = this.shadowRoot.querySelectorAll(".panel");
+    let syncing = false;
+
+    const syncScroll = (source) => () => {
+      if (syncing) return;
+      syncing = true;
+      const target = source === leftPanel ? rightPanel : leftPanel;
+      target.scrollTop = source.scrollTop;
+      target.scrollLeft = source.scrollLeft;
+      syncing = false;
+    };
+
+    leftPanel?.addEventListener("scroll", syncScroll(leftPanel));
+    rightPanel?.addEventListener("scroll", syncScroll(rightPanel));
+
+    for (const el of this.shadowRoot.querySelectorAll("[data-p]")) {
+      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;
+        this.#render();
+      });
+    this.shadowRoot
+      .querySelector('[data-action="collapse"]')
+      ?.addEventListener("click", () => this.#collapseAll());
+    this.shadowRoot
+      .querySelector('[data-action="expand"]')
+      ?.addEventListener("click", () => this.#expandAll());
   }
 }
 
-customElements.define('json-diff-viewer', JsonDiffViewer)
-export { JsonDiffViewer }
+customElements.define("json-diff-viewer", JsonDiffViewer);
+export { JsonDiffViewer };