Use shallowRef in more places

This commit is contained in:
thepaperpilot 2022-08-22 00:27:36 -05:00
parent bca8c6d64e
commit 3042d5ebb6
4 changed files with 7 additions and 7 deletions

View file

@ -4,7 +4,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { RegisterNodeInjectionKey, UnregisterNodeInjectionKey } from "game/layers"; 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 = defineProps<{ id: string }>();
const props = toRefs(_props); const props = toRefs(_props);
@ -14,7 +14,7 @@ const register = inject(RegisterNodeInjectionKey, () => {});
// eslint-disable-next-line @typescript-eslint/no-empty-function // eslint-disable-next-line @typescript-eslint/no-empty-function
const unregister = inject(UnregisterNodeInjectionKey, () => {}); const unregister = inject(UnregisterNodeInjectionKey, () => {});
const node = ref<HTMLElement | null>(null); const node = shallowRef<HTMLElement | null>(null);
const parentNode = computed(() => node.value && node.value.parentElement); const parentNode = computed(() => node.value && node.value.parentElement);
watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => { watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => {

View file

@ -29,7 +29,7 @@
import "components/common/fields.css"; import "components/common/fields.css";
import type { CoercableComponent } from "features/feature"; import type { CoercableComponent } from "features/feature";
import { coerceComponent } from "util/vue"; 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"; import VueTextareaAutosize from "vue-textarea-autosize";
const _props = defineProps<{ const _props = defineProps<{
@ -49,7 +49,7 @@ const titleComponent = computed(
() => props.title?.value && coerceComponent(unref(props.title.value), "span") () => props.title?.value && coerceComponent(unref(props.title.value), "span")
); );
const field = ref<HTMLElement | null>(null); const field = shallowRef<HTMLElement | null>(null);
onMounted(() => { onMounted(() => {
field.value?.focus(); field.value?.focus();
}); });

View file

@ -5,11 +5,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, onMounted, ref } from "vue"; import { nextTick, onMounted, ref, shallowRef } from "vue";
const top = ref("0"); const top = ref("0");
const observer = new ResizeObserver(updateTop); const observer = new ResizeObserver(updateTop);
const element = ref<HTMLElement | null>(null); const element = shallowRef<HTMLElement | null>(null);
function updateTop() { function updateTop() {
let el = element.value; let el = element.value;

View file

@ -35,7 +35,7 @@ export default defineComponent({
const app = shallowRef<null | Application>(null); const app = shallowRef<null | Application>(null);
const resizeObserver = new ResizeObserver(updateBounds); const resizeObserver = new ResizeObserver(updateBounds);
const resizeListener = ref<HTMLElement | null>(null); const resizeListener = shallowRef<HTMLElement | null>(null);
onMounted(() => { onMounted(() => {
// ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element // ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element