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/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