json-diff-viewer-component 0.6.0 → 0.6.2

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/refs/heads/master/public/logo.svg" alt="logo" height="128" />
+    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/logo.svg" alt="logo" height="128" />
     <h2>json-diff-viewer</h2>
     <h5>
         Compare JSON side-by-side, visually
@@ -8,21 +8,20 @@
         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="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/refs/heads/master/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>
+    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/screenshot.jpg" alt="demo" width="80%" />
+    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/screenshot-light.jpg" alt="demo-light" width="80%" />
 </div>
 
 ## 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
@@ -37,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";
@@ -46,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"}'
@@ -55,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>
@@ -132,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
 
@@ -171,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,8 +1,11 @@
 {
   "name": "json-diff-viewer-component",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "type": "module",
   "description": "Vanilla JS web component for side-by-side JSON diff visualization",
+  "bugs": "https://github.com/metaory/json-diff-viewer-component/issues",
+  "homepage": "https://metaory.github.io/json-diff-viewer-component/",
+  "repository": "git+https://github.com/metaory/json-diff-viewer-component.git",
   "keywords": [
     "json",
     "diff",
@@ -27,6 +30,6 @@
   },
   "devDependencies": {
     "@fontsource/bungee": "^5.2.7",
-    "vite": "^7.2.4"
+    "vite": "^8.0.16"
   }
 }

package/src/lib/styles.js

@@ -47,7 +47,7 @@ export default `
 .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); }
+.slider::before { content: ''; display: block; width: 100%; height: 100%; background-color: var(--br); 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); }

package/src/lib/viewer.js

@@ -100,7 +100,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) => {