Lite worker refactoring (#9424)

* Remove a comment no longer correct * add changeset * Fix custom element registration timing * add changeset * add changeset * Revert change on custom-element/index.ts --------- Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Ali Abdalla <[email protected]>
gradio-app · Nov 2, 2024 · a1582a6 · a1582a6
1 parent f109497
commit a1582a6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/chatty-kings-visit.md b/.changeset/chatty-kings-visit.md
@@ -0,0 +1,7 @@
+---
+"@gradio/lite": patch
+"@gradio/wasm": patch
+"gradio": patch
+---
+
+feat:Lite worker refactoring
diff --git a/js/lite/src/index.ts b/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") {

diff --git a/js/wasm/src/webworker/index.ts b/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