refactor: make match-collector export its types, and consume them in frontend

frontend/components/ChampionSelector.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { debounce, isEmpty } from '~/utils/helpers'
-
+import type { ChampionSummary, LaneData, ChampionData } from 'match_collector'
 // Constants
 const CHAMPIONS_API_URL = '/api/champions'
 

frontend/components/build/BuildVariantSelector.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
 
+import type { Perk, Item } from '~/types/cdragon'
+
 const props = defineProps<{
   keystoneId: number
   itemId: number

frontend/components/build/CompactRuneSelector.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
 
+import type { PerkStyle, Perk } from '~/types/cdragon'
+
 interface RuneBuild {
   count: number
   primaryStyle: number

frontend/components/build/FirstBack.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import type { FirstBackGroup } from 'match_collector'
+import type { Item } from '~/types/cdragon'
+
 defineProps<{
   firstBacks: FirstBackGroup[]
   itemMap: Map<number, Item>

frontend/components/build/ItemRow.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Item } from '~/types/cdragon'
+
 interface ItemData {
   data: number
   count: number

frontend/components/build/Viewer.vue

@@ -5,8 +5,10 @@ import CompactRuneSelector from '~/components/build/CompactRuneSelector.vue'
 import ItemRow from '~/components/build/ItemRow.vue'
 import FirstBack from '~/components/build/FirstBack.vue'
 
+import type { Build } from 'match_collector'
+
 const props = defineProps<{
-  builds: Builds
+  builds: Array<Build>
 }>()
 
 // State

frontend/components/item/ItemIcon.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
 
+import type { Item } from '~/types/cdragon'
+import type { ItemTag } from 'match_collector'
+
 interface Props {
   item: Item
   size?: number

frontend/components/item/ItemTooltip.vue

@@ -7,6 +7,9 @@ import {
   type ParsedDescription
 } from 'dragon-item-parser'
 
+import type { Item } from '~/types/cdragon'
+import type { ItemTag } from 'match_collector'
+
 interface Props {
   item: Item | null
   show: boolean

frontend/components/item/Tree.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { LinePath as svgdomarrowsLinePath } from 'svg-dom-arrows'
 
+import type { ItemTree } from 'match_collector'
+import type { Item } from '~/types/cdragon'
+
 defineProps<{
   tree: ItemTree
   parentCount?: number

frontend/components/matchup/Section.vue

@@ -2,6 +2,8 @@
 import { CDRAGON_BASE } from '~/utils/cdragon'
 import MatchupSpectrum from './Spectrum.vue'
 
+import type { MatchupData } from 'match_collector'
+
 defineProps<{
   matchups?: Array<MatchupData>
   championId: number

frontend/components/matchup/Spectrum.vue

@@ -2,6 +2,8 @@
 import { ref } from 'vue'
 import { CDRAGON_BASE } from '~/utils/cdragon'
 
+import type { MatchupData } from 'match_collector'
+
 defineProps<{
   matchups?: Array<MatchupData>
   championId: number

frontend/components/nav/Bar.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { LaneData } from 'match_collector'
+
 defineProps<{
   championName?: string
   championLanes?: Array<LaneData>

frontend/components/nav/BottomBar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon'
 
+import type { LaneData } from 'match_collector'
+
 defineProps<{
   championName?: string
   championLanes?: Array<LaneData>

frontend/components/nav/SideBar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon'
 
+import type { LaneData } from 'match_collector'
+
 defineProps<{
   championName?: string
   championLanes?: Array<LaneData>

frontend/components/rune/Page.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { PerkStyle, Perk } from '~/types/cdragon'
+
 const props = defineProps<{
   primaryStyleId: number
   secondaryStyleId: number
@@ -8,13 +10,14 @@ const props = defineProps<{
 const primaryStyle: Ref<PerkStyle> = ref({ id: 0, name: '', iconPath: '', slots: [] })
 const secondaryStyle: Ref<PerkStyle> = ref({ id: 0, name: '', iconPath: '', slots: [] })
 
-const { data: perks_data }: PerksResponse = await useFetch('/api/cdragon/perks')
+const { data: perks_data }: { data: Ref<Array<Perk>> } = await useFetch('/api/cdragon/perks')
 const perks = reactive(new Map())
 for (const perk of perks_data.value) {
   perks.set(perk.id, perk)
 }
 
-const { data: stylesData }: PerkStylesResponse = await useFetch('/api/cdragon/perkstyles')
+const { data: stylesData }: { data: Ref<{ styles: Array<PerkStyle> }> } =
+  await useFetch('/api/cdragon/perkstyles')
 watch(
   () => props.primaryStyleId,
   async (_newP, _oldP) => {

frontend/components/tierlist/Chart.vue

@@ -10,6 +10,9 @@ import {
 } from 'chart.js'
 import { Bar } from 'vue-chartjs'
 
+import type { Champion } from '~/types/cdragon'
+import type { LaneData } from 'match_collector'
+
 // Register
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 

frontend/components/tierlist/Tier.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import type { LaneData } from 'match_collector'
+import type { Champion } from '~/types/cdragon'
+
 defineProps<{
   title: string
   tier: Array<{ champion: Champion; lane: LaneData }>