@gradio/core 1.2.0 → 1.3.0

package/src/dependency.ts

@@ -205,8 +205,10 @@ export class DependencyManager {
 	get_state_cb: GetStateCallback;
 	rerender_cb: RerenderCallback;
 	log_cb: LogCallback;
+	on_connection_lost_cb: () => void;
 
 	loading_stati = new LoadingStatus();
+	connection_lost = false;
 
 	constructor(
 		dependencies: IDependency[],
@@ -226,13 +228,15 @@ export class DependencyManager {
 			duration?: number | null,
 			visible?: boolean
 		) => void,
-		add_to_api_calls: (payload: Payload) => void
+		add_to_api_calls: (payload: Payload) => void,
+		on_connection_lost_cb: () => void
 	) {
 		this.add_to_api_calls = add_to_api_calls;
 		this.log_cb = log_cb;
 		this.update_state_cb = update_state_cb;
 		this.get_state_cb = get_state_cb;
 		this.rerender_cb = rerender_cb;
+		this.on_connection_lost_cb = on_connection_lost_cb;
 		this.client = client;
 		this.reload(
 			dependencies,
@@ -318,6 +322,7 @@ export class DependencyManager {
 	 * @returns a value if there is no backend fn, a 'submission' if there is a backend fn, or null if there is no dependency
 	 */
 	async dispatch(event_meta: DispatchFunction | DispatchEvent): Promise<void> {
+		if (this.connection_lost) return;
 		let deps: Dependency[] | undefined;
 		if (event_meta.type === "fn") {
 			const dep = this.dependencies_by_fn.get(event_meta.fn_index!);
@@ -484,6 +489,19 @@ export class DependencyManager {
 									});
 									this.update_loading_stati_state();
 								} else if (result.stage === "error") {
+									if (result.broken || result.session_not_found) {
+										if (!this.connection_lost) {
+											this.connection_lost = true;
+											this.on_connection_lost_cb();
+										}
+										this.loading_stati.update({
+											status: "complete",
+											fn_index: dep.id,
+											stream_state: null
+										});
+										this.update_loading_stati_state();
+										break submit_loop;
+									}
 									if (Array.isArray(result?.message)) {
 										result.message.forEach((m: ValidationError, i) => {
 											this.update_state_cb(

package/src/init.svelte.ts

@@ -67,6 +67,7 @@ export class AppTree {
 
 	#get_callbacks = new Map<number, get_data_type>();
 	#set_callbacks = new Map<number, set_data_type>();
+	#pending_updates = new Map<number, Record<string, unknown>>();
 	#event_dispatcher: (id: number, event: string, data: unknown) => void;
 	component_ids: number[];
 	initial_tabs: Record<number, Tab[]> = {};
@@ -195,6 +196,21 @@ export class AppTree {
 		this.#set_callbacks.set(id, _set_data);
 		this.#get_callbacks.set(id, _get_data);
 		this.components_to_register.delete(id);
+
+		// Apply any pending updates that were stored while the component
+		// was not yet mounted (e.g. hidden in an inactive tab).
+		// We must apply AFTER tick() so that the Gradio class's $effect
+		// (which syncs from node props) has already run. Otherwise the
+		// $effect would overwrite the values we set here.
+		const pending = this.#pending_updates.get(id);
+		if (pending) {
+			this.#pending_updates.delete(id);
+			tick().then(() => {
+				const _set = this.#set_callbacks.get(id);
+				if (_set) _set(pending);
+			});
+		}
+
 		if (this.components_to_register.size === 0 && !this.resolved) {
 			this.resolved = true;
 			this.ready_resolve();
@@ -429,11 +445,24 @@ export class AppTree {
 			const old_value = node?.props.props.value;
 			// @ts-ignore
 			const new_props = create_props_shared_props(new_state);
-			node!.props.shared_props = {
-				...node?.props.shared_props,
-				...new_props.shared_props
-			};
-			node!.props.props = { ...node?.props.props, ...new_props.props };
+			// Modify props in-place instead of replacing the entire object.
+			// Replacing with a new object via spread can cause Svelte 5's
+			// deep $state proxy to lose track of the values during async
+			// component mounting/revival.
+			for (const key in new_props.shared_props) {
+				// @ts-ignore
+				node!.props.shared_props[key] = new_props.shared_props[key];
+			}
+			for (const key in new_props.props) {
+				// @ts-ignore
+				node!.props.props[key] = new_props.props[key];
+			}
+
+			// Also store as pending so the value can be applied via _set_data
+			// when the component eventually mounts and registers
+			const existing = this.#pending_updates.get(id) || {};
+			this.#pending_updates.set(id, { ...existing, ...new_state });
+
 			if ("value" in new_state && !dequal(old_value, new_state.value)) {
 				this.#event_dispatcher(id, "change", null);
 			}
@@ -469,28 +498,73 @@ export class AppTree {
 	}
 
 	async render_previously_invisible_children(id: number) {
-		this.root = this.traverse(this.root!, [
-			(node) => {
-				if (node.id === id) {
-					make_visible_if_not_rendered(node, this.#hidden_on_startup);
-				}
-				return node;
-			},
-			(node) => handle_visibility(node, this.#config.api_url)
-		]);
+		const node = find_node_by_id(this.root!, id);
+		if (!node) return;
+
+		// Check if this node or any of its descendants need to be made visible.
+		// If not, skip entirely to avoid unnecessary reactive updates
+		// from mutating the tree through the $state proxy.
+		if (
+			!this.#hidden_on_startup.has(node.id) &&
+			!has_hidden_descendants(node, this.#hidden_on_startup)
+		) {
+			return;
+		}
+
+		make_visible_if_not_rendered(node, this.#hidden_on_startup, true);
+		load_components(node, this.#config.api_url);
 	}
 }
 
 function make_visible_if_not_rendered(
 	node: ProcessedComponentMeta,
-	hidden_on_startup: Set<number>
+	hidden_on_startup: Set<number>,
+	is_target_node = false
 ): void {
 	node.props.shared_props.visible = hidden_on_startup.has(node.id)
 		? true
 		: node.props.shared_props.visible;
-	node.children.forEach((child) => {
-		make_visible_if_not_rendered(child, hidden_on_startup);
-	});
+
+	if (node.type === "tabs") {
+		const selectedId =
+			node.props.props.selected ?? node.props.props.initial_tabs?.[0]?.id;
+		node.children.forEach((child) => {
+			if (
+				child.type === "tabitem" &&
+				(child.props.props.id === selectedId || child.id === selectedId)
+			) {
+				make_visible_if_not_rendered(child, hidden_on_startup, false);
+			}
+		});
+	} else if (
+		node.type === "accordion" &&
+		node.props.props.open === false &&
+		!is_target_node
+	) {
+		// Don't recurse into closed accordion content
+	} else {
+		node.children.forEach((child) => {
+			make_visible_if_not_rendered(child, hidden_on_startup, false);
+		});
+	}
+}
+
+function has_hidden_descendants(
+	node: ProcessedComponentMeta,
+	hidden_on_startup: Set<number>
+): boolean {
+	for (const child of node.children) {
+		if (hidden_on_startup.has(child.id)) return true;
+		if (has_hidden_descendants(child, hidden_on_startup)) return true;
+	}
+	return false;
+}
+
+function load_components(node: ProcessedComponentMeta, api_url: string): void {
+	if (node.props.shared_props.visible && !node.component) {
+		node.component = get_component(node.type, node.component_class_id, api_url);
+	}
+	node.children.forEach((child) => load_components(child, api_url));
 }
 
 /**
@@ -719,8 +793,10 @@ function _gather_initial_tabs(
 		if (!("id" in node.props.props)) {
 			node.props.props.id = node.id;
 		}
+		const i18n = node.props.props.i18n as ((str: string) => string) | undefined;
+		const raw_label = node.props.shared_props.label as string;
 		initial_tabs[parent_tab_id].push({
-			label: node.props.shared_props.label as string,
+			label: i18n ? i18n(raw_label) : raw_label,
 			id: node.props.props.id as string,
 			elem_id: node.props.shared_props.elem_id,
 			visible: node.props.shared_props.visible as boolean,