Implementing a Virtual DOM in Rust

In this article, we explore the implementation of a basic virtual DOM for parsing and rendering HTML elements using Rust.

We start by defining essential structures for representing virtual nodes and rendering them into HTML. We enhance our implementation with a straightforward diffing algorithm, enabling efficient DOM updates by applying only necessary changes.

To introduce flexibility, we demonstrate parsing a virtual DOM structure from a JSON script, facilitating dynamic UI construction.

Let’s jump right in! 🦀

The Virtual DOM

Implementing a basic virtual DOM (VDOM) in Rust involves creating a simplified representation of the DOM that can be used to efficiently update the browser’s actual DOM.

The VDOM will include structures to represent elements and their properties, and functions to render these virtual elements into HTML strings. This basic implementation will cover creating elements and rendering them, but won’t include advanced features like diffing algorithms for optimal updates.

Step 1: Define the Virtual DOM Structures

First, let’s define the structures that will represent virtual DOM nodes and their properties. For simplicity, this example will handle a limited set of HTML elements and attributes.

// Define the types of nodes in our virtual DOM
enum NodeType {
    Text(String),
    Element(ElementData),
}

// Data for element nodes (tags like <div>, <p>, etc.)
struct ElementData {
    tag_name: String,
    attributes: Vec<(String, String)>, // Attributes as key-value pairs
    children: Vec<VNode>, // Children can be any type of node
}

// A virtual DOM node can be either an element or a text node
struct VNode {
    node_type: NodeType,
}

impl VNode {
    // Constructor for text nodes
    fn new_text(text: String) -> Self {
        VNode {
            node_type: NodeType::Text(text),
        }
    }

    // Constructor for element nodes
    fn new_element(tag_name: String, attributes: Vec<(String, String)>, children: Vec<VNode>) -> Self {
        VNode {
            node_type: NodeType::Element(ElementData {
                tag_name,
                attributes,
                children,
            }),
        }
    }
}

Step 2: Rendering the Virtual DOM to HTML

Next, implement a function that takes a VNode and recursively converts it into an HTML string. This function will handle different types of nodes (text and elements) and assemble the HTML.

impl VNode {
    // Render a VNode and its children to an HTML string
    fn render(&self) -> String {
        match &self.node_type {
            NodeType::Text(text) => text.clone(),

            NodeType::Element(data) => {
                let attrs = data.attributes.iter()
                    .map(|(key, value)| format!("{}=\"{}\"", key, value))
                    .collect::<Vec<_>>()
                    .join(" ");

                let children = data.children.iter()
                    .map(|child| child.render())
                    .collect::<Vec<_>>()
                    .join("");
                format!("<{} {}>{}</{}>", data.tag_name, attrs, children, data.tag_name)
            },
        }
    }
}

Step 3: Using the Virtual DOM

Finally, we can use the virtual DOM by creating a simple virtual tree and rendering it to HTML.

fn main() {
    // Create a simple virtual DOM tree
    let vdom = VNode::new_element(
        "div".to_string(),
        vec![("class".to_string(), "container".to_string())],
        vec![
            VNode::new_element("h1".to_string(), vec![], vec![
                VNode::new_text("Hello, Rust!".to_string())
            ]),
            VNode::new_element("p".to_string(), vec![], vec![
                VNode::new_text("This is a simple virtual DOM example.".to_string())
            ]),
        ],
    );

    // Render the virtual DOM to an HTML string
    let html_output = vdom.render();
    println!("Rendered HTML:\n{}", html_output);
}

Step 4: Implementing a Diffing Algorithm

The diffing algorithm will compare the old and new VNode trees and produce a set of changes that need to be applied to update the actual DOM. This simplistic version will only handle changes in text nodes and the addition or removal of elements, not attributes or reordering of child nodes.

enum Patch {
    ChangeText(String),
    AddNode(VNode),
    RemoveNode,
}

