Add props validation

src/components/vue-tweet.vue

@@ -1,11 +1,12 @@
 <template>
   <slot v-if="isLoading" name="loading"></slot>
   <slot v-else-if="hasError" name="error"></slot>
-  <div ref="tweetContainer" v-bind="attrs"></div>
+  <div ref="tweetContainerRef" v-bind="attrs"></div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, onMounted, PropType, nextTick, watch } from "vue";
+const langs = ["ar", "bn", "cs", "da", "de", "el", "en", "es", "fa", "fi", "fil", "fr", "he", "hi", "hu", "id", "it", "ja", "ko", "msa", "nl", "no", "pl", "pt", "ro", "ru", "sv", "th", "tr", "uk", "ur", "vi", "zh-cn", "zh-tw"] as const;
 
 export default defineComponent({
   props: {
@@ -22,47 +23,63 @@ export default defineComponent({
      */
     conversation: {
       type: String as PropType<"all" | "none">,
-      default: "all"
+      default: "all",
+      validator: (value: string) =>  ["all", "none"].includes(value)
     },
     /**
      * When set to hidden, links in a Tweet are not expanded to photo, video, or link previews.
      * @default "visible"
      */
     cards: {
       type: String as PropType<"visible" | "hidden">,
-      default: "visible"
+      default: "visible",
+      validator: (value: string) => ["visible", "hidden"].includes(value)
     },
     /**
      * The maximum width of the rendered Tweet in whole pixels. This value should be between 250 and 550 pixels.
      * @default "auto"
      */
     width: {
       type: [String, Number] as PropType<"auto" | number>,
-      default: "auto"
+      default: "auto",
+      validator: (value: string | number) => {
+        if (typeof value === "string") {
+          return value === "auto";
+        }
+
+        if (typeof value === "number") {
+          return value >= 250 && value <= 550;
+        }
+
+        return false;
+      }
     },
     /**
      * Float the Tweet left, right, or center relative to its container. Typically set to allow text or other content to wrap around the Tweet.
      * @default undefined
      */
     align: {
       type: [String, undefined] as PropType<"left" | "right" | "center" | undefined>,
-      default: undefined
+      default: undefined,
+      validator: (value: string | undefined) => ["left", "right", "center", undefined].includes(value)
     },
     /**
      * When set to dark, displays Tweet with light text over a dark background.
      * @default "light"
      */
     theme: {
       type: String as PropType<"light" | "dark">,
-      default: "light"
+      default: "light",
+      validator: (value: string) => ["light", "dark"].includes(value)
     },
     /**
      * A supported Twitter language code. Loads text components in the specified language. Note: does not affect the text of the cited Tweet.
      * @default "en"
      */
     lang: {
-      type: String as PropType<"ar" | "bn" | "cs" | "da" | "de" | "el" | "en" | "es" | "fa" | "fi" | "fil" | "fr" | "he" | "hi" | "hu" | "id" | "it" | "ja" | "ko" | "msa" | "nl" | "no" | "pl" | "pt" | "ro" | "ru" | "sv" | "th" | "tr" | "uk" | "ur" | "vi" | "zh-cn" | "zh-tw">,
-      default: "en"
+      type: String as PropType<typeof langs[number]>,
+      default: "en",
+      validator: (value: typeof langs[number]) => langs.includes(value)
     },
     /**
      * When set to true, the Tweet and its embedded page on your site are not used for purposes that include personalized suggestions and personalized ads.
@@ -77,7 +94,7 @@ export default defineComponent({
   setup(props, { attrs, emit }) {
     const isLoading = ref<boolean>(true);
     const hasError = ref<boolean>(false);
-    const tweetContainer = ref<HTMLDivElement>();
+    const tweetContainerRef = ref<HTMLDivElement>();
 
     onMounted(() => {
       renderTweet();
@@ -97,14 +114,14 @@ export default defineComponent({
         isLoading.value = true;
         hasError.value = false;
         // Clear previously rendered tweet before rendering the updated tweet id
-        if (tweetContainer.value) {
-          tweetContainer.value.innerHTML = "";
+        if (tweetContainerRef.value) {
+          tweetContainerRef.value.innerHTML = "";
         }
 
         const { tweetId, ...options } = props;
         widgets
-          .createTweet(tweetId, tweetContainer.value, options)
-          .then(async (twitterWidgetElement: HTMLElement | undefined) => {
+          .createTweet(tweetId, tweetContainerRef.value, options)
+          .then(async (twitterWidgetElement: HTMLDivElement | undefined) => {
             // Since we're mutating the DOM directly with the embed we need to tell Vue wait until the DOM update
             await nextTick();
 
@@ -127,7 +144,7 @@ export default defineComponent({
       document.body.appendChild(s);
     }
 
-    return { tweetContainer, isLoading, hasError, attrs }
+    return { tweetContainerRef, isLoading, hasError, attrs }
   }
 })
 </script>