gradio-app · pngwn · Oct 22, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023
diff --git a/.changeset/public-worlds-hunt.md b/.changeset/public-worlds-hunt.md
@@ -0,0 +1,31 @@
+---
+"@gradio/app": patch
+"@gradio/audio": patch
+"@gradio/button": patch
+"@gradio/cdn-test": patch
+"@gradio/chatbot": patch
+"@gradio/client": patch
+"@gradio/column": patch
+"@gradio/dataframe": patch
+"@gradio/file": patch
+"@gradio/form": patch
+"@gradio/gallery": patch
+"@gradio/image": patch
+"@gradio/markdown": patch
+"@gradio/preview": patch
+"@gradio/spaces-test": patch
+"@gradio/storybook": patch
+"@gradio/tabs": patch
+"@gradio/textbox": patch
+"@gradio/tooltip": patch
+"@gradio/tootils": patch
+"@gradio/upload": patch
+"@gradio/utils": patch
+"@gradio/video": patch
+"gradio": patch
+"newnewtext": patch
+"newtext": patch
+"website": patch
+---
+
+fix:fix tests
diff --git a/.config/copy_frontend.py b/.config/copy_frontend.py
@@ -23,10 +23,25 @@ def initialize(self, version: str, build_data: dict[str, Any]) -> None:
                 and not str(entry.name).startswith("_")
                 and not str(entry.name) in NOT_COMPONENT
             ):
+
+                def ignore(s, names):
+                    ignored = []
+                    for n in names:
+                        if (
+                            n.startswith("CHANGELOG")
+                            or n.startswith("README.md")
+                            or n.startswith("node_modules")
+                            or ".test." in n
+                            or ".stories." in n
+                            or ".spec." in n
+                        ):
+                            ignored.append(n)
+                    return ignored
+
                 shutil.copytree(
                     str(entry),
                     str(pathlib.Path("gradio") / "_frontend_code" / entry.name),
-                    ignore=lambda d, names: ["node_modules"],
+                    ignore=ignore,
                     dirs_exist_ok=True,
                 )
         shutil.copytree(

diff --git a/.config/playwright/index.html b/.config/playwright/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Testing Page</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="./index.ts"></script>
+	</body>
+</html>
diff --git a/.config/playwright/index.ts b/.config/playwright/index.ts
@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';
diff --git a/.gitignore b/.gitignore
@@ -77,6 +77,4 @@ build-storybook.log
 js/storybook/theme.css
 
 # playwright
-.config/playwright
-!.config/playwright/index.html
-!.config/playwright/index.ts
+.config/playwright/.cache
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,6 +7,7 @@
 	"python.analysis.extraPaths": ["./gradio/themes/utils"],
 	"svelte.plugin.svelte.format.enable": true,
 	"svelte.plugin.svelte.diagnostics.enable": false,
+	"svelte.enable-ts-plugin": true,
 	"prettier.configPath": ".config/.prettierrc.json",
 	"prettier.ignorePath": ".config/.prettierignore",
 	"python.analysis.typeCheckingMode": "basic",

diff --git a/client/js/tsconfig.json b/client/js/tsconfig.json
@@ -8,7 +8,7 @@
 		"outDir": "dist",
 		"declarationMap": true,
 		"module": "es2020",
-		"moduleResolution": "node16",
+		"moduleResolution": "bundler",
 		"skipDefaultLibCheck": true
 	}
 }
diff --git a/js/_cdn-test/package.json b/js/_cdn-test/package.json
@@ -7,7 +7,5 @@
 		"build": "vite build",
 		"preview": "vite preview  --port 3001"
 	},
-	"devDependencies": {
-		"vite": "^4.0.0"
-	}
+	"devDependencies": {}
 }
diff --git a/js/_spaces-test/package.json b/js/_spaces-test/package.json
@@ -16,10 +16,8 @@
 		"@sveltejs/kit": "^1.5.0",
 		"prettier": "^3.0.0",
 		"prettier-plugin-svelte": "^3.0.0",
