fix: patch update, generate CldImageProps.svelte.d.ts

Author: matiasfha

pnpm-lock.yaml

@@ -53,10 +53,10 @@
 		"svelte-preprocess": "^5.0.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
+		"unpic": "3.6.1",
 		"vite": "^4.3.0",
 		"vitest": "^0.25.3"
 	},
-	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {

svelte-cloudinary/package.json

@@ -6,3 +6,4 @@ export type { GetCldOgImageUrl } from '$lib/helpers/getCldOgImageUrl.ts';
 
 export type { CloudinaryVideoPlayer, CloudinaryVideoPlayerOptions, CloudinaryVideoPlayerOptionsColors, CloudinaryVideoPlayerOptionsLogo } from './types/player.ts';
 
+export { default as CldImage } from '$lib/components/CldImage.svelte';

svelte-cloudinary/src/index.ts

@@ -1,18 +1,8 @@
-<script lang="ts" context="module">
-	// This types still comes wrong
-	// import type { ImageProps } from '@unpic/svelte'
-	// But this is the same used by the @unpic/svelte package
-	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';
-	export type CldImageProps = ImageOptions &
-		ImageProps & {
-			layout: ImageProps['layout'];
-		};
-</script>
-
 <script lang="ts">
+	import { CldImageProps } from '../CldImageProps.ts'
+	// This unused import is a hack to get around a bug in svelte2tsx
+	import type { UrlTransformer, ImageCdn } from "unpic";
+	import type { ImageOptions } from '@cloudinary-util/url-loader';
 	import { getTransformations } from '@cloudinary-util/util';
 	import { transformationPlugins } from '@cloudinary-util/url-loader';
 	import { Image } from '@unpic/svelte';

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

@@ -0,0 +1,11 @@
+// This types still comes wrong
+// import type { ImageProps } from '@unpic/svelte'
+// But this is the same used by the @unpic/svelte package
+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';
+export type CldImageProps = ImageOptions &
+  ImageProps & {
+    layout: ImageProps['layout'];
+  };

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getCldImageUrl } from '$lib/helpers/getCldImageUrl.js';
 	import type { ImageOptions } from '@cloudinary-util/url-loader';
-	import type { CldImageProps } from './CldImage.svelte';
+	import type { CldImageProps } from './CldImageTypes.ts';
 	import { OG_IMAGE_WIDTH, OG_IMAGE_WIDTH_RESIZE, OG_IMAGE_HEIGHT } from '$lib/constants/sizes.js';
 
 	const TWITTER_CARD = 'summary_large_image';

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

@@ -0,0 +1,22 @@
+// Reexport your entry components here
+import CldImage from './components/CldImage.svelte'
+export { CldImage }
+export type { CldImageProps } from "./types.ts";
+
+import CldOgImage from './components/CldOgImage.svelte'
+export { CldOgImage }
+
+import CldUploadWidget from './components/CldUploadWidget.svelte'
+export { CldUploadWidget}
+
+import CldUploadButton from './components/CldUploadButton.svelte'
+export { CldUploadButton}
+
+export { getCldImageUrl } from '$lib/helpers/getCldImageUrl.ts';
+export type { GetCldImageUrl, GetCldImageUrlOptions, GetCldImageUrlConfig, GetCldImageUrlAnalytics } from '$lib/helpers/getCldImageUrl.ts';
+
+export { getCldOgImageUrl } from '$lib/helpers/getCldOgImageUrl.ts';
+export type { GetCldOgImageUrl } from '$lib/helpers/getCldOgImageUrl.ts';
+
+export type { CloudinaryVideoPlayer, CloudinaryVideoPlayerOptions, CloudinaryVideoPlayerOptionsColors, CloudinaryVideoPlayerOptionsLogo } from './types/player.ts';
+