Adds Avif Support (#92)

lib/declarations.d.ts

@@ -9,6 +9,7 @@ declare global {
     export interface ProcessEnv {
       TF_NEXTIMAGE_DOMAINS?: string;
       TF_NEXTIMAGE_DEVICE_SIZES?: string;
+      TF_NEXTIMAGE_FORMATS?: string;
       TF_NEXTIMAGE_IMAGE_SIZES?: string;
       TF_NEXTIMAGE_SOURCE_BUCKET?: string;
       __DEBUG__USE_LOCAL_BUCKET?: string;

lib/handler.ts

@@ -62,6 +62,10 @@ const deviceSizes = parseFromEnv(
   'TF_NEXTIMAGE_DEVICE_SIZES',
   imageConfigDefault.deviceSizes
 );
+const formats = parseFromEnv(
+  'TF_NEXTIMAGE_FORMATS',
+  imageConfigDefault.formats
+);
 const imageSizes = parseFromEnv(
   'TF_NEXTIMAGE_IMAGE_SIZES',
   imageConfigDefault.imageSizes
@@ -72,6 +76,7 @@ const imageConfig: ImageConfig = {
   ...imageConfigDefault,
   domains,
   deviceSizes,
+  formats,
   imageSizes,
 };
 

main.tf

@@ -26,9 +26,10 @@ module "image_optimizer" {
   publish       = true
 
   environment_variables = {
-    NODE_ENV                   = "production",
+    NODE_ENV                   = "production"
     TF_NEXTIMAGE_DOMAINS       = jsonencode(var.next_image_domains)
     TF_NEXTIMAGE_DEVICE_SIZES  = var.next_image_device_sizes != null ? jsonencode(var.next_image_device_sizes) : null
+    TF_NEXTIMAGE_FORMATS       = jsonencode(var.next_image_formats)
     TF_NEXTIMAGE_IMAGE_SIZES   = var.next_image_image_sizes != null ? jsonencode(var.next_image_image_sizes) : null
     TF_NEXTIMAGE_SOURCE_BUCKET = var.source_bucket_id
   }

package.json

@@ -20,7 +20,7 @@
     "@dealmore/sammy": "^1.5.0",
     "@tsconfig/node14": "^1.0.1",
     "@types/jest": "^27.0.1",
-    "@types/mime": "^2.0.3",
+    "@types/mime-types": "^2.1.1",
     "@types/node": "^14.0.0",
     "@types/node-fetch": "^2.5.10",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
@@ -32,7 +32,7 @@
     "get-port": "^5.1.1",
     "jest": "^27.0.6",
     "jest-file-snapshot": "^0.5.0",
-    "mime": "^2.5.0",
+    "mime-types": "^2.1.34",
     "node-fetch": "^2.6.1",
     "node-mocks-http": "^1.10.0",
     "prettier": "^2.2.1",

test/constants.ts

@@ -1,39 +1,41 @@
-interface FixtureResponse {
-  ext: string;
-  'content-type': string;
-}
-type Fixture = [string, FixtureResponse];
+// inputFilename | outputContentType
+type Fixture = [string, string];
 
 export const acceptAllFixtures: Fixture[] = [
-  [
-    'bmp/test.bmp',
-    {
-      ext: 'bmp',
-      'content-type': 'image/bmp',
-    },
-  ],
-  ['gif/test.gif', { ext: 'gif', 'content-type': 'image/gif' }],
-  ['jpeg/test.jpg', { ext: 'jpeg', 'content-type': 'image/jpeg' }],
-  ['png/test.png', { ext: 'png', 'content-type': 'image/png' }],
-  ['svg/test.svg', { ext: 'svg', 'content-type': 'image/svg+xml' }],
-  ['tiff/test.tiff', { ext: 'tiff', 'content-type': 'image/tiff' }],
-  ['webp/test.webp', { ext: 'webp', 'content-type': 'image/webp' }],
-  ['webp/animated.webp', { ext: 'webp', 'content-type': 'image/webp' }],
+  // inputFilename | outputContentType
+  ['avif/test.avif', 'image/avif'],
+  ['bmp/test.bmp', 'image/bmp'],
+  ['gif/test.gif', 'image/gif'],
+  ['jpeg/test.jpg', 'image/jpeg'],
+  ['png/test.png', 'image/png'],
+  ['svg/test.svg', 'image/svg+xml'],
+  ['tiff/test.tiff', 'image/tiff'],
+  ['webp/test.webp', 'image/webp'],
+  ['webp/animated.webp', 'image/webp'],
 ];
 
 export const acceptWebpFixtures: Fixture[] = [
-  [
-    'bmp/test.bmp',
-    {
-      ext: 'bmp',
-      'content-type': 'image/bmp',
-    },
-  ],
-  ['gif/test.gif', { ext: 'webp', 'content-type': 'image/webp' }],
-  ['jpeg/test.jpg', { ext: 'webp', 'content-type': 'image/webp' }],
-  ['png/test.png', { ext: 'webp', 'content-type': 'image/webp' }],
-  ['svg/test.svg', { ext: 'svg', 'content-type': 'image/svg+xml' }],
-  ['tiff/test.tiff', { ext: 'webp', 'content-type': 'image/webp' }],
-  ['webp/test.webp', { ext: 'webp', 'content-type': 'image/webp' }],
-  ['webp/animated.webp', { ext: 'webp', 'content-type': 'image/webp' }],
+  // inputFilename | outputContentType
+  ['avif/test.avif', 'image/webp'],
+  ['bmp/test.bmp', 'image/bmp'],
+  ['gif/test.gif', 'image/webp'],
+  ['jpeg/test.jpg', 'image/webp'],
+  ['png/test.png', 'image/webp'],
+  ['svg/test.svg', 'image/svg+xml'],
+  ['tiff/test.tiff', 'image/webp'],
+  ['webp/test.webp', 'image/webp'],
+  ['webp/animated.webp', 'image/webp'],
+];
+
+export const acceptAvifFixtures: Fixture[] = [
+  // inputFilename | outputContentType
+  ['avif/test.avif', 'image/avif'],
+  ['bmp/test.bmp', 'image/bmp'],
+  ['gif/test.gif', 'image/avif'],
+  ['jpeg/test.jpg', 'image/avif'],
+  ['png/test.png', 'image/avif'],
+  ['svg/test.svg', 'image/svg+xml'],
+  ['tiff/test.tiff', 'image/avif'],
+  ['webp/test.webp', 'image/avif'],
+  ['webp/animated.webp', 'image/webp'],
 ];