rc1

Author: metaory

.github/workflows/deploy.yml

@@ -0,0 +1,46 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [master]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - run: npm ci
+
+      - name: Copy sample data files
+        run: |
+          mkdir -p public/data
+          cp data/*.json public/data/
+
+      - run: npm run build
+
+      - uses: actions/configure-pages@v4
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+      - id: deployment
+        uses: actions/deploy-pages@v4

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 metaory
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,133 @@
+# json-diff-viewer
+
+Vanilla JS web component for side-by-side JSON diff visualization.
+
+## Features
+
+- Deep nested JSON comparison
+- Side-by-side synchronized scrolling
+- Collapsible nodes (synced between panels)
+- Diff indicators bubble up to parent nodes
+- Stats summary (added/removed/modified/type-changed)
+- Syntax highlighting
+- Zero dependencies
+- Shadow DOM encapsulation
+
+## Install
+
+```bash
+npm i json-diff-viewer-component
+```
+
+## Usage
+
+### ES Module
+
+```js
+import 'json-diff-viewer-component'
+
+const viewer = document.querySelector('json-diff-viewer')
+viewer.setData(leftObj, rightObj)
+```
+
+### HTML Attributes
+
+```html
+<json-diff-viewer 
+  left='{"name":"foo"}' 
+  right='{"name":"bar"}'
+></json-diff-viewer>
+```
+
+### Properties
+
+```js
+viewer.left = { name: 'foo' }
+viewer.right = { name: 'bar' }
+```
+
+### Method
+
+```js
+viewer.setData(leftObj, rightObj)
+```
+
+## Diff Types
+
+| Type | Color | Description |
+|------|-------|-------------|
+| Added | Green | Key exists only in right |
+| Removed | Red | Key exists only in left |
+| Modified | Yellow | Value changed |
+| Type Changed | Orange | Type mismatch (e.g. number → string) |
+
+## Styling
+
+Override CSS custom properties:
+
+```css
+json-diff-viewer {
+  /* Diff colors */
+  --added: #22c55e;
+  --removed: #ef4444;
+  --modified: #eab308;
+  --type-changed: #f97316;
+  --unchanged: #71717a;
+
+  /* Background */
+  --bg: #18181b;
+  --bg-panel: #27272a;
+  --border: #3f3f46;
+
+  /* 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;
+}
+```
+
+### Light Theme
+
+```css
+json-diff-viewer {
+  --bg: #fafafa;
+  --bg-panel: #ffffff;
+  --border: #e4e4e7;
+  --text: #18181b;
+  --text-dim: #71717a;
+  --key: #0284c7;
+  --string: #7c3aed;
+  --number: #059669;
+}
+```
+
+### Sizing
+
+```css
+json-diff-viewer {
+  height: 600px;
+  border-radius: 16px;
+}
+```
+
+## Dev
+
+```bash
+npm run dev      # start dev server
+npm run build    # build for production
+```
+
+## License
+
+MIT

index.html

@@ -7,7 +7,7 @@
 </head>
 <body>
   <div id="app">
-    <h1>JSON Diff Viewer</h1>
+    <h1>JSON Diff Viewer<a href="https://github.com/metaory/json-diff-viewer-component" target="_blank" rel="noopener noreferrer"><img src="/github.svg" alt="GitHub" class="github-logo"></a></h1>
     <json-diff-viewer></json-diff-viewer>
   </div>
   <script type="module" src="/src/main.js"></script>

package-lock.json

@@ -1,14 +1,32 @@
 {
   "name": "json-diff-viewer-component",
-  "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
+  "description": "Vanilla JS web component for side-by-side JSON diff visualization",
+  "keywords": [
+    "json",
+    "diff",
+    "viewer",
+    "web-component",
+    "custom-element",
+    "comparison"
+  ],
+  "license": "MIT",
+  "exports": {
+    ".": "./src/lib/viewer.js"
+  },
+  "files": [
+    "src/lib/**",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@fontsource/bungee": "^5.2.7",
     "vite": "^7.2.4"
   }
 }

package.json

@@ -1,42 +1,38 @@
-const TYPES = { UNCHANGED: 'unchanged', ADDED: 'added', REMOVED: 'removed', MODIFIED: 'modified', TYPE_CHANGED: 'type_changed' }
+const TYPE = { UNCHANGED: 'unchanged', ADDED: 'added', REMOVED: 'removed', MODIFIED: 'modified', TYPE_CHANGED: 'type_changed' }
 
-const getType = v => v === null ? 'null' : Array.isArray(v) ? 'array' : typeof v
+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 isPrimitive = v => v === null || typeof v !== 'object'
+const node = (key, type, left, right, extra = {}) => ({ key, type, left, right, hasDiff: type !== TYPE.UNCHANGED, ...extra })
 
-const diffPrimitive = (left, right, key) => {
-  if (left === right) return { key, type: TYPES.UNCHANGED, left, right, hasDiff: false }
-  if (getType(left) !== getType(right)) return { key, type: TYPES.TYPE_CHANGED, left, right, hasDiff: true }
-  return { key, type: TYPES.MODIFIED, left, right, hasDiff: true }
-}
+const container = (val, isArr) => isArr ? { isArray: true } : isObj(val) ? { isObject: true } : {}
 
-const diffArray = (left, right, key) => {
-  const len = Math.max(left?.length || 0, right?.length || 0)
-  const children = Array.from({ length: len }, (_, i) => diff(left?.[i], right?.[i], i))
-  const hasDiff = children.some(c => c.hasDiff)
-  return { key, type: hasDiff ? TYPES.MODIFIED : TYPES.UNCHANGED, left, right, children, hasDiff, isArray: true }
-}
+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 diffObject = (left, right, key) => {
-  const keys = [...new Set([...Object.keys(left || {}), ...Object.keys(right || {})])]
-  const children = keys.map(k => diff(left?.[k], right?.[k], k))
-  const hasDiff = children.some(c => c.hasDiff)
-  return { key, type: hasDiff ? TYPES.MODIFIED : TYPES.UNCHANGED, left, right, children, hasDiff, isObject: true }
-}
+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 diff = (left, right, key = 'root') => {
-  if (left === undefined && right !== undefined) return { key, type: TYPES.ADDED, left, right, hasDiff: true, ...(!isPrimitive(right) && { children: diffChildren(right), isArray: Array.isArray(right), isObject: !Array.isArray(right) && typeof right === 'object' }) }
-  if (left !== undefined && right === undefined) return { key, type: TYPES.REMOVED, left, right, hasDiff: true, ...(!isPrimitive(left) && { children: diffChildren(left), isArray: Array.isArray(left), isObject: !Array.isArray(left) && typeof left === 'object' }) }
-  if (isPrimitive(left) && isPrimitive(right)) return diffPrimitive(left, right, key)
-  if (getType(left) !== getType(right)) return { key, type: TYPES.TYPE_CHANGED, left, right, hasDiff: true, children: [], isArray: Array.isArray(left) || Array.isArray(right), isObject: !Array.isArray(left) && typeof left === 'object' }
-  if (Array.isArray(left)) return diffArray(left, right, key)
-  return diffObject(left, right, key)
+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) })
 }
 
-const diffChildren = val => {
-  if (Array.isArray(val)) return val.map((v, i) => ({ key: i, type: TYPES.UNCHANGED, left: v, right: v, hasDiff: false, ...(!isPrimitive(v) && { children: diffChildren(v), isArray: Array.isArray(v), isObject: !Array.isArray(v) && typeof v === 'object' }) }))
-  if (typeof val === 'object' && val !== null) return Object.entries(val).map(([k, v]) => ({ key: k, type: TYPES.UNCHANGED, left: v, right: v, hasDiff: false, ...(!isPrimitive(v) && { children: diffChildren(v), isArray: Array.isArray(v), isObject: !Array.isArray(v) && typeof v === 'object' }) }))
-  return []
+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))
 }
 
-export { diff, TYPES }
+export { diff, TYPE }