handle addition and deletion space allocation

Author: metaory

package-lock.json

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

package.json

@@ -16,6 +16,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); }

src/lib/styles.js

@@ -129,6 +129,38 @@ class JsonDiffViewer extends HTMLElement {
     this.#bind();
   }
 
+  #placeholder(node, side, path, root = true) {
+    const currentPath = path ? `${path}.${node.key}` : String(node.key);
+    const value = node[side];
+    const keyHtml = root ? "" : `<span class="key" style="visibility: hidden;">${node.key}</span><span class="colon" style="visibility: hidden;">:</span>`;
+    const rootClass = root ? " root" : "";
+
+    if (!node.isArray && !node.isObject) {
+      if (value === undefined) {
+        return `<div class="node${rootClass}"><div class="line placeholder"><span class="tog"></span>${keyHtml}</div></div>`;
+      }
+      const [val, type] = format(value);
+      return `<div class="node${rootClass}"><div class="line placeholder"><span class="tog"></span>${keyHtml}<span class="val-${type}" style="visibility: hidden;">${val}</span></div></div>`;
+    }
+
+    const [open, close] = node.isArray ? ["[", "]"] : ["{", "}"];
+    const children = node.children || [];
+    const isExpanded = this.#proxy[currentPath] !== false;
+    const filteredChildren = this.#showOnlyChanged
+      ? children.filter((c) => c.hasDiff)
+      : children;
+    const childrenHtml = isExpanded
+      ? filteredChildren.map((c) => this.#placeholder(c, side, currentPath, false)).join("")
+      : "";
+    const preview = `${filteredChildren.length}`;
+
+    if (!isExpanded) {
+      return `<div class="node${rootClass}"><div class="line placeholder"><span class="tog">▶</span>${keyHtml}<span class="br" style="visibility: hidden;">${open}</span><span class="preview" style="visibility: hidden;">${preview}</span><span class="br" style="visibility: hidden;">${close}</span></div></div>`;
+    }
+
+    return `<div class="node${rootClass}"><div class="line placeholder"><span class="tog">▼</span>${keyHtml}<span class="br" style="visibility: hidden;">${open}</span></div>${childrenHtml}<div class="line placeholder"><span class="tog"></span><span class="br" style="visibility: hidden;">${close}</span></div></div>`;
+  }
+
   #node(node, side, path, root = true) {
     const currentPath = path ? `${path}.${node.key}` : String(node.key);
     const value = node[side];
@@ -143,6 +175,13 @@ class JsonDiffViewer extends HTMLElement {
     const rootClass = root ? " root" : "";
     const nodeDiffClass = hasDiff && !hasChildDiff ? ` ${diffClass}` : "";
 
+    if (value === undefined) {
+      if (node.children?.length) {
+        return this.#placeholder(node, side, path, root);
+      }
+      return `<div class="node${rootClass}"><div class="line placeholder"><span class="tog"></span>${root ? "" : `<span class="key" style="visibility: hidden;">${node.key}</span><span class="colon" style="visibility: hidden;">:</span>`}</div></div>`;
+    }
+
     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>`;
@@ -153,10 +192,7 @@ class JsonDiffViewer extends HTMLElement {
     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 childrenHtml = filteredChildren.map((c) => this.#node(c, side, currentPath, false)).join("");
     const preview = `${filteredChildren.length}`;
 
     if (!isExpanded) {