Skip to content

Real DOM Adapter

HydratorRealDomAdapter

hyderator adapter for all real dom operations methods should start with: hyd_romp_

Source code in zenaura/client/hydrator/real_dom_adapter.py 
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
class HydratorRealDomAdapter:
    # for testing 
    """
        hyderator adapter for all real dom operations
        methods should start with:
        hyd_romp_
    """


    def hyd_rdom_create_element(self, virtual_node: Node) -> HTMLElement:
        """
        DOM operation: creates html element and returns it as HTMLElement

        Args:
            virtual_node: Node - the virtual node representing the element to be created

        Returns:
            HTMLElement - the created HTML element
        """
        element = document.createElement(virtual_node.name)

        return element

    def hyd_rdom_attach_to_root(self, html : str) -> None:
        """
        DOM operation: attaches compiled_comp to mounted_comp_id

        Args:
            html: str - the HTML string to be attached to the root element
        """
        document.getElementById("root").innerHTML = html

    def hyd_rdom_attach_to_mounted_comp(
            self,
            mounted_comp_id: str,
            html: str
    ):
        """
        DOM operation: attaches compiled_comp to mounted_comp_id

        Args:
            mounted_comp_id: str - the ID of the previously mounted component
            html: str - the HTML string to be attached to the mounted component
        """
        foundNode = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
        if foundNode:
            foundNode.outerHTML = html

    def hyd_rdom_set_attribute(self, mounted_comp_id: str, attribute: Attribute) -> None:
        """
        DOM operation: Sets attributes on an HTML element.

        Args:
            mounted_comp_id: The ID of the element to modify.
            attributes: A dictionary of attribute names and their values.
        """
        element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
        if element:
            element.setAttribute(attribute.key, attribute.value)


    def hyd_rdom_remove_attribute(self, mounted_comp_id: str, attribute_name: str) -> None:
        """
        DOM operation: Removes an attribute from an HTML element.

        Args:
            mounted_comp_id: The ID of the element.
            attribute_name: The name of the attribute to remove.
        """
        element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
        if element:
            element.removeAttribute(attribute_name)

    def hyd_rdom_remove_element(self, mounted_comp_id: str) -> None:
        """
        DOM operation: removes an element from the DOM

        Args:
            mounted_comp_id: str - the ID of the element to be removed
        """
        element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
        if element:
            element.parentNode.removeChild(element)


    def hyd_rdom_append_child(self, mounted_comp_id:str, child_html:str) -> None:
        """
        DOM operation: appends a child to an element

        Args:
            mounted_comp_id: str - the ID of the parent element
            child_html: str - the HTML string of the child element to be appended
        """
        element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
        if element:
            child_node = document.createElement("template")
            child_node.innerHTML = child_html
            element.appendChild(child_node.content.firstChild)

    def hyd_rdom_append_child_after(self, parent_node_id, child_node_id, child_html) -> None:
        """
        DOM operation: appends a child to an element after a specific child

        Args:
            parent_node_id: str - the ID of the parent element
            child_node_id: str - the ID of the child element to insert after
            child_html: str - the HTML string of the child element to be appended
        """
        element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{parent_node_id}"]')
        if element : # if parent exists
            child_node = document.createElement("template")
            child_node.innerHTML = child_html
            curr_node = child_node.content.firstChild
            child_index = int( child_node_id[-1])
            prev_child = child_index - 1 # child on the dom to insert the new child after it
            prev_child_id = child_node_id[:-1] + str(prev_child) # parent-childIndex
            prev_child = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{prev_child_id}"]')
            if prev_child: # insert after the current child:
                element.insertBefore(curr_node, prev_child.nextSibling)
            else: # parent is a leaf no children
                element.append(curr_node)
            pass

    def hyd_rdom_remove_child(self, child_id:str) -> None:
        """
        DOM operation: removes a child of an element

        Args:
            child_id: str - the ID of the child element to be removed
        """
        child_node = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{child_id}"]')
        if child_node:
            child_node.outerHTML = ""


    def hyd_rdom_add_text_render(self, mounted_comp_id: str, text_content: str) -> None:
        """
        DOM operation: Adds a text node to an element.

        Args:
            mounted_comp_id: str - the ID of the element to add the text node to
            text_content: str - the text content of the text node
        """
        element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
        if element:
            text_node = document.createTextNode(text_content)
            element.appendChild(text_node)


    def hyd_rdom_replace_inner_text(self, mounted_comp_id: str, new_text: str) -> None:
        """
        DOM operation: Replaces the inner text content of an element.

        Args:
            mounted_comp_id: str - the ID of the element to replace the text content of
            new_text: str - the new text content
        """
        element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
        if element:
            element.textContent = new_text

    def hyd_rdom_is_interactive(self) -> bool:
        """
        DOM operation: checks if real dom  is interactive

        Returns:
            bool - True if the DOM is interactive, False otherwise
        """
        return document.readyState == "interactive"

    def hyd_rdom_is_complete(self) -> bool:
        """
        DOM operation: checks if real dom  is complete

        Returns:
            bool - True if the DOM is complete, False otherwise
        """
        return document.readyState == "complete"

    def hyd_rdom_is_loading(self) -> bool:
        """
        DOM operation: checks if real dom  is complete

        Returns:
            bool - True if the DOM is complete, False otherwise
        """
        return document.readyState == "load"

    def hyd_rdom_is_content_loaded(self) -> bool:
        """
        DOM operation: checks if real dom  is content loaded

        Returns:
            bool - True if the DOM is content loaded, False otherwise
        """
        return document.readyState == "DOMContentLoaded"


    def hyd_rdom_toggle_pages_visibilty(self, previous_page : Page, current_page : Page ):
        """
        Toggles the visibility of the previous and current pages.

        Args:
            previous_page: Page - the previously mounted page
            current_page: Page - the currently mounted page
        """
        p_page = document.querySelector(f'[data-zenaura="{previous_page.id}"]')
        if p_page:
            p_page.hidden = True
        curr_page = document.querySelector(f'[data-zenaura="{current_page.id}"]')
        if curr_page:
            curr_page.hidden = False # Update the title

