feat: 🚀 Add convertFormat

It allows you to convert images from any extension to another extension.

Author: dc7290

__tests__/components/image/config.js

@@ -4,6 +4,9 @@
 const config = {
   imageDir: '_custom-optimize',
   filenameGenerator: ({ path, name, width, quality, extension }) => `${path}-${name}.${width}.${quality}.${extension}`,
+  convertFormat: [
+    ['png', 'webp']
+  ]
 }
 
 module.exports = config

__tests__/components/image/config.test.tsx

@@ -9,9 +9,9 @@ import React from 'react'
 import CustomImage from '../../../src/image'
 
 describe('Apply config', () => {
-  test('Set `imageDir` and `filenameGenerator`', () => {
+  test('Set `imageDir` and `filenameGenerator` and `convetFormat`', () => {
     render(<CustomImage src="/images/img.png" width={1920} height={1280} priority />)
 
-    expect(screen.getByRole('img').getAttribute('src')).toBe('/_custom-optimize/images-img.3840.75.png')
+    expect(screen.getByRole('img').getAttribute('src')).toBe('/_custom-optimize/images-img.3840.75.webp')
   })
 })

src/image.tsx

@@ -3,6 +3,7 @@ import Image, { ImageLoader, ImageProps } from 'next/dist/client/image'
 import React from 'react'
 
 import type { Manifest } from './cli/types'
+import formatValidate from './cli/utils/formatValidate'
 import getConfig from './utils/getConfig'
 
 const config = getConfig()
@@ -21,11 +22,24 @@ const exportableLoader: ImageLoader = ({ src: _src, width, quality }) => {
   }
 
   // Generate a reasonably unique base folder. Doesn't have to be perfectly unique
-  const [path, extension] = src.split(/\.([^.]*$)/)
+  const path = src.split(/\.([^.]*$)/)[0]
+  let extension = src.split(/\.([^.]*$)/)[1]
   if (!path || !extension) {
     throw new Error(`Invalid path or no file extension: ${src}`)
   }
 
+  if (config.convertFormat !== undefined) {
+    const convertArray = config.convertFormat.find(([beforeConvert]) => beforeConvert === extension)
+    if (convertArray !== undefined) {
+      if (!formatValidate(convertArray[0]))
+        throw Error(`Unauthorized format specified in \`configFormat\`. beforeConvert: ${convertArray[0]}`)
+      if (!formatValidate(convertArray[1]))
+        throw Error(`Unauthorized format specified in \`configFormat\`. afterConvert: ${convertArray[1]}`)
+
+      extension = convertArray[1]
+    }
+  }
+
   const pathWithoutName = path.split('/').slice(0, -1).join('/')
   const name = path.split('/').slice(-1).toString()
 

src/utils/getConfig.ts

@@ -1,5 +1,7 @@
 import type { AvifOptions, JpegOptions, PngOptions, WebpOptions } from 'sharp'
 
+import type { AllowedFormat } from '../cli/utils/formatValidate'
+
 export type Config = {
   /**
    * Specify if you are customizing the default output directory, such as next export -o outDir.
@@ -49,6 +51,10 @@ export type Config = {
     webp?: WebpOptions
     avif?: AvifOptions
   }
+  /**
+   * It allows you to convert images from any extension to another extension.
+   */
+  convertFormat?: [beforeConvert: AllowedFormat, afterConvert: AllowedFormat][]
 }
 
 const getConfig = (): Config => {