feat: Updates URL Loader, Fixes Comma Encoding (#415)

# Description

Pulls in the URL Loader update, which itself pulls in the updated URL
Gen SDK that addresses comma issues.

This makes some fixes that needed to be addressed from the migration to
the new URL Loader major release.

## Issue Ticket Number

Fixes #414 

<!-- Specify above which issue this fixes by referencing the issue
number (`#<ISSUE_NUMBER>`) or issue URL. -->
<!-- Example: Fixes
https://github.com/cloudinary-community/next-cloudinary/issues/<ISSUE_NUMBER>
-->

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Fix or improve the documentation
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [ ] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [ ] I have created an
[issue](https://github.com/cloudinary-community/next-cloudinary/issues)
ticket for this PR
- [ ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/cloudinary-community/next-cloudinary/pulls)
for the same update/change?
- [ ] I have performed a self-review of my own code
- [ ] I have run tests locally to ensure they all pass
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes needed to the documentation

next-cloudinary/package.json

@@ -15,7 +15,7 @@
     "test:app": "NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"test\" yarn build && cd tests/nextjs-app && yarn build"
   },
   "dependencies": {
-    "@cloudinary-util/url-loader": "^3.22.0",
+    "@cloudinary-util/url-loader": "^4.1.1",
     "@cloudinary-util/util": "^2.3.0"
   },
   "devDependencies": {

next-cloudinary/src/components/CldImage/CldImage.tsx

@@ -26,8 +26,9 @@ const CldImage = forwardRef<HTMLImageElement, CldImageProps>(function CldImage(p
     'assetType',
   ];
 
-  transformationPlugins.forEach(({ props = [] }) => {
-    props.forEach(prop => {
+  transformationPlugins.forEach(({ props }) => {
+    const pluginProps = Object.keys(props);
+    pluginProps.forEach(prop => {
       if ( CLD_OPTIONS.includes(prop) ) {
         throw new Error(`Option ${prop} already exists!`);
       }

next-cloudinary/src/helpers/getCldImageUrl.ts

@@ -8,9 +8,9 @@ import {checkForCloudName} from "../lib/cloudinary";
  * getCldImageUrl
  */
 
-export interface GetCldImageUrlOptions extends ImageOptions {};
-export interface GetCldImageUrlConfig extends ConfigOptions {};
-export interface GetCldImageUrlAnalytics extends AnalyticsOptions {};
+export type GetCldImageUrlOptions = ImageOptions;
+export type GetCldImageUrlConfig = ConfigOptions;
+export type GetCldImageUrlAnalytics = AnalyticsOptions;
 
 // @deprecated GetCldImageUrl
 export interface GetCldImageUrl {

next-cloudinary/src/helpers/getCldOgImageUrl.ts

@@ -8,9 +8,9 @@ import type { GetCldImageUrl, GetCldImageUrlOptions } from './getCldImageUrl';
  */
 
 // @deprecated GetCldOgImageUrl
-export interface GetCldOgImageUrl extends GetCldImageUrl {}
+export type GetCldOgImageUrl = GetCldImageUrl;
 
-export interface GetCldOgImageUrlOptions extends GetCldImageUrlOptions {};
+export type GetCldOgImageUrlOptions = GetCldImageUrlOptions;
 
 export function getCldOgImageUrl(options: GetCldOgImageUrlOptions) {
   return getCldImageUrl({

next-cloudinary/src/helpers/getCldVideoUrl.ts

@@ -8,9 +8,9 @@ import {checkForCloudName} from "../lib/cloudinary";
  * getCldVideoUrl
  */
 
-export interface GetCldVideoUrlOptions extends VideoOptions {};
-export interface GetCldVideoUrlConfig extends ConfigOptions {};
-export interface GetCldVideoUrlAnalytics extends AnalyticsOptions {};
+export type GetCldVideoUrlOptions = VideoOptions;
+export type GetCldVideoUrlConfig = ConfigOptions;
+export type GetCldVideoUrlAnalytics = AnalyticsOptions;
 
 export function getCldVideoUrl(options: GetCldVideoUrlOptions, config?: GetCldVideoUrlConfig, analytics?: GetCldVideoUrlAnalytics) {
   const cloudName = config?.cloud?.cloudName ?? process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;