json-diff-viewer-component 0.6.1 → 0.6.3

package/README.md

@@ -18,10 +18,10 @@
 
 ## Features
 
-- Deep nested JSON comparison
+- Nested JSON comparison
 - Side-by-side synchronized scrolling
 - Collapsible nodes (synced between panels)
-- Diff indicators bubble up to parent nodes
+- Diff indicators roll up to parent nodes
 - Stats summary (added/removed/modified)
 - Show only changed filter toggle
 - Syntax highlighting
@@ -36,7 +36,7 @@ npm i json-diff-viewer-component
 
 ## Usage
 
-### ES Module
+Import the package to register the `<json-diff-viewer>` custom element, then call `setData()` with both JSON values:
 
 ```js
 import "json-diff-viewer-component";
@@ -45,8 +45,16 @@ const viewer = document.querySelector("json-diff-viewer");
 viewer.setData(leftObj, rightObj);
 ```
 
+For testing or extension, the class is also exported:
+
+```js
+import { JsonDiffViewer } from "json-diff-viewer-component";
+```
+
 ### HTML Attributes
 
+Static JSON can be passed as attributes. Values must be valid JSON strings:
+
 ```html
 <json-diff-viewer
   left='{"name":"foo"}'
@@ -54,18 +62,28 @@ viewer.setData(leftObj, rightObj);
 ></json-diff-viewer>
 ```
 
+- `JSON.parse` parses attribute values. Invalid JSON throws at parse time.
+- Prefer `setData()` or property setters for dynamic or object data
+
 ### Properties
 
+Set `left` and `right` as JavaScript values. Set both before the viewer draws a diff:
+
 ```js
 viewer.left = { name: "foo" };
 viewer.right = { name: "bar" };
+
+viewer.left;  // read current left value
+viewer.right; // read current right value
 ```
 
-### Method
+### Built-in Controls
 
-```js
-viewer.setData(leftObj, rightObj);
-```
+The component toolbar includes:
+
+- **Show only changed**: filter toggle (default: **on**); hides unchanged nodes
+- **Collapse all** / **Expand all**: bulk expand/collapse
+- **Node toggles**: click any object/array line to expand/collapse (synced across both panels)
 
 <details>
 <summary>Framework Examples</summary>
@@ -131,7 +149,7 @@ watch(
 
 ## Styling
 
-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.
+Override CSS custom properties (design tokens) on `json-diff-viewer`. Tokens live on `:host`; you set them from outside the shadow DOM.
 
 ### Design Tokens
 
@@ -170,21 +188,27 @@ Create your own theme by overriding these tokens. For example, a light theme:
 
 ```css
 json-diff-viewer {
-  --bg: #fafafa;
-  --bg2: #ffffff;
-  --bdr: #e4e4e7;
-  --txt: #18181b;
-  --dim: #71717a;
-  --key: #0284c7;
-  --str: #7c3aed;
-  --num: #059669;
-  /* ... override other tokens as needed */
+  --add: #15803d;
+  --rem: #b91c1c;
+  --mod: #ca8a04;
+  --bg: #f4f4f4;
+  --bg2: #f9fafb;
+  --bdr: #d1d5db;
+  --txt: #030712;
+  --dim: #4b5563;
+  --slider: #d1d5db;
+  --key: #075985;
+  --str: #6d28d9;
+  --num: #047857;
+  --bool: #b45309;
+  --nul: #a21caf;
+  --br: #6b7280;
 }
 ```
 
 ### Sizing
 
-The component requires a defined height to enable scrolling. Without a height, the component will expand to fit all content.
+Set a height to get scrolling. Without one, the viewer grows to fit all content. Default border-radius is `12px`.
 
 ```css
 json-diff-viewer {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-diff-viewer-component",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "type": "module",
   "description": "Vanilla JS web component for side-by-side JSON diff visualization",
   "bugs": "https://github.com/metaory/json-diff-viewer-component/issues",
@@ -30,6 +30,6 @@
   },
   "devDependencies": {
     "@fontsource/bungee": "^5.2.7",
-    "vite": "^7.2.4"
+    "vite": "^8.0.16"
   }
 }

package/src/lib/viewer.js

@@ -2,6 +2,8 @@ import { diff, TYPE } from "./diff.js";
 import styles from "./styles.js";
 
 const STAT_TYPES = ["added", "removed", "modified"];
+const ENTITIES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+const escapeHtml = (value) => String(value).replace(/[&<>"']/g, (char) => ENTITIES[char]);
 
 const format = (val) => {
   if (val === null) return ["null", "null"];
@@ -20,7 +22,7 @@ const filterChildren = (children, showOnlyChanged) =>
 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>`;
+  root ? "" : `<span class="key"${hidden ? ' style="visibility: hidden;"' : ""}>${escapeHtml(key)}</span><span class="colon"${hidden ? ' style="visibility: hidden;"' : ""}>:</span>`;
 
 const buildRootClass = (root) => root ? " root" : "";
 
@@ -100,7 +102,7 @@ class JsonDiffViewer extends HTMLElement {
   }
 
   #compute() {
-    if (!this.#left || !this.#right) return;
+    if (this.#left == null || this.#right == null) return;
     this.#tree = diff(this.#left, this.#right);
     this.#stats = collectStats(this.#tree);
     Object.keys(this.#exp).forEach((k) => {
@@ -182,18 +184,18 @@ class JsonDiffViewer extends HTMLElement {
       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>`;
+      return `<div class="node${rootClass}"><div class="line placeholder">${hiddenKey}<span class="val-${type}" style="visibility: hidden;">${escapeHtml(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>`;
+        return `<div class="node${rootClass}"><div class="line placeholder">${keyHtml}<span class="val-${type}"${hidden}>${escapeHtml(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>`;
+      return `<div class="node${rootClass}${nodeDiffClass}"><div class="line"><span class="tog"></span>${keyHtml}<span class="val-${type}">${escapeHtml(val)}</span></div></div>`;
     }
 
     const [open, close] = getBrackets(node.isArray);
@@ -219,7 +221,7 @@ class JsonDiffViewer extends HTMLElement {
     const dot = hasChildDiff ? `<span class="dot dot-${dotType}"></span>` : "";
     const nodeDiffClass = hasDiff && !hasChildDiff ? ` ${diffClass}` : "";
     const toggle = expanded ? "▼" : "▶";
-    const dataPath = ` data-p="${currentPath}"`;
+    const dataPath = ` data-p="${escapeHtml(currentPath)}"`;
 
     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>`;