From 04406bfba67759eee02111442f0a9cc6e97c96f1 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Thu, 5 Sep 2024 13:13:05 +0200
Subject: [PATCH] fix(components): added export for create missing ts defs

---
 src/runtime/components/BoosterIframe.vue      | 78 ++++++++++---------
 src/runtime/components/BoosterImage.vue       | 56 ++++++-------
 src/runtime/components/BoosterLayer.vue       | 53 ++++++++-----
 src/runtime/components/BoosterPicture.vue     | 60 +++++++-------
 src/runtime/components/BoosterVimeo.vue       | 12 +--
 src/runtime/components/BoosterYoutube.vue     | 12 +--
 src/runtime/components/Button.vue             |  6 +-
 .../components/WeakHardwareOverlay.vue        | 17 ++--
 8 files changed, 159 insertions(+), 135 deletions(-)

diff --git a/src/runtime/components/BoosterIframe.vue b/src/runtime/components/BoosterIframe.vue
index 24d43eaf3b..6ab1d7e38c 100644
--- a/src/runtime/components/BoosterIframe.vue
+++ b/src/runtime/components/BoosterIframe.vue
@@ -9,49 +9,53 @@
   />
 </template>
 
-<script setup>
+<script>
 import { useBoosterComponentObserver } from '#imports';
