Merge pull request #19 from cloudinary-community/beta-fix-types

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

@@ -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 type { CldImageProps } from './CldImageTypes.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/index.ts

@@ -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/CldImage.svelte

@@ -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/CldImageTypes.ts

@@ -0,0 +1,22 @@
+// Reexport your entry components here
+import CldImage from './components/CldImage.svelte'
+export { CldImage }
+export type { CldImageProps } from "./components/CldImageTypes.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.js';
+export type { GetCldImageUrl, GetCldImageUrlOptions, GetCldImageUrlConfig, GetCldImageUrlAnalytics } from '$lib/helpers/getCldImageUrl.ts';
+
+export { getCldOgImageUrl } from '$lib/helpers/getCldOgImageUrl.js';
+export type { GetCldOgImageUrl } from '$lib/helpers/getCldOgImageUrl.ts';
+
+export type { CloudinaryVideoPlayer, CloudinaryVideoPlayerOptions, CloudinaryVideoPlayerOptionsColors, CloudinaryVideoPlayerOptionsLogo } from '../types/player.ts';
+

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

@@ -3,8 +3,8 @@
 </script>
 
 <CldImage
-	width="1200"
-	height="1200"
+	width={1200}
+	height={1200}
 	src="images/woman-headphones"
 	crop="thumb"
 	removeBackground
@@ -20,7 +20,6 @@
 	src="images/woman-headphones"
 	sizes="50vw"
 	crop="thumb"
-	layout="constrained"
 	tint="40:253f8c"
 	gravity="faces"
 	underlay="images/city-skyline"

svelte-cloudinary/src/lib/index.js

@@ -0,0 +1,25 @@
+export interface CloudinaryVideoPlayer {
+    on: Function;
+}
+export interface CloudinaryVideoPlayerOptions {
+    autoplayMode?: string;
+    cloud_name?: string;
+    colors?: CloudinaryVideoPlayerOptionsColors;
+    controls?: boolean;
+    fontFace?: string;
+    loop?: boolean;
+    muted?: boolean;
+    publicId: string;
+    secure?: boolean;
+    transformation?: Array<object> | object;
+}
+export interface CloudinaryVideoPlayerOptionsColors {
+    accent?: string;
+    base?: string;
+    text?: string;
+}
+export interface CloudinaryVideoPlayerOptionsLogo {
+    logoImageUrl?: string;
+    logoOnclickUrl?: string;
+    showLogo?: boolean;
+}