Feat: add webview example

This commit is contained in:
Jonathan Kelley 2021-01-22 15:50:16 -05:00
parent 7730fd4a8c
commit 65d0d611ea
11 changed files with 85 additions and 39 deletions

View file

@ -1,3 +1,3 @@
{
"rust-analyzer.inlayHints.enable": true
"rust-analyzer.inlayHints.enable": false
}

View file

@ -23,15 +23,15 @@ Dioxus Core supports:
On top of these, we have several projects you can find in the `packages` folder.
- [x] `dioxus-cli`: Testing, development, and packaging tools for Dioxus apps
- [ ] `dioxus-router`: A hook-based router implementation for Dioxus web apps
- [ ] `Dioxus-vscode`: Syntax highlighting, code formatting, and hints for Dioxus html! blocks
- [ ] `Redux-rs`: Redux-style global state management
- [ ] `Recoil-rs`: Recoil-style global state management
- [ ] `Dioxus-iso`: Hybrid apps (SSR + Web)
- [ ] `Dioxus-live`: Live view
- [ ] `Dioxus-desktop`: Desktop Applications
- [ ] `Dioxus-ios`: iOS apps
- [ ] `Dioxus-android`: Android apps
- [ ] `Dioxus-magic`: AR/VR Apps
- [ ] `dioxus-vscode`: Syntax highlighting, code formatting, and hints for Dioxus html! blocks
- [ ] `redux-rs`: Redux-style global state management
- [ ] `recoil-rs`: Recoil-style global state management
- [ ] `dioxus-iso`: Hybrid apps (SSR + Web)
- [ ] `dioxus-live`: Live view
- [ ] `dioxus-webview`: Desktop Applications
- [ ] `dioxus-ios`: iOS apps
- [ ] `dioxus-android`: Android apps
- [ ] `dioxus-magic`: AR/VR Apps
## Hello World
Dioxus should look and feel just like writing functional React components. In Dioxus, there are no class components with lifecycles. All state management is done via hooks. This encourages logic reusability and lessens the burden on Dioxus to maintain a non-breaking lifecycle API.
@ -62,7 +62,7 @@ fn Example(ctx: &Context, name: String) -> VNode {
static Example: FC = |ctx, name: String| html! { <div> "Hello {:?name}!" </div> };
```
The final output of components must be a tree of VNodes. We provide an html macro for using JSX-style syntax to write these, though, you could use any macro, DSL, or templating engine. Work is being done on a terra template processor for existing templates.
The final output of components must be a tree of VNodes. We provide an html macro for using JSX-style syntax to write these, though, you could use any macro, DSL, templating engine, or the constructors directly.
## Concurrency
@ -88,7 +88,13 @@ We use the dedicated `dioxus-cli` to build and test dioxus web-apps. This can ru
Alternatively, `trunk` works but can't run examples.
- tide_ssr: Handle an HTTP request and return an html body using the html! macro. `cargo run --example tide_ssr`
- simple_wasm: Simple WASM app that says hello. `diopack develop --example simple`
- doc_generator: Use dioxus ssr to generate the website and docs. `cargo run --example doc_generator`
- fc_macro: Use the functional component macro to build terse components. `cargo run --example fc_macro`
- hello_web: Start a simple wasm app. Requires a webpacker like dioxus-cli or trunk `cargo run --example hello`
- router: `cargo run --example router`
- tide_ssr: `cargo run --example tide_ssr`
- webview: Use liveview to bridge into a webview context for a simple desktop application. `cargo run --example webview`
- twitter-clone: A full-featured Twitter clone showcasing dioxus-liveview, state management patterns, and hooks. `cargo run --example twitter`
## Documentation
We have a pretty robust

View file

@ -24,13 +24,14 @@ tide = { version = "0.15.0" }
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" }
[lib]
path = "common.rs"
[[example]]
path = "hello.rs"
name = "hello"
path = "hello_web.rs"
name = "hello_web"
[[example]]
path = "tide_ssr.rs"

View file

@ -1,23 +1,29 @@
//! Example: Webview Renderer
//!
//! This example shows how to use the dioxus_webview crate to build a basic desktop application.
//!
//! Under the hood, the dioxus_webview crate bridges a native Dioxus VirtualDom with a custom prebuit application running
//! in the webview runtime. Custom handlers are provided for the webview instance to consume patches and emit user events
//! into the native VDom instance.
use dioxus::prelude::*;
fn main() {
let app = dioxus_webview::new::<()>(|ctx| {
let app = dioxus_webview::new(|ctx| {
let (count, set_count) = use_state(ctx, || 0);
html! {
<div>
<h1> "Dioxus Desktop Demo" </h1>
<p> "Count is {count}"</p>
<button onclick=|_| set_count(count + 1) >
"Click to increment"
</button>
<div>
<h1> "Dioxus Desktop Demo" </h1>
<p> "Count is {count}"</p>
<p> "Count is {count}"</p>
<p> "Data is {data}"</p>
<button onclick=|_| set_count(count + 1) >
"Click to increment"
</button>
</div>
}
});
app.launch(());
}
fn use_state<T, G>(ctx: &mut Context<G>, init: impl Fn() -> T) -> (T, impl Fn(T)) {
let g = init();
(g, |_| {})
}

View file

@ -10,3 +10,4 @@ description = "Core functionality for Dioxus - a concurrent renderer-agnostic Vi
[dependencies]
dioxus-core = { path = "../core", version = "0.1.0" }
dioxus-core-macro = { path = "../core-macro", version = "0.1.0" }
dioxus-hooks = { path = "../hooks", version = "0.0.0" }

View file

@ -1,6 +1,7 @@
pub mod prelude {
pub use dioxus_core::prelude::*;
pub use dioxus_core_macro::fc;
pub use dioxus_hooks::prelude::use_state;
}
use dioxus_core::prelude::FC;

View file

@ -6,4 +6,5 @@ edition = "2018"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
[dependencies]
dioxus-core = { path = "../core" }

View file

@ -1,7 +1,7 @@
#[cfg(test)]
mod tests {
#[test]
fn it_works() {
assert_eq!(2 + 2, 4);
pub mod prelude {
use dioxus_core::prelude::Context;
pub fn use_state<T, G>(ctx: &mut Context<G>, init: impl Fn() -> T) -> (T, impl Fn(T)) {
let g = init();
(g, |_| {})
}
}

View file

@ -1,7 +1,37 @@
#[cfg(test)]
mod tests {
#[test]
fn it_works() {
assert_eq!(2 + 2, 4);
}
pub struct Store<T> {
user_data: T,
}
/// Select just a small bit of the
fn use_selector() {}
/*
// borrow a closure so we can copy the reference
let dispatch = use_dispatch::<UserData>(ctx);
dispatch(|| UserData::Logout)
dispatch()
*/
fn use_dispatch() {}
mod tests {
struct UserData {}
// static SelectLoggedIn: FC<T> = |_| {};
/*
// Merge the various stores into a single context
// This auto generates the appropriate selectors, reducing the need to wrap the app in excess providers
let all = combine_stores(vec![store1, store2]);
<Redux store={all}>
</Redux>
*/
}

View file

@ -37,7 +37,7 @@ impl<T> WebviewRenderer<T> {
todo!()
}
pub async fn launch(self, props: T) {
pub fn launch(self, props: T) {
let mut ctx = Context { props: &props };
let WebviewRenderer { root } = self;
let content = root(&mut ctx);