-import { ref, watch } from 'vue';
+export default {
+  props: {
+    src: {
+      type: String,
+      default: null
+    },
 
-const props = defineProps({
-  src: {
-    type: String,
-    default: null
-  },
+    title: {
+      type: String,
+      default: null
+    },
 
-  title: {
-    type: String,
-    default: null
+    componentObserver: {
+      type: Object,
+      default() {
+        return {
+          trackVisibility: true,
+          delay: 350
+        };
+      }
+    }
   },
-
-  componentObserver: {
-    type: Object,
-    default() {
-      return {
-        trackVisibility: true,
-        delay: 350
-      };
+  emits: ['load', 'enter'],
+  setup() {
+    const { el: iframe, inView } = useBoosterComponentObserver();
+    return { iframe, inView };
+  },
+  data() {
+    return {
+      lazySrc: null,
+      loaded: false
+    };
+  },
+  watch: {
+    loaded(e) {
+      if (e.target.src) {
+        this.$emit('load', e);
+      }
+    },
+    inView() {
+      this.lazySrc = this.src;
+      this.$emit('enter');
     }
   }
-});
-
-const emit = defineEmits(['load', 'enter']);
-
-const lazySrc = ref(null);
-const loaded = ref(false);
-
-watch(loaded, e => {
-  if (e.target.src) {
-    emit('load', e);
-  }
-});
-
-const { el: iframe, inView } = useBoosterComponentObserver();
-
-watch(inView, () => {
-  lazySrc.value = props.src;
-  emit('enter');
-});
+};
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/runtime/components/BoosterImage.vue b/src/runtime/components/BoosterImage.vue
index e2d4e79472..7fe9037ebe 100644
--- a/src/runtime/components/BoosterImage.vue
+++ b/src/runtime/components/BoosterImage.vue
@@ -1,36 +1,38 @@
-<template>
-  <render />
-</template>
-
-<script setup>
-import { useBoosterCritical, useAttrs } from '#imports';
-import { h } from 'vue';
+<script>
+import { useBoosterCritical, h } from '#imports';
 
 import { LazyHydrationWrapper } from 'vue3-lazy-hydration';
 import BoosterImage from '#booster/components/BoosterImage/Base';
 
-defineOptions({
-  inheritAttrs: false
-});
-
-const $attrs = useAttrs();
+export default {
+  inheritAttrs: false,
 
-const $props = defineProps({
-  hydrate: {
-    type: Boolean,
-    default: true
-  }
-});
+  props: {
+    hydrate: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup() {
+    const { isCritical } = useBoosterCritical();
+    return {
+      isCritical
+    };
+  },
 
-const { isCritical } = useBoosterCritical();
-const render = () => {
-  if (!$props.hydrate) {
-    return h(LazyHydrationWrapper, { props: { never: true } }, [
-      h('noscript', {}, [
-        h(BoosterImage, { ...$attrs, critical: $props.hydrate })
-      ])
-    ]);
+  render() {
+    if (!this.hydrate) {
+      return h(LazyHydrationWrapper, { never: true }, [
+        h(
+          'noscript',
+          {
+            class: 'nuxt-booster-image-noscript'
+          },
+          [h(BoosterImage, { ...this.$attrs, critical: this.hydrate })]
+        )
+      ]);
+    }
+    return h(BoosterImage, { ...this.$attrs, critical: this.isCritical });
   }
-  return h(BoosterImage, { ...$attrs, critical: isCritical.value });
 };
 </script>
diff --git a/src/runtime/components/BoosterLayer.vue b/src/runtime/components/BoosterLayer.vue
index 79fc44c740..fbbb78f17d 100644
--- a/src/runtime/components/BoosterLayer.vue
+++ b/src/runtime/components/BoosterLayer.vue
@@ -43,28 +43,39 @@
   </div>
 </template>
 
-<script setup>
+<script>
 import { getStyleDescription } from '#booster/utils/description';
-import { useHead } from '#imports';
-import { ref, onMounted } from 'vue';
-
-const isServer = ref(true);
-
-onMounted(() => (isServer.value = false));
-
-useHead({
-  noscript: [
-    getStyleDescription(
-      [
-        `#nuxt-booster-layer button:not(.nuxt-booster-button-init-nojs) { display: none !important; } .nuxt-booster-button-nojs, .nuxt-booster-button-init-nojs, #nuxt-booster-message-nojs { display: initial !important; }`,
-        // This is a temporary fix for the button display issue.
-        `#nuxt-booster-layer button:not(#nuxt-booster-button-init-nojs) { display: none !important; } #nuxt-booster-button-nojs, #nuxt-booster-button-init-nojs, #nuxt-booster-message-nojs { display: initial !important; }`
-      ].join(' '),
-      true,
-      'booster-layer'
-    )
-  ]
-});
+
+export default {
+  data: function () {
+    return {
+      isServer: true
+    };
+  },
+  head() {
+    return {
+      noscript: [
+        getStyleDescription(
+          [
+            `#nuxt-booster-layer button:not(.nuxt-booster-button-init-nojs) { display: none !important; } .nuxt-booster-button-nojs, .nuxt-booster-button-init-nojs, #nuxt-booster-message-nojs { display: initial !important; }`,
+            // This is a temporary fix for the button display issue.
+            `#nuxt-booster-layer button:not(#nuxt-booster-button-init-nojs) { display: none !important; } #nuxt-booster-button-nojs, #nuxt-booster-button-init-nojs, #nuxt-booster-message-nojs { display: initial !important; }`
+          ].join(' '),
+          true,
+          'booster-layer'
+        )
+      ]
+    };
+  },
+  mounted() {
+    this.isServer = false;
+  },
+  methods: {
+    closeLayer() {
+      document.getElementById('nuxt-booster-layer-close').checked = false;
+    }
+  }
+};
 </script>
 
 <style>
diff --git a/src/runtime/components/BoosterPicture.vue b/src/runtime/components/BoosterPicture.vue
index fc3944748a..febc83e9aa 100644
--- a/src/runtime/components/BoosterPicture.vue
+++ b/src/runtime/components/BoosterPicture.vue
@@ -1,40 +1,38 @@
-<template>
-  <render />
-</template>
-
-<script setup>
-import { useBoosterCritical, useAttrs } from '#imports';
-import { h } from 'vue';
+<script>
+import { useBoosterCritical, h } from '#imports';
 
 import { LazyHydrationWrapper } from 'vue3-lazy-hydration';
 import BoosterPicture from '#booster/components/BoosterPicture/Base';
 
-defineOptions({
-  inheritAttrs: false
-});
-
-const $props = defineProps({
-  hydrate: {
-    type: Boolean,
-    default: true
-  }
-});
+export default {
+  inheritAttrs: false,
 
-const $attrs = useAttrs();
-const { isCritical } = useBoosterCritical();
+  props: {
+    hydrate: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup() {
+    const { isCritical } = useBoosterCritical();
+    return {
+      isCritical
+    };
+  },
 
-const render = () => {
-  if (!$props.hydrate) {
-    return h(LazyHydrationWrapper, { never: true }, [
-      h(
-        'noscript',
-        {
-          class: 'nuxt-booster-picture-noscript'
-        },
-        [h(BoosterPicture, { ...$attrs, critical: $props.hydrate })]
-      )
-    ]);
+  render() {
+    if (!this.hydrate) {
+      return h(LazyHydrationWrapper, { never: true }, [
+        h(
+          'noscript',
+          {
+            class: 'nuxt-booster-picture-noscript'
+          },
+          [h(BoosterPicture, { ...this.$attrs, critical: this.hydrate })]
+        )
+      ]);
+    }
+    return h(BoosterPicture, { ...this.$attrs, critical: this.isCritical });
   }
-  return h(BoosterPicture, { ...$attrs, critical: isCritical.value });
 };
 </script>
diff --git a/src/runtime/components/BoosterVimeo.vue b/src/runtime/components/BoosterVimeo.vue
index beb3d39826..cc23a44649 100644
--- a/src/runtime/components/BoosterVimeo.vue
+++ b/src/runtime/components/BoosterVimeo.vue
@@ -54,12 +54,14 @@
   </base-vimeo>
 </template>
 
-<script setup>
+<script>
 import BaseVimeo from '#booster/components/BoosterVimeo/Base';
-
-defineOptions({
-  inheritAttrs: false
-});
+export default {
+  components: {
+    BaseVimeo
+  },
+  inerhitAttrs: false
+};
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/runtime/components/BoosterYoutube.vue b/src/runtime/components/BoosterYoutube.vue
index 11db91074f..cd9c137c9b 100644
--- a/src/runtime/components/BoosterYoutube.vue
+++ b/src/runtime/components/BoosterYoutube.vue
@@ -49,12 +49,14 @@
   </base-youtube>
 </template>
 
-<script setup>
+<script>
 import BaseYoutube from '#booster/components/BoosterYoutube/Base';
-
-defineOptions({
-  inheritAttrs: false
-});
+export default {
+  components: {
+    BaseYoutube
+  },
+  inerhitAttrs: false
+};
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index 3be6a458a0..006b53826b 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -4,10 +4,10 @@
   </button>
 </template>
 
-<script setup>
-defineOptions({
+<script>
+export default {
   inheritAttrs: false
-});
+};
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/runtime/components/WeakHardwareOverlay.vue b/src/runtime/components/WeakHardwareOverlay.vue
index 1554eb624a..211733ad30 100644
--- a/src/runtime/components/WeakHardwareOverlay.vue
+++ b/src/runtime/components/WeakHardwareOverlay.vue
@@ -7,12 +7,17 @@
   </div>
 </template>
 
-<script setup>
-import { ref, onMounted } from 'vue';
-
-const isServer = ref(true);
-
-onMounted(() => (isServer.value = false));
+<script>
+export default {
+  data: function () {
+    return {
+      isServer: true
+    };
+  },
+  mounted() {
+    this.isServer = false;
+  }
+};
 </script>
 
 <style lang="postcss" scoped>