Some smaller fixes

Author: eoftedal

src/components/AstronomicalViewer.vue

@@ -19,9 +19,11 @@ onMounted(() => {
   store.execute()
 })
 
-// Save to localStorage whenever values change
+// Save to localStorage whenever values change, debounced to avoid writing on every keystroke
+let saveTimer: ReturnType<typeof setTimeout> | undefined
 watch([jsCode, queryString], () => {
-  store.saveToLocalStorage()
+  clearTimeout(saveTimer)
+  saveTimer = setTimeout(() => store.saveToLocalStorage(), 500)
 })
 </script>
 

src/components/TreeContainer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick, watch, provide } from 'vue'
 import TreeNode from './TreeNode.vue'
 import type { TreeNode as TreeNodeType } from '../utils/astTreeBuilder'
 
@@ -86,6 +86,10 @@ const handleMinimapClick = (e: MouseEvent) => {
   )
 }
 
+provide('toggleNode', (node: TreeNodeType) => {
+  node.isExpanded = !node.isExpanded
+})
+
 let resizeObserver: ResizeObserver | null = null
 
 onMounted(() => {

src/components/TreeNode.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, inject } from 'vue'
 import type { TreeNode } from '../utils/astTreeBuilder'
 import { usePrimitiveMatching } from '../composables/usePrimitiveMatching'
 
@@ -10,23 +10,15 @@ const props = defineProps<{
   path?: string
 }>()
 
-const emit = defineEmits<{
-  'update:expanded': [node: TreeNode, expanded: boolean]
-}>()
-
 const { hasMatchedPrimitiveValue, showPrimitiveMatch } = usePrimitiveMatching(
   props.primitiveResults,
 )
 
+const toggleNode = inject<(node: TreeNode) => void>('toggleNode')
+
 const toggleExpand = () => {
   if (props.node.children.length > 0) {
-    const updatedNode = {
-      ...props.node,
-      isExpanded: !props.node.isExpanded,
-    }
-    emit('update:expanded', updatedNode, !props.node.isExpanded)
-    // eslint-disable-next-line vue/no-mutating-props
-    props.node.isExpanded = !props.node.isExpanded
+    toggleNode?.(props.node)
   }
 }