fix(components): improvements for typescript

basics · Sep 5, 2024 · e3f9409 · e3f9409
1 parent e3bdaf8
commit e3f9409
Show file tree

Hide file tree

Showing 12 changed files with 206 additions and 164 deletions.
diff --git a/src/runtime/components/BoosterImage.vue b/src/runtime/components/BoosterImage.vue
@@ -3,6 +3,7 @@ import { useBoosterCritical, h } from '#imports';
 
 import { LazyHydrationWrapper } from 'vue3-lazy-hydration';
 import BoosterImage from '#booster/components/BoosterImage/Base';
+import imageProps from './BoosterImage/props';
 
 export default {
   inheritAttrs: false,
@@ -11,7 +12,8 @@ export default {
     hydrate: {
       type: Boolean,
       default: true
-    }
+    },
+    ...imageProps
   },
   setup() {
     const { isCritical } = useBoosterCritical();
@@ -28,11 +30,21 @@ export default {
           {
             class: 'nuxt-booster-image-noscript'
           },
-          [h(BoosterImage, { ...this.$attrs, critical: this.hydrate })]
+          [
+            h(BoosterImage, {
+              ...this.$attrs,
+              ...{ ...this.$props, hydrate: undefined },
+              critical: this.hydrate
+            })
+          ]
         )
       ]);
     }
-    return h(BoosterImage, { ...this.$attrs, critical: this.isCritical });
+    return h(BoosterImage, {
+      ...this.$attrs,
+      ...{ ...this.$props, hydrate: undefined },
+      critical: this.isCritical
+    });
   }
 };
 </script>
diff --git a/src/runtime/components/BoosterImage/Base.vue b/src/runtime/components/BoosterImage/Base.vue
@@ -17,7 +17,6 @@
 </template>
 
 <script setup>
-import { crossorigin as validatorCrossorigin } from '../../utils/validators';
 import { getImageStyleDescription } from '#booster/utils/description';
 import { getCrossorigin } from '#booster/utils/browser';
 import Source from '#booster/components/BoosterImage/classes/Source';
@@ -29,37 +28,14 @@ import {
   useAttrs
 } from '#imports';
 import { ref, computed, markRaw } from 'vue';
+import props from './props';
 
 defineOptions({
   inheritAttrs: false
 });
 
 const $attrs = useAttrs();
-
-const $props = defineProps({
-  source: {
-    type: [Source, Object],
-    default: null
-  },
-
-  title: {
-    type: String,
-    required: true
-  },
-
-  alt: {
-    type: String,
-    default: null
-  },
-
-  crossorigin: {
-    type: [Boolean, String],
-    default() {
-      return null;
-    },
-    validator: validatorCrossorigin
-  }
-});
+const $props = defineProps(props);
 
 const $emit = defineEmits(['load']);
 

diff --git a/src/runtime/components/BoosterImage/props.js b/src/runtime/components/BoosterImage/props.js
@@ -0,0 +1,27 @@
+import { crossorigin as validatorCrossorigin } from '../../utils/validators';
+import Source from '#booster/components/BoosterImage/classes/Source';
+
+export default {
+  source: {
+    type: [Source, Object],
+    default: null
+  },
+
+  title: {
+    type: String,
+    required: true
+  },
+
+  alt: {
+    type: String,
+    default: null
+  },
+
+  crossorigin: {
+    type: [Boolean, String],
+    default() {
+      return null;
+    },
+    validator: validatorCrossorigin
+  }
+};
diff --git a/src/runtime/components/BoosterPicture.vue b/src/runtime/components/BoosterPicture.vue
@@ -3,6 +3,7 @@ import { useBoosterCritical, h } from '#imports';
 
 import { LazyHydrationWrapper } from 'vue3-lazy-hydration';
 import BoosterPicture from '#booster/components/BoosterPicture/Base';
+import pictureProps from './BoosterPicture/props';
 
 export default {
   inheritAttrs: false,
@@ -11,8 +12,10 @@ export default {
     hydrate: {
       type: Boolean,
       default: true
-    }
+    },
+    ...pictureProps
   },
+
   setup() {
     const { isCritical } = useBoosterCritical();
     return {
@@ -28,11 +31,22 @@ export default {
           {
             class: 'nuxt-booster-picture-noscript'
           },
-          [h(BoosterPicture, { ...this.$attrs, critical: this.hydrate })]
+          [
+            h(BoosterPicture, {
+              ...this.$attrs,
+              ...{ ...this.$props, hydrate: undefined },
+              critical: this.hydrate
+            })
+          ]
         )
       ]);
     }
-    return h(BoosterPicture, { ...this.$attrs, critical: this.isCritical });
+    console.log(this.$props);
+    return h(BoosterPicture, {
+      ...this.$attrs,
+      ...{ ...this.$props, hydrate: undefined },
+      critical: this.isCritical
+    });
   }
 };
 </script>
