fix: use klona instead of structuredClone for cloning options

Author: ghostdevv

.changeset/ninety-turkeys-grow.md

@@ -0,0 +1,5 @@
+---
+"svelte-cloudinary": patch
+---
+
+fix: use `klona` instead of `structuredClone` for cloning options

packages/svelte-cloudinary/src/config.ts

@@ -1,6 +1,7 @@
 import { VERSION as SVELTE_CLOUDINARY_VERSION } from './version';
 import { VERSION as SVELTE_VERSION } from 'svelte/compiler';
 import { setContext, getContext } from 'svelte';
+import { klona } from './internal/klona';
 import { defu } from 'defu';
 import type {
 	AnalyticsOptions,
@@ -58,7 +59,7 @@ export function mergeGlobalConfig(
 
 	const config = defu(
 		// Overrides have the highest priorty
-		structuredClone(configOverride),
+		klona(configOverride),
 
 		// Merge the global config `cloudName` and `apiKey`
 		{
@@ -75,7 +76,7 @@ export function mergeGlobalConfig(
 
 	const analytics = defu(
 		// Overrides have the highest priorty
-		structuredClone(analyticsOverride),
+		klona(analyticsOverride),
 		// Merge the global config analytics
 		globalConfig?.analytics,
 		// Merge the default analytics
@@ -112,10 +113,7 @@ export function mergeGlobalConfig(
  * </script>
  */
 export function configureCloudinary(globalConfig: GlobalCloudinaryConfig) {
-	setContext<GlobalCloudinaryConfig>(
-		STORE_KEY,
-		structuredClone(globalConfig),
-	);
+	setContext<GlobalCloudinaryConfig>(STORE_KEY, klona(globalConfig));
 }
 
 export function getGlobalConfig(): GlobalCloudinaryConfig | null {

packages/svelte-cloudinary/src/internal/klona.d.ts

@@ -0,0 +1,5 @@
+// This file is MIT Licensed from Luke Edwards
+// https://github.com/lukeed/klona/blob/e563341d88f433e74a9b4c3c0372d4ba55d2f79e/license
+// https://github.com/lukeed/klona/blob/e563341d88f433e74a9b4c3c0372d4ba55d2f79e/index.d.ts
+
+export function klona<T>(input: T): T;

packages/svelte-cloudinary/src/internal/klona.js

@@ -0,0 +1,89 @@
+// This file is MIT Licensed from Luke Edwards
+// https://github.com/lukeed/klona/blob/e563341d88f433e74a9b4c3c0372d4ba55d2f79e/license
+// https://github.com/lukeed/klona/blob/e563341d88f433e74a9b4c3c0372d4ba55d2f79e/src/index.js
+
+// @ts-nocheck
+
+export function klona(x) {
+	if (typeof x !== 'object') return x;
+
+	var k,
+		tmp,
+		str = Object.prototype.toString.call(x);
+
+	if (str === '[object Object]') {
+		if (x.constructor !== Object && typeof x.constructor === 'function') {
+			tmp = new x.constructor();
+			for (k in x) {
+				if (x.hasOwnProperty(k) && tmp[k] !== x[k]) {
+					tmp[k] = klona(x[k]);
+				}
+			}
+		} else {
+			tmp = {}; // null
+			for (k in x) {
+				if (k === '__proto__') {
+					Object.defineProperty(tmp, k, {
+						value: klona(x[k]),
+						configurable: true,
+						enumerable: true,
+						writable: true,
+					});
+				} else {
+					tmp[k] = klona(x[k]);
+				}
+			}
+		}
+		return tmp;
+	}
+
+	if (str === '[object Array]') {
+		k = x.length;
+		for (tmp = Array(k); k--; ) {
+			tmp[k] = klona(x[k]);
+		}
+		return tmp;
+	}
+
+	if (str === '[object Set]') {
+		tmp = new Set();
+		x.forEach(function (val) {
+			tmp.add(klona(val));
+		});
+		return tmp;
+	}
+
+	if (str === '[object Map]') {
+		tmp = new Map();
+		x.forEach(function (val, key) {
+			tmp.set(klona(key), klona(val));
+		});
+		return tmp;
+	}
+
+	if (str === '[object Date]') {
+		return new Date(+x);
+	}
+
+	if (str === '[object RegExp]') {
+		tmp = new RegExp(x.source, x.flags);
+		tmp.lastIndex = x.lastIndex;
+		return tmp;
+	}
+
+	if (str === '[object DataView]') {
+		return new x.constructor(klona(x.buffer));
+	}
+
+	if (str === '[object ArrayBuffer]') {
+		return x.slice(0);
+	}
+
+	// ArrayBuffer.isView(x)
+	// ~> `new` bcuz `Buffer.slice` => ref
+	if (str.slice(-6) === 'Array]') {
+		return new x.constructor(x);
+	}
+
+	return x;
+}

packages/svelte-cloudinary/src/internal/loader.ts

@@ -2,11 +2,12 @@ import type { CldImageProps } from '../components/CldImage.svelte';
 import type { ImageOptions } from '@cloudinary-util/url-loader';
 import { getCldImageUrl } from '../helpers/getCldImageUrl';
 import type { ImageProps } from '@unpic/svelte';
+import { klona } from './klona';
 
 type URLTransformer = Exclude<ImageProps['transformer'], undefined>;
 
 export function createLoader(props: CldImageProps): URLTransformer {
-	const { config, ...imageProps } = structuredClone(props);
+	const { config, ...imageProps } = klona(props);
 
 	// Normalize width and height to number to allow flexibility in how the values
 	// are passed through as props