refactor(tyescript): simplify ref usage in Vue components and composables

playground/pages/tests/v-font-scroll/components/Horizontal.vue

@@ -16,10 +16,10 @@
 <script setup lang="ts">
 import PreviewContainer from '@/components/PreviewContainer.vue';
 import ScrollContainer from '@/components/fragments/ScrollContainer.vue';
-import { ref, type Ref } from 'vue';
+import { ref } from 'vue';
 import type { Item } from '~/components/elements/ScrollItem.vue';
 
-const items: Ref<Item[]> = ref([
+const items = ref<Item[]>([
   { font: { family: 'Merriweather', weight: 300, style: 'normal' } },
   { font: { family: 'Merriweather', weight: 300, style: 'italic' } },
   { font: { family: 'Merriweather', weight: 400, style: 'normal' } },

playground/pages/tests/v-font-scroll/components/Vertical.vue

@@ -12,10 +12,10 @@
 <script setup lang="ts">
 import PreviewContainer from '@/components/PreviewContainer.vue';
 import ScrollContainer from '@/components/fragments/ScrollContainer.vue';
-import { ref, type Ref } from 'vue';
+import { ref } from 'vue';
 import type { Item } from '~/components/elements/ScrollItem.vue';
 
-const items: Ref<Item[]> = ref([
+const items = ref<Item[]>([
   { font: { family: 'Montserrat Alternates', weight: 300, style: 'normal' } },
   { font: { family: 'Montserrat Alternates', weight: 300, style: 'italic' } },
   { font: { family: 'Montserrat Alternates', weight: 400, style: 'normal' } },

src/runtime/components/BoosterImage/Base.vue

@@ -30,7 +30,7 @@ import {
   useHead,
   useAttrs
 } from '#imports';
-import { ref, computed, markRaw, type Ref, type Raw } from 'vue';
+import { ref, computed, markRaw, type Raw } from 'vue';
 import props from './props';
 import type { CrossOrigin } from '../../../module';
 
@@ -49,8 +49,8 @@ const { isCritical } = useBoosterCritical();
 
 const loading = ref(true);
 const meta = ref();
-const config: Ref<ImageSizes | undefined> = ref();
-const resolvedSource: Ref<Raw<Source> | undefined> = ref();
+const config = ref<ImageSizes | undefined>();
+const resolvedSource = ref<Raw<Source> | undefined>();
 const srcset = ref();
 const sizes = ref();
 

src/runtime/components/BoosterPicture/Base.vue

@@ -21,7 +21,7 @@
 <script setup lang="ts">
 import { getPictureStyleDescription } from '../../utils/description';
 import { useBoosterCritical, useImage, useHead, useNuxtApp } from '#imports';
-import { ref, computed, type Ref, type ComputedRef } from 'vue';
+import { ref, computed } from 'vue';
 
 import BaseImage from '#booster/components/BoosterImage/Base.vue';
 import SourceList, {
@@ -45,7 +45,7 @@ const sourceList = SourceList.create($props.sources as Source[], {
   sort: $props.sortSources
 });
 
-const metaSources: Ref<SourceList | undefined> = ref();
+const metaSources = ref<SourceList | undefined>();
 
 const resolvedFormats = $props.formats || $booster.targetFormats;
 const sortedFormatsByPriority = Array.from(
@@ -67,7 +67,7 @@ const formatSources = ref(
   )
 );
 
-const classNames: ComputedRef<ClassNames> = computed(
+const classNames = computed<ClassNames>(
   () => metaSources.value?.classNames || { picture: '', image: [] }
 );
 

src/runtime/components/BoosterVimeo/Base.vue

@@ -29,15 +29,7 @@
 
 <script setup lang="ts">
 import { useHead, useBoosterCritical } from '#imports';
-import {
-  ref,
-  computed,
-  markRaw,
-  type Ref,
-  watch,
-  onMounted,
-  onUnmounted
-} from 'vue';
+import { ref, computed, markRaw, watch, onMounted, onUnmounted } from 'vue';
 import type { Script } from '@unhead/vue';
 
 import DefaultButton from '../Button.vue';
@@ -61,9 +53,9 @@ const $booster = useBoosterProvide();
 const vimeo = new Vimeo();
 
 const inert = ref(false);
-const player: Ref<VimeoApiPlayer | undefined> = ref(undefined);
+const player = ref<VimeoApiPlayer | undefined>(undefined);
 
-const playerEl: Ref<HTMLIFrameElement | undefined> = ref(undefined);
+const playerEl = ref<HTMLIFrameElement | undefined>(undefined);
 const ready = ref(false);
 const loading = ref(false);
 const playing = ref(false);
@@ -74,10 +66,10 @@ const $emit = defineEmits(['ready', 'playing']);
 
 // setup
 
-const script: Ref<Script[]> = ref([]);
-const videoData: Ref<VimeoApiResponse | undefined> = ref();
+const script = ref<Script[]>([]);
+const videoData = ref<VimeoApiResponse | undefined>();
 const iframeMode = ref(false);
-const src: Ref<string | undefined> = ref();
+const src = ref<string | undefined>();
 const videoId = ref(new URL($props.url || '').pathname.replace('/', ''));
 
 const playerTitle = computed(() => {

src/runtime/components/BoosterYoutube/Base.vue

@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 import { useHead, useBoosterCritical, useBoosterProvide } from '#imports';
-import { ref, computed, markRaw, type Ref, onUnmounted, onMounted } from 'vue';
+import { ref, computed, markRaw, onUnmounted, onMounted } from 'vue';
 import type { Script } from '@unhead/vue';
 
 import DefaultButton from '../Button.vue';
@@ -36,14 +36,14 @@ const $booster = useBoosterProvide();
 
 const youtube = new Youtube();
 
-const script: Ref<Script[]> = ref([]);
-const src: Ref<string | undefined> = ref();
-const player: Ref<YT.Player | undefined> = ref();
+const script = ref<Script[]>([]);
+const src = ref<string | undefined>();
+const player = ref<YT.Player | undefined>();
 const playerEl = ref<HTMLElement | null>();
-const ready: Ref<boolean> = ref(false);
-const loading: Ref<boolean> = ref(false);
-const playing: Ref<boolean> = ref(false);
-const isTouchDevice: Ref<boolean> = ref(isTouchSupported());
+const ready = ref<boolean>(false);
+const loading = ref<boolean>(false);
+const playing = ref<boolean>(false);
+const isTouchDevice = ref<boolean>(isTouchSupported());
 
 const $props = defineProps(props);
 

src/runtime/composables/useBoosterComponentObserver.ts

@@ -1,13 +1,13 @@
 import { getElementObserver } from '#booster/classes/intersection';
 import { useBoosterCritical } from '#imports';
-import { onMounted, ref, type Ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import type { ObservableHTMLElement, ObservableOptions } from '../../module';
 
 export default function useBoosterComponentObserver(
   options: ObservableOptions = {}
 ) {
-  const el: Ref<HTMLElement | undefined> = ref(undefined);
-  const inView: Ref<boolean> = ref(false);
+  const el = ref<HTMLElement | undefined>(undefined);
+  const inView = ref<boolean>(false);
 
   const { isCritical } = useBoosterCritical();
 

src/runtime/composables/useBoosterCritical.ts

@@ -1,11 +1,4 @@
-import {
-  useAttrs,
-  provide,
-  inject,
-  ref,
-  computed,
-  type ComputedRef
-} from 'vue';
+import { useAttrs, provide, inject, ref, computed } from 'vue';
 
 const criticalContextKey = Symbol('criticalContext');
 
@@ -29,7 +22,7 @@ export default function useBoosterCritical(
     currentCritical.value || false
   );
 
-  const isCritical: ComputedRef<boolean> = computed(() => {
+  const isCritical = computed<boolean>(() => {
     return typeof currentCritical.value === 'boolean'
       ? currentCritical.value
       : criticalInject;

src/runtime/composables/useBoosterHead.ts

@@ -1,7 +1,7 @@
 import { FontsCollection } from '#booster/classes/FontsCollection';
 import { logDebug } from '#booster/utils/log';
 import { injectHead, useRouter, useRuntimeConfig } from '#imports';
-import { ref, watch, nextTick, type Ref } from 'vue';
+import { ref, watch, nextTick } from 'vue';
 import type FontCollection from '#booster/classes/FontCollection';
 import type { Head, Link } from '@unhead/vue';
 import type {
@@ -21,7 +21,7 @@ export default function useBoosterHead(): HeadFontCollector {
     }
   } = useRuntimeConfig();
 
-  const collection: Ref<FontsCollection> = ref(new FontsCollection());
+  const collection = ref<FontsCollection>(new FontsCollection());
 
   let headEntry: HeadFontCollectorEntry;
   watch(
@@ -45,11 +45,11 @@ export default function useBoosterHead(): HeadFontCollector {
     });
   });
 
-  const disposeCollections: Ref<
+  const disposeCollections = ref<
     Array<{
       fontCollection: FontCollection;
     }>
-  > = ref([]);
+  >([]);
   const push = ({
     fontCollection,
     isCritical,