allow configering the root name in the desktop renderer

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 {

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

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) {
+    import(\"./index.js\").then(function (module) {{
-        module.main();
+        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")

packages/interpreter/src/interpreter.js

@@ -1,5 +1,5 @@
-export function main() {
+export function main(rootname = "main") {
-  let root = window.document.getElementById("main");
+  let root = window.document.getElementById(rootname);
   if (root != null) {
     window.interpreter = new Interpreter(root);
     window.ipc.postMessage(serializeIpcMessage("initialize"));