From f84166fb119bf9c99babb10b678e0316897582ea Mon Sep 17 00:00:00 2001
From: Evan Almloff <ealmlof1@stumail.jccc.edu>
Date: Sun, 18 Dec 2022 22:28:40 -0600
Subject: [PATCH] allow configering the root name in the desktop renderer

---
 packages/desktop/src/cfg.rs             | 10 ++++++++++
 packages/desktop/src/lib.rs             |  2 ++
 packages/desktop/src/protocol.rs        | 20 +++++++++++++-------
 packages/interpreter/src/interpreter.js |  4 ++--
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/desktop/src/cfg.rs b/packages/desktop/src/cfg.rs
index 060e95ce2..4456eb2d7 100644
--- a/packages/desktop/src/cfg.rs
+++ b/packages/desktop/src/cfg.rs
@@ -21,6 +21,7 @@ pub struct Config {
     pub(crate) resource_dir: Option<PathBuf>,
     pub(crate) custom_head: Option<String>,
     pub(crate) custom_index: Option<String>,
+    pub(crate) root_name: String,
 }
 
 type DropHandler = Box<dyn Fn(&Window, FileDropEvent) -> bool>;
@@ -46,6 +47,7 @@ impl Config {
             resource_dir: None,
             custom_head: None,
             custom_index: None,
+            root_name: "main".to_string(),
         }
     }
 
@@ -126,6 +128,14 @@ impl Config {
         self.custom_index = Some(index);
         self
     }
+
+    /// Set the name of the element that Dioxus will use as the root.
+    ///
+    /// This is akint to calling React.render() on the element with the specified name.
+    pub fn with_root_name(mut self, name: impl Into<String>) -> Self {
+        self.root_name = name.into();
+        self
+    }
 }
 
 impl Default for Config {
diff --git a/packages/desktop/src/lib.rs b/packages/desktop/src/lib.rs
index a635e3f4e..a37ad88f8 100644
--- a/packages/desktop/src/lib.rs
+++ b/packages/desktop/src/lib.rs
@@ -164,6 +164,7 @@ fn build_webview(
     let custom_head = cfg.custom_head.clone();
     let resource_dir = cfg.resource_dir.clone();
     let index_file = cfg.custom_index.clone();
+    let root_name = cfg.root_name.clone();
 
     // We assume that if the icon is None in cfg, then the user just didnt set it
     if cfg.window.window.window_icon.is_none() {
@@ -220,6 +221,7 @@ fn build_webview(
                 resource_dir.clone(),
                 custom_head.clone(),
                 index_file.clone(),
+                &root_name,
             )
         })
         .with_file_drop_handler(move |window, evet| {
diff --git a/packages/desktop/src/protocol.rs b/packages/desktop/src/protocol.rs
index a544aa305..625e0abbc 100644
--- a/packages/desktop/src/protocol.rs
+++ b/packages/desktop/src/protocol.rs
@@ -4,19 +4,25 @@ use wry::{
     Result,
 };
 
-const MODULE_LOADER: &str = r#"
+fn module_loader(root_name: &str) -> String {
+    format!(
+        "
 <script>
-    import("./index.js").then(function (module) {
-        module.main();
-    });
+    import(\"./index.js\").then(function (module) {{
+        module.main(\"{}\");
+    }});
 </script>
-"#;
+",
+        root_name
+    )
+}
 
 pub(super) fn desktop_handler(
     request: &Request<Vec<u8>>,
     asset_root: Option<PathBuf>,
     custom_head: Option<String>,
     custom_index: Option<String>,
+    root_name: &str,
 ) -> Result<Response<Vec<u8>>> {
     // Any content that uses the `dioxus://` scheme will be shuttled through this handler as a "special case".
     // For now, we only serve two pieces of content which get included as bytes into the final binary.
@@ -30,7 +36,7 @@ pub(super) fn desktop_handler(
         // we'll look for the closing </body> tag and insert our little module loader there.
         if let Some(custom_index) = custom_index {
             let rendered = custom_index
-                .replace("</body>", &format!("{}</body>", MODULE_LOADER))
+                .replace("</body>", &format!("{}</body>", module_loader(root_name)))
                 .into_bytes();
             Response::builder()
                 .header("Content-Type", "text/html")
@@ -42,7 +48,7 @@ pub(super) fn desktop_handler(
             if let Some(custom_head) = custom_head {
                 template = template.replace("<!-- CUSTOM HEAD -->", &custom_head);
             }
-            template = template.replace("<!-- MODULE LOADER -->", MODULE_LOADER);
+            template = template.replace("<!-- MODULE LOADER -->", &module_loader(root_name));
 
             Response::builder()
                 .header("Content-Type", "text/html")
diff --git a/packages/interpreter/src/interpreter.js b/packages/interpreter/src/interpreter.js
index 3ac52a8f1..6367af68d 100644
--- a/packages/interpreter/src/interpreter.js
+++ b/packages/interpreter/src/interpreter.js
@@ -1,5 +1,5 @@
-export function main() {
-  let root = window.document.getElementById("main");
+export function main(rootname = "main") {
+  let root = window.document.getElementById(rootname);
   if (root != null) {
     window.interpreter = new Interpreter(root);
     window.ipc.postMessage(serializeIpcMessage("initialize"));