From 6ad08c405255b60c68fb80cef1c179c5c4e0d93a Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 21 May 2023 17:27:04 -0500
Subject: [PATCH] Fix camelCase props not working on links

---
 src/features/boards/BoardLink.vue | 5 ++++-
 src/features/links/Link.vue       | 5 ++++-
 src/util/common.ts                | 5 +++++
 src/util/vue.tsx                  | 8 ++++++++
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/features/boards/BoardLink.vue b/src/features/boards/BoardLink.vue
index 1f5ca178..30e5748a 100644
--- a/src/features/boards/BoardLink.vue
+++ b/src/features/boards/BoardLink.vue
@@ -1,7 +1,7 @@
 <template>
     <line
         class="link"
-        v-bind="link"
+        v-bind="linkProps"
         :class="{ pulsing: link.pulsing }"
         :x1="startPosition.x"
         :y1="startPosition.y"
@@ -12,6 +12,7 @@
 
 <script setup lang="ts">
 import type { BoardNode, BoardNodeLink } from "features/boards/board";
+import { kebabifyObject } from "util/vue";
 import { computed, toRefs, unref } from "vue";
 
 const _props = defineProps<{
@@ -49,6 +50,8 @@ const endPosition = computed(() => {
     }
     return position;
 });
+
+const linkProps = computed(() => kebabifyObject(_props.link as unknown as Record<string, unknown>));
 </script>
 
 <style scoped>
diff --git a/src/features/links/Link.vue b/src/features/links/Link.vue
index f7b95804..815f5118 100644
--- a/src/features/links/Link.vue
+++ b/src/features/links/Link.vue
@@ -2,7 +2,7 @@
     <line
         stroke-width="15px"
         stroke="white"
-        v-bind="link"
+        v-bind="linkProps"
         :x1="startPosition.x"
         :y1="startPosition.y"
         :x2="endPosition.x"
@@ -13,6 +13,7 @@
 <script setup lang="ts">
 import type { Link } from "features/links/links";
 import type { FeatureNode } from "game/layers";
+import { kebabifyObject } from "util/vue";
 import { computed, toRefs } from "vue";
 
 const _props = defineProps<{
@@ -54,4 +55,6 @@ const endPosition = computed(() => {
     }
     return position;
 });
+
+const linkProps = computed(() => kebabifyObject(_props.link as unknown as Record<string, unknown>));
 </script>
diff --git a/src/util/common.ts b/src/util/common.ts
index d7560dd9..dbbe233f 100644
--- a/src/util/common.ts
+++ b/src/util/common.ts
@@ -12,6 +12,11 @@ export function camelToTitle(camel: string): string {
     return title;
 }
 
+export function camelToKebab(camel: string) {
+    // Split off first character so function works on upper camel (pascal) case
+    return (camel[0] + camel.slice(1).replace(/[A-Z]/g, c => `-${c}`)).toLowerCase();
+}
+
 export function isFunction<T, S extends ReadonlyArray<unknown>, R>(
     functionOrValue: ((...args: S) => T) | R
 ): functionOrValue is (...args: S) => T {
diff --git a/src/util/vue.tsx b/src/util/vue.tsx
index a3897a55..3ba5f062 100644
--- a/src/util/vue.tsx
+++ b/src/util/vue.tsx
@@ -21,6 +21,7 @@ import {
     unref,
     watchEffect
 } from "vue";
+import { camelToKebab } from "./common";
 
 export function coerceComponent(
     component: CoercableComponent,
@@ -241,3 +242,10 @@ export function trackHover(element: VueFeature): Ref<boolean> {
 
     return isHovered;
 }
+
+export function kebabifyObject(object: Record<string, unknown>) {
+    return Object.keys(object).reduce((acc, curr) => {
+        acc[camelToKebab(curr)] = object[curr];
+        return acc;
+    }, {} as Record<string, unknown>);
+}