hyd_rdom_add_text_render(mounted_comp_id, text_content)

DOM operation: Adds a text node to an element.

Parameters:

Name Type Description Default
mounted_comp_id str

str - the ID of the element to add the text node to

 required
text_content str

str - the text content of the text node

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
142
143
144
145
146
147
148
149
150
151
152
153
def hyd_rdom_add_text_render(self, mounted_comp_id: str, text_content: str) -> None:
    """
    DOM operation: Adds a text node to an element.

    Args:
        mounted_comp_id: str - the ID of the element to add the text node to
        text_content: str - the text content of the text node
    """
    element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
    if element:
        text_node = document.createTextNode(text_content)
        element.appendChild(text_node)

hyd_rdom_append_child(mounted_comp_id, child_html)

DOM operation: appends a child to an element

Parameters:

Name Type Description Default
mounted_comp_id str

str - the ID of the parent element

 required
child_html str

str - the HTML string of the child element to be appended

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
def hyd_rdom_append_child(self, mounted_comp_id:str, child_html:str) -> None:
    """
    DOM operation: appends a child to an element

    Args:
        mounted_comp_id: str - the ID of the parent element
        child_html: str - the HTML string of the child element to be appended
    """
    element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
    if element:
        child_node = document.createElement("template")
        child_node.innerHTML = child_html
        element.appendChild(child_node.content.firstChild)

hyd_rdom_append_child_after(parent_node_id, child_node_id, child_html)

DOM operation: appends a child to an element after a specific child

Parameters:

Name Type Description Default
parent_node_id

str - the ID of the parent element

 required
child_node_id

str - the ID of the child element to insert after

 required
child_html

str - the HTML string of the child element to be appended

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
def hyd_rdom_append_child_after(self, parent_node_id, child_node_id, child_html) -> None:
    """
    DOM operation: appends a child to an element after a specific child

    Args:
        parent_node_id: str - the ID of the parent element
        child_node_id: str - the ID of the child element to insert after
        child_html: str - the HTML string of the child element to be appended
    """
    element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{parent_node_id}"]')
    if element : # if parent exists
        child_node = document.createElement("template")
        child_node.innerHTML = child_html
        curr_node = child_node.content.firstChild
        child_index = int( child_node_id[-1])
        prev_child = child_index - 1 # child on the dom to insert the new child after it
        prev_child_id = child_node_id[:-1] + str(prev_child) # parent-childIndex
        prev_child = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{prev_child_id}"]')
        if prev_child: # insert after the current child:
            element.insertBefore(curr_node, prev_child.nextSibling)
        else: # parent is a leaf no children
            element.append(curr_node)
        pass

