Store object props in global state experiment

src/JSONEditor.svelte

@@ -1,10 +1,10 @@
 <script>
-  import { tick } from 'svelte'
+  import { tick, beforeUpdate, afterUpdate } from 'svelte'
   import {
     DEFAULT_LIMIT,
     STATE_EXPANDED,
     STATE_LIMIT,
-    SCROLL_DURATION
+    SCROLL_DURATION, STATE_PROPS
   } from './constants.js'
   import SearchBox from './SearchBox.svelte'
   import Icon from 'svelte-awesome'
@@ -21,6 +21,13 @@
 
   let divContents
 
+  beforeUpdate(() => {
+    console.time('render')
+  })
+  afterUpdate(() => {
+    console.timeEnd('render')
+  })
+
   export let json = {}
   export let onChangeJson = () => {
   }
@@ -208,6 +215,15 @@
     state = setIn(state, path.concat(STATE_LIMIT), limit)
   }
 
+  /**
+   * Update object properties
+   * @param {Path} path
+   * @param {Object} props
+   */
+  function handleUpdateProps (path, props) {
+    state = setIn(state, path.concat(STATE_PROPS), props)
+  }
+
   /**
    * Expand all nodes on given path
    * @param {Path} path
@@ -325,6 +341,7 @@
       onPatch={handlePatch}
       onExpand={handleExpand}
       onLimit={handleLimit}
+      onUpdateProps={handleUpdateProps}
     />
     <div class='bottom'></div>
   </div>

src/JSONNode.svelte

@@ -1,7 +1,9 @@
 <script>
+  import { isObject } from 'lodash-es'
+  import { onMount } from 'svelte'
   import {
     DEBOUNCE_DELAY, DEFAULT_LIMIT,
-    STATE_EXPANDED, STATE_LIMIT,
+    STATE_EXPANDED, STATE_LIMIT, STATE_PROPS,
     STATE_SEARCH_PROPERTY,
     STATE_SEARCH_VALUE
   } from './constants.js'
@@ -24,9 +26,11 @@
   export let onChangeKey
   export let onExpand
   export let onLimit
+  export let onUpdateProps
 
   $: expanded = state && state[STATE_EXPANDED]
   $: limit = state && state[STATE_LIMIT] || DEFAULT_LIMIT
+  $: props = state && state[STATE_PROPS] || []
 
   const escapeUnicode = false // TODO: pass via options
 
@@ -36,14 +40,16 @@
   $: type = valueType (value)
 
   let prevValue = undefined
-  let props = undefined
+  // let props = undefined
 
-  $: if (value !== prevValue) {
+  $: if (isObject(value) && value !== prevValue) {
     prevValue = value
-
-    props = updateProps(value, props)
+    const updatedProps = updateProps(value, props)
+    onUpdateProps(path, updatedProps)
   }
 
+  // $: console.log('props', props)
+
   $: limited = type === 'array' && value.length > limit
 
   $: items = type === 'array'
@@ -254,6 +260,7 @@
             onPatch={onPatch}
             onExpand={onExpand}
             onLimit={onLimit}
+            onUpdateProps={onUpdateProps}
           />
         {/each}
         {#if limited}
@@ -308,6 +315,7 @@
             onPatch={onPatch}
             onExpand={onExpand}
             onLimit={onLimit}
+            onUpdateProps={onUpdateProps}
           />
         {/each}
       </div>

src/constants.js

@@ -1,6 +1,7 @@
 
 export const STATE_EXPANDED = '$jse:expanded'
 export const STATE_LIMIT = '$jse:limit'
+export const STATE_PROPS = '$jse:props'
 export const STATE_SEARCH_PROPERTY = '$jse:search:property'
 export const STATE_SEARCH_VALUE = '$jse:search:value'