show changeset in json view

packages/web/src/jsontree/ErrorNode.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getContext, setContext } from 'svelte';
-  import contextKey from './context';
   import JSONArrow from './JSONArrow.svelte';
   import JSONNode from './JSONNode.svelte';
   import JSONKey from './JSONKey.svelte';
@@ -10,8 +9,8 @@
 
   $: stack = value.stack.split('\n');
 
-  const context = getContext(contextKey);
-  setContext(contextKey, { ...context, colon: ':' })
+  const context = getContext('json-tree-context-key');
+  setContext('json-tree-context-key', { ...context, colon: ':' })
 
   $: if (!isParentExpanded) {
     expanded = false;

packages/web/src/jsontree/JSONNested.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getContext, setContext } from 'svelte';
-  import contextKey from './context';
   import JSONArrow from './JSONArrow.svelte';
   import JSONNode from './JSONNode.svelte';
   import JSONKey from './JSONKey.svelte';
@@ -12,8 +11,8 @@
   export let getPreviewValue = getValue;
   export let expanded = false, expandable = true;
 
-  const context = getContext(contextKey);
-  setContext(contextKey, { ...context, colon })
+  const context = getContext('json-tree-context-key');
+  setContext('json-tree-context-key', { ...context, colon })
 
   $: slicedKeys = expanded ? keys: previewKeys.slice(0, 5);
 

packages/web/src/jsontree/JSONNode.svelte

@@ -8,11 +8,13 @@
   import ErrorNode from './ErrorNode.svelte';
   import objType from './objType';
 
-  export let key,
-    value,
-    isParentExpanded,
-    isParentArray,
-    expanded = false;
+  export let key;
+  export let value;
+  export let isParentExpanded;
+  export let isParentArray;
+  export let expanded = false;
+  export let labelOverride = null;
+
   $: nodeType = objType(value);
   $: componentType = getComponent(nodeType);
   $: valueGetter = getValueGetter(nodeType);
@@ -75,4 +77,5 @@
   {nodeType}
   {valueGetter}
   {expanded}
+  {labelOverride}
 />

packages/web/src/jsontree/JSONObjectNode.svelte

@@ -3,6 +3,7 @@
 
   export let key, value, isParentExpanded, isParentArray, nodeType;
   export let expanded = false;
+  export let labelOverride = null;
 
   $: keys = Object.getOwnPropertyNames(value);
 
@@ -10,6 +11,7 @@
     return value[key];
   }
 </script>
+
 <JSONNested
   {key}
   {expanded}
@@ -18,7 +20,7 @@
   {keys}
   previewKeys={keys}
   {getValue}
-  label="{nodeType} "
+  label={labelOverride || `${nodeType} `}
   bracketOpen={'{'}
   bracketClose={'}'}
-/>
+/>

packages/web/src/jsontree/JSONTree.svelte

@@ -1,16 +1,23 @@
-<script>
+<script lang="ts">
   import JSONNode from './JSONNode.svelte';
   import { setContext } from 'svelte';
-  import contextKey from './context';
+  import contextMenu from '../utility/contextMenu';
 
-  setContext(contextKey, {});
+  setContext('json-tree-context-key', {});
 
   export let key = '';
   export let value;
+  export let expanded = false;
+  export let labelOverride = null;
+  export let menu;
+
+  export let isDeleted;
+  export let isInserted;
+  export let isModified;
 </script>
 
-<ul>
-  <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} expanded={true} />
+<ul use:contextMenu={menu} class:isDeleted class:isInserted class:isModified>
+  <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} {expanded} {labelOverride} />
 </ul>
 
 <style>
@@ -35,10 +42,23 @@
     line-height: var(--li-line-height);
     display: var(--li-display, list-item);
     list-style: none;
+    white-space: nowrap;
   }
   ul,
   ul :global(ul) {
     padding: 0;
     margin: 0;
   }
+  ul.isDeleted {
+    background: var(--theme-bg-volcano);
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEElEQVQImWNgIAX8x4KJBAD+agT8INXz9wAAAABJRU5ErkJggg==');
+    background-repeat: repeat-x;
+    background-position: 50% 50%;
+  }
+  ul.isModified {
+    background: var(--theme-bg-gold);
+  }
+  ul.isInserted {
+    background: var(--theme-bg-green);
+  }
 </style>

packages/web/src/jsontree/JSONValueNode.svelte

@@ -1,12 +1,11 @@
 <script>
   import { getContext } from 'svelte';
-  import contextKey from './context';
 
   import JSONKey from './JSONKey.svelte';
 
   export let key, value, valueGetter = null, isParentExpanded, isParentArray, nodeType;
 
-  const { colon } = getContext(contextKey);
+  const { colon } = getContext('json-tree-context-key');
 </script>
 <style>
   li {

packages/web/src/jsontree/context.js

@@ -1 +0,0 @@
-export default {};