feat: export component prop types

[gruhn]

See: #460

@true-vue I tried to implement your suggestion. What do you think?

[cloudflare-workers-and-pages]

Deploying vue-qrcode-reader with    Cloudflare Pages

Latest commit:	22829c8
Status:	✅  Deploy successful!
Preview URL:	https://9306a281.vue-qrcode-reader.pages.dev
Branch Preview URL:	https://export-component-prop-types.vue-qrcode-reader.pages.dev

View logs

[true-vue]

I'm sorry for the delay. I hadn't noticed your message.

I have looked at the code and it looks fine. I'll try to import this version of component later on and will confirm that types are reachable for external usage.

Speak to you soon...

[true-vue]

I have successfully imported both QrcodeStream and QrcodeStreamProps. Props types are OK!

Last thing which seems to be missing is EmittedError type export in src\index.ts.

Here is the code I've been testing with (I have had to use Error instead of EmittedError):

<template>
  <div class="alert alert-danger mb-4" v-if="error">{{ error }}</div>
  <div style="border: 2px solid black">
    <qrcode-stream
      :track="paintBoundingBox"
      @detect="onDetect"
      @error="onError"
      @camera-on="onCameraOn"
    ></qrcode-stream>
  </div>
  <div class="alert alert-success mb-4" v-if="result">{{ result }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { QrcodeStream, type QrcodeStreamProps } from 'vue-qrcode-reader'

const result = ref('')
const error = ref('')

const paintBoundingBox: QrcodeStreamProps['track'] = (detectedCodes, ctx) => {
  for (const detectedCode of detectedCodes) {
    const {
      boundingBox: { x, y, width, height },
    } = detectedCode

    ctx!.lineWidth = 2
    ctx!.strokeStyle = '#007bff'
    ctx!.strokeRect(x, y, width, height)
  }
}

function onCameraOn(c: MediaTrackCapabilities) {
  console.log(c)
}

function onError(err: Error) {
  error.value = `[${err.name}]: `

  if (err.name === 'NotAllowedError') {
    error.value += 'you need to grant camera access permission'
  } else if (err.name === 'NotFoundError') {
    error.value += 'no camera on this device'
  } else if (err.name === 'NotSupportedError') {
    error.value += 'secure context required (HTTPS, localhost)'
  } else if (err.name === 'NotReadableError') {
    error.value += 'is the camera already in use?'
  } else if (err.name === 'OverconstrainedError') {
    error.value += 'installed cameras are not suitable'
  } else if (err.name === 'StreamApiNotSupportedError') {
    error.value += 'Stream API is not supported in this browser'
  } else if (err.name === 'InsecureContextError') {
    error.value +=
      'Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'
  } else {
    error.value += err.message
  }
}

function onDetect(detectedCodes: { rawValue: string }[]) {
  result.value = `${JSON.stringify(detectedCodes.map((code) => code.rawValue))} ${new Date().getTime()}`
}
</script>

[true-vue]

Thanks, that should do the tick :)

When to expect release with those changes?

[gruhn]

Last thing which seems to be missing is EmittedError type export in src\index.ts.

done 👍

[github-actions]

🎉 This PR is included in version 5.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