refactor: [WIP] use defineComponent instead of Vue.extend

And fix revealed TypeScript errors
SwissTchoukball · Feb 9, 2024 · c3b534e · c3b534e
1 parent e06527f
commit c3b534e
Show file tree

Hide file tree

Showing 97 changed files with 278 additions and 237 deletions.
diff --git a/components/competitions/st-match-event-small.vue b/components/competitions/st-match-event-small.vue
@@ -1,19 +1,20 @@
 <template>
   <st-event-small
-    :start-date="match.parsedDate()"
-    :name="`${match.home_team.name} - ${match.away_team.name}`"
+    v-if="match.parsedDate"
+    :start-date="match.parsedDate"
+    :name="matchName"
     :details="details"
     :to="to"
   />
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import Match from '~/models/match.model';
 import stEventSmall from '~/components/events/st-event-small.vue';
 import CompetitionEdition from '~/models/competition-edition.model';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stEventSmall },
   props: {
     match: {
@@ -39,6 +40,9 @@ export default Vue.extend({
         },
       });
     },
+    matchName(): string {
+      return `${this.match.home_team?.name} - ${this.match.away_team?.name}`;
+    },
   },
 });
 </script>
diff --git a/components/competitions/st-match-result-list.vue b/components/competitions/st-match-result-list.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import stMatchResult from '~/components/competitions/st-match-result.vue';
 import Match from '~/models/match.model';
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     stMatchResult,
   },

