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

[ThornWalli]

This pull request simplifies the use of Vue's ref and computed by removing unnecessary explicit type annotations (Ref and ComputedRef) and streamlining imports. These changes improve code readability and maintainability without altering functionality.

Simplification of ref and computed usage:

• Removed explicit Ref type annotations from ref declarations across multiple files, simplifying the syntax. For example, const items: Ref<Item[]> = ref([...]) was updated to const items = ref<Item[]>([...]) in Horizontal.vue and Vertical.vue. [1] [2]
• Updated computed declarations by removing ComputedRef type annotations, e.g., const classNames: ComputedRef<ClassNames> = computed(...) was updated to const classNames = computed<ClassNames>(...) in BoosterPicture/Base.vue.
• Simplified ref and computed usage in various runtime components, such as BoosterImage/Base.vue, BoosterVimeo/Base.vue, BoosterYoutube/Base.vue, and composables like useBoosterComponentObserver.ts and useBoosterCritical.ts. [1] [2] [3] [4] [5]

Streamlined imports:

• Removed unused type imports for Ref and ComputedRef where they were no longer necessary after the refactoring. For instance, in BoosterImage/Base.vue and useBoosterHead.ts. [1] [2]
• Consolidated and cleaned up import statements for better readability across multiple files. [1] [2]

These updates reduce boilerplate code and align with Vue's best practices, making the codebase cleaner and easier to maintain.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/basics/nuxt-booster@1293

commit: a357596

[sonarqubecloud]

Quality Gate failed

Failed conditions
12.1% Duplication on New Code (required ≤ 5%)

See analysis details on SonarQube Cloud