-		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.3.0"
+		"typescript": "^5.0.0"
 	},
 	"type": "module",
 	"dependencies": {

diff --git a/js/_website/package.json b/js/_website/package.json
@@ -13,27 +13,25 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-static": "^2.0.2",
-		"@sveltejs/kit": "^1.5.0",
-		"svelte-i18n": "^3.6.0",
+		"@sveltejs/kit": "^1.26.0",
 		"@tailwindcss/forms": "^0.5.0",
 		"@tailwindcss/typography": "^0.5.4",
 		"@types/node": "^20.3.2",
 		"@types/prismjs": "^1.26.0",
 		"prismjs": "1.29.0",
-		"svelte": "^3.59.2",
 		"svelte-check": "^3.0.1",
+		"svelte-i18n": "^3.6.0",
 		"tailwindcss": "^3.1.6",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.3.9"
+		"typescript": "^5.0.0"
 	},
 	"type": "module",
 	"dependencies": {
+		"@gradio/code": "workspace:^",
 		"@sindresorhus/slugify": "^2.2.0",
 		"@sveltejs/adapter-vercel": "^3.0.3",
 		"hast-util-to-string": "^3.0.0",
 		"mdsvex": "^0.11.0",
-		"postcss": ">=8.3.3 <9.0.0",
-		"@gradio/code": "workspace:^"
+		"postcss": ">=8.3.3 <9.0.0"
 	}
 }
diff --git a/js/app/build_plugins.ts b/js/app/build_plugins.ts
@@ -2,7 +2,7 @@ import type { Plugin } from "vite";
 import { parse, HTMLElement } from "node-html-parser";
 
 import { join } from "path";
