@gradio/core 1.3.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # @gradio/core
 
+## 1.4.1
+
+### Fixes
+
+- [#12566](https://github.com/gradio-app/gradio/pull/12566) [`7760161`](https://github.com/gradio-app/gradio/commit/7760161258abe6329b754dd6d2511fc3b61fed95) - Fix custom components in SSR Mode + Custom Component Examples.  Thanks @freddyaboulton!
+- [#12803](https://github.com/gradio-app/gradio/pull/12803) [`f4c3a6d`](https://github.com/gradio-app/gradio/commit/f4c3a6dcb45218722d3150baef953c731d3eccf2) - fix: gradio_api path in mount_gradio_app.  Thanks @shandowc!
+
+### Dependency updates
+
+- @gradio/utils@0.12.1
+- @gradio/statustracker@0.13.0
+- @gradio/gallery@0.17.4
+- @gradio/plot@0.10.6
+- @gradio/textbox@0.13.6
+- @gradio/html@0.12.0
+- @gradio/button@0.6.6
+- @gradio/code@0.17.5
+- @gradio/paramviewer@0.9.6
+- @gradio/checkbox@0.6.5
+- @gradio/image@0.26.0
+- @gradio/video@0.20.5
+- @gradio/file@0.14.5
+- @gradio/audio@0.23.0
+- @gradio/column@0.3.2
+- @gradio/dropdown@0.11.6
+
+## 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

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";
@@ -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/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/init.svelte.d.ts

@@ -15,6 +15,7 @@ type Tab = {
     order?: number;
     component_id: number;
 };
+export declare function get_api_url(config: Omit<AppConfig, "api_url">): string;
 export declare class AppTree {
     #private;
     /** Need this to set i18n in re-render */
@@ -61,8 +62,8 @@ export declare class AppTree {
      */
     create_node(opts: LayoutNode, component_map: Map<number, ComponentMeta>, root?: boolean, reactive_formatter?: (str: string) => string): ProcessedComponentMeta;
     rerender(components: ComponentMeta[], layout: LayoutNode): void;
-    update_visibility(node: ProcessedComponentMeta, new_state: any): Promise<void>;
     update_state(id: number, new_state: Partial<SharedProps> & Record<string, unknown>, check_visibility?: boolean): Promise<void>;
+    update_visibility(node: ProcessedComponentMeta, new_state: any): Promise<void>;
     /**
      * Gets the current state of a component by its ID
      * @param id the ID of the component to get the state of

package/dist/src/init.svelte.js

@@ -8,6 +8,19 @@ const type_map = {
     walkthrough: "tabs",
     walkthroughstep: "tabitem"
 };
+export function get_api_url(config) {
+    // 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;
@@ -45,13 +58,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(), true);
         for (const comp of components) {
             if (comp.props.visible != false)
@@ -71,15 +86,15 @@ 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;
     }
     reload(components, layout, dependencies, config) {
         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;
         this.root = this.create_node({ id: layout.id, children: [] }, new Map(), true);
@@ -205,7 +220,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
@@ -217,8 +233,15 @@ 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 });
+        const processed_props = gather_props(opts.id, component.props, [this.#input_ids, this.#output_ids], this.client, this.#config.api_url, {
+            ...this.#config,
+            register_component: this.register_component.bind(this),
+            dispatcher: this.#event_dispatcher.bind(this)
+        });
         const type = type_map[component.type] || 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,
             type: type,
@@ -227,8 +250,9 @@ export class AppTree {
             show_progress_on: null,
             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,
             key: component.key,
             rendered_in: component.rendered_in,
             documentation: component.documentation,
@@ -253,15 +277,6 @@ export class AppTree {
         }
         n.children = subtree.children;
     }
-    async update_visibility(node, new_state) {
-        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
@@ -325,6 +340,15 @@ export class AppTree {
         // @ts-ignore
         await this.update_visibility(node, new_state);
     }
+    async update_visibility(node, new_state) {
+        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
@@ -450,6 +474,7 @@ function gather_props(id, props, dependencies, client, api_url, additional = {})
     for (const key in additional) {
         if (allowed_shared_props.includes(key)) {
             const _key = key;
+            //@ts-ignore
             _shared_props[_key] = additional[key];
         }
         else {
@@ -459,7 +484,7 @@ function gather_props(id, props, dependencies, client, api_url, additional = {})
     _shared_props.client = client;
     _shared_props.id = id;
     _shared_props.interactive = determine_interactivity(id, _shared_props.interactive, _props.value, dependencies);
-    _shared_props.load_component = (name, variant) => get_component(name, "", api_url, variant);
+    _shared_props.load_component = (name, variant, component_class_id) => get_component(name, component_class_id || "", api_url, variant);
     _shared_props.visible =
         _shared_props.visible === undefined ? true : _shared_props.visible;
     _shared_props.loading_status = {};
@@ -468,9 +493,10 @@ function gather_props(id, props, dependencies, client, api_url, additional = {})
 function handle_visibility(node, api_url) {
     // 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 = {
             ...node,
-            component: get_component(node.type, node.component_class_id, api_url),
+            component: loading_component.component,
             children: []
         };
         if (node.children) {
@@ -526,6 +552,7 @@ function untrack_children_of_closed_accordions_or_inactive_tabs(node, components
         node.children.forEach((child) => {
             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);
                 mark_component_invisible_if_visible(child, hidden_on_startup);

package/dist/src/init.test.skip.d.ts

@@ -0,0 +1 @@
+export {};