fix nested diff toggle and VA QOL

Author: metaory

data/a1.json

@@ -26,14 +26,15 @@ const getContainerProps = (val) => {
 };
 
 const mapChildrenForSide = (val, side) => {
+  const type = side === 'added' ? TYPE.ADDED : TYPE.REMOVED;
   const createChildNode = (value, key) => {
     const leftValue = side === 'added' ? undefined : value;
     const rightValue = side === 'added' ? value : undefined;
     const childExtra = isObj(value) ? {
       children: mapChildrenForSide(value, side),
       ...getContainerProps(value)
     } : {};
-    return createNode(key, TYPE.UNCHANGED, leftValue, rightValue, childExtra);
+    return createNode(key, type, leftValue, rightValue, childExtra);
   };
 
   if (Array.isArray(val)) {

data/a2.json

@@ -64,7 +64,7 @@ class JsonDiffViewer extends HTMLElement {
     },
   });
   #stats = {};
-  #showOnlyChanged = false;
+  #showOnlyChanged = true;
 
   static observedAttributes = ["left", "right"];
   constructor() {
@@ -139,6 +139,8 @@ class JsonDiffViewer extends HTMLElement {
       this.shadowRoot.innerHTML = `<style>${styles}</style><div class="empty">Provide left and right JSON</div>`;
       return;
     }
+    const panel = this.shadowRoot.querySelector('.panel');
+    const scroll = { top: panel?.scrollTop || 0, left: panel?.scrollLeft || 0 };
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <div class="stats">
@@ -163,6 +165,10 @@ class JsonDiffViewer extends HTMLElement {
           .join("")}
       </div>`;
     this.#bind();
+    this.shadowRoot.querySelectorAll('.panel').forEach(p => {
+      p.scrollTop = scroll.top;
+      p.scrollLeft = scroll.left;
+    });
   }
 
   #renderNode(node, side, path, root = true, placeholderParam = false) {
@@ -173,10 +179,11 @@ class JsonDiffViewer extends HTMLElement {
     const hidden = placeholder ? ' style="visibility: hidden;"' : "";
     const keyHtml = buildKeyHtml(node.key, root, placeholder);
 
-    if (value === undefined) {
-      if (!node.children?.length) {
-        return `<div class="node${rootClass}"><div class="line placeholder">${keyHtml}</div></div>`;
-      }
+    if (value === undefined && !node.children?.length) {
+      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>`;
     }
 
     if (value !== undefined && !node.isArray && !node.isObject) {

src/lib/diff.js

@@ -20,24 +20,26 @@ const themes = {
   }
 }
 
+const themeLabels = { dark: "Light", light: "Dark" };
+
 const applyTheme = (theme) => {
-  const tokens = themes[theme];
-  for (const [key, value] of Object.entries(tokens)) {
+  Object.entries(themes[theme]).forEach(([key, value]) => {
     viewer.style.setProperty(`--${key}`, value);
-  }
-  toggle.textContent = theme === "dark" ? "Light" : "Dark";
+  });
+  toggle.textContent = themeLabels[theme];
   document.documentElement.setAttribute("data-theme", theme);
   localStorage.setItem("json-diff-viewer-theme", theme);
 };
 
-const getTheme = () => localStorage.getItem("json-diff-viewer-theme") || "dark"
-applyTheme(getTheme())
+const getTheme = () => localStorage.getItem("json-diff-viewer-theme") || "dark";
+
+const toggleTheme = (current) => current === "dark" ? "light" : "dark";
+
+applyTheme(getTheme());
 
 toggle.addEventListener("click", () => {
-  const current = getTheme()
-  const next = current === "dark" ? "light" : "dark"
-  applyTheme(next)
-})
+  applyTheme(toggleTheme(getTheme()));
+});
 
 Promise.all([
   fetch(`${import.meta.env.BASE_URL}data/a1.json`).then((r) => r.json()),