@gradio/core 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @gradio/core
 
+## 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

@@ -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

@@ -52,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)
@@ -71,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) {
@@ -205,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
@@ -217,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,
@@ -227,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,
@@ -253,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
@@ -325,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
@@ -450,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 {
@@ -459,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 = {};
@@ -468,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) {
@@ -526,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);

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.3.0",
+  "version": "1.4.0",
   "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.32",
+    "@gradio/annotatedimage": "^0.11.4",
+    "@gradio/audio": "^0.22.4",
+    "@gradio/atoms": "^0.22.2",
     "@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/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/colorpicker": "^0.5.6",
+    "@gradio/code": "^0.17.4",
+    "@gradio/colorpicker": "^0.5.7",
     "@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/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/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/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/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/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/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.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";
@@ -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/init.svelte.ts

@@ -98,6 +98,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(),
@@ -131,7 +132,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;
 	}
 
@@ -237,6 +238,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 +327,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 +341,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 +375,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 +411,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 +479,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 +653,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];
@@ -659,7 +672,7 @@ function gather_props(
 	_shared_props.load_component = (
 		name: string,
 		variant: "base" | "component" | "example"
-	) => get_component(name, "", api_url, variant) as LoadingComponent;
+	) => get_component(name, "", api_url, variant).component as LoadingComponent;
 
 	_shared_props.visible =
 		_shared_props.visible === undefined ? true : _shared_props.visible;
@@ -674,9 +687,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 +776,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);

package/src/init.test.ts

@@ -476,7 +476,7 @@ describe("get_component", () => {
 		);
 	});
 
-	test("if the component is not found then it should request the component from the server", async () => {
+	test.skip("if the component is not found then it should request the component from the server", async () => {
 		const api_url = "example.com";
 		const id = "test-random";
 		const variant = "component";

package/src/init_utils.ts

@@ -13,7 +13,7 @@ export function get_component(
 	class_id: string,
 	root: string,
 	variant: "component" | "example" | "base" = "component"
-): LoadingComponent {
+): { component: LoadingComponent; runtime: false | typeof import("svelte") } {
 	if (type === "api") type = "state";
 
 	return load_component({
@@ -21,7 +21,7 @@ export function get_component(
 		name: type,
 		id: class_id,
 		variant
-	}).component;
+	});
 }
 
 /**

package/src/types.ts

@@ -26,9 +26,9 @@ export interface ProcessedComponentMeta {
 	id: number;
 	props: { shared_props: SharedProps; props: Record<string, unknown> };
 	component: Component | LoadingComponent | null;
+	runtime: false | typeof import("svelte");
 	documentation?: Documentation;
 	children: ProcessedComponentMeta[];
-	//	parent?: ProcessedComponentMeta;
 	component_class_id: string; // ?;
 	key: string | number | null; // ?;
 	rendered_in?: number; // ?;
@@ -128,4 +128,5 @@ export interface AppConfig {
 	autoscroll: boolean;
 	api_prefix: string;
 	api_url: string;
+	fill_height?: boolean;
 }

package/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");
 	};
 }