Fix camelCase props not working on links

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>

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>

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 {

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>);
+}