fix(setup): fix await call

basics · Sep 11, 2023 · f0a9e86 · f0a9e86
1 parent 6de1bd2
commit f0a9e86
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 40 deletions.
diff --git a/playground/pages/tests/iframe/components/Critical.vue b/playground/pages/tests/iframe/components/Critical.vue
@@ -1,7 +1,7 @@
 <template>
   <preview-container>
     <template #default>
-      <default-iframe class="test-iframe" :iframe-src="iframeSrc" />
+      <default-iframe class="test-iframe" :src="iframeSrc" />
     </template>
     <template #title>
       <p>Critical<br />Iframe</p>

diff --git a/src/runtime/components/SpeedkitImage/Base.vue b/src/runtime/components/SpeedkitImage/Base.vue
@@ -23,7 +23,7 @@ import { getCrossorigin } from '#speedkit/utils';
 import Source from '#speedkit/components/SpeedkitImage/classes/Source';
 import useCritical from '#speedkit/composables/critical';
 
-import { useImage, useNuxtApp, useHead, computed } from '#imports';
+import { ref, useImage, useNuxtApp, useHead, computed } from '#imports';
 
 export default {
   inheritAttrs: false,
@@ -72,35 +72,40 @@ export default {
         ...source.getOptions()
       });
 
-      const meta = await source.getMeta(config.src, $speedkit);
-      const className = meta.className;
-
-      useHead({
-        style: [meta.value && getImageStyleDescription(meta, className)].filter(
-          Boolean
-        ),
-        link: [
-          !(!config || !isCritical.value) &&
-            new Source(source).getPreload(
-              config.srcset,
-              config.sizes,
-              resolvedCrossorigin.value
-            )
-        ].filter(Boolean),
-        noscript: [
-          {
-            key: 'img-nojs',
-            children:
-              '<style>img { content-visibility: unset !important; }</style>'
-          }
-        ]
+      const meta = ref(null);
+
+      useHead(() => {
+        if (meta.value) {
+          return {
+            style: [
+              meta.value && getImageStyleDescription(meta, meta.value.className)
+            ].filter(Boolean),
+            link: [
+              !(!config || !isCritical.value) &&
+                new Source(source).getPreload(
+                  config.srcset,
+                  config.sizes,
+                  resolvedCrossorigin.value
+                )
+            ].filter(Boolean),
+            noscript: [
+              {
+                key: 'img-nojs',
+                children:
+                  '<style>img { content-visibility: unset !important; }</style>'
+              }
+            ]
+          };
+        }
       });
 
+      meta.value = await source.getMeta(config.src, $speedkit);
+
       return {
         isCritical,
         config,
         meta,
-        className,
+        className: meta.value.className,
         resolvedCrossorigin
       };
     }

diff --git a/src/runtime/components/SpeedkitPicture/Base.vue b/src/runtime/components/SpeedkitPicture/Base.vue
@@ -26,7 +26,7 @@ import BaseImage from '#speedkit/components/SpeedkitImage/Base';
 import SourceList from '#speedkit/components/SpeedkitPicture/classes/SourceList';
 import PictureSource from '#speedkit/components/SpeedkitPicture/Source';
 
-import { useImage, useHead, useNuxtApp } from '#imports';
+import { ref, useImage, useHead, useNuxtApp } from '#imports';
 
 const TARGET_FORMAT_PRIORITY = ['avif', 'webp', 'png', 'jpg', 'gif'];
 
@@ -84,21 +84,25 @@ export default {
       sort: props.sortSources
     });
 
-    const metaSources = await sourceList.getMeta($img, $speedkit);
-    const classNames = metaSources.classNames;
+    const metaSources = ref(null);
 
-    if (metaSources.length) {
-      useHead({
-        style: [getPictureStyleDescription(metaSources, classNames)]
-      });
-    }
+    useHead(() => {
+      if (metaSources.value && metaSources.value.length) {
+        const classNames = metaSources.value.classNames;
+        return {
+          style: [getPictureStyleDescription(metaSources.value, classNames)]
+        };
+      }
+    });
+
+    metaSources.value = await sourceList.getMeta($img, $speedkit);
 
     return {
       isCritical,
       resolvedFormats: props.formats || $speedkit.targetFormats,
       sourceList,
       metaSources,
-      classNames
+      classNames: metaSources.value.classNames
     };
   },
 

diff --git a/src/runtime/components/SpeedkitVimeo/Base.vue b/src/runtime/components/SpeedkitVimeo/Base.vue
@@ -90,6 +90,13 @@ export default {
   emits: ['playing', 'ready'],
 
   async setup(props) {
+    const script = ref([]);
+    useHead({
+      script: computed(() => {
+        return script.value;
+      })
+    });
+
     const { withQuery } = await import('ufo');
     const videoData = ref(null);
     const iframeMode = ref(false);
@@ -102,12 +109,6 @@ export default {
           .replace(/&amp;/g, '&') ||
         `https://player.vimeo.com/video/${props.videoId}`
     );
-    const script = ref([]);
-    useHead({
-      script: computed(() => {
-        return script.value;
-      })
-    });
 
     try {
       const url = withQuery('https://vimeo.com/api/oembed.json', {