Refactor JSON viewer component to preserve expanded state during tree rebuild, improve error handling in JsonNode component, and clean up unused styles in App.vue.

Author: eeprojectsee

src/App.vue

@@ -269,12 +269,9 @@ const loadSample = (type: keyof typeof sampleData) => {
 
 const toggleTheme = () => {
   // This only affects the JsonViewer component theme
-  // No global body class modifications
-  console.log("Toggle theme clicked - theme will only affect JsonViewer component");
 };
 
 const handleDataUpdate = (newData: any) => {
-  console.log("Data updated:", newData);
   jsonData.value = newData;
 };
 
@@ -292,7 +289,6 @@ const handleEditCancel = () => {
 
 const handleThemeChange = (theme: "light" | "dark") => {
   isDarkTheme.value = theme === "dark";
-  console.log("Theme changed to:", theme);
 };
 
 // Lifecycle
@@ -377,8 +373,6 @@ body {
   font-weight: 600;
 }
 
-
-
 .sample-buttons {
   display: flex;
   gap: 0.5rem;
@@ -403,8 +397,6 @@ body {
   border-color: #3b82f6;
 }
 
-
-
 .theme-controls {
   padding-top: 1rem;
   border-top: 1px solid #e5e7eb;
@@ -413,8 +405,6 @@ body {
   flex-wrap: wrap;
 }
 
-
-
 .theme-controls label {
   display: flex;
   align-items: center;
@@ -423,32 +413,19 @@ body {
   font-size: 0.875rem;
 }
 
-.theme-note {
-  font-size: 0.75rem;
-  color: #6b7280;
-  margin-bottom: 0.5rem;
-  font-style: italic;
-}
-
 .props-controls {
   padding-top: 1rem;
   border-top: 1px solid #e5e7eb;
   margin-top: 1rem;
 }
 
-body.dark-theme .props-controls {
-  border-color: #4b5563;
-}
-
 .props-controls h4 {
   margin-bottom: 1rem;
   color: #374151;
   font-weight: 600;
   font-size: 1rem;
 }
 
-
-
 .props-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -470,8 +447,6 @@ body.dark-theme .props-controls {
   background-color: #f3f4f6;
 }
 
-
-
 .json-viewer-container {
   flex: 1;
   min-height: 600px;
@@ -487,17 +462,13 @@ body.dark-theme .props-controls {
   height: fit-content;
 }
 
-
-
 .info-panel h3,
 .info-panel h4 {
   color: #374151;
   font-weight: 600;
   margin-bottom: 1rem;
 }
 
-
-
 .feature-list {
   list-style: none;
   margin-bottom: 2rem;
@@ -509,15 +480,11 @@ body.dark-theme .props-controls {
   font-size: 0.875rem;
 }
 
-
-
 .usage-example {
   padding-top: 1rem;
   border-top: 1px solid #e5e7eb;
 }
 
-
-
 .usage-example pre {
   background: #f8fafc;
   padding: 1rem;
@@ -528,8 +495,6 @@ body.dark-theme .props-controls {
   font-family: 'Fira Code', 'Monaco', monospace;
 }
 
-
-
 /* Footer */
 .app-footer {
   background: #f1f5f9;
@@ -540,8 +505,6 @@ body.dark-theme .props-controls {
   font-size: 0.875rem;
 }
 
-
-
 .footer-content {
   display: flex;
   flex-direction: column;
@@ -592,8 +555,6 @@ body.dark-theme .props-controls {
   transform: translateY(-1px);
 }
 
-
-
 .github-icon,
 .npm-icon {
   width: 20px;

src/components/JsonNode.vue

@@ -353,7 +353,7 @@ const saveValue = () => {
 
     emit("value-change", { node: props.node, value: newValue });
   } catch (error) {
-    alert("Invalid value format");
+    console.error(error);
     return;
   }
 
@@ -424,7 +424,7 @@ const addNewItem = () => {
     emit("node-add", { parent: props.node, key, value });
     cancelAdd();
   } catch (error) {
-    alert("Invalid value format");
+    console.error(error);
   }
 };
 

src/components/JsonViewer.vue

@@ -371,9 +371,7 @@ const validateJson = () => {
   }
 };
 
-const buildTreeNodes = (data: any, path: string[] = [], level: number = 0): JsonNodeType[] => {
-  const nodes: JsonNodeType[] = [];
-
+const buildTreeNodes = (data: any, path: string[] = [], level: number = 0, preserveState?: JsonNodeType[]): JsonNodeType[] => {
   if (data === null) {
     return [{
       key: "",
@@ -384,40 +382,85 @@ const buildTreeNodes = (data: any, path: string[] = [], level: number = 0): Json
     }];
   }
 
+  // For root level objects and arrays, create a single container node
+  if (level === 0 && (Array.isArray(data) || (typeof data === "object" && data !== null))) {
+    const rootType = Array.isArray(data) ? "array" : "object";
+
+    // Try to preserve expanded state from existing root node
+    const existingRoot = preserveState && preserveState[0];
+    const shouldExpand = existingRoot ? existingRoot.expanded : true;
+
+    const rootNode: JsonNodeType = {
+      key: rootType === "array" ? "Array" : "Object",
+      value: data,
+      type: rootType,
+      path: [],
+      level: 0,
+      expanded: shouldExpand,
+      children: buildTreeNodesInternal(data, [], 1, existingRoot?.children)
+    };
+    return [rootNode];
+  }
+
+  return buildTreeNodesInternal(data, path, level, preserveState);
+};
+
+const buildTreeNodesInternal = (data: any, path: string[] = [], level: number = 0, preserveState?: JsonNodeType[]): JsonNodeType[] => {
+  const nodes: JsonNodeType[] = [];
+
+  // Helper function to find existing node by path
+  const findExistingNode = (existingNodes: JsonNodeType[] | undefined, targetPath: string[]): JsonNodeType | undefined => {
+    if (!existingNodes) return undefined;
+    return existingNodes.find(node =>
+      node.path.length === targetPath.length &&
+      node.path.every((segment, index) => segment === targetPath[index])
+    );
+  };
+
   if (Array.isArray(data)) {
     data.forEach((item, index) => {
       const itemPath = [...path, index.toString()];
       const itemType = getValueType(item);
+
+      // Try to find existing node to preserve expanded state
+      const existingNode = findExistingNode(preserveState, itemPath);
+      const shouldExpand = existingNode ? existingNode.expanded : level < props.maxDepth;
+
       const node: JsonNodeType = {
         key: index.toString(),
         value: item,
         type: itemType,
         path: itemPath,
         level,
-        expanded: level < props.maxDepth,
+        expanded: shouldExpand,
       };
 
       if (itemType === "object" || itemType === "array") {
-        node.children = buildTreeNodes(item, itemPath, level + 1);
+        node.children = buildTreeNodesInternal(item, itemPath, level + 1, existingNode?.children);
       }
 
       nodes.push(node);
     });
-  } else if (typeof data === "object") {
+  } else if (typeof data === "object" && data !== null) {
     Object.entries(data).forEach(([key, value]) => {
       const itemPath = [...path, key];
       const itemType = getValueType(value);
+
+      // Try to find existing node to preserve expanded state
+      const existingNode = findExistingNode(preserveState, itemPath);
+      const shouldExpand = existingNode ? existingNode.expanded : level < props.maxDepth;
+
       const node: JsonNodeType = {
         key,
         value,
         type: itemType,
         path: itemPath,
         level,
-        expanded: level < props.maxDepth,
+        expanded: shouldExpand,
       };
 
       if (itemType === "object" || itemType === "array") {
-        node.children = buildTreeNodes(value, itemPath, level + 1);
+        node.children = buildTreeNodesInternal(value, itemPath, level + 1, existingNode?.children);
       }
 
       nodes.push(node);
@@ -478,15 +521,31 @@ const handleKeyChange = (event: { node: JsonNodeType; oldKey: string; newKey: st
   const parentPath = event.node.path.slice(0, -1);
   const parent = getNestedValue(newData, parentPath);
 
-  if (parent && typeof parent === 'object') {
-    // Store the value
-    const value = parent[event.oldKey];
-    // Delete the old key
-    delete parent[event.oldKey];
-    // Add the new key with the same value
-    parent[event.newKey] = value;
-    // Update the path in the node
-    event.node.path[event.node.path.length - 1] = event.newKey;
+  if (parent && typeof parent === 'object' && !Array.isArray(parent)) {
+    // Get all keys in their current order
+    const keys = Object.keys(parent);
+    const values = keys.map(key => parent[key]);
+
+    // Find the index of the old key
+    const keyIndex = keys.indexOf(event.oldKey);
+
+    if (keyIndex !== -1) {
+      // Replace the old key with the new key at the same position
+      keys[keyIndex] = event.newKey;
+
+      // Clear the parent object
+      for (const key of Object.keys(parent)) {
+        delete parent[key];
+      }
+
+      // Rebuild the object with keys in the same order
+      keys.forEach((key, index) => {
+        parent[key] = values[index];
+      });
+
+      // Update the path in the node
+      event.node.path[event.node.path.length - 1] = event.newKey;
+    }
   }
   emit("update:data", newData);
 };
@@ -533,7 +592,8 @@ const getNestedValue = (obj: any, path: string[]) => {
 };
 
 watch(() => props.data, (newData) => {
-  rootNodes.value = buildTreeNodes(newData);
+  // Preserve current expanded state when rebuilding tree
+  rootNodes.value = buildTreeNodes(newData, [], 0, rootNodes.value);
   jsonText.value = JSON.stringify(newData, null, 2);
 }, { deep: true, immediate: true });
 
@@ -544,18 +604,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.json-viewer {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  font-family: 'Inter', 'Roboto', system-ui, sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
 .json-viewer {
   /* Base styles */
   display: flex;
@@ -720,14 +768,6 @@ onMounted(() => {
   transition: all 0.3s ease;
 }
 
-.theme-btn:hover .theme-icon {
-  transform: scale(1.1);
-}
-
-.theme-btn {
-  transition: all 0.2s ease;
-}
-
 /* Ensure SVG icons inherit the theme icon styling */
 .theme-icon svg {
   transition: all 0.3s ease;
@@ -1027,11 +1067,6 @@ onMounted(() => {
   }
 }
 
-/* Hide hidden sections completely */
-.menu-bar.hidden {
-  display: none !important;
-}
-
 @media (max-width: 768px) {
   .menu-bar {
     flex-direction: row;