@gradio/core 1.3.0 → 1.4.1

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "type": "module",
   "devDependencies": {
-    "@gradio/annotatedimage": "^0.11.3",
-    "@gradio/accordion": "^0.5.31",
-    "@gradio/audio": "^0.22.3",
-    "@gradio/atoms": "^0.22.0",
+    "@gradio/accordion": "^0.5.33",
+    "@gradio/atoms": "^0.22.2",
+    "@gradio/annotatedimage": "^0.11.5",
+    "@gradio/audio": "^0.23.0",
     "@gradio/box": "^0.2.30",
-    "@gradio/browserstate": "^0.3.6",
-    "@gradio/button": "^0.6.4",
-    "@gradio/chatbot": "^0.29.4",
-    "@gradio/checkbox": "^0.6.3",
-    "@gradio/checkboxgroup": "^0.9.3",
+    "@gradio/browserstate": "^0.3.7",
+    "@gradio/button": "^0.6.6",
+    "@gradio/chatbot": "^0.29.6",
+    "@gradio/checkbox": "^0.6.5",
+    "@gradio/checkboxgroup": "^0.10.0",
+    "@gradio/code": "^0.17.5",
     "@gradio/client": "^2.1.0",
-    "@gradio/colorpicker": "^0.5.6",
     "@gradio/column": "^0.3.2",
-    "@gradio/datetime": "^0.4.3",
-    "@gradio/code": "^0.17.3",
-    "@gradio/downloadbutton": "^0.4.17",
-    "@gradio/dropdown": "^0.11.4",
-    "@gradio/dataset": "^0.5.4",
-    "@gradio/fallback": "^0.4.34",
-    "@gradio/file": "^0.14.3",
-    "@gradio/fileexplorer": "^0.6.3",
-    "@gradio/dataframe": "^0.21.6",
-    "@gradio/form": "^0.3.0",
-    "@gradio/group": "^0.3.2",
-    "@gradio/gallery": "^0.17.1",
-    "@gradio/highlightedtext": "^0.11.2",
-    "@gradio/html": "^0.10.0",
+    "@gradio/dataframe": "^0.22.0",
+    "@gradio/dataset": "^0.5.6",
+    "@gradio/colorpicker": "^0.5.8",
+    "@gradio/datetime": "^0.4.5",
+    "@gradio/downloadbutton": "^0.4.18",
+    "@gradio/dropdown": "^0.11.6",
+    "@gradio/fallback": "^0.4.36",
+    "@gradio/file": "^0.14.5",
+    "@gradio/fileexplorer": "^0.6.5",
+    "@gradio/form": "^0.3.1",
+    "@gradio/gallery": "^0.17.4",
+    "@gradio/group": "^0.3.3",
+    "@gradio/highlightedtext": "^0.11.4",
+    "@gradio/html": "^0.12.0",
     "@gradio/icons": "^0.15.1",
-    "@gradio/image": "^0.25.3",
-    "@gradio/imageeditor": "^0.18.6",
-    "@gradio/label": "^0.6.3",
-    "@gradio/json": "^0.7.2",
-    "@gradio/markdown": "^0.13.28",
-    "@gradio/imageslider": "^0.4.3",
-    "@gradio/model3d": "^0.16.4",
-    "@gradio/multimodaltextbox": "^0.11.6",
-    "@gradio/nativeplot": "^0.10.2",
-    "@gradio/number": "^0.8.3",
-    "@gradio/paramviewer": "^0.9.4",
-    "@gradio/plot": "^0.10.4",
+    "@gradio/imageeditor": "^0.18.8",
+    "@gradio/image": "^0.26.0",
+    "@gradio/imageslider": "^0.4.5",
+    "@gradio/json": "^0.7.4",
+    "@gradio/model3d": "^0.16.6",
+    "@gradio/markdown": "^0.13.30",
+    "@gradio/multimodaltextbox": "^0.11.8",
+    "@gradio/label": "^0.6.5",
+    "@gradio/nativeplot": "^0.10.4",
+    "@gradio/number": "^0.8.5",
+    "@gradio/radio": "^0.10.0",
+    "@gradio/plot": "^0.10.6",
+    "@gradio/paramviewer": "^0.9.6",
     "@gradio/row": "^0.3.1",
-    "@gradio/sidebar": "^0.2.3",
-    "@gradio/simpledropdown": "^0.3.34",
-    "@gradio/simpleimage": "^0.9.5",
-    "@gradio/slider": "^0.7.6",
-    "@gradio/simpletextbox": "^0.3.36",
-    "@gradio/radio": "^0.9.3",
-    "@gradio/state": "^0.2.2",
-    "@gradio/statustracker": "^0.12.4",
-    "@gradio/tabitem": "^0.6.5",
-    "@gradio/tabs": "^0.5.7",
-    "@gradio/textbox": "^0.13.4",
+    "@gradio/simpleimage": "^0.9.7",
+    "@gradio/simpledropdown": "^0.3.36",
+    "@gradio/simpletextbox": "^0.3.38",
+    "@gradio/sidebar": "^0.2.5",
+    "@gradio/state": "^0.2.3",
+    "@gradio/slider": "^0.7.8",
+    "@gradio/statustracker": "^0.13.0",
+    "@gradio/tabs": "^0.5.8",
+    "@gradio/tabitem": "^0.6.6",
+    "@gradio/textbox": "^0.13.6",
     "@gradio/theme": "^0.6.1",
-    "@gradio/timer": "^0.4.8",
-    "@gradio/upload": "^0.17.6",
-    "@gradio/uploadbutton": "^0.9.17",
-    "@gradio/utils": "^0.11.3",
-    "@gradio/video": "^0.20.3",
-    "@gradio/vibeeditor": "^0.3.5"
+    "@gradio/timer": "^0.4.9",
+    "@gradio/upload": "^0.17.7",
+    "@gradio/utils": "^0.12.1",
+    "@gradio/uploadbutton": "^0.9.18",
+    "@gradio/vibeeditor": "^0.3.7",
+    "@gradio/video": "^0.20.5"
   },
   "msw": {
     "workerDirectory": "public"

package/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";
@@ -171,7 +163,8 @@
 			version,
 			api_prefix,
 			max_file_size,
-			autoscroll
+			autoscroll,
+			fill_height
 		},
 		app,
 		$reactive_formatter,
