From 3042d5ebb6af27afacf1ad4281491ae6650e4590 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 22 Aug 2022 00:27:36 -0500
Subject: [PATCH] Use shallowRef in more places

---
 src/components/Node.vue              | 4 ++--
 src/components/fields/Text.vue       | 4 ++--
 src/components/layout/Sticky.vue     | 4 ++--
 src/features/particles/Particles.vue | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Node.vue b/src/components/Node.vue
index 4e61363..7f5b118 100644
--- a/src/components/Node.vue
+++ b/src/components/Node.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { RegisterNodeInjectionKey, UnregisterNodeInjectionKey } from "game/layers";
-import { computed, inject, onUnmounted, ref, toRefs, unref, watch } from "vue";
+import { computed, inject, onUnmounted, shallowRef, toRefs, unref, watch } from "vue";
 
 const _props = defineProps<{ id: string }>();
 const props = toRefs(_props);
@@ -14,7 +14,7 @@ const register = inject(RegisterNodeInjectionKey, () => {});
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const unregister = inject(UnregisterNodeInjectionKey, () => {});
 
-const node = ref<HTMLElement | null>(null);
+const node = shallowRef<HTMLElement | null>(null);
 const parentNode = computed(() => node.value && node.value.parentElement);
 
 watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => {
diff --git a/src/components/fields/Text.vue b/src/components/fields/Text.vue
index 30375bf..e7f3ab5 100644
--- a/src/components/fields/Text.vue
+++ b/src/components/fields/Text.vue
@@ -29,7 +29,7 @@
 import "components/common/fields.css";
 import type { CoercableComponent } from "features/feature";
 import { coerceComponent } from "util/vue";
-import { computed, onMounted, ref, toRefs, unref } from "vue";
+import { computed, onMounted, shallowRef, toRefs, unref } from "vue";
 import VueTextareaAutosize from "vue-textarea-autosize";
 
 const _props = defineProps<{
@@ -49,7 +49,7 @@ const titleComponent = computed(
     () => props.title?.value && coerceComponent(unref(props.title.value), "span")
 );
 
-const field = ref<HTMLElement | null>(null);
+const field = shallowRef<HTMLElement | null>(null);
 onMounted(() => {
     field.value?.focus();
 });
diff --git a/src/components/layout/Sticky.vue b/src/components/layout/Sticky.vue
index 4a598d4..d761210 100644
--- a/src/components/layout/Sticky.vue
+++ b/src/components/layout/Sticky.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from "vue";
+import { nextTick, onMounted, ref, shallowRef } from "vue";
 
 const top = ref("0");
 const observer = new ResizeObserver(updateTop);
-const element = ref<HTMLElement | null>(null);
+const element = shallowRef<HTMLElement | null>(null);
 
 function updateTop() {
     let el = element.value;
diff --git a/src/features/particles/Particles.vue b/src/features/particles/Particles.vue
index 8ed509d..8a3dd2d 100644
--- a/src/features/particles/Particles.vue
+++ b/src/features/particles/Particles.vue
@@ -35,7 +35,7 @@ export default defineComponent({
         const app = shallowRef<null | Application>(null);
 
         const resizeObserver = new ResizeObserver(updateBounds);
-        const resizeListener = ref<HTMLElement | null>(null);
+        const resizeListener = shallowRef<HTMLElement | null>(null);
 
         onMounted(() => {
             // ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element