swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: start moving events to rc<event>

Browse Source
This commit is contained in:
Jonathan Kelley committed 2021-06-16 23:37:55 -04:00
1 parent 9222d8ece3
commit b9ff95fa12
21 files changed
+249 -605
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/Cargo.toml
-82
View File
@@ -1,82 +0,0 @@
[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 = { version = "0.6.0", features = ["colored"] }
log = "0.4.1"
dioxus = { path = "../packages/dioxus" }
dioxus-ssr = { path = "../packages/ssr" }
rand = "0.8.2"
anyhow = "*"
[dev-dependencies]
# For the tide ssr examples
async-std = { version = "1.9.0", features = ["attributes"] }
tide = { version = "0.15.0" }
# For the livewview example
tide-websockets = "0.1.0"
serde_millis = "0.1"
serde_json = "1"
serde = { version = "1", features = ['derive'] }
# For the doc generator
pulldown-cmark = { version = "0.8.0", default-features = false }
dioxus-webview = { path = "../packages/webview", version = "0.0.0" }
dioxus-hooks = { path = "../packages/hooks", version = "0.0.0" }
# Shared functionality is done as a lib
[lib]
path = "common.rs"
# ================================
# Examples are manually keyed in
# ================================
[[example]]
path = "example_app.rs"
name = "example_app"
[[example]]
path = "website.rs"
name = "website"
# [[example]]
# path = "hello_web.rs"
# name = "hello_web"
# [[example]]
# path = "tide_ssr.rs"
# name = "tide_ssr"
# [[example]]
# path = "doc_generator.rs"
# name = "doc_generator"
# [[example]]
# path = "router.rs"
# name = "router"
# [[example]]
# path = "fc_macro.rs"
# name = "fc_macro"
# [[example]]
# path = "webview.rs"
# name = "webview"
# [[example]]
# path = "blah.rs"
# name = "blah"
# [[example]]
# path = "live.rs"
# name = "live"
examples/README.md
+3 -1
View File
@@ -1,3 +1,5 @@
# Examples
Most of these examples are run through webview so you don't need the dioxus cli installed to preview the functionality. Anything labeled `_web` will need to be compiled with Dioxus CLI.
Most of these examples are run through webview so you don't need the dioxus cli installed to preview the functionality. Anything labeled `_web` will need to be built with the Dioxus CLI to preview features that only a native bundle can handle.
List of examples:
examples/blah.rs
-9
View File
@@ -1,9 +0,0 @@
use dioxus::prelude::*;
fn main() {
let g = html! {
<div>
<style> </style>
</div>
};
}
examples/common.rs
-50
View File
@@ -1,50 +0,0 @@
//! 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();
}
}
examples/doc_generator.rs
-56
View File
@@ -1,56 +0,0 @@
//! The docs generator takes in the `docs` folder and creates a neat, statically-renderer webpage.
//! These docs are used to generate the public-facing doc content, showcasing Dioxus' abiltity to
//! be used in custom static rendering pipelines.
//!
//! We use pulldown_cmark as the markdown parser, but instead of outputting html directly, we output
//! VNodes to be used in conjuction with our custom templates.
use dioxus::core::prelude::*;
use pulldown_cmark::{Options, Parser};
fn main() {
let gen_dir = "../docs/";
let site: FC<()> = |_| {
html! {
<html>
<head>
</head>
<body>
</body>
</html>
}
};
}
static Homepage: FC<()> = |_| {
html! {<div> </div>}
};
static DocPage: FC<()> = |_| {
html! {<div> </div>}
};
// struct StaticSiteCfg {
// gen_dir: &'static str,
// homepage_template: fn() -> VNode,
// page_template: fn(page: &'static str) -> VNode,
// }
// impl StaticSiteCfg {
// fn render(self) -> anyhow::Result<VNode> {
// let StaticSiteCfg { .. } = self;
// // Set up options and parser. Strikethroughs are not part of the CommonMark standard
// // and we therefore must enable it explicitly.
// let mut options = Options::empty();
// options.insert(Options::ENABLE_STRIKETHROUGH);
// let parser = Parser::new_ext(markdown_input, options);
// //
// Ok(html! {<div> </div>})
// }
// }
examples/external_updates.rs
+3 -2
View File
@@ -1,5 +1,6 @@
//! Example: External Updates
//! -------------------------
//!
//! Cause updates to the VirtualDOM state from outside the component lifecycle.
//! The root props could be changed or the use_receiver hook could be used.
//!
@@ -30,8 +31,8 @@ fn App(ctx: Context, props: &RootProps) -> VNode {
ctx.render(rsx! {
div {
a { href="/dogs/"}
a { href="/cats/"}
a { href: "/dogs/"}
a { href: "/cats/"}
{content}
}
})
examples/fc_macro.rs
-75
View File
@@ -1,75 +0,0 @@
use dioxus::prelude::*;
use dioxus_ssr::TextRenderer;
// todo @Jon, support components in the html! macro
// let renderer = TextRenderer::new(|_| html! {<Example name="world"/>});
fn main() {
let renderer = TextRenderer::<()>::new(|_| html! {<div> "Hello world" </div>});
let output = renderer.render();
}
/// An example component that demonstrates how to use the functional_component macro
/// This macro makes writing functional components elegant, similar to how Rocket parses URIs.
///
/// You don't actually *need* this macro to be productive, but it makes life easier, and components cleaner.
/// This approach also integrates well with tools like Rust-Analyzer.
///
/// Notice that Context is normally generic over props, but RA doesn't care when in proc-macro mode.
/// Also notice that ctx.props still works like you would expect, so migrating to the macro is easy.
#[fc]
fn example(ctx: &Context, name: String) -> VNode {
html! { <div> "Hello, {name}!" </div> }
}
/*
TODO
/// The macro can also be applied to statics in order to make components less verbose
/// The FC type automatically adds the inference, and property fields are automatically added as function arguments
#[fc]
static Example: FC = |ctx, name: String| {
html! { <div> "Hello, {name}!" </div> }
};
*/
// This trait is not exposed to users directly, though they could manually implement this for struct-style components
trait Comp {
type Props: Properties;
fn render(&self, ctx: &mut Context<Self::Props>) -> VNode;
fn builder(&self) -> Self::Props;
}
trait Properties {
fn new() -> Self;
}
impl<T: Properties> Comp for FC<T> {
type Props = T;
fn render(&self, ctx: &mut Context<T>) -> VNode {
let g = self(ctx);
g
}
fn builder(&self) -> T {
T::new()
}
}
#[allow(unused, non_upper_case_globals)]
static MyComp: FC<()> = |ctx| {
html! {
<div>
<p> "hello world" </p>
</div>
}
};
fn my_comp(ctx: &Context<()>) -> VNode {
todo!()
}
fn test() {
let mut ctx = Context { props: &() };
let f = MyComp.render(&mut ctx);
let props = MyComp.builder();
}
examples/hello_web.rs
-6
View File
@@ -1,6 +0,0 @@
//! Example: Hello-web
//! -----------------
//!
//! This example showcases Dioxus-websys to build interactive single-page-applications, much like React.
fn main() {}
examples/router.rs
+2 -2
View File
@@ -34,8 +34,8 @@ fn App(ctx: Context<()>) -> VNode {
ctx.render(rsx! {
div {
a { href="/dogs/"}
a { href="/cats/"}
a { href: "/dogs/"}
a { href: "/cats/"}
{router.render()}
}
})
examples/tide_ssr.rs
-104
View File
@@ -1,104 +0,0 @@
//! Example: Tide Server-Side-Rendering
//! -----------------------------------
//!
//! 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::prelude::*;
use dioxus_ssr::TextRenderer;
use rand::Rng;
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 a fibonacci number: http://{}/fib/21", addr);
app.listen(addr).await?;
Ok(())
}
fn fib(n: usize) -> usize {
if n == 0 || n == 1 {
n
} else {
fib(n - 1) + fib(n - 2)
}
}
/// Calculate the fibonacci number for a given request input
async fn fibsum(req: Request<()>) -> tide::Result<tide::Response> {
let n: usize = req.param("n")?.parse().unwrap_or(0);
// Start a stopwatch
// Compute the nth number in the fibonacci sequence
// Stop the stopwatch
let start = std::time::Instant::now();
let fib_n = fib(n);
let duration = start.elapsed().as_nanos();
// Generate another random number to try
let other_fib_to_try = rand::thread_rng().gen_range(1..42);
let text = TextRenderer::<()>::to_text(html! {
<html>
// Header
<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
<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>
// 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"}
</a>
</div>
</div>
</div>
</div>
</body>
</html>
});
Ok(Response::builder(203)
.body(text)
.content_type(tide::http::mime::HTML)
.build())
}