From 3d8b82b19cf3b184ef5cef42d0b36472ae13d2b4 Mon Sep 17 00:00:00 2001
From: ahhshm <87268103+ahhshm@users.noreply.github.com>
Date: Sat, 22 Oct 2022 09:56:35 +0330
Subject: [PATCH] feat: set a better type for the default image loader

Apply suggestions from code review

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>

move types
---
 packages/next/client/image.tsx           | 10 +++-------
 packages/next/shared/lib/image-loader.ts | 20 ++++++++++++++++++--
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index da4910cadd5a5cc..00a9afdf2c60aea 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -17,7 +17,9 @@ import {
 import { ImageConfigContext } from '../shared/lib/image-config-context'
 import { warnOnce } from '../shared/lib/utils'
 // @ts-ignore - This is replaced by webpack alias
-import defaultLoader from 'next/dist/shared/lib/image-loader'
+import defaultLoader, {
+  type ImageLoaderProps,
+} from 'next/dist/shared/lib/image-loader'
 
 const configEnv = process.env.__NEXT_IMAGE_OPTS as any as ImageConfigComplete
 const allImgs = new Map<
@@ -35,12 +37,6 @@ type LoadingValue = typeof VALID_LOADING_VALUES[number]
 type ImageConfig = ImageConfigComplete & { allSizes: number[] }
 export type ImageLoader = (p: ImageLoaderProps) => string
 
-export type ImageLoaderProps = {
-  src: string
-  width: number
-  quality?: number
-}
-
 // Do not export - this is an internal type only
 // because `next.config.js` is only meant for the
 // built-in loaders, not for a custom loader() prop.
diff --git a/packages/next/shared/lib/image-loader.ts b/packages/next/shared/lib/image-loader.ts
index ef9d5b6cba90c84..9abfb06e74637c2 100644
--- a/packages/next/shared/lib/image-loader.ts
+++ b/packages/next/shared/lib/image-loader.ts
@@ -1,5 +1,21 @@
-// TODO: change "any" to actual type
-function defaultLoader({ config, src, width, quality }: any): string {
+import type { ImageConfig } from './image-config'
+
+export type ImageLoaderProps = {
+  src: string
+  width: number
+  quality?: number
+}
+
+export type ImageLoaderPropsWithConfig = ImageLoaderProps & {
+  config: Readonly<ImageConfig>
+}
+
+function defaultLoader({
+  config,
+  src,
+  width,
+  quality,
+}: ImageLoaderPropsWithConfig): string {
   if (process.env.NODE_ENV !== 'production') {
     const missingValues = []