@gradio/dataset 0.5.2 → 0.5.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @gradio/dataset
 
+## 0.5.3
+
+### Fixes
+
+- [#12818](https://github.com/gradio-app/gradio/pull/12818) [`6594c9c`](https://github.com/gradio-app/gradio/commit/6594c9c5b2829771f79dc04c6fafb6da72031b90) - Migrate Dataset to Svelte 5.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/atoms@0.21.0
+- @gradio/client@2.0.4
+- @gradio/upload@0.17.5
+- @gradio/textbox@0.13.3
+
 ## 0.5.2
 
 ### Fixes

package/Dataset.svelte

@@ -1,91 +1,105 @@
 <script lang="ts">
-	import { Block } from "@gradio/atoms";
 	import type { SvelteComponent, ComponentType } from "svelte";
-	import type { Gradio, SelectData } from "@gradio/utils";
+	import type { SelectData } from "@gradio/utils";
 	import { BaseExample } from "@gradio/textbox";
 	import type { load_component as load_component_type } from "@gradio/utils";
 
-	export let components: string[];
-	export let component_props: Record<string, any>[];
-	let component_map: Map<
-		string,
-		Promise<{
-			default: ComponentType<SvelteComponent>;
-		}>
-	> = new Map();
-	export let load_component: load_component_type;
-	export let headers: string[];
-	export let samples: any[][] | null = null;
-	let old_samples: any[][] | null = null;
-	export let sample_labels: string[] | null = null;
-	export let value: number | null = null;
-	export let root: string;
-	export let proxy_url: null | string;
-	export let samples_per_page = 10;
-	export let onclick: (data: SelectData) => void;
-	export let onselect: (data: SelectData) => void;
-
-	export let layout: "gallery" | "table" | null = null;
+	interface Props {
+		components: string[];
+		component_props: Record<string, any>[];
+		load_component: load_component_type;
+		headers: string[];
+		samples: any[][] | null;
+		sample_labels?: string[] | null;
+		value?: number | null;
+		root: string;
+		proxy_url: null | string;
+		samples_per_page?: number;
+		onclick: (data: SelectData) => void;
+		onselect: (data: SelectData) => void;
+		layout?: "gallery" | "table" | null;
+	}
+
+	let {
+		components,
+		component_props,
+		load_component,
+		headers,
+		samples,
+		sample_labels = null,
+		value = $bindable(null),
+		root,
+		proxy_url,
+		samples_per_page = 10,
+		onclick,
+		onselect,
+		layout = null
+	}: Props = $props();
 
 	// Although the `samples_dir` prop is not used in any of the core Gradio component, it is kept for backward compatibility
 	// with any custom components created with gradio<=4.20.0
-	let samples_dir: string = proxy_url
-		? `/proxy=${proxy_url}file=`
-		: `${root}/file=`;
-	let page = 0;
+	let samples_dir: string = $derived(
+		proxy_url ? `/proxy=${proxy_url}file=` : `${root}/file=`
+	);
 
-	$: gallery =
-		(components.length < 2 || sample_labels !== null) && layout !== "table";
-	let paginate = samples ? samples.length > samples_per_page : false;
+	let current_hover = $state(-1);
 
-	let selected_samples: any[][];
-	let page_count: number;
-	let visible_pages: number[] = [];
+	let gallery = $derived(
+		(components.length < 2 || sample_labels !== null) && layout !== "table"
+	);
 
-	let current_hover = -1;
+	let effective_samples = $derived.by(() => {
+		if (sample_labels) {
+			return sample_labels.map((e) => [e]);
+		}
+		return samples ?? [];
+	});
 
-	function handle_mouseenter(i: number): void {
-		current_hover = i;
-	}
+	// page resets to 0 whenever effective_samples changes,
+	// but can still be overwritten by user clicks
+	let page = $derived.by(() => {
+		effective_samples;
+		return 0;
+	});
 
-	function handle_mouseleave(): void {
-		current_hover = -1;
-	}
+	let paginate = $derived(effective_samples.length > samples_per_page);
 
-	$: {
-		if (sample_labels) {
-			samples = sample_labels.map((e) => [e]);
-		} else if (!samples) {
-			samples = [];
-		}
-		if (JSON.stringify(samples) !== JSON.stringify(old_samples)) {
-			page = 0;
-			old_samples = samples;
-		}
-		paginate = samples.length > samples_per_page;
+	let selected_samples = $derived.by(() => {
 		if (paginate) {
-			visible_pages = [];
-			selected_samples = samples.slice(
+			return effective_samples.slice(
 				page * samples_per_page,
 				(page + 1) * samples_per_page
 			);
-			page_count = Math.ceil(samples.length / samples_per_page);
-			[0, page, page_count - 1].forEach((anchor) => {
-				for (let i = anchor - 2; i <= anchor + 2; i++) {
-					if (i >= 0 && i < page_count && !visible_pages.includes(i)) {
-						if (
-							visible_pages.length > 0 &&
-							i - visible_pages[visible_pages.length - 1] > 1
-						) {
-							visible_pages.push(-1);
-						}
-						visible_pages.push(i);
+		}
+		return effective_samples.slice();
+	});
+
+	let page_count = $derived(
+		Math.ceil(effective_samples.length / samples_per_page)
+	);
+
+	let visible_pages = $derived.by(() => {
+		if (!paginate) return [];
+		let pages: number[] = [];
+		[0, page, page_count - 1].forEach((anchor) => {
+			for (let i = anchor - 2; i <= anchor + 2; i++) {
+				if (i >= 0 && i < page_count && !pages.includes(i)) {
+					if (pages.length > 0 && i - pages[pages.length - 1] > 1) {
+						pages.push(-1);
 					}
+					pages.push(i);
 				}
-			});
-		} else {
-			selected_samples = samples.slice();
-		}
+			}
+		});
+		return pages;
+	});
+
+	function handle_mouseenter(i: number): void {
+		current_hover = i;
+	}
+
+	function handle_mouseleave(): void {
+		current_hover = -1;
 	}
 
 	let component_meta: {
@@ -115,11 +129,9 @@
 		);
 	}
 
-	// Need to striginfiy the samples otherwise get_component_meta will trigger infinitely
+	// Need to stringify the samples otherwise get_component_meta will trigger infinitely
 	// Saw this when rendering examples in a gr.render block
-	$: selected_samples_json = JSON.stringify(selected_samples || []);
-
-	// $: get_component_meta(selected_samples_json);
+	let selected_samples_json = $derived(JSON.stringify(selected_samples || []));
 </script>
 
 {#await get_component_meta(selected_samples_json) then _}
@@ -129,13 +141,13 @@
 				{#if sample_row[0] != null}
 					<button
 						class="gallery-item"
-						on:click={() => {
+						onclick={() => {
 							value = i + page * samples_per_page;
 							onclick({ index: value, value: sample_row });
 							onselect({ index: value, value: sample_row });
 						}}
-						on:mouseenter={() => handle_mouseenter(i)}
-						on:mouseleave={() => handle_mouseleave()}
+						onmouseenter={() => handle_mouseenter(i)}
+						onmouseleave={() => handle_mouseleave()}
 					>
 						{#if sample_labels}
 							<BaseExample
@@ -179,7 +191,7 @@
 					{#each component_meta as sample_row, i}
 						<tr
 							class="tr-body"
-							on:click={() => {
+							onclick={() => {
 								value = i + page * samples_per_page;
 								onclick({ index: value, value: sample_row });
 								onselect({
@@ -187,8 +199,8 @@
 									value: selected_samples[i]
 								});
 							}}
-							on:mouseenter={() => handle_mouseenter(i)}
-							on:mouseleave={() => handle_mouseleave()}
+							onmouseenter={() => handle_mouseenter(i)}
+							onmouseleave={() => handle_mouseleave()}
 						>
 							{#each sample_row as { value, component }, j}
 								{@const component_name = components[j]}
@@ -230,7 +242,7 @@
 				{:else}
 					<button
 						class:current-page={page === visible_page}
-						on:click={() => (page = visible_page)}
+						onclick={() => (page = visible_page)}
 					>
 						{visible_page + 1}
 					</button>

package/dist/Dataset.svelte

@@ -1,91 +1,105 @@
 <script lang="ts">
-	import { Block } from "@gradio/atoms";
 	import type { SvelteComponent, ComponentType } from "svelte";
-	import type { Gradio, SelectData } from "@gradio/utils";
+	import type { SelectData } from "@gradio/utils";
 	import { BaseExample } from "@gradio/textbox";
 	import type { load_component as load_component_type } from "@gradio/utils";
 
-	export let components: string[];
-	export let component_props: Record<string, any>[];
-	let component_map: Map<
-		string,
-		Promise<{
-			default: ComponentType<SvelteComponent>;
-		}>
-	> = new Map();
-	export let load_component: load_component_type;
-	export let headers: string[];
-	export let samples: any[][] | null = null;
-	let old_samples: any[][] | null = null;
-	export let sample_labels: string[] | null = null;
-	export let value: number | null = null;
-	export let root: string;
-	export let proxy_url: null | string;
-	export let samples_per_page = 10;
-	export let onclick: (data: SelectData) => void;
-	export let onselect: (data: SelectData) => void;
-
-	export let layout: "gallery" | "table" | null = null;
+	interface Props {
+		components: string[];
+		component_props: Record<string, any>[];
+		load_component: load_component_type;
+		headers: string[];
+		samples: any[][] | null;
+		sample_labels?: string[] | null;
+		value?: number | null;
+		root: string;
+		proxy_url: null | string;
+		samples_per_page?: number;
+		onclick: (data: SelectData) => void;
+		onselect: (data: SelectData) => void;
+		layout?: "gallery" | "table" | null;
+	}
+
+	let {
+		components,
+		component_props,
+		load_component,
+		headers,
+		samples,
+		sample_labels = null,
+		value = $bindable(null),
+		root,
+		proxy_url,
+		samples_per_page = 10,
+		onclick,
+		onselect,
+		layout = null
+	}: Props = $props();
 
 	// Although the `samples_dir` prop is not used in any of the core Gradio component, it is kept for backward compatibility
 	// with any custom components created with gradio<=4.20.0
-	let samples_dir: string = proxy_url
-		? `/proxy=${proxy_url}file=`
-		: `${root}/file=`;
-	let page = 0;
+	let samples_dir: string = $derived(
+		proxy_url ? `/proxy=${proxy_url}file=` : `${root}/file=`
+	);
 
-	$: gallery =
-		(components.length < 2 || sample_labels !== null) && layout !== "table";
-	let paginate = samples ? samples.length > samples_per_page : false;
+	let current_hover = $state(-1);
 
-	let selected_samples: any[][];
-	let page_count: number;
-	let visible_pages: number[] = [];
+	let gallery = $derived(
+		(components.length < 2 || sample_labels !== null) && layout !== "table"
+	);
 
-	let current_hover = -1;
+	let effective_samples = $derived.by(() => {
+		if (sample_labels) {
+			return sample_labels.map((e) => [e]);
+		}
+		return samples ?? [];
+	});
 
-	function handle_mouseenter(i: number): void {
-		current_hover = i;
-	}
+	// page resets to 0 whenever effective_samples changes,
+	// but can still be overwritten by user clicks
+	let page = $derived.by(() => {
+		effective_samples;
+		return 0;
+	});
 
-	function handle_mouseleave(): void {
-		current_hover = -1;
-	}
+	let paginate = $derived(effective_samples.length > samples_per_page);
 
-	$: {
-		if (sample_labels) {
-			samples = sample_labels.map((e) => [e]);
-		} else if (!samples) {
-			samples = [];
-		}
-		if (JSON.stringify(samples) !== JSON.stringify(old_samples)) {
-			page = 0;
-			old_samples = samples;
-		}
-		paginate = samples.length > samples_per_page;
+	let selected_samples = $derived.by(() => {
 		if (paginate) {
-			visible_pages = [];
-			selected_samples = samples.slice(
+			return effective_samples.slice(
 				page * samples_per_page,
 				(page + 1) * samples_per_page
 			);
-			page_count = Math.ceil(samples.length / samples_per_page);
-			[0, page, page_count - 1].forEach((anchor) => {
-				for (let i = anchor - 2; i <= anchor + 2; i++) {
-					if (i >= 0 && i < page_count && !visible_pages.includes(i)) {
-						if (
-							visible_pages.length > 0 &&
-							i - visible_pages[visible_pages.length - 1] > 1
-						) {
-							visible_pages.push(-1);
-						}
-						visible_pages.push(i);
+		}
+		return effective_samples.slice();
+	});
+
+	let page_count = $derived(
+		Math.ceil(effective_samples.length / samples_per_page)
+	);
+
+	let visible_pages = $derived.by(() => {
+		if (!paginate) return [];
+		let pages: number[] = [];
+		[0, page, page_count - 1].forEach((anchor) => {
+			for (let i = anchor - 2; i <= anchor + 2; i++) {
+				if (i >= 0 && i < page_count && !pages.includes(i)) {
+					if (pages.length > 0 && i - pages[pages.length - 1] > 1) {
+						pages.push(-1);
 					}
+					pages.push(i);
 				}
-			});
-		} else {
-			selected_samples = samples.slice();
-		}
+			}
+		});
+		return pages;
+	});
+
+	function handle_mouseenter(i: number): void {
+		current_hover = i;
+	}
+
+	function handle_mouseleave(): void {
+		current_hover = -1;
 	}
 
 	let component_meta: {
@@ -115,11 +129,9 @@
 		);
 	}
 
-	// Need to striginfiy the samples otherwise get_component_meta will trigger infinitely
+	// Need to stringify the samples otherwise get_component_meta will trigger infinitely
 	// Saw this when rendering examples in a gr.render block
-	$: selected_samples_json = JSON.stringify(selected_samples || []);
-
-	// $: get_component_meta(selected_samples_json);
+	let selected_samples_json = $derived(JSON.stringify(selected_samples || []));
 </script>
 
 {#await get_component_meta(selected_samples_json) then _}
@@ -129,13 +141,13 @@
 				{#if sample_row[0] != null}
 					<button
 						class="gallery-item"
-						on:click={() => {
+						onclick={() => {
 							value = i + page * samples_per_page;
 							onclick({ index: value, value: sample_row });
 							onselect({ index: value, value: sample_row });
 						}}
-						on:mouseenter={() => handle_mouseenter(i)}
-						on:mouseleave={() => handle_mouseleave()}
+						onmouseenter={() => handle_mouseenter(i)}
+						onmouseleave={() => handle_mouseleave()}
 					>
 						{#if sample_labels}
 							<BaseExample
@@ -179,7 +191,7 @@
 					{#each component_meta as sample_row, i}
 						<tr
 							class="tr-body"
-							on:click={() => {
+							onclick={() => {
 								value = i + page * samples_per_page;
 								onclick({ index: value, value: sample_row });
 								onselect({
@@ -187,8 +199,8 @@
 									value: selected_samples[i]
 								});
 							}}
-							on:mouseenter={() => handle_mouseenter(i)}
-							on:mouseleave={() => handle_mouseleave()}
+							onmouseenter={() => handle_mouseenter(i)}
+							onmouseleave={() => handle_mouseleave()}
 						>
 							{#each sample_row as { value, component }, j}
 								{@const component_name = components[j]}
@@ -230,7 +242,7 @@
 				{:else}
 					<button
 						class:current-page={page === visible_page}
-						on:click={() => (page = visible_page)}
+						onclick={() => (page = visible_page)}
 					>
 						{visible_page + 1}
 					</button>

package/dist/Dataset.svelte.d.ts

@@ -1,24 +1,11 @@
 import type { SelectData } from "@gradio/utils";
 import type { load_component as load_component_type } from "@gradio/utils";
-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 Dataset: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     components: string[];
     component_props: Record<string, any>[];
     load_component: load_component_type;
     headers: string[];
-    samples?: any[][] | null;
+    samples: any[][] | null;
     sample_labels?: string[] | null;
     value?: number | null;
     root: string;
@@ -27,8 +14,7 @@ declare const Dataset: $$__sveltets_2_IsomorphicComponent<{
     onclick: (data: SelectData) => void;
     onselect: (data: SelectData) => void;
     layout?: "gallery" | "table" | null;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Dataset = InstanceType<typeof Dataset>;
+}
+declare const Dataset: import("svelte").Component<Props, {}, "value">;
+type Dataset = ReturnType<typeof Dataset>;
 export default Dataset;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataset",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,11 +16,11 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.20.1",
-    "@gradio/textbox": "^0.13.2",
-    "@gradio/client": "^2.0.3",
+    "@gradio/atoms": "^0.21.0",
+    "@gradio/client": "^2.0.4",
     "@gradio/utils": "^0.11.2",
-    "@gradio/upload": "^0.17.4"
+    "@gradio/textbox": "^0.13.3",
+    "@gradio/upload": "^0.17.5"
   },
   "devDependencies": {
     "@gradio/preview": "^0.15.2"