@gradio/gallery 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @gradio/gallery
 
+## 0.10.0
+
+### Features
+
+- [#8121](https://github.com/gradio-app/gradio/pull/8121) [`f5b710c`](https://github.com/gradio-app/gradio/commit/f5b710c919b0ce604ea955f0d5f4faa91095ca4a) - chore(deps): update dependency eslint to v9.  Thanks @renovate!
+- [#8209](https://github.com/gradio-app/gradio/pull/8209) [`b9afe93`](https://github.com/gradio-app/gradio/commit/b9afe93915401df5bd6737c89395c2477acfa585) - Rename `eventSource_Factory` and `fetch_implementation`.  Thanks @hannahblair!
+
+### Fixes
+
+- [#8179](https://github.com/gradio-app/gradio/pull/8179) [`6a218b4`](https://github.com/gradio-app/gradio/commit/6a218b4148095aaa0c58d8c20973ba01c8764fc2) - rework upload to be a class method + pass client into each component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.2
+- @gradio/client@0.18.0
+- @gradio/upload@0.10.0
+- @gradio/utils@0.4.1
+- @gradio/statustracker@0.5.1
+- @gradio/image@0.11.0
+- @gradio/file@0.7.0
+
 ## 0.9.0
 
 ### Highlights

package/Index.svelte

@@ -77,6 +77,8 @@
 			file_count={"multiple"}
 			file_types={["image"]}
 			i18n={gradio.i18n}
+			upload={gradio.client.upload}
+			stream_handler={gradio.client.stream_factory}
 			on:upload={(e) => {
 				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
 				value = files.map((x) => ({ image: x, caption: null }));
@@ -110,6 +112,7 @@
 			{show_share_button}
 			{show_download_button}
 			i18n={gradio.i18n}
+			_fetch={gradio.client.fetch}
 		/>
 	{/if}
 </Block>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,17 +8,17 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.2",
-    "@gradio/atoms": "^0.7.1",
-    "@gradio/client": "^0.17.0",
-    "@gradio/image": "^0.10.0",
     "@gradio/icons": "^0.4.0",
-    "@gradio/statustracker": "^0.5.0",
-    "@gradio/upload": "^0.9.0",
-    "@gradio/utils": "^0.4.0",
-    "@gradio/file": "^0.6.0"
+    "@gradio/atoms": "^0.7.2",
+    "@gradio/client": "^0.18.0",
+    "@gradio/image": "^0.11.0",
+    "@gradio/statustracker": "^0.5.1",
+    "@gradio/file": "^0.7.0",
+    "@gradio/upload": "^0.10.0",
+    "@gradio/utils": "^0.4.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.8.0"
+    "@gradio/preview": "^0.9.0"
   },
   "main": "./Index.svelte",
   "main_changeset": true,

package/shared/Gallery.svelte

@@ -4,7 +4,7 @@
 	import type { SelectData } from "@gradio/utils";
 	import { Image } from "@gradio/image/shared";
 	import { dequal } from "dequal";
-	import { createEventDispatcher, getContext } from "svelte";
+	import { createEventDispatcher } from "svelte";
 	import { tick } from "svelte";
 
 	import { Download, Image as ImageIcon } from "@gradio/icons";
@@ -31,6 +31,7 @@
 	export let i18n: I18nFormatter;
 	export let selected_index: number | null = null;
 	export let interactive: boolean;
+	export let _fetch: typeof fetch;
 
 	const dispatch = createEventDispatcher<{
 		change: undefined;
@@ -49,7 +50,7 @@
 			: value.map((data) => ({
 					image: data.image as FileData,
 					caption: data.caption
-			  }));
+				}));
 
 	let prev_value: GalleryData | null = value;
 	if (selected_index == null && preview && value?.length) {
@@ -159,18 +160,16 @@
 		}
 	}
 
-	let client_height = 0;
 	let window_height = 0;
 
 	// Unlike `gr.Image()`, images specified via remote URLs are not cached in the server
 	// and their remote URLs are directly passed to the client as `value[].image.url`.
 	// The `download` attribute of the <a> tag doesn't work for remote URLs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download),
 	// so we need to download the image via JS as below.
-	const fetch_implementation = getContext<typeof fetch>("fetch_implementation");
 	async function download(file_url: string, name: string): Promise<void> {
 		let response;
 		try {
-			response = await fetch_implementation(file_url);
+			response = await _fetch(file_url);
 		} catch (error) {
 			if (error instanceof TypeError) {
 				// If CORS is not allowed (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful),
@@ -279,11 +278,7 @@
 		</button>
 	{/if}
 
-	<div
-		bind:clientHeight={client_height}
-		class="grid-wrap"
-		class:fixed-height={!height || height == "auto"}
-	>
+	<div class="grid-wrap" class:fixed-height={!height || height == "auto"}>
 		<div
 			class="grid-container"
 			style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"