diff --git a/components/competitions/st-match-result.vue b/components/competitions/st-match-result.vue
@@ -43,10 +43,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import Match from '~/models/match.model';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     match: {
       type: Object as PropType<Match>,

diff --git a/components/competitions/st-upcoming-matches.vue b/components/competitions/st-upcoming-matches.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Match from '~/models/match.model';
 import stMatchEventSmall from '~/components/competitions/st-match-event-small.vue';
 import Phase from '~/models/phase.model';
@@ -48,7 +48,7 @@ import Round from '~/models/round.model';
 import CompetitionEdition from '~/models/competition-edition.model';
 import { NationalCompetitionEdition } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stMatchEventSmall },
   data() {
     return {

diff --git a/components/events/st-calendar-nav.vue b/components/events/st-calendar-nav.vue
@@ -33,9 +33,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     month: {
       type: Number,

diff --git a/components/events/st-event-date.vue b/components/events/st-event-date.vue
@@ -12,10 +12,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { isSameDay, isSameMonth, isSameYear } from 'date-fns';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     startDate: {
       type: Date as PropType<Date>,

diff --git a/components/events/st-event-list.vue b/components/events/st-event-list.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import stEvent from '~/components/events/st-event.vue';
 import { CalendarEvent } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     stEvent,
   },

diff --git a/components/events/st-event-small.vue b/components/events/st-event-small.vue
@@ -23,10 +23,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { isSameDay, isSameMonth } from 'date-fns';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     startDate: {
       type: Date as PropType<Date>,

diff --git a/components/events/st-event.vue b/components/events/st-event.vue
@@ -21,7 +21,7 @@
           <st-cancelled-label v-if="isCancelled" class="c-event__cancelled-label" />
         </h3>
         <nuxt-link
-          v-if="eventType.name"
+          v-if="eventType && eventType.name"
           :to="
             localePath({ name: 'events-slug', params: { slug: `${eventType.id}-${$slugify(eventType.name_plural)}` } })
           "
@@ -71,15 +71,15 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 // import { Location } from 'vue-router';
 import { Store } from 'vuex';
 import { CalendarEvent } from '~/plugins/cms-service';
 import { EventType, EventTypes, RootState } from '~/store/state';
 import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
 import stEventDate from '~/components/events/st-event-date.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stEventDate },
   props: {
     event: {
@@ -154,9 +154,9 @@ export default Vue.extend({
     mainImageDescription(): string {
       return this.event?.image?.description || this.eventType?.image?.description || '';
     },
-    mapsUrl(): string | null {
+    mapsUrl(): string | undefined {
       if (!this.event.venue) {
-        return null;
+        return undefined;
       }
       // This link will fallback to Google Maps if Apple Maps is not available
       return `//maps.apple.com/?q=${this.event.venue.address?.replace('\n', ', ')}`;

diff --git a/components/events/st-month-calendar.vue b/components/events/st-month-calendar.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import {
   addDays,
   differenceInCalendarDays,
@@ -68,7 +68,7 @@ interface CalendarDays {
   [key: string]: CalendarDay;
 }
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     month: {
       type: Number,

diff --git a/components/icon/st-custom-icon.vue b/components/icon/st-custom-icon.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
   props: {
     iconName: {
       type: String,

diff --git a/components/national-teams/st-national-team-competition-team-list.vue b/components/national-teams/st-national-team-competition-team-list.vue
@@ -38,12 +38,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NationalTeamForCompetition } from './st-national-teams.prop';
 import StPlayer from '~/components/national-teams/st-player.vue';
 import StPerson from '~/components/people/st-person.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { StPerson, StPlayer },
   props: {
     teams: {

diff --git a/components/national-teams/st-national-team-competition-update-list.vue b/components/national-teams/st-national-team-competition-update-list.vue
@@ -47,7 +47,7 @@
           <select
             v-model="filters.selectedTeamId"
             class="c-national-team-competition-update-list__team-filter"
-            :aria-label="$t('internationalCompetition.live.updates.filters.teams')"
+            :aria-label="$t('internationalCompetition.live.updates.filters.teams').toString()"
           >
             <option :value="undefined">{{ $t('internationalCompetition.live.updates.filters.noTeamFilter') }}</option>
             <option v-for="team of teams" :key="team.id" :value="team.id">{{ team.name }}</option>
@@ -85,14 +85,14 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NationalTeamCompetitionUpdate } from './st-national-teams.prop';
 import StNationalTeamCompetitionUpdate from '~/components/national-teams/st-national-team-competition-update.vue';
 
 const UPDATES_PER_PAGE = 10;
 const REFRESH_INTERVAL = 30; // In seconds
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     StNationalTeamCompetitionUpdate,
   },

diff --git a/components/national-teams/st-national-team-competition-update.vue b/components/national-teams/st-national-team-competition-update.vue
@@ -28,13 +28,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { differenceInDays } from 'date-fns';
 import linkifyString from 'linkify-string';
 import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
 import { NationalTeamCompetitionUpdate } from '~/components/national-teams/st-national-teams.prop';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     update: {
       type: Object as PropType<NationalTeamCompetitionUpdate>,

diff --git a/components/national-teams/st-player.vue b/components/national-teams/st-player.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import stPerson, { PersonDetail } from '~/components/people/st-person.vue';
 import { Player } from '~/components/national-teams/st-national-teams.prop';
 import { Gender } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stPerson },
   props: {
     player: {
@@ -22,8 +22,8 @@ export default Vue.extend({
     },
   },
   computed: {
-    subName(): string | null {
-      return this.player.is_captain ? this.$t('nationalTeams.captain').toString() : null;
+    subName(): string | undefined {
+      return this.player.is_captain ? this.$t('nationalTeams.captain').toString() : undefined;
     },
     details(): PersonDetail[] {
       const details = [];

diff --git a/components/news/st-news-list.vue b/components/news/st-news-list.vue
@@ -36,14 +36,14 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NewsEntry } from '~/components/news/st-news';
 import { Domain } from '~/plugins/cms-service';
 import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
 
 const MAX_NEWS_PER_ROW = 4;
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     news: {
       type: Array as PropType<NewsEntry[]>,

diff --git a/components/news/st-news.vue b/components/news/st-news.vue
@@ -19,13 +19,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { NewsEntry } from '~/components/news/st-news';
 import { BreadcrumbItem } from '~/components/st-breadcrumb.vue';
 import { Domain } from '~/plugins/cms-service';
 import { getAssetURL, getAssetSrcSet } from '~/plugins/directus';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     newsEntry: {
       type: Object as PropType<NewsEntry>,

diff --git a/components/people/st-person.vue b/components/people/st-person.vue
@@ -4,7 +4,7 @@
       v-if="avatarAssetId"
       :src="avatarSrc"
       :srcset="avatarSrcSet"
-      :alt="$t('person.photoOf', { name })"
+      :alt="$t('person.photoOf', { name }).toString()"
       class="c-person__avatar"
     />
     <div v-else class="c-person__avatar">
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { getAssetURL } from '~/plugins/directus';
 
 export interface PersonDetail {
@@ -40,7 +40,7 @@ export interface PersonDetail {
   href?: string;
 }
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     avatarAssetId: {
       type: String,

diff --git a/components/people/st-role.vue b/components/people/st-role.vue
@@ -5,7 +5,7 @@
       v-for="holder in role.holders"
       :key="holder.id"
       :name="`${holder.first_name} ${holder.last_name}`"
-      :sub-name="roleAsSubname ? nameForHolders : null"
+      :sub-name="roleAsSubname ? nameForHolders : undefined"
       :avatar-asset-id="holder.portrait_square_head"
       :details="getHolderDetails(holder)"
       class="c-role__person"
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import stPerson, { PersonDetail } from '~/components/people/st-person.vue';
 import { Gender, Person, Role } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stPerson },
   props: {
     role: {

diff --git a/components/people/st-staff-person.vue b/components/people/st-staff-person.vue
@@ -21,11 +21,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import stPerson, { PersonDetail } from '~/components/people/st-person.vue';
 import { Gender, Person, Role } from '~/plugins/cms-service';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stPerson },
   props: {
     person: {

diff --git a/components/resources/st-resource-list.vue b/components/resources/st-resource-list.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { Resource } from '~/plugins/cms-service';
 import stResource from '~/components/resources/st-resource.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { stResource },
   props: {
     resources: {