From cf4cfa6a8c4e17c86d325ca90d5cd547673f635e Mon Sep 17 00:00:00 2001 From: Victory Nwani Date: Tue, 15 Oct 2024 14:29:18 +0100 Subject: [PATCH 1/8] feat: add src type to CloudinaryLoaderCldOptions interface --- next-cloudinary/src/loaders/cloudinary-loader.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/next-cloudinary/src/loaders/cloudinary-loader.ts b/next-cloudinary/src/loaders/cloudinary-loader.ts index 40248ac5..49979e2c 100644 --- a/next-cloudinary/src/loaders/cloudinary-loader.ts +++ b/next-cloudinary/src/loaders/cloudinary-loader.ts @@ -3,6 +3,7 @@ import { ImageProps } from 'next/image'; import { getCldImageUrl } from '../helpers/getCldImageUrl'; export interface CloudinaryLoaderCldOptions { + src: string; } export interface CloudinaryLoaderLoaderOptions { @@ -20,7 +21,7 @@ export interface CloudinaryLoader { export function cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldConfig = {} }: CloudinaryLoader) { const options = { ...imageProps, - ...cldOptions + ...cldOptions, } options.width = typeof options.width === 'string' ? parseInt(options.width) : options.width; @@ -53,6 +54,6 @@ export function cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldCon options.width = loaderOptions?.width; } - // @ts-ignore + return getCldImageUrl(options, cldConfig); } \ No newline at end of file From ef10edb88c31f8fa780ee4fbdf321f46df505abb Mon Sep 17 00:00:00 2001 From: Victory Nwani Date: Sat, 19 Oct 2024 15:55:32 +0100 Subject: [PATCH 2/8] chore: rebase upstream origin main --- .../src/components/CldImage/CldImage.tsx | 154 +++++++++++------- 1 file changed, 91 insertions(+), 63 deletions(-) diff --git a/next-cloudinary/src/components/CldImage/CldImage.tsx b/next-cloudinary/src/components/CldImage/CldImage.tsx index 7a8b4f98..bbf77bb1 100644 --- a/next-cloudinary/src/components/CldImage/CldImage.tsx +++ b/next-cloudinary/src/components/CldImage/CldImage.tsx @@ -1,20 +1,29 @@ -import React, { useState, useCallback, forwardRef, SyntheticEvent } from 'react'; -import Image, { ImageProps } from 'next/image'; -import { pollForProcessingImage } from '@cloudinary-util/util'; -import { transformationPlugins } from '@cloudinary-util/url-loader'; -import type { ImageOptions, ConfigOptions } from '@cloudinary-util/url-loader'; - -import { getCldImageUrl } from '../../helpers/getCldImageUrl'; - -import { cloudinaryLoader } from '../../loaders/cloudinary-loader'; - -export type CldImageProps = Omit & ImageOptions & { - config?: ConfigOptions; - src: string; - unoptimized?: boolean; -}; +import React, { + useState, + useCallback, + forwardRef, + SyntheticEvent, +} from "react"; +import Image, { ImageProps } from "next/image"; +import { pollForProcessingImage } from "@cloudinary-util/util"; +import { transformationPlugins } from "@cloudinary-util/url-loader"; +import type { ImageOptions, ConfigOptions } from "@cloudinary-util/url-loader"; + +import { getCldImageUrl } from "../../helpers/getCldImageUrl"; + +import { cloudinaryLoader } from "../../loaders/cloudinary-loader"; + +export type CldImageProps = Omit & + ImageOptions & { + config?: ConfigOptions; + // src: string; + unoptimized?: boolean; + }; -const CldImage = forwardRef(function CldImage(props, ref) { +const CldImage = forwardRef(function CldImage( + props, + ref +) { let hasThrownError = false; // Add props here that are intended to only be used for @@ -22,10 +31,10 @@ const CldImage = forwardRef(function CldImage(p // to the DOM const CLD_OPTIONS = [ - 'assetType', - 'config', - 'deliveryType', - 'strictTransformations', + "assetType", + "config", + "deliveryType", + "strictTransformations", ]; // Loop through all of the props available on the transformation plugins and verify @@ -35,15 +44,17 @@ const CldImage = forwardRef(function CldImage(p // props are applied to the underlaying Image component vs what's being sent // to Cloudinary URL construction - transformationPlugins.forEach(({ props }: { props: Record }) => { - const pluginProps = Object.keys(props); - pluginProps.forEach(prop => { - if ( CLD_OPTIONS.includes(prop) ) { - throw new Error(`Option ${prop} already exists!`); - } - CLD_OPTIONS.push(prop); - }); - }); + transformationPlugins.forEach( + ({ props }: { props: Record }) => { + const pluginProps = Object.keys(props); + pluginProps.forEach((prop) => { + if (CLD_OPTIONS.includes(prop)) { + throw new Error(`Option ${prop} already exists!`); + } + CLD_OPTIONS.push(prop); + }); + } + ); // Construct the base Image component props by filtering out Cloudinary-specific props @@ -53,21 +64,27 @@ const CldImage = forwardRef(function CldImage(p }; (Object.keys(props) as Array) - .filter(key => typeof key === 'string' && !CLD_OPTIONS.includes(key)) - .forEach(key => imageProps[key as keyof ImageProps] = props[key]); - - const defaultImgKey = (Object.keys(imageProps) as Array).map(key => `${key}:${imageProps[key]}`).join(';'); + .filter((key) => typeof key === "string" && !CLD_OPTIONS.includes(key)) + .forEach((key) => (imageProps[key as keyof ImageProps] = props[key])); + + const defaultImgKey = ( + Object.keys(imageProps) as Array + ) + .map((key) => `${key}:${imageProps[key]}`) + .join(";"); const [imgKey, setImgKey] = useState(defaultImgKey); // Construct Cloudinary-specific props by looking for values for any of the supported prop keys - type CldOptions = Omit; + type CldOptions = ImageOptions; - const cldOptions: CldOptions = {}; + const cldOptions: CldOptions = { + src: "", + }; CLD_OPTIONS.forEach((key) => { const prop = props[key as keyof ImageOptions]; - if ( prop ) { + if (prop) { // @ts-expect-error cldOptions[key as keyof CldOptions] = prop; } @@ -79,17 +96,21 @@ const CldImage = forwardRef(function CldImage(p // that also disables format and quality transformations, to deliver it as unoptimized // See about unoptimized not working with loader: https://github.com/vercel/next.js/issues/50764 - const IMAGE_OPTIONS: { unoptimized?: boolean } = (process.env.__NEXT_IMAGE_OPTS || {}) as unknown as object; - - if ( props.unoptimized === true || IMAGE_OPTIONS?.unoptimized === true ) { - imageProps.src = getCldImageUrl({ - ...cldOptions, - width: imageProps.width, - height: imageProps.height, - src: imageProps.src as string, - format: 'default', - quality: 'default', - }, props.config); + const IMAGE_OPTIONS: { unoptimized?: boolean } = (process.env + .__NEXT_IMAGE_OPTS || {}) as unknown as object; + + if (props.unoptimized === true || IMAGE_OPTIONS?.unoptimized === true) { + imageProps.src = getCldImageUrl( + { + ...cldOptions, + width: imageProps.width, + height: imageProps.height, + src: imageProps.src as string, + format: "default", + quality: "default", + }, + props.config + ); } /** @@ -106,38 +127,37 @@ const CldImage = forwardRef(function CldImage(p // up triggering an infinite loop if the resulting image keeps erroring and // this function sets a key using the current time to force refresh the UI - if ( hasThrownError ) return; + if (hasThrownError) return; hasThrownError = true; - if ( typeof props.onError === 'function' ) { + if (typeof props.onError === "function") { const onErrorResult = props.onError(options); - if ( typeof onErrorResult === 'boolean' && onErrorResult === false ) { + if (typeof onErrorResult === "boolean" && onErrorResult === false) { pollForImage = false; } - } else if ( typeof props.onError === 'boolean' && props.onError === false ) { + } else if (typeof props.onError === "boolean" && props.onError === false) { pollForImage = false; } // Give an escape hatch in case the user wants to handle the error themselves // or if they want to disable polling for the image - if ( pollForImage === false ) return; + if (pollForImage === false) return; - const image = options.target as HTMLImageElement - const result = await pollForProcessingImage({ src: image.src }) + const image = options.target as HTMLImageElement; + const result = await pollForProcessingImage({ src: image.src }); - if ( typeof result.error === 'string' && process.env.NODE_ENV === 'development' ) { - console.error(`[CldImage] Failed to load image ${props.src}: ${result.error}`) - } - - if ( result.success ) { + if (result) { setImgKey(`${defaultImgKey};${Date.now()}`); } } - const handleOnError = useCallback(onError, [pollForProcessingImage, defaultImgKey]); + const handleOnError = useCallback(onError, [ + pollForProcessingImage, + defaultImgKey, + ]); // Copypasta from https://github.com/prismicio/prismic-next/pull/79/files // Thanks Angelo! @@ -146,18 +166,26 @@ const CldImage = forwardRef(function CldImage(p let ResolvedImage = Image; if ("default" in ResolvedImage) { - ResolvedImage = (ResolvedImage as unknown as { default: typeof Image }).default; + ResolvedImage = (ResolvedImage as unknown as { default: typeof Image }) + .default; } return ( cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldConfig: props.config })} + loader={(loaderOptions) => + cloudinaryLoader({ + loaderOptions, + imageProps, + cldOptions, + cldConfig: props.config, + }) + } onError={handleOnError} ref={ref} /> ); }); -export default CldImage; \ No newline at end of file +export default CldImage; From 6698297dcc5667222c89b9b0163301e7720b2b30 Mon Sep 17 00:00:00 2001 From: Victory Nwani Date: Sat, 19 Oct 2024 15:56:45 +0100 Subject: [PATCH 3/8] chore: rebase upstream origin main --- next-cloudinary/src/components/CldImage/CldImage.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/next-cloudinary/src/components/CldImage/CldImage.tsx b/next-cloudinary/src/components/CldImage/CldImage.tsx index bbf77bb1..6d66f135 100644 --- a/next-cloudinary/src/components/CldImage/CldImage.tsx +++ b/next-cloudinary/src/components/CldImage/CldImage.tsx @@ -78,9 +78,7 @@ const CldImage = forwardRef(function CldImage( type CldOptions = ImageOptions; - const cldOptions: CldOptions = { - src: "", - }; + const cldOptions: CldOptions | {} = {}; CLD_OPTIONS.forEach((key) => { const prop = props[key as keyof ImageOptions]; @@ -178,7 +176,7 @@ const CldImage = forwardRef(function CldImage( cloudinaryLoader({ loaderOptions, imageProps, - cldOptions, + cldOptions : cldOptions as CldOptions, cldConfig: props.config, }) } From c8fa80deb5922afe2e8fc3430e2d747705ca06ff Mon Sep 17 00:00:00 2001 From: Victory Nwani Date: Tue, 15 Oct 2024 18:08:55 +0100 Subject: [PATCH 4/8] chore: rebase upstream origin main --- next-cloudinary/src/components/CldImage/CldImage.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/next-cloudinary/src/components/CldImage/CldImage.tsx b/next-cloudinary/src/components/CldImage/CldImage.tsx index 6d66f135..5bcdb9b0 100644 --- a/next-cloudinary/src/components/CldImage/CldImage.tsx +++ b/next-cloudinary/src/components/CldImage/CldImage.tsx @@ -147,7 +147,11 @@ const CldImage = forwardRef(function CldImage( const image = options.target as HTMLImageElement; const result = await pollForProcessingImage({ src: image.src }); - if (result) { + if ( typeof result.error === 'string' && process.env.NODE_ENV === 'development' ) { + console.error(`[CldImage] Failed to load image ${props.src}: ${result.error}`) + } + + if ( result.success ) { setImgKey(`${defaultImgKey};${Date.now()}`); } } From 5acd29cdd5e0b241c9de577bad4c3a5b24163167 Mon Sep 17 00:00:00 2001 From: Victory Nwani Date: Tue, 15 Oct 2024 18:17:58 +0100 Subject: [PATCH 5/8] feat: add empty src value cldOptions object --- next-cloudinary/src/components/CldImage/CldImage.tsx | 3 +-- next-cloudinary/src/loaders/cloudinary-loader.ts | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/next-cloudinary/src/components/CldImage/CldImage.tsx b/next-cloudinary/src/components/CldImage/CldImage.tsx index 5bcdb9b0..58a41ffa 100644 --- a/next-cloudinary/src/components/CldImage/CldImage.tsx +++ b/next-cloudinary/src/components/CldImage/CldImage.tsx @@ -16,7 +16,7 @@ import { cloudinaryLoader } from "../../loaders/cloudinary-loader"; export type CldImageProps = Omit & ImageOptions & { config?: ConfigOptions; - // src: string; + src: string; unoptimized?: boolean; }; @@ -57,7 +57,6 @@ const CldImage = forwardRef(function CldImage( ); // Construct the base Image component props by filtering out Cloudinary-specific props - const imageProps: ImageProps = { alt: props.alt, src: props.src, diff --git a/next-cloudinary/src/loaders/cloudinary-loader.ts b/next-cloudinary/src/loaders/cloudinary-loader.ts index 49979e2c..05a99ddb 100644 --- a/next-cloudinary/src/loaders/cloudinary-loader.ts +++ b/next-cloudinary/src/loaders/cloudinary-loader.ts @@ -53,7 +53,6 @@ export function cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldCon // for responsive sizing to take effect, so we can utilize the loader width for the base width options.width = loaderOptions?.width; } - return getCldImageUrl(options, cldConfig); } \ No newline at end of file From c1648d0436d1e95c32a5aae170307772befeae3e Mon Sep 17 00:00:00 2001 From: Victory Nwani Date: Sat, 19 Oct 2024 15:57:08 +0100 Subject: [PATCH 6/8] chore: rebase upstream origin main --- .../src/components/CldImage/CldImage.tsx | 26 ++++++++++++------- .../src/loaders/cloudinary-loader.ts | 2 +- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/next-cloudinary/src/components/CldImage/CldImage.tsx b/next-cloudinary/src/components/CldImage/CldImage.tsx index 58a41ffa..3fe15d97 100644 --- a/next-cloudinary/src/components/CldImage/CldImage.tsx +++ b/next-cloudinary/src/components/CldImage/CldImage.tsx @@ -100,11 +100,14 @@ const CldImage = forwardRef(function CldImage( imageProps.src = getCldImageUrl( { ...cldOptions, - width: imageProps.width, - height: imageProps.height, - src: imageProps.src as string, - format: "default", - quality: "default", + + ...{ + width: imageProps.width, + height: imageProps.height, + src: imageProps.src as string, + format: "default", + quality: "default", + }, }, props.config ); @@ -146,11 +149,16 @@ const CldImage = forwardRef(function CldImage( const image = options.target as HTMLImageElement; const result = await pollForProcessingImage({ src: image.src }); - if ( typeof result.error === 'string' && process.env.NODE_ENV === 'development' ) { - console.error(`[CldImage] Failed to load image ${props.src}: ${result.error}`) + if ( + typeof result.error === "string" && + process.env.NODE_ENV === "development" + ) { + console.error( + `[CldImage] Failed to load image ${props.src}: ${result.error}` + ); } - if ( result.success ) { + if (result.success) { setImgKey(`${defaultImgKey};${Date.now()}`); } } @@ -179,7 +187,7 @@ const CldImage = forwardRef(function CldImage( cloudinaryLoader({ loaderOptions, imageProps, - cldOptions : cldOptions as CldOptions, + cldOptions: cldOptions as CldOptions, cldConfig: props.config, }) } diff --git a/next-cloudinary/src/loaders/cloudinary-loader.ts b/next-cloudinary/src/loaders/cloudinary-loader.ts index 05a99ddb..cbadd141 100644 --- a/next-cloudinary/src/loaders/cloudinary-loader.ts +++ b/next-cloudinary/src/loaders/cloudinary-loader.ts @@ -3,7 +3,7 @@ import { ImageProps } from 'next/image'; import { getCldImageUrl } from '../helpers/getCldImageUrl'; export interface CloudinaryLoaderCldOptions { - src: string; + src: string } export interface CloudinaryLoaderLoaderOptions { From e9b8d30041c21a3410913f90a27ae0707b1b9152 Mon Sep 17 00:00:00 2001 From: Victory Nwani Date: Mon, 28 Oct 2024 13:10:55 +0000 Subject: [PATCH 7/8] update: remove cldOptions object spread & revert formatting --- .../src/components/CldImage/CldImage.tsx | 157 +++++++----------- .../src/loaders/cloudinary-loader.ts | 4 +- 2 files changed, 62 insertions(+), 99 deletions(-) diff --git a/next-cloudinary/src/components/CldImage/CldImage.tsx b/next-cloudinary/src/components/CldImage/CldImage.tsx index 3fe15d97..b56f1990 100644 --- a/next-cloudinary/src/components/CldImage/CldImage.tsx +++ b/next-cloudinary/src/components/CldImage/CldImage.tsx @@ -1,29 +1,20 @@ -import React, { - useState, - useCallback, - forwardRef, - SyntheticEvent, -} from "react"; -import Image, { ImageProps } from "next/image"; -import { pollForProcessingImage } from "@cloudinary-util/util"; -import { transformationPlugins } from "@cloudinary-util/url-loader"; -import type { ImageOptions, ConfigOptions } from "@cloudinary-util/url-loader"; - -import { getCldImageUrl } from "../../helpers/getCldImageUrl"; - -import { cloudinaryLoader } from "../../loaders/cloudinary-loader"; - -export type CldImageProps = Omit & - ImageOptions & { - config?: ConfigOptions; - src: string; - unoptimized?: boolean; - }; +import React, { useState, useCallback, forwardRef, SyntheticEvent } from 'react'; +import Image, { ImageProps } from 'next/image'; +import { pollForProcessingImage } from '@cloudinary-util/util'; +import { transformationPlugins } from '@cloudinary-util/url-loader'; +import type { ImageOptions, ConfigOptions } from '@cloudinary-util/url-loader'; + +import { getCldImageUrl } from '../../helpers/getCldImageUrl'; + +import { cloudinaryLoader } from '../../loaders/cloudinary-loader'; -const CldImage = forwardRef(function CldImage( - props, - ref -) { +export type CldImageProps = Omit & ImageOptions & { + config?: ConfigOptions; + src: string; + unoptimized?: boolean; +}; + +const CldImage = forwardRef(function CldImage(props, ref) { let hasThrownError = false; // Add props here that are intended to only be used for @@ -31,10 +22,10 @@ const CldImage = forwardRef(function CldImage( // to the DOM const CLD_OPTIONS = [ - "assetType", - "config", - "deliveryType", - "strictTransformations", + 'assetType', + 'config', + 'deliveryType', + 'strictTransformations', ]; // Loop through all of the props available on the transformation plugins and verify @@ -44,33 +35,28 @@ const CldImage = forwardRef(function CldImage( // props are applied to the underlaying Image component vs what's being sent // to Cloudinary URL construction - transformationPlugins.forEach( - ({ props }: { props: Record }) => { - const pluginProps = Object.keys(props); - pluginProps.forEach((prop) => { - if (CLD_OPTIONS.includes(prop)) { - throw new Error(`Option ${prop} already exists!`); - } - CLD_OPTIONS.push(prop); - }); - } - ); + transformationPlugins.forEach(({ props }: { props: Record }) => { + const pluginProps = Object.keys(props); + pluginProps.forEach(prop => { + if ( CLD_OPTIONS.includes(prop) ) { + throw new Error(`Option ${prop} already exists!`); + } + CLD_OPTIONS.push(prop); + }); + }); // Construct the base Image component props by filtering out Cloudinary-specific props + const imageProps: ImageProps = { alt: props.alt, src: props.src, }; (Object.keys(props) as Array) - .filter((key) => typeof key === "string" && !CLD_OPTIONS.includes(key)) - .forEach((key) => (imageProps[key as keyof ImageProps] = props[key])); - - const defaultImgKey = ( - Object.keys(imageProps) as Array - ) - .map((key) => `${key}:${imageProps[key]}`) - .join(";"); + .filter(key => typeof key === 'string' && !CLD_OPTIONS.includes(key)) + .forEach(key => imageProps[key as keyof ImageProps] = props[key]); + + const defaultImgKey = (Object.keys(imageProps) as Array).map(key => `${key}:${imageProps[key]}`).join(';'); const [imgKey, setImgKey] = useState(defaultImgKey); // Construct Cloudinary-specific props by looking for values for any of the supported prop keys @@ -81,7 +67,7 @@ const CldImage = forwardRef(function CldImage( CLD_OPTIONS.forEach((key) => { const prop = props[key as keyof ImageOptions]; - if (prop) { + if ( prop ) { // @ts-expect-error cldOptions[key as keyof CldOptions] = prop; } @@ -93,24 +79,17 @@ const CldImage = forwardRef(function CldImage( // that also disables format and quality transformations, to deliver it as unoptimized // See about unoptimized not working with loader: https://github.com/vercel/next.js/issues/50764 - const IMAGE_OPTIONS: { unoptimized?: boolean } = (process.env - .__NEXT_IMAGE_OPTS || {}) as unknown as object; - - if (props.unoptimized === true || IMAGE_OPTIONS?.unoptimized === true) { - imageProps.src = getCldImageUrl( - { - ...cldOptions, - - ...{ - width: imageProps.width, - height: imageProps.height, - src: imageProps.src as string, - format: "default", - quality: "default", - }, - }, - props.config - ); + const IMAGE_OPTIONS: { unoptimized?: boolean } = (process.env.__NEXT_IMAGE_OPTS || {}) as unknown as object; + + if ( props.unoptimized === true || IMAGE_OPTIONS?.unoptimized === true ) { + imageProps.src = getCldImageUrl({ + ...cldOptions, + width: imageProps.width, + height: imageProps.height, + src: imageProps.src as string, + format: 'default', + quality: 'default', + }, props.config); } /** @@ -127,46 +106,38 @@ const CldImage = forwardRef(function CldImage( // up triggering an infinite loop if the resulting image keeps erroring and // this function sets a key using the current time to force refresh the UI - if (hasThrownError) return; + if ( hasThrownError ) return; hasThrownError = true; - if (typeof props.onError === "function") { + if ( typeof props.onError === 'function' ) { const onErrorResult = props.onError(options); - if (typeof onErrorResult === "boolean" && onErrorResult === false) { + if ( typeof onErrorResult === 'boolean' && onErrorResult === false ) { pollForImage = false; } - } else if (typeof props.onError === "boolean" && props.onError === false) { + } else if ( typeof props.onError === 'boolean' && props.onError === false ) { pollForImage = false; } // Give an escape hatch in case the user wants to handle the error themselves // or if they want to disable polling for the image - if (pollForImage === false) return; + if ( pollForImage === false ) return; - const image = options.target as HTMLImageElement; - const result = await pollForProcessingImage({ src: image.src }); + const image = options.target as HTMLImageElement + const result = await pollForProcessingImage({ src: image.src }) - if ( - typeof result.error === "string" && - process.env.NODE_ENV === "development" - ) { - console.error( - `[CldImage] Failed to load image ${props.src}: ${result.error}` - ); + if ( typeof result.error === 'string' && process.env.NODE_ENV === 'development' ) { + console.error(`[CldImage] Failed to load image ${props.src}: ${result.error}`) } - if (result.success) { + if ( result.success ) { setImgKey(`${defaultImgKey};${Date.now()}`); } } - const handleOnError = useCallback(onError, [ - pollForProcessingImage, - defaultImgKey, - ]); + const handleOnError = useCallback(onError, [pollForProcessingImage, defaultImgKey]); // Copypasta from https://github.com/prismicio/prismic-next/pull/79/files // Thanks Angelo! @@ -175,26 +146,18 @@ const CldImage = forwardRef(function CldImage( let ResolvedImage = Image; if ("default" in ResolvedImage) { - ResolvedImage = (ResolvedImage as unknown as { default: typeof Image }) - .default; + ResolvedImage = (ResolvedImage as unknown as { default: typeof Image }).default; } return ( - cloudinaryLoader({ - loaderOptions, - imageProps, - cldOptions: cldOptions as CldOptions, - cldConfig: props.config, - }) - } + loader={(loaderOptions) => cloudinaryLoader({ loaderOptions, imageProps, cldOptions: cldOptions as CldOptions, cldConfig: props.config })} onError={handleOnError} ref={ref} /> ); }); -export default CldImage; +export default CldImage; \ No newline at end of file diff --git a/next-cloudinary/src/loaders/cloudinary-loader.ts b/next-cloudinary/src/loaders/cloudinary-loader.ts index cbadd141..d0806ff1 100644 --- a/next-cloudinary/src/loaders/cloudinary-loader.ts +++ b/next-cloudinary/src/loaders/cloudinary-loader.ts @@ -21,7 +21,7 @@ export interface CloudinaryLoader { export function cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldConfig = {} }: CloudinaryLoader) { const options = { ...imageProps, - ...cldOptions, + ...cldOptions } options.width = typeof options.width === 'string' ? parseInt(options.width) : options.width; @@ -53,6 +53,6 @@ export function cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldCon // for responsive sizing to take effect, so we can utilize the loader width for the base width options.width = loaderOptions?.width; } - + return getCldImageUrl(options, cldConfig); } \ No newline at end of file From b524d2b6f8d82351a66f17c46fa297da182e1edc Mon Sep 17 00:00:00 2001 From: Colby Fayock Date: Fri, 1 Nov 2024 15:10:41 -0400 Subject: [PATCH 8/8] changing how type is cast --- next-cloudinary/src/components/CldImage/CldImage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/next-cloudinary/src/components/CldImage/CldImage.tsx b/next-cloudinary/src/components/CldImage/CldImage.tsx index b56f1990..99fd9fd7 100644 --- a/next-cloudinary/src/components/CldImage/CldImage.tsx +++ b/next-cloudinary/src/components/CldImage/CldImage.tsx @@ -63,7 +63,7 @@ const CldImage = forwardRef(function CldImage(p type CldOptions = ImageOptions; - const cldOptions: CldOptions | {} = {}; + const cldOptions = {} as CldOptions; CLD_OPTIONS.forEach((key) => { const prop = props[key as keyof ImageOptions]; @@ -153,7 +153,7 @@ const CldImage = forwardRef(function CldImage(p cloudinaryLoader({ loaderOptions, imageProps, cldOptions: cldOptions as CldOptions, cldConfig: props.config })} + loader={(loaderOptions) => cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldConfig: props.config })} onError={handleOnError} ref={ref} />