Merge pull request #1094 from basics/feature/fix-auto-import

fix(imports): imrpove imports
basics · Aug 17, 2024 · 72a556a · 72a556a
2 parents c7f37cb + 2d4d589
commit 72a556a
Show file tree

Hide file tree

Showing 52 changed files with 128 additions and 50 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "@nuxt/module-builder": "0.8.3",
     "@nuxt/webpack-builder": "3.12.4",
     "@types/node": "20.15.0",
+    "@types/vue": "^2.0.0",
     "commitlint": "19.4.0",
     "eslint": "9.9.0",
     "eslint-config-prettier": "9.1.0",

diff --git a/playground/components/InfoLayer.vue b/playground/components/InfoLayer.vue
@@ -33,6 +33,7 @@
 import { getStyleDescription } from '#booster/utils/description';
 import BoosterLayer from '#booster/components/BoosterLayer';
 import BaseButton from '@/components/base/Button';
+import { useBoosterFonts, useHead } from '#imports';
 
 const { $getFont } = useBoosterFonts();
 

diff --git a/playground/components/PreviewContainer.vue b/playground/components/PreviewContainer.vue
@@ -16,6 +16,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 const { $getFont } = useBoosterFonts();
 </script>
 

diff --git a/playground/components/WeakHardwareOverlay.vue b/playground/components/WeakHardwareOverlay.vue
@@ -11,8 +11,8 @@
 
 <script setup>
 import BoosterWeakHardwareOverlay from '#booster/components/WeakHardwareOverlay';
-
 import BaseButton from '@/components/base/Button';
