Update examples, add css

examples/eval.rs

@@ -1,3 +1,8 @@
+//! This example shows how to use the `eval` function to run JavaScript code in the webview.
+//!
+//! Eval will only work with renderers that support javascript - so currently only the web and desktop/mobile renderers
+//! that use a webview. Native renderers will throw "unsupported" errors when calling `eval`.
+
 use dioxus::prelude::*;
 
 fn main() {
@@ -5,20 +10,33 @@ fn main() {
 }
 
 fn app() -> Element {
+    // Create a future that will resolve once the javascript has been succesffully executed.
     let future = use_resource(move || async move {
+        // Wait a little bit just to give the appearance of a loading screen
+        tokio::time::sleep(tokio::time::Duration::from_secs(1)).await;
+
+        // The `eval` is available in the prelude - and simply takes a block of JS.
+        // Dioxus' eval is interesting since it allows sending messages to and from the JS code using the `await dioxus.recv()`
+        // builtin function. This allows you to create a two-way communication channel between Rust and JS.
         let mut eval = eval(
             r#"
                 dioxus.send("Hi from JS!");
                 let msg = await dioxus.recv();
                 console.log(msg);
-                return "hello world";
+                return "hi from JS!";
             "#,
         )
         .unwrap();
 
+        // Send a message to the JS code.
         eval.send("Hi from Rust!".into()).unwrap();
+
+        // Our line on the JS side will log the message and then return "hello world".
         let res = eval.recv().await.unwrap();
+
+        // This will print "Hi from JS!" and "Hi from Rust!".
         println!("{:?}", eval.await);
+
         res
     });