nuxt-picture: allow parsing format as array

docs/content/2.usage/2.nuxt-picture.md

@@ -1,5 +1,5 @@
 ---
-title: '<NuxtPicture>'
+title: "<NuxtPicture>"
 description: Discover how to use and configure the Nuxt Picture component.
 ---
 
@@ -17,13 +17,34 @@ See props supported by[`<NuxtImg>`](/usage/nuxt-img#props)</a>
 
 ### `format`
 
-Format on pictures can be used to serve images in multiple formats. A legacy format will be generated automatically. So in the example below avif, webp and png would be generated. They will be added in the same order they are added to the format attribute.
+You can use this option to configure the format of your images. The available formats are webp, avif, jpeg, jpg, png, and gif. The order of the formats is important, as the first format that is supported by the browser will be used. You can pass multiple values like ['avif', 'webp'] or as a comma-separated string like 'avif,webp'.
+
+A legacy format will be generated automatically. They will be added in the order of the formats array, the legacy format will be added last.
 
 ```html
-<NuxtPicture format="avif,webp" src="/nuxt-icon.png" ... />
+// generates avif, webp and png
+<NuxtPicture
+  :format="['avif','webp']"
+  src="/nuxt-icon.png"
+  ...
+/>
+
+// generates avif, webp and jepg
+<NuxtPicture
+  format="avif,webp"
+  src="/nuxt-icon.jpg"
+  ...
+/>
+
+// generates wepb and png
+<NuxtPicture
+  format="webp"
+  src="/nuxt-icon.png"
+  ...
+/>
 ```
 
-Available formats are `webp`, `avif`, `jpeg`, `jpg`, `png` and `gif`. If the format is not specified, it will respect the default image format.
+If the format is not specified, it will respect the default image format.
 
 ### `legacyFormat`
 

playground/pages/picture.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nuxt-picture src="/images/colors.jpg" format="avif,webp" width="500" height="500" @load="isLoaded = true" />
+    <nuxt-picture src="/images/colors.jpg" :format="['avif','webp']" width="500" height="500" @load="isLoaded = true" />
     <p>Received onLoad event: {{ isLoaded }}</p>
   </div>
 </template>

src/runtime/components/_base.ts

@@ -43,6 +43,11 @@ export const baseImageProps = {
   }
 }
 
