Merge pull request #859 from gradio-app/854-textbox

854 textbox

gradio/templates/frontend/index.html

@@ -45,8 +45,8 @@
 		</script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
 		<title>Gradio</title>
-		<script type="module" crossorigin src="./assets/index.cdad49d2.js"></script>
-		<link rel="modulepreload" href="./assets/vendor.90013e04.js">
+		<script type="module" crossorigin src="./assets/index.dfda4ad8.js"></script>
+		<link rel="modulepreload" href="./assets/vendor.c988cbcf.js">
 		<link rel="stylesheet" href="./assets/index.778d40cb.css">
 	</head>
 

ui/package.json

@@ -6,6 +6,7 @@
 		"workbench": "pnpm dev --filter @gradio/workbench",
 		"dev": "pnpm dev --filter @gradio/app",
 		"build": "pnpm build --filter @gradio/app --emptyOutDir",
+		"preview": "sirv ../gradio/templates/frontend --single --port=3000 --quiet",
 		"format:check": "prettier --check --plugin-search-dir=. .",
 		"format:write": "prettier --write --plugin-search-dir=. .",
 		"ts:check": "svelte-check --tsconfig tsconfig.json",
@@ -25,6 +26,7 @@
 		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
 		"@testing-library/dom": "^8.11.3",
 		"@testing-library/svelte": "^3.1.0",
+		"@testing-library/user-event": "^13.5.0",
 		"autoprefixer": "^10.4.4",
 		"happy-dom": "^2.49.0",
 		"npm-run-all": "^4.1.5",

ui/packages/app/src/components/Button/Button.svelte

@@ -2,7 +2,7 @@
 	import { Button } from "@gradio/button";
 
 	export let value: string;
-	export let style: string | null;
+	export let style: string = "";
 	export let variant: "primary" | "secondary" = "primary";
 </script>
 

ui/packages/app/src/components/Textbox/Textbox.svelte

@@ -1,11 +1,13 @@
+<svelte:options accessors={true} />
+
 <script lang="ts">
 	import { TextBox } from "@gradio/form";
 
 	export let value: string = " ";
 	export let theme: string;
-	export let style: string | null;
+	export let style: string = "";
 	export let lines: number;
-	export let placeholder: string;
+	export let placeholder: string = "";
 
 	export let mode: "static" | "dynamic";
 </script>

ui/packages/app/src/components/Textbox/Textbox.test.ts

@@ -0,0 +1,60 @@
+import { test, describe, assert, afterEach } from "vitest";
+import { spy } from "tinyspy";
+import { cleanup, fireEvent, render, get_text, wait } from "@gradio/tootils";
+import event from "@testing-library/user-event";
+
+import Textbox from "./Textbox.svelte";
+
+describe("Textbox", () => {
+	afterEach(() => cleanup());
+
+	test("renders provided value", () => {
+		const { container } = render(Textbox, {
+			theme: "default",
+			lines: 1,
+			mode: "dynamic",
+			value: "hello world"
+		});
+
+		const item: HTMLInputElement = container.querySelector(".input-text ")!;
+		assert.equal(item.value, "hello world");
+	});
+
+	test("changing the text should update the value", async () => {
+		const { container, component } = render(Textbox, {
+			theme: "default",
+			lines: 1,
+			mode: "dynamic",
+			value: ""
+		});
+
+		const item: HTMLInputElement = container.querySelector(".input-text ")!;
+
+		const mock = spy();
+		component.$on("change", mock);
+
+		item.focus();
+		event.keyboard("some text");
+
+		// wait for debounce
+		await wait(300);
+
+		assert.equal(item.value, "some text");
+		assert.equal(component.value, "some text");
+		assert.equal(mock.callCount, 1);
+		assert.equal(mock.calls[0][0].detail, "some text");
+	});
+
+	test("component should respect placeholder", async () => {
+		const { container, component } = render(Textbox, {
+			theme: "default",
+			lines: 1,
+			mode: "dynamic",
+			value: "",
+			placeholder: "placeholder text"
+		});
+
+		const item: HTMLInputElement = container.querySelector(".input-text ")!;
+		assert.equal(item.placeholder, "placeholder text");
+	});
+});

ui/packages/form/src/Textbox.svelte

@@ -6,6 +6,7 @@
 	export let theme: string = "default";
 	export let lines: number = 1;
 	export let placeholder: string = "";
+	export let style = "";
 
 	const dispatch =
 		createEventDispatcher<{ change: string; submit: undefined }>();
@@ -19,6 +20,7 @@
 		  });
 
 	function handle_change(event: CustomInputEvent) {
+		value = event.target.value;
 		dispatch("change", event?.target?.value);
 	}
 
@@ -29,8 +31,8 @@
 		}
 	}
 
-	const debounced_handle_change = debounce(handle_change, 500);
-	const debounced_handle_keypress = debounce(handle_keypress, 500);
+	const debounced_handle_change = debounce(handle_change, 300);
+	const debounced_handle_keypress = debounce(handle_keypress, 300);
 </script>
 
 {#if lines > 1}
@@ -40,6 +42,7 @@
 		{placeholder}
 		on:input={debounced_handle_change}
 		{theme}
+		{style}
 	/>
 {:else}
 	<input
@@ -50,6 +53,7 @@
 		on:input={debounced_handle_change}
 		{theme}
 		on:keypress={debounced_handle_keypress}
+		{style}
 	/>
 {/if}
 

ui/packages/tootils/src/index.ts

@@ -2,4 +2,8 @@ export function get_text<T extends HTMLElement>(el: T) {
 	return el.innerText.trim();
 }
 
+export function wait(n: number) {
+	return new Promise((r) => setTimeout(r, n));
+}
+
 export * from "./render";

ui/packages/tootils/src/render.ts

@@ -9,7 +9,7 @@ type Component<T extends SvelteComponentTyped, Props> = new (args: {
 	props?: Props;
 }) => T;
 
-function render<Props, T extends SvelteComponentTyped<Props>>(
+function render<Events, Props, T extends SvelteComponentTyped<Props, Events>>(
 	Component: Component<T, Props> | { default: Component<T, Props> },
 	props?: Props
 ) {

ui/pnpm-lock.yaml

@@ -9,6 +9,7 @@ importers:
       '@sveltejs/vite-plugin-svelte': ^1.0.0-next.36
       '@testing-library/dom': ^8.11.3
       '@testing-library/svelte': ^3.1.0
+      '@testing-library/user-event': ^13.5.0
       autoprefixer: ^10.4.4
       happy-dom: ^2.49.0
       npm-run-all: ^4.1.5
@@ -33,6 +34,7 @@ importers:
       '@sveltejs/vite-plugin-svelte': 1.0.0-next.36_svelte@3.46.3+vite@2.8.4
       '@testing-library/dom': 8.11.3
       '@testing-library/svelte': 3.1.0_svelte@3.46.3
+      '@testing-library/user-event': 13.5.0_@testing-library+dom@8.11.3
       autoprefixer: 10.4.4_postcss@8.4.6
       happy-dom: 2.49.0
       npm-run-all: 4.1.5
@@ -1050,6 +1052,16 @@ packages:
       svelte: 3.46.3
     dev: false
 
+  /@testing-library/user-event/13.5.0_@testing-library+dom@8.11.3:
+    resolution: {integrity: sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==}
+    engines: {node: '>=10', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+    dependencies:
+      '@babel/runtime': 7.17.7
+      '@testing-library/dom': 8.11.3
+    dev: false
+
   /@types/aria-query/4.2.2:
     resolution: {integrity: sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==}
     dev: false