Added dom id

fastn-js/js/virtual.js

@@ -22,19 +22,21 @@ class ClassList {
 }
 
 class Node {
-    #id
+    id
+    #dataId
     #tagName
     #children
     #attributes
     constructor(id, tagName) {
         this.#tagName = tagName;
-        this.#id = id;
+        this.#dataId = id;
         this.classList = new ClassList();
         this.#children = [];
         this.#attributes = {};
         this.innerHTML = "";
         this.style = {};
         this.onclick = null;
+        this.id = null;
     }
     appendChild(c) {
         this.#children.push(c);
@@ -66,7 +68,7 @@ class Node {
     }
     // Caution: This is only supported in ssr mode
     toHtmlAsString() {
-        const openingTag = `<${this.#tagName}${this.getDataIdString()}${this.getAttributesString()}${this.getClassString()}${this.getStyleString()}>`;
+        const openingTag = `<${this.#tagName}${this.getDataIdString()}${this.getIdString()}${this.getAttributesString()}${this.getClassString()}${this.getStyleString()}>`;
         const closingTag = `</${this.#tagName}>`;
         const innerHTML = this.innerHTML;
         const childNodes = this.#children.map(child => child.toHtmlAsString()).join('');
@@ -75,7 +77,11 @@ class Node {
     }
     // Caution: This is only supported in ssr mode
     getDataIdString() {
-        return ` data-id="${this.#id}"`;
+        return ` data-id="${this.#dataId}"`;
+    }
+    // Caution: This is only supported in ssr mode
+    getIdString() {
+        return fastn_utils.isNull(this.id) ? "": ` id="${this.id}"`;
     }
     // Caution: This is only supported in ssr mode
     getClassString() {

ftd/t/js/01-basic.ftd

@@ -2,6 +2,7 @@
 export: print
 
 -- ftd.text: "Hello"
+id: hello-id
 
 -- ftd.text: Hello
 background.solid: $inherited.colors.background.step-1