@gradio/core 1.1.3 → 1.3.0

package/src/gradio_helper.ts

@@ -1,7 +1,7 @@
-import { all_common_keys } from "./i18n";
 import { _ } from "svelte-i18n";
 import { get, derived } from "svelte/store";
 export { Gradio } from "@gradio/utils";
+import { I18N_MARKER, translate_i18n_marker } from "@gradio/utils";
 
 export type I18nFormatter = typeof formatter;
 
@@ -12,27 +12,15 @@ export function formatter(value: string | null | undefined): string {
 	const string_value = String(value);
 	const translate = get(_);
 
-	let direct_translation = translate(string_value);
+	if (string_value.includes(I18N_MARKER)) {
+		return translate_i18n_marker(string_value, translate);
+	}
 
+	const direct_translation = translate(string_value);
 	if (direct_translation !== string_value) {
 		return direct_translation;
 	}
 
-	const lower_value = string_value.toLowerCase();
-
-	for (const common_key of all_common_keys) {
-		const key_name = common_key.substring(common_key.indexOf(".") + 1);
-
-		if (lower_value === key_name) {
-			const translation = translate(common_key);
-
-			if (translation !== common_key) {
-				return translation;
-			}
-			break;
-		}
-	}
-
 	return string_value;
 }
 

package/src/i18n.test.ts

@@ -11,12 +11,12 @@ import { Lang, process_langs } from "./i18n";
 import languagesByAnyCode from "wikidata-lang/indexes/by_any_code";
 import BCP47 from "./lang/BCP47_codes";
 import {
-	translate_if_needed,
 	get_initial_locale,
 	load_translations,
 	changeLocale,
 	is_translation_metadata
 } from "./i18n";
+import { formatter } from "./gradio_helper";
 import { loading } from "./lang/loading";
 
 const loading_count = Object.keys(loading).length;
@@ -28,8 +28,16 @@ vi.mock("svelte-i18n", () => ({
 	init: vi.fn().mockResolvedValue(undefined)
 }));
 
+const mock_translations: Record<string, string> = {
+	"common.submit": "Submit",
+	"common.name": "Name",
+	"common.greeting": "Hello",
+	"common.submit_es": "Enviar",
+	"common.name_es": "Nombre"
+};
+
 vi.mock("svelte/store", () => ({
-	get: vi.fn((store) => store),
+	get: vi.fn(() => (key: string) => mock_translations[key] ?? key),
 	derived: vi.fn()
 }));
 
@@ -66,13 +74,6 @@ describe("i18n", () => {
 		);
 	});
 
-	describe("basic functions", () => {
-		test("translate_if_needed handles regular strings", () => {
-			const regularString = "hello world";
-			expect(translate_if_needed(regularString)).toBe(regularString);
-		});
-	});
-
 	describe("locale management", () => {
 		test("get_initial_locale returns browser locale when available", () => {
 			const result = get_initial_locale("fr", ["en", "fr", "de"]);
@@ -155,4 +156,35 @@ describe("i18n", () => {
 			expect(Boolean(is_translation_metadata("not an object"))).toBe(false);
 		});
 	});
+
+	describe("formatter", () => {
+		test("translates i18n markers", () => {
+			expect(formatter('__i18n__{"key":"common.submit"}')).toBe("Submit");
+			expect(formatter('Click: __i18n__{"key":"common.submit"}')).toBe(
+				"Click: Submit"
+			);
+			expect(formatter('__i18n__{"key":"common.name"} field')).toBe(
+				"Name field"
+			);
+			expect(formatter('__i18n__{"key":"common.submit_es"}')).toBe("Enviar");
+		});
+
+		test("returns key when no translation exists", () => {
+			expect(formatter('__i18n__{"key":"unknown.key"}')).toBe("unknown.key");
+		});
+
+		test("handles null, undefined, and plain text", () => {
+			expect(formatter(null)).toBe("");
+			expect(formatter(undefined)).toBe("");
+			expect(formatter("Hello world")).toBe("Hello world");
+		});
+
+		test("handles malformed markers", () => {
+			expect(formatter("__i18n__")).toBe("__i18n__");
+			expect(formatter('__i18n__{"key":"test.key"')).toBe(
+				'__i18n__{"key":"test.key"'
+			);
+			expect(formatter("__i18n__{invalid}")).toBe("__i18n__{invalid}");
+		});
+	});
 });

