Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-10 06:34:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

wip: docs, html! macro, more

Browse source
This commit is contained in:
Jonathan Kelley 2021-07-16 00:27:06 -04:00
parent 8f0bb5dc5b
commit caf772cf24
27 changed files with 407 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
Cargo.toml
View file

@ -49,7 +49,6 @@ im-rc = "15.0.0"
rand = { version = "0.8.4", features = ["small_rng"] }
fxhash = "0.2.1"
[workspace]
members = [
"packages/core",
@ -59,5 +58,16 @@ members = [
"packages/web",
"packages/ssr",
"packages/desktop",
# "packages/mobile",
"packages/mobile",
]
[[example]]
required-features = ["desktop"]
name = "webview"
path = "./examples/webview.rs"
[[example]]
required-features = ["desktop"]
name = "tailwind"
path = "./examples/tailwind.rs"

218
docs/advanced-guides/custom-renderer.md
View file

@ -18,48 +18,145 @@ Internally, Dioxus handles the tree relationship, diffing, memory management, an
For reference, check out the WebSys renderer as a starting point for your custom renderer.
## Trait implementation
## Trait implementation and DomEdits
The current `RealDom` trait lives in `dioxus_core/diff`. A version of it is provided here:
The current `RealDom` trait lives in `dioxus_core/diff`. A version of it is provided here (but might not be up-to-date):
```rust
pub trait RealDom {
// Navigation
fn push_root(&mut self, root: RealDomNode);
// Add Nodes to the dom
fn append_child(&mut self);
fn replace_with(&mut self);
// Remove Nodes from the dom
fn remove(&mut self);
fn remove_all_children(&mut self);
// Create
fn create_text_node(&mut self, text: &str) -> RealDomNode;
fn create_element(&mut self, tag: &str, namespace: Option<&str>) -> RealDomNode;
// Events
fn new_event_listener(
&mut self,
event: &str,
scope: ScopeIdx,
element_id: usize,
realnode: RealDomNode,
);
fn remove_event_listener(&mut self, event: &str);
// modify
fn set_text(&mut self, text: &str);
fn set_attribute(&mut self, name: &str, value: &str, is_namespaced: bool);
fn remove_attribute(&mut self, name: &str);
// node ref
fn raw_node_as_any_mut(&self) -> &mut dyn Any;
pub trait RealDom<'a> {
fn handle_edit(&mut self, edit: DomEdit);
fn request_available_node(&mut self) -> RealDomNode;
fn raw_node_as_any(&self) -> &mut dyn Any;
}
```
This trait defines what the Dioxus VirtualDOM expects a "RealDom" abstraction to implement for the Dioxus diffing mechanism to function properly. The Dioxus diffing mechanism operates as a [stack machine](https://en.wikipedia.org/wiki/Stack_machine) where the "push_root" method pushes a new "real" DOM node onto the stack and "append_child" and "replace_with" both remove nodes from the stack. When the RealDOM creates new nodes, it must return the `RealDomNode` type... which is just an abstraction over u32. We strongly recommend the use of `nohash-hasher`'s IntMap for managing the mapping of `RealDomNode` (ids) to their corresponding real node. For an IntMap of 1M+ nodes, an index time takes about 7ns which is very performant when compared to the traditional hasher.
For reference, the "DomEdit" type is a serialized enum that represents an atomic operation occurring on the RealDom. The variants roughly follow this set:
```rust
enum DomEdit {
PushRoot,
AppendChildren,
ReplaceWith,
CreateTextNode,
CreateElement,
CreateElementNs,
CreatePlaceholder,
NewEventListener,
RemoveEventListener,
SetText,
SetAttribute,
RemoveAttribute,
}
```
The Dioxus diffing mechanism operates as a [stack machine](https://en.wikipedia.org/wiki/Stack_machine) where the "push_root" method pushes a new "real" DOM node onto the stack and "append_child" and "replace_with" both remove nodes from the stack.
### An example
For the sake of understanding, lets consider this example - a very simple UI declaration:
```rust
rsx!( h1 {"hello world"} )
```
To get things started, Dioxus must first navigate to the container of this h1 tag. To "navigate" here, the internal diffing algorithm generates the DomEdit `PushRoot` where the ID of the root is the container.
When the renderer receives this instruction, it pushes the actual Node onto its own stack. The real renderer's stack will look like this:
```rust
instructions: [
PushRoot(Container)
]
stack: [
ContainerNode,
]
```
Next, Dioxus will encounter the h1 node. The diff algorithm decides that this node needs to be created, so Dioxus will generate the DomEdit `CreateElement`. When the renderer receives this instruction, it will create an unmounted node and push into its own stack:
```rust
instructions: [
PushRoot(Container),
CreateElement(h1),
]
stack: [
ContainerNode,
h1,
]
```
Next, Dioxus sees the text node, and generates the `CreateTextNode` DomEdit:
```rust
instructions: [
PushRoot(Container),
CreateElement(h1),
CreateTextNode("hello world")
]
stack: [
ContainerNode,
h1,
"hello world"
]
```
Remember, the text node is not attached to anything (it is unmounted) so Dioxus needs to generate an Edit that connects the text node to the h1 element. It depends on the situation, but in this case we use `AppendChildren`. This pops the text node off the stack, leaving the h1 element as the next element in line.
```rust
instructions: [
PushRoot(Container),
CreateElement(h1),
CreateTextNode("hello world"),
AppendChildren(1)
]
stack: [
ContainerNode,
h1
]
```
We call `AppendChildren` again, popping off the h1 node and attaching it to the parent:
```rust
instructions: [
PushRoot(Container),
CreateElement(h1),
CreateTextNode("hello world"),
AppendChildren(1),
AppendChildren(1)
]
stack: [
ContainerNode,
]
```
Finally, the container is popped since we don't need it anymore.
```rust
instructions: [
PushRoot(Container),
CreateElement(h1),
CreateTextNode("hello world"),
AppendChildren(1),
AppendChildren(1),
Pop(1)
]
stack: []
```
Over time, our stack looked like this:
```rust
[]
[Container]
[Container, h1]
[Container, h1, "hello world"]
[Container, h1]
[Container]
[]
```
Notice how our stack is empty once UI has been mounted. Conveniently, this approach completely separates the VirtualDOM and the Real DOM. Additionally, these edits are serializable, meaning we can even manage UIs across a network connection. This little stack machine and serialized edits makes Dioxus independent of platform specifics.
Dioxus is also really fast. Because Dioxus splits the diff and patch phase, it's able to make all the edits to the RealDOM in a very short amount of time (less than a single frame) making rendering very snappy. It also allows Dioxus to cancel large diffing operations if higher priority work comes in while it's diffing.
It's important to note that there _is_ one layer of connectedness between Dioxus and the renderer. Dioxus saves and loads elements (the PushRoot edit) with an ID. Inside the VirtualDOM, this is just tracked as a u64.
Whenever a `CreateElement` edit is generated during diffing, Dioxus increments its node counter and assigns that new element its current NodeCount. The RealDom is responsible for remembering this ID and pushing the correct node when PushRoot(ID) is generated. Dioxus doesn't reclaim IDs of elements its removed, but your renderer probably will want to. To do this, we suggest using a `SecondarySlotMap` if implementing the renderer in Rust, or just deferring to a HashMap-type approach.
This little demo serves to show exactly how a Renderer would need to process an edit stream to build UIs. A set of serialized EditStreams for various demos is available for you to test your custom renderer against.
## Event loop
@ -70,14 +167,24 @@ The code for the WebSys implementation is straightforward, so we'll add it here
```rust
pub async fn run(&mut self) -> dioxus_core::error::Result<()> {
// Push the body element onto the WebsysDom's stack machine
let mut websys_dom = crate::new::WebsysDom::new(prepare_websys_dom().first_child().unwrap());
let mut websys_dom = crate::new::WebsysDom::new(prepare_websys_dom());
websys_dom.stack.push(root_node);
// Rebuild or hydrate the virtualdom
self.internal_dom.rebuild(&mut websys_dom)?;
// Wait for updates from the real dom and progress the virtual dom
while let Some(trigger) = websys_dom.wait_for_event().await {
loop {
let user_input_future = websys_dom.wait_for_event();
let internal_event_future = self.internal_dom.wait_for_event();
match select(user_input_future, internal_event_future).await {
Either::Left((trigger, _)) => trigger,
Either::Right((trigger, _)) => trigger,
}
}
while let Some(trigger) = {
websys_dom.stack.push(body_element.first_child().unwrap());
self.internal_dom
.progress_with_event(&mut websys_dom, trigger)?;
@ -85,7 +192,7 @@ pub async fn run(&mut self) -> dioxus_core::error::Result<()> {
}
```
It's important that you decode the real events from your event system into Dioxus' synthetic event system (synthetic meaning abstracted). This simply means matching your event type and creating a Dioxus `VirtualEvent` type. Your custom event must implement the corresponding event trait:
It's important that you decode the real events from your event system into Dioxus' synthetic event system (synthetic meaning abstracted). This simply means matching your event type and creating a Dioxus `VirtualEvent` type. Your custom event must implement the corresponding event trait. Right now, the VirtualEvent system is modeled almost entirely around the HTML spec, but we are interested in slimming it down.
```rust
fn virtual_event_from_websys_event(event: &web_sys::Event) -> VirtualEvent {
@ -114,28 +221,23 @@ fn virtual_event_from_websys_event(event: &web_sys::Event) -> VirtualEvent {
If you need to go as far as relying on custom elements for your renderer - you totally can. This still enables you to use Dioxus' reactive nature, component system, shared state, and other features, but will ultimately generate different nodes. All attributes and listeners for the HTML and SVG namespace are shuttled through helper structs that essentially compile away (pose no runtime overhead). You can drop in your own elements any time you want, with little hassle. However, you must be absolutely sure your renderer can handle the new type, or it will crash and burn.
These custom elements are defined as unit structs with trait implementations.
For example, the `div` element is (approximately!) defined as such:
```rust
struct div(NodeBuilder);
impl<'a> div {
struct div;
impl div {
/// Some glorious documentaiton about the class proeprty.
#[inline]
fn new(factory: &NodeFactory<'a>) -> Self {
Self(factory.new_element("div"))
fn class<'a>(&self, cx: NodeFactory<'a>, val: Arguments) -> Attribute<'a> {
cx.attr("class", val, None, false)
}
#[inline]
fn onclick(mut self, callback: impl Fn(MouseEvent) + 'a) -> Self {
self.0.add_listener("onclick", |evt: VirtualEvent| match evt {
MouseEvent(evt) => callback(evt),
_ => {}
});
self
}
// etc
// more attributes
}
```
You've probably noticed that many elements in the `rsx!` and `html!` macros support on-hover documentation. The approach we take to custom elements means that the unit struct is created immediately where the element is used in the macro. When the macro is expanded, the doc comments still apply to the unit struct, giving tons of in-editor feedback, even inside a proc macro.
The rsx! and html! macros just use the `div` struct as a compile-time guard around the NodeFactory.
## Compatibility
@ -143,22 +245,22 @@ Forewarning: not every hook and service will work on your platform. Dioxus wraps
There are three opportunities for platform incompatibilities to break your program:
1. When downcasting elements via `Ref.to_native<T>()`
2. When downcasting events via `Event.to_native<T>()`
1. When downcasting elements via `Ref.downcast_ref<T>()`
2. When downcasting events via `Event.downcast_ref<T>()`
3. Calling platform-specific APIs that don't exist
The best hooks will properly detect the target platform and still provide functionality, failing gracefully when a platform is not supported. We encourage - and provide - an indication to the user on what platforms a hook supports. For issues 1 and 2, these return a result as to not cause panics on unsupported platforms. When designing your hooks, we recommend propagating this error upwards into user facing code, making it obvious that this particular service is not supported.
This particular code _will panic_ due to the unwrap. Try to avoid these types of patterns.
This particular code _will panic_ due to the unwrap on downcast_ref. Try to avoid these types of patterns.
```rust
let div_ref = use_node_ref(&cx);
let div_ref = use_node_ref(cx);
cx.render(rsx!{
div { ref: div_ref, class: "custom class",
button { "click me to see my parent's class"
onclick: move |_| if let Some(div_ref) = div_ref {
panic!("Div class is {}", div_ref.to_native::<web_sys::Element>().unwrap().class())
log::info!("Div class is {}", div_ref.downcast_ref::<web_sys::Element>().unwrap().class())
}
}
}

2
examples/examples/calculator.rs
View file

@ -5,7 +5,7 @@ use dioxus_core as dioxus;
const STYLE: &str = include_str!("../../../examples/assets/calculator.css");
fn main() {
dioxus_webview::launch(
dioxus_desktop::launch(
|builder| {
builder
.title("Test Dioxus App")

2
examples/examples/demo.rs
View file

@ -3,7 +3,7 @@
use dioxus_core as dioxus;
use dioxus_core::prelude::*;
fn main() {
dioxus_webview::launch(
dioxus_desktop::launch(
|builder| {
builder
.title("Test Dioxus App")

2
examples/examples/hifive.rs
View file

@ -3,7 +3,7 @@
use dioxus_core as dioxus;
use dioxus_core::prelude::*;
fn main() {
dioxus_webview::launch(
dioxus_desktop::launch(
|builder| {
builder
.title("Test Dioxus App")

2
examples/manually.rs
View file

@ -17,7 +17,7 @@ fn main() {
AppendChildren { many: 1 },
// ReplaceWith { many: 1 },
];
dioxus_webview::WebviewRenderer::run_with_edits(App, (), |c| c, Some(edits)).expect("failed");
dioxus_desktop::WebviewRenderer::run_with_edits(App, (), |c| c, Some(edits)).expect("failed");
}
const App: FC<()> = |cx| todo!();

4
examples/slideshow.rs
View file

@ -1,9 +1,9 @@
//! Example: Webview Renderer
//! -------------------------
//!
//! This example shows how to use the dioxus_webview crate to build a basic desktop application.
//! This example shows how to use the dioxus_desktop 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
//! Under the hood, the dioxus_desktop 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.
//!

136
examples/tailwind.rs Normal file
View file

@ -0,0 +1,136 @@
use dioxus::desktop::wry::application::platform::macos::*;
use dioxus::prelude::*;
fn main() {
dioxus::desktop::launch(App, |c| {
c.with_fullsize_content_view(true)
.with_titlebar_buttons_hidden(false)
.with_titlebar_transparent(true)
.with_movable_by_window_background(true)
});
}
const STYLE: &str = "body {overflow:hidden;}";
pub const App: FC<()> = |cx| {
cx.render(rsx!(
div { class: "overflow-hidden"
style { "{STYLE}" }
link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" }
Header {}
Entry {}
Hero {}
Hero {}
Hero {}
Hero {}
Hero {}
}
))
};
pub const Header: FC<()> = |cx| {
cx.render(rsx! {
div {
header { class: "text-gray-400 bg-gray-900 body-font"
div { class: "container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center"
a { class: "flex title-font font-medium items-center text-white mb-4 md:mb-0"
StacksIcon {}
span { class: "ml-3 text-xl" "Hello Dioxus!"}
}
nav { class: "md:ml-auto flex flex-wrap items-center text-base justify-center"
a { class: "mr-5 hover:text-white" "First Link"}
a { class: "mr-5 hover:text-white" "Second Link"}
a { class: "mr-5 hover:text-white" "Third Link"}
a { class: "mr-5 hover:text-white" "Fourth Link"}
}
button {
class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0"
"Button"
RightArrowIcon {}
}
}
}
}
})
};
pub const Hero: FC<()> = |cx| {
//
cx.render(rsx! {
section{ class: "text-gray-400 bg-gray-900 body-font"
div { class: "container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"
div { class: "lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center"
h1 { class: "title-font sm:text-4xl text-3xl mb-4 font-medium text-white"
br { class: "hidden lg:inline-block" }
"Dioxus Sneak Peek"
}
p {
class: "mb-8 leading-relaxed"
"Dioxus is a new UI framework that makes it easy and simple to write cross-platform apps using web
technologies! It is functional, fast, and portable. Dioxus can run on the web, on the desktop, and
on mobile and embedded platforms."
}
div { class: "flex justify-center"
button {
class: "inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg"
"Learn more"
}
button {
class: "ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg"
"Build an app"
}
}
}
div { class: "lg:max-w-lg lg:w-full md:w-1/2 w-5/6"
img { class: "object-cover object-center rounded" alt: "hero" src: "https://i.imgur.com/oK6BLtw.png"
referrerpolicy:"no-referrer"
}
}
}
}
})
};
pub const Entry: FC<()> = |cx| {
//
cx.render(rsx! {
section{ class: "text-gray-400 bg-gray-900 body-font"
div { class: "container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"
textarea {
}
}
}
})
};
pub const StacksIcon: FC<()> = |cx| {
cx.render(rsx!(
svg {
// xmlns: "http://www.w3.org/2000/svg"
fill: "none"
stroke: "currentColor"
stroke_linecap: "round"
stroke_linejoin: "round"
stroke_width: "2"
class: "w-10 h-10 text-white p-2 bg-indigo-500 rounded-full"
viewBox: "0 0 24 24"
path { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"}
}
))
};
pub const RightArrowIcon: FC<()> = |cx| {
cx.render(rsx!(
svg {
fill: "none"
stroke: "currentColor"
stroke_linecap: "round"
stroke_linejoin: "round"
stroke_width: "2"
class: "w-4 h-4 ml-1"
viewBox: "0 0 24 24"
path { d: "M5 12h14M12 5l7 7-7 7"}
}
))
};

4
examples/webview.rs
View file

@ -1,9 +1,9 @@
//! Example: Webview Renderer
//! -------------------------
//!
//! This example shows how to use the dioxus_webview crate to build a basic desktop application.
//! This example shows how to use the dioxus_desktop 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
//! Under the hood, the dioxus_desktop 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.
//!

27
packages/core-macro/src/html/mod.rs Normal file
View file

@ -0,0 +1,27 @@
//! Html body
//! -------
//!
//!
//! Since both HTML and RSX serialize to the same node structure, the HTML parser uses the same types as RSX,
//! but has a different Parse implementation.
use crate::rsx::*;
use quote::ToTokens;
use syn::parse::Parse;
pub struct HtmlBody(RsxBody);
impl Parse for HtmlBody {
fn parse(input: syn::parse::ParseStream) -> syn::Result<Self> {
todo!()
}
}
impl ToTokens for HtmlBody {
fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
self.0.to_tokens(tokens)
}
}
pub struct HtmlNode(BodyNode);
pub struct HtmlAmbigiousElement(AmbiguousElement);
pub struct HtmlComponent(Component);

3
packages/core-macro/src/lib.rs
View file

@ -4,6 +4,7 @@ use syn::parse_macro_input;
pub(crate) mod fc;
pub(crate) mod htm;
pub(crate) mod html;
pub(crate) mod ifmt;
pub(crate) mod props;
pub(crate) mod rsx;
@ -237,7 +238,7 @@ pub fn derive_typed_builder(input: proc_macro::TokenStream) -> proc_macro::Token
/// ```
#[proc_macro]
pub fn rsx(s: TokenStream) -> TokenStream {
match syn::parse::<rsx::RsxRender>(s) {
match syn::parse::<rsx::RsxBody>(s) {
Err(e) => e.to_compile_error().into(),
Ok(s) => s.to_token_stream().into(),
}

8
packages/core-macro/src/rsx/component.rs
View file

@ -26,7 +26,7 @@ pub struct Component {
// accept any path-like argument
name: syn::Path,
body: Vec<ComponentField>,
children: Vec<Node>,
children: Vec<BodyNode>,
manual_props: Option<Expr>,
}
@ -42,7 +42,7 @@ impl Parse for Component {
syn::braced!(content in stream);
let mut body: Vec<ComponentField> = Vec::new();
let mut children: Vec<Node> = Vec::new();
let mut children: Vec<BodyNode> = Vec::new();
let mut manual_props = None;
parse_component_body(
@ -78,7 +78,7 @@ pub fn parse_component_body(
content: &ParseBuffer,
cfg: &BodyParseConfig,
body: &mut Vec<ComponentField>,
children: &mut Vec<Node>,
children: &mut Vec<BodyNode>,
manual_props: &mut Option<Expr>,
) -> Result<()> {
'parsing: loop {
@ -111,7 +111,7 @@ pub fn parse_component_body(
"This item is not allowed to accept children.",
));
}
children.push(content.parse::<Node>()?);
children.push(content.parse::<BodyNode>()?);
}
// consume comma if it exists

29
packages/core-macro/src/rsx/element.rs
View file

@ -16,7 +16,7 @@ pub struct Element {
key: Option<AttrType>,
attributes: Vec<ElementAttr>,
listeners: Vec<ElementAttr>,
children: Vec<Node>,
children: Vec<BodyNode>,
is_static: bool,
}
@ -54,7 +54,7 @@ impl Parse for Element {
let mut attributes: Vec<ElementAttr> = vec![];
let mut listeners: Vec<ElementAttr> = vec![];
let mut children: Vec<Node> = vec![];
let mut children: Vec<BodyNode> = vec![];
let mut key = None;
'parsing: loop {
@ -72,7 +72,7 @@ impl Parse for Element {
name.clone(),
)?;
} else {
children.push(content.parse::<Node>()?);
children.push(content.parse::<BodyNode>()?);
}
// consume comma if it exists
@ -238,20 +238,9 @@ impl ToTokens for ElementAttr {
AttrType::BumpText(value) => tokens.append_all(quote! {
dioxus_elements::#el_name.#nameident(__cx, format_args_f!(#value))
}),
// __cx.attr(#name, format_args_f!(#value), #namespace, false)
//
// AttrType::BumpText(value) => tokens.append_all(quote! {
// __cx.attr(#name, format_args_f!(#value), #namespace, false)
// }),
AttrType::FieldTokens(exp) => tokens.append_all(quote! {
dioxus_elements::#el_name.#nameident(__cx, #exp)
}),
// __cx.attr(#name_str, #exp, #namespace, false)
// AttrType::FieldTokens(exp) => tokens.append_all(quote! {
// dioxus_elements::#el_name.#nameident(__cx, format_args_f!(#value))
// __cx.attr(#name_str, #exp, #namespace, false)
// }),
// todo: move event handlers on to the elements or onto the nodefactory
AttrType::Event(event) => tokens.append_all(quote! {
@ -264,3 +253,15 @@ impl ToTokens for ElementAttr {
}
}
}
// __cx.attr(#name, format_args_f!(#value), #namespace, false)
//
// AttrType::BumpText(value) => tokens.append_all(quote! {
// __cx.attr(#name, format_args_f!(#value), #namespace, false)
// }),
// __cx.attr(#name_str, #exp, #namespace, false)
// AttrType::FieldTokens(exp) => tokens.append_all(quote! {
// dioxus_elements::#el_name.#nameident(__cx, format_args_f!(#value))
// __cx.attr(#name_str, #exp, #namespace, false)
// }),

8
packages/core-macro/src/rsx/mod.rs
View file

@ -32,12 +32,12 @@ use syn::{
Error, Ident, LitStr, Result, Token,
};
pub struct RsxRender {
pub struct RsxBody {
custom_context: Option<Ident>,
roots: Vec<Node>,
roots: Vec<BodyNode>,
}
impl Parse for RsxRender {
impl Parse for RsxBody {
fn parse(input: ParseStream) -> Result<Self> {
// if input.peek(LitStr) {
// return input.parse::<LitStr>()?.parse::<RsxRender>();
@ -83,7 +83,7 @@ impl Parse for RsxRender {
}
}
impl ToTokens for RsxRender {
impl ToTokens for RsxBody {
fn to_tokens(&self, out_tokens: &mut TokenStream2) {
let inner = if self.roots.len() == 1 {
let inner = &self.roots[0];

18
packages/core-macro/src/rsx/node.rs
View file

@ -10,13 +10,13 @@ use syn::{
// ==============================================
// Parse any div {} as a VElement
// ==============================================
pub enum Node {
pub enum BodyNode {
Element(AmbiguousElement),
Text(TextNode),
RawExpr(Expr),
}
impl Parse for Node {
impl Parse for BodyNode {
fn parse(stream: ParseStream) -> Result<Self> {
// Supposedly this approach is discouraged due to inability to return proper errors
// TODO: Rework this to provide more informative errors
@ -24,23 +24,23 @@ impl Parse for Node {
if stream.peek(token::Brace) {
let content;
syn::braced!(content in stream);
return Ok(Node::RawExpr(content.parse::<Expr>()?));
return Ok(BodyNode::RawExpr(content.parse::<Expr>()?));
}
if stream.peek(LitStr) {
return Ok(Node::Text(stream.parse::<TextNode>()?));
return Ok(BodyNode::Text(stream.parse::<TextNode>()?));
}
Ok(Node::Element(stream.parse::<AmbiguousElement>()?))
Ok(BodyNode::Element(stream.parse::<AmbiguousElement>()?))
}
}
impl ToTokens for Node {
impl ToTokens for BodyNode {
fn to_tokens(&self, tokens: &mut TokenStream2) {
match &self {
Node::Element(el) => el.to_tokens(tokens),
Node::Text(txt) => txt.to_tokens(tokens),
Node::RawExpr(exp) => tokens.append_all(quote! {
BodyNode::Element(el) => el.to_tokens(tokens),
BodyNode::Text(txt) => txt.to_tokens(tokens),
BodyNode::RawExpr(exp) => tokens.append_all(quote! {
__cx.fragment_from_iter(#exp)
}),
}

6
packages/core-macro/src/rsxtemplate.rs
View file

@ -1,4 +1,4 @@
use crate::{rsx::RsxRender, util::is_valid_svg_tag};
use crate::{rsx::RsxBody, util::is_valid_svg_tag};
use {
proc_macro::TokenStream,
@ -15,7 +15,7 @@ use {
// Parse any stream coming from the html! macro
// ==============================================
pub struct RsxTemplate {
inner: RsxRender,
inner: RsxBody,
}
impl Parse for RsxTemplate {
@ -35,7 +35,7 @@ impl Parse for RsxTemplate {
let lit = LitStr::new(&value, lit.span());
// panic!("{:#?}", lit);
match lit.parse::<crate::rsx::RsxRender>() {
match lit.parse::<crate::rsx::RsxBody>() {
Ok(r) => Ok(Self { inner: r }),
Err(e) => Err(e),
}

1
packages/core/src/diff.rs
View file

@ -66,7 +66,6 @@ use std::any::Any;
/// target-specific Node type as well as easily serializing the edits to be sent over a network or IPC connection.
pub trait RealDom<'a> {
fn request_available_node(&mut self) -> RealDomNode;
fn raw_node_as_any(&self) -> &mut dyn Any;
}

2
packages/desktop/README.md
View file

@ -8,7 +8,7 @@ Dioxus-webview is an attempt at making a simpler "Tauri" where creating desktop
// main.rs
#[async_std::main]
async fn main() {
dioxus_webview::new(|cx| {
dioxus_desktop::new(|cx| {
let (count, set_count) = use_state(cx, || 0);
cx.render(html! {
<div>

10
packages/desktop/client/Cargo.toml
View file

@ -1,10 +0,0 @@
[package]
name = "webview-client"
version = "0.1.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]
dioxus-core = {path = "../../core"}

64
packages/desktop/client/src/main.rs
View file

@ -1,64 +0,0 @@
use dioxus_core::patch::Edit;
use dioxus_core::prelude::*;
static SERVER_RENDERED_KEY: &'static str = "abc123";
#[derive(Debug, PartialEq, Props)]
struct ServerRendered {
name0: String,
name1: String,
name2: String,
name3: String,
name4: String,
name5: String,
name6: String,
name7: String,
}
fn main() {}
#[cfg(old)]
fn blah() {
// connect to the host server
let server_rendered = use_server_rendered((111111, 11111, 11), SERVER_RENDERED_KEY, || {
ServerRendered {
name0: "abc".to_string(),
name1: "abc".to_string(),
name2: "abc".to_string(),
name3: "abc".to_string(),
name4: "abc".to_string(),
name5: "abc".to_string(),
name6: "abc".to_string(),
name7: "abc".to_string(),
}
});
let handler = dioxus_liveview::new_handler()
.from_directory("abc123") // serve a given directory as the root
.with_context(|| SomeContext {}) // build out a new context for all of the server-rendered components to share
.with_route(SERVER_RENDERED_KEY, |cx: &ServerRendered| {
//
})
.with_route(SERVER_RENDERED_KEY, |cx| {
//
})
.with_route(SERVER_RENDERED_KEY, |cx| {
//
})
.with_route(SERVER_RENDERED_KEY, |cx| {
//
})
.with_route(SERVER_RENDERED_KEY, |cx| {
//
})
.with_route(SERVER_RENDERED_KEY, |cx| {
//
})
// depend on the framework, build a different type of handler
// there are instructions on how to integrate this the various rusty web frameworks in the guide
.build();
server.get("abc", handler);
}
fn use_server_rendered<F: Properties>(_p: impl PartialEq, name: &'static str, f: impl Fn() -> F) {}

2
packages/desktop/examples/test.rs
View file

@ -2,7 +2,7 @@ use dioxus_core as dioxus;
use dioxus_core::prelude::*;
fn main() {
dioxus_webview::launch(App, |f| f.with_maximized(true)).expect("Failed");
dioxus_desktop::launch(App, |f| f.with_maximized(true)).expect("Failed");
}
static App: FC<()> = |cx| {

3
packages/desktop/src/index.html
View file

@ -128,12 +128,9 @@
</script>
</head>
<body>
<div id="_dioxusroot">
</div>
</body>
</html>

7
packages/desktop/src/lib.rs
View file

@ -41,10 +41,7 @@ pub struct WebviewRenderer<T> {
root: FC<T>,
}
enum RpcEvent<'a> {
Initialize {
//
edits: Vec<DomEdit<'a>>,
},
Initialize { edits: Vec<DomEdit<'a>> },
}
impl<T: Properties + 'static> WebviewRenderer<T> {
@ -129,7 +126,7 @@ impl<T: Properties + 'static> WebviewRenderer<T> {
.build()?;
event_loop.run(move |event, _, control_flow| {
*control_flow = ControlFlow::Poll;
*control_flow = ControlFlow::Wait;
match event {
Event::WindowEvent {

3
packages/hooks/src/usestate.rs
View file

@ -148,7 +148,8 @@ impl<'a, T: 'static> std::ops::Deref for UseState<'a, T> {
}
}
use std::ops::{Add, AddAssign, Sub, SubAssign};
use std::ops::{Add, AddAssign, Div, DivAssign, Index, IndexMut, Mul, MulAssign, Sub, SubAssign};
impl<'a, T: Copy + Add<T, Output = T>> Add<T> for UseState<'a, T> {
type Output = T;

2
packages/ssr/examples/tofile.rs
View file

@ -24,7 +24,7 @@ pub const App: FC<()> = |cx| {
div { class: "overflow-hidden"
link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" }
Header {}
// Entry {}
Entry {}
Hero {}
Hero {}
Hero {}

2
src/lib.rs
View file

@ -186,7 +186,7 @@ pub use dioxus_ssr as ssr;
pub use dioxus_hooks as hooks;
#[cfg(feature = "desktop")]
pub use dioxus_webview as desktop;
pub use dioxus_desktop as desktop;
pub mod prelude {
//! A glob import that includes helper types like FC, rsx!, html!, and required traits

19
wip.md
View file

@ -0,0 +1,19 @@
6 oz. button mushrooms
6 oz. shiitake mushrooms
7 oz. smoked or firm tofu (half a 14-oz. package), drained, cut into 1"–2 pieces
1 medium onion, cut into a few large pieces
¼ cup plus 3 Tbsp. vegetable oil
5 garlic cloves, finely chopped
¼ cup gochujang (Korean hot pepper paste)
1 tsp. five-spice powder
½ tsp. ground cumin
3 Tbsp. Shaoxing wine (Chinese rice wine) or medium-dry sherry
2 Tbsp. vegetarian mushroom oyster sauce (such as Lee Kum Kee)
Kosher salt
2 Tbsp. vegetable oil
1 tsp. toasted sesame oil
6 English muffins, split
2 scallions, thinly sliced
½ cup coarsely chopped cilantro
1 Tbsp. toasted sesame seeds