-import { writeFileSync, cpSync } from "fs";
+import { writeFileSync } from "fs";
 
 export function inject_ejs(): Plugin {
 	return {
@@ -97,7 +97,6 @@ export function generate_dev_entry({ enable }: { enable: boolean }): Plugin {
 		name: "generate-dev-entry",
 		transform(code, id) {
 			if (!enable) return;
-
 			const new_code = code.replace(RE_SVELTE_IMPORT, (str, $1, $2) => {
 				return `const ${$1.replace(
 					" as ",
@@ -221,9 +220,31 @@ function get_export_path(
 	return existsSync(_path) ? _path : undefined;
 }
 
+const ignore_list = [
+	"tootils",
+	"_cdn-test",
+	"_spaces-test",
+	"_website",
+	"app",
+	"atoms",
+	"fallback",
+	"icons",
+	"lite",
+	"preview",
+	"simpledropdown",
+	"simpletextbox",
+	"storybook",
+	"theme",
+	"timeseries",
+	"tooltip",
+	"upload",
+	"utils",
+	"wasm"
+];
 function generate_component_imports(): string {
 	const exports = readdirSync(join(__dirname, ".."))
 		.map((dir) => {
+			if (ignore_list.includes(dir)) return undefined;
 			if (!statSync(join(__dirname, "..", dir)).isDirectory()) return undefined;
 
 			const package_json_path = join(__dirname, "..", dir, "package.json");
@@ -300,8 +321,10 @@ export function resolve_svelte(enable: boolean): Plugin {
 		enforce: "pre",
 		name: "resolve-svelte",
 		async resolveId(id: string) {
+			if (!enable) return;
+
 			if (
-				(enable && id === "./svelte/svelte.js") ||
+				id === "./svelte/svelte.js" ||
 				id === "svelte" ||
 				id === "svelte/internal"
 			) {

diff --git a/js/app/package.json b/js/app/package.json
@@ -76,8 +76,7 @@
 		"d3-dsv": "^3.0.1",
 		"mime-types": "^2.1.34",
 		"postcss": "^8.4.21",
-		"postcss-prefix-selector": "^1.16.0",
-		"svelte": "^4.2.1"
+		"postcss-prefix-selector": "^1.16.0"
 	},
 	"msw": {
 		"workerDirectory": "public"

diff --git a/js/app/src/Login.svelte b/js/app/src/Login.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Form from "@gradio/form";
-	import Textbox from "@gradio/textbox";
+	import { BaseTextbox as Textbox } from "@gradio/textbox";
 	import { BaseButton } from "@gradio/button";
 	import Column from "@gradio/column";
 	import { _ } from "svelte-i18n";

diff --git a/js/app/src/MountComponents.svelte b/js/app/src/MountComponents.svelte
@@ -11,7 +11,7 @@
 	export let version: any;
 	export let autoscroll: boolean;
 
-	const dispatch = createEventDispatcher<{ mount: never }>();
+	const dispatch = createEventDispatcher<{ mount?: never }>();
 	onMount(() => {
 		dispatch("mount");
 	});

diff --git a/js/app/src/api_docs/ApiDocs.svelte b/js/app/src/api_docs/ApiDocs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	/* eslint-disable */
 	import { onMount, createEventDispatcher } from "svelte";
-	import type { ComponentMeta, Dependency } from "../components/types";
+	import type { ComponentMeta, Dependency } from "../types";
 	import { post_data } from "@gradio/client";
 	import NoApi from "./NoApi.svelte";
 	import type { client } from "@gradio/client";
@@ -13,7 +13,6 @@
 	import InstallSnippet from "./InstallSnippet.svelte";
 	import CodeSnippets from "./CodeSnippets.svelte";
 
-	import TryButton from "./TryButton.svelte";
 	import python from "./img/python.svg";
 	import javascript from "./img/javascript.svg";
 

diff --git a/js/app/src/api_docs/CodeSnippets.svelte b/js/app/src/api_docs/CodeSnippets.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ComponentMeta, Dependency } from "../components/types";
+	import type { ComponentMeta, Dependency } from "../types";
 	import CopyButton from "./CopyButton.svelte";
 	import { represent_value } from "./utils";
 	import { Block } from "@gradio/atoms";

diff --git a/js/app/src/i18n.ts b/js/app/src/i18n.ts
@@ -28,8 +28,8 @@ for (const lang in processed_langs) {
 	addMessages(lang, processed_langs[lang]);
 }
 
-export function setupi18n(): void {
-	init({
+export async function setupi18n(): Promise<void> {
+	await init({
 		fallbackLocale: "en",
 		initialLocale: getLocaleFromNavigator()
 	});

diff --git a/js/app/src/lite/index.ts b/js/app/src/lite/index.ts
@@ -6,7 +6,7 @@ import { wasm_proxied_WebSocket_factory } from "./websocket";
 import { wasm_proxied_mount_css, mount_prebuilt_css } from "./css";
 import type { mount_css } from "../css";
 import Index from "../Index.svelte";
-import type { ThemeMode } from "../components/types";
+import type { ThemeMode } from "../types";
 import { bootstrap_custom_element } from "./custom-element";
 
 // These imports are aliased at built time with Vite. See the `resolve.alias` config in `vite.config.ts`.

diff --git a/js/app/src/main.ts b/js/app/src/main.ts
@@ -20,8 +20,7 @@ let FONTS: string | [];
 
 FONTS = "__FONTS_CSS__";
 
-//@ts-ignore
-let IndexComponent;
+let IndexComponent: typeof Index;
 function create_custom_element(): void {
 	const o = {
 		SvelteComponent: svelte.SvelteComponent

diff --git a/js/app/test/blocks_chained_events.spec.ts b/js/app/test/blocks_chained_events.spec.ts
@@ -1,5 +1,4 @@
 import { test, expect } from "@gradio/tootils";
-import type { Response } from "@playwright/test";
 
 test(".success should not run if function fails", async ({ page }) => {
 	let last_iteration;