impl VNode {
    // Diff the current VNode against a new VNode, producing a list of patches
    fn diff(&self, new_node: &VNode) -> Vec<Patch> {
        let mut patches = Vec::new();
        match (&self.node_type, &new_node.node_type) {
            (NodeType::Text(old_text), NodeType::Text(new_text)) => {
                if old_text != new_text {
                    patches.push(Patch::ChangeText(new_text.clone()));
                }
            }

            (NodeType::Element(old_data), NodeType::Element(new_data)) => {
                if old_data.tag_name != new_data.tag_name {
                    patches.push(Patch::AddNode(new_node.clone()));
                } else {

                    // Compare children
                    let old_children = &old_data.children;
                    let new_children = &new_data.children;
                    let common_length = old_children.len().min(new_children.len());

                    // Diff each pair of existing children
                    for i in 0..common_length {
                        let child_patches = old_children[i].diff(&new_children[i]);
                        patches.extend(child_patches);
                    }

                    // If new children are added
                    for new_child in new_children.iter().skip(common_length) {
                        patches.push(Patch::AddNode(new_child.clone()));
                    }

                    // If old children are removed
                    if old_children.len() > new_children.len() {
                        for _ in common_length..old_children.len() {
                            patches.push(Patch::RemoveNode);
                        }
                    }
                }
            }
            // Handle cases where node types are different
            _ => patches.push(Patch::AddNode(new_node.clone())),
        }
        patches
    }
}

Step 5: Applying Patches to the Actual DOM

For a complete virtual DOM library, we’d need a way to apply these patches to the actual DOM. In this Rust example, we’ll simulate this step by showing how the patches could be interpreted, as actual DOM manipulation would require integration with a web environment, typically through WebAssembly and JavaScript interop.

impl Patch {
    // Simulate applying a patch to the DOM
    fn apply(&self, target: &mut String) {
        match self {
            Patch::ChangeText(new_text) => {
                *target = new_text.clone();
            }
            Patch::AddNode(new_node) => {
                *target += &new_node.render();
            }
            Patch::RemoveNode => {
                *target = String::new();
            }
        }
    }
}

Parsing JSON for building the DOM

To enable our Rust-based virtual DOM implementation to parse a script from JSON, we need to extend our code with functionality for deserializing JSON into our VNode structures. This will involve using a JSON parsing library in Rust, such as serde_json, along with serde for deserialization.

Step 1: Add Dependencies

First, add serde, serde_json, and serde_derive to your Cargo.toml to handle JSON parsing:

[dependencies]
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
serde_derive = "1.0"

Step 2: Define Deserializable Structures

We need to adjust our VNode, ElementData, and NodeType structures to be deserializable from JSON. This involves annotating the structures with serde macros to define how they should be interpreted from JSON.

use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize, Clone, Debug)]
#[serde(tag = "type", rename_all = "lowercase")]
enum NodeType {
    Text(String),
    Element(ElementData),
}

#[derive(Serialize, Deserialize, Clone, Debug)]
struct ElementData {
    tag_name: String,
    #[serde(default)]
    attributes: Vec<(String, String)>,
    #[serde(default)]
    children: Vec<VNode>,
}

#[derive(Serialize, Deserialize, Clone, Debug)]
struct VNode {
    #[serde(flatten)]
    node_type: NodeType,
}

Step 3: Parse JSON to Create the Virtual DOM

Implement a function to parse a JSON string and convert it into a VNode structure. This function uses serde_json to deserialize the JSON into our Rust data structures.

fn parse_json_to_vdom(json: &str) -> Result<VNode, serde_json::Error> {
    serde_json::from_str::<VNode>(json)
}

Step 4: Example Usage

Now, you can create a JSON representation of your virtual DOM and parse it to render HTML. Here’s an example JSON script that represents a simple virtual DOM structure:

{
  "type": "element",
  "tag_name": "div",
  "attributes": [["class", "container"]],
  "children": [
    {
      "type": "element",
      "tag_name": "h1",
      "children": [
        {
          "type": "text",
          "value": "Hello, Rust!"
        }
      ]
    },
    {
      "type": "element",
      "tag_name": "p",
      "children": [
        {
          "type": "text",
          "value": "This is a virtual DOM parsed from JSON."
        }
      ]
    }
  ]
}

To parse this JSON and render the resulting virtual DOM to HTML in Rust:

