def write(element_id, value, append=False, exec_id=0):
"""Writes value to the element with id "element_id"""
console.log(f"APPENDING: {append} ==> {element_id} --> {value}")
if append:
child = document.createElement('div');
element = document.querySelector(f'#{element_id}');
if not element:
return
exec_id = exec_id or element.childElementCount + 1
element_id = child.id = f"{element_id}-{exec_id}";
element.appendChild(child);
element = document.getElementById(element_id)
html, mime_type = format_mime(value)
if mime_type in ('application/javascript', 'text/html'):
scriptEl = document.createRange().createContextualFragment(html)
element.appendChild(scriptEl)
else:
element.innerHTML = html
def __init__(self, root: Type[Component], selector: str) -> None:
# Gather all components that are defined in the global space
self.components = {
component.tag: component
for component in list([
value for value in globals().values()
if isinstance(value, type) and issubclass(value, Component)
and value.__name__ != "Component"
])
}
# Gather all the CSS
self.css = []
for component in self.components.values():
if component.css != "":
# Scope the CSS by prefixing it with the component tag
css = re.sub(
r"([^\r\n,{}\s]+)(,(?=[^}]*{)|\s*{)",
f"{component.tag} \\1 {{",
component.css,
)
lines = list(
[line for line in css.split("\n") if line.rstrip() != ""])
self.css.append("\n".join(lines))
# Add the CSS to the head of the document
styleElement = document.createElement("style")
styleElement.type = "text/css"
styleElement.innerHTML = "\n".join(self.css)
document.head.appendChild(styleElement)
# Create the root component
self.root = root(dom=self)
self.previous_tree = None
self.state = State(dom=self)
# Find the root element in the document
self.element = document.querySelector(selector)
# Render the DOM, starting from the root component
self.render()
def element(self):
"""Return the dom element"""
if not self._element:
self._element = document.querySelector(f'#{self._id}');
return self._element
def query_selector(self, query: str):
return document.querySelector(
f'{self.tag}[identifier="{self.identifier}"] {query}')
def get_element_by_id(self, identifier: str) -> JsProxy:
return document.querySelector(
f'{self.tag}[identifier="{self.identifier}"] #{identifier}')