@gradio/imageslider 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @gradio/imageslider
 
+## 0.7.0
+
+### Features
+
+- [#13543](https://github.com/gradio-app/gradio/pull/13543) [`0533483`](https://github.com/gradio-app/gradio/commit/0533483bccdee38f334a598f18297e8c02966343) - Migrate Image components to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.15.1
+- @gradio/icons@0.16.0
+- @gradio/atoms@0.26.0
+- @gradio/client@2.3.1
+- @gradio/upload@0.18.1
+
 ## 0.6.0
 
 ### Features

package/Example.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
-	export let value: [string, string];
-	export let samples_dir: string;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	let {
+		value,
+		samples_dir,
+		type,
+		selected = false
+	}: {
+		value: [string, string];
+		samples_dir: string;
+		type: "gallery" | "table";
+		selected?: boolean;
+	} = $props();
 </script>
 
 <!-- TODO: fix -->

package/ImageSlider.test.ts

@@ -110,6 +110,21 @@ describe("ImageSlider", () => {
 		expect(btns[0]).toBeVisible();
 	});
 
+	test("renders upload area when value is undefined", async () => {
+		const { getAllByRole, get_data } = await render(ImageSlider, {
+			...default_props,
+			interactive: true,
+			value: undefined,
+			client: mock_client()
+		});
+
+		const btns = getAllByRole("button", {
+			name: "Click to upload or drop files"
+		});
+		expect(btns[0]).toBeVisible();
+		expect((await get_data()).value).toEqual([null, null]);
+	});
+
 	test("renders both images when value has two images", async () => {
 		const { getAllByTestId } = await render(ImageSlider, {
 			...default_props,

package/Index.svelte

@@ -33,7 +33,7 @@
 	let fullscreen = $state(false);
 	let dragging = $state(false);
 	let active_source: sources = $state(null);
-	let upload_component: ImageUploader;
+	let value = $state(gradio.props.value ?? [null, null]);
 
 	let normalised_slider_position = $derived(
 		Math.max(0, Math.min(100, gradio.props.slider_position)) / 100
@@ -41,32 +41,16 @@
 
 	gradio.watch_for_change();
 
-	const handle_drag_event = (event: Event): void => {
-		const drag_event = event as DragEvent;
-		drag_event.preventDefault();
-		drag_event.stopPropagation();
-		if (drag_event.type === "dragenter" || drag_event.type === "dragover") {
-			dragging = true;
-		} else if (drag_event.type === "dragleave") {
-			dragging = false;
-		}
-	};
-
-	const handle_drop = (event: Event): void => {
-		if (gradio.shared.interactive) {
-			const drop_event = event as DragEvent;
-			drop_event.preventDefault();
-			drop_event.stopPropagation();
-			dragging = false;
+	$effect(() => {
+		value = gradio.props.value ?? [null, null];
+	});
 
-			if (upload_component) {
-				upload_component.loadFilesFromDrop(drop_event);
-			}
-		}
-	};
+	$effect(() => {
+		gradio.props.value = value;
+	});
 </script>
 
-{#if !gradio.shared.interactive || (gradio.props.value?.[1] && gradio.props.value?.[0])}
+{#if !gradio.shared.interactive || (value?.[1] && value?.[0])}
 	<Block
 		visible={gradio.shared.visible}
 		variant={"solid"}
@@ -88,19 +72,16 @@
 			{...gradio.shared.loading_status}
 		/>
 		<StaticImage
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => gradio.dispatch("error", detail)}
-			on:clear={() => {
+			onclear={() => {
 				gradio.dispatch("clear");
 				gradio.dispatch("input");
 			}}
-			on:fullscreen={({ detail }) => {
+			onfullscreen={(detail) => {
 				fullscreen = detail;
 			}}
 			{fullscreen}
 			interactive={gradio.shared.interactive}
-			bind:value={gradio.props.value}
+			bind:value
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			show_download_button={gradio.props.buttons.some(
@@ -122,7 +103,7 @@
 {:else}
 	<Block
 		visible={gradio.shared.visible}
-		variant={gradio.props.value === null ? "dashed" : "solid"}
+		variant={value?.[0] || value?.[1] ? "solid" : "dashed"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
 		elem_id={gradio.shared.elem_id}
@@ -133,10 +114,6 @@
 		container={gradio.shared.container}
 		scale={gradio.shared.scale}
 		min_width={gradio.shared.min_width}
-		on:dragenter={handle_drag_event}
-		on:dragleave={handle_drag_event}
-		on:dragover={handle_drag_event}
-		on:drop={handle_drop}
 	>
 		<StatusTracker
 			autoscroll={gradio.shared.autoscroll}
@@ -148,28 +125,18 @@
 
 		<ImageUploader
 			bind:upload_promise
-			bind:this={upload_component}
-			bind:value={gradio.props.value}
+			bind:value
 			bind:dragging
 			root={gradio.shared.root}
-			on:edit={() => gradio.dispatch("edit")}
-			on:clear={() => {
+			onclear={() => {
 				gradio.dispatch("clear");
 				gradio.dispatch("input");
 			}}
-			on:drag={({ detail }) => (dragging = detail)}
-			on:upload={() => {
+			ondrag={(detail) => (dragging = detail)}
+			onupload={() => {
 				gradio.dispatch("upload");
 				gradio.dispatch("input");
 			}}
-			on:error={({ detail }) => {
-				if (gradio.shared.loading_status)
-					gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", detail);
-			}}
-			on:close_stream={() => {
-				gradio.dispatch("close_stream", "stream");
-			}}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			upload_count={gradio.props.upload_count}

package/dist/Example.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
-	export let value: [string, string];
-	export let samples_dir: string;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	let {
+		value,
+		samples_dir,
+		type,
+		selected = false
+	}: {
+		value: [string, string];
+		samples_dir: string;
+		type: "gallery" | "table";
+		selected?: boolean;
+	} = $props();
 </script>
 
 <!-- TODO: fix -->

package/dist/Example.svelte.d.ts

@@ -1,23 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Example: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: [string, string];
     samples_dir: string;
     type: "gallery" | "table";
     selected?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Example = InstanceType<typeof Example>;
+};
+declare const Example: import("svelte").Component<$$ComponentProps, {}, "">;
+type Example = ReturnType<typeof Example>;
 export default Example;

package/dist/Index.svelte

@@ -33,7 +33,7 @@
 	let fullscreen = $state(false);
 	let dragging = $state(false);
 	let active_source: sources = $state(null);
-	let upload_component: ImageUploader;
+	let value = $state(gradio.props.value ?? [null, null]);
 
 	let normalised_slider_position = $derived(
 		Math.max(0, Math.min(100, gradio.props.slider_position)) / 100
@@ -41,32 +41,16 @@
 
 	gradio.watch_for_change();
 
-	const handle_drag_event = (event: Event): void => {
-		const drag_event = event as DragEvent;
-		drag_event.preventDefault();
-		drag_event.stopPropagation();
-		if (drag_event.type === "dragenter" || drag_event.type === "dragover") {
-			dragging = true;
-		} else if (drag_event.type === "dragleave") {
-			dragging = false;
-		}
-	};
-
-	const handle_drop = (event: Event): void => {
-		if (gradio.shared.interactive) {
-			const drop_event = event as DragEvent;
-			drop_event.preventDefault();
-			drop_event.stopPropagation();
-			dragging = false;
+	$effect(() => {
+		value = gradio.props.value ?? [null, null];
+	});
 
-			if (upload_component) {
-				upload_component.loadFilesFromDrop(drop_event);
-			}
-		}
-	};
+	$effect(() => {
+		gradio.props.value = value;
+	});
 </script>
 
-{#if !gradio.shared.interactive || (gradio.props.value?.[1] && gradio.props.value?.[0])}
+{#if !gradio.shared.interactive || (value?.[1] && value?.[0])}
 	<Block
 		visible={gradio.shared.visible}
 		variant={"solid"}
@@ -88,19 +72,16 @@
 			{...gradio.shared.loading_status}
 		/>
 		<StaticImage
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => gradio.dispatch("error", detail)}
-			on:clear={() => {
+			onclear={() => {
 				gradio.dispatch("clear");
 				gradio.dispatch("input");
 			}}
-			on:fullscreen={({ detail }) => {
+			onfullscreen={(detail) => {
 				fullscreen = detail;
 			}}
 			{fullscreen}
 			interactive={gradio.shared.interactive}
-			bind:value={gradio.props.value}
+			bind:value
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			show_download_button={gradio.props.buttons.some(
@@ -122,7 +103,7 @@
 {:else}
 	<Block
 		visible={gradio.shared.visible}
-		variant={gradio.props.value === null ? "dashed" : "solid"}
+		variant={value?.[0] || value?.[1] ? "solid" : "dashed"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
 		elem_id={gradio.shared.elem_id}
@@ -133,10 +114,6 @@
 		container={gradio.shared.container}
 		scale={gradio.shared.scale}
 		min_width={gradio.shared.min_width}
-		on:dragenter={handle_drag_event}
-		on:dragleave={handle_drag_event}
-		on:dragover={handle_drag_event}
-		on:drop={handle_drop}
 	>
 		<StatusTracker
 			autoscroll={gradio.shared.autoscroll}
@@ -148,28 +125,18 @@
 
 		<ImageUploader
 			bind:upload_promise
-			bind:this={upload_component}
-			bind:value={gradio.props.value}
+			bind:value
 			bind:dragging
 			root={gradio.shared.root}
-			on:edit={() => gradio.dispatch("edit")}
-			on:clear={() => {
+			onclear={() => {
 				gradio.dispatch("clear");
 				gradio.dispatch("input");
 			}}
-			on:drag={({ detail }) => (dragging = detail)}
-			on:upload={() => {
+			ondrag={(detail) => (dragging = detail)}
+			onupload={() => {
 				gradio.dispatch("upload");
 				gradio.dispatch("input");
 			}}
-			on:error={({ detail }) => {
-				if (gradio.shared.loading_status)
-					gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", detail);
-			}}
-			on:close_stream={() => {
-				gradio.dispatch("close_stream", "stream");
-			}}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			upload_count={gradio.props.upload_count}

package/dist/shared/ClearImage.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { IconButton } from "@gradio/atoms";
 	import { Clear } from "@gradio/icons";
 
-	const dispatch = createEventDispatcher();
+	let { onremove_image }: { onremove_image?: () => void } = $props();
 </script>
 
 <div>
@@ -11,7 +10,7 @@
 		Icon={Clear}
 		label="Remove Image"
 		onclick={(event) => {
-			dispatch("remove_image");
+			onremove_image?.();
 			event.stopPropagation();
 		}}
 	/>

package/dist/shared/ClearImage.svelte.d.ts

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ClearImage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    remove_image: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ClearImage = InstanceType<typeof ClearImage>;
+type $$ComponentProps = {
+    onremove_image?: () => void;
+};
+declare const ClearImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ClearImage = ReturnType<typeof ClearImage>;
 export default ClearImage;

package/dist/shared/Image.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import Slider from "./Slider.svelte";
-	import { createEventDispatcher, tick } from "svelte";
+	import { tick, type Snippet } from "svelte";
 	import { BlockLabel, Empty, IconButton, DownloadLink } from "@gradio/atoms";
 	import { Download } from "@gradio/icons";
 	import { Image } from "@gradio/icons";
-	import { type SelectData, type I18nFormatter } from "@gradio/utils";
+	import { type I18nFormatter } from "@gradio/utils";
 	import ClearImage from "./ClearImage.svelte";
 	import ImageEl from "./ImageEl.svelte";
 
@@ -12,65 +12,87 @@
 
 	import { type FileData, type Client } from "@gradio/client";
 
-	export let value: [FileData | null, FileData | null];
+	let {
+		value = $bindable<[FileData | null, FileData | null]>([null, null]),
+		label = undefined,
+		show_label,
+		root,
+		position = $bindable(0.5),
+		upload_count = 2,
+		show_download_button = true,
+		slider_color,
+		upload,
+		stream_handler,
+		max_file_size = null,
+		i18n,
+		max_height,
+		upload_promise = $bindable(),
+		dragging = $bindable(false),
+		onclear,
+		ondrag,
+		onupload,
+		children
+	}: {
+		value?: [FileData | null, FileData | null];
+		label?: string;
+		show_label: boolean;
+		root: string;
+		position?: number;
+		upload_count?: number;
+		show_download_button?: boolean;
+		slider_color: string;
+		upload: Client["upload"];
+		stream_handler: Client["stream"];
+		max_file_size?: number | null;
+		i18n: I18nFormatter;
+		max_height: number;
+		upload_promise?: Promise<any>;
+		dragging?: boolean;
+		onclear?: () => void;
+		ondrag?: (dragging: boolean) => void;
+		onupload?: (value: [FileData | null, FileData | null]) => void;
+		children?: Snippet;
+	} = $props();
 
-	export let label: string | undefined = undefined;
-	export let show_label: boolean;
-	export let root: string;
-	export let position: number;
-	export let upload_count = 2;
-
-	export let show_download_button = true;
-	export let slider_color: string;
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let max_file_size: number | null = null;
-	export let i18n: I18nFormatter;
-	export let max_height: number;
-	export let upload_promise: Promise<any> | null = null;
-
-	let value_: [FileData | null, FileData | null] = value || [null, null];
+	let value_ = $state<[FileData | null, FileData | null]>(
+		value || [null, null]
+	);
 
 	let img: HTMLImageElement;
-	let el_width: number;
-	let el_height: number;
+	let el_width = $state(0);
+	let el_height = $state(0);
 
-	async function handle_upload(detail: FileData[], n: number): Promise<void> {
+	async function handle_upload(
+		detail: Blob | File | FileData | FileData[],
+		n: number
+	): Promise<void> {
+		const file_data = Array.isArray(detail) ? detail : [detail as FileData];
 		const new_value = [value[0], value[1]] as [
 			FileData | null,
 			FileData | null
 		];
-		if (detail.length > 1) {
-			new_value[n] = detail[0];
+		if (file_data.length > 1) {
+			new_value[n] = file_data[0];
 		} else {
-			new_value[n] = detail[n];
+			new_value[n] = file_data[n];
 		}
 		value = new_value;
 		await tick();
 
-		dispatch("upload", new_value);
+		onupload?.(new_value);
 	}
 
 	let old_value = "";
 
-	$: if (JSON.stringify(value) !== old_value) {
+	$effect(() => {
+		if (JSON.stringify(value) === old_value) return;
 		old_value = JSON.stringify(value);
 		value_ = value;
-	}
-
-	const dispatch = createEventDispatcher<{
-		change: string | null;
-		stream: string | null;
-		edit: undefined;
-		clear: undefined;
-		drag: boolean;
-		upload: [FileData | null, FileData | null];
-		select: SelectData;
-	}>();
-
-	export let dragging = false;
+	});
 
-	$: dispatch("drag", dragging);
+	$effect(() => {
+		ondrag?.(dragging);
+	});
 </script>
 
 <BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
@@ -83,10 +105,10 @@
 >
 	{#if value?.[0]?.url || value?.[1]?.url}
 		<ClearImage
-			on:remove_image={() => {
+			onremove_image={() => {
 				position = 0.5;
 				value = [null, null];
-				dispatch("clear");
+				onclear?.();
 			}}
 		/>
 	{/if}
@@ -126,7 +148,7 @@
 						{stream_handler}
 						{max_file_size}
 					>
-						<slot />
+						{#if children}{@render children()}{/if}
 					</Upload>
 				</div>
 			{:else}
@@ -152,7 +174,7 @@
 					{stream_handler}
 					{max_file_size}
 				>
-					<slot />
+					{#if children}{@render children()}{/if}
 				</Upload>
 			{:else if !value_?.[1] && upload_count === 1}
 				<div

package/dist/shared/Image.svelte.d.ts

@@ -1,30 +1,13 @@
+import { type Snippet } from "svelte";
 import { Image } from "@gradio/icons";
-import { type SelectData, type I18nFormatter } from "@gradio/utils";
+import { type I18nFormatter } from "@gradio/utils";
 import { type FileData, type Client } from "@gradio/client";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Image: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    value: [FileData | null, FileData | null];
-    label?: string | undefined;
+type $$ComponentProps = {
+    value?: [FileData | null, FileData | null];
+    label?: string;
     show_label: boolean;
     root: string;
-    position: number;
+    position?: number;
     upload_count?: number;
     show_download_button?: boolean;
     slider_color: string;
@@ -33,22 +16,13 @@ declare const Image: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWith
     max_file_size?: number | null;
     i18n: I18nFormatter;
     max_height: number;
-    upload_promise?: Promise<any> | null;
+    upload_promise?: Promise<any>;
     dragging?: boolean;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<string | null>;
-    stream: CustomEvent<string | null>;
-    edit: CustomEvent<undefined>;
-    clear: CustomEvent<undefined>;
-    drag: CustomEvent<boolean>;
-    upload: CustomEvent<[FileData | null, FileData | null]>;
-    select: CustomEvent<SelectData>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Image = InstanceType<typeof Image>;
+    onclear?: () => void;
+    ondrag?: (dragging: boolean) => void;
+    onupload?: (value: [FileData | null, FileData | null]) => void;
+    children?: Snippet;
+};
+declare const Image: import("svelte").Component<$$ComponentProps, {}, "value" | "position" | "dragging" | "upload_promise">;
+type Image = ReturnType<typeof Image>;
 export default Image;