@gradio/core 1.0.0-dev.0 → 1.0.0-dev.3

package/src/Render.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-	import { Gradio, reactive_formatter } from "./gradio_helper";
-	import { onMount, createEventDispatcher, setContext } from "svelte";
-	import type { ComponentMeta, ThemeMode } from "./types";
-	import type { Client } from "@gradio/client";
-	import RenderComponent from "./RenderComponent.svelte";
-	import { load_component } from "virtual:component-loader";
-
-	export let root: string;
-
-	export let node: ComponentMeta;
-	export let parent: string | null = null;
-	export let target: HTMLElement;
-	export let theme_mode: ThemeMode;
-	export let version: string;
-	export let autoscroll: boolean;
-	export let max_file_size: number | null;
-	export let client: Client;
-
-	const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
-	let filtered_children: ComponentMeta[] = [];
-
-	onMount(() => {
-		dispatch("mount", node.id);
-
-		for (const child of filtered_children) {
-			dispatch("mount", child.id);
-		}
-
-		return () => {
-			dispatch("destroy", node.id);
-
-			for (const child of filtered_children) {
-				dispatch("mount", child.id);
-			}
-		};
-	});
-
-	$: {
-		if (node) {
-			node.children =
-				node.children &&
-				node.children.filter((v) => {
-					const valid_node = node.type !== "statustracker";
-					if (!valid_node) {
-						filtered_children.push(v);
-					}
-					return valid_node;
-				});
-		}
-	}
-
-	setContext("BLOCK_KEY", parent);
-
-	$: {
-		if (node && node.type === "form") {
-			// Check if all children are invisible (false or "hidden")
-			const allChildrenInvisible = node.children?.every(
-				(c) => c.props.visible === false || c.props.visible === "hidden"
-			);
-
-			if (allChildrenInvisible) {
-				// Check if any child is "hidden" vs false
-				const hasHiddenChild = node.children?.some(
-					(c) => c.props.visible === "hidden"
-				);
-				// If any child is "hidden", form should be "hidden", otherwise false
-				node.props.visible = hasHiddenChild ? "hidden" : false;
-			} else {
-				// If any child is visible, form should be visible
-				node.props.visible = true;
-			}
-		}
-	}
-
-	$: node.props.gradio = new Gradio<Record<string, any>>(
-		node.id,
-		target,
-		theme_mode,
-		version,
-		root,
-		autoscroll,
-		max_file_size,
-		$reactive_formatter,
-		client,
-		load_component
-	);
-</script>
-
-{#if node.component}
-	<RenderComponent
-		_id={node?.id}
-		component={node.component}
-		bind:instance={node.instance}
-		bind:value={node.props.value}
-		elem_id={("elem_id" in node.props && node.props.elem_id) ||
-			`component-${node.id}`}
-		elem_classes={("elem_classes" in node.props && node.props.elem_classes) ||
-			[]}
-		{target}
-		{...node.props}
-		{theme_mode}
-		{root}
-		visible={typeof node.props.visible === "boolean" ||
-		node.props.visible === "hidden"
-			? node.props.visible
-			: true}
-	>
-		{#if node.children && node.children.length}
-			{#each node.children as _node (_node.id)}
-				<svelte:self
-					node={_node}
-					component={_node.component}
-					{target}
-					id={_node.id}
-					{root}
-					{theme_mode}
-					on:destroy
-					on:mount
-					{max_file_size}
-					{client}
-				/>
-			{/each}
-		{/if}
-	</RenderComponent>
-{/if}

package/src/RenderComponent.svelte

@@ -1,91 +0,0 @@
-<svelte:options immutable={true} />
-
-<script lang="ts">
-	import type { ComponentMeta, ThemeMode } from "./types";
-	import type { SvelteComponent, ComponentType } from "svelte";
-	import { translate_if_needed } from "./i18n";
-	// @ts-ignore
-	import { bind, binding_callbacks } from "svelte/internal";
-
-	export let root: string;
-	export let component: ComponentMeta["component"];
-	export let target: HTMLElement;
-	export let theme_mode: ThemeMode;
-	export let instance: ComponentMeta["instance"];
-	export let value: any;
-	// export let gradio: Gradio;
-	export let elem_id: string;
-	export let elem_classes: string[];
-	export let _id: number;
-	export let visible: boolean | "hidden";
-
-	const s = (id: number, p: string, v: any): CustomEvent =>
-		new CustomEvent("prop_change", { detail: { id, prop: p, value: v } });
-
-	function wrap(
-		component: ComponentType<SvelteComponent>
-	): ComponentType<SvelteComponent> {
-		const ProxiedMyClass = new Proxy(component, {
-			construct(_target, args: Record<string, any>[]) {
-				//@ts-ignore
-				const instance = new _target(...args);
-				const props = Object.keys(instance.$$.props);
-
-				function report(props: string) {
-					return function (propargs: any) {
-						if (!target) return;
-						const ev = s(_id, props, propargs);
-						target.dispatchEvent(ev);
-					};
-				}
-				props.forEach((v) => {
-					binding_callbacks.push(() => bind(instance, v, report(v)));
-				});
-
-				return instance;
-			}
-		});
-
-		return ProxiedMyClass;
-	}
-
-	let _component = wrap(component);
-
-	const supported_props = [
-		"description",
-		"info",
-		"title",
-		"placeholder",
-		"value",
-		"label"
-	];
-
-	function translate_prop(obj: SvelteRestProps): void {
-		for (const key in obj) {
-			if (supported_props.includes(key as string)) {
-				obj[key] = translate_if_needed(obj[key]);
-			}
-		}
-	}
-
-	$: translate_prop($$restProps);
-	$: value = translate_if_needed(value);
-</script>
-
-{#if visible}
-	<svelte:component
-		this={_component}
-		bind:this={instance}
-		bind:value
-		on:prop_change
-		{elem_id}
-		{elem_classes}
-		{target}
-		{visible}
-		{...$$restProps}
-		{theme_mode}
-		{root}
-	>
-		<slot />
-	</svelte:component>
-{/if}