fix(source): @nuxt/image densities definition

basics · Nov 8, 2023 · 8adfa89 · 8adfa89
1 parent c8a5c55
commit 8adfa89
Show file tree

Hide file tree

Showing 14 changed files with 21 additions and 33 deletions.
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -49,14 +49,12 @@ const stage = {
           xl: '100vw',
           xxl: '100vw'
         },
-        media: '(orientation: landscape)',
-        densities: ['x1', 'x2']
+        media: '(orientation: landscape)'
       },
       {
         src: '/img/stage-portrait.jpg',
         sizes: { default: '100vw', xxs: '100vw', xs: '100vw' },
-        media: '(orientation: portrait)',
-        densities: ['x1', 'x2']
+        media: '(orientation: portrait)'
       }
     ]
   }
@@ -88,8 +86,7 @@ const imageTextA = {
           xxl: '100vw'
         }
       }
-    ],
-    densities: ['x1', 'x2']
+    ]
   }
 };
 
@@ -120,8 +117,7 @@ const imageTextB = {
           xxl: '100vw'
         }
       }
-    ],
-    densities: ['x1', 'x2']
+    ]
   }
 };
 

diff --git a/playground/pages/tests/image/components/Critical.vue b/playground/pages/tests/image/components/Critical.vue
@@ -27,8 +27,7 @@ const image = {
       lg: '100vw',
       xl: '100vw',
       xxl: '100vw'
-    },
-    densities: ['x1', 'x2']
+    }
   }
 };
 </script>
diff --git a/playground/pages/tests/image/components/Lazy.vue b/playground/pages/tests/image/components/Lazy.vue
@@ -26,8 +26,7 @@ const image = {
       lg: '100vw',
       xl: '100vw',
       xxl: '100vw'
-    },
-    densities: ['x1', 'x2']
+    }
   }
 };
 </script>
diff --git a/playground/pages/tests/picture/components/Critical.vue b/playground/pages/tests/picture/components/Critical.vue
@@ -27,8 +27,7 @@ const picture = {
         lg: '100vw',
         xl: '100vw',
         xxl: '100vw'
-      },
-      densities: ['x1', 'x2']
+      }
     }
   ]
 };

diff --git a/playground/pages/tests/picture/components/Lazy.vue b/playground/pages/tests/picture/components/Lazy.vue
@@ -27,8 +27,7 @@ const picture = {
         lg: '100vw',
         xl: '100vw',
         xxl: '100vw'
-      },
-      densities: ['x1', 'x2']
+      }
     }
   ]
 };

diff --git a/src/module.mjs b/src/module.mjs
@@ -124,6 +124,7 @@ async function addBuildTemplates(nuxt, options) {
       mode,
       options: {
         mode,
+        densities: options.densities,
         targetFormats: options.targetFormats,
         crossorigin: getCrossorigin(options.crossorigin),
         supportedBrowserDetector,

diff --git a/src/runtime/components/SpeedkitImage/Base.vue b/src/runtime/components/SpeedkitImage/Base.vue
@@ -69,7 +69,7 @@ export default {
       const config = $img.getSizes(source.src, {
         sizes: source.sizes,
         modifiers: source.getModifiers(),
-        ...source.getOptions()
+        ...source.getOptions($speedkit)
       });
 
       const meta = ref(null);

diff --git a/src/runtime/components/SpeedkitImage/classes/Source.mjs b/src/runtime/components/SpeedkitImage/classes/Source.mjs
@@ -67,14 +67,11 @@ export default class Source {
     return { ...this.modifiers, format: this.format, quality: this.quality };
   }
 
-  getOptions() {
+  getOptions($speedkit) {
     return {
       provider: this.provider,
       preset: this.preset,
-      densities: []
-        .concat(this.densities || 1)
-        .map(v => String(v).trim())
-        .join(' ')
+      densities: this.densities || $speedkit.densities
     };
   }
 

diff --git a/src/runtime/components/SpeedkitPicture/Source.vue b/src/runtime/components/SpeedkitPicture/Source.vue
@@ -39,7 +39,7 @@ export default {
     const config = $img.getSizes(props.source.src, {
       sizes: props.source.sizes,
       modifiers: props.source.getModifiers(),
-      ...props.source.getOptions()
+      ...props.source.getOptions($speedkit)
     });
 
     const resolvedCrossorigin = computed(() => {

diff --git a/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs b/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs
@@ -84,7 +84,7 @@ export default class SourceList {
         const config = $img.getSizes(source.src, {
           sizes: source.sizes,
           modifiers: source.getModifiers(),
-          ...source.getOptions()
+          ...source.getOptions($speedkit)
         });
         return source.getMeta(config.src, $speedkit);
       })

diff --git a/src/runtime/components/SpeedkitVimeo/Base.vue b/src/runtime/components/SpeedkitVimeo/Base.vue
@@ -88,10 +88,8 @@ export default {
     },
 
     posterDensities: {
-      type: [Array, String],
-      default() {
-        return ['x1', 'x2'];
-      }
+      type: [String, Number],
+      default: undefined
     }
   },
   emits: ['playing', 'ready'],

diff --git a/src/runtime/components/SpeedkitYoutube/Base.vue b/src/runtime/components/SpeedkitYoutube/Base.vue
@@ -88,10 +88,8 @@ export default {
     },
 
     posterDensities: {
-      type: [Array, String],
-      default() {
-        return ['x1', 'x2'];
-      }
+      type: [String, Number],
+      default: undefined
     }
   },
 

diff --git a/src/runtime/tmpl/plugin.mjs b/src/runtime/tmpl/plugin.mjs
@@ -20,7 +20,8 @@ export default defineNuxtPlugin({
       getFont: fontList.getFont.bind(fontList),
       crossorigin: <%= options.crossorigin ? `'${options.crossorigin}'` : null %>,
       isBrowserSupported: () => isSupportedBrowser(<%= options.supportedBrowserDetector %>),
-      targetFormats: <%= JSON.stringify(options.targetFormats) %>
+      targetFormats: <%= JSON.stringify(options.targetFormats) %>,
+      densities: <%= JSON.stringify(options.densities) %>
     });
 
   },

diff --git a/src/utils/options.mjs b/src/utils/options.mjs
@@ -25,6 +25,7 @@ export function getDefaultOptions() {
     fonts: [],
 
     targetFormats: null,
+    densities: 'x1 x2',
 
     /**
      * IntersectionObserver rootMargin for Compoennts and Assets