@gradio/core 0.20.0 → 0.22.0

package/src/Render.svelte

@@ -54,7 +54,11 @@
 
 	$: {
 		if (node && node.type === "form") {
-			if (node.children?.every((c) => !c.props.visible)) {
+			if (
+				node.children?.every(
+					(c) => typeof c.props.visible === "boolean" && !c.props.visible
+				)
+			) {
 				node.props.visible = false;
 			} else {
 				node.props.visible = true;
@@ -76,34 +80,39 @@
 	);
 </script>
 
-<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 : 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 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
+			: 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

@@ -49,7 +49,7 @@
 		return ProxiedMyClass;
 	}
 
-	const _component = wrap(component);
+	let _component = wrap(component);
 
 	const supported_props = [
 		"description",
@@ -72,20 +72,19 @@
 	$: 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} -->
+{#if visible}
+	<svelte:component
+		this={_component}
+		bind:this={instance}
+		bind:value
+		on:prop_change
+		{elem_id}
+		{elem_classes}
+		{target}
+		{...$$restProps}
+		{theme_mode}
+		{root}
+	>
+		<slot />
+	</svelte:component>
+{/if}

package/src/i18n.test.ts

@@ -7,7 +7,7 @@ import {
 	beforeEach,
 	afterEach
 } from "vitest";
-import { process_langs } from "./i18n";
+import { Lang, process_langs } from "./i18n";
 import languagesByAnyCode from "wikidata-lang/indexes/by_any_code";
 import BCP47 from "./lang/BCP47_codes";
 import {
@@ -36,22 +36,31 @@ describe("i18n", () => {
 	test("languages are loaded correctly", () => {
 		const langs = process_langs();
 		assert.ok(langs.en);
-		assert.ok(langs.en.common);
+		assert.ok((langs.en as { type: "static"; data: Lang }).data.common);
 	});
 
-	test("language codes follow the correct format", () => {
+	test("language codes follow the correct format", async () => {
 		const langs = Object.entries(process_langs());
 
-		langs.forEach(([code, translation]) => {
-			const BCP47_REGEX = /^.{2}-.{2}$/;
+		await Promise.all(
+			langs.map(async ([code, translation]) => {
+				const BCP47_REGEX = /^.{2}-.{2}$/;
 
-			if (BCP47_REGEX.test(code)) {
-				assert.ok(BCP47.includes(code));
-			} else {
-				assert.exists(languagesByAnyCode[code]);
-			}
-			assert.ok(translation.common);
-		});
+				if (BCP47_REGEX.test(code)) {
+					assert.ok(BCP47.includes(code));
+				} else {
+					assert.exists(languagesByAnyCode[code]);
+				}
+
+				let data: Lang;
+				if (translation.type === "lazy") {
+					data = await translation.data();
+				} else {
+					data = translation.data;
+				}
+				assert.ok(data.common);
+			})
+		);
 	});
 
 	describe("basic functions", () => {
@@ -106,7 +115,7 @@ describe("i18n", () => {
 				}
 			};
 
-			load_translations(custom_translations);
+			load_translations({ processed_langs: {}, custom_translations });
 
 			expect(mockAddMessages).toHaveBeenCalledTimes(2);
 			expect(mockAddMessages).toHaveBeenCalledWith(

package/src/i18n.ts

@@ -1,21 +1,66 @@
-import { addMessages, init, getLocaleFromNavigator, locale } from "svelte-i18n";
+import {
+	addMessages,
+	init,
+	getLocaleFromNavigator,
+	locale,
+	register,
+	waitLocale
+} from "svelte-i18n";
 import { formatter } from "./gradio_helper";
 
-const langs = import.meta.glob("./lang/*.json", {
-	eager: true
-});
+const lang_map = {
+	ar: "العربية",
+	ca: "Català",
+	ckb: "کوردی",
+	de: "Deutsch",
+	en: "English",
+	es: "Español",
+	eu: "Euskara",
+	fa: "فارسی",
+	fi: "Suomi",
+	fr: "Français",
+	he: "עברית",
+	hi: "हिंदी",
+	ja: "日本語",
+	ko: "한국어",
+	lt: "Lietuvių",
+	nb: "Norsk bokmål",
+	nl: "Nederlands",
+	pl: "Polski",
+	"pt-BR": "Português do Brasil",
+	pt: "Português",
+	ro: "Română",
+	ru: "Русский",
+	sv: "Svenska",
+	ta: "தமிழ்",
+	th: "ภาษาไทย",
+	tr: "Türkçe",
+	uk: "Українська",
+	ur: "اردو",
+	uz: "O'zbek",
+	"zh-CN": "简体中文",
+	"zh-TW": "繁體中文"
+};
+
+const langs = import.meta.glob("./lang/*.json");
+import en from "./lang/en.json";
 
 export interface I18nData {
 	__type__: "translation_metadata";
 	key: string;
 }
 
+export type Lang = {
+	[key: string]: Record<string, string> | string;
+};
+
 export interface LangsRecord {
-	[lang: string]: any;
+	[lang: string]:
+		| { type: "lazy"; data: () => Promise<Lang> }
+		| { type: "static"; data: Lang };
 }
 
 export function is_translation_metadata(obj: any): obj is I18nData {
-	console.log(obj);
 	const result =
 		obj &&
 		typeof obj === "object" &&
@@ -83,12 +128,17 @@ export function translate_if_needed(value: any): string {
 }
 
 export function process_langs(): LangsRecord {
-	return Object.fromEntries(
-		Object.entries(langs).map(([path, module]) => [
+	const lazy_langs = Object.fromEntries(
+		Object.entries(langs).map(([path, mod]) => [
 			path.split("/").pop()!.split(".")[0],
-			(module as Record<string, any>).default
+			{ type: "lazy", data: mod }
 		])
 	);
+
+	return {
+		...lazy_langs,
+		en: { type: "static", data: en }
+	};
 }
 
 const processed_langs = process_langs();
@@ -96,7 +146,7 @@ const available_locales = Object.keys(processed_langs);
 
 export const language_choices: [string, string][] = Object.entries(
 	processed_langs
-).map(([code, data]) => [data._name || code, code]);
+).map(([code]) => [lang_map[code as keyof typeof lang_map] || code, code]);
 
 export let all_common_keys: Set<string> = new Set();
 
@@ -116,8 +166,8 @@ export async function setupi18n(
 	previous_translations = custom_translations;
 
 	load_translations({
-		...processed_langs,
-		...(custom_translations ?? {})
+		processed_langs,
+		custom_translations: custom_translations ?? {}
 	});
 
 	const browser_locale = getLocaleFromNavigator();
@@ -140,20 +190,6 @@ export async function setupi18n(
 		initialLocale: initial_locale
 	});
 
-	for (const lang_code in processed_langs) {
-		if (
-			processed_langs[lang_code] &&
-			typeof processed_langs[lang_code] === "object" &&
-			processed_langs[lang_code].common &&
-			typeof processed_langs[lang_code].common === "object"
-		) {
-			const common_ns = processed_langs[lang_code].common;
-			for (const key in common_ns) {
-				all_common_keys.add(`common.${key}`);
-			}
-		}
-	}
-
 	i18n_initialized = true;
 }
 
@@ -175,16 +211,28 @@ export function get_initial_locale(
 	return fallback_locale;
 }
 
-export function load_translations(
-	translations: LangsRecord | null | undefined
-): void {
+export function load_translations(translations: {
+	processed_langs: LangsRecord;
+	custom_translations: Record<string, Record<string, string>>;
+}): void {
 	if (!translations) {
 		return;
 	}
 
 	try {
-		for (const lang in translations) {
-			addMessages(lang, translations[lang]);
+		for (const lang in translations.custom_translations) {
+			addMessages(lang, translations.custom_translations[lang]);
+		}
+
+		for (const lang in translations.processed_langs) {
+			if (
+				lang === "en" &&
+				translations.processed_langs[lang].type === "static"
+			) {
+				addMessages(lang, en);
+			} else if (translations.processed_langs[lang].type === "lazy") {
+				register(lang, translations.processed_langs[lang].data);
+			}
 		}
 	} catch (e) {
 		console.error("Error loading translations:", e);