feat: link open in browser

examples/link.rs

@@ -0,0 +1,27 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! (
+        div { 
+            p {
+                a {
+                    href: "http://dioxuslabs.com/",
+                    "default link"
+                }
+            }
+            p {
+                a {
+                    href: "http://dioxuslabs.com/",
+                    onclick: |_| {
+                        println!("Hello Dioxus");
+                    },
+                    "custom event link",
+                }
+            }
+        }
+    ))
+}

packages/desktop/Cargo.toml

@@ -29,6 +29,7 @@ tokio = { version = "1.12.0", features = [
 ], optional = true, default-features = false }
 dioxus-core-macro = { path = "../core-macro", version ="^0.1.6"}
 dioxus-html = { path = "../html", features = ["serialize"], version ="^0.1.4"}
+webbrowser = "0.5.5"
 
 [features]
 default = ["tokio_runtime"]

packages/desktop/src/index.js

@@ -374,7 +374,7 @@ class Interpreter {
   }
 
   SetAttribute(edit) {
-    // console.log("setting attr", edit);
+    console.log("setting attr", edit);
     const name = edit.field;
     const value = edit.value;
     const ns = edit.ns;
@@ -399,6 +399,29 @@ class Interpreter {
           break;
         case "dangerous_inner_html":
           node.innerHTML = value;
+          break;
+        case "href":
+
+          if (node.tagName == "A") {
+            // open the <a> tag in browser
+            node.setAttribute("browser-href", value);
+            node.setAttribute("href", "#");
+
+            node.addEventListener("click", function(event) {
+
+              const target = event.target;
+              const real_id = target.getAttribute(`dioxus-id`);
+
+              rpc.call("browser_open", {
+                mounted_dom_id: parseInt(real_id),
+                href: target.getAttribute("browser-href"),
+              })
+            })
+
+          } else {
+            node.setAttribute(name, value);
+          }
+
           break;
         default:
           // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364

packages/desktop/src/lib.rs

@@ -187,6 +187,27 @@ pub fn launch_with_props<P: 'static + Send>(
                                 is_ready.store(true, std::sync::atomic::Ordering::Relaxed);
                                 let _ = proxy.send_event(UserWindowEvent::Update);
                             }
+                            "browser_open" => {
+                                let data = req.params.unwrap();
+                                log::trace!("Open browser: {:?}", data);
+                                if data.is_array() {
+                                    let arr = data.as_array().unwrap();
+                                    if arr[0].is_object() {
+                                        let temp = arr[0]
+                                            .as_object()
+                                            .unwrap();
+                                        if temp.contains_key("href") {
+                                            let url = temp
+                                            .get("href").unwrap()
+                                            .as_str().unwrap();
+                                            match webbrowser::open(url) {
+                                                Ok(_) => {},
+                                                Err(e) => log::trace!("Open browser error: {:?}", e),
+                                            }
+                                        }
+                                    }
+                                }
+                            }
                             _ => {}
                         }
                         None