@gradio/core 1.1.3 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @gradio/core
 
+## 1.3.0
+
+### Features
+
+- [#12918](https://github.com/gradio-app/gradio/pull/12918) [`e29e1cc`](https://github.com/gradio-app/gradio/commit/e29e1ccd5874cb98b813ed4f7f72d9fef2935016) - Add Space-specific skill generation to `gradio skills add`.  Thanks @abidlabs!
+- [#12929](https://github.com/gradio-app/gradio/pull/12929) [`978bc6e`](https://github.com/gradio-app/gradio/commit/978bc6ea5094aa11e10994cdd662c4c663a86a83) - Add server functions support to gr.HTML.  Thanks @aliabid94!
+- [#12907](https://github.com/gradio-app/gradio/pull/12907) [`3e625a0`](https://github.com/gradio-app/gradio/commit/3e625a0ecfab6e74b7561b68adbe55341ecbc47a) - Better error handling when connection to server is lost.  Thanks @abidlabs!
+
+### Fixes
+
+- [#12904](https://github.com/gradio-app/gradio/pull/12904) [`7c3fa2a`](https://github.com/gradio-app/gradio/commit/7c3fa2a6900cfa3c87cb61ffa9b34b75d1ae49ba) - Fix Loading Spinner Issue Caused by Events Targeting Components In Inactive Tabs.  Thanks @freddyaboulton!
+- [#12903](https://github.com/gradio-app/gradio/pull/12903) [`57707c7`](https://github.com/gradio-app/gradio/commit/57707c72edd0e9fee9821882f75ab322ce110fe3) - Fix Tab i18n issue.  Thanks @freddyaboulton!
+- [#12906](https://github.com/gradio-app/gradio/pull/12906) [`81482b5`](https://github.com/gradio-app/gradio/commit/81482b58706ee9948d0f04e84e632ebb8d4bf7ea) - Lazy load sub-tab and accordion components.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/client@2.1.0
+- @gradio/button@0.6.4
+- @gradio/html@0.10.0
+- @gradio/tabs@0.5.7
+
+## 1.2.0
+
+### Features
+
+- [#12839](https://github.com/gradio-app/gradio/pull/12839) [`1c671b3`](https://github.com/gradio-app/gradio/commit/1c671b39830ccf1c87f6cfcb4669e97dfb3a7367) - Hide forms with no elements.  Thanks @aliabid94!
+
+### Fixes
+
+- [#12875](https://github.com/gradio-app/gradio/pull/12875) [`d0b3422`](https://github.com/gradio-app/gradio/commit/d0b34228d756334d901fc34971959ea422eb55bd) - Fix stop button not switching back to submit button in chat interface.  Thanks @freddyaboulton!
+- [#12797](https://github.com/gradio-app/gradio/pull/12797) [`6a0c6ea`](https://github.com/gradio-app/gradio/commit/6a0c6eae53931ec137c0b8379428acc8a7ea27c9) - Refactor translation logic.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/utils@0.11.3
+- @gradio/atoms@0.22.0
+- @gradio/statustracker@0.12.4
+- @gradio/tabs@0.5.6
+- @gradio/code@0.17.3
+- @gradio/paramviewer@0.9.4
+- @gradio/upload@0.17.6
+- @gradio/video@0.20.3
+- @gradio/file@0.14.3
+- @gradio/image@0.25.3
+- @gradio/gallery@0.17.1
+- @gradio/plot@0.10.4
+- @gradio/checkbox@0.6.3
+- @gradio/textbox@0.13.4
+- @gradio/dropdown@0.11.4
+- @gradio/audio@0.22.3
+
 ## 1.1.3
 
 ### Fixes

package/dist/src/Blocks.svelte

@@ -12,7 +12,6 @@
 		LayoutNode
 	} from "./types";
 	// import type { UpdateTransaction } from "./_init";
-	import { setupi18n } from "./i18n";
 	import type { ThemeMode, Payload } from "./types";
 	import { Toast } from "@gradio/statustracker";
 	import type { ToastMessage } from "@gradio/statustracker";
@@ -105,6 +104,7 @@
 	});
 
 	let messages: (ToastMessage & { fn_index: number })[] = $state([]);
+	let reconnect_interval: ReturnType<typeof setInterval> | null = null;
 
 	function gradio_event_dispatcher(
 		id: number,
@@ -207,6 +207,35 @@
 		api_calls = [...api_calls, last_api_call];
 	};
 
+	function handle_connection_lost(): void {
+		messages = messages.filter((m) => m.type !== "error");
+
+		++_error_id;
+		messages.push({
+			title: "Connection Lost",
+			message: LOST_CONNECTION_MESSAGE,
+			fn_index: -1,
+			type: "error",
+			id: _error_id,
+			duration: null,
+			visible: true
+		});
+
+		reconnect_interval = setInterval(async () => {
+			try {
+				const status = await app.reconnect();
+				if (status === "connected" || status === "changed") {
+					clearInterval(reconnect_interval!);
+					reconnect_interval = null;
+					window.location.reload();
+				}
+			} catch (e) {
+				// server still unreachable
+				console.debug(e);
+			}
+		}, 2000);
+	}
+
 	let dep_manager = new DependencyManager(
 		dependencies,
 		app,
@@ -214,7 +243,8 @@
 		app_tree.get_state.bind(app_tree),
 		app_tree.rerender.bind(app_tree),
 		new_message,
-		add_to_api_calls
+		add_to_api_calls,
+		handle_connection_lost
 	);
 
 	$effect(() => {
@@ -427,6 +457,7 @@
 		return () => {
 			mut.disconnect();
 			res.disconnect();
+			if (reconnect_interval) clearInterval(reconnect_interval);
 		};
 	});
 

package/dist/src/_init.js

@@ -3,7 +3,7 @@ import { dequal } from "dequal";
 import { load_component } from "virtual:component-loader";
 import { create_loading_status_store } from "./stores";
 import { _ } from "svelte-i18n";
-import { i18n_marker } from "./i18n";
+import { has_i18n_marker } from "@gradio/utils";
 const shared_props = [
     "elem_id",
     "elem_classes",
@@ -225,7 +225,7 @@ export function create_components({ initial_layout = undefined } = {
             const _type = instance.type === "walkthrough" ? "walkthroughstep" : "tabitem";
             const child_tab_items = tab_items_props.filter((child) => child.type === _type);
             instance.props.initial_tabs = child_tab_items?.map((child) => ({
-                label: child.props.label.includes(i18n_marker) ? "" : child.props.label,
+                label: has_i18n_marker(child.props.label) ? "" : child.props.label,
                 id: child.props.id,
                 visible: typeof child.props.visible === "boolean" ||
                     child.props.visible === "hidden"

package/dist/src/api_docs/ApiBanner.svelte

@@ -6,8 +6,12 @@
 
 	export let root: string;
 	export let api_count: number;
-	export let current_language: "python" | "javascript" | "bash" | "mcp" =
-		"python";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp" = "python";
 
 	const dispatch = createEventDispatcher();
 </script>

package/dist/src/api_docs/ApiBanner.svelte.d.ts

@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const ApiBanner: $$__sveltets_2_IsomorphicComponent<{
     root: string;
     api_count: number;
-    current_language?: "python" | "javascript" | "bash" | "mcp";
+    current_language?: "python" | "javascript" | "bash" | "skill" | "mcp";
 }, {
     close: CustomEvent<any>;
 } & {

package/dist/src/api_docs/ApiDocs.svelte

@@ -19,6 +19,8 @@
 	import javascript from "./img/javascript.svg";
 	import bash from "./img/bash.svg";
 	import ResponseSnippet from "./ResponseSnippet.svelte";
+	import skill from "./img/skill.svg";
+	import SkillSnippet from "./SkillSnippet.svelte";
 	import mcp from "./img/mcp.svg";
 	import MCPSnippet from "./MCPSnippet.svelte";
 	import CopyMarkdown from "./CopyMarkdown.svelte";
@@ -53,7 +55,8 @@
 	}
 
 	export let api_calls: Payload[] = [];
-	let current_language: "python" | "javascript" | "bash" | "mcp" = "python";
+	let current_language: "python" | "javascript" | "bash" | "skill" | "mcp" =
+		"python";
 
 	$: sorted_dependencies = (() => {
 		const valid = dependencies.filter(
@@ -81,13 +84,16 @@
 	}
 
 	function is_valid_language(lang: string | null): boolean {
-		return ["python", "javascript", "bash", "mcp"].includes(lang ?? "");
+		return ["python", "javascript", "bash", "skill", "mcp"].includes(
+			lang ?? ""
+		);
 	}
 
-	const langs = [
+	$: langs = [
 		["python", "Python", python],
 		["javascript", "JavaScript", javascript],
 		["bash", "cURL", bash],
+		...(space_id ? [["skill", "Skill", skill] as const] : []),
 		["mcp", "MCP", mcp]
 	] as const;
 
@@ -277,7 +283,12 @@
 
 		const lang_param = get_query_param("lang");
 		if (is_valid_language(lang_param)) {
-			current_language = lang_param as "python" | "javascript" | "bash" | "mcp";
+			current_language = lang_param as
+				| "python"
+				| "javascript"
+				| "bash"
+				| "skill"
+				| "mcp";
 		}
 
 		const mcp_schema_url = `${root}gradio_api/mcp/schema`;
@@ -398,18 +409,25 @@
 						API Documentation
 					</p>
 				{:else}
-					<p class="padded">
-						{#if current_language == "python" || current_language == "javascript"}
-							1. Install the
-							<span style="text-transform:capitalize">{current_language}</span>
-							client (<a
-								href={current_language == "python" ? py_docs : js_docs}
-								target="_blank">docs</a
-							>) if you don't already have it installed.
-						{:else if current_language == "bash"}
-							1. Confirm that you have cURL installed on your system.
-						{/if}
-					</p>
+					{#if current_language !== "skill"}
+						<p class="padded">
+							{#if current_language == "python" || current_language == "javascript"}
+								1. Install the
+								<span style="text-transform:capitalize">{current_language}</span
+								>
+								client (<a
+									href={current_language == "python" ? py_docs : js_docs}
+									target="_blank">docs</a
+								>) if you don't already have it installed.
+							{:else if current_language == "bash"}
+								1. Confirm that you have cURL installed on your system.
+							{/if}
+						</p>
+					{/if}
+
+					<div class:hidden={current_language !== "skill"}>
+						<SkillSnippet {space_id} />
+					</div>
 
 					<div class:hidden={current_language !== "mcp"}>
 						<MCPSnippet
@@ -427,7 +445,7 @@
 						/>
 					</div>
 
-					{#if current_language !== "mcp"}
+					{#if current_language !== "mcp" && current_language !== "skill"}
 						<InstallSnippet {current_language} />
 
 						<p class="padded">
@@ -480,25 +498,23 @@
 					{/if}
 				{/if}
 
-				<div class:hidden={current_language === "mcp"}>
+				<div
+					class:hidden={current_language === "mcp" ||
+						current_language === "skill"}
+				>
 					{#each sorted_dependencies as dependency}
 						{#if info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
-									endpoint_parameters={info.named_endpoints[
-										"/" + dependency.api_name
-									].parameters}
 									{dependency}
 									{current_language}
-									{root}
-									{space_id}
-									{username}
-									api_prefix={app.api_prefix}
 									api_description={info.named_endpoints[
 										"/" + dependency.api_name
 									].description}
 									{analytics}
 									{last_api_call}
+									code_snippets={info.named_endpoints["/" + dependency.api_name]
+										.code_snippets}
 									bind:markdown_code_snippets
 								/>
 

package/dist/src/api_docs/CodeSnippet.svelte

@@ -1,75 +1,78 @@
 <script lang="ts">
-	import type { ComponentMeta, Dependency, Payload } from "../types";
+	import type { Dependency, Payload } from "../types";
 	import CopyButton from "./CopyButton.svelte";
-	import { represent_value, is_potentially_nested_file_data } from "./utils";
 	import { Block } from "@gradio/atoms";
 	import EndpointDetail from "./EndpointDetail.svelte";
 
-	interface EndpointParameter {
-		label: string;
-		type: string;
-		python_type: { type: string };
-		component: string;
-		example_input: string;
-		serializer: string;
-	}
-
 	export let dependency: Dependency;
-	export let root: string;
-	export let api_prefix: string;
-	export let space_id: string | null;
-	export let endpoint_parameters: any;
-	export let username: string | null;
-	export let current_language: "python" | "javascript" | "bash" | "mcp";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp";
 	export let api_description: string | null = null;
 	export let analytics: Record<string, any>;
 	export let markdown_code_snippets: Record<string, Record<string, string>>;
+	export let code_snippets: Record<string, string>;
 	export let last_api_call: Payload | null = null;
 
-	let python_code: HTMLElement;
-	let js_code: HTMLElement;
-	let bash_post_code: HTMLElement;
-	let bash_get_code: HTMLElement;
-
-	let has_file_path = endpoint_parameters.some((param: EndpointParameter) =>
-		is_potentially_nested_file_data(param.example_input)
-	);
-	let blob_components = ["Audio", "File", "Image", "Video"];
-	let blob_examples: any[] = endpoint_parameters.filter(
-		(param: EndpointParameter) => blob_components.includes(param.component)
-	);
+	$: markdown_code_snippets[
+		dependency.api_name as keyof typeof markdown_code_snippets
+	] = {
+		python: code_snippets.python || "",
+		javascript: code_snippets.javascript || "",
+		bash: code_snippets.bash || ""
+	};
 
-	$: normalised_api_prefix = api_prefix ? api_prefix : "/";
-	$: normalised_root = root.replace(/\/$/, "");
+	function escape_html(text: string): string {
+		return text
+			.replace(/&/g, "&amp;")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;");
+	}
 
-	$: is_most_recently_used = last_api_call?.fn_index === dependency.id;
+	function highlight_python(code: string): string {
+		let html = escape_html(code);
+		html = html.replace(
+			/\b(from|import|print)\b/g,
+			'<span class="kw">$1</span>'
+		);
+		html = html.replace(
+			/(Client\()("[^"]*")(\))/g,
+			'$1<span class="str">$2</span>$3'
+		);
+		html = html.replace(
+			/(api_name=)("[^"]*")/g,
+			'$1<span class="api-name">$2</span>'
+		);
+		return html;
+	}
 
-	$: actual_data =
-		is_most_recently_used && last_api_call?.data
-			? last_api_call.data.filter((d) => typeof d !== "undefined")
-			: null;
+	function highlight_javascript(code: string): string {
+		let html = escape_html(code);
+		html = html.replace(
+			/\b(import|from|const|await)\b/g,
+			'<span class="kw">$1</span>'
+		);
+		html = html.replace(
+			/(Client\.connect\()("[^"]*")(\))/g,
+			'$1<span class="str">$2</span>$3'
+		);
+		html = html.replace(
+			/(\.predict\()("[^"]*")/g,
+			'$1<span class="api-name">$2</span>'
+		);
+		return html;
+	}
 
-	function getParameterValue(param: any, index: number): any {
-		if (
-			is_most_recently_used &&
-			actual_data &&
-			actual_data[index] !== undefined
-		) {
-			return actual_data[index];
-		}
-		return param.parameter_has_default !== undefined &&
-			param.parameter_has_default
-			? param.parameter_default
-			: param.example_input;
+	function highlight_bash(code: string): string {
+		return escape_html(code);
 	}
 
-	$: markdown_code_snippets[
-		dependency.api_name as keyof typeof markdown_code_snippets
-	] = {
-		python: python_code?.innerText || "",
-		javascript: js_code?.innerText || "",
-		bash: bash_post_code?.innerText || ""
-	};
+	$: python_html = highlight_python(code_snippets.python || "");
+	$: js_html = highlight_javascript(code_snippets.javascript || "");
+	$: bash_html = highlight_bash(code_snippets.bash || "");
 </script>
 
 <div class="container">
@@ -84,37 +87,9 @@
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton code={python_code?.innerText} />
-				</div>
-				<div bind:this={python_code}>
-					<pre><span class="highlight">from</span> gradio_client <span
-							class="highlight">import</span
-						> Client{#if has_file_path}, handle_file{/if}
-
-client = Client(<span class="token string">"{space_id || root}"</span
-						>{#if username !== null}, auth=("{username}", **password**){/if})
-result = client.<span class="highlight">predict</span
-						>(<!--
--->{#each endpoint_parameters as param, i}<!--
-		-->
-	{param.parameter_name
-								? param.parameter_name + "="
-								: ""}<span
-								class:recent-value={is_most_recently_used &&
-									actual_data?.[i] !== undefined}
-								>{represent_value(
-									getParameterValue(param, i),
-									param.python_type.type,
-									"py"
-								)}</span
-							>,{/each}<!--
-
-	-->
-	api_name=<span class="api-name">"/{dependency.api_name}"</span><!--
-	-->
-)
-<span class="highlight">print</span>(result)</pre>
+					<CopyButton code={code_snippets.python || ""} />
 				</div>
+				<pre>{@html python_html}</pre>
 			</code>
 		</Block>
 	</div>
@@ -122,53 +97,9 @@ result = client.<span class="highlight">predict</span
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton code={js_code?.innerText} />
-				</div>
-				<div bind:this={js_code}>
-					<pre>import &lbrace; Client &rbrace; from "@gradio/client";
-	{#each blob_examples as { component, example_input }, i}<!--
-	-->
-	const response_{i} = await fetch("{example_input.url}");
-	const example{component} = await response_{i}.blob();
-						{/each}<!--
-	-->
-	const client = await Client.connect(<span class="token string"
-							>"{space_id || root}"</span
-						>{#if username !== null}, &lbrace;auth: ["{username}", **password**]&rbrace;{/if});
-	const result = await client.predict(<span class="api-name"
-							>"/{dependency.api_name}"</span
-						>, &lbrace; <!--
-	-->{#each endpoint_parameters as param, i}<!--
-			-->{#if blob_components.includes(param.component)}<!--
-		-->
-					<span
-									class="example-inputs"
-									>{param.parameter_name}: example{param.component}</span
-								>, <!--
-			--><span class="desc"><!--
-			--></span
-								><!--
-			-->{:else}<!--
-		-->		
-			<span
-									class="example-inputs {is_most_recently_used &&
-									actual_data?.[i] !== undefined
-										? 'recent-value'
-										: ''}"
-									>{param.parameter_name}: {represent_value(
-										getParameterValue(param, i),
-										param.python_type.type,
-										"js"
-									)}</span
-								>, <!--
-	--><!--
-	-->{/if}
-						{/each}
-	&rbrace;);
-
-	console.log(result.data);
-	</pre>
+					<CopyButton code={code_snippets.javascript || ""} />
 				</div>
+				<pre>{@html js_html}</pre>
 			</code>
 		</Block>
 	</div>
@@ -176,29 +107,9 @@ result = client.<span class="highlight">predict</span
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton code={bash_post_code?.innerText}></CopyButton>
-				</div>
-
-				<div bind:this={bash_post_code}>
-					<pre>curl -X POST {normalised_root}{normalised_api_prefix}/call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
-	"data": [{#each endpoint_parameters as param, i}
-							<!-- 
-	--><span
-								class={is_most_recently_used && actual_data?.[i] !== undefined
-									? "recent-value"
-									: ""}
-								>{represent_value(
-									getParameterValue(param, i),
-									param.python_type.type,
-									"bash"
-								)}</span
-							>{#if i < endpoint_parameters.length - 1},
-							{/if}
-						{/each}
-	]{"}"}' \
-	| awk -F'"' '{"{"} print $4{"}"}'  \
-	| read EVENT_ID; curl -N {normalised_root}{normalised_api_prefix}/call/{dependency.api_name}/$EVENT_ID</pre>
+					<CopyButton code={code_snippets.bash || ""} />
 				</div>
+				<pre>{@html bash_html}</pre>
 			</code>
 		</Block>
 	</div>
@@ -212,11 +123,6 @@ result = client.<span class="highlight">predict</span
 		tab-size: 2;
 	}
 
-	.token.string {
-		display: contents;
-		color: var(--color-accent-base);
-	}
-
 	code {
 		position: relative;
 		display: block;
@@ -238,21 +144,12 @@ result = client.<span class="highlight">predict</span
 		margin-bottom: var(--size-3);
 	}
 
-	.desc {
-		color: var(--body-text-color-subdued);
-	}
-
-	.api-name {
+	:global(.api-name) {
 		color: var(--color-accent);
 	}
 
-	.recent-value {
-		color: #fd7b00;
-		background: #fff4e6;
-		border: 1px solid #ffd9b3;
-		border-radius: var(--radius-sm);
-		padding: 1px 4px;
-		font-weight: var(--weight-medium);
+	:global(.str) {
+		color: var(--color-accent-base);
 	}
 
 	.hidden {

package/dist/src/api_docs/CodeSnippet.svelte.d.ts

@@ -14,15 +14,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CodeSnippet: $$__sveltets_2_IsomorphicComponent<{
     dependency: Dependency;
-    root: string;
-    api_prefix: string;
-    space_id: string | null;
-    endpoint_parameters: any;
-    username: string | null;
-    current_language: "python" | "javascript" | "bash" | "mcp";
+    current_language: "python" | "javascript" | "bash" | "skill" | "mcp";
     api_description?: string | null;
     analytics: Record<string, any>;
     markdown_code_snippets: Record<string, Record<string, string>>;
+    code_snippets: Record<string, string>;
     last_api_call?: Payload | null;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/src/api_docs/CopyMarkdown.svelte

@@ -10,7 +10,12 @@
 	import { represent_value } from "./utils";
 	import type { Dependency } from "../types";
 
-	export let current_language: "python" | "javascript" | "bash" | "mcp";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp";
 	export let space_id: string | null;
 	export let root: string;
 	export let api_count: number;
@@ -362,7 +367,7 @@ Read the documentation above so I can ask questions about it.`
 	}
 
 	async function copyMarkdown(
-		current_language: "python" | "javascript" | "bash" | "mcp"
+		current_language: "python" | "javascript" | "bash" | "skill" | "mcp"
 	): Promise<void> {
 		try {
 			if (!markdown_content[current_language]) {

package/dist/src/api_docs/CopyMarkdown.svelte.d.ts

@@ -13,7 +13,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const CopyMarkdown: $$__sveltets_2_IsomorphicComponent<{
-    current_language: "python" | "javascript" | "bash" | "mcp";
+    current_language: "python" | "javascript" | "bash" | "skill" | "mcp";
     space_id: string | null;
     root: string;
     api_count: number;

package/dist/src/api_docs/InstallSnippet.svelte

@@ -2,7 +2,12 @@
 	import CopyButton from "./CopyButton.svelte";
 	import { Block } from "@gradio/atoms";
 
-	export let current_language: "python" | "javascript" | "bash" | "mcp";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp";
 
 	let py_install = "pip install gradio_client";
 	let js_install = "npm i -D @gradio/client";

package/dist/src/api_docs/InstallSnippet.svelte.d.ts

@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const InstallSnippet: $$__sveltets_2_IsomorphicComponent<{
-    current_language: "python" | "javascript" | "bash" | "mcp";
+    current_language: "python" | "javascript" | "bash" | "skill" | "mcp";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;