fix: patch update, add support for config options

Author: matiasfha

pnpm-lock.yaml

@@ -61,7 +61,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@cloudinary-util/url-loader": "3.5.1",
+		"@cloudinary-util/url-loader": "3.8.1",
 		"@cloudinary-util/util": "2.0.1",
 		"@unpic/core": "0.0.24",
 		"@unpic/svelte": "0.0.25"

svelte-cloudinary/package.json

@@ -13,10 +13,10 @@
 	 */
 	type $$Props = CldImageProps;
 
-	const CLD_OPTIONS = ['deliveryType', 'preserveTransformations'];
+	const CLD_OPTIONS = ['config', 'deliveryType', 'preserveTransformations'];
 
 	// reactively destructure the props
-	$: ({ alt, src, width, height } = $$props as $$Props);
+	$: ({ alt, src, width, height, config } = $$props as $$Props);
 
 	transformationPlugins.forEach(({ props = [] }) => {
 		props.forEach((prop) => {
@@ -89,6 +89,6 @@
 			options.widthResize = width;
 		}
 
-		return getCldImageUrl(options);
+		return getCldImageUrl(options, config);
 	}}
 />

svelte-cloudinary/src/lib/components/CldImage.svelte

@@ -4,9 +4,10 @@
 import type { UnpicImageProps } from '@unpic/core';
 import type { HTMLImgAttributes } from 'svelte/elements';
 type ImageProps = UnpicImageProps<HTMLImgAttributes, string | null>;
-import type { ImageOptions } from '@cloudinary-util/url-loader';
+import type { ImageOptions, ConfigOptions } from '@cloudinary-util/url-loader';
 export type CldImageProps = ImageOptions &
   ImageProps & {
+    config?: ConfigOptions;
     layout?: ImageProps['layout'];
     preserveTransformations?: boolean;
     tint?: string;

svelte-cloudinary/src/lib/components/CldImageTypes.ts

@@ -2,15 +2,27 @@
 	import CldImage from '$lib/components/CldImage.svelte';
 </script>
 
+<!-- <CldImage -->
+<!-- 	height={300} -->
+<!-- 	src="images/woman-headphones" -->
+<!-- 	removeBackground -->
+<!-- 	tint="70:blue:green:purple" -->
+<!-- 	underlay="images/city-skyline" -->
+<!-- 	sizes="100vw" -->
+<!-- 	alt="Description of my image" -->
+<!-- 	layout="fullWidth" -->
+<!-- /> -->
 <CldImage
-	height={1200}
+	width={200}
+	height={200}
 	src="images/woman-headphones"
-	removeBackground
-	tint="70:blue:green:purple"
-	underlay="images/city-skyline"
-	sizes="100vw"
-	alt="Description of my image"
-	layout="fullWidth"
+	alt="Original image of images/woman with headphones"
+	config={{
+		cloud: {
+			cloudName: 'next-cloudinary'
+		},
+		url: { secureDistribution: 'spacejelly.dev' }
+	}}
 />
 <!-- <CldImage -->
 <!-- 	width={1200} -->