fn main() {
    let json = r#"
    {
        "type": "element",
        "tag_name": "div",
        "attributes": [["class", "container"]],
        "children": [
            {
                "type": "element",
                "tag_name": "h1",
                "children": [
                    {
                        "type": "text",
                        "value": "Hello, Rust!"
                    }
                ]
            },
            {
                "type": "element",
                "tag_name": "p",
                "children": [
                    {
                        "type": "text",
                        "value": "This is a virtual DOM parsed from JSON."
                    }
                ]
            }
        ]
    }"#;

    match parse_json_to_vdom(json) {
        Ok(vdom) => {
            let html_output = vdom.render();
            println!("Rendered HTML:\n{}", html_output);
        }
        Err(e) => println!("Failed to parse JSON: {}", e),
    }
}

Reading from an external JSON file

To load JSON from a file and parse it into a virtual DOM structure in Rust, you will need to perform file I/O operations alongside JSON parsing. The serde_json library will still be used for parsing, and Rust's standard library provides functionality for reading files.

Step 1: Read JSON from a File

First, create a function to read the contents of a JSON file into a String. This function will use std::fs::read_to_string to read the file.

use std::fs;

fn read_json_from_file(file_path: &str) -> Result<String, std::io::Error> {
    fs::read_to_string(file_path)
}

Step 2: Integrate File Reading with JSON Parsing

Modify the main function to read the JSON from a file and then parse it into the virtual DOM structure.

fn main() {
    let file_path = "path/to/your/file.json"; // Update this path to your JSON file's location

    // Read JSON from the file
    let json_result = read_json_from_file(file_path);
    match json_result {
        Ok(json) => {
            // Parse the JSON into the virtual DOM
            match parse_json_to_vdom(&json) {
                Ok(vdom) => {
                    // Render the virtual DOM to HTML
                    let html_output = vdom.render();
                    println!("Rendered HTML:\n{}", html_output);
                }
                Err(e) => println!("Failed to parse JSON: {}", e),
            }
        }
        Err(e) => println!("Failed to read file: {}", e),
    }
}

Complete Example

Here’s how the complete Rust program might look, integrating file reading, JSON parsing, and virtual DOM rendering:

use serde::{Deserialize, Serialize};
use std::fs;

#[derive(Serialize, Deserialize, Clone, Debug)]
#[serde(tag = "type", rename_all = "lowercase")]
enum NodeType {
    Text(String),
    Element(ElementData),
}

#[derive(Serialize, Deserialize, Clone, Debug)]
struct ElementData {
    tag_name: String,
    #[serde(default)]
    attributes: Vec<(String, String)>,
    #[serde(default)]
    children: Vec<VNode>,
}

#[derive(Serialize, Deserialize, Clone, Debug)]
struct VNode {
    #[serde(flatten)]
    node_type: NodeType,
}

impl VNode {
    fn render(&self) -> String {
        match &self.node_type {
            NodeType::Text(text) => text.clone(),
            NodeType::Element(data) => {
                let attrs = data.attributes.iter()
                    .map(|(key, value)| format!("{}=\"{}\"", key, value))
                    .collect::<Vec<_>>()
                    .join(" ");
                let children = data.children.iter()
                    .map(|child| child.render())
                    .collect::<Vec<_>>()
                    .join("");
                format!("<{} {}>{}</{}>", data.tag_name, attrs, children, data.tag_name)
            },
        }
    }
}

fn parse_json_to_vdom(json: &str) -> Result<VNode, serde_json::Error> {
    serde_json::from_str::<VNode>(json)
}

fn read_json_from_file(file_path: &str) -> Result<String, std::io::Error> {
    fs::read_to_string(file_path)
}

fn main() {
    let file_path = "path/to/your/file.json"; // Update this path to your JSON file's location

    // Read JSON from the file
    let json_result = read_json_from_file(file_path);
    match json_result {
        Ok(json) => {

            // Parse the JSON into the virtual DOM
            match parse_json_to_vdom(&json) {
                Ok(vdom) => {
                    // Render the virtual DOM to HTML
                    let html_output = vdom.render();
                    println!("Rendered HTML:\n{}", html_output);
                }
                Err(e) => println!("Failed to parse JSON: {}", e),
            }
        }
        Err(e) => println!("Failed to read file: {}", e),
    }
}

Remember to replace "path/to/your/file.json" with the actual path to your JSON file. This program will read the JSON script from the file, parse it into a virtual DOM structure, and then render that structure to an HTML string.