mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-26 14:10:20 +00:00
Feat: add webview example
This commit is contained in:
parent
7730fd4a8c
commit
65d0d611ea
11 changed files with 85 additions and 39 deletions
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"rust-analyzer.inlayHints.enable": true
|
||||
"rust-analyzer.inlayHints.enable": false
|
||||
}
|
28
README.md
28
README.md
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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, |_| {})
|
||||
}
|
||||
|
|
|
@ -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" }
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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" }
|
||||
|
|
|
@ -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, |_| {})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
*/
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue