2021-01-21 07:25:44 +00:00
|
|
|
//! 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.
|
|
|
|
|
2021-07-11 21:24:47 +00:00
|
|
|
use std::fmt::{Display, Formatter};
|
2021-01-21 07:25:44 +00:00
|
|
|
|
2021-07-13 03:44:20 +00:00
|
|
|
use dioxus_core::*;
|
2021-07-11 18:49:52 +00:00
|
|
|
|
|
|
|
pub fn render_root(vdom: &VirtualDom) -> String {
|
|
|
|
format!("{:}", TextRenderer::new(vdom))
|
2021-03-23 03:52:54 +00:00
|
|
|
}
|
|
|
|
|
2021-07-11 19:17:55 +00:00
|
|
|
pub struct SsrConfig {
|
|
|
|
// currently not supported - control if we indent the HTML output
|
2021-07-11 23:31:07 +00:00
|
|
|
indent: bool,
|
2021-07-11 19:17:55 +00:00
|
|
|
|
|
|
|
// Control if elements are written onto a new line
|
|
|
|
newline: bool,
|
|
|
|
|
|
|
|
// Currently not implemented
|
|
|
|
// Don't proceed onto new components. Instead, put the name of the component.
|
|
|
|
// TODO: components don't have names :(
|
2021-07-11 21:24:47 +00:00
|
|
|
_skip_components: bool,
|
2021-07-11 19:17:55 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
impl Default for SsrConfig {
|
|
|
|
fn default() -> Self {
|
|
|
|
Self {
|
2021-07-11 23:31:07 +00:00
|
|
|
indent: false,
|
2021-07-11 19:17:55 +00:00
|
|
|
|
|
|
|
newline: false,
|
2021-07-11 21:24:47 +00:00
|
|
|
_skip_components: false,
|
2021-07-11 19:17:55 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-07-11 18:49:52 +00:00
|
|
|
/// A configurable text renderer for the Dioxus VirtualDOM.
|
|
|
|
///
|
2021-01-21 07:25:44 +00:00
|
|
|
///
|
2021-07-11 18:49:52 +00:00
|
|
|
/// ## Details
|
2021-01-21 07:25:44 +00:00
|
|
|
///
|
2021-07-11 18:49:52 +00:00
|
|
|
/// This uses the `Formatter` infrastructure so you can write into anything that supports `write_fmt`. We can't accept
|
|
|
|
/// any generic writer, so you need to "Display" the text renderer. This is done through `format!` or `format_args!`
|
2021-01-21 07:25:44 +00:00
|
|
|
///
|
2021-07-11 19:17:55 +00:00
|
|
|
/// ## Example
|
|
|
|
/// ```ignore
|
|
|
|
/// const App: FC<()> = |cx| cx.render(rsx!(div { "hello world" }));
|
|
|
|
/// let mut vdom = VirtualDom::new(App);
|
|
|
|
/// vdom.rebuild_in_place();
|
2021-07-11 18:49:52 +00:00
|
|
|
///
|
2021-07-11 19:17:55 +00:00
|
|
|
/// let renderer = TextRenderer::new(&vdom);
|
|
|
|
/// let output = format!("{}", renderer);
|
|
|
|
/// assert_eq!(output, "<div>hello world</div>");
|
|
|
|
/// ```
|
2021-07-11 18:49:52 +00:00
|
|
|
pub struct TextRenderer<'a> {
|
|
|
|
vdom: &'a VirtualDom,
|
2021-07-11 19:17:55 +00:00
|
|
|
cfg: SsrConfig,
|
2021-01-21 07:25:44 +00:00
|
|
|
}
|
|
|
|
|
2021-07-11 18:49:52 +00:00
|
|
|
impl<'a> TextRenderer<'a> {
|
|
|
|
fn new(vdom: &'a VirtualDom) -> Self {
|
2021-07-11 19:17:55 +00:00
|
|
|
Self {
|
|
|
|
vdom,
|
|
|
|
cfg: SsrConfig::default(),
|
|
|
|
}
|
2021-01-21 07:25:44 +00:00
|
|
|
}
|
|
|
|
|
2021-07-11 23:31:07 +00:00
|
|
|
fn html_render(&self, node: &VNode, f: &mut std::fmt::Formatter, il: u16) -> std::fmt::Result {
|
2021-07-13 03:44:20 +00:00
|
|
|
match &node.kind {
|
|
|
|
VNodeKind::Text(text) => {
|
2021-07-11 23:31:07 +00:00
|
|
|
if self.cfg.indent {
|
|
|
|
for _ in 0..il {
|
|
|
|
write!(f, " ")?;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
write!(f, "{}", text.text)?
|
|
|
|
}
|
2021-07-13 03:44:20 +00:00
|
|
|
VNodeKind::Element(el) => {
|
2021-07-11 23:31:07 +00:00
|
|
|
if self.cfg.indent {
|
|
|
|
for _ in 0..il {
|
|
|
|
write!(f, " ")?;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-11 18:49:52 +00:00
|
|
|
write!(f, "<{}", el.tag_name)?;
|
|
|
|
for attr in el.attributes {
|
|
|
|
write!(f, " {}=\"{}\"", attr.name, attr.value)?;
|
|
|
|
}
|
2021-07-11 19:17:55 +00:00
|
|
|
match self.cfg.newline {
|
|
|
|
true => write!(f, ">\n")?,
|
|
|
|
false => write!(f, ">")?,
|
|
|
|
}
|
|
|
|
|
2021-07-11 18:49:52 +00:00
|
|
|
for child in el.children {
|
2021-07-11 23:31:07 +00:00
|
|
|
self.html_render(child, f, il + 1)?;
|
2021-07-11 18:49:52 +00:00
|
|
|
}
|
2021-07-11 23:31:07 +00:00
|
|
|
|
|
|
|
if self.cfg.newline {
|
|
|
|
write!(f, "\n")?;
|
|
|
|
}
|
|
|
|
if self.cfg.indent {
|
|
|
|
for _ in 0..il {
|
|
|
|
write!(f, " ")?;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
write!(f, "</{}>", el.tag_name)?;
|
|
|
|
if self.cfg.newline {
|
|
|
|
write!(f, "\n")?;
|
2021-07-11 19:17:55 +00:00
|
|
|
}
|
|
|
|
}
|
2021-07-13 03:44:20 +00:00
|
|
|
VNodeKind::Fragment(frag) => {
|
2021-07-11 19:17:55 +00:00
|
|
|
for child in frag.children {
|
2021-07-11 23:31:07 +00:00
|
|
|
self.html_render(child, f, il + 1)?;
|
2021-07-11 19:17:55 +00:00
|
|
|
}
|
2021-07-11 18:49:52 +00:00
|
|
|
}
|
2021-07-13 03:44:20 +00:00
|
|
|
VNodeKind::Component(vcomp) => {
|
2021-07-11 19:17:55 +00:00
|
|
|
let idx = vcomp.ass_scope.get().unwrap();
|
|
|
|
|
2021-07-15 08:09:28 +00:00
|
|
|
let new_node = self.vdom.components.try_get(idx).unwrap().root();
|
2021-07-11 19:17:55 +00:00
|
|
|
|
2021-07-11 23:31:07 +00:00
|
|
|
self.html_render(new_node, f, il + 1)?;
|
2021-07-11 18:49:52 +00:00
|
|
|
}
|
2021-07-15 07:38:09 +00:00
|
|
|
VNodeKind::Suspended { .. } => {
|
|
|
|
// we can't do anything with suspended nodes
|
|
|
|
}
|
2021-07-11 18:49:52 +00:00
|
|
|
}
|
2021-07-11 19:17:55 +00:00
|
|
|
Ok(())
|
2021-01-21 07:25:44 +00:00
|
|
|
}
|
2021-07-11 18:49:52 +00:00
|
|
|
}
|
2021-01-21 07:25:44 +00:00
|
|
|
|
2021-07-11 18:49:52 +00:00
|
|
|
impl Display for TextRenderer<'_> {
|
|
|
|
fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
|
|
|
|
let root = self.vdom.base_scope();
|
|
|
|
let root_node = root.root();
|
2021-07-11 23:31:07 +00:00
|
|
|
self.html_render(root_node, f, 0)
|
2021-01-21 07:25:44 +00:00
|
|
|
}
|
2021-07-11 18:49:52 +00:00
|
|
|
}
|
2021-01-21 07:25:44 +00:00
|
|
|
|
2021-07-11 18:49:52 +00:00
|
|
|
#[cfg(test)]
|
|
|
|
mod tests {
|
|
|
|
use super::*;
|
2021-01-21 07:25:44 +00:00
|
|
|
|
2021-07-11 18:49:52 +00:00
|
|
|
use dioxus_core as dioxus;
|
2021-07-11 21:24:47 +00:00
|
|
|
use dioxus_core::prelude::*;
|
2021-07-11 18:49:52 +00:00
|
|
|
use dioxus_html as dioxus_elements;
|
2021-07-13 04:56:39 +00:00
|
|
|
use dioxus_html::GlobalAttributes;
|
2021-02-03 07:26:04 +00:00
|
|
|
|
2021-07-11 18:49:52 +00:00
|
|
|
const SIMPLE_APP: FC<()> = |cx| {
|
|
|
|
cx.render(rsx!(div {
|
|
|
|
"hello world!"
|
|
|
|
}))
|
|
|
|
};
|
2021-01-21 07:25:44 +00:00
|
|
|
|
2021-07-11 18:49:52 +00:00
|
|
|
const SLIGHTLY_MORE_COMPLEX: FC<()> = |cx| {
|
|
|
|
cx.render(rsx! {
|
|
|
|
div {
|
|
|
|
title: "About W3Schools"
|
|
|
|
{(0..20).map(|f| rsx!{
|
|
|
|
div {
|
|
|
|
title: "About W3Schools"
|
|
|
|
style: "color:blue;text-align:center"
|
|
|
|
class: "About W3Schools"
|
|
|
|
p {
|
|
|
|
title: "About W3Schools"
|
|
|
|
"Hello world!: {f}"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
};
|
|
|
|
|
2021-07-11 21:24:47 +00:00
|
|
|
const NESTED_APP: FC<()> = |cx| {
|
|
|
|
cx.render(rsx!(
|
|
|
|
div {
|
|
|
|
SIMPLE_APP {}
|
|
|
|
}
|
|
|
|
))
|
|
|
|
};
|
|
|
|
const FRAGMENT_APP: FC<()> = |cx| {
|
|
|
|
cx.render(rsx!(
|
|
|
|
div { "f1" }
|
|
|
|
div { "f2" }
|
|
|
|
div { "f3" }
|
|
|
|
div { "f4" }
|
|
|
|
))
|
|
|
|
};
|
|
|
|
|
2021-07-11 18:49:52 +00:00
|
|
|
#[test]
|
2021-07-11 21:24:47 +00:00
|
|
|
fn to_string_works() {
|
2021-07-11 18:49:52 +00:00
|
|
|
let mut dom = VirtualDom::new(SIMPLE_APP);
|
|
|
|
dom.rebuild_in_place().expect("failed to run virtualdom");
|
|
|
|
dbg!(render_root(&dom));
|
2021-01-21 07:25:44 +00:00
|
|
|
}
|
|
|
|
|
2021-07-11 18:49:52 +00:00
|
|
|
#[test]
|
2021-07-11 21:24:47 +00:00
|
|
|
fn nested() {
|
|
|
|
let mut dom = VirtualDom::new(NESTED_APP);
|
|
|
|
dom.rebuild_in_place().expect("failed to run virtualdom");
|
|
|
|
dbg!(render_root(&dom));
|
|
|
|
}
|
|
|
|
|
|
|
|
#[test]
|
|
|
|
fn fragment_app() {
|
|
|
|
let mut dom = VirtualDom::new(FRAGMENT_APP);
|
|
|
|
dom.rebuild_in_place().expect("failed to run virtualdom");
|
|
|
|
dbg!(render_root(&dom));
|
|
|
|
}
|
|
|
|
|
|
|
|
#[test]
|
|
|
|
fn write_to_file() {
|
2021-07-11 18:49:52 +00:00
|
|
|
use std::fs::File;
|
2021-07-11 21:24:47 +00:00
|
|
|
use std::io::Write;
|
2021-07-11 18:49:52 +00:00
|
|
|
|
|
|
|
let mut file = File::create("index.html").unwrap();
|
|
|
|
|
2021-07-11 19:17:55 +00:00
|
|
|
let mut dom = VirtualDom::new(SLIGHTLY_MORE_COMPLEX);
|
2021-07-11 18:49:52 +00:00
|
|
|
dom.rebuild_in_place().expect("failed to run virtualdom");
|
|
|
|
|
|
|
|
file.write_fmt(format_args!("{}", TextRenderer::new(&dom)))
|
|
|
|
.unwrap();
|
2021-01-16 04:25:29 +00:00
|
|
|
}
|
|
|
|
}
|