@gradio/core 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @gradio/core
 
+## 1.4.2
+
+### Fixes
+
+- [#13048](https://github.com/gradio-app/gradio/pull/13048) [`a5d4096`](https://github.com/gradio-app/gradio/commit/a5d40965bba21a832da522127048926b71c1a6dd) - Fix Tab Interactive Bug.  Thanks @freddyaboulton!
+- [#13172](https://github.com/gradio-app/gradio/pull/13172) [`03a9d4c`](https://github.com/gradio-app/gradio/commit/03a9d4c99f3c9466e4fc162d02800850ed67a29e) - fix: prevent [object Object] when label matches a nested i18n key.  Thanks @mango766!
+
+### Dependency updates
+
+- @gradio/utils@0.12.2
+- @gradio/atoms@0.23.0
+- @gradio/statustracker@0.13.1
+- @gradio/upload@0.17.8
+- @gradio/tabs@0.5.9
+- @gradio/code@0.17.6
+- @gradio/html@0.12.1
+- @gradio/paramviewer@0.9.7
+- @gradio/image@0.26.1
+- @gradio/checkbox@0.6.6
+- @gradio/video@0.20.6
+- @gradio/file@0.14.6
+- @gradio/gallery@0.17.5
+- @gradio/plot@0.10.7
+- @gradio/textbox@0.13.7
+- @gradio/dropdown@0.11.7
+- @gradio/audio@0.23.1
+
+## 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

package/dist/src/gradio_helper.js

@@ -12,7 +12,8 @@ export function formatter(value) {
         return translate_i18n_marker(string_value, translate);
     }
     const direct_translation = translate(string_value);
-    if (direct_translation !== string_value) {
+    if (typeof direct_translation === "string" &&
+        direct_translation !== string_value) {
         return direct_translation;
     }
     return string_value;

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 */

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,9 +58,10 @@ 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;
@@ -77,9 +91,10 @@ export class AppTree {
     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);
@@ -268,11 +283,6 @@ export class AppTree {
      * @param new_state the new state to set
      * */
     async update_state(id, new_state, check_visibility = true) {
-        // Visibility is tricky 😅
-        // If the component is not visible, it has not been rendered
-        // and so it has no _set_data callback
-        // Therefore, we need to traverse the tree and set the visible prop to true
-        // and then render it and its children. After that, we can call the _set_data callback
         const node = find_node_by_id(this.root, id);
         let already_updated_visibility = false;
         if (check_visibility && !node?.component) {
@@ -310,6 +320,11 @@ export class AppTree {
             if ("value" in new_state && !dequal(old_value, new_state.value)) {
                 this.#event_dispatcher(id, "change", null);
             }
+            // If this is a non-mounted tabitem, update the parent Tabs'
+            // initial_tabs so the tab button reflects the new state.
+            if (node?.type === "tabitem") {
+                this.#update_parent_tabs_initial_tab(id, node);
+            }
         }
         else if (_set_data) {
             _set_data(new_state);
@@ -334,6 +349,48 @@ export class AppTree {
             this.update_visibility(child, new_state);
         });
     }
+    /**
+     * Updates the parent Tabs component's initial_tabs when a non-mounted
+     * tabitem's props change. This ensures the tab button (rendered by
+     * the Tabs component) reflects the updated state even though the
+     * TabItem component itself is not mounted.
+     */
+    #update_parent_tabs_initial_tab(id, node) {
+        const parent = find_parent(this.root, id);
+        if (!parent || parent.type !== "tabs")
+            return;
+        const initial_tabs = parent.props.props.initial_tabs;
+        if (!initial_tabs)
+            return;
+        const tab_index = initial_tabs.findIndex((t) => t.component_id === node.id);
+        if (tab_index === -1)
+            return;
+        const i18n = node.props.props.i18n;
+        const raw_label = node.props.shared_props.label;
+        // Use original_visibility since the node's visible may have been
+        // set to false by the startup optimization for non-selected tabs.
+        const visible = "original_visibility" in node
+            ? node.original_visibility
+            : node.props.shared_props.visible;
+        initial_tabs[tab_index] = {
+            label: i18n ? i18n(raw_label) : raw_label,
+            id: node.props.props.id,
+            elem_id: node.props.shared_props.elem_id,
+            visible,
+            interactive: node.props.shared_props.interactive,
+            scale: node.props.shared_props.scale || null,
+            component_id: node.id
+        };
+        // Trigger reactivity by replacing the array
+        parent.props.props.initial_tabs = [...initial_tabs];
+        // Also update via _set_data if the Tabs component is mounted
+        const parent_set_data = this.#set_callbacks.get(parent.id);
+        if (parent_set_data) {
+            parent_set_data({
+                initial_tabs: parent.props.props.initial_tabs
+            });
+        }
+    }
     /**
      * Gets the current state of a component by its ID
      * @param id the ID of the component to get the state of
@@ -469,7 +526,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).component;
+    _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 = {};

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

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