From f92974377df0ac3fc784055e3d551911916273fb Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 28 Jun 2022 12:14:46 +0300
Subject: [PATCH] Use `defineComponent`, add prop types and emit types (#1480)

* Use `defineComponent`, add prop types and emit types
* Add more files to tsconfig
* Remove changes that cannot be added to tsconfig
---
 src/components/VAllResultsGrid/VAudioCell.vue | 13 +++++--
 src/components/VErrorSection/VErrorImage.vue  |  3 +-
 .../VFilters/VLicenseExplanation.vue          | 14 +++++---
 src/components/VLicense/VLicense.vue          |  3 +-
 src/components/VLicense/VLicenseElements.vue  |  4 +--
 .../VLogoLoader/VLogoLoader.types.js          | 13 -------
 src/components/VLogoLoader/VLogoLoader.vue    | 17 +++++++---
 src/components/VMediaTag/VMediaTag.vue        |  8 +++--
 .../VSkeleton/VAudioTrackSkeleton.vue         |  8 +++--
 src/components/VSkeleton/VBone.vue            |  8 +++--
 src/components/VSkeleton/VGridSkeleton.vue    | 13 ++++---
 tsconfig.json                                 | 34 +++++++++++--------
 12 files changed, 77 insertions(+), 61 deletions(-)
 delete mode 100644 src/components/VLogoLoader/VLogoLoader.types.js

diff --git a/src/components/VAllResultsGrid/VAudioCell.vue b/src/components/VAllResultsGrid/VAudioCell.vue
index d31e5f6722..1e863c4d19 100644
--- a/src/components/VAllResultsGrid/VAudioCell.vue
+++ b/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>
diff --git a/src/components/VErrorSection/VErrorImage.vue b/src/components/VErrorSection/VErrorImage.vue
index a477a5d2ee..7cde19e325 100644
--- a/src/components/VErrorSection/VErrorImage.vue
+++ b/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) {
diff --git a/src/components/VFilters/VLicenseExplanation.vue b/src/components/VFilters/VLicenseExplanation.vue
index ba877cd0b9..a1651fac27 100644
--- a/src/components/VFilters/VLicenseExplanation.vue
+++ b/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>
diff --git a/src/components/VLicense/VLicense.vue b/src/components/VLicense/VLicense.vue
index ab44ec0265..474450ad70 100644
--- a/src/components/VLicense/VLicense.vue
+++ b/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.
diff --git a/src/components/VLicense/VLicenseElements.vue b/src/components/VLicense/VLicenseElements.vue
index 7773701f7d..54ea7622ca 100644
--- a/src/components/VLicense/VLicenseElements.vue
+++ b/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,7 +41,6 @@ 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
@@ -49,7 +48,6 @@ export default defineComponent({
     size: {
       type: String as PropType<'big' | 'small'>,
       default: 'big',
-      validator: (val: 'big' | 'small') => ['big', 'small'].includes(val),
     },
   },
   setup(props) {
diff --git a/src/components/VLogoLoader/VLogoLoader.types.js b/src/components/VLogoLoader/VLogoLoader.types.js
deleted file mode 100644
index 17570da627..0000000000
--- a/src/components/VLogoLoader/VLogoLoader.types.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export const propTypes = {
-  status: {
-    type: /** @type {'loading'|'idle'} */ (String),
-    default: 'idle',
-    required: false,
-  },
-  autoResize: {
-    type: Boolean,
-    default: true,
-  },
-}
-
-/** @typedef {import('@nuxtjs/composition-api').ExtractPropTypes<typeof propTypes>} Props */
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 55551f550b..e9571ab54e 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/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()
 
diff --git a/src/components/VMediaTag/VMediaTag.vue b/src/components/VMediaTag/VMediaTag.vue
index c103ac25dd..1bb066982b 100644
--- a/src/components/VMediaTag/VMediaTag.vue
+++ b/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>
diff --git a/src/components/VSkeleton/VAudioTrackSkeleton.vue b/src/components/VSkeleton/VAudioTrackSkeleton.vue
index 751f3b9f4b..2513015dc1 100644
--- a/src/components/VSkeleton/VAudioTrackSkeleton.vue
+++ b/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>
diff --git a/src/components/VSkeleton/VBone.vue b/src/components/VSkeleton/VBone.vue
index 9802aec417..b947517fae 100644
--- a/src/components/VSkeleton/VBone.vue
+++ b/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>
diff --git a/src/components/VSkeleton/VGridSkeleton.vue b/src/components/VSkeleton/VGridSkeleton.vue
index 2249c7b2c3..103de65c37 100644
--- a/src/components/VSkeleton/VGridSkeleton.vue
+++ b/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>
diff --git a/tsconfig.json b/tsconfig.json
index 2da2e5edd5..dd7b0f7cab 100644
--- a/tsconfig.json
+++ b/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",