Cleanup & Migration to Refactored Util Package

astro-cloudinary/package.json

@@ -37,9 +37,9 @@
     "postpublish": "rm ./README.md && rm ./LICENSE"
   },
   "dependencies": {
-    "@cloudinary-util/types": "1.5.7",
-    "@cloudinary-util/url-loader": "5.10.5",
-    "@cloudinary-util/util": "^3.3.2",
+    "@cloudinary-util/types": "1.6.0",
+    "@cloudinary-util/url-loader": "6.0.0",
+    "@cloudinary-util/util": "^4.1.0",
     "@cloudinary/url-gen": "^1.20.0",
     "@unpic/astro": "^0.0.47",
     "@unpic/core": "^0.0.49",

astro-cloudinary/src/components/CldImage.astro

@@ -2,7 +2,7 @@
 import { type HTMLAttributes } from 'astro/types';
 import { type UnpicImageProps } from '@unpic/core';
 import { Image } from '@unpic/astro';
-import { transformationPlugins, type ConfigOptions, type ImageOptions } from '@cloudinary-util/url-loader';
+import { cloudinaryPluginKeys, type ConfigOptions, type ImageOptions } from '@cloudinary-util/url-loader';
 
 import { generateImageLoader } from '../lib/loader';
 
@@ -27,27 +27,14 @@ const CLOUDINARY_PROPS = [
   'format',
   'quality',
   'strictTransformations',
+  ...cloudinaryPluginKeys
 
   // Excluded props that are managed by the component
   // 'height',
   // 'src',
   // 'width'
 ];
 
-// Collect all of the valid CldImage props that should only
-// be applied to the URL construction and not applied to
-// the underlaying Image component
-
-transformationPlugins.forEach(({ props }: { props: Record<string, unknown> }) => {
-  Object.keys(props).forEach(prop => {
-    // If the prop already exists, flag it as a duplicate
-    if ( CLOUDINARY_PROPS.includes(prop) ) {
-      throw new Error(`Option ${prop} already exists!`);
-    }
-    CLOUDINARY_PROPS.push(prop);
-  });
-});
-
 // Collect all of the props that are intended to be passed
 // into the URL construction
 
@@ -100,7 +87,7 @@ if (className) {
   imageClassName = `${imageClassName} ${className}`;
 }
 ---
-<Image class={imageClassName} {...imageProps} />
+<Image class={imageClassName} {...imageProps} data-cldimage-src={props.src} />
 
 <script>
   import { pollForProcessingImage } from '@cloudinary-util/util';
@@ -122,7 +109,13 @@ if (className) {
 
     image?.dispatchEvent(customEvent);
 
-    if ( await pollForProcessingImage({ src: image.src }) ) {
+    const result = await pollForProcessingImage({ src: image.src })
+
+    if ( typeof result.error === 'string' && process.env.NODE_ENV === 'development' ) {
+      console.error(`[CldImage] Failed to load image ${image.dataset.cldimageSrc}: ${result.error}`)
+    }
+
+    if ( result.success ) {
       const key = `${Date.now()}${Math.random()}`;
       if ( image.src.includes('?') ) {
         image.src = `${image.src}?key=${key}`;