@gradio/core 1.2.0 → 1.4.0

package/dist/src/dependency.js

@@ -118,13 +118,16 @@ export class DependencyManager {
     get_state_cb;
     rerender_cb;
     log_cb;
+    on_connection_lost_cb;
     loading_stati = new LoadingStatus();
-    constructor(dependencies, client, update_state_cb, get_state_cb, rerender_cb, log_cb, add_to_api_calls) {
+    connection_lost = false;
+    constructor(dependencies, client, update_state_cb, get_state_cb, rerender_cb, log_cb, add_to_api_calls, on_connection_lost_cb) {
         this.add_to_api_calls = add_to_api_calls;
         this.log_cb = log_cb;
         this.update_state_cb = update_state_cb;
         this.get_state_cb = get_state_cb;
         this.rerender_cb = rerender_cb;
+        this.on_connection_lost_cb = on_connection_lost_cb;
         this.client = client;
         this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb, client);
     }
@@ -180,6 +183,8 @@ export class DependencyManager {
      * @returns a value if there is no backend fn, a 'submission' if there is a backend fn, or null if there is no dependency
      */
     async dispatch(event_meta) {
+        if (this.connection_lost)
+            return;
         let deps;
         if (event_meta.type === "fn") {
             const dep = this.dependencies_by_fn.get(event_meta.fn_index);
@@ -314,6 +319,19 @@ export class DependencyManager {
                                     this.update_loading_stati_state();
                                 }
                                 else if (result.stage === "error") {
+                                    if (result.broken || result.session_not_found) {
+                                        if (!this.connection_lost) {
+                                            this.connection_lost = true;
+                                            this.on_connection_lost_cb();
+                                        }
+                                        this.loading_stati.update({
+                                            status: "complete",
+                                            fn_index: dep.id,
+                                            stream_state: null
+                                        });
+                                        this.update_loading_stati_state();
+                                        break submit_loop;
+                                    }
                                     if (Array.isArray(result?.message)) {
                                         result.message.forEach((m, i) => {
                                             this.update_state_cb(dep.inputs[i], {

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

@@ -61,8 +61,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

@@ -31,6 +31,7 @@ export class AppTree {
     #pending_components = [];
     #get_callbacks = new Map();
     #set_callbacks = new Map();
+    #pending_updates = new Map();
     #event_dispatcher;
     component_ids;
     initial_tabs = {};
@@ -51,6 +52,7 @@ export class AppTree {
         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)
@@ -70,7 +72,6 @@ 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) {
@@ -110,6 +111,20 @@ 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();
@@ -190,7 +205,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
@@ -202,8 +218,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,
@@ -212,8 +235,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,
@@ -238,15 +262,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
@@ -276,11 +291,22 @@ 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);
             }
@@ -299,6 +325,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
@@ -316,24 +351,58 @@ export class AppTree {
         return null;
     }
     async render_previously_invisible_children(id) {
-        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, hidden_on_startup) {
+function make_visible_if_not_rendered(node, hidden_on_startup, is_target_node = false) {
     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, hidden_on_startup) {
+    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, api_url) {
+    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));
 }
 /**
  * Process the server function names and return a dictionary of functions
@@ -390,6 +459,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 {
@@ -399,7 +469,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) => get_component(name, "", api_url, variant).component;
     _shared_props.visible =
         _shared_props.visible === undefined ? true : _shared_props.visible;
     _shared_props.loading_status = {};
@@ -408,9 +478,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) {
@@ -466,6 +537,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);
@@ -492,8 +564,10 @@ function _gather_initial_tabs(node, initial_tabs, parent_tab_id, order) {
         if (!("id" in node.props.props)) {
             node.props.props.id = node.id;
         }
+        const i18n = node.props.props.i18n;
+        const raw_label = node.props.shared_props.label;
         initial_tabs[parent_tab_id].push({
-            label: node.props.shared_props.label,
+            label: i18n ? i18n(raw_label) : raw_label,
             id: node.props.props.id,
             elem_id: node.props.shared_props.elem_id,
             visible: node.props.shared_props.visible,

package/dist/src/init_utils.d.ts

@@ -6,7 +6,10 @@ import type { Dependency, LoadingComponent } from "./types";
  * @param root
  * @returns the loading component
  */
-export declare function get_component(type: string, class_id: string, root: string, variant?: "component" | "example" | "base"): LoadingComponent;
+export declare function get_component(type: string, class_id: string, root: string, variant?: "component" | "example" | "base"): {
+    component: LoadingComponent;
+    runtime: false | typeof import("svelte");
+};
 /**
  * Get all component ids that are an input dependency and all that are an output dependency
  * @param dep the dependency

package/dist/src/init_utils.js

@@ -14,7 +14,7 @@ export function get_component(type, class_id, root, variant = "component") {
         name: type,
         id: class_id,
         variant
-    }).component;
+    });
 }
 /**
  * Get all component ids that are an input dependency and all that are an output dependency

package/dist/src/types.d.ts

@@ -23,6 +23,7 @@ export interface ProcessedComponentMeta {
         props: Record<string, unknown>;
     };
     component: Component | LoadingComponent | null;
+    runtime: false | typeof import("svelte");
     documentation?: Documentation;
     children: ProcessedComponentMeta[];
     component_class_id: string;
@@ -109,5 +110,6 @@ export interface AppConfig {
     autoscroll: boolean;
     api_prefix: string;
     api_url: string;
+    fill_height?: boolean;
 }
 export {};

package/dist/src/vite-env-override.d.ts

@@ -16,5 +16,6 @@ declare module "virtual:component-loader" {
 	export function load_component(args: Args): {
 		name: ComponentMeta["type"];
 		component: LoadedComponent;
+		runtime: false | typeof import("svelte");
 	};
 }

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.31",
-    "@gradio/audio": "^0.22.3",
-    "@gradio/atoms": "^0.22.0",
+    "@gradio/accordion": "^0.5.32",
+    "@gradio/annotatedimage": "^0.11.4",
+    "@gradio/audio": "^0.22.4",
+    "@gradio/atoms": "^0.22.2",
     "@gradio/box": "^0.2.30",
-    "@gradio/annotatedimage": "^0.11.3",
-    "@gradio/browserstate": "^0.3.6",
-    "@gradio/button": "^0.6.3",
-    "@gradio/checkbox": "^0.6.3",
-    "@gradio/checkboxgroup": "^0.9.3",
-    "@gradio/client": "^2.0.4",
-    "@gradio/code": "^0.17.3",
-    "@gradio/colorpicker": "^0.5.6",
-    "@gradio/dataframe": "^0.21.5",
-    "@gradio/dataset": "^0.5.4",
-    "@gradio/chatbot": "^0.29.4",
+    "@gradio/button": "^0.6.5",
+    "@gradio/browserstate": "^0.3.7",
+    "@gradio/chatbot": "^0.29.5",
+    "@gradio/checkbox": "^0.6.4",
+    "@gradio/checkboxgroup": "^0.9.4",
+    "@gradio/client": "^2.1.0",
+    "@gradio/code": "^0.17.4",
+    "@gradio/colorpicker": "^0.5.7",
     "@gradio/column": "^0.3.2",
-    "@gradio/datetime": "^0.4.3",
-    "@gradio/dropdown": "^0.11.4",
-    "@gradio/fallback": "^0.4.34",
-    "@gradio/file": "^0.14.3",
-    "@gradio/form": "^0.3.0",
-    "@gradio/downloadbutton": "^0.4.17",
-    "@gradio/gallery": "^0.17.1",
-    "@gradio/fileexplorer": "^0.6.3",
-    "@gradio/group": "^0.3.2",
-    "@gradio/highlightedtext": "^0.11.2",
-    "@gradio/html": "^0.9.3",
+    "@gradio/datetime": "^0.4.4",
+    "@gradio/dataframe": "^0.21.7",
+    "@gradio/downloadbutton": "^0.4.18",
+    "@gradio/dataset": "^0.5.5",
+    "@gradio/dropdown": "^0.11.5",
+    "@gradio/file": "^0.14.4",
+    "@gradio/fallback": "^0.4.35",
+    "@gradio/fileexplorer": "^0.6.4",
+    "@gradio/gallery": "^0.17.3",
+    "@gradio/form": "^0.3.1",
+    "@gradio/group": "^0.3.3",
+    "@gradio/html": "^0.11.1",
+    "@gradio/highlightedtext": "^0.11.3",
     "@gradio/icons": "^0.15.1",
-    "@gradio/imageeditor": "^0.18.6",
-    "@gradio/image": "^0.25.3",
-    "@gradio/label": "^0.6.3",
-    "@gradio/json": "^0.7.2",
-    "@gradio/imageslider": "^0.4.3",
-    "@gradio/markdown": "^0.13.28",
-    "@gradio/model3d": "^0.16.4",
-    "@gradio/multimodaltextbox": "^0.11.6",
-    "@gradio/paramviewer": "^0.9.4",
-    "@gradio/nativeplot": "^0.10.2",
-    "@gradio/number": "^0.8.3",
-    "@gradio/plot": "^0.10.4",
-    "@gradio/radio": "^0.9.3",
+    "@gradio/image": "^0.25.4",
+    "@gradio/imageeditor": "^0.18.7",
+    "@gradio/imageslider": "^0.4.4",
+    "@gradio/json": "^0.7.3",
+    "@gradio/label": "^0.6.4",
+    "@gradio/markdown": "^0.13.29",
+    "@gradio/multimodaltextbox": "^0.11.7",
+    "@gradio/number": "^0.8.4",
+    "@gradio/nativeplot": "^0.10.3",
+    "@gradio/paramviewer": "^0.9.5",
+    "@gradio/model3d": "^0.16.5",
+    "@gradio/plot": "^0.10.5",
+    "@gradio/sidebar": "^0.2.4",
+    "@gradio/radio": "^0.9.4",
+    "@gradio/simpledropdown": "^0.3.35",
+    "@gradio/simpleimage": "^0.9.6",
+    "@gradio/simpletextbox": "^0.3.37",
     "@gradio/row": "^0.3.1",
-    "@gradio/simpletextbox": "^0.3.36",
-    "@gradio/simpledropdown": "^0.3.34",
-    "@gradio/sidebar": "^0.2.3",
-    "@gradio/simpleimage": "^0.9.5",
-    "@gradio/slider": "^0.7.6",
-    "@gradio/state": "^0.2.2",
-    "@gradio/tabitem": "^0.6.5",
-    "@gradio/statustracker": "^0.12.4",
-    "@gradio/tabs": "^0.5.6",
+    "@gradio/state": "^0.2.3",
+    "@gradio/slider": "^0.7.7",
+    "@gradio/tabitem": "^0.6.6",
+    "@gradio/statustracker": "^0.12.5",
+    "@gradio/textbox": "^0.13.5",
+    "@gradio/tabs": "^0.5.8",
     "@gradio/theme": "^0.6.1",
-    "@gradio/textbox": "^0.13.4",
-    "@gradio/upload": "^0.17.6",
-    "@gradio/timer": "^0.4.8",
-    "@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.0",
+    "@gradio/uploadbutton": "^0.9.18",
+    "@gradio/video": "^0.20.4",
+    "@gradio/vibeeditor": "^0.3.6"
   },
   "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";
@@ -104,6 +96,7 @@
 	});
 
 	let messages: (ToastMessage & { fn_index: number })[] = $state([]);
+	let reconnect_interval: ReturnType<typeof setInterval> | null = null;
 
 	function gradio_event_dispatcher(
 		id: number,
@@ -170,7 +163,8 @@
 			version,
 			api_prefix,
 			max_file_size,
-			autoscroll
+			autoscroll,
+			fill_height
 		},
 		app,
 		$reactive_formatter,
@@ -190,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
@@ -206,6 +195,35 @@
 		api_calls = [...api_calls, last_api_call];
 	};
 
+	function handle_connection_lost(): void {
+		messages = messages.filter((m) => m.type !== "error");
+
+		++_error_id;
+		messages.push({
+			title: "Connection Lost",
+			message: LOST_CONNECTION_MESSAGE,
+			fn_index: -1,
+			type: "error",
+			id: _error_id,
+			duration: null,
+			visible: true
+		});
+
+		reconnect_interval = setInterval(async () => {
+			try {
+				const status = await app.reconnect();
+				if (status === "connected" || status === "changed") {
+					clearInterval(reconnect_interval!);
+					reconnect_interval = null;
+					window.location.reload();
+				}
+			} catch (e) {
+				// server still unreachable
+				console.debug(e);
+			}
+		}, 2000);
+	}
+
 	let dep_manager = new DependencyManager(
 		dependencies,
 		app,
@@ -213,7 +231,8 @@
 		app_tree.get_state.bind(app_tree),
 		app_tree.rerender.bind(app_tree),
 		new_message,
-		add_to_api_calls
+		add_to_api_calls,
+		handle_connection_lost
 	);
 
 	$effect(() => {
@@ -225,7 +244,8 @@
 				version,
 				api_prefix,
 				max_file_size,
-				autoscroll
+				autoscroll,
+				fill_height
 			});
 			dep_manager.reload(
 				dependencies,
@@ -426,6 +446,7 @@
 		return () => {
 			mut.disconnect();
 			res.disconnect();
+			if (reconnect_interval) clearInterval(reconnect_interval);
 		};
 	});
 

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}