Fix various typos and grammar nits
I also removed all trailing whitespace from lines since I have Emacs configured to highlight this.
This commit is contained in:
1 parent
63b06b7977
commit
9e4ec43b1e
39 files changed
+160
-161
No files matched your search
@@ -81,7 +81,7 @@ pub fn derive_typed_builder(input: proc_macro::TokenStream) -> proc_macro::Token
|
||||
/// // Using an "ID" associated with your data is a good idea.
|
||||
/// data.into_iter().map(|(k, v)| rsx!(li { key: "{k}" "{v}" }))
|
||||
/// }}
|
||||
///
|
||||
///
|
||||
/// // Matching
|
||||
/// {match true {
|
||||
/// true => rsx!(h1 {"Top text"}),
|
||||
@@ -229,18 +229,18 @@ pub fn routable_derive(input: proc_macro::TokenStream) -> proc_macro::TokenStrea
|
||||
/// #[inline_props]
|
||||
/// fn app(cx: Scope, bob: String) -> Element {
|
||||
/// cx.render(rsx!("hello, {bob}"))
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// // is equivalent to
|
||||
///
|
||||
/// #[derive(PartialEq, Props)]
|
||||
/// struct AppProps {
|
||||
/// bob: String,
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// fn app(cx: Scope<AppProps>) -> Element {
|
||||
/// cx.render(rsx!("hello, {bob}"))
|
||||
/// }
|
||||
/// }
|
||||
/// ```
|
||||
#[proc_macro_attribute]
|
||||
pub fn inline_props(_args: proc_macro::TokenStream, s: TokenStream) -> TokenStream {
|
||||
|
||||
@@ -94,5 +94,5 @@ Dioxus deals with arenas, lifetimes, asynchronous tasks, custom allocators, pinn
|
||||
|
||||
If you don't want to use a crate that uses unsafe, then this crate is not for you.
|
||||
|
||||
However, we are always interested in decreasing the scope of the core VirtualDom to make it easier to review. We'd be happy to welcome PRs that can eliminate unsafe code while still upholding the numerous variants required to execute certain features.
|
||||
However, we are always interested in decreasing the scope of the core VirtualDom to make it easier to review. We'd be happy to welcome PRs that can eliminate unsafe code while still upholding the numerous invariants required to execute certain features.
|
||||
|
||||
@@ -5,7 +5,7 @@ This document is mostly a brain-dump on how things work. A lot of this informati
|
||||
Main topics covered here:
|
||||
- Fiber, Concurrency, and Cooperative Scheduling
|
||||
- Suspense
|
||||
- Signals
|
||||
- Signals
|
||||
- Patches
|
||||
- Diffing
|
||||
- Const/Static structures
|
||||
@@ -25,7 +25,7 @@ During diffing, the "caller" closure is updated if the props are not `static. Th
|
||||
|
||||
Hooks are a form of state that's slightly more finicky than structs but more extensible overall. Hooks cannot be used in conditionals, but are portable enough to run on most targets.
|
||||
|
||||
The Dioxus hook model uses a Bump arena where user's data lives.
|
||||
The Dioxus hook model uses a Bump arena where user's data lives.
|
||||
|
||||
Initializing hooks:
|
||||
- The component is created
|
||||
@@ -38,7 +38,7 @@ Initializing hooks:
|
||||
|
||||
Running hooks:
|
||||
- Each time use_hook is called, the internal hook state is fetched as &mut T
|
||||
- We are guaranteed that our &mut T is not aliasing by re-generating any &mut T dependencies
|
||||
- We are guaranteed that our &mut T is not aliasing by re-generating any &mut T dependencies
|
||||
- The hook counter is incremented
|
||||
|
||||
|
||||
@@ -62,7 +62,7 @@ The diffing engine in Dioxus expects the RealDom
|
||||
|
||||
Dioxus uses patches - not imperative methods - to modify the real dom. This speeds up the diffing operation and makes diffing cancelable which is useful for cooperative scheduling. In general, the RealDom trait exists so renderers can share "Node pointers" across runtime boundaries.
|
||||
|
||||
There are no contractual obligations between the VirtualDOM and RealDOM. When the VirtualDOM finishes its work, it releases a Vec of Edits (patches) which the RealDOM can use to update itself.
|
||||
There are no contractual obligations between the VirtualDOM and RealDOM. When the VirtualDOM finishes its work, it releases a Vec of Edits (patches) which the RealDOM can use to update itself.
|
||||
|
||||
|
||||
|
||||
@@ -70,11 +70,11 @@ There are no contractual obligations between the VirtualDOM and RealDOM. When th
|
||||
|
||||
When an EventTrigger enters the queue and "progress" is called (an async function), Dioxus will get to work running scopes and diffing nodes. Scopes are run and nodes are diffed together. Dioxus records which scopes get diffed to track the progress of its work.
|
||||
|
||||
While descending through the stack frame, Dioxus will query the RealDom for "time remaining." When the time runs out, Dioxus will escape the stack frame by queuing whatever work it didn't get to, and then bubbling up out of "diff_node". Dioxus will also bubble out of "diff_node" if more important work gets queued while it was descending.
|
||||
While descending through the stack frame, Dioxus will query the RealDom for "time remaining." When the time runs out, Dioxus will escape the stack frame by queuing whatever work it didn't get to, and then bubbling up out of "diff_node". Dioxus will also bubble out of "diff_node" if more important work gets queued while it was descending.
|
||||
|
||||
Once bubbled out of diff_node, Dioxus will request the next idle callback and await for it to become available. The return of this callback is a "Deadline" object which Dioxus queries through the RealDom.
|
||||
Once bubbled out of diff_node, Dioxus will request the next idle callback and await for it to become available. The return of this callback is a "Deadline" object which Dioxus queries through the RealDom.
|
||||
|
||||
All of this is orchestrated to keep high priority events moving through the VirtualDOM and scheduling lower-priority work around the RealDOM's animations and periodic tasks.
|
||||
All of this is orchestrated to keep high priority events moving through the VirtualDOM and scheduling lower-priority work around the RealDOM's animations and periodic tasks.
|
||||
```js
|
||||
// returns a "deadline" object
|
||||
function idle() {
|
||||
@@ -83,7 +83,7 @@ function idle() {
|
||||
```
|
||||
|
||||
## Suspense
|
||||
In React, "suspense" is the ability render nodes outside of the traditional lifecycle. React will wait on a future to complete, and once the data is ready, will render those nodes. React's version of suspense is designed to make working with promises in components easier.
|
||||
In React, "suspense" is the ability render nodes outside of the traditional lifecycle. React will wait on a future to complete, and once the data is ready, will render those nodes. React's version of suspense is designed to make working with promises in components easier.
|
||||
|
||||
|
||||
In Dioxus, we have similar philosophy, but the use and details of suspense is slightly different. For starters, we don't currently allow using futures in the element structure. Technically, we can allow futures - and we do with "Signals" - but the "suspense" feature itself is meant to be self-contained within a single component. This forces you to handle all the loading states within your component, instead of outside the component, keeping things a bit more containerized.
|
||||
|
||||
@@ -18,7 +18,7 @@ impl BubbleState {
|
||||
}
|
||||
}
|
||||
|
||||
/// User Events are events that are shuttled from the renderer into the VirtualDom trhough the scheduler channel.
|
||||
/// User Events are events that are shuttled from the renderer into the VirtualDom through the scheduler channel.
|
||||
///
|
||||
/// These events will be passed to the appropriate Element given by `mounted_dom_id` and then bubbled up through the tree
|
||||
/// where each listener is checked and fired if the event name matches.
|
||||
|
||||
@@ -21,7 +21,7 @@ use std::{
|
||||
/// - the `rsx!` macro
|
||||
/// - the [`NodeFactory`] API
|
||||
pub enum VNode<'src> {
|
||||
/// Text VNodes simply bump-allocated (or static) string slices
|
||||
/// Text VNodes are simply bump-allocated (or static) string slices
|
||||
///
|
||||
/// # Example
|
||||
///
|
||||
@@ -399,7 +399,7 @@ impl<P> AnyProps for VComponentProps<P> {
|
||||
}
|
||||
|
||||
// Safety:
|
||||
// this will downcat the other ptr as our swallowed type!
|
||||
// this will downcast the other ptr as our swallowed type!
|
||||
// you *must* make this check *before* calling this method
|
||||
// if your functions are not the same, then you will downcast a pointer into a different type (UB)
|
||||
unsafe fn memoize(&self, other: &dyn AnyProps) -> bool {
|
||||
|
||||
@@ -70,7 +70,7 @@ impl ScopeArena {
|
||||
}
|
||||
|
||||
/// Safety:
|
||||
/// - Obtaining a mutable refernece to any Scope is unsafe
|
||||
/// - Obtaining a mutable reference to any Scope is unsafe
|
||||
/// - Scopes use interior mutability when sharing data into components
|
||||
pub(crate) fn get_scope(&self, id: ScopeId) -> Option<&ScopeState> {
|
||||
unsafe { self.scopes.borrow().get(&id).map(|f| &**f) }
|
||||
@@ -101,7 +101,7 @@ impl ScopeArena {
|
||||
let parent_scope = parent_scope.map(|f| self.get_scope_raw(f)).flatten();
|
||||
|
||||
/*
|
||||
This scopearena aggressively reuse old scopes when possible.
|
||||
This scopearena aggressively reuses old scopes when possible.
|
||||
We try to minimize the new allocations for props/arenas.
|
||||
|
||||
However, this will probably lead to some sort of fragmentation.
|
||||
|
||||
@@ -3,7 +3,7 @@ use crate::innerlude::*;
|
||||
pub struct ElementIdIterator<'a> {
|
||||
vdom: &'a VirtualDom,
|
||||
|
||||
// Heuristcally we should never bleed into 5 completely nested fragments/components
|
||||
// Heuristically we should never bleed into 5 completely nested fragments/components
|
||||
// Smallvec lets us stack allocate our little stack machine so the vast majority of cases are sane
|
||||
stack: smallvec::SmallVec<[(u16, &'a VNode<'a>); 5]>,
|
||||
}
|
||||
|
||||
@@ -9,12 +9,12 @@ use fxhash::FxHashSet;
|
||||
use indexmap::IndexSet;
|
||||
use std::{collections::VecDeque, iter::FromIterator, task::Poll};
|
||||
|
||||
/// A virtual node s ystem that progresses user events and diffs UI trees.
|
||||
/// A virtual node system that progresses user events and diffs UI trees.
|
||||
///
|
||||
///
|
||||
/// ## Guide
|
||||
///
|
||||
/// Components are defined as simple functions that take [`Scope`] and return an [`Element`].
|
||||
/// Components are defined as simple functions that take [`Scope`] and return an [`Element`].
|
||||
///
|
||||
/// ```rust, ignore
|
||||
/// #[derive(Props, PartialEq)]
|
||||
@@ -233,7 +233,7 @@ impl VirtualDom {
|
||||
|
||||
/// Get the [`Scope`] for the root component.
|
||||
///
|
||||
/// This is useful for traversing the tree from the root for heuristics or alternsative renderers that use Dioxus
|
||||
/// This is useful for traversing the tree from the root for heuristics or alternative renderers that use Dioxus
|
||||
/// directly.
|
||||
///
|
||||
/// This method is equivalent to calling `get_scope(ScopeId(0))`
|
||||
@@ -618,7 +618,7 @@ impl VirtualDom {
|
||||
///
|
||||
/// let dom = VirtualDom::new(Base);
|
||||
/// let nodes = dom.render_nodes(rsx!("div"));
|
||||
/// ```
|
||||
/// ```
|
||||
pub fn diff_vnodes<'a>(&'a self, old: &'a VNode<'a>, new: &'a VNode<'a>) -> Mutations<'a> {
|
||||
let mut machine = DiffState::new(&self.scopes);
|
||||
machine.stack.push(DiffInstruction::Diff { new, old });
|
||||
|
||||
@@ -66,7 +66,7 @@ impl<'a, T: 'static> UseState<'a, T> {
|
||||
})
|
||||
}
|
||||
|
||||
pub fn wtih(&self, f: impl FnOnce(&mut T)) {
|
||||
pub fn with(&self, f: impl FnOnce(&mut T)) {
|
||||
let mut val = self.0.wip.borrow_mut();
|
||||
|
||||
if let Some(inner) = val.as_mut() {
|
||||
|
||||
@@ -42,7 +42,7 @@ The HTML namespace is defined mostly with macros. However, the expanded form wou
|
||||
struct base;
|
||||
impl DioxusElement for base {
|
||||
const TAG_NAME: &'static str = "base";
|
||||
const NAME_SPACE: Option<&'static str> = None;
|
||||
const NAME_SPACE: Option<&'static str> = None;
|
||||
}
|
||||
impl base {
|
||||
#[inline]
|
||||
@@ -60,7 +60,7 @@ Because attributes are defined as methods on the unit struct, they guard the att
|
||||
|
||||
## How to extend it:
|
||||
|
||||
Whenever the rsx! macro is called, it relies on a module `dioxus_elements` to be in scope. When you enable the `html` feature in dioxus, this module gets imported in the prelude. However, you can extend this with your own set of custom elements by making your own `dioxus_elements` module and re-exporting the html namespace.
|
||||
Whenever the rsx! macro is called, it relies on a module `dioxus_elements` to be in scope. When you enable the `html` feature in dioxus, this module gets imported in the prelude. However, you can extend this with your own set of custom elements by making your own `dioxus_elements` module and re-exporting the html namespace.
|
||||
|
||||
```rust
|
||||
mod dioxus_elements {
|
||||
@@ -68,13 +68,13 @@ mod dioxus_elements {
|
||||
struct my_element;
|
||||
impl DioxusElement for my_element {
|
||||
const TAG_NAME: &'static str = "base";
|
||||
const NAME_SPACE: Option<&'static str> = None;
|
||||
const NAME_SPACE: Option<&'static str> = None;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Limitations:
|
||||
-
|
||||
-
|
||||
|
||||
## How to work around it:
|
||||
If an attribute in Dioxus is invalid (defined incorrectly) - first, make an issue - but then, you can work around it. The raw builder API is actually somewhat ergonomic to work with, and the NodeFactory type exposes a bunch of methods to make any type of tree - even invalid ones! So obviously, be careful, but there's basically anything you can do.
|
||||
@@ -87,19 +87,19 @@ cx.render(rsx!{
|
||||
{LazyNodes::new(move |f| {
|
||||
f.raw_element(
|
||||
// tag name
|
||||
"custom_element",
|
||||
"custom_element",
|
||||
|
||||
// attributes
|
||||
&[f.attr("billy", format_args!("goat"))],
|
||||
&[f.attr("billy", format_args!("goat"))],
|
||||
|
||||
// listeners
|
||||
&[f.listener(onclick(move |_| {}))],
|
||||
&[f.listener(onclick(move |_| {}))],
|
||||
|
||||
// children
|
||||
&[cx.render(rsx!(div {} ))],
|
||||
&[cx.render(rsx!(div {} ))],
|
||||
|
||||
// key
|
||||
None
|
||||
None
|
||||
)
|
||||
})}
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ async fn main() -> tide::Result<()> {
|
||||
}
|
||||
```
|
||||
|
||||
Dioxus LiveView runs your Dioxus apps on the server
|
||||
Dioxus LiveView runs your Dioxus apps on the server
|
||||
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@ async fn main() {
|
||||
|
||||
async fn order_shoes(mut req: WebsocketRequest) -> Response {
|
||||
let stream = req.upgrade();
|
||||
dioxus::liveview::launch(App, stream).await;
|
||||
dioxus::liveview::launch(App, stream).await;
|
||||
}
|
||||
|
||||
fn App(cx: Scope) -> Element {
|
||||
|
||||
@@ -21,7 +21,7 @@ $ cargo install --git https://github.com/BrainiumLLC/cargo-mobile
|
||||
And then initialize your app for the right platform. Use the `winit` template for now. Right now, there's no "Dioxus" template in cargo-mobile.
|
||||
|
||||
```shell
|
||||
$ cargo mobile init
|
||||
$ cargo mobile init
|
||||
```
|
||||
|
||||
We're going to completely clear out the `dependencies` it generates for us, swapping out `winit` with `dioxus-mobile`.
|
||||
|
||||
@@ -16,7 +16,7 @@ fn app() {
|
||||
|
||||
Then, in your route, you can choose to parse the Route any way you want through `use_route`.
|
||||
```rust
|
||||
let id: usize = use_route(&cx).path("id")?;
|
||||
let id: usize = use_route(&cx).segment("id")?;
|
||||
|
||||
let state: CustomState = use_route(&cx).parse()?;
|
||||
```
|
||||
|
||||
@@ -11,7 +11,7 @@ pub struct LinkProps<'a> {
|
||||
|
||||
/// The url that gets pushed to the history stack
|
||||
///
|
||||
/// You can either put it your own inline method or just autoderive the route using `derive(Routable)`
|
||||
/// You can either put in your own inline method or just autoderive the route using `derive(Routable)`
|
||||
///
|
||||
/// ```rust, ignore
|
||||
///
|
||||
|
||||
@@ -52,7 +52,7 @@ let content = dioxus::ssr::render_vdom(&dom);
|
||||
```
|
||||
|
||||
## Configuring output
|
||||
It's possible to configure the output of the generated HTML.
|
||||
It's possible to configure the output of the generated HTML.
|
||||
|
||||
```rust, ignore
|
||||
let content = dioxus::ssr::render_vdom(&dom, |config| config.pretty(true).prerender(true));
|
||||
@@ -82,7 +82,7 @@ buf.write_fmt!(format_args!("{}", args));
|
||||
|
||||
|
||||
|
||||
## Usage in pre-rendering
|
||||
## Usage in pre-rendering
|
||||
|
||||
This crate is particularly useful in pre-generating pages server-side and then selectively loading dioxus client-side to pick up the reactive elements.
|
||||
|
||||
|
||||
Reference in new issue
Block a user