json tree - allow expand root

packages/web/src/json-tree/JSONNode.svelte

@@ -8,7 +8,11 @@
   import ErrorNode from './ErrorNode.svelte';
   import objType from './objType';
 
-  export let key, value, isParentExpanded, isParentArray;
+  export let key,
+    value,
+    isParentExpanded,
+    isParentArray,
+    expanded = false;
   $: nodeType = objType(value);
   $: componentType = getComponent(nodeType);
   $: valueGetter = getValueGetter(nodeType);
@@ -62,4 +66,13 @@
   }
 </script>
 
-<svelte:component this={componentType} {key} {value} {isParentExpanded} {isParentArray} {nodeType} {valueGetter} />
+<svelte:component
+  this={componentType}
+  {key}
+  {value}
+  {isParentExpanded}
+  {isParentArray}
+  {nodeType}
+  {valueGetter}
+  {expanded}
+/>

packages/web/src/json-tree/JSONTree.svelte

@@ -5,8 +5,14 @@
 
   setContext(contextKey, {});
 
-  export let key = '', value;
+  export let key = '',
+    value;
 </script>
+
+<ul>
+  <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} expanded={true} />
+</ul>
+
 <style>
   ul {
     --string-color: var(--json-tree-string-color, #cb3f41);
@@ -30,11 +36,9 @@
     display: var(--li-display, list-item);
     list-style: none;
   }
-  ul, ul :global(ul) {
+  ul,
+  ul :global(ul) {
     padding: 0;
     margin: 0;
   }
 </style>
-<ul>
-  <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} />
-</ul>