feat: updates URL loader to 4.0, migrate to svelte-4 and sveltekit-2.0

docs/package.json

@@ -12,8 +12,9 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.1.0",
-		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
 		"@tailwindcss/typography": "^0.5.9",
 		"@typescript-eslint/eslint-plugin": "^5.60.0",
@@ -36,14 +37,14 @@
 		"tailwindcss": "^3.3.1",
 		"tslib": "^2.5.3",
 		"typescript": "^5.1.3",
-		"vite": "^4.3.9"
+		"vite": "^5.0.0"
 	},
 	"type": "module",
 	"dependencies": {
 		"@iconify/svelte": "3.1.4",
 		"@microflash/rehype-toc": "1.0.2",
 		"@sentry/sveltekit": "7.64.0",
-		"@sveltejs/adapter-vercel": "3.0.2",
+		"@sveltejs/adapter-vercel": "^4.0.0",
 		"@vercel/analytics": "1.0.1",
 		"cloudinary": "^1.32.0",
 		"flowbite-svelte": "0.44.20",
@@ -54,4 +55,4 @@
 		"svelte-typeahead": "4.4.1",
 		"theme-change": "2.5.0"
 	}
-}
+}

docs/src/docs/components/cldimage/configuration.md

@@ -1587,6 +1587,13 @@ organized ways of applying transformations and effects.
       default: '-',
       example: '<code>{`[{ background: "blue" }]`}</code>'
     },