+import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
 defineProps({

diff --git a/playground/components/base/Button.vue b/playground/components/base/Button.vue
@@ -10,6 +10,9 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
+import { computed, useAttrs } from 'vue';
+
 const { $getFont } = useBoosterFonts();
 defineEmits(['click']);
 

diff --git a/playground/components/base/Headline.vue b/playground/components/base/Headline.vue
@@ -5,6 +5,9 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
+import { computed } from 'vue';
+
 const { $getFont } = useBoosterFonts();
 
 const $props = defineProps({

diff --git a/playground/components/base/LinkList.vue b/playground/components/base/LinkList.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
+
 const { $getFont } = useBoosterFonts();
 
 defineProps({

diff --git a/playground/components/elements/LoaderTest.vue b/playground/components/elements/LoaderTest.vue
@@ -5,6 +5,9 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue';
+import { useBoosterCritical } from '#imports';
+
 const { isCritical } = useBoosterCritical();
 const active = ref(false);
 

diff --git a/playground/components/elements/ScrollItem.vue b/playground/components/elements/ScrollItem.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 const { $getFont } = useBoosterFonts();
 defineProps({
   font: {

diff --git a/playground/components/fragments/PageHeaderMenu.vue b/playground/components/fragments/PageHeaderMenu.vue
@@ -50,6 +50,8 @@
 <script setup>
 import Headline from '@/components/base/Headline';
 import LinkList from '@/components/base/LinkList';
+import { useRoute } from 'vue-router';
+import { ref, computed, watch, onMounted } from 'vue';
 
 const props = defineProps({
   modelValue: {

diff --git a/playground/components/modules/ImageText.vue b/playground/components/modules/ImageText.vue
@@ -26,6 +26,7 @@
 
 <script setup>
 import BoosterPicture from '#booster/components/BoosterPicture';
+import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
 defineProps({

diff --git a/playground/components/modules/Stage.vue b/playground/components/modules/Stage.vue
@@ -32,6 +32,8 @@
 import BoosterPicture from '#booster/components/BoosterPicture';
 import BoosterImage from '#booster/components/BoosterImage';
 import SvgChevronDown from '@/assets/svg/chevron-down.svg';
+import { useBoosterFonts } from '#imports';
+import { ref, onMounted } from 'vue';
 
 const { $getFont } = useBoosterFonts();
 

diff --git a/playground/components/modules/TextFontA.vue b/playground/components/modules/TextFontA.vue
@@ -20,6 +20,9 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
+import { ref, onMounted } from 'vue';
+
 const { $getFont } = useBoosterFonts();
 const ready = ref(false);
 

diff --git a/playground/components/modules/TextFontB.vue b/playground/components/modules/TextFontB.vue
@@ -20,6 +20,9 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
+import { ref, onMounted } from 'vue';
+
 const { $getFont } = useBoosterFonts();
 const ready = ref(false);
 defineProps({

diff --git a/playground/components/modules/VideoVimeo.vue b/playground/components/modules/VideoVimeo.vue
@@ -14,6 +14,7 @@
 <script setup>
 import BoosterVimeo from '#booster/components/BoosterVimeo';
 import WeakHardwareOverlay from '@/components/WeakHardwareOverlay';
+import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
 defineProps({

diff --git a/playground/components/modules/VideoYoutube.vue b/playground/components/modules/VideoYoutube.vue
@@ -12,6 +12,7 @@
 <script setup>
 import BoosterYoutube from '#booster/components/BoosterYoutube';
 import WeakHardwareOverlay from '@/components/WeakHardwareOverlay';
+import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
 defineProps({

diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
@@ -11,7 +11,8 @@
 
 <script setup>
 import 'wicg-inert';
-import { useBoosterHydrate } from '#imports';
+import { useBoosterHydrate, useRoute, useHead } from '#imports';
+import { defineAsyncComponent, ref, computed } from 'vue';
 const hydrate = useBoosterHydrate();
 
 const InfoLayer = defineAsyncComponent(() => import('@/components/InfoLayer'));

diff --git a/playground/nuxt.config.js b/playground/nuxt.config.js
@@ -23,6 +23,10 @@ export default defineNuxtConfig(async () => {
 
     ssr: true,
 
+    imports: {
+      autoImport: false
+    },
+
     runtimeConfig: {
       public: {
         githubRepoUrl: repository.url.replace(/^git\+(.*)\.git$/, '$1'),

diff --git a/playground/pages/tests/booster-layer/index.vue b/playground/pages/tests/booster-layer/index.vue
@@ -6,9 +6,11 @@
 </template>
 
 <script setup>
-import BoosterLayer from '#booster/components/BoosterLayer';
+import { ref, onMounted } from 'vue';
 import { useBoosterHydrate } from '#imports';
 
+import BoosterLayer from '#booster/components/BoosterLayer';
+
 const hydrate = useBoosterHydrate();
 
 const ready = ref(false);

diff --git a/playground/pages/tests/iframe/components/Critical.vue b/playground/pages/tests/iframe/components/Critical.vue
@@ -10,8 +10,10 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 import DefaultIframe from '#booster/components/BoosterIframe';
 import PreviewContainer from '@/components/PreviewContainer';
 
-const iframeSrc = 'https://basics.github.io/nuxt-booster/playground/';
+const iframeSrc = ref('https://basics.github.io/nuxt-booster/playground/');
 </script>
diff --git a/playground/pages/tests/iframe/components/Lazy.vue b/playground/pages/tests/iframe/components/Lazy.vue
@@ -10,8 +10,9 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import DefaultIframe from '#booster/components/BoosterIframe';
 import PreviewContainer from '@/components/PreviewContainer';
 
-const iframeSrc = 'https://basics.github.io/nuxt-booster/playground/';
+const iframeSrc = ref('https://basics.github.io/nuxt-booster/playground/');
 </script>
diff --git a/playground/pages/tests/image/components/Critical.vue b/playground/pages/tests/image/components/Critical.vue
@@ -10,10 +10,12 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 import BoosterImage from '#booster/components/BoosterImage';
 import PreviewContainer from '@/components/PreviewContainer';
 
-const image = {
+const image = ref({
   title: 'Critical - Image',
   source: {
     format: 'jpg',
@@ -29,5 +31,5 @@ const image = {
       xxl: '100vw'
     }
   }
-};
+});
 </script>
diff --git a/playground/pages/tests/image/components/Lazy.vue b/playground/pages/tests/image/components/Lazy.vue
@@ -10,10 +10,12 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 import BoosterImage from '#booster/components/BoosterImage';
 import PreviewContainer from '@/components/PreviewContainer';
 
-const image = {
+const image = ref({
   title: 'Lazy - Image',
   source: {
     src: '/img/lazy.jpg',
@@ -28,5 +30,5 @@ const image = {
       xxl: '100vw'
     }
   }
-};
+});
 </script>
diff --git a/playground/pages/tests/picture/components/Critical.vue b/playground/pages/tests/picture/components/Critical.vue
@@ -10,10 +10,12 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 import BoosterPicture from '#booster/components/BoosterPicture';
 import PreviewContainer from '@/components/PreviewContainer';
 
-const picture = {
+const picture = ref({
   title: 'Critical',
   sources: [
     {
@@ -30,5 +32,5 @@ const picture = {
       }
     }
   ]
-};
+});
 </script>
diff --git a/playground/pages/tests/picture/components/Lazy.vue b/playground/pages/tests/picture/components/Lazy.vue
@@ -10,10 +10,12 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 import BoosterPicture from '#booster/components/BoosterPicture';
 import OrganismPreviewContainer from '@/components/PreviewContainer';
 
-const picture = {
+const picture = ref({
   title: 'Lazy',
   sources: [
     {
@@ -30,5 +32,5 @@ const picture = {
       }
     }
   ]
-};
+});
 </script>
diff --git a/playground/pages/tests/useBoosterHead.vue b/playground/pages/tests/useBoosterHead.vue
@@ -12,6 +12,9 @@
 </template>
 
 <script setup>
+import { definePageMeta, useRuntimeConfig } from '#imports';
+import { ref } from 'vue';
+
 const {
   public: { isTest }
 } = useRuntimeConfig();

diff --git a/playground/pages/tests/useBoosterHead/empty-1.vue b/playground/pages/tests/useBoosterHead/empty-1.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue';
+
 const ready = ref(false);
 onMounted(() => {
   ready.value = true;

diff --git a/playground/pages/tests/useBoosterHead/empty-2.vue b/playground/pages/tests/useBoosterHead/empty-2.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue';
+
 const ready = ref(false);
 onMounted(() => {
   ready.value = true;

diff --git a/playground/pages/tests/useBoosterHead/index.vue b/playground/pages/tests/useBoosterHead/index.vue
@@ -34,6 +34,7 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import BaseHeadline from '@/components/base/Headline';
 
 const show = ref(false);

diff --git a/playground/pages/tests/v-font-media/components/Critical.vue b/playground/pages/tests/v-font-media/components/Critical.vue
@@ -96,6 +96,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 import PreviewContainer from '@/components/PreviewContainer';
 
 const { $getFont } = useBoosterFonts();

diff --git a/playground/pages/tests/v-font-media/components/Lazy.vue b/playground/pages/tests/v-font-media/components/Lazy.vue
@@ -103,6 +103,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 import PreviewContainer from '@/components/PreviewContainer';
 
 const { $getFont } = useBoosterFonts();

diff --git a/playground/pages/tests/v-font/components/Critical.vue b/playground/pages/tests/v-font/components/Critical.vue
@@ -74,6 +74,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 import PreviewContainer from '@/components/PreviewContainer';
 
 const { $getFont } = useBoosterFonts();

diff --git a/playground/pages/tests/v-font/components/Lazy.vue b/playground/pages/tests/v-font/components/Lazy.vue
@@ -84,6 +84,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 import PreviewContainer from '@/components/PreviewContainer';
 
 const { $getFont } = useBoosterFonts();

diff --git a/playground/pages/tests/vimeo/components/Default.vue b/playground/pages/tests/vimeo/components/Default.vue
@@ -12,6 +12,9 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
+import { useBoosterCritical } from '#imports';
+
 import DefaultVimeo from '#booster/components/BoosterVimeo';
 import PreviewContainer from '@/components/PreviewContainer';
 

diff --git a/playground/pages/tests/weak-hardware-overlay/index.vue b/playground/pages/tests/weak-hardware-overlay/index.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue';
+
 import BoosterLayer from '#booster/components/BoosterLayer';
 import BoosterWeakHardwareOverlay from '#booster/components/WeakHardwareOverlay';