JS functions break entire app if there's no input, fixed (#7865)

* changes

* add changeset

* add changeset

* changes

* changes

* changes

---------

Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/pretty-ghosts-cry.md

@@ -0,0 +1,6 @@
+---
+"@gradio/app": patch
+"gradio": patch
+---
+
+fix:JS functions break entire app if there's no input, fixed

demo/theme_builder/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: theme_builder"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "demo = gr.themes.builder\n", "\n", "if __name__ == \"__main__\":\n", "    demo()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: theme_builder"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["from gradio.themes.builder_app import demo\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/theme_builder/run.py

@@ -1,6 +1,4 @@
-import gradio as gr
-
-demo = gr.themes.builder
+from gradio.themes.builder_app import demo
 
 if __name__ == "__main__":
-    demo()
+    demo.launch()

gradio/themes/builder_app.py

@@ -97,6 +97,7 @@ def get_doc_theme_var_groups():
                         [theme.__name__ for theme in themes],
                         value="Base",
                         show_label=False,
+                        label="Theme",
                     )
                     load_theme_btn = gr.Button("Load Theme", elem_id="load_theme")
                 with gr.TabItem("Core Colors"):

js/app/src/init.ts

@@ -196,7 +196,8 @@ export function create_components(): {
 		update_scheduled_store.set(false);
 	}
 
-	function update_value(updates: UpdateTransaction[]): void {
+	function update_value(updates: UpdateTransaction[] | undefined): void {
+		if (!updates) return;
 		pending_updates.push(updates);
 
 		if (!update_scheduled) {

js/app/test/theme_builder.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from "@gradio/tootils";
+
+test("test theme builder changes are applied", async ({ page }) => {
+	await page.getByLabel("Theme", { exact: true }).click();
+	await page.getByLabel("Soft", { exact: true }).click();
+	await page.getByRole("button", { name: "Load Theme" }).click();
+	await page.getByRole("tab", { name: "Core Colors" }).click();
+	await page.getByLabel("Primary Hue").click();
+	await page.getByLabel("emerald").click();
+
+	const go_btn = page.getByRole("button", { name: "Go", exact: true });
+	await expect(go_btn).toHaveCSS(
+		"font-family",
+		'Montserrat, ui-sans-serif, "system-ui", sans-serif'
+	);
+	await expect(go_btn).toHaveCSS("background-color", "rgb(16, 185, 129)");
+
+	await page.getByRole("button", { name: "View Code ▼" }).click();
+	const code = page.getByLabel("Code input container");
+	await expect(code).toContainText("gr.themes.Soft");
+	await expect(code).toContainText('primary_hue="emerald"');
+});