diff --git a/src/components/Node.vue b/src/components/Node.vue index 7f5b118..8797aac 100644 --- a/src/components/Node.vue +++ b/src/components/Node.vue @@ -4,10 +4,9 @@ <script setup lang="ts"> import { RegisterNodeInjectionKey, UnregisterNodeInjectionKey } from "game/layers"; -import { computed, inject, onUnmounted, shallowRef, toRefs, unref, watch } from "vue"; +import { computed, inject, onUnmounted, shallowRef, toRef, unref, watch } from "vue"; -const _props = defineProps<{ id: string }>(); -const props = toRefs(_props); +const props = defineProps<{ id: string }>(); // eslint-disable-next-line @typescript-eslint/no-empty-function const register = inject(RegisterNodeInjectionKey, () => {}); @@ -17,7 +16,7 @@ const unregister = inject(UnregisterNodeInjectionKey, () => {}); const node = shallowRef<HTMLElement | null>(null); const parentNode = computed(() => node.value && node.value.parentElement); -watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => { +watch([parentNode, toRef(props, "id")], ([newNode, newID], [prevNode, prevID]) => { if (prevNode) { unregister(unref(prevID)); } @@ -26,7 +25,7 @@ watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => { } }); -onUnmounted(() => unregister(unref(props.id))); +onUnmounted(() => unregister(props.id)); </script> <style scoped> diff --git a/src/components/fields/DangerButton.vue b/src/components/fields/DangerButton.vue index 9fb1836..657a4e8 100644 --- a/src/components/fields/DangerButton.vue +++ b/src/components/fields/DangerButton.vue @@ -10,13 +10,13 @@ </template> <script setup lang="ts"> -import { ref, toRefs, unref, watch } from "vue"; +import { ref, watch } from "vue"; -const _props = defineProps<{ +const props = defineProps<{ disabled?: boolean; skipConfirm?: boolean; }>(); -const props = toRefs(_props); + const emit = defineEmits<{ (e: "click"): void; (e: "confirmingChanged", value: boolean): void; @@ -29,7 +29,7 @@ watch(isConfirming, isConfirming => { }); function click() { - if (unref(props.skipConfirm)) { + if (props.skipConfirm) { emit("click"); return; } diff --git a/src/components/fields/Slider.vue b/src/components/fields/Slider.vue index 1b1e9a8..0847a4a 100644 --- a/src/components/fields/Slider.vue +++ b/src/components/fields/Slider.vue @@ -11,22 +11,22 @@ import "components/common/fields.css"; import Tooltip from "features/tooltips/Tooltip.vue"; import { Direction } from "util/common"; -import { computed, toRefs, unref } from "vue"; +import { computed } from "vue"; -const _props = defineProps<{ +const props = defineProps<{ title?: string; modelValue?: number; min?: number; max?: number; }>(); -const props = toRefs(_props); + const emit = defineEmits<{ (e: "update:modelValue", value: number): void; }>(); const value = computed({ get() { - return String(unref(props.modelValue) ?? 0); + return String(props.modelValue ?? 0); }, set(value: string) { emit("update:modelValue", Number(value)); diff --git a/src/components/modals/Info.vue b/src/components/modals/Info.vue index 12be65d..ccedec6 100644 --- a/src/components/modals/Info.vue +++ b/src/components/modals/Info.vue @@ -67,13 +67,12 @@ import player from "game/player"; import { infoComponents } from "game/settings"; import { formatTime } from "util/bignum"; import { coerceComponent, render } from "util/vue"; -import { computed, ref, toRefs, unref } from "vue"; +import { computed, ref } from "vue"; import Modal from "./Modal.vue"; const { title, logo, author, discordName, discordLink, versionNumber, versionTitle } = projInfo; -const _props = defineProps<{ changelog: typeof Changelog | null }>(); -const props = toRefs(_props); +const props = defineProps<{ changelog: typeof Changelog | null }>(); const isOpen = ref(false); @@ -90,7 +89,7 @@ defineExpose({ }); function openChangelog() { - unref(props.changelog)?.open(); + props.changelog?.open(); } </script> diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue index 4a9d44a..944af7b 100644 --- a/src/components/modals/Modal.vue +++ b/src/components/modals/Modal.vue @@ -41,22 +41,22 @@ <script setup lang="ts"> import type { FeatureNode } from "game/layers"; -import { computed, ref, toRefs, unref } from "vue"; +import { computed, ref } from "vue"; import Context from "../Context.vue"; -const _props = defineProps<{ +const props = defineProps<{ modelValue: boolean; preventClosing?: boolean; width?: string; }>(); -const props = toRefs(_props); + const emit = defineEmits<{ (e: "update:modelValue", value: boolean): void; }>(); -const isOpen = computed(() => unref(props.modelValue) || isAnimating.value); +const isOpen = computed(() => props.modelValue || isAnimating.value); function close() { - if (unref(props.preventClosing) !== true) { + if (props.preventClosing !== true) { emit("update:modelValue", false); } } diff --git a/src/components/modals/Save.vue b/src/components/modals/Save.vue index 8c1809b..87bc0f6 100644 --- a/src/components/modals/Save.vue +++ b/src/components/modals/Save.vue @@ -78,18 +78,18 @@ import Tooltip from "features/tooltips/Tooltip.vue"; import player from "game/player"; import { Direction } from "util/common"; -import { computed, ref, toRefs, unref, watch } from "vue"; +import { galaxy, syncedSaves } from "util/galaxy"; +import { computed, ref, watch } from "vue"; import DangerButton from "../fields/DangerButton.vue"; import FeedbackButton from "../fields/FeedbackButton.vue"; import Text from "../fields/Text.vue"; import type { LoadablePlayerData } from "./SavesManager.vue"; -import { galaxy, syncedSaves } from "util/galaxy"; -const _props = defineProps<{ +const props = defineProps<{ save: LoadablePlayerData; readonly?: boolean; }>(); -const { save, readonly } = toRefs(_props); + const emit = defineEmits<{ (e: "export"): void; (e: "open"): void; @@ -111,19 +111,19 @@ const isEditing = ref(false); const isConfirming = ref(false); const newName = ref(""); -watch(isEditing, () => (newName.value = save.value.name ?? "")); +watch(isEditing, () => (newName.value = props.save.name ?? "")); const isActive = computed( - () => save.value != null && save.value.id === player.id && !unref(readonly) + () => props.save != null && props.save.id === player.id && !props.readonly ); const currentTime = computed(() => - isActive.value ? player.time : (save.value != null && save.value.time) ?? 0 + isActive.value ? player.time : (props.save != null && props.save.time) ?? 0 ); const synced = computed( () => - !unref(readonly) && + !props.readonly && galaxy.value?.loggedIn === true && - syncedSaves.value.includes(save.value.id) + syncedSaves.value.includes(props.save.id) ); function changeName() { diff --git a/src/features/links/Link.vue b/src/features/links/Link.vue index 815f511..7fa9603 100644 --- a/src/features/links/Link.vue +++ b/src/features/links/Link.vue @@ -14,47 +14,46 @@ import type { Link } from "features/links/links"; import type { FeatureNode } from "game/layers"; import { kebabifyObject } from "util/vue"; -import { computed, toRefs } from "vue"; +import { computed } from "vue"; -const _props = defineProps<{ +const props = defineProps<{ link: Link; startNode: FeatureNode; endNode: FeatureNode; boundingRect: DOMRect | undefined; }>(); -const props = toRefs(_props); const startPosition = computed(() => { - const rect = props.startNode.value.rect; - const boundingRect = props.boundingRect.value; + const rect = props.startNode.rect; + const boundingRect = props.boundingRect; const position = boundingRect ? { x: rect.x + rect.width / 2 - boundingRect.x, y: rect.y + rect.height / 2 - boundingRect.y } : { x: 0, y: 0 }; - if (props.link.value.offsetStart) { - position.x += props.link.value.offsetStart.x; - position.y += props.link.value.offsetStart.y; + if (props.link.offsetStart) { + position.x += props.link.offsetStart.x; + position.y += props.link.offsetStart.y; } return position; }); const endPosition = computed(() => { - const rect = props.endNode.value.rect; - const boundingRect = props.boundingRect.value; + const rect = props.endNode.rect; + const boundingRect = props.boundingRect; const position = boundingRect ? { x: rect.x + rect.width / 2 - boundingRect.x, y: rect.y + rect.height / 2 - boundingRect.y } : { x: 0, y: 0 }; - if (props.link.value.offsetEnd) { - position.x += props.link.value.offsetEnd.x; - position.y += props.link.value.offsetEnd.y; + if (props.link.offsetEnd) { + position.x += props.link.offsetEnd.x; + position.y += props.link.offsetEnd.y; } return position; }); -const linkProps = computed(() => kebabifyObject(_props.link as unknown as Record<string, unknown>)); +const linkProps = computed(() => kebabifyObject(props.link as unknown as Record<string, unknown>)); </script> diff --git a/src/features/links/Links.vue b/src/features/links/Links.vue index f9b89a0..1b38e42 100644 --- a/src/features/links/Links.vue +++ b/src/features/links/Links.vue @@ -16,11 +16,10 @@ import type { Link } from "features/links/links"; import type { FeatureNode } from "game/layers"; import { BoundsInjectionKey, NodesInjectionKey } from "game/layers"; -import { computed, inject, onMounted, ref, toRef, watch } from "vue"; +import { computed, inject, onMounted, ref, watch } from "vue"; import LinkVue from "./Link.vue"; -const _props = defineProps<{ links?: Link[] }>(); -const links = toRef(_props, "links"); +const props = defineProps<{ links?: Link[] }>(); const resizeListener = ref<Element | null>(null); @@ -36,7 +35,7 @@ onMounted(() => (boundingRect.value = resizeListener.value?.getBoundingClientRec const validLinks = computed(() => { const n = nodes.value; return ( - links.value?.filter(link => n[link.startNode.id]?.rect && n[link.endNode.id]?.rect) ?? [] + props.links?.filter(link => n[link.startNode.id]?.rect && n[link.endNode.id]?.rect) ?? [] ); }); </script> diff --git a/src/features/resources/MainDisplay.vue b/src/features/resources/MainDisplay.vue index 660c298..edb3bb6 100644 --- a/src/features/resources/MainDisplay.vue +++ b/src/features/resources/MainDisplay.vue @@ -25,23 +25,19 @@ import type { Resource } from "features/resources/resource"; import ResourceVue from "features/resources/Resource.vue"; import Decimal from "util/bignum"; import { computeOptionalComponent } from "util/vue"; -import { ComponentPublicInstance, ref, Ref, StyleValue } from "vue"; -import { computed, toRefs } from "vue"; +import { ComponentPublicInstance, computed, ref, StyleValue, toRef } from "vue"; -const _props = defineProps<{ +const props = defineProps<{ resource: Resource; color?: string; classes?: Record<string, boolean>; style?: StyleValue; effectDisplay?: CoercableComponent; }>(); -const props = toRefs(_props); const effectRef = ref<ComponentPublicInstance | null>(null); -const effectComponent = computeOptionalComponent( - props.effectDisplay as Ref<CoercableComponent | undefined> -); +const effectComponent = computeOptionalComponent(toRef(props, "effectDisplay")); const showPrefix = computed(() => { return Decimal.lt(props.resource.value, "1e1000"); diff --git a/src/features/tabs/Tab.vue b/src/features/tabs/Tab.vue index 103cdf6..001d40a 100644 --- a/src/features/tabs/Tab.vue +++ b/src/features/tabs/Tab.vue @@ -5,9 +5,8 @@ <script setup lang="ts"> import type { CoercableComponent } from "features/feature"; import { computeComponent } from "util/vue"; -import { toRefs } from "vue"; +import { toRef } from "vue"; -const _props = defineProps<{ display: CoercableComponent }>(); -const { display } = toRefs(_props); -const component = computeComponent(display); +const props = defineProps<{ display: CoercableComponent }>(); +const component = computeComponent(toRef(props, "display")); </script>