@@ -191,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
@@ -256,7 +244,8 @@
 				version,
 				api_prefix,
 				max_file_size,
-				autoscroll
+				autoscroll,
+				fill_height
 			});
 			dep_manager.reload(
 				dependencies,

package/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/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/src/i18n.test.ts

@@ -8,8 +8,31 @@ import {
 	afterEach
 } from "vitest";
 import { Lang, process_langs } from "./i18n";
-import languagesByAnyCode from "wikidata-lang/indexes/by_any_code";
+// wikidata-lang/indexes/by_any_code uses Node.js createRequire internally.
+// Import the raw JSON data and build the index directly for browser compatibility.
+import languages from "wikidata-lang/data/languages.json";
 import BCP47 from "./lang/BCP47_codes";
+
+const languagesByAnyCode: Record<string, any[]> = {};
+for (const langData of languages) {
+	for (const codeName of [
+		"wmCode",
+		"iso6391",
+		"iso6392",
+		"iso6393",
+		"iso6396"
+	]) {
+		const codes = (langData as Record<string, any>)[codeName];
+		if (!codes) continue;
+		for (const code of codes) {
+			if (languagesByAnyCode[code] == null) {
+				languagesByAnyCode[code] = [langData];
+			} else if (!languagesByAnyCode[code].includes(langData)) {
+				languagesByAnyCode[code].push(langData);
+			}
+		}
+	}
+}
 import {
 	get_initial_locale,
 	load_translations,
@@ -25,7 +48,10 @@ vi.mock("svelte-i18n", () => ({
 	locale: { set: vi.fn() },
 	_: vi.fn((key) => `translated_${key}`),
 	addMessages: vi.fn(),
-	init: vi.fn().mockResolvedValue(undefined)
+	init: vi.fn().mockResolvedValue(undefined),
+	getLocaleFromNavigator: vi.fn(() => "en"),
+	register: vi.fn(),
+	waitLocale: vi.fn().mockResolvedValue(undefined)
 }));
 
 const mock_translations: Record<string, string> = {

package/src/init.svelte.ts

@@ -40,6 +40,20 @@ const type_map = {
 	walkthrough: "tabs",
 	walkthroughstep: "tabitem"
 };
+
+export function get_api_url(config: Omit<AppConfig, "api_url">): string {
+	// Handle api_prefix correctly when app is mounted at a subpath.
+	// config.root may not include a trailing slash, so we normalize its pathname
+	// before appending api_prefix to ensure correct URL construction.
+	const rootUrl = new URL(config.root);
+	const rootPath = rootUrl.pathname.endsWith("/")
+		? rootUrl.pathname
+		: rootUrl.pathname + "/";
+	const apiPrefix = config.api_prefix.startsWith("/")
+		? config.api_prefix
+		: "/" + config.api_prefix;
+	return new URL(rootPath.slice(0, -1) + apiPrefix, rootUrl.origin).toString();
+}
 export class AppTree {
 	/** the raw component structure received from the backend */
 	#component_payload: ComponentMeta[];
@@ -91,13 +105,15 @@ export class AppTree {
 			this.ready_resolve = resolve;
 		});
 		this.reactive_formatter = reactive_formatter;
+		const api_url = get_api_url(config);
 		this.#config = {
 			...config,
-			api_url: new URL(config.api_prefix, config.root).toString()
+			api_url
 		};
 		this.#component_payload = components;
 		this.#layout_payload = layout;
 		this.#dependency_payload = dependencies;
+		this.#event_dispatcher = event_dispatcher;
 		this.root = this.create_node(
 			{ id: layout.id, children: [] },
 			new Map(),
@@ -131,7 +147,7 @@ export class AppTree {
 		this.initial_tabs = {};
 		gather_initial_tabs(this.root!, this.initial_tabs);
 		this.postprocess(this.root!);
-		this.#event_dispatcher = event_dispatcher;
+
 		this.root_untracked = this.root;
 	}
 
@@ -143,9 +159,10 @@ export class AppTree {
 	) {
 		this.#layout_payload = layout;
 		this.#component_payload = components;
+		const api_url = get_api_url(config);
 		this.#config = {
 			...config,
-			api_url: new URL(config.api_prefix, config.root).toString()
+			api_url
 		};
 		this.#dependency_payload = dependencies;
 
@@ -237,6 +254,7 @@ export class AppTree {
 					node,
 					this.components_to_register
 				),
+
 			(node) => apply_initial_tabs(node, this.initial_tabs),
 			(node) => this.find_attached_events(node, this.#dependency_payload),
 			(node) =>
@@ -325,7 +343,8 @@ export class AppTree {
 				props: {
 					visible: true,
 					root: "",
-					theme_mode: "light"
+					theme_mode: "light",
+					scale: this.#config.fill_height ? 1 : null
 				},
 				component_class_id: "column",
 				key: null
@@ -338,17 +357,30 @@ export class AppTree {
 		if (reactive_formatter) {
 			component.props.i18n = reactive_formatter;
 		}
+
 		const processed_props = gather_props(
 			opts.id,
 			component.props,
 			[this.#input_ids, this.#output_ids],
 			this.client,
 			this.#config.api_url,
-			{ ...this.#config }
+			{
+				...this.#config,
+				register_component: this.register_component.bind(this),
+				dispatcher: this.#event_dispatcher.bind(this)
+			}
 		);
 
 		const type =
 			type_map[component.type as keyof typeof type_map] || component.type;
+		const loading_component =
+			processed_props.shared_props.visible !== false
+				? get_component(
+						component.type,
+						component.component_class_id,
+						this.#config.api_url || ""
+					)
+				: null;
 
 		const node = {
 			id: opts.id,
@@ -359,12 +391,9 @@ export class AppTree {
 			component_class_id: component.component_class_id || component.type,
 			component:
 				processed_props.shared_props.visible !== false
-					? get_component(
-							component.type,
-							component.component_class_id,
-							this.#config.api_url || ""
-						)
+					? loading_component?.component || null
 					: null,
+			runtime: loading_component?.runtime || (false as false),
 			key: component.key,
 			rendered_in: component.rendered_in,
 			documentation: component.documentation,
@@ -398,20 +427,6 @@ export class AppTree {
 		}
 		n.children = subtree.children;
 	}
-
-	async update_visibility(
-		node: ProcessedComponentMeta,
-		new_state: any
-	): Promise<void> {
-		node.children.forEach((child) => {
-			const _set_data = this.#set_callbacks.get(child.id);
-			if (_set_data) {
-				_set_data(new_state);
-			}
-			this.update_visibility(child, new_state);
-		});
-	}
-
 	/*
 	 * Updates the state of a component by its ID
 	 * @param id the ID of the component to update
@@ -480,6 +495,19 @@ export class AppTree {
 		await this.update_visibility(node, new_state);
 	}
 
+	async update_visibility(
+		node: ProcessedComponentMeta,
+		new_state: any
+	): Promise<void> {
+		node.children.forEach((child) => {
+			const _set_data = this.#set_callbacks.get(child.id);
+			if (_set_data) {
+				_set_data(new_state);
+			}
+			this.update_visibility(child, new_state);
+		});
+	}
+
 	/**
 	 * Gets the current state of a component by its ID
 	 * @param id the ID of the component to get the state of
@@ -641,6 +669,7 @@ function gather_props(
 	for (const key in additional) {
 		if (allowed_shared_props.includes(key as keyof SharedProps)) {
 			const _key = key as keyof SharedProps;
+			//@ts-ignore
 			_shared_props[_key] = additional[key];
 		} else {
 			_props[key] = additional[key];
@@ -658,8 +687,9 @@ function gather_props(
 
 	_shared_props.load_component = (
 		name: string,
-		variant: "base" | "component" | "example"
-	) => get_component(name, "", api_url, variant) as LoadingComponent;
+		variant: "base" | "component" | "example",
+		component_class_id?: string
+	) => get_component(name, component_class_id || "", api_url, variant);
 
 	_shared_props.visible =
 		_shared_props.visible === undefined ? true : _shared_props.visible;
@@ -674,9 +704,15 @@ function handle_visibility(
 ): ProcessedComponentMeta {
 	// Check if the node is visible
 	if (node.props.shared_props.visible && !node.component) {
+		const loading_component = get_component(
+			node.type,
+			node.component_class_id,
+			api_url
+		);
 		const result: ProcessedComponentMeta = {
 			...node,
-			component: get_component(node.type, node.component_class_id, api_url),
+			component: loading_component.component,
+
 			children: []
 		};
 
@@ -757,6 +793,7 @@ function untrack_children_of_closed_accordions_or_inactive_tabs(
 			if (
 				child.type === "tabitem" &&
 				child.props.props.id !==
+					//@ts-ignore
 					(node.props.props.selected || node.props.props.initial_tabs[0].id)
 			) {
 				_untrack(child, components_to_register);