Add call_js macro

Cargo.toml

@@ -24,6 +24,7 @@ dioxus-notification = { path = "packages/notification", version = "0.1.0-alpha.1
 dioxus-sync = { path = "packages/sync", version = "0.1.0-alpha.1" }
 dioxus-util = { path = "packages/util", version = "0.1.0-alpha.1" }
 dioxus-window = { path = "packages/window", version = "0.1.0-alpha.1" }
+dioxus-call-js = { path = "packages/call-js", version = "0.1.0-alpha.1" }
 
 # Dioxus
 dioxus = "0.6.0"

examples/call-js/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "call-js-example"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { workspace = true }
+dioxus-call-js = { workspace = true }
+serde_json = "1.0"

examples/call-js/README.md

@@ -0,0 +1,7 @@
+# call-js
+
+Learn how to use `call_js!` macro from `dioxus-call-js`.
+
+Run:
+
+```dx serve```

examples/call-js/assets/example.js

@@ -0,0 +1,5 @@
+
+
+export function greeting(from, to) {
+    return `Hello ${to} from ${from}`;
+}

examples/call-js/src/main.rs

@@ -0,0 +1,35 @@
+use dioxus::prelude::*;
+use dioxus_call_js::call_js;
+
+fn main() {
+    launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    let future = use_resource(|| async move {
+        let from = "dave";
+        let to = "john";
+        let greeting = call_js!("assets/example.js", greeting(from, to))
+            .await
+            .unwrap();
+        let greeting: String = serde_json::from_value(greeting).unwrap();
+        return greeting;
+    });
+
+    rsx!(
+        div {
+            h1 { "Dioxus `call_js!` macro example!" }
+            {
+                match &*future.read() {
+                    Some(greeting) => rsx! {
+                        p { "Greeting from JavaScript: {greeting}" }
+                    },
+                    None => rsx! {
+                        p { "Running js" }
+                    },
+                }
+            }
+        }
+    )
+}

packages/call-js/Cargo.toml

@@ -0,0 +1,20 @@
+[package]
+name = "dioxus-call-js"
+version = "0.1.0"
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+homepage.workspace = true
+repository.workspace = true
+
+[lib]
+proc-macro = true
+
+[dependencies]
+proc-macro2 = "1.0"
+quote = "1.0"
+syn = { version = "2.0", features = ["full"] }
+swc_ecma_parser = "17"
+swc_ecma_ast = "13"
+swc_ecma_visit = "13"
+swc_common = "13"

packages/call-js/README.md

@@ -0,0 +1,47 @@
+# Dioxus call-js
+
+A macro to simplify calling javascript from rust
+
+## Usage
+Add `dioxus-call-js` to your `Cargo.toml`:
+```toml
+[dependencies]
+dioxus-call-js = "0.1"
+```
+
+Example:
+```rust
+use dioxus::prelude::*;
+use dioxus_call_js::call_js;
+
+fn main() {
+    launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    let future = use_resource(|| async move {
+        let from = "dave";
+        let to = "john";
+        let greeting = call_js!("assets/example.js", greeting(from, to)).await.unwrap();
+        let greeting: String = serde_json::from_value(greeting).unwrap();
+        return greeting;
+    });
+
+    rsx!(
+        div {
+            h1 { "Dioxus `call_js!` macro example!" }
+            {
+                match &*future.read() {
+                    Some(greeting) => rsx! {
+                        p { "Greeting from JavaScript: {greeting}" }
+                    },
+                    None => rsx! {
+                        p { "Running js" }
+                    },
+                }
+            }
+        }
+    )
+}
+```