ensure kwargs are always in sync across the whole application

.changeset/angry-states-juggle.md

@@ -0,0 +1,6 @@
+---
+"@gradio/app": patch
+"gradio": patch
+---
+
+fix:ensure kwargs are always in sync across the whole application

demo/blocks_flipper/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_flipper"]}, {"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 numpy as np\n", "import gradio as gr\n", "\n", "\n", "def flip_text(x):\n", "    return x[::-1]\n", "\n", "\n", "def flip_image(x):\n", "    return np.fliplr(x)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"Flip text or image files using this demo.\")\n", "    with gr.Tab(\"Flip Text\"):\n", "        text_input = gr.Textbox()\n", "        text_output = gr.Textbox()\n", "        text_button = gr.Button(\"Flip\")\n", "    with gr.Tab(\"Flip Image\"):\n", "        with gr.Row():\n", "            image_input = gr.Image()\n", "            image_output = gr.Image()\n", "        image_button = gr.Button(\"Flip\")\n", "\n", "    with gr.Accordion(\"Open for More!\", open=False):\n", "        gr.Markdown(\"Look at me...\")\n", "        temp_slider = gr.Slider(minimum=0.0, maximum=1.0, value=0.1, step=0.1, interactive=True, label=\"Slide me\")\n", "        temp_slider.change(lambda x:x, [temp_slider])\n", "\n", "    text_button.click(flip_text, inputs=text_input, outputs=text_output)\n", "    image_button.click(flip_image, inputs=image_input, outputs=image_output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_flipper"]}, {"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 numpy as np\n", "import gradio as gr\n", "\n", "\n", "def flip_text(x):\n", "    return x[::-1]\n", "\n", "\n", "def flip_image(x):\n", "    return np.fliplr(x)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"Flip text or image files using this demo.\")\n", "    with gr.Tab(\"Flip Text\"):\n", "        text_input = gr.Textbox()\n", "        text_output = gr.Textbox()\n", "        text_button = gr.Button(\"Flip\")\n", "    with gr.Tab(\"Flip Image\"):\n", "        with gr.Row():\n", "            image_input = gr.Image()\n", "            image_output = gr.Image()\n", "        image_button = gr.Button(\"Flip\")\n", "\n", "    with gr.Accordion(\"Open for More!\", open=False):\n", "        gr.Markdown(\"Look at me...\")\n", "        temp_slider = gr.Slider(\n", "            minimum=0.0,\n", "            maximum=1.0,\n", "            value=0.1,\n", "            step=0.1,\n", "            interactive=True,\n", "            label=\"Slide me\",\n", "        )\n", "        temp_slider.change(lambda x: x, [temp_slider])\n", "\n", "    text_button.click(flip_text, inputs=text_input, outputs=text_output)\n", "    image_button.click(flip_image, inputs=image_input, outputs=image_output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/blocks_flipper/run.py

@@ -24,8 +24,15 @@ def flip_image(x):
 
     with gr.Accordion("Open for More!", open=False):
         gr.Markdown("Look at me...")
-        temp_slider = gr.Slider(minimum=0.0, maximum=1.0, value=0.1, step=0.1, interactive=True, label="Slide me")
-        temp_slider.change(lambda x:x, [temp_slider])
+        temp_slider = gr.Slider(
+            minimum=0.0,
+            maximum=1.0,
+            value=0.1,
+            step=0.1,
+            interactive=True,
+            label="Slide me",
+        )
+        temp_slider.change(lambda x: x, [temp_slider])
 
     text_button.click(flip_text, inputs=text_input, outputs=text_output)
     image_button.click(flip_image, inputs=image_input, outputs=image_output)

js/app/build_plugins.ts

@@ -72,10 +72,9 @@ export function generate_dev_entry({ enable }: { enable: boolean }): Plugin {
 			if (!enable) return;
 
 			const new_code = code.replace(RE_SVELTE_IMPORT, (str, $1, $2) => {
-				return `const ${$1.replace(
-					/ as /g,
-					": "
-				)} = window.__gradio__svelte__internal;`;
+				return `const ${$1
+					.replace(/\* as /, "")
+					.replace(/ as /g, ": ")} = window.__gradio__svelte__internal;`;
 			});
 
 			return {

js/app/src/RenderComponent.svelte

@@ -28,9 +28,7 @@
 			construct(_target, args: Record<string, any>[]) {
 				//@ts-ignore
 				const instance = new _target(...args);
-				const props = Object.getOwnPropertyNames(instance).filter(
-					(s) => !s.startsWith("$")
-				);
+				const props = Object.keys(instance.$$.props);
 
 				function report(props: string) {
 					return function (propargs: any) {

js/app/test/blocks_flipper.spec.ts

@@ -4,6 +4,11 @@ test("accordion stays open when interacting with the slider", async ({
 	page
 }) => {
 	await page.getByRole("button", { name: "Open for More! ▼" }).click();
-	await page.getByLabel("range slider for Slide me").fill("0.5");
+
+	await page.getByLabel("Textbox").nth(0).fill("123");
+
+	await page.getByRole("button", { name: "Flip" }).click();
+	await expect(page.getByLabel("Textbox").nth(1)).toHaveValue("321");
+
 	await expect(page.getByText("Look at me...")).toBeVisible();
 });

js/app/vite.config.ts

@@ -139,7 +139,7 @@ export default defineConfig(({ mode }) => {
 				compilerOptions: {
 					dev: true,
 					discloseVersion: false,
-					accessors: mode === "test"
+					accessors: true
 				},
 				hot: !process.env.VITEST && !production,
 				preprocess: sveltePreprocess({