Remove a circular dependency between lite/index.ts and lite/custom-el…

…ement/index.ts to solve a bug that the dev app is mounted twice sometimes

js/app/src/lite/custom-element/index.ts

@@ -1,4 +1,6 @@
-import { create, type Options } from "..";
+// NOTE: We should only import the types from ".." to avoid the circular dependency of implementations,
+// which causes repeated executions of the ".." module in †he dev mode and can lead to multiple instances of the dev app.
+import type { create as createLiteAppFunc, Options } from "..";
 
 interface GradioComponentOptions {
 	info: Options["info"];
@@ -28,7 +30,9 @@ function parseRequirementsTxt(content: string): string[] {
 		.filter((r) => r !== "");
 }
 
-export function bootstrap_custom_element(): void {
+export function bootstrap_custom_element(
+	create: typeof createLiteAppFunc
+): void {
 	const CUSTOM_ELEMENT_NAME = "gradio-lite";
 
 	if (customElements.get(CUSTOM_ELEMENT_NAME)) {

js/app/src/lite/index.ts

@@ -258,7 +258,7 @@ export function create(options: Options): GradioAppController {
 // @ts-ignore
 globalThis.createGradioApp = create;
 
-bootstrap_custom_element();
+bootstrap_custom_element(create);
 
 declare let BUILD_MODE: string;
 if (BUILD_MODE === "dev") {