types: fix multiple type issues

Author: OrbisK

playgrounds/nuxt/app/components/recorder-demo-component.vue

@@ -1,13 +1,5 @@
 <script setup lang="ts">
-// import { UseMediaRecorder} from '@orbisk/vue-use-media-recorder' // TODO: why?
-
-// function handleStop() {
-//   stop()
-//   const blob = new Blob(data.value)
-//   const blobVideo = new Blob(data.value)
-//   audio.value.src = URL.createObjectURL(blob)
-//   video.value.src = URL.createObjectURL(blobVideo)
-// }
+const getUrlFromData = (data: BlobPart[], type?: string) => URL.createObjectURL(new Blob(data, {type}))
 
 const stopped = ref(false)
 </script>
@@ -28,7 +20,7 @@ const stopped = ref(false)
         stop
       </button>
       <audio controls>
-        <source v-if="stopped" :src="URL.createObjectURL(new Blob(slotProps.data))">
+        <source v-if="stopped" :src="getUrlFromData(slotProps.data, slotProps.mimeType)">
       </audio>
       <pre>state: {{ slotProps.state }}</pre>
       <pre>supported: {{ slotProps.isSupported }}</pre>

src/components/UseMediaRecorder.vue

@@ -5,11 +5,12 @@ const props = defineProps({
   constraints: {
     type: Object,
     required: true,
-    validator(value: unknown): boolean {
-      if (!value.audio && !value.video) {
+    validator(value: any): boolean {
+      if (!value?.audio && !value?.video) {
         console.error('constraints must have at least one of audio or video')
         return false
       }
+      return true
     },
   },
   mediaRecorderOptions: {
@@ -26,11 +27,11 @@ const emit = defineEmits<{
   error: [ev: Event]
 }>()
 
-const onStart = (...args) => emit('start', ...args)
-const onStop = (...args) => emit('stop', ...args)
-const onPause = (...args) => emit('pause', ...args)
-const onResume = (...args) => emit('resume', ...args)
-const onError = (...args) => emit('error', ...args)
+const onStart = (...args: [Event]) => emit('start', ...args)
+const onStop = (...args: [Event]) => emit('stop', ...args)
+const onPause = (...args: [Event]) => emit('pause', ...args)
+const onResume = (...args: [Event]) => emit('resume', ...args)
+const onError = (...args: [Event]) => emit('error', ...args)
 
 const {
   data,

tests/components/UseMediaRecorder.spec.ts

@@ -63,13 +63,13 @@ describe('useMediaRecorder component', () => {
     await vi.waitFor(() => {
       // check if start emits an event from type Event with trusted true
       expect(mediaRecorder.emitted().start).toHaveLength(1)
-      expect(mediaRecorder.emitted().start[0]).toMatchObject([{ isTrusted: true }])
+      expect(mediaRecorder.emitted().start?.[0]).toMatchObject([{ isTrusted: true }])
     })
     await mediaRecorder.vm.stop()
     await vi.waitFor(() => {
       // check if stop emits an event from type Event with trusted true
       expect(mediaRecorder.emitted().stop).toHaveLength(1)
-      expect(mediaRecorder.emitted().stop[0]).toMatchObject([{ isTrusted: true }])
+      expect(mediaRecorder.emitted().stop?.[0]).toMatchObject([{ isTrusted: true }])
     })
   })
 
@@ -84,13 +84,13 @@ describe('useMediaRecorder component', () => {
     await vi.waitFor(() => {
       // check if start emits an event from type Event with trusted true
       expect(mediaRecorder.emitted().pause).toHaveLength(1)
-      expect(mediaRecorder.emitted().pause[0]).toMatchObject([{ isTrusted: true }])
+      expect(mediaRecorder.emitted().pause?.[0]).toMatchObject([{ isTrusted: true }])
     })
     mediaRecorder.vm.resume()
     await vi.waitFor(() => {
       // check if start emits an event from type Event with trusted true
       expect(mediaRecorder.emitted().resume).toHaveLength(1)
-      expect(mediaRecorder.emitted().resume[0]).toMatchObject([{ isTrusted: true }])
+      expect(mediaRecorder.emitted().resume?.[0]).toMatchObject([{ isTrusted: true }])
     })
   })
 

tsconfig.json

@@ -5,5 +5,8 @@
       "@vitest/browser/providers/webdriverio",
       "@vitest/browser/providers/playwright"
     ]
-  }
+  },
+  "exclude": [
+    "dist"
+  ]
 }