gradio

1
<script lang="ts">
2
	import { Gradio } from "./gradio_helper";
3
	import { onMount, createEventDispatcher, setContext } from "svelte";
4
	import type { ComponentMeta, ThemeMode } from "./types";
5

6
	export let root: string;
7
	export let component: ComponentMeta["component"];
8
	export let instance_map: Record<number, ComponentMeta>;
9

10
	export let id: number;
11
	export let props: ComponentMeta["props"];
12

13
	export let children: ComponentMeta["children"];
14
	export let dynamic_ids: Set<number>;
15
	export let parent: string | null = null;
16
	export let target: HTMLElement;
17
	export let theme_mode: ThemeMode;
18
	export let version: string;
19
	export let autoscroll: boolean;
20

21
	const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
22
	let filtered_children: ComponentMeta[] = [];
23

24
	onMount(() => {
25
		dispatch("mount", id);
26

27
		for (const child of filtered_children) {
28
			dispatch("mount", child.id);
29
		}
30

31
		return () => {
32
			dispatch("destroy", id);
33

34
			for (const child of filtered_children) {
35
				dispatch("mount", child.id);
36
			}
37
		};
38
	});
39

40
	$: children =
41
		children &&
42
		children.filter((v) => {
43
			const valid_node = instance_map[v.id].type !== "statustracker";
44
			if (!valid_node) {
45
				filtered_children.push(v);
46
			}
47
			return valid_node;
48
		});
49

50
	setContext("BLOCK_KEY", parent);
51

52
	function handle_prop_change(e: { detail: Record<string, any> }): void {
53
		for (const k in e.detail) {
54
			instance_map[id].props[k] = e.detail[k];
55
		}
56
	}
57

58
	$: {
59
		if (instance_map[id].type === "form") {
60
			if (children?.every((c) => !c.props.visible)) {
61
				props.visible = false;
62
			} else {
63
				props.visible = true;
64
			}
65
		}
66
	}
67
</script>
68

69
<svelte:component
70
	this={component}
71
	bind:this={instance_map[id].instance}
72
	bind:value={instance_map[id].props.value}
73
	elem_id={("elem_id" in props && props.elem_id) || `component-${id}`}
74
	elem_classes={("elem_classes" in props && props.elem_classes) || []}
75
	on:prop_change={handle_prop_change}
76
	{target}
77
	{...props}
78
	{theme_mode}
79
	{root}
80
	gradio={new Gradio(id, target, theme_mode, version, root, autoscroll)}
81
>
82
	{#if children && children.length}
83
		{#each children as { component, id: each_id, props, children: _children, has_modes } (each_id)}
84
			<svelte:self
85
				{component}
86
				{target}
87
				id={each_id}
88
				{props}
89
				{root}
90
				{instance_map}
91
				children={_children}
92
				{dynamic_ids}
93
				{has_modes}
94
				{theme_mode}
95
				on:destroy
96
				on:mount
97
			/>
98
		{/each}
99
	{/if}
100
</svelte:component>
101