Fix Reload Mode in 6.0 (#12383)

* Fix but ugly

* add changeset

* Remove console.log

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

Author: freddyaboulton

.changeset/heavy-lights-shop.md

@@ -0,0 +1,9 @@
+---
+"@gradio/core": minor
+"@gradio/dataset": minor
+"@self/app": minor
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:Fix Reload Mode in 6.0

js/app/src/routes/[...catchall]/+page.svelte

@@ -212,6 +212,7 @@
 	let wrapper: HTMLDivElement;
 	let ready = false;
 	let render_complete = false;
+	let reload_count = 0;
 	$: config = data.config;
 
 	let intersecting: ReturnType<typeof create_intersection_store> = {
@@ -313,7 +314,7 @@
 					if (!app.config) {
 						throw new Error("Could not resolve app config");
 					}
-
+					reload_count += 1;
 					config = app.config;
 					window.__gradio_space__ = config.space_id;
 				});

js/core/src/Blocks.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { tick, onMount, setContext, settled } from "svelte";
+	import { tick, onMount, setContext, settled, untrack } from "svelte";
 	import { _ } from "svelte-i18n";
 	import { Client } from "@gradio/client";
 	import { writable } from "svelte/store";
@@ -66,7 +66,8 @@
 		vibe_mode,
 		search_params,
 		render_complete = false,
-		ready = $bindable(false)
+		ready = $bindable(false),
+		reload_count = $bindable(0)
 	}: {
 		root: string;
 		components: ComponentMeta[];
@@ -93,6 +94,7 @@
 		search_params: URLSearchParams;
 		render_complete: boolean;
 		ready: boolean;
+		reload_count: number;
 	} = $props();
 
 	components.forEach((comp) => {
@@ -178,7 +180,7 @@
 		api_calls = [...api_calls, payload];
 	};
 
-	const dep_manager = new DependencyManager(
+	let dep_manager = new DependencyManager(
 		dependencies,
 		app,
 		app_tree.update_state.bind(app_tree),
@@ -188,16 +190,26 @@
 		add_to_api_calls
 	);
 
-	let old_dependencies = dependencies;
-	// $: if (
-	// 	dependencies !== old_dependencies &&
-	// 	render_complete &&
-	// 	!layout_creating
-	// ) {
-	// 	// re-run load triggers in SSR mode when page changes
-	// 	// handle_load_triggers();
-	// 	old_dependencies = dependencies;
-	// }
+	$effect(() => {
+		reload_count;
+		untrack(() => {
+			app_tree.reload(components, layout, dependencies, {
+				root,
+				theme: theme_mode,
+				version,
+				api_prefix,
+				max_file_size,
+				autoscroll
+			});
+			dep_manager.reload(
+				dependencies,
+				app_tree.update_state.bind(app_tree),
+				app_tree.get_state.bind(app_tree),
+				app_tree.rerender.bind(app_tree),
+				app
+			);
+		});
+	});
 
 	let vibe_editor_width = 350;
 

js/core/src/dependency.ts

@@ -204,25 +204,36 @@ export class DependencyManager {
 		) => void,
 		add_to_api_calls: (payload: Payload) => void
 	) {
-		const { by_id, by_event } = this.create(dependencies);
-
-		this.dependencies_by_event = by_event;
-		this.dependencies_by_fn = by_id;
+		this.add_to_api_calls = add_to_api_calls;
 		this.client = client;
-		this.update_state_cb = update_state_cb;
-		this.get_state_cb = get_state_cb;
-		this.rerender_cb = rerender_cb;
 		this.log_cb = log_cb;
-		this.add_to_api_calls = add_to_api_calls;
+		// this.update_state_cb = update_state_cb;
+		// this.get_state_cb = get_state_cb;
+		// this.rerender_cb = rerender_cb;
+		this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb);
+	}
 
+	reload(
+		dependencies: IDependency[],
+		update_state,
+		get_state,
+		rerender,
+		client
+	) {
+		const { by_id, by_event } = this.create(dependencies);
+		this.dependencies_by_event = by_event;
+		this.dependencies_by_fn = by_id;
 		for (const [dep_id, dep] of this.dependencies_by_fn) {
 			for (const [output_id] of dep.targets) {
 				this.set_event_args(output_id, dep.event_args);
 			}
 		}
+		this.client = client;
+		this.update_state_cb = update_state;
+		this.get_state_cb = get_state;
+		this.rerender_cb = rerender;
 		this.register_loading_stati(by_id);
 	}
-
 	register_loading_stati(deps: Map<number, Dependency>): void {
 		for (const [_, dep] of deps) {
 			this.loading_stati.register(

js/core/src/init.svelte.ts

@@ -110,7 +110,56 @@ export class AppTree {
 
 		this.root!.children = this.#layout_payload.children.map((node) =>
 			this.traverse(node, (node) => {
-				const new_node = this.create_node(node, component_map);
+				const new_node = this.create_node(
+					node,
+					component_map,
+					false,
+					this.reactive_formatter
+				);
+				return new_node;
+			})
+		);
+		this.component_ids = components.map((c) => c.id);
+		this.initial_tabs = {};
+		gather_initial_tabs(this.root!, this.initial_tabs);
+		this.postprocess(this.root!);
+	}
+
+	reload(
+		components: ComponentMeta[],
+		layout: LayoutNode,
+		dependencies: Dependency[],
+		config: AppConfig
+	) {
+		this.#layout_payload = layout;
+		this.#component_payload = components;
+		this.#config = config;
+		this.#dependency_payload = dependencies;
+
+		this.root = this.create_node(
+			{ id: layout.id, children: [] },
+			new Map(),
+			true
+		);
+		for (const comp of components) {
+			if (comp.props.visible != false) this.components_to_register.add(comp.id);
+		}
+
+		this.prepare();
+
+		const component_map = components.reduce((map, comp) => {
+			map.set(comp.id, comp);
+			return map;
+		}, new Map<number, ComponentMeta>());
+
+		this.root!.children = this.#layout_payload.children.map((node) =>
+			this.traverse(node, (node) => {
+				const new_node = this.create_node(
+					node,
+					component_map,
+					false,
+					this.reactive_formatter
+				);
 				return new_node;
 			})
 		);
@@ -426,10 +475,6 @@ function gather_props(
 		// For Tabs (or any component that already has an id prop)
 		// Set the id to the props so that it doesn't get overwritten
 		if (key === "id" || key === "autoscroll") {
-			console.log("gather_props setting id/autoscroll", {
-				key,
-				value: props[key]
-			});
 			_props[key] = props[key];
 		} else if (allowed_shared_props.includes(key as keyof SharedProps)) {
 			const _key = key as keyof SharedProps;