rererefactor frontend files (#5960)

* do all the things

* add changeset

* remove codemod

* fix

* change casing

* condense upload button

---------

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

.changeset/cute-crabs-know.md

@@ -0,0 +1,46 @@
+---
+"@gradio/accordion": minor
+"@gradio/annotatedimage": minor
+"@gradio/app": minor
+"@gradio/audio": minor
+"@gradio/box": minor
+"@gradio/button": minor
+"@gradio/chatbot": minor
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/code": minor
+"@gradio/colorpicker": minor
+"@gradio/column": minor
+"@gradio/dataframe": minor
+"@gradio/dataset": minor
+"@gradio/dropdown": minor
+"@gradio/fallback": minor
+"@gradio/file": minor
+"@gradio/fileexplorer": minor
+"@gradio/form": minor
+"@gradio/gallery": minor
+"@gradio/group": minor
+"@gradio/highlightedtext": minor
+"@gradio/html": minor
+"@gradio/image": minor
+"@gradio/json": minor
+"@gradio/label": minor
+"@gradio/markdown": minor
+"@gradio/model3d": minor
+"@gradio/number": minor
+"@gradio/plot": minor
+"@gradio/preview": minor
+"@gradio/radio": minor
+"@gradio/row": minor
+"@gradio/slider": minor
+"@gradio/state": minor
+"@gradio/tabitem": minor
+"@gradio/tabs": minor
+"@gradio/textbox": minor
+"@gradio/uploadbutton": minor
+"@gradio/video": minor
+"gradio": minor
+"newtext": minor
+---
+
+feat:rererefactor frontend files

js/accordion/static/StaticAccordion.svelte → js/accordion/Index.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Accordion from "./Accordion.svelte";
+	import Accordion from "./shared/Accordion.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";

js/accordion/package.json

@@ -3,7 +3,6 @@
 	"version": "0.1.3",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": true,
@@ -14,10 +13,7 @@
 		"@gradio/statustracker": "workspace:^"
 	},
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	}
-}
+}

js/annotatedimage/static/AnnotatedImage.svelte → js/annotatedimage/Index.svelte

@@ -67,7 +67,7 @@
 	function handle_click(i: number, value: string): void {
 		gradio.dispatch("select", {
 			value: label,
-			index: i,
+			index: i
 		});
 	}
 </script>

js/annotatedimage/package.json

@@ -3,17 +3,13 @@
 	"version": "0.2.3",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "./static/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": true,
 	"main_changeset": true,
 	"exports": {
-		".": "./static/index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
@@ -22,4 +18,4 @@
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	}
-}
+}

js/app/build_plugins.ts

@@ -216,13 +216,13 @@ function get_export_path(
 	pkg_json: Record<string, any>
 ): string | undefined {
 	if (!pkg_json.exports) return undefined;
-	const _path = join(root, "..", `${pkg_json.exports[`./${path}`]}`);
+	const _path = join(root, "..", `${pkg_json.exports[`${path}`]}`);
 
 	return existsSync(_path) ? _path : undefined;
 }
 
 function generate_component_imports(): string {
-	const components = readdirSync(join(__dirname, ".."))
+	const exports = readdirSync(join(__dirname, ".."))
 		.map((dir) => {
 			if (!statSync(join(__dirname, "..", dir)).isDirectory()) return undefined;
 
@@ -232,48 +232,34 @@ function generate_component_imports(): string {
 					readFileSync(package_json_path, "utf8")
 				);
 
-				const interactive = get_export_path(
-					"interactive",
-					package_json_path,
-					package_json
-				);
+				const component = get_export_path(".", package_json_path, package_json);
 				const example = get_export_path(
-					"example",
-					package_json_path,
-					package_json
-				);
-				const static_dir = get_export_path(
-					"static",
+					"./example",
 					package_json_path,
 					package_json
 				);
 
-				if (!interactive && !example && !static_dir) return undefined;
+				if (!component && !example) return undefined;
 
 				return {
 					name: package_json.name,
-					interactive,
-					example,
-					static: static_dir
+					component,
+					example
 				};
 			}
 			return undefined;
 		})
 		.filter((x) => x !== undefined);
 