diff --git a/src/runtime/components/BoosterPicture/Base.vue b/src/runtime/components/BoosterPicture/Base.vue
@@ -20,52 +20,17 @@
 
 <script setup>
 import { getPictureStyleDescription } from '../../utils/description';
-import { crossorigin as validatorCrossorigin } from '../../utils/validators';
 import { useBoosterCritical, useImage, useHead, useNuxtApp } from '#imports';
 import { ref, computed } from 'vue';
 
 import BaseImage from '#booster/components/BoosterImage/Base';
 import SourceList from '#booster/components/BoosterPicture/classes/SourceList';
 import PictureSource from '#booster/components/BoosterPicture/Source';
+import props from './props';
 
 const TARGET_FORMAT_PRIORITY = ['avif', 'webp', 'png', 'jpg', 'gif'];
 
-const $props = defineProps({
-  sources: {
-    type: [Array, SourceList],
-    required: true
-  },
-
-  formats: {
-    type: Array,
-    default() {
-      return null;
-    }
-  },
-
-  title: {
-    type: String,
-    default: null
-  },
-
-  alt: {
-    type: String,
-    default: null
-  },
-
-  crossorigin: {
-    type: [Boolean, String],
-    default() {
-      return null;
-    },
-    validator: validatorCrossorigin
-  },
-
-  sortSources: {
-    type: Boolean,
-    default: true
-  }
-});
+const $props = defineProps(props);
 
 const $emit = defineEmits(['load']);
 

diff --git a/src/runtime/components/BoosterPicture/props.js b/src/runtime/components/BoosterPicture/props.js
@@ -0,0 +1,39 @@
+import { crossorigin as validatorCrossorigin } from '../../utils/validators';
+import SourceList from '#booster/components/BoosterPicture/classes/SourceList';
+
+export default {
+  sources: {
+    type: [Array, SourceList],
+    required: true
+  },
+
+  formats: {
+    type: Array,
+    default() {
+      return null;
+    }
+  },
+
+  title: {
+    type: String,
+    default: null
+  },
+
+  alt: {
+    type: String,
+    default: null
+  },
+
+  crossorigin: {
+    type: [Boolean, String],
+    default() {
+      return null;
+    },
+    validator: validatorCrossorigin
+  },
+
+  sortSources: {
+    type: Boolean,
+    default: true
+  }
+};
diff --git a/src/runtime/components/BoosterVimeo.vue b/src/runtime/components/BoosterVimeo.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-vimeo class="nuxt-booster-vimeo" v-bind="$attrs">
+  <base-vimeo class="nuxt-booster-vimeo" v-bind="$props">
     <template #beforePlayer>
       <slot name="beforePlayer" />
     </template>
@@ -56,11 +56,13 @@
 
 <script>
 import BaseVimeo from '#booster/components/BoosterVimeo/Base';
+import props from './BoosterVimeo/props';
+
 export default {
   components: {
     BaseVimeo
   },
-  inerhitAttrs: false
+  props
 };
 </script>
 

diff --git a/src/runtime/components/BoosterVimeo/Base.vue b/src/runtime/components/BoosterVimeo/Base.vue
@@ -36,6 +36,7 @@ import { load, ready } from './utils/loader';
 import Vimeo from './classes/Vimeo';
 import { isTouchSupported } from '#booster/utils/browser';
 import BoosterPicture from '#booster/components/BoosterPicture';
+import props from './props';
 
 const vimeo = new Vimeo();
 
@@ -45,50 +46,8 @@ export default {
     DefaultButton
   },
 
-  props: {
-    autoplay: {
-      type: Boolean,
-      default: false
-    },
-
-    mute: {
-      type: Boolean,
-      default: undefined
-    },
-
-    url: {
-      type: String,
-      required: true
-    },
-
-    title: {
-      type: String,
-      required: false,
-      default: null
-    },
+  props,
 
-    options: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-
-    posterSources: {
-      type: Array,
-      default() {
-        return [
-          {
-            src: undefined,
-            media: 'all',
-            sizes: {
-              default: '100vw'
-            }
-          }
-        ];
-      }
-    }
-  },
   emits: ['playing', 'ready'],
 
   async setup(props) {

diff --git a/src/runtime/components/BoosterVimeo/props.js b/src/runtime/components/BoosterVimeo/props.js
@@ -0,0 +1,44 @@
+export default {
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
+
+  mute: {
+    type: Boolean,
+    default: undefined
+  },
+
+  url: {
+    type: String,
+    required: true
+  },
+
+  title: {
+    type: String,
+    required: false,
+    default: null
+  },
+
+  options: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
+
+  posterSources: {
+    type: Array,
+    default() {
+      return [
+        {
+          src: undefined,
+          media: 'all',
+          sizes: {
+            default: '100vw'
+          }
+        }
+      ];
+    }
+  }
+};