Feat: more docs, example, mroe nodes

examples/Cargo.toml

@@ -0,0 +1,30 @@
+[package]
+name = "dioxus-examples"
+version = "0.0.0"
+authors = ["Jonathan Kelley <jkelleyrtp@gmail.com>"]
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+fern = { vesion = "0.6.0", features = ["colored"] }
+log = "0.4.13"
+dioxus-core = { path = "../packages/core" }
+rand = "0.8.2"
+
+
+[dev-dependencies]
+async-std = { version = "1.9.0", features = ["attributes"] }
+tide = { version = "0.15.0" }
+
+
+[lib]
+path = "common.rs"
+
+[[example]]
+path = "hello.rs"
+name = "hello"
+
+[[example]]
+path = "tide_ssr.rs"
+name = "tide_ssr"

examples/common.rs

@@ -0,0 +1,52 @@
+//! Common utilities for integration examples
+
+pub mod logger {
+
+    use fern::colors::{Color, ColoredLevelConfig};
+    use log::debug;
+
+    pub fn set_up_logging(bin_name: &'static str) {
+        // configure colors for the whole line
+        let colors_line = ColoredLevelConfig::new()
+            .error(Color::Red)
+            .warn(Color::Yellow)
+            // we actually don't need to specify the color for debug and info, they are white by default
+            .info(Color::White)
+            .debug(Color::White)
+            // depending on the terminals color scheme, this is the same as the background color
+            .trace(Color::BrightBlack);
+
+        // configure colors for the name of the level.
+        // since almost all of them are the same as the color for the whole line, we
+        // just clone `colors_line` and overwrite our changes
+        let colors_level = colors_line.clone().info(Color::Green);
+        // here we set up our fern Dispatch
+        fern::Dispatch::new()
+            .format(move |out, message, record| {
+                out.finish(format_args!(
+                    "{color_line}[{level}{color_line}] {message}\x1B[0m",
+                    color_line = format_args!(
+                        "\x1B[{}m",
+                        colors_line.get_color(&record.level()).to_fg_str()
+                    ),
+                    level = colors_level.color(record.level()),
+                    message = message,
+                ));
+            })
+            // set the default log level. to filter out verbose log messages from dependencies, set
+            // this to Warn and overwrite the log level for your crate.
+            .level(log::LevelFilter::Warn)
+            // change log levels for individual modules. Note: This looks for the record's target
+            // 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(bin_name, log::LevelFilter::Info)
+            // .level_for("pretty_colored", log::LevelFilter::Trace)
+            // output to stdout
+            .chain(std::io::stdout())
+            .apply()
+            .unwrap();
+
+        debug!("finished setting up logging! yay!");
+    }
+}

examples/hello.rs

@@ -0,0 +1,9 @@
+fn main() {
+    println!("Hello world!");
+    println!("Hello world!");
+    println!("Hello world!");
+    println!("Hello world!");
+    println!("Hello world!");
+    println!("Hello world!");
+    println!("Hello world!");
+}

examples/tide_ssr.rs

@@ -0,0 +1,99 @@
+//! This demo shows how to use the to_string utility on VNodes to convert them into valid HTML.
+//! You can use the html! macro to craft webpages generated by the server on-the-fly.
+//!
+//! Server-side-renderered webpages are a great use of Rust's async story, where servers can handle
+//! thousands of simultaneous clients on minimal hardware.
+
+use dioxus_core::prelude::*;
+use tide::{Request, Response};
+
+#[async_std::main]
+async fn main() -> Result<(), std::io::Error> {
+    dioxus_examples::logger::set_up_logging("tide_ssr");
+
+    // Build the API
+    let mut app = tide::new();
+    app.at("/fib/:n").get(fibsum);
+
+    // Launch the server
+    let addr = "127.0.0.1:8080";
+    log::info!("App is ready at {}", addr);
+    log::info!("Navigate to an fibonacci number, like so http://localhost:8080/fib/21");
+    app.listen(addr).await?;
+
+    Ok(())
+}
+
+/// Calculate the fibonacci number for a given request input
+async fn fibsum(req: Request<()>) -> tide::Result<tide::Response> {
+    use std::time::Instant;
+    let n: usize = req.param("n")?.parse().unwrap_or(0);
+
+    fn fib(n: usize) -> usize {
+        if n == 0 || n == 1 {
+            n
+        } else {
+            fib(n - 1) + fib(n - 2)
+        }
+    }
+
+    // Start a stopwatch
+    // Compute the nth number in the fibonacci sequence
+    // Stop the stopwatch
+    let start = Instant::now();
+    let fib_n = fib(n);
+    let duration = start.elapsed().as_nanos();
+
+    let mut rng = rand::thread_rng();
+    use rand::Rng;
+    let other_fib_to_try = rng.gen_range(1..42);
+
+    let nodes = html! {
+        <html>
+
+        <head>
+            <meta content="text/html;charset=utf-8" />
+            <meta charset="UTF-8" />
+            <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
+        </head>
+
+        <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)}
+                        </div>
+
+                        // Subtext / description
+                        <div class="text-sm text-gray-500">
+                            {format!("Calculated in {} nanoseconds",duration)}
+                        </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>
+                        <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"}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </body>
+
+        </html>
+    };
+
+    Ok(Response::builder(203)
+        .body(nodes.to_string())
+        .header("custom-header", "value")
+        .content_type(tide::http::mime::HTML)
+        .build())
+}