feat: parse element innerhtml fragments

Author: Rxflex

crates/rom-runtime/src/lib.rs

@@ -23,6 +23,8 @@ mod tests_fragments;
 #[cfg(test)]
 mod tests_history;
 #[cfg(test)]
+mod tests_innerhtml;
+#[cfg(test)]
 mod tests_layout_observers;
 #[cfg(test)]
 mod tests_messaging;

crates/rom-runtime/src/tests_innerhtml.rs

@@ -0,0 +1,64 @@
+use crate::{RomRuntime, RuntimeConfig};
+
+#[test]
+fn supports_innerhtml_fragment_parsing_and_serialization() {
+    let runtime = RomRuntime::new(RuntimeConfig::default()).unwrap();
+    let result = runtime
+        .eval_async_as_string(
+            r##"
+            (async () => {
+                const host = document.createElement("div");
+                host.innerHTML = '<span class="greeting">Hello</span><strong data-kind="accent">world</strong>';
+
+                const first = host.firstChild;
+                const second = host.lastChild;
+                const initial = {
+                    childCount: host.childNodes.length,
+                    firstTag: first.tagName,
+                    firstClass: first.className,
+                    firstText: first.textContent,
+                    secondTag: second.tagName,
+                    secondAttr: second.getAttribute("data-kind"),
+                    secondText: second.textContent,
+                    serialized: host.innerHTML,
+                };
+
+                host.innerHTML = '<em data-state="ready">updated</em>';
+
+                return JSON.stringify({
+                    initial,
+                    replaced: {
+                        childCount: host.childNodes.length,
+                        firstTag: host.firstChild.tagName,
+                        attr: host.firstChild.getAttribute("data-state"),
+                        text: host.textContent,
+                        serialized: host.innerHTML,
+                    },
+                });
+            })()
+            "##,
+        )
+        .unwrap();
+
+    let value: serde_json::Value = serde_json::from_str(&result).unwrap();
+    assert_eq!(value["initial"]["childCount"], 2);
+    assert_eq!(value["initial"]["firstTag"], "SPAN");
+    assert_eq!(value["initial"]["firstClass"], "greeting");
+    assert_eq!(value["initial"]["firstText"], "Hello");
+    assert_eq!(value["initial"]["secondTag"], "STRONG");
+    assert_eq!(value["initial"]["secondAttr"], "accent");
+    assert_eq!(value["initial"]["secondText"], "world");
+    assert_eq!(
+        value["initial"]["serialized"],
+        "<span class=\"greeting\">Hello</span><strong data-kind=\"accent\">world</strong>"
+    );
+
+    assert_eq!(value["replaced"]["childCount"], 1);
+    assert_eq!(value["replaced"]["firstTag"], "EM");
+    assert_eq!(value["replaced"]["attr"], "ready");
+    assert_eq!(value["replaced"]["text"], "updated");
+    assert_eq!(
+        value["replaced"]["serialized"],
+        "<em data-state=\"ready\">updated</em>"
+    );
+}

crates/rom-webapi/src/js/bootstrap_dom.js

@@ -16,6 +16,51 @@
         }
     }
 
+    function escapeHtmlText(value) {
+        return String(value)
+            .replace(/&/g, "&")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
+    }
+
+    function escapeHtmlAttribute(value) {
+        return escapeHtmlText(value).replace(/"/g, "&quot;");
+    }
+
+    function serializeNodeToHtml(node) {
+        if (!node) {
+            return "";
+        }
+
+        if (node.nodeType === 3) {
+            return escapeHtmlText(node.textContent ?? "");
+        }
+
+        if (node.nodeType === 11 || node.nodeType === 9) {
+            return node.childNodes.map((child) => serializeNodeToHtml(child)).join("");
+        }
+
+        if (node.nodeType !== 1) {
+            return "";
+        }
+
+        const tagName = node.tagName.toLowerCase();
+        const attributes = Array.from(node.attributes.entries())
+            .map(([name, value]) => ` ${name}="${escapeHtmlAttribute(value)}"`)
+            .join("");
+        const content = node.childNodes.map((child) => serializeNodeToHtml(child)).join("");
+        return `<${tagName}${attributes}>${content}</${tagName}>`;
+    }
+
+    function parseHtmlFragment(source) {
+        const fragmentDocument = new Document();
+        const parsed = parseMarkup(fragmentDocument, String(source ?? ""), false);
+        if (parsed.error) {
+            return [fragmentDocument.createTextNode(String(source ?? "").replace(/<[^>]*>/g, ""))];
+        }
+        return parsed.nodes;
+    }
+
     class Node extends EventTarget {
         constructor(nodeType, nodeName) {
             super();
@@ -242,11 +287,17 @@
         }
 
         get innerHTML() {
-            return this.textContent;
+            return this.childNodes.map((child) => serializeNodeToHtml(child)).join("");
         }
 
         set innerHTML(value) {
-            this.textContent = value;
+            while (this.childNodes.length > 0) {
+                this.removeChild(this.childNodes[this.childNodes.length - 1]);
+            }
+
+            for (const node of parseHtmlFragment(value)) {
+                this.appendChild(node);
+            }
         }
 
         querySelector(selector) {