-	const imports = components.reduce((acc, component) => {
-		if (!component) return acc;
+	const imports = exports.reduce((acc, _export) => {
+		if (!_export) return acc;
 
-		const interactive = component.interactive
-			? `interactive: () => import("${component.name}/interactive"),\n`
+		const example = _export.example
+			? `example: () => import("${_export.name}/example"),\n`
 			: "";
-		const example = component.example
-			? `example: () => import("${component.name}/example"),\n`
-			: "";
-		return `${acc}"${component.name.replace("@gradio/", "")}": {
-			${interactive}
+		return `${acc}"${_export.name.replace("@gradio/", "")}": {
 			${example}
-			static: () => import("${component.name}/static")
+			component: () => import("${_export.name}")
 			},\n`;
 	}, "");
 
@@ -288,6 +274,8 @@ const component_map = {
 };
 `;
 
+	console.log(component_map);
+
 	return `${component_map}\n\n${readFileSync(loader_path, "utf8")}`;
 }
 

js/app/component_loader.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
 
-export async function load_component(api_url, name, mode, id) {
+export async function load_component({ api_url, name, id, variant }) {
 	const comps = window.__GRADIO__CC__;
 
 	const _component_map = {
@@ -11,26 +11,25 @@ export async function load_component(api_url, name, mode, id) {
 	try {
 		//@ts-ignore
 		const c = await (
-			_component_map?.[id]?.[mode] || // for dev mode custom components
-			_component_map?.[name]?.[mode] ||
-			_component_map?.[name]?.["static"]
+			_component_map?.[id]?.[variant] || // for dev mode custom components
+			_component_map?.[name]?.[variant]
 		)();
 		return {
 			name,
 			component: c
 		};
 	} catch (e) {
 		try {
-			await load_css(`${api_url}/custom_component/${id}/${mode}/style.css`);
+			await load_css(`${api_url}/custom_component/${id}/${variant}/style.css`);
 			const c = await import(
-				/* @vite-ignore */ `${api_url}/custom_component/${id}/${mode}/index.js`
+				/* @vite-ignore */ `${api_url}/custom_component/${id}/${variant}/index.js`
 			);
 			return {
 				name,
 				component: c
 			};
 		} catch (e) {
-			if (mode === "example") {
+			if (variant === "example") {
 				return {
 					name,
 					component: await import("@gradio/fallback/example")

js/app/src/Blocks.svelte

@@ -237,26 +237,29 @@
 					}
 					let _c;
 
-					const id = components.find(
-						(c) => c.type === name
-					)?.component_class_id;
-					//@ts-ignore
-					_c = load_component(api_url, name, "example", id);
-
-					example_component_map.set(name, _c);
+					const matching_component = components.find((c) => c.type === name);
+					if (matching_component) {
+						_c = load_component({
+							api_url,
+							name,
+							id: matching_component.component_class_id,
+							variant: "example"
+						});
+						example_component_map.set(name, _c);
+					}
 				});
 
 				c.props.component_map = example_component_map;
 			}
 
 			// maybe load custom
 
-			const _c = load_component(
+			const _c = load_component({
 				api_url,
-				c.type,
-				c.props.mode,
-				c.component_class_id
-			);
+				name: c.type,
+				id: c.component_class_id,
+				variant: "component"
+			});
 			_component_set.add(_c);
 			__component_map.set(`${c.type}_${c.props.mode}`, _c);
 		});
@@ -276,37 +279,6 @@
 		});
 	}
 
-	async function update_interactive_mode(
-		instance: ComponentMeta,
-		mode: "dynamic" | "interactive" | "static"
-	): Promise<void> {
-		let new_mode: "interactive" | "static" =
-			mode === "dynamic" ? "interactive" : mode;
-
-		if (instance.props.mode === new_mode) return;
-
-		instance.props.mode = new_mode;
-		const _c = load_component(
-			api_url,
-			instance.type,
-			instance.props.mode,
-			instance.component_class_id
-		);
-		component_set.add(_c);
-		_component_map.set(
-			`${instance.type}_${instance.props.mode}`,
-			_c as Promise<{
-				name: ComponentMeta["type"];
-				component: LoadedComponent;
-			}>
-		);
-
-		_c.then((c) => {
-			instance.component = c.component.default;
-			rootNode = rootNode;
-		});
-	}
-
 	function handle_update(data: any, fn_index: number): void {
 		const outputs = dependencies[fn_index].outputs;
 		data?.forEach((value: any, i: number) => {
@@ -321,12 +293,6 @@
 					if (update_key === "__type__") {
 						continue;
 					} else {
-						if (update_key === "mode") {
-							update_interactive_mode(
-								output,
-								update_value as "dynamic" | "static"
-							);
-						}
 						output.props[update_key] = update_value;
 					}
 				}

js/app/src/Login.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Form from "@gradio/form";
-	import Textbox from "@gradio/textbox/interactive";
-	import { BaseButton } from "@gradio/button/static";
+	import Textbox from "@gradio/textbox";
+	import { BaseButton } from "@gradio/button";
 	import Column from "@gradio/column";
 	import { _ } from "svelte-i18n";
 	export let root: string;

js/app/src/api_docs/CopyButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BaseButton } from "@gradio/button/static";
+	import { BaseButton } from "@gradio/button";
 	export let code: string;
 	let copy_text = "copy";
 

js/app/src/api_docs/InputPayload.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { ComponentMeta, Dependency } from "../components/types";
-	import { BaseButton } from "@gradio/button/static";
+	import type { ComponentMeta, Dependency } from "../types";
+	import { BaseButton } from "@gradio/button";
 	import { Block } from "@gradio/atoms";
 
 	export let dependency: Dependency;

js/app/src/api_docs/TryButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BaseButton } from "@gradio/button/static";
+	import { BaseButton } from "@gradio/button";
 
 	export let dependency_index: number;
 	export let run: (id: number) => Promise<void>;

js/app/src/vite-env-override.d.ts

@@ -7,12 +7,13 @@ declare module "*.whl" {
 
 // virtual module component type definition
 declare module "virtual:component-loader" {
-	export function load_component(
-		api_url: string,
-		name: string,
-		mode: "interactive" | "static" | "example",
-		id: string
-	): Promise<{
+	interface Args {
+		api_url: string;
+		name: string;
+		id: string;
+		variant: "component" | "example";
+	}
+	export function load_component(args: Args): Promise<{
 		name: ComponentMeta["type"];
 		component: LoadedComponent;
 	}>;