Feat: web example + cli writes to browser screen!

packages/cli/Cargo.toml

@@ -12,7 +12,7 @@ description = "CLI tool for developing, testing, and publishing Dioxus apps"
 thiserror = "1.0.23"
 log = "0.4.13"
 fern = { version = "0.6.0", features = ["colored"] }
-wasm-bindgen-cli-support = "0.2.69"
+wasm-bindgen-cli-support = "0.2.70"
 anyhow = "1.0.38"
 argh = "0.1.4"
 serde = "1.0.120"

packages/cli/src/logging.rs

@@ -36,7 +36,7 @@ pub fn set_up_logging() {
         // field which defaults to the module path but can be overwritten with the `target`
         // parameter:
         // `info!(target="special_target", "This log message is about special_target");`
-        .level_for("diopack", log::LevelFilter::Info)
+        .level_for("dioxus-cli", log::LevelFilter::Info)
         // .level_for("pretty_colored", log::LevelFilter::Trace)
         // output to stdout
         .chain(std::io::stdout())

packages/web/Cargo.toml

@@ -9,7 +9,8 @@ edition = "2018"
 [dependencies]
 dioxus-core = { path = "../core" }
 js-sys = "0.3"
-wasm-bindgen = "0.2.70"
+wasm-bindgen = "0.2.69"
+# wasm-bindgen = "0.2.70"
 lazy_static = "1.4.0"
 wasm-bindgen-futures = "0.4.20"
 futures = "0.3.12"

packages/web/examples/basic.rs

@@ -0,0 +1,50 @@
+//! basic example that renders a simple domtree to the page :)
+//!
+//!
+//!
+use dioxus_core::prelude::bumpalo::Bump;
+use dioxus_core::prelude::*;
+use dioxus_web::*;
+
+fn main() {
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    log::debug!("Hello world, from the app");
+    WebsysRenderer::simple_render(html! {
+
+        // Body
+        <div class="flex items-center justify-center flex-col">
+            <div class="flex items-center justify-center">
+                <div class="flex flex-col bg-white rounded p-4 w-full max-w-xs">
+                    // Title
+                    <div class="font-bold text-xl">
+                        // {format!("Fibonacci Calculator: n = {}",n)}
+                        "Fibonacci Calculator: n = {}"
+                    </div>
+
+                    // Subtext / description
+                    <div class="text-sm text-gray-500">
+                        // {format!("Calculated in {} nanoseconds",duration)}
+                        // {format!("Calculated in {} nanoseconds",duration)}
+                        "Calculated in {} nanoseconds"
+                    </div>
+
+                    <div class="flex flex-row items-center justify-center mt-6">
+                        // Main number
+                        <div class="font-medium text-6xl">
+                            // {format!("{}",fib_n)}
+                        </div>
+                    </div>
+
+                    // Try another
+                    <div class="flex flex-row justify-between mt-6">
+                        // <a href=format!("http://localhost:8080/fib/{}", other_fib_to_try) class="underline">
+                            "Click to try another number"
+                            // {"Click to try another number"}
+                        // </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    });
+}

packages/web/src/lib.rs

@@ -102,15 +102,27 @@ impl WebsysRenderer {
         Ok(())
     }
 
-    fn simple_render(tree: impl for<'a> Fn(&'a Bump) -> VNode<'a>) {
+    pub fn simple_render(tree: impl for<'a> Fn(&'a Bump) -> VNode<'a>) {
         let bump = Bump::new();
 
         let old = html! { <div> </div> }(&bump);
+
+        let created = create_dom_node(&old);
+        let root_node = created.node;
+
         let new = tree(&bump);
 
         let mut machine = DiffMachine::new();
 
         let patches = machine.diff(&old, &new);
+        log::info!("There are {:?} patches", patches.len());
+
+        let root2 = root_node.clone();
+        patch(root_node, &patches).expect("Failed to simple render");
+        let document = web_sys::window().unwrap().document().unwrap();
+
+        document.body().unwrap().append_child(&root2);
+        log::info!("Succesfully patched the dom");
     }
 }
 
@@ -454,6 +466,7 @@ pub fn create_element_node(node: &dioxus_core::nodes::VElement) -> CreatedNode<E
     let mut previous_node_was_text = false;
 
     node.children.iter().for_each(|child| {
+        log::info!("Patching child");
         match child {
             VNode::Text(text_node) => {
                 let current_node = element.as_ref() as &web_sys::Node;