+    {
+      prop: 'namedTransformations',
+      type: 'string | array',
+      default: '-',
+      example: '<code>{`["my-named-transformation"]`}</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/image_transformations#named_transformations">More Info</a>'
+    },
     {
       prop: 'preserveTransformations',
       type: 'string',
@@ -1609,7 +1616,7 @@ organized ways of applying transformations and effects.
       more: '<a class="whitespace-nowrap" href="https://cloudinary.com/documentation/control_access_to_media#strict_transformations">More Info</a>'
     },
     {
-      prop: 'transformations',
+      prop: 'transformations (deprecated)',
       type: 'string | array',
       default: '-',
       example: '<code>{`["my-named-transformation"]`}</code>',
@@ -1637,6 +1644,18 @@ effects={[
 ]}
 ```
 
+#### `namedTransformations`
+
+Applies named transformations to the image.
+
+**Examples**
+
+```jsx copy
+namedTransformations={['my-transformation']}
+```
+
+[Learn more about Named Transformations](https://cloudinary.com/documentation/image_transformations#named_transformations) on the Cloudinary docs.
+
 #### `preserveTransformations`
 
 Preserves transformations already applied to an image when passing in a Cloudinary URL
@@ -1668,7 +1687,7 @@ By enabling Strict Transformations, you restrict the ability to generate transfo
 approval through the Cloudinary dashboard.
 
 > Note: This disables [optimization](#optimization) and [responsive sizing](/guides/responsive-images)
-only allowing [named transformations](#transformations) to be applied. The width and height are not applied to the URL,
+only allowing [named transformations](#transformations-deprecated) to be applied. The width and height are not applied to the URL,
 but are still included on the image tag rendered to the DOM.
 
 **Examples**
@@ -1680,17 +1699,9 @@ transformations=["my-transformation"]
 
 [Learn more about Strict Transformations](https://cloudinary.com/documentation/control_access_to_media#strict_transformations) on the Cloudinary docs.
 
-#### `transformations`
+#### `transformations` (deprecated)
 
-Applies named transformations to the image.
-
-**Examples**
-
-```jsx copy
-transformations={['my-transformation']}
-```
-
-[Learn more about Named Transformations](https://cloudinary.com/documentation/image_transformations#named_transformations) on the Cloudinary docs.
+**Use namedTransformations instead**
 
 
 ### Optimization

docs/src/docs/components/clduploadbutton/examples.md

@@ -5,7 +5,7 @@ order: 3
 <script>
     import Callout from '$lib/components/Callout.svelte'
     import { CldUploadButton } from 'svelte-cloudinary'
-	import { env } from '$env/dynamic/public';
+	import { PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET, PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET } from '$env/static/public';
     let info
     let infoSecure
 </script>
@@ -26,7 +26,7 @@ class="cldbutton"
     info = result?.info;
     widget.close();
   }}
-  uploadPreset={env.PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
+  uploadPreset={PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
 />
 
 <p><strong>URL:</strong> { info?.secure_url || 'Upload to see example result.' }</p>
@@ -51,7 +51,7 @@ class="cldbutton"
     infoSecure = result?.info;
     widget.close();
   }}
-  uploadPreset={env.PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET}
+  uploadPreset={PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET}
 />
 
 <p><strong>URL:</strong> { infoSecure?.secure_url || 'Upload to see example result.' }</p>

docs/src/docs/components/clduploadbutton/usage.md

@@ -6,7 +6,7 @@ order: 1
 <script>
     import Callout from '$lib/components/Callout.svelte'
     import { CldUploadButton } from 'svelte-cloudinary'
-	import { env } from '$env/dynamic/public';
+	import {PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET } from '$env/static/public';
     let info
 </script>
 
@@ -33,7 +33,7 @@ class="cldbutton"
     info = result?.info
     widget.close();
   }}
-  uploadPreset={env.PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
+  uploadPreset={PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
 />
 <p>URL: { info?.secure_url }</p>
 

docs/src/docs/components/clduploadwidget/examples.md

@@ -6,7 +6,7 @@ order: 3
     import Callout from '$lib/components/Callout.svelte'
     import { CldUploadWidget } from 'svelte-cloudinary'
 	import ImageGrid from '$lib/components/ImageGrid.svelte';
-	import { env } from '$env/dynamic/public';
+	import { PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET, PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET } from '$env/static/public';
     let info
     let infoSecure
     let infoSecure2
@@ -24,7 +24,7 @@ order: 3
     info = result?.info
     widget.close();
   }}
-  uploadPreset={env.PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
+  uploadPreset={PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
 >
   <button on:click|preventDefault={open} class="cldbutton">
     Unsigned Upload
@@ -39,7 +39,7 @@ uploadPreset="svelte-cloudinary-unsigned"
 ```
 <li>
 
-<CldUploadWidget uploadPreset={env.PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET} let:open let:isLoading
+<CldUploadWidget uploadPreset={PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET} let:open let:isLoading
     signatureEndpoint="/api/sign-cloudinary-params"
       onUpload={(result, widget) => {
           infoSecure = result?.info
@@ -57,7 +57,7 @@ signatureEndpoint="/api/sign-cloudinary-params"
 ```
 </li>
 <li>
-<CldUploadWidget uploadPreset={env.PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET} let:open let:isLoading options={{sources: ['local']}}
+<CldUploadWidget uploadPreset={PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET} let:open let:isLoading options={{sources: ['local']}}
     signatureEndpoint="/api/sign-cloudinary-params"
       onUpload={(result, widget) => {
           infoSecure2 = result?.info

docs/src/docs/components/clduploadwidget/signed-uploads.md

@@ -7,9 +7,6 @@ order: 4
     import CodeBlock from '$lib/components/CodeBlock.svelte'
     import Callout from '$lib/components/Callout.svelte'
     import { CldUploadWidget } from 'svelte-cloudinary'
-	import { env } from '$env/dynamic/public';
-    let infoUpload
-	let infoUploadSecure
 
 </script>
 # Signing CldUploadWidget Uploads

docs/src/docs/components/clduploadwidget/usage.md

@@ -6,7 +6,7 @@ order: 1
 <script>
     import Callout from '$lib/components/Callout.svelte'
     import { CldUploadWidget } from 'svelte-cloudinary'
-    import { env } from '$env/dynamic/public';
+    import { PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET, PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET } from '$env/static/public';
     import Video from '$lib/components/Video.svelte'
     let infoUpload
     let infoUploadSecure
@@ -57,7 +57,7 @@ Use the following to generate an unsigned upload widget:
     infoUpload = result?.info
     widget.close();
   }}
-  uploadPreset={env.PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
+  uploadPreset={PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
 >
   <button on:click|preventDefault={open} class="cldbutton">
     Unsigned Upload
@@ -118,7 +118,7 @@ To use the above, create a Node-based API route, add the snippet, and use that e
 See a full example of an API endpoint used with the Svelte Cloudinary docs: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/docs/src/routes/api/sign-cloudinary-params/+server.ts
 
 <div class="mt-6">
-    <CldUploadWidget uploadPreset={env.PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET} let:open let:isLoading
+    <CldUploadWidget uploadPreset={PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET} let:open let:isLoading
         signatureEndpoint="/api/sign-cloudinary-params"
           onUpload={(result, widget) => {
               infoUploadSecure = result?.info

docs/src/docs/components/cldvideoplayer/transformations.md

@@ -49,7 +49,7 @@ This will apply a width and height of 500 as a transformation. It will set a cro
 </div>
 
 <Callout emoji={false}>
-  Depending on the transformation, you may need to wait for the video to process if applying the transformations on-the-fly. To help avoid wait times, you could [eagerly load transformations](https://cloudinary.com/documentation/transformations_on_upload#eager_transformations) on upload.
+  Depending on the transformation, you may need to wait for the video to process if applying the transformations on-the-fly. To help avoid wait times, you could <a href="https://cloudinary.com/documentation/transformations_on_upload#eager_transformations">eagerly load transformations</a> on upload.
 </Callout>
 
 If you instead wanted to add a watermark to the video, you could use overlays in the transformation:
@@ -77,14 +77,13 @@ When you play the video, you'll notice the Space Jelly logo on the bottom right
   height="1080"
   src={`videos/mountain-stars`}
   transformation={{
-    overlay: `assets:space-jelly-cosmo-helmet`,
+    overlay: `videos:space-jelly-cosmo-helmet`,
     width: 150,
     gravity: "south_east",
     x: 50,
     y: 50,
     opacity: 80
   }}
 />
-</div>
 
 For more information and examples of using the `transformation` prop, check out the [Cloudinary Video Player documentation](https://cloudinary.com/documentation/video_manipulation_and_delivery).

docs/src/docs/guides/uploading-images-and-videos.md

@@ -6,7 +6,7 @@ order: 9
 
 import Callout from '$lib/components/Callout.svelte'
 import { CldUploadButton, CldImage } from 'svelte-cloudinary'
-import { env } from '$env/dynamic/public';
+import { PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET } from '$env/static/public';
 
 let resource
 
@@ -26,7 +26,7 @@ class="cldbutton"
     resource = result?.info;
     widget.close();
   }}
-  uploadPreset={env.PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
+  uploadPreset={PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
 />
 {#if resource?.resource_type === 'image'}
   <CldImage width={resource.width} height={resource.height} src={resource?.public_id} alt="Uploaded Asset" />

docs/src/routes/api/sign-cloudinary-params/+server.ts

@@ -14,7 +14,7 @@ export const POST = (async ({ request }) => {
 		return json({ signature })
 	} catch (e) {
 		console.error(e)
-		throw error(500, (e as Error).message)
+		error(500, (e as Error).message);
 	}
 }) satisfies RequestHandler;
 

docs/svelte.config.js

@@ -2,7 +2,7 @@ import { mdsvex } from 'mdsvex';
 import mdsvexConfig from './mdsvex.config.js';
 import preprocess from 'svelte-preprocess';
 import adapter from '@sveltejs/adapter-vercel';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { sass } from 'svelte-preprocess-sass';
 
 /** @type {import('@sveltejs/kit').Config} */