Lite worker refactoring

.changeset/chatty-kings-visit.md

@@ -0,0 +1,7 @@
+---
+"@gradio/lite": patch
+"@gradio/wasm": patch
+"gradio": patch
+---
+
+feat:Lite worker refactoring

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

@@ -48,25 +48,20 @@ export function bootstrap_custom_element(
 		controller: GradioAppController | null = null;
 
 		connectedCallback(): void {
-			// At the time of connectedCallback, the child elements of the custom element are not yet parsed,
-			// so we need to defer the initialization to the next frame.
-			// Ref: https://stackoverflow.com/q/70949141/13103190
-			window.requestAnimationFrame(() => {
-				const gradioComponentOptions = this.parseGradioComponentOptions();
-				const gradioLiteAppOptions = this.parseGradioLiteAppOptions();
-
-				this.innerHTML = "";
-
-				this.controller = create({
-					target: this, // Same as `js/spa/src/main.ts`
-					code: gradioLiteAppOptions.code,
-					requirements: gradioLiteAppOptions.requirements,
-					files: gradioLiteAppOptions.files,
-					entrypoint: gradioLiteAppOptions.entrypoint,
-					playground: this.hasAttribute("playground"),
-					layout: this.getAttribute("layout"),
-					...gradioComponentOptions
-				});
+			const gradioComponentOptions = this.parseGradioComponentOptions();
+			const gradioLiteAppOptions = this.parseGradioLiteAppOptions();
+
+			this.innerHTML = "";
+
+			this.controller = create({
+				target: this, // Same as `js/spa/src/main.ts`
+				code: gradioLiteAppOptions.code,
+				requirements: gradioLiteAppOptions.requirements,
+				files: gradioLiteAppOptions.files,
+				entrypoint: gradioLiteAppOptions.entrypoint,
+				playground: this.hasAttribute("playground"),
+				layout: this.getAttribute("layout"),
+				...gradioComponentOptions
 			});
 		}
 

js/lite/src/index.ts

@@ -122,7 +122,14 @@ export function create(options: Options): GradioAppController {
 // @ts-ignore
 globalThis.createGradioApp = create;
 
-bootstrap_custom_element(create);
+// Deferring the custom element registration until the DOM is ready.
+// If not, `this.textContent` will be empty in `connectedCallback`
+// because the browser has not parsed the content yet.
+// Using `setTimeout()` is also a solution but it might not be the best practice as written in the article below.
+// Ref: https://dbushell.com/2024/06/15/custom-elements-unconnected-callback/
+document.addEventListener("DOMContentLoaded", () => {
+	bootstrap_custom_element(create);
+});
 
 declare let BUILD_MODE: string;
 if (BUILD_MODE === "dev") {

js/wasm/src/webworker/index.ts

@@ -106,8 +106,6 @@ os.link = lambda src, dst: None
 
 	console.debug("Defining a ASGI wrapper function.");
 	updateProgress("Defining a ASGI wrapper function");
-	// TODO: Unlike Streamlit, user's code is executed in the global scope,
-	//       so we should not define this function in the global scope.
 	await pyodide.runPythonAsync(`
 # Based on Shiny's App.call_pyodide().
 # https://github.com/rstudio/py-shiny/blob/v0.3.3/shiny/_app.py#L224-L258