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