Add use_js macro

Cargo.toml

@@ -72,6 +72,7 @@ members = [
     "packages/asset-resolver",
     "packages/depinfo",
     "packages/server",
+    "packages/use-js-macro",
 
     # Playwright tests
     "packages/playwright-tests/liveview",
@@ -175,6 +176,7 @@ dioxus-logger = { path = "packages/logger", version = "0.7.0-alpha.1" }
 dioxus-native = { path = "packages/native", version = "0.7.0-alpha.1" }
 dioxus-asset-resolver = { path = "packages/asset-resolver", version = "0.7.0-alpha.1" }
 dioxus-config-macros = { path = "packages/config-macros", version = "0.7.0-alpha.1" }
+dioxus-use-js-macro = { path = "packages/use-js-macro", version = "0.7.0-alpha.1" }
 const-serialize = { path = "packages/const-serialize", version = "0.7.0-alpha.1" }
 const-serialize-macro = { path = "packages/const-serialize-macro", version = "0.7.0-alpha.1" }
 generational-box = { path = "packages/generational-box", version = "0.7.0-alpha.1" }

examples/assets/example.js

@@ -0,0 +1,16 @@
+/** 
+ * This is a doc comment
+ * second line
+*/
+export function greeting(from, to) {
+    return `Hello ${to}, this is ${from} speaking from JavaScript!`;
+}
+
+/// This is another doc comment
+export function add(a, b) {
+    return a + b;
+}
+
+export function processData(data) {
+    return data.map(item => item.toUpperCase());
+}

examples/use_js_macro.rs

@@ -0,0 +1,49 @@
+use dioxus::prelude::*;
+
+// Generate the greeting function at compile time
+use_js!("examples/assets/example.js"::greeting);
+
+// Or generate multiple functions:
+// use_js!("examples/assets/example.js"::{greeting, add});
+
+// Or generate all exported functions:
+// use_js!("examples/assets/example.js"::*);
+
+fn main() {
+    launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    let future = use_resource(|| async move {
+        let from = "dave";
+        let to = "john";
+
+        // Now we can call the generated function directly!
+        let greeting_result = greeting(from, to)
+            .await
+            .map_err(Box::<dyn std::error::Error>::from)?;
+        let greeting: String =
+            serde_json::from_value(greeting_result).map_err(Box::<dyn std::error::Error>::from)?;
+        Ok::<String, Box<dyn std::error::Error>>(greeting)
+    });
+
+    rsx!(
+        div {
+            h1 { "Dioxus `use_js!` macro example!" }
+            {
+                match &*future.read() {
+                    Some(Ok(greeting)) => rsx! {
+                        p { "Greeting from JavaScript: {greeting}" }
+                    },
+                    Some(Err(e)) => rsx! {
+                        p { "Error: {e}" }
+                    },
+                    None => rsx! {
+                        p { "Running js..." }
+                    },
+                }
+            }
+        }
+    )
+}

packages/cli-opt/Cargo.toml

@@ -40,33 +40,33 @@ grass = "0.13.4"
 codemap = "0.1.3"
 
 # Js minification - swc has introduces minor versions with breaking changes in the past so we pin all of their crates
-swc_allocator = { version = "=2.0.0", default-features = false }
-swc_atoms = { version = "=3.0.2", default-features = false }
-swc_bundler = { version = "=7.0.0", default-features = false }
-swc_cached = { version = "=1.0.0", default-features = false }
-swc_common = { version = "=5.0.0", features = ["tty-emitter"], default-features = false }
-swc_config = { version = "=1.0.0", default-features = false }
-swc_config_macro = { version = "=1.0.0", default-features = false }
-swc_ecma_ast = { version = "=5.0.1", default-features = false }
-swc_ecma_codegen = { version = "=5.0.1", default-features = false }
-swc_ecma_codegen_macros = { version = "=1.0.0", default-features = false }
-swc_ecma_loader = { version = "=5.0.0", features = ["cache", "node"], default-features = false }
-swc_ecma_minifier = { version = "=7.0.1", default-features = false }
-swc_ecma_parser = { version = "=6.0.2", default-features = false }
-swc_ecma_transforms_base = { version = "=7.0.0", default-features = false }
-swc_ecma_transforms_macros = { version = "=1.0.0", default-features = false }
-swc_ecma_transforms_optimization = { version = "=7.0.1", default-features = false }
-swc_ecma_usage_analyzer = { version = "=7.0.0", default-features = false }
-swc_ecma_utils = { version = "=7.0.0", default-features = false }
-swc_ecma_visit = { version = "=5.0.0", default-features = false }
-swc_eq_ignore_macros = { version = "=1.0.0", default-features = false }
-swc_fast_graph = { version = "=6.0.0", default-features = false }
-swc_graph_analyzer = { version = "=5.0.0", default-features = false }
-swc_macros_common = { version = "=1.0.0", default-features = false }
-swc_parallel = { version = "=1.0.1", default-features = false }
+swc_allocator = { version = "=4.0.0", default-features = false }
+swc_atoms = { version = "=6.0.0", default-features = false }
+swc_bundler = { version = "=22.0.0", default-features = false }
+swc_cached = { version = "=2.0.0", default-features = false }
+swc_common = { version = "=13.0.1", features = ["tty-emitter"], default-features = false }
+swc_config = { version = "=3.1.1", default-features = false }
+swc_config_macro = { version = "=1.0.1", default-features = false }
+swc_ecma_ast = { version = "=13.0.0", default-features = false }
+swc_ecma_codegen = { version = "=15.0.1", default-features = false }
+swc_ecma_codegen_macros = { version = "=2.0.1", default-features = false }
+swc_ecma_loader = { version = "=13.0.0", features = ["cache", "node"], default-features = false }
+swc_ecma_minifier = { version = "=23.0.2", default-features = false }
+swc_ecma_parser = { version = "=17.0.1", default-features = false }
+swc_ecma_transforms_base = { version = "=18.0.0", default-features = false }
+swc_ecma_transforms_macros = { version = "=1.0.1", default-features = false }
+swc_ecma_transforms_optimization = { version = "=19.0.0", default-features = false }
+swc_ecma_usage_analyzer = { version = "=19.0.0", default-features = false }
+swc_ecma_utils = { version = "=18.0.0", default-features = false }
+swc_ecma_visit = { version = "=13.0.0", default-features = false }
+swc_eq_ignore_macros = { version = "=1.0.1", default-features = false }
+swc_fast_graph = { version = "=9.0.0", default-features = false }
+swc_graph_analyzer = { version = "=14.0.0", default-features = false }
+swc_macros_common = { version = "=1.0.1", default-features = false }
+swc_parallel = { version = "=1.3.0", default-features = false }
 swc_timer = { version = "=1.0.0", default-features = false }
-swc_visit = { version = "=2.0.0", default-features = false }
-browserslist-rs = { version = "=0.16.0" }
+swc_visit = { version = "=2.0.1", default-features = false }
+browserslist-rs = { version = "=0.18.2" }
 
 [build-dependencies]
 built = { version = "0.7.5", features = ["git2"] }

packages/cli-opt/src/js.rs

@@ -30,7 +30,7 @@ use crate::hash::hash_file_contents;
 struct TracingEmitter;
 
 impl Emitter for TracingEmitter {
-    fn emit(&mut self, db: &swc_common::errors::DiagnosticBuilder<'_>) {
+    fn emit(&mut self, db: &mut swc_common::errors::DiagnosticBuilder<'_>) {
         match db.level {
             swc_common::errors::Level::Bug
             | swc_common::errors::Level::Fatal

packages/dioxus/Cargo.toml

@@ -30,6 +30,7 @@ dioxus-server = { workspace = true, optional = true }
 dioxus-ssr = { workspace = true, optional = true }
 dioxus-native = { workspace = true, optional = true }
 dioxus_server_macro = { workspace = true, optional = true }
+dioxus-use-js-macro = { workspace = true, optional = true }
 manganis = { workspace = true, features = ["dioxus"], optional = true }
 dioxus-logger = { workspace = true, optional = true }
 warnings = { workspace = true, optional = true }
@@ -58,7 +59,7 @@ default = [
 ]
 minimal = ["macro", "html", "signals", "hooks", "launch"]
 signals = ["dep:dioxus-signals"]
-macro = ["dep:dioxus-core-macro"]
+macro = ["dep:dioxus-core-macro", "dep:dioxus-use-js-macro"]
 html = ["dep:dioxus-html"]
 hooks = ["dep:dioxus-hooks"]
 devtools = ["dep:dioxus-devtools", "dioxus-web?/devtools", "dioxus-fullstack?/devtools"]

packages/dioxus/src/lib.rs

@@ -150,6 +150,10 @@ pub mod prelude {
     #[allow(deprecated)]
     pub use dioxus_core_macro::{component, rsx, Props};
 
+    #[cfg(feature = "macro")]
+    #[cfg_attr(docsrs, doc(cfg(feature = "macro")))]
+    pub use dioxus_use_js_macro::use_js;
+
     #[cfg(feature = "launch")]
     #[cfg_attr(docsrs, doc(cfg(feature = "launch")))]
     pub use dioxus_config_macro::*;

packages/use-js-macro/Cargo.toml

@@ -0,0 +1,23 @@
+[package]
+name = "dioxus-use-js-macro"
+version = { workspace = true }
+authors = ["Dillon Henry McMahon"]
+edition = "2021"
+description = "javascript use bridge macro for Dioxus"
+license = "MIT OR Apache-2.0"
+repository = "https://github.com/DioxusLabs/dioxus/"
+homepage = "https://dioxuslabs.com"
+keywords = ["web", "desktop", "mobile", "gui", "wasm"]
+
+[lib]
+proc-macro = true
+
+[dependencies]
+proc-macro2 = "1.0"
+quote = "1.0"
+syn = { version = "2.0", features = ["full"] }
+swc_ecma_parser = { version = "=17.0.1", default-features = false }
+swc_ecma_ast = { version = "=13.0.0", default-features = false }
+swc_ecma_visit = { version = "=13.0.0", default-features = false }
+swc_common = { version = "=13.0.1", default-features = false }
+

packages/use-js-macro/README.md

@@ -0,0 +1,58 @@
+# Dioxus use-js-macro
+
+A to create rust binding to javascript functions
+
+## Usage
+Example:
+```rust
+use dioxus::prelude::*;
+
+// Generate the greeting function at compile time
+use_js!("assets/example.js"::greeting);
+
+// Or generate multiple functions:
+// use_js!("assets/example.js"::{greeting, add});
+
+// Or generate all exported functions:
+// use_js!("assets/example.js"::*);
+
+fn main() {
+    launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    let future = use_resource(|| async move {
+        let from = "dave";
+        let to = "john";
+
+        // Now we can call the generated function directly!
+        let greeting_result = greeting(from, to)
+            .await
+            .map_err(Box::<dyn std::error::Error>::from)?;
+        let greeting: String =
+            serde_json::from_value(greeting_result).map_err(Box::<dyn std::error::Error>::from)?;
+        Ok::<String, Box<dyn std::error::Error>>(greeting)
+    });
+
+    rsx!(
+        div {
+            h1 { "Dioxus `use_js!` macro example!" }
+            {
+                match &*future.read() {
+                    Some(Ok(greeting)) => rsx! {
+                        p { "Greeting from JavaScript: {greeting}" }
+                    },
+                    Some(Err(e)) => rsx! {
+                        p { "Error: {e}" }
+                    },
+                    None => rsx! {
+                        p { "Running js..." }
+                    },
+                }
+            }
+        }
+    )
+}
+
+```