Use defineComponent, add prop types and emit types

src/components/VAllResultsGrid/VAudioCell.vue

@@ -2,13 +2,20 @@
   <VAudioTrack :audio="audio" layout="box" />
 </template>
 
-<script>
-import { defineComponent } from '@vue/composition-api'
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import type { AudioDetail } from '~/models/media'
 
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
 export default defineComponent({
   components: { VAudioTrack },
-  props: ['audio'],
+  props: {
+    audio: {
+      type: Object as PropType<AudioDetail>,
+      required: true,
+    },
+  },
 })
 </script>

src/components/VErrorSection/VErrorImage.vue

@@ -15,7 +15,7 @@
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import type { License, LicenseVersion } from '~/constants/license'
-import { ErrorCode, errorCodes } from '~/constants/errors'
+import type { ErrorCode } from '~/constants/errors'
 import { AttributableMedia, getAttribution } from '~/utils/attribution-html'
 import { useI18n } from '~/composables/use-i18n'
 
@@ -40,7 +40,6 @@ export default defineComponent({
     errorCode: {
       type: String as PropType<ErrorCode>,
       required: true,
-      validator: (val: ErrorCode) => errorCodes.includes(val),
     },
   },
   setup(props) {

src/components/VFilters/VLicenseExplanation.vue

@@ -35,8 +35,12 @@
   </div>
 </template>
 
-<script>
-import { isLicense, getLicenseUrl } from '~/utils/license'
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import { getLicenseUrl, isLicense } from '~/utils/license'
+
+import type { License } from '~/constants/license'
 
 import VLicenseElements from '~/components/VLicense/VLicenseElements.vue'
 import VLink from '~/components/VLink.vue'
@@ -45,7 +49,7 @@ import VLink from '~/components/VLink.vue'
  * Renders the explanation of the license passed to it by breaking it down to
  * its constituent clauses.
  */
-export default {
+export default defineComponent({
   name: 'VLicenseExplanation',
   components: {
     VLicenseElements,
@@ -56,7 +60,7 @@ export default {
      * the code of the license whose elements need to be explained
      */
     license: {
-      type: String,
+      type: String as PropType<License>,
       required: true,
     },
   },
@@ -66,5 +70,5 @@ export default {
       getLicenseUrl,
     }
   },
-}
+})
 </script>

src/components/VLicense/VLicense.vue

@@ -19,7 +19,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
-import { ALL_LICENSES, License, LICENSE_ICONS } from '~/constants/license'
+import { License, LICENSE_ICONS } from '~/constants/license'
 import { getFullLicenseName, getElements } from '~/utils/license'
 import { useI18n } from '~/composables/use-i18n'
 
@@ -40,7 +40,6 @@ export default defineComponent({
     license: {
       type: String as PropType<License>,
       required: true,
-      validator: (val: License) => ALL_LICENSES.includes(val as License),
     },
     /**
      * Whether to display icons filled with a white background or leave them transparent.

src/components/VLicense/VLicenseElements.vue

@@ -24,7 +24,7 @@
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import type { License } from '~/constants/license'
-import { ALL_LICENSES, LICENSE_ICONS } from '~/constants/license'
+import { LICENSE_ICONS } from '~/constants/license'
 
 import { getElements } from '~/utils/license'
 
@@ -41,15 +41,13 @@ export default defineComponent({
     license: {
       type: String as PropType<License>,
       required: true,
-      validator: (val: License) => ALL_LICENSES.includes(val),
     },
     /**
      * the size of the icons and text
      */
     size: {
       type: String as PropType<'big' | 'small'>,
       default: 'big',
-      validator: (val: 'big' | 'small') => ['big', 'small'].includes(val),
     },
   },
   setup(props) {

src/components/VLogoLoader/VLogoLoader.vue

@@ -39,16 +39,23 @@
   </svg>
 </template>
 
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { useReducedMotion } from '~/composables/use-media-query'
 
-import { propTypes } from './VLogoLoader.types'
-
 export default defineComponent({
   name: 'VLogoLoader',
-  props: propTypes,
+  props: {
+    status: {
+      type: String as PropType<'loading' | 'idle'>,
+      default: 'idle',
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+  },
   setup() {
     const prefersReducedMotion = useReducedMotion()
 

src/components/VMediaTag/VMediaTag.vue

@@ -9,12 +9,14 @@
   </Component>
 </template>
 
-<script>
+<script lang="ts">
 /**
  * Displays a tag associated with a media item. If set up as a link, it can be
  * used as a link to find other items that are similarly tagged.
  */
-export default {
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
   name: 'MediaTag',
   props: {
     /**
@@ -26,5 +28,5 @@ export default {
       default: 'span',
     },
   },
-}
+})
 </script>

src/components/VSkeleton/VAudioTrackSkeleton.vue

@@ -30,15 +30,17 @@
   </article>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
   name: 'VAudioTrackSkeleton',
   methods: {
     getRandomSize(max = 250, min = 70) {
       return Math.floor(Math.random() * (max - min) + min)
     },
   },
-}
+})
 </script>
 
 <style scoped>

src/components/VSkeleton/VBone.vue

@@ -2,11 +2,13 @@
   <div :class="['bg-dark-charcoal-10', shimmer ? 'shimmering' : '']" />
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
   name: 'VBone',
   props: { shimmer: { type: Boolean, default: true } },
-}
+})
 </script>
 
 <style scoped>

src/components/VSkeleton/VGridSkeleton.vue

@@ -22,22 +22,25 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
 /**
  * Display placeholder elements while waiting for the actual elements to be
  * loaded in the results views.
  */
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import type { SupportedSearchType } from '~/constants/media'
+
 import VAudioTrackSkeleton from '~/components/VSkeleton/VAudioTrackSkeleton.vue'
 import VBone from '~/components/VSkeleton/VBone.vue'
 
-export default {
+export default defineComponent({
   name: 'VGridSkeleton',
   components: { VAudioTrackSkeleton, VBone },
   props: {
     isForTab: {
-      type: String,
+      type: String as PropType<SupportedSearchType>,
       default: 'image',
-      validator: (val) => ['all', 'image', 'audio'].includes(val),
     },
     numElems: {
       type: Number,
@@ -55,7 +58,7 @@ export default {
 
     return { getRandomSize }
   },
-}
+})
 </script>
 
 <style scoped>

tsconfig.json

@@ -38,7 +38,6 @@
     "test/proxy.js",
     "src/components/VButton.vue",
     "src/components/VContentPage.vue",
-    "src/components/VMetaSearch/*.vue",
     "src/components/VLicenseElements.vue",
     "src/components/VWarningSuppressor.vue",
     "src/components/VLink.vue",
@@ -50,23 +49,30 @@
     "src/components/VBackToSearchResultsLink.vue",
     "src/components/VSourcesTable.vue",
     "src/components/TableSortIcon.vue",
-    "src/components/VIcon/VIcon.vue",
-    "src/components/VCheckbox/VCheckbox.vue",
-    "src/components/VIconButton/VIconButton.vue",
-    "src/components/VLicense/VLicense.vue",
-    "src/components/VContentLink/VContentLink.vue",
+    "src/components/VCopyButton.vue",
+    "src/components/VSketchFabViewer.vue",
+    "src/components/VAudioThumbnail/**.vue",
+    "src/components/VAudioTrack/**/*.vue",
+    "src/components/VCheckbox/**.vue",
+    "src/components/VGlobalAudioSection/**.vue",
+    "src/components/VIcon/**.vue",
+    "src/components/VIconButton/**.vue",
+    "src/components/VLicense/**.vue",
+    "src/components/VLogoLoader/**.vue",
+    "src/components/VMediaInfo/**.vue",
+    "src/components/VMediaTag/**.vue",
+    "src/components/VMetaSearch/*.vue",
+    "src/components/VSkeleton/**.vue",
+    "src/components/VTabs/**.vue",
+    "src/components/VAllResultsGrid/VAudioCell.vue",
+    "src/components/VContentLink/**.vue",
     "src/components/VContentReport/VReportDescForm.vue",
     "src/components/VErrorSection/VErrorImage.vue",
-    "src/components/VAudioTrack/**/*.vue",
-    "src/components/VAudioThumbnail/VAudioThumbnail.vue",
-    "src/components/VGlobalAudioSection/VGlobalAudioSection.vue",
-    "src/components/VInputField/VInputField.vue",
     "src/components/VHeader/VFilterButton.vue",
     "src/components/VHeader/VSearchBar/VSearchBar.vue",
-    "src/components/VTabs/**.vue",
-    "src/components/VCopyButton.vue",
-    "src/components/VMediaInfo/**.vue",
-    "src/components/VSketchFabViewer.vue",
+    "src/components/VInputField/VInputField.vue",
+    "src/components/VErrorSection/VErrorImage.vue",
+    "src/components/VFilters/VLicenseExplanation.vue",
     "src/pages/feedback.vue",
     "src/pages/search-help.vue",
     "src/pages/extension.vue",