hyd_rdom_attach_to_mounted_comp(mounted_comp_id, html)

DOM operation: attaches compiled_comp to mounted_comp_id

Parameters:

Name Type Description Default
mounted_comp_id str

str - the ID of the previously mounted component

 required
html str

str - the HTML string to be attached to the mounted component

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
def hyd_rdom_attach_to_mounted_comp(
        self,
        mounted_comp_id: str,
        html: str
):
    """
    DOM operation: attaches compiled_comp to mounted_comp_id

    Args:
        mounted_comp_id: str - the ID of the previously mounted component
        html: str - the HTML string to be attached to the mounted component
    """
    foundNode = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
    if foundNode:
        foundNode.outerHTML = html

hyd_rdom_attach_to_root(html)

DOM operation: attaches compiled_comp to mounted_comp_id

Parameters:

Name Type Description Default
html str

str - the HTML string to be attached to the root element

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
30
31
32
33
34
35
36
37
def hyd_rdom_attach_to_root(self, html : str) -> None:
    """
    DOM operation: attaches compiled_comp to mounted_comp_id

    Args:
        html: str - the HTML string to be attached to the root element
    """
    document.getElementById("root").innerHTML = html

hyd_rdom_create_element(virtual_node)

DOM operation: creates html element and returns it as HTMLElement

Parameters:

Name Type Description Default
virtual_node Node

Node - the virtual node representing the element to be created

 required

Returns:

Type Description
HTMLElement

HTMLElement - the created HTML element
Source code in zenaura/client/hydrator/real_dom_adapter.py 
16
17
18
19
20
21
22
23
24
25
26
27
28
def hyd_rdom_create_element(self, virtual_node: Node) -> HTMLElement:
    """
    DOM operation: creates html element and returns it as HTMLElement

    Args:
        virtual_node: Node - the virtual node representing the element to be created

    Returns:
        HTMLElement - the created HTML element
    """
    element = document.createElement(virtual_node.name)

    return element

hyd_rdom_is_complete()

DOM operation: checks if real dom is complete

Returns:

Type Description
bool

bool - True if the DOM is complete, False otherwise
Source code in zenaura/client/hydrator/real_dom_adapter.py 
177
178
179
180
181
182
183
184
def hyd_rdom_is_complete(self) -> bool:
    """
    DOM operation: checks if real dom  is complete

    Returns:
        bool - True if the DOM is complete, False otherwise
    """
    return document.readyState == "complete"

hyd_rdom_is_content_loaded()

DOM operation: checks if real dom is content loaded

Returns:

Type Description
bool

bool - True if the DOM is content loaded, False otherwise
Source code in zenaura/client/hydrator/real_dom_adapter.py 
195
196
197
198
199
200
201
202
def hyd_rdom_is_content_loaded(self) -> bool:
    """
    DOM operation: checks if real dom  is content loaded

    Returns:
        bool - True if the DOM is content loaded, False otherwise
    """
    return document.readyState == "DOMContentLoaded"

hyd_rdom_is_interactive()

DOM operation: checks if real dom is interactive

Returns:

Type Description
bool

bool - True if the DOM is interactive, False otherwise
Source code in zenaura/client/hydrator/real_dom_adapter.py 
168
169
170
171
172
173
174
175
def hyd_rdom_is_interactive(self) -> bool:
    """
    DOM operation: checks if real dom  is interactive

    Returns:
        bool - True if the DOM is interactive, False otherwise
    """
    return document.readyState == "interactive"

hyd_rdom_is_loading()

DOM operation: checks if real dom is complete

Returns:

Type Description
bool

bool - True if the DOM is complete, False otherwise
Source code in zenaura/client/hydrator/real_dom_adapter.py 
186
187
188
189
190
191
192
193
def hyd_rdom_is_loading(self) -> bool:
    """
    DOM operation: checks if real dom  is complete

    Returns:
        bool - True if the DOM is complete, False otherwise
    """
    return document.readyState == "load"

