Merge pull request #885 from GrabarzUndPartner/feature/image-densitie…

…s-option

fix(source): added `densities` option

docs/src/components/speedkit-image.md

@@ -100,7 +100,8 @@ If `true` the `SpeedkitImage` is initialized.
   sizes: { … }, 
   modifiers: { … }, 
   preset: { … }, 
-  provider: '<provider>'
+  provider: '<provider>',
+  densities: '<densities>'
 }
 ````
 
@@ -148,31 +149,42 @@ This overwrites the global ones of the preset if available.
 
 Learn more about `modifiers`:
 
-- <https://image.nuxtjs.org/configuration//#presets>
+- <https://image.nuxt.com/usage/nuxt-img#modifiers>
 
 #### `preset`
 
 - Type: `Object`
 
-If a preset is set on a source, the globally defined one is ignored.
+If a `preset` is set on a source, the globally defined one is ignored.
 
 This means that a separate preset can be specified for each source.
 
 Learn more about `preset`:
 
-- <https://image.nuxtjs.org/configuration//#presets>
+- <https://image.nuxt.com/usage/nuxt-img#preset>
 
 #### `provider`
 
 - Type: `String`
 
-If a provider is set on a source, the globally defined one is ignored.
+If a `provider` is set on a source, the globally defined one is ignored.
 
 This means that a separate provider can be specified for each source.
 
 Learn more about `provider`:
 
-- <https://image.nuxtjs.org/configuration//#providers>
+- <https://image.nuxt.com/usage/nuxt-img#provider>
+
+#### `densities`
+
+- Type: `String`
+  - Default: 'x1 x2'
+
+If a `densities` is set on a source, the globally defined one is ignored.
+
+Learn more about `densities`:
+
+- <https://image.nuxt.com/usage/nuxt-img#densities>
 
 ### `alt`
 

playground/nuxt.config.mjs

@@ -118,6 +118,7 @@ export default defineNuxtConfig(async () => {
 
     speedkit: {
       // targetFormats: ['jpg|jpeg|png|gif'],
+      // densities: 'x1 x2',
       detection: {
         performance: true,
         browserSupport: true

src/module.mjs

@@ -120,6 +120,7 @@ async function addBuildTemplates(nuxt, options) {
       mode,
       options: {
         mode,
+        densities: options.densities,
         targetFormats: options.targetFormats,
         crossorigin: getCrossorigin(options.crossorigin),
         supportedBrowserDetector,

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);

src/runtime/components/SpeedkitImage/classes/Source.mjs

@@ -10,9 +10,10 @@ export default class Source {
   format = null;
   quality = null;
   preload = false;
-  modifiers = {};
-  provider = undefined; // https://image.nuxtjs.org/api/optionsproviders
-  preset = undefined; // https://image.nuxtjs.org/api/optionspresets
+  modifiers = {}; // https://image.nuxt.com/usage/nuxt-img#modifiers
+  provider = undefined; // https://image.nuxt.com/usage/nuxt-img#provider
+  preset = undefined; // https://image.nuxt.com/usage/nuxt-img#preset
+  densities = undefined; // https://image.nuxt.com/usage/nuxt-img#densities
 
   constructor({
     src,
@@ -25,7 +26,8 @@ export default class Source {
     preload = false,
     modifiers = {},
     provider = undefined,
-    preset = undefined
+    preset = undefined,
+    densities = undefined
   }) {
     this.src = src;
     this.sizes = sizes;
@@ -38,6 +40,7 @@ export default class Source {
     this.modifiers = modifiers;
     this.provider = provider;
     this.preset = preset;
+    this.densities = densities;
   }
 
   get key() {
@@ -64,8 +67,12 @@ export default class Source {
     return { ...this.modifiers, format: this.format, quality: this.quality };
   }
 
-  getOptions() {
-    return { provider: this.provider, preset: this.preset };
+  getOptions($speedkit) {
+    return {
+      provider: this.provider,
+      preset: this.preset,
+      densities: this.densities || $speedkit.densities
+    };
   }
 
   getMeta(compiledSrc, $speedkit) {
@@ -100,7 +107,8 @@ export default class Source {
       preload: this.preload,
       modifiers: this.modifiers,
       provider: this.provider,
-      preset: this.preset
+      preset: this.preset,
+      densities: this.densities
     };
   }
 

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(() => {

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);
       })

src/runtime/components/SpeedkitVimeo/Base.vue

@@ -85,6 +85,11 @@ export default {
           xxl: '100vw'
         };
       }
+    },
+
+    posterDensities: {
+      type: [String, Number],
+      default: undefined
     }
   },
   emits: ['playing', 'ready'],
@@ -183,7 +188,8 @@ export default {
                 'vimeo'
               ),
             sizes: this.posterSizes,
-            media: 'all'
+            media: 'all',
+            densities: this.posterDensities
           }
         ]
       };

src/runtime/components/SpeedkitYoutube/Base.vue

@@ -85,6 +85,11 @@ export default {
           xxl: '100vw'
         };
       }
+    },
+
+    posterDensities: {
+      type: [String, Number],
+      default: undefined
     }
   },
 
@@ -122,7 +127,8 @@ export default {
           {
             src: `/youtube/vi/${this.videoId}/maxresdefault.jpg`,
             sizes: this.posterSizes,
-            media: 'all'
+            media: 'all',
+            densities: this.posterDensities
           }
         ]
       };

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) %>
     });
 
   },

src/utils/options.mjs

@@ -27,6 +27,7 @@ export function getDefaultOptions() {
     fonts: [],
 
     targetFormats: undefined,
+    densities: 'x1 x2',
 
     /**
      * IntersectionObserver rootMargin for Compoennts and Assets