From 6c8dd66677c56ed8f926b584f95fe9879e7c17cc Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 20 Oct 2024 06:27:24 -0500
Subject: [PATCH] Remove _props abstraction (fixes #2)

---
 src/components/Node.vue                |  9 ++++-----
 src/components/fields/DangerButton.vue |  8 ++++----
 src/components/fields/Slider.vue       |  8 ++++----
 src/components/modals/Info.vue         |  7 +++----
 src/components/modals/Modal.vue        | 10 +++++-----
 src/components/modals/Save.vue         | 18 ++++++++---------
 src/features/links/Link.vue            | 27 +++++++++++++-------------
 src/features/links/Links.vue           |  7 +++----
 src/features/resources/MainDisplay.vue | 10 +++-------
 src/features/tabs/Tab.vue              |  7 +++----
 10 files changed, 51 insertions(+), 60 deletions(-)

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>