hyd_rdom_remove_attribute(mounted_comp_id, attribute_name)

DOM operation: Removes an attribute from an HTML element.

Parameters:

Name Type Description Default
mounted_comp_id str

The ID of the element.

 required
attribute_name str

The name of the attribute to remove.

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
68
69
70
71
72
73
74
75
76
77
78
def hyd_rdom_remove_attribute(self, mounted_comp_id: str, attribute_name: str) -> None:
    """
    DOM operation: Removes an attribute from an HTML element.

    Args:
        mounted_comp_id: The ID of the element.
        attribute_name: The name of the attribute to remove.
    """
    element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
    if element:
        element.removeAttribute(attribute_name)

hyd_rdom_remove_child(child_id)

DOM operation: removes a child of an element

Parameters:

Name Type Description Default
child_id str

str - the ID of the child element to be removed

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
130
131
132
133
134
135
136
137
138
139
def hyd_rdom_remove_child(self, child_id:str) -> None:
    """
    DOM operation: removes a child of an element

    Args:
        child_id: str - the ID of the child element to be removed
    """
    child_node = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{child_id}"]')
    if child_node:
        child_node.outerHTML = ""

hyd_rdom_remove_element(mounted_comp_id)

DOM operation: removes an element from the DOM

Parameters:

Name Type Description Default
mounted_comp_id str

str - the ID of the element to be removed

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
80
81
82
83
84
85
86
87
88
89
def hyd_rdom_remove_element(self, mounted_comp_id: str) -> None:
    """
    DOM operation: removes an element from the DOM

    Args:
        mounted_comp_id: str - the ID of the element to be removed
    """
    element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
    if element:
        element.parentNode.removeChild(element)

hyd_rdom_replace_inner_text(mounted_comp_id, new_text)

DOM operation: Replaces the inner text content of an element.

Parameters:

Name Type Description Default
mounted_comp_id str

str - the ID of the element to replace the text content of

 required
new_text str

str - the new text content

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
156
157
158
159
160
161
162
163
164
165
166
def hyd_rdom_replace_inner_text(self, mounted_comp_id: str, new_text: str) -> None:
    """
    DOM operation: Replaces the inner text content of an element.

    Args:
        mounted_comp_id: str - the ID of the element to replace the text content of
        new_text: str - the new text content
    """
    element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
    if element:
        element.textContent = new_text

hyd_rdom_set_attribute(mounted_comp_id, attribute)

DOM operation: Sets attributes on an HTML element.

Parameters:

Name Type Description Default
mounted_comp_id str

The ID of the element to modify.

 required
attributes

A dictionary of attribute names and their values.

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
55
56
57
58
59
60
61
62
63
64
65
def hyd_rdom_set_attribute(self, mounted_comp_id: str, attribute: Attribute) -> None:
    """
    DOM operation: Sets attributes on an HTML element.

    Args:
        mounted_comp_id: The ID of the element to modify.
        attributes: A dictionary of attribute names and their values.
    """
    element = document.querySelector(f'[{ZENAURA_DOM_ATTRIBUTE}="{mounted_comp_id}"]')
    if element:
        element.setAttribute(attribute.key, attribute.value)

hyd_rdom_toggle_pages_visibilty(previous_page, current_page)

Toggles the visibility of the previous and current pages.

Parameters:

Name Type Description Default
previous_page Page

Page - the previously mounted page

 required
current_page Page

Page - the currently mounted page

 required
Source code in zenaura/client/hydrator/real_dom_adapter.py 
205
206
207
208
209
210
211
212
213
214
215
216
217
218
def hyd_rdom_toggle_pages_visibilty(self, previous_page : Page, current_page : Page ):
    """
    Toggles the visibility of the previous and current pages.

    Args:
        previous_page: Page - the previously mounted page
        current_page: Page - the currently mounted page
    """
    p_page = document.querySelector(f'[data-zenaura="{previous_page.id}"]')
    if p_page:
        p_page.hidden = True
    curr_page = document.querySelector(f'[data-zenaura="{current_page.id}"]')
    if curr_page:
        curr_page.hidden = False # Update the title