@gradio/core 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @gradio/core
 
+## 1.4.0
+
+### Features
+
+- [#12879](https://github.com/gradio-app/gradio/pull/12879) [`c498688`](https://github.com/gradio-app/gradio/commit/c4986883b267570d76b442899c6fc09d14e3e222) - Ensure svelte version mismatches do not break custom components.  Thanks @pngwn!
+
+### Fixes
+
+- [#12970](https://github.com/gradio-app/gradio/pull/12970) [`7326ea3`](https://github.com/gradio-app/gradio/commit/7326ea312bee7ccdaf4a1e4e11ace8f11b607ca5) - remove new console logs.  Thanks @hannahblair!
+- [#12968](https://github.com/gradio-app/gradio/pull/12968) [`fe95534`](https://github.com/gradio-app/gradio/commit/fe955348f24115744015d85639e170b8518b28c1) - Fix custom component reload mode.  Thanks @freddyaboulton!
+- [#12956](https://github.com/gradio-app/gradio/pull/12956) [`e8dadd6`](https://github.com/gradio-app/gradio/commit/e8dadd648483b6016913a9b7fa2580dbc08cb823) - Fix fill_height not working after Svelte 5 migration.  Thanks @hysts!
+
+### Dependency updates
+
+- @gradio/button@0.6.5
+- @gradio/code@0.17.4
+- @gradio/html@0.11.1
+- @gradio/paramviewer@0.9.5
+- @gradio/statustracker@0.12.5
+- @gradio/tabitem@0.6.6
+- @gradio/tabs@0.5.8
+- @gradio/utils@0.12.0
+- @gradio/column@0.3.2
+- @gradio/atoms@0.22.2
+- @gradio/upload@0.17.7
+- @gradio/image@0.25.4
+- @gradio/gallery@0.17.3
+- @gradio/plot@0.10.5
+- @gradio/checkbox@0.6.4
+- @gradio/textbox@0.13.5
+- @gradio/dropdown@0.11.5
+- @gradio/file@0.14.4
+- @gradio/video@0.20.4
+- @gradio/audio@0.22.4
+
+## 1.3.0
+
+### Dependency updates
+
+- @gradio/html@0.11.0
+
+## 1.3.0
+
+### Features
+
+- [#12918](https://github.com/gradio-app/gradio/pull/12918) [`e29e1cc`](https://github.com/gradio-app/gradio/commit/e29e1ccd5874cb98b813ed4f7f72d9fef2935016) - Add Space-specific skill generation to `gradio skills add`.  Thanks @abidlabs!
+- [#12929](https://github.com/gradio-app/gradio/pull/12929) [`978bc6e`](https://github.com/gradio-app/gradio/commit/978bc6ea5094aa11e10994cdd662c4c663a86a83) - Add server functions support to gr.HTML.  Thanks @aliabid94!
+- [#12907](https://github.com/gradio-app/gradio/pull/12907) [`3e625a0`](https://github.com/gradio-app/gradio/commit/3e625a0ecfab6e74b7561b68adbe55341ecbc47a) - Better error handling when connection to server is lost.  Thanks @abidlabs!
+
+### Fixes
+
+- [#12904](https://github.com/gradio-app/gradio/pull/12904) [`7c3fa2a`](https://github.com/gradio-app/gradio/commit/7c3fa2a6900cfa3c87cb61ffa9b34b75d1ae49ba) - Fix Loading Spinner Issue Caused by Events Targeting Components In Inactive Tabs.  Thanks @freddyaboulton!
+- [#12903](https://github.com/gradio-app/gradio/pull/12903) [`57707c7`](https://github.com/gradio-app/gradio/commit/57707c72edd0e9fee9821882f75ab322ce110fe3) - Fix Tab i18n issue.  Thanks @freddyaboulton!
+- [#12906](https://github.com/gradio-app/gradio/pull/12906) [`81482b5`](https://github.com/gradio-app/gradio/commit/81482b58706ee9948d0f04e84e632ebb8d4bf7ea) - Lazy load sub-tab and accordion components.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/client@2.1.0
+- @gradio/button@0.6.4
+- @gradio/html@0.10.0
+- @gradio/tabs@0.5.7
+
 ## 1.2.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -4,18 +4,15 @@
 	import { Client } from "@gradio/client";
 	import { writable } from "svelte/store";
 
-	// import type { LoadingStatus, LoadingStatusCollection } from "./stores";
-
 	import type {
 		ComponentMeta,
 		Dependency as IDependency,
 		LayoutNode
 	} from "./types";
-	// import type { UpdateTransaction } from "./_init";
 	import type { ThemeMode, Payload } from "./types";
 	import { Toast } from "@gradio/statustracker";
 	import type { ToastMessage } from "@gradio/statustracker";
-	import { type ShareData, type ValueData, GRADIO_ROOT } from "@gradio/utils";
+	import { type ShareData, GRADIO_ROOT } from "@gradio/utils";
 
 	import MountComponents from "./MountComponents.svelte";
 	import { prefix_css } from "./css";
@@ -24,18 +21,13 @@
 	import type ApiDocsInterface from "./api_docs/ApiDocs.svelte";
 	import type ApiRecorderInterface from "./api_docs/ApiRecorder.svelte";
 	import type SettingsInterface from "./api_docs/Settings.svelte";
-	// import type { ComponentType } from "svelte";
 
 	import logo from "./images/logo.svg";
 	import api_logo from "./api_docs/img/api-logo.svg";
 	import settings_logo from "./api_docs/img/settings-logo.svg";
 	import record_stop from "./api_docs/img/record-stop.svg";
 	import { AppTree } from "./init.svelte";
-	// import type {
-	// 	LogMessage,
-	// 	RenderMessage,
-	// 	StatusMessage,
-	// } from "@gradio/client";
+
 	import * as screen_recorder from "./screen_recorder";
 
 	import { DependencyManager } from "./dependency";
@@ -104,6 +96,7 @@
 	});
 
 	let messages: (ToastMessage & { fn_index: number })[] = $state([]);
+	let reconnect_interval: ReturnType<typeof setInterval> | null = null;
 
 	function gradio_event_dispatcher(
 		id: number,
@@ -170,7 +163,8 @@
 			version,
 			api_prefix,
 			max_file_size,
-			autoscroll
+			autoscroll,
+			fill_height
 		},
 		app,
 		$reactive_formatter,
@@ -190,11 +184,6 @@
 		});
 	}
 
-	setContext(GRADIO_ROOT, {
-		register: app_tree.register_component.bind(app_tree),
-		dispatcher: gradio_event_dispatcher
-	});
-
 	let api_calls: Payload[] = $state([]);
 	let last_api_call: Payload | null = $state(null);
 	// We need a callback to add to api_calls from the DependencyManager
@@ -206,6 +195,35 @@
 		api_calls = [...api_calls, last_api_call];
 	};
 
+	function handle_connection_lost(): void {
+		messages = messages.filter((m) => m.type !== "error");
+
+		++_error_id;
+		messages.push({
+			title: "Connection Lost",
+			message: LOST_CONNECTION_MESSAGE,
+			fn_index: -1,
+			type: "error",
+			id: _error_id,
+			duration: null,
+			visible: true
+		});
+
+		reconnect_interval = setInterval(async () => {
+			try {
+				const status = await app.reconnect();
+				if (status === "connected" || status === "changed") {
+					clearInterval(reconnect_interval!);
+					reconnect_interval = null;
+					window.location.reload();
+				}
+			} catch (e) {
+				// server still unreachable
+				console.debug(e);
+			}
+		}, 2000);
+	}
+
 	let dep_manager = new DependencyManager(
 		dependencies,
 		app,
@@ -213,7 +231,8 @@
 		app_tree.get_state.bind(app_tree),
 		app_tree.rerender.bind(app_tree),
 		new_message,
-		add_to_api_calls
+		add_to_api_calls,
+		handle_connection_lost
 	);
 
 	$effect(() => {
@@ -225,7 +244,8 @@
 				version,
 				api_prefix,
 				max_file_size,
-				autoscroll
+				autoscroll,
+				fill_height
 			});
 			dep_manager.reload(
 				dependencies,
@@ -426,6 +446,7 @@
 		return () => {
 			mut.disconnect();
 			res.disconnect();
+			if (reconnect_interval) clearInterval(reconnect_interval);
 		};
 	});
 

package/dist/src/MountComponents.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import Self from "./MountComponents.svelte";
-	let { node } = $props();
+	import MountCustomComponent from "./MountCustomComponent.svelte";
+	let { node, ...rest } = $props();
 
 	let component = $derived(await node.component);
 </script>
 
 {#if node && component}
-	{#if node.props.shared_props.visible}
+	{#if node.props.shared_props.visible && !node.runtime}
 		<svelte:component
 			this={component.default}
 			shared_props={node.props.shared_props}
@@ -18,5 +19,13 @@
 				{/each}
 			{/if}
 		</svelte:component>
+	{:else if node.props.shared_props.visible && node.runtime}
+		<MountCustomComponent {...rest} {node}>
+			{#if node.children && node.children.length}
+				{#each node.children as _node}
+					<Self node={_node} />
+				{/each}
+			{/if}
+		</MountCustomComponent>
 	{/if}
 {/if}

package/dist/src/MountComponents.svelte.d.ts

@@ -1,5 +1,5 @@
 declare const MountComponents: import("svelte").Component<{
     node: any;
-}, {}, "">;
+} & Record<string, any>, {}, "">;
 type MountComponents = ReturnType<typeof MountComponents>;
 export default MountComponents;

package/dist/src/MountCustomComponent.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	let { node, children, ...rest } = $props();
+
+	let component = $derived(await node.component);
+	let runtime = $derived(
+		(await node.runtime) as {
+			mount: typeof import("svelte").mount;
+			unmount: typeof import("svelte").unmount;
+		}
+	);
+	let el: HTMLElement = $state(null);
+
+	$effect(() => {
+		if (!el || !runtime || !component) return;
+
+		// Read prop references so the effect re-runs when the node is
+		// replaced during a dev reload (new objects are created by
+		// app_tree.reload).
+		const _shared_props = node.props.shared_props;
+		const _props = node.props.props;
+		const _runtime = runtime;
+
+		const mounted = _runtime.mount(component.default, {
+			target: el,
+			props: {
+				shared_props: _shared_props,
+				props: _props,
+				children
+			}
+		});
+
+		return () => {
+			_runtime.unmount(mounted);
+		};
+	});
+</script>
+
+<span bind:this={el}></span>

package/dist/src/MountCustomComponent.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const MountCustomComponent: import("svelte").Component<{
+    node: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type MountCustomComponent = ReturnType<typeof MountCustomComponent>;
+export default MountCustomComponent;

package/dist/src/api_docs/ApiBanner.svelte

@@ -6,8 +6,12 @@
 
 	export let root: string;
 	export let api_count: number;
-	export let current_language: "python" | "javascript" | "bash" | "mcp" =
-		"python";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp" = "python";
 
 	const dispatch = createEventDispatcher();
 </script>

package/dist/src/api_docs/ApiBanner.svelte.d.ts

@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const ApiBanner: $$__sveltets_2_IsomorphicComponent<{
     root: string;
     api_count: number;
-    current_language?: "python" | "javascript" | "bash" | "mcp";
+    current_language?: "python" | "javascript" | "bash" | "skill" | "mcp";
 }, {
     close: CustomEvent<any>;
 } & {

package/dist/src/api_docs/ApiDocs.svelte

@@ -19,6 +19,8 @@
 	import javascript from "./img/javascript.svg";
 	import bash from "./img/bash.svg";
 	import ResponseSnippet from "./ResponseSnippet.svelte";
+	import skill from "./img/skill.svg";
+	import SkillSnippet from "./SkillSnippet.svelte";
 	import mcp from "./img/mcp.svg";
 	import MCPSnippet from "./MCPSnippet.svelte";
 	import CopyMarkdown from "./CopyMarkdown.svelte";
@@ -53,7 +55,8 @@
 	}
 
 	export let api_calls: Payload[] = [];
-	let current_language: "python" | "javascript" | "bash" | "mcp" = "python";
+	let current_language: "python" | "javascript" | "bash" | "skill" | "mcp" =
+		"python";
 
 	$: sorted_dependencies = (() => {
 		const valid = dependencies.filter(
@@ -81,13 +84,16 @@
 	}
 
 	function is_valid_language(lang: string | null): boolean {
-		return ["python", "javascript", "bash", "mcp"].includes(lang ?? "");
+		return ["python", "javascript", "bash", "skill", "mcp"].includes(
+			lang ?? ""
+		);
 	}
 
-	const langs = [
+	$: langs = [
 		["python", "Python", python],
 		["javascript", "JavaScript", javascript],
 		["bash", "cURL", bash],
+		...(space_id ? [["skill", "Skill", skill] as const] : []),
 		["mcp", "MCP", mcp]
 	] as const;
 
@@ -277,7 +283,12 @@
 
 		const lang_param = get_query_param("lang");
 		if (is_valid_language(lang_param)) {
-			current_language = lang_param as "python" | "javascript" | "bash" | "mcp";
+			current_language = lang_param as
+				| "python"
+				| "javascript"
+				| "bash"
+				| "skill"
+				| "mcp";
 		}
 
 		const mcp_schema_url = `${root}gradio_api/mcp/schema`;
@@ -398,18 +409,25 @@
 						API Documentation
 					</p>
 				{:else}
-					<p class="padded">
-						{#if current_language == "python" || current_language == "javascript"}
-							1. Install the
-							<span style="text-transform:capitalize">{current_language}</span>
-							client (<a
-								href={current_language == "python" ? py_docs : js_docs}
-								target="_blank">docs</a
-							>) if you don't already have it installed.
-						{:else if current_language == "bash"}
-							1. Confirm that you have cURL installed on your system.
-						{/if}
-					</p>
+					{#if current_language !== "skill"}
+						<p class="padded">
+							{#if current_language == "python" || current_language == "javascript"}
+								1. Install the
+								<span style="text-transform:capitalize">{current_language}</span
+								>
+								client (<a
+									href={current_language == "python" ? py_docs : js_docs}
+									target="_blank">docs</a
+								>) if you don't already have it installed.
+							{:else if current_language == "bash"}
+								1. Confirm that you have cURL installed on your system.
+							{/if}
+						</p>
+					{/if}
+
+					<div class:hidden={current_language !== "skill"}>
+						<SkillSnippet {space_id} />
+					</div>
 
 					<div class:hidden={current_language !== "mcp"}>
 						<MCPSnippet
@@ -427,7 +445,7 @@
 						/>
 					</div>
 
-					{#if current_language !== "mcp"}
+					{#if current_language !== "mcp" && current_language !== "skill"}
 						<InstallSnippet {current_language} />
 
 						<p class="padded">
@@ -480,25 +498,23 @@
 					{/if}
 				{/if}
 
-				<div class:hidden={current_language === "mcp"}>
+				<div
+					class:hidden={current_language === "mcp" ||
+						current_language === "skill"}
+				>
 					{#each sorted_dependencies as dependency}
 						{#if info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
-									endpoint_parameters={info.named_endpoints[
-										"/" + dependency.api_name
-									].parameters}
 									{dependency}
 									{current_language}
-									{root}
-									{space_id}
-									{username}
-									api_prefix={app.api_prefix}
 									api_description={info.named_endpoints[
 										"/" + dependency.api_name
 									].description}
 									{analytics}
 									{last_api_call}
+									code_snippets={info.named_endpoints["/" + dependency.api_name]
+										.code_snippets}
 									bind:markdown_code_snippets
 								/>