+export const basePictureProps = {
+  ...baseImageProps,
+  format: { type: [String, Array] as unknown as () => string | string[], default: undefined }
+}
+
 export interface BaseImageAttrs {
   width?: number
   height?: number
@@ -66,6 +71,10 @@ export interface BaseImageModifiers {
   [key: string]: any
 }
 
+export interface BasePictureModifiers extends Omit<BaseImageModifiers, 'format'> {
+  format?: string | string[];
+}
+
 export const useBaseImage = (props: ExtractPropTypes<typeof baseImageProps>) => {
   const options = computed(() => {
     return {
@@ -109,3 +118,47 @@ export const useBaseImage = (props: ExtractPropTypes<typeof baseImageProps>) =>
     modifiers
   }
 }
+
+export const useBasePicture = (props: ExtractPropTypes<typeof basePictureProps>) => {
+  const options = computed(() => {
+    return {
+      provider: props.provider,
+      preset: props.preset
+    }
+  })
+
+  const attrs = computed<BaseImageAttrs>(() => {
+    return <BaseImageAttrs> {
+      width: parseSize(props.width),
+      height: parseSize(props.height),
+      alt: props.alt,
+      referrerpolicy: props.referrerpolicy,
+      usemap: props.usemap,
+      longdesc: props.longdesc,
+      ismap: props.ismap,
+      crossorigin: props.crossorigin === true ? 'anonymous' : props.crossorigin || undefined,
+      loading: props.loading,
+      decoding: props.decoding
+    }
+  })
+
+  const $img = useImage()
+
+  const modifiers = computed<BasePictureModifiers>(() => {
+    return <BasePictureModifiers> {
+      ...props.modifiers,
+      width: parseSize(props.width),
+      height: parseSize(props.height),
+      format: props.format,
+      quality: props.quality || $img.options.quality,
+      background: props.background,
+      fit: props.fit
+    }
+  })
+
+  return {
+    options,
+    attrs,
+    modifiers
+  }
+}

src/runtime/components/nuxt-picture.ts

@@ -1,11 +1,12 @@
 import { h, defineComponent, ref, computed, onMounted } from 'vue'
 import { prerenderStaticImages } from '../utils/prerender'
-import { useBaseImage, baseImageProps } from './_base'
+import { baseImageProps, useBasePicture } from './_base'
 import { useImage, useHead, useNuxtApp } from '#imports'
 import { getFileExtension } from '#image'
 
 export const pictureProps = {
   ...baseImageProps,
+  format: { type: [String, Array<string>], default: undefined },
   legacyFormat: { type: String, default: null },
   imgAttrs: { type: Object, default: null }
 }
@@ -16,7 +17,7 @@ export default defineComponent({
   emits: ['load'],
   setup: (props, ctx) => {
     const $img = useImage()
-    const _base = useBaseImage(props)
+    const _base = useBasePicture(props)
 
     const originalFormat = computed(() => getFileExtension(props.src))
     const isTransparent = computed(() => ['png', 'webp', 'gif', 'svg'].includes(originalFormat.value))
@@ -28,7 +29,7 @@ export default defineComponent({
 
     type Source = { srcset?: string, src?: string, type?: string, sizes?: string }
     const sources = computed<Source[]>(() => {
-      const formats = props.format?.split(',') || (originalFormat.value === 'svg' ? ['svg'] : ($img.options.format?.length ? [...$img.options.format] : ['webp']))
+      const formats = (Array.isArray(props.format) ? props.format : props.format?.split(',') || (originalFormat.value === 'svg' ? ['svg'] : ($img.options.format?.length ? [...$img.options.format] : ['webp']))) as string[]
       if (formats[0] === 'svg') {
         return [<Source>{ src: props.src }]
       }
@@ -44,7 +45,6 @@ export default defineComponent({
         const { srcset, sizes, src } = $img.getSizes(props.src!, {
           ..._base.options.value,
           sizes: props.sizes || $img.options.screens,
-          densities: props.densities,
           modifiers: { ..._base.modifiers.value, format }
         })
 

test/unit/picture.test.ts

@@ -78,6 +78,7 @@ describe('Renders simple image', () => {
       }
     })
     expect(img.find('source[type="image/avif"]').exists()).toBe(true)
+    expect(img.findAll('source').length).toBe(1)
     expect(img.find('img').exists()).toBe(true)
   })
 
@@ -92,6 +93,7 @@ describe('Renders simple image', () => {
     })
     expect(img.find('source[type="image/avif"]').exists()).toBe(true)
     expect(img.find('source[type="image/webp"]').exists()).toBe(true)
+    expect(img.findAll('source').length).toBe(2)
     expect(img.find('img').exists()).toBe(true)
   })
 
@@ -106,6 +108,22 @@ describe('Renders simple image', () => {
     })
     expect(img.find('source[type="image/avif"]').exists()).toBe(true)
     expect(img.find('source[type="image/gif"]').exists()).toBe(true)
+    expect(img.findAll('source').length).toBe(2)
+    expect(img.find('img').exists()).toBe(true)
+  })
+
+  it('checks that multiple formats can also be parsed as array', () => {
+    const img = mount(NuxtPicture, {
+      propsData: {
+        width: 200,
+        height: 200,
+        format: ['avif', 'webp'],
+        src
+      }
+    })
+    expect(img.find('source[type="image/avif"]').exists()).toBe(true)
+    expect(img.find('source[type="image/webp"]').exists()).toBe(true)
+    expect(img.findAll('source').length).toBe(2)
     expect(img.find('img').exists()).toBe(true)
   })