@gradio/core 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,4 +1,16 @@
 # @gradio/core
+
+## 1.0.1
+
+### Fixes
+
+- [#12416](https://github.com/gradio-app/gradio/pull/12416) [`7e867fd`](https://github.com/gradio-app/gradio/commit/7e867fde9070849fb474a08544c72f2522a9cbe9) - Fix custom components for gradio 6.  Thanks @pngwn!
+- [#12461](https://github.com/gradio-app/gradio/pull/12461) [`9a86e80`](https://github.com/gradio-app/gradio/commit/9a86e8064787029bc20b086c6f3191879f786e0f) - Fix Login Gradio 6.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/utils@0.10.4
+
 ## 1.0.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -40,7 +40,6 @@
 	import * as screen_recorder from "./screen_recorder";
 
 	import { DependencyManager } from "./dependency";
-
 	let {
 		root,
 		components,
@@ -138,11 +137,11 @@
 			// trigger_share(title, description);
 			// TODO: lets combine all of the into a log type with levels
 		} else if (event === "error") {
-			new_message("Error", data, -1, event, 10, true);
+			new_message("Error", data as string, -1, event, 10, true);
 		} else if (event === "warning") {
-			new_message("Warning", data, -1, event, 10, true);
+			new_message("Warning", data as string, -1, event, 10, true);
 		} else if (event === "info") {
-			new_message("Info", data, -1, event, 10, true);
+			new_message("Info", data as string, -1, event, 10, true);
 		} else if (event == "clear_status") {
 			app_tree.update_state(
 				id,
@@ -163,7 +162,7 @@
 			// so we need to pull out the correct id here.
 			if (event === "select" && id in app_tree.initial_tabs) {
 				// this is the id of the selected tab
-				id = data.id;
+				id = (data as { id: number }).id;
 			}
 			dep_manager.dispatch({
 				type: "event",
@@ -239,8 +238,8 @@
 		if (!ApiDocs || !ApiRecorder) {
 			const api_docs_module = await import("./api_docs/ApiDocs.svelte");
 			const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
-			if (!ApiDocs) ApiDocs = api_docs_module.default;
-			if (!ApiRecorder) ApiRecorder = api_recorder_module.default;
+			if (!ApiDocs) ApiDocs = api_docs_module?.default;
+			if (!ApiRecorder) ApiRecorder = api_recorder_module?.default;
 		}
 	}
 

package/dist/src/Login.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import Form from "@gradio/form";
+	import { BaseForm } from "@gradio/form";
 	import { BaseTextbox as Textbox } from "@gradio/textbox";
 	import { BaseButton } from "@gradio/button";
-	import Column from "@gradio/column";
+	import { BaseColumn } from "@gradio/column";
 	import { Block } from "@gradio/atoms";
-	import { _ } from "svelte-i18n";
 	export let root: string;
 	export let auth_message: string | null;
 	export let app_mode: boolean;
 	export let space_id: string | null;
+	export let i18n: (s: string) => string;
 
 	let username = "";
 	let password = "";
@@ -34,23 +34,23 @@
 </script>
 
 <div class="wrap" class:min-h-screen={app_mode}>
-	<Column variant="panel" min_width={480}>
-		<h2>{$_("login.login")}</h2>
+	<BaseColumn variant="panel" min_width={480}>
+		<h2>{i18n("login.login")}</h2>
 		{#if auth_message}
 			<p class="auth">{@html auth_message}</p>
 		{/if}
 		{#if space_id}
 			<p class="auth">
-				{$_("login.enable_cookies")}
+				{i18n("login.enable_cookies")}
 			</p>
 		{/if}
 		{#if incorrect_credentials}
-			<p class="creds">{$_("login.incorrect_credentials")}</p>
+			<p class="creds">{i18n("login.incorrect_credentials")}</p>
 		{/if}
-		<Form>
+		<BaseForm>
 			<Block>
 				<Textbox
-					label={$_("login.username")}
+					label={i18n("login.username")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -61,7 +61,7 @@
 
 			<Block>
 				<Textbox
-					label={$_("login.password")}
+					label={i18n("login.password")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -70,12 +70,12 @@
 					bind:value={password}
 				/>
 			</Block>
-		</Form>
+		</BaseForm>
 
 		<BaseButton size="lg" variant="primary" on:click={submit}
-			>{$_("login.login")}</BaseButton
+			>{i18n("login.login")}</BaseButton
 		>
-	</Column>
+	</BaseColumn>
 </div>
 
 <style>

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

@@ -16,6 +16,7 @@ declare const Login: $$__sveltets_2_IsomorphicComponent<{
     auth_message: string | null;
     app_mode: boolean;
     space_id: string | null;
+    i18n: (s: string) => string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/src/dependency.d.ts

@@ -2,7 +2,7 @@ import type { ComponentMeta, Dependency as IDependency, LayoutNode, Payload } fr
 import { Client, type client_return } from "@gradio/client";
 import { LoadingStatus } from "@gradio/statustracker";
 import type { ToastMessage } from "@gradio/statustracker";
-import type { StatusMessage } from "@gradio/client";
+import type { StatusMessage, LogMessage } from "@gradio/client";
 /**
  * A dependency as used by the frontend
  * This class represents a discrete dependency that can be triggered by an event
@@ -58,6 +58,10 @@ interface DispatchEvent {
     target_id?: number;
     event_data: unknown;
 }
+type UpdateStateCallback = (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>;
+type GetStateCallback = (id: number) => Promise<Record<string, unknown> | null>;
+type RerenderCallback = (components: ComponentMeta[], layout: LayoutNode) => void;
+type LogCallback = (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void;
 /**
  * Manages all dependencies for an app acting as a bridge between app state and Dependencies
  * Responsible for registering dependencies and dispatching events to them
@@ -77,13 +81,13 @@ export declare class DependencyManager {
     client: Client;
     queue: Set<number>;
     add_to_api_calls: (payload: Payload) => void;
-    update_state_cb: (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>;
-    get_state_cb: (id: number) => Promise<Record<string, unknown> | null>;
-    rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void;
-    log_cb: (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void;
+    update_state_cb: UpdateStateCallback;
+    get_state_cb: GetStateCallback;
+    rerender_cb: RerenderCallback;
+    log_cb: LogCallback;
     loading_stati: LoadingStatus;
     constructor(dependencies: IDependency[], client: Client, update_state_cb: (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>, get_state_cb: (id: number) => Promise<Record<string, unknown> | null>, rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void, log_cb: (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void, add_to_api_calls: (payload: Payload) => void);
-    reload(dependencies: IDependency[], update_state: any, get_state: any, rerender: any, client: any): void;
+    reload(dependencies: IDependency[], update_state: UpdateStateCallback, get_state: GetStateCallback, rerender: RerenderCallback, client: Client): void;
     register_loading_stati(deps: Map<number, Dependency>): void;
     clear_loading_status(component_id: number): void;
     update_loading_stati_state(): Promise<void>;

package/dist/src/dependency.js

@@ -125,6 +125,7 @@ export class DependencyManager {
         this.update_state_cb = update_state_cb;
         this.get_state_cb = get_state_cb;
         this.rerender_cb = rerender_cb;
+        this.client = client;
         this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb, client);
     }
     reload(dependencies, update_state, get_state, rerender, client) {
@@ -344,7 +345,9 @@ export class DependencyManager {
                                         return;
                                     }
                                     const _message = result?.message?.replace(MESSAGE_QUOTE_RE, (_, b) => b);
-                                    this.log_cb(result._title ?? "Error", _message, fn_index, "error", status.duration, status.visible);
+                                    this.log_cb(
+                                    //@ts-ignore
+                                    result?._title ?? "Error", _message || "", fn_index, "error", status.duration, status.visible);
                                     throw new Error("Dependency function failed");
                                 }
                                 else {

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

@@ -27,8 +27,8 @@ export declare class AppTree {
     ready: Promise<void>;
     ready_resolve: () => void;
     resolved: boolean;
-    constructor(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: AppConfig, app: client_return, reactive_formatter: (str: string) => string);
-    reload(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: AppConfig): void;
+    constructor(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: Omit<AppConfig, "api_url">, app: client_return, reactive_formatter: (str: string) => string);
+    reload(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: Omit<AppConfig, "api_url">): void;
     /**
      * Registers a component with its ID and data callbacks
      * @param id the ID of the component

package/dist/src/init.svelte.js

@@ -40,7 +40,10 @@ export class AppTree {
             this.ready_resolve = resolve;
         });
         this.reactive_formatter = reactive_formatter;
-        this.#config = config;
+        this.#config = {
+            ...config,
+            api_url: new URL(config.api_prefix, config.root).toString()
+        };
         this.#component_payload = components;
         this.#layout_payload = layout;
         this.#dependency_payload = dependencies;
@@ -67,7 +70,10 @@ export class AppTree {
     reload(components, layout, dependencies, config) {
         this.#layout_payload = layout;
         this.#component_payload = components;
-        this.#config = config;
+        this.#config = {
+            ...config,
+            api_url: new URL(config.api_prefix, config.root).toString()
+        };
         this.#dependency_payload = dependencies;
         this.root = this.create_node({ id: layout.id, children: [] }, new Map(), true);
         for (const comp of components) {
@@ -115,11 +121,11 @@ export class AppTree {
     process() { }
     postprocess(tree) {
         this.root = this.traverse(tree, [
-            (node) => handle_visibility(node, this.#config.root),
-            (node) => untrack_children_of_invisible_parents(node, this.#config.root, this.components_to_register),
-            (node) => handle_empty_forms(node, this.#config.root, this.components_to_register),
-            (node) => translate_props(node, this.#config.root),
-            (node) => apply_initial_tabs(node, this.#config.root, this.initial_tabs),
+            (node) => handle_visibility(node, this.#config.api_url),
+            (node) => untrack_children_of_invisible_parents(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)
         ]);
     }
@@ -191,7 +197,7 @@ 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 });
+        const processed_props = gather_props(opts.id, component.props, [this.#input_ids, this.#output_ids], this.client, this.#config.api_url, { ...this.#config });
         const type = type_map[component.type] || component.type;
         const node = {
             id: opts.id,
@@ -201,7 +207,7 @@ 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.root || "")
+                ? get_component(component.type, component.component_class_id, this.#config.api_url || "")
                 : null,
             key: component.key,
             rendered_in: component.rendered_in,
@@ -242,7 +248,7 @@ export class AppTree {
             this.root = this.traverse(this.root, [
                 //@ts-ignore
                 (n) => set_visibility_for_updated_node(n, id, new_state.visible),
-                (n) => handle_visibility(n, this.#config.root)
+                (n) => handle_visibility(n, this.#config.api_url)
             ]);
             already_updated_visibility = true;
         }
@@ -255,7 +261,7 @@ export class AppTree {
         // need to let the UI settle before traversing again
         // otherwise there could be
         await tick();
-        this.root = this.traverse(this.root, (n) => handle_visibility(n, this.#config.root));
+        this.root = this.traverse(this.root, (n) => handle_visibility(n, this.#config.api_url));
     }
     /**
      * Gets the current state of a component by its ID
@@ -304,7 +310,7 @@ export function process_server_fn(id, server_fns, app) {
  * @param additional any additional props to include
  * @returns the gathered props as an object with `shared_props` and `props` keys
  */
-function gather_props(id, props, dependencies, client, additional = {}) {
+function gather_props(id, props, dependencies, client, api_url, additional = {}) {
     const _shared_props = {};
     const _props = {};
     for (const key in props) {
@@ -336,22 +342,22 @@ function gather_props(id, props, dependencies, client, 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, "", _shared_props.root || "", variant);
+    _shared_props.load_component = (name, variant) => get_component(name, "", api_url, variant);
     _shared_props.visible =
         _shared_props.visible === undefined ? true : _shared_props.visible;
     _shared_props.loading_status = {};
     return { shared_props: _shared_props, props: _props };
 }
-function handle_visibility(node, root) {
+function handle_visibility(node, api_url) {
     // Check if the node is visible
     if (node.props.shared_props.visible && !node.component) {
         const result = {
             ...node,
-            component: get_component(node.type, node.component_class_id, root),
+            component: get_component(node.type, node.component_class_id, api_url),
             children: []
         };
         if (node.children) {
-            result.children = node.children.map((child) => handle_visibility(child, root));
+            result.children = node.children.map((child) => handle_visibility(child, api_url));
         }
         return result;
     }
@@ -372,14 +378,14 @@ function _untrack(node, components_to_register) {
     }
     return;
 }
-function untrack_children_of_invisible_parents(node, root, components_to_register) {
+function untrack_children_of_invisible_parents(node, components_to_register) {
     // Check if the node is visible
     if (node.props.shared_props.visible !== true) {
         _untrack(node, components_to_register);
     }
     return node;
 }
-function handle_empty_forms(node, root, components_to_register) {
+function handle_empty_forms(node, components_to_register) {
     // Check if the node is visible
     if (node.type === "form") {
         const all_children_invisible = node.children.every((child) => child.props.shared_props.visible === false);
@@ -391,7 +397,7 @@ function handle_empty_forms(node, root, components_to_register) {
     }
     return node;
 }
-function translate_props(node, root) {
+function translate_props(node) {
     const supported_props = [
         "description",
         "info",
@@ -413,7 +419,7 @@ function translate_props(node, root) {
     }
     return node;
 }
-function apply_initial_tabs(node, root, initial_tabs) {
+function apply_initial_tabs(node, initial_tabs) {
     if (node.type === "tabs" && node.id in initial_tabs) {
         const tabs = initial_tabs[node.id].sort((a, b) => a.order - b.order);
         node.props.props.initial_tabs = tabs;

package/dist/src/types.d.ts

@@ -107,5 +107,6 @@ export interface AppConfig {
     max_file_size?: number;
     autoscroll: boolean;
     api_prefix: string;
+    api_url: string;
 }
 export {};

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.25",
-    "@gradio/audio": "^0.20.0",
+    "@gradio/annotatedimage": "^0.10.1",
     "@gradio/atoms": "^0.19.0",
     "@gradio/box": "^0.2.26",
     "@gradio/browserstate": "^0.3.3",
     "@gradio/button": "^0.5.14",
-    "@gradio/annotatedimage": "^0.10.1",
-    "@gradio/chatbot": "^0.28.0",
     "@gradio/checkbox": "^0.5.0",
+    "@gradio/chatbot": "^0.28.0",
     "@gradio/client": "^2.0.0",
+    "@gradio/audio": "^0.20.0",
     "@gradio/checkboxgroup": "^0.8.0",
-    "@gradio/column": "^0.3.0",
-    "@gradio/code": "^0.16.0",
+    "@gradio/accordion": "^0.5.25",
     "@gradio/colorpicker": "^0.5.0",
+    "@gradio/code": "^0.16.0",
     "@gradio/dataframe": "^0.21.0",
+    "@gradio/column": "^0.3.0",
     "@gradio/dataset": "^0.5.0",
-    "@gradio/downloadbutton": "^0.4.13",
     "@gradio/datetime": "^0.3.23",
+    "@gradio/downloadbutton": "^0.4.13",
     "@gradio/dropdown": "^0.10.6",
-    "@gradio/file": "^0.13.1",
     "@gradio/fallback": "^0.4.30",
+    "@gradio/file": "^0.13.1",
+    "@gradio/form": "^0.2.27",
     "@gradio/fileexplorer": "^0.5.42",
-    "@gradio/group": "^0.3.0",
     "@gradio/gallery": "^0.15.35",
-    "@gradio/form": "^0.2.26",
+    "@gradio/group": "^0.3.0",
     "@gradio/highlightedtext": "^0.9.14",
     "@gradio/html": "^0.8.0",
-    "@gradio/icons": "^0.15.0",
     "@gradio/image": "^0.24.0",
     "@gradio/imageeditor": "^0.18.2",
+    "@gradio/icons": "^0.15.0",
     "@gradio/imageslider": "^0.3.1",
     "@gradio/json": "^0.5.32",
-    "@gradio/model3d": "^0.15.1",
     "@gradio/markdown": "^0.13.23",
     "@gradio/label": "^0.5.22",
+    "@gradio/model3d": "^0.15.1",
     "@gradio/multimodaltextbox": "^0.11.0",
     "@gradio/nativeplot": "^0.9.0",
-    "@gradio/paramviewer": "^0.9.0",
     "@gradio/number": "^0.7.2",
+    "@gradio/paramviewer": "^0.9.0",
     "@gradio/plot": "^0.9.25",
-    "@gradio/row": "^0.3.0",
     "@gradio/radio": "^0.8.0",
+    "@gradio/row": "^0.3.0",
     "@gradio/sidebar": "^0.1.24",
     "@gradio/simpledropdown": "^0.3.30",
-    "@gradio/simpleimage": "^0.9.1",
     "@gradio/simpletextbox": "^0.3.31",
     "@gradio/slider": "^0.7.0",
+    "@gradio/simpleimage": "^0.9.1",
     "@gradio/state": "^0.2.0",
-    "@gradio/statustracker": "^0.12.0",
     "@gradio/tabitem": "^0.6.2",
     "@gradio/tabs": "^0.5.2",
     "@gradio/textbox": "^0.12.0",
+    "@gradio/statustracker": "^0.12.0",
     "@gradio/theme": "^0.5.0",
     "@gradio/timer": "^0.4.6",
-    "@gradio/uploadbutton": "^0.9.13",
     "@gradio/upload": "^0.17.2",
-    "@gradio/vibeeditor": "^0.3.1",
-    "@gradio/utils": "^0.10.3",
-    "@gradio/video": "^0.17.0"
+    "@gradio/utils": "^0.10.4",
+    "@gradio/uploadbutton": "^0.9.13",
+    "@gradio/video": "^0.17.0",
+    "@gradio/vibeeditor": "^0.3.1"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -40,7 +40,6 @@
 	import * as screen_recorder from "./screen_recorder";
 
 	import { DependencyManager } from "./dependency";
-
 	let {
 		root,
 		components,
@@ -138,11 +137,11 @@
 			// trigger_share(title, description);
 			// TODO: lets combine all of the into a log type with levels
 		} else if (event === "error") {
-			new_message("Error", data, -1, event, 10, true);
+			new_message("Error", data as string, -1, event, 10, true);
 		} else if (event === "warning") {
-			new_message("Warning", data, -1, event, 10, true);
+			new_message("Warning", data as string, -1, event, 10, true);
 		} else if (event === "info") {
-			new_message("Info", data, -1, event, 10, true);
+			new_message("Info", data as string, -1, event, 10, true);
 		} else if (event == "clear_status") {
 			app_tree.update_state(
 				id,
@@ -163,7 +162,7 @@
 			// so we need to pull out the correct id here.
 			if (event === "select" && id in app_tree.initial_tabs) {
 				// this is the id of the selected tab
-				id = data.id;
+				id = (data as { id: number }).id;
 			}
 			dep_manager.dispatch({
 				type: "event",
@@ -239,8 +238,8 @@
 		if (!ApiDocs || !ApiRecorder) {
 			const api_docs_module = await import("./api_docs/ApiDocs.svelte");
 			const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
-			if (!ApiDocs) ApiDocs = api_docs_module.default;
-			if (!ApiRecorder) ApiRecorder = api_recorder_module.default;
+			if (!ApiDocs) ApiDocs = api_docs_module?.default;
+			if (!ApiRecorder) ApiRecorder = api_recorder_module?.default;
 		}
 	}
 

package/src/Login.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import Form from "@gradio/form";
+	import { BaseForm } from "@gradio/form";
 	import { BaseTextbox as Textbox } from "@gradio/textbox";
 	import { BaseButton } from "@gradio/button";
-	import Column from "@gradio/column";
+	import { BaseColumn } from "@gradio/column";
 	import { Block } from "@gradio/atoms";
-	import { _ } from "svelte-i18n";
 	export let root: string;
 	export let auth_message: string | null;
 	export let app_mode: boolean;
 	export let space_id: string | null;
+	export let i18n: (s: string) => string;
 
 	let username = "";
 	let password = "";
@@ -34,23 +34,23 @@
 </script>
 
 <div class="wrap" class:min-h-screen={app_mode}>
-	<Column variant="panel" min_width={480}>
-		<h2>{$_("login.login")}</h2>
+	<BaseColumn variant="panel" min_width={480}>
+		<h2>{i18n("login.login")}</h2>
 		{#if auth_message}
 			<p class="auth">{@html auth_message}</p>
 		{/if}
 		{#if space_id}
 			<p class="auth">
-				{$_("login.enable_cookies")}
+				{i18n("login.enable_cookies")}
 			</p>
 		{/if}
 		{#if incorrect_credentials}
-			<p class="creds">{$_("login.incorrect_credentials")}</p>
+			<p class="creds">{i18n("login.incorrect_credentials")}</p>
 		{/if}
-		<Form>
+		<BaseForm>
 			<Block>
 				<Textbox
-					label={$_("login.username")}
+					label={i18n("login.username")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -61,7 +61,7 @@
 
 			<Block>
 				<Textbox
-					label={$_("login.password")}
+					label={i18n("login.password")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -70,12 +70,12 @@
 					bind:value={password}
 				/>
 			</Block>
-		</Form>
+		</BaseForm>
 
 		<BaseButton size="lg" variant="primary" on:click={submit}
-			>{$_("login.login")}</BaseButton
+			>{i18n("login.login")}</BaseButton
 		>
-	</Column>
+	</BaseColumn>
 </div>
 
 <style>

package/src/dependency.ts

@@ -9,7 +9,11 @@ import { AsyncFunction } from "./init_utils";
 import { Client, type client_return } from "@gradio/client";
 import { LoadingStatus, type LoadingStatusArgs } from "@gradio/statustracker";
 import type { ToastMessage } from "@gradio/statustracker";
-import type { StatusMessage, ValidationError } from "@gradio/client";
+import type {
+	StatusMessage,
+	ValidationError,
+	LogMessage
+} from "@gradio/client";
 const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
 const NOVALUE = Symbol("NOVALUE");
@@ -150,6 +154,25 @@ interface DispatchEvent {
 	event_data: unknown;
 }
 
+type UpdateStateCallback = (
+	id: number,
+	state: Record<string, unknown>,
+	check_visibility?: boolean
+) => Promise<void>;
+type GetStateCallback = (id: number) => Promise<Record<string, unknown> | null>;
+type RerenderCallback = (
+	components: ComponentMeta[],
+	layout: LayoutNode
+) => void;
+type LogCallback = (
+	title: string,
+	message: string,
+	fn_index: number,
+	type: ToastMessage["type"],
+	duration?: number | null,
+	visible?: boolean
+) => void;
+
 /**
  * Manages all dependencies for an app acting as a bridge between app state and Dependencies
  * Responsible for registering dependencies and dispatching events to them
@@ -171,21 +194,11 @@ export class DependencyManager {
 	queue: Set<number> = new Set();
 	add_to_api_calls: (payload: Payload) => void;
 
-	update_state_cb: (
-		id: number,
-		state: Record<string, unknown>,
-		check_visibility?: boolean
-	) => Promise<void>;
-	get_state_cb: (id: number) => Promise<Record<string, unknown> | null>;
-	rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void;
-	log_cb: (
-		title: string,
-		message: string,
-		fn_index: number,
-		type: ToastMessage["type"],
-		duration?: number | null,
-		visible?: boolean
-	) => void;
+	update_state_cb: UpdateStateCallback;
+	get_state_cb: GetStateCallback;
+	rerender_cb: RerenderCallback;
+	log_cb: LogCallback;
+
 	loading_stati = new LoadingStatus();
 
 	constructor(
@@ -213,6 +226,7 @@ export class DependencyManager {
 		this.update_state_cb = update_state_cb;
 		this.get_state_cb = get_state_cb;
 		this.rerender_cb = rerender_cb;
+		this.client = client;
 		this.reload(
 			dependencies,
 			update_state_cb,
@@ -224,10 +238,10 @@ export class DependencyManager {
 
 	reload(
 		dependencies: IDependency[],
-		update_state,
-		get_state,
-		rerender,
-		client
+		update_state: UpdateStateCallback,
+		get_state: GetStateCallback,
+		rerender: RerenderCallback,
+		client: Client
 	) {
 		const { by_id, by_event } = this.create(dependencies);
 		this.dependencies_by_event = by_event;
@@ -367,7 +381,7 @@ export class DependencyManager {
 							data: data_payload,
 							event_data: event_meta.event_data
 						};
-						submission!.send_chunk(payload);
+						submission!.send_chunk(payload as any);
 						unset_args.forEach((fn) => fn());
 						continue;
 					}
@@ -508,8 +522,9 @@ export class DependencyManager {
 										(_, b) => b
 									);
 									this.log_cb(
-										result._title ?? "Error",
-										_message,
+										//@ts-ignore
+										result?._title ?? "Error",
+										_message || "",
 										fn_index,
 										"error",
 										status.duration,

package/src/init.svelte.ts

@@ -77,7 +77,7 @@ export class AppTree {
 		components: ComponentMeta[],
 		layout: LayoutNode,
 		dependencies: Dependency[],
-		config: AppConfig,
+		config: Omit<AppConfig, "api_url">,
 		app: client_return,
 		reactive_formatter: (str: string) => string
 	) {
@@ -85,8 +85,10 @@ export class AppTree {
 			this.ready_resolve = resolve;
 		});
 		this.reactive_formatter = reactive_formatter;
-
-		this.#config = config;
+		this.#config = {
+			...config,
+			api_url: new URL(config.api_prefix, config.root).toString()
+		};
 		this.#component_payload = components;
 		this.#layout_payload = layout;
 		this.#dependency_payload = dependencies;
@@ -129,11 +131,14 @@ export class AppTree {
 		components: ComponentMeta[],
 		layout: LayoutNode,
 		dependencies: Dependency[],
-		config: AppConfig
+		config: Omit<AppConfig, "api_url">
 	) {
 		this.#layout_payload = layout;
 		this.#component_payload = components;
-		this.#config = config;
+		this.#config = {
+			...config,
+			api_url: new URL(config.api_prefix, config.root).toString()
+		};
 		this.#dependency_payload = dependencies;
 
 		this.root = this.create_node(
@@ -203,21 +208,15 @@ export class AppTree {
 
 	postprocess(tree: ProcessedComponentMeta) {
 		this.root = this.traverse(tree, [
-			(node) => handle_visibility(node, this.#config.root),
+			(node) => handle_visibility(node, this.#config.api_url),
 			(node) =>
 				untrack_children_of_invisible_parents(
 					node,
-					this.#config.root,
 					this.components_to_register
 				),
-			(node) =>
-				handle_empty_forms(
-					node,
-					this.#config.root,
-					this.components_to_register
-				),
-			(node) => translate_props(node, this.#config.root),
-			(node) => apply_initial_tabs(node, this.#config.root, this.initial_tabs),
+			(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)
 		]);
 	}
@@ -317,6 +316,7 @@ export class AppTree {
 			component.props,
 			[this.#input_ids, this.#output_ids],
 			this.client,
+			this.#config.api_url,
 			{ ...this.#config }
 		);
 
@@ -335,7 +335,7 @@ export class AppTree {
 					? get_component(
 							component.type,
 							component.component_class_id,
-							this.#config.root || ""
+							this.#config.api_url || ""
 						)
 					: null,
 			key: component.key,
@@ -391,7 +391,7 @@ export class AppTree {
 			this.root = this.traverse(this.root!, [
 				//@ts-ignore
 				(n) => set_visibility_for_updated_node(n, id, new_state.visible),
-				(n) => handle_visibility(n, this.#config.root)
+				(n) => handle_visibility(n, this.#config.api_url)
 			]);
 			already_updated_visibility = true;
 		}
@@ -403,7 +403,7 @@ export class AppTree {
 		// otherwise there could be
 		await tick();
 		this.root = this.traverse(this.root!, (n) =>
-			handle_visibility(n, this.#config.root)
+			handle_visibility(n, this.#config.api_url)
 		);
 	}
 
@@ -464,6 +464,7 @@ function gather_props(
 	props: ComponentMeta["props"],
 	dependencies: [Set<number>, Set<number>],
 	client: client_return,
+	api_url: string,
 	additional: Record<string, unknown> = {}
 ): {
 	shared_props: SharedProps;
@@ -508,13 +509,7 @@ function gather_props(
 	_shared_props.load_component = (
 		name: string,
 		variant: "base" | "component" | "example"
-	) =>
-		get_component(
-			name,
-			"",
-			_shared_props.root || "",
-			variant
-		) as LoadingComponent;
+	) => get_component(name, "", api_url, variant) as LoadingComponent;
 
 	_shared_props.visible =
 		_shared_props.visible === undefined ? true : _shared_props.visible;
@@ -525,19 +520,19 @@ function gather_props(
 
 function handle_visibility(
 	node: ProcessedComponentMeta,
-	root: string
+	api_url: string
 ): ProcessedComponentMeta {
 	// Check if the node is visible
 	if (node.props.shared_props.visible && !node.component) {
 		const result: ProcessedComponentMeta = {
 			...node,
-			component: get_component(node.type, node.component_class_id, root),
+			component: get_component(node.type, node.component_class_id, api_url),
 			children: []
 		};
 
 		if (node.children) {
 			result.children = node.children.map((child) =>
-				handle_visibility(child, root)
+				handle_visibility(child, api_url)
 			);
 		}
 		return result;
@@ -570,7 +565,6 @@ function _untrack(
 
 function untrack_children_of_invisible_parents(
 	node: ProcessedComponentMeta,
-	root: string,
 	components_to_register: Set<number>
 ): ProcessedComponentMeta {
 	// Check if the node is visible
@@ -582,7 +576,6 @@ function untrack_children_of_invisible_parents(
 
 function handle_empty_forms(
 	node: ProcessedComponentMeta,
-	root: string,
 	components_to_register: Set<number>
 ): ProcessedComponentMeta {
 	// Check if the node is visible
@@ -601,10 +594,7 @@ function handle_empty_forms(
 	return node;
 }
 
-function translate_props(
-	node: ProcessedComponentMeta,
-	root: string
-): ProcessedComponentMeta {
+function translate_props(node: ProcessedComponentMeta): ProcessedComponentMeta {
 	const supported_props = [
 		"description",
 		"info",
@@ -631,7 +621,6 @@ function translate_props(
 
 function apply_initial_tabs(
 	node: ProcessedComponentMeta,
-	root: string,
 	initial_tabs: Record<number, Tab[]>
 ): ProcessedComponentMeta {
 	if (node.type === "tabs" && node.id in initial_tabs) {

package/src/types.ts

@@ -126,4 +126,5 @@ export interface AppConfig {
 	max_file_size?: number;
 	autoscroll: boolean;
 	api_prefix: string;
+	api_url: string;
 }