package/src/i18n.ts

@@ -6,7 +6,6 @@ import {
 	register,
 	waitLocale
 } from "svelte-i18n";
-import { formatter } from "./gradio_helper";
 import { loading } from "./lang/loading";
 
 const lang_map = {
@@ -71,63 +70,7 @@ export function is_translation_metadata(obj: any): obj is I18nData {
 	return result;
 }
 
-export const i18n_marker = "__i18n__";
-
-// handles strings with embedded JSON metadata of shape "__i18n__{"key": "some.key"}"
-export function translate_if_needed(value: any): string {
-	if (typeof value !== "string") {
-		return value;
-	}
-
-	const marker_index = value.indexOf(i18n_marker);
-
-	if (marker_index === -1) {
-		return value;
-	}
-
-	try {
-		const before_marker =
-			marker_index > 0 ? value.substring(0, marker_index) : "";
-
-		const after_marker_index = marker_index + i18n_marker.length;
-		const json_start = value.indexOf("{", after_marker_index);
-		let json_end = -1;
-		let bracket_count = 0;
-
-		for (let i = json_start; i < value.length; i++) {
-			if (value[i] === "{") bracket_count++;
-			if (value[i] === "}") bracket_count--;
-			if (bracket_count === 0) {
-				json_end = i + 1;
-				break;
-			}
-		}
-
-		if (json_end === -1) {
-			console.error("Could not find end of JSON in i18n string");
-			return value;
-		}
-
-		const metadata_json = value.substring(json_start, json_end);
-		const after_json = json_end < value.length ? value.substring(json_end) : "";
-
-		try {
-			const metadata = JSON.parse(metadata_json);
-
-			if (metadata && metadata.key) {
-				const translated = formatter(metadata.key);
-				return before_marker + translated + after_json;
-			}
-		} catch (jsonError) {
-			console.error("Error parsing i18n JSON:", jsonError);
-		}
-
-		return value;
-	} catch (e) {
-		console.error("Error processing translation:", e);
-		return value;
-	}
-}
+export { I18N_MARKER as i18n_marker } from "@gradio/utils";
 
 export function process_langs(): LangsRecord {
 	const lazy_langs = Object.fromEntries(
@@ -150,8 +93,6 @@ export const language_choices: [string, string][] = Object.entries(
 	processed_langs
 ).map(([code]) => [lang_map[code as keyof typeof lang_map] || code, code]);
 
-export let all_common_keys: Set<string> = new Set();
-
 let i18n_initialized = false;
 let previous_translations: Record<string, Record<string, string>> | undefined;
 
@@ -183,15 +124,21 @@ export async function setupi18n(
 		return;
 	}
 
-	previous_translations = custom_translations;
+	const translations_to_use =
+		custom_translations ?? previous_translations ?? {};
+
+	if (custom_translations !== undefined) {
+		previous_translations = custom_translations;
+	}
 
 	load_translations({
 		processed_langs,
-		custom_translations: custom_translations ?? {}
+		custom_translations: translations_to_use
 	});
 
 	let initial_locale: string | null = null;
 	const browser_locale = getLocaleFromNavigator();
+
 	if (preferred_locale) {
 		initial_locale = get_lang_from_preferred_locale(preferred_locale);
 	} else {

package/src/init.svelte.ts

@@ -3,7 +3,6 @@ import {
 	get_component,
 	get_inputs_outputs
 } from "./init_utils";
-import { translate_if_needed } from "./i18n";
 import { tick } from "svelte";
 import { dequal } from "dequal";
 
@@ -68,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[]> = {};
@@ -196,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();
@@ -222,8 +237,6 @@ export class AppTree {
 					node,
 					this.components_to_register
 				),
-			(node) => handle_empty_forms(node, this.components_to_register),
-			(node) => translate_props(node),
 			(node) => apply_initial_tabs(node, this.initial_tabs),
 			(node) => this.find_attached_events(node, this.#dependency_payload),
 			(node) =>
@@ -422,7 +435,6 @@ export class AppTree {
 				//@ts-ignore
 				(n) => set_visibility_for_updated_node(n, id, new_state.visible),
 				//@ts-ignore
-				(n) => update_parent_visibility(n, id, new_state.visible),
 				(n) => handle_visibility(n, this.#config.api_url)
 			]);
 			await tick();
@@ -433,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);
 			}
@@ -453,10 +478,6 @@ export class AppTree {
 		// any values currently in the UI.
 		// @ts-ignore
 		await this.update_visibility(node, new_state);
-		const parent_node = find_parent(this.root!, id);
-		if (parent_node)
-			// @ts-ignore
-			update_parent_visibility(parent_node, id, new_state.visible);
 	}
 
 	/**
@@ -477,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));
 }
 
 /**
@@ -701,78 +767,6 @@ function untrack_children_of_closed_accordions_or_inactive_tabs(
 	return node;
 }
 
-function handle_empty_forms(
-	node: ProcessedComponentMeta,
-	components_to_register: Set<number>
-): ProcessedComponentMeta {
-	// Check if the node is visible
-	if (node.type === "form") {
-		const all_children_invisible = node.children.every(
-			(child) => child.props.shared_props.visible === false
-		);
-
-		if (all_children_invisible) {
-			node.props.shared_props.visible = false;
-			components_to_register.delete(node.id);
-			return node;
-		}
-	}
-
-	return node;
-}
-
-function update_parent_visibility(
-	node: ProcessedComponentMeta,
-	child_made_visible: number,
-	visibility_state: boolean | "hidden"
-): ProcessedComponentMeta {
-	// This function was added to address a tricky situation:
-	// Form components are wrapped in a Form component automatically.
-	// If all the children of the Form are invisible, the Form itself is marked invisible.
-	// in AppTree.postprocess -> handle_empty_forms
-	// This is to avoid rendering empty forms in the UI. They look ugly.
-	// So what happens when a child inside the Form is made visible again?
-	// The Form needs to become visible again too.
-	// If the child is made invisible, the form should be too if all other children are invisible.
-	// However, we are not doing this now since what we want to do is fetch the latest visibility of all
-	// the children from the UI. However, get_data only returns the props, not the shared props.
-	if (
-		node.type === "form" &&
-		node.children.length &&
-		node.children.some((child) => child.id === child_made_visible)
-	) {
-		if (visibility_state === true) node.props.shared_props.visible = true;
-		else if (!visibility_state && node.children.length === 1)
-			node.props.shared_props.visible = "hidden";
-	}
-	return node;
-}
-
-function translate_props(node: ProcessedComponentMeta): ProcessedComponentMeta {
-	const supported_props = [
-		"description",
-		"info",
-		"title",
-		"placeholder",
-		"value",
-		"label"
-	];
-	for (const attr of Object.keys(node.props.shared_props)) {
-		if (supported_props.includes(attr as string)) {
-			// @ts-ignore
-			node.props.shared_props[attr] = translate_if_needed(
-				node.props.shared_props[attr as keyof SharedProps]
-			);
-		}
-	}
-	for (const attr of Object.keys(node.props.props)) {
-		if (supported_props.includes(attr as string)) {
-			node.props.props[attr] = translate_if_needed(node.props.props[attr]);
-		}
-	}
-	return node;
-}
-
 function apply_initial_tabs(
 	node: ProcessedComponentMeta,
 	initial_tabs: Record<number, Tab[]>
@@ -799,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,