wip: remove runner on hook and then update docs

This commit is contained in:
Jonathan Kelley committed 2022-01-02 02:15:04 -05:00
1 parent 7d41a16208
commit d1560450ba
95 files changed
+1339 -675

No files matched your search

+72 -9
View File
@@ -1,24 +1,87 @@
# Dioxus SSR
<div align="center">
<h1>Dioxus Server-Side Rendering (SSR)</h1>
<p>
<strong>Render Dioxus to valid html.</strong>
</p>
</div>
Render a Dioxus VirtualDOM to a string.
## Resources
This crate is a part of the broader Dioxus ecosystem. For more resources about Dioxus, check out:
- [Getting Started](https://dioxuslabs.com/getting-started)
- [Book](https://dioxuslabs.com/book)
- [Reference](https://dioxuslabs.com/reference)
- [Community Examples](https://github.com/DioxusLabs/community-examples)
## Overview
Dioxus SSR provides utilities to render Dioxus components to valid HTML. Once rendered, the HTML can be rehydrated client side or served from your web-server of choice.
```rust
// Our app:
const App: Component = |cx| rsx!(cx, div {"hello world!"});
let app: Component = |cx| cx.render(rsx!(div {"hello world!"}));
// Build the virtualdom from our app
let mut vdom = VirtualDOM::new(App);
// This runs components, lifecycles, etc. without needing a physical dom. Some features (like noderef) won't work.
let mut vdom = VirtualDom::new(app);
let _ = vdom.rebuild();
// Render the entire virtualdom from the root
let text = dioxus::ssr::render_vdom(&vdom);
assert_eq!(text, "<div>hello world!</div>")
```
## Basic Usage
The simplest example is to simply render some `rsx!` nodes to html. This can be done with the [`render_lazy`] api.
```rust
let content = dioxus::ssr::render(rsx!{
div {
(0..5).map(|i| rsx!(
"Number: {i}"
))
}
});
```
## Rendering a VirtualDom
```rust
let mut dom = VirtualDom::new(app);
let _ = dom.rebuild();
let content = dioxus::ssr::render_vdom(&dom);
```
## Configuring output
It's possible to configure the output of the generated HTML.
```rust
let content = dioxus::ssr::render_vdom(&dom, |config| config.pretty(true).prerender(true));
```
## Usage as a writer
We provide the basic `SsrFormatter` object that implements `Display`, so you can integrate SSR into an existing string, or write directly to a file.
```rust
use std::fmt::{Error, Write};
let mut buf = String::new();
let dom = VirtualDom::new(app);
let _ = dom.rebuild();
let args = dioxus::ssr::formatter(dom, |config| config);
buf.write_fmt!(format_args!("{}", args));
```
## Configuration
## 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.
+6 -16
View File
@@ -1,14 +1,4 @@
//!
//!
//!
//!
//! This crate demonstrates how to implement a custom renderer for Dioxus VNodes via the `TextRenderer` renderer.
//! The `TextRenderer` consumes a Dioxus Virtual DOM, progresses its event queue, and renders the VNodes to a String.
//!
//! While `VNode` supports "to_string" directly, it renders child components as the RSX! macro tokens. For custom components,
//! an external renderer is needed to progress the component lifecycles. The `TextRenderer` shows how to use the Virtual DOM
//! API to progress these lifecycle events to generate a fully-mounted Virtual DOM instance which can be renderer in the
//! `render` method.
#![doc = include_str!("../README.md")]
use std::fmt::{Display, Formatter};
@@ -17,7 +7,6 @@ use dioxus_core::exports::bumpalo::Bump;
use dioxus_core::IntoVNode;
use dioxus_core::*;
/// A memory pool for rendering
pub struct SsrRenderer {
inner: bumpalo::Bump,
cfg: SsrConfig,
@@ -34,6 +23,7 @@ impl SsrRenderer {
pub fn render_lazy<'a>(&'a mut self, f: LazyNodes<'a, '_>) -> String {
let bump = &mut self.inner as *mut _;
let s = self.render_inner(f);
// reuse the bump's memory
unsafe { (&mut *bump as &mut bumpalo::Bump).reset() };
s
@@ -63,13 +53,12 @@ pub fn render_lazy<'a>(f: LazyNodes<'a, '_>) -> String {
// regular component usage. The <'a> lifetime is used to enforce that all calls of IntoVnode use the same allocator.
//
// When LazyNodes are provided, they are FnOnce, but do not come with a allocator selected to borrow from. The <'a>
// lifetime is therefore longer than the lifetime of the allocator which doesn't exist yet.
// lifetime is therefore longer than the lifetime of the allocator which doesn't exist... yet.
//
// Therefore, we cast our local bump alloactor into right lifetime. This is okay because our usage of the bump arena
// is *definitely* shorter than the <'a> lifetime, and we return owned data - not borrowed data.
// Therefore, we know that no references are leaking.
let _b: &'a Bump = unsafe { std::mem::transmute(borrowed) };
// is *definitely* shorter than the <'a> lifetime, and we return *owned* data - not borrowed data.
let _b = unsafe { std::mem::transmute::<&Bump, &'a Bump>(borrowed) };
let root = f.into_vnode(NodeFactory::new(_b));
format!(
@@ -85,6 +74,7 @@ pub fn render_lazy<'a>(f: LazyNodes<'a, '_>) -> String {
pub fn render_vdom(dom: &VirtualDom) -> String {
format!("{:}", TextRenderer::from_vdom(dom, SsrConfig::default()))
}
pub fn render_vdom_cfg(dom: &VirtualDom, cfg: impl FnOnce(SsrConfig) -> SsrConfig) -> String {
format!(
"{:}",