HTeaLeaf 0.3.0__py3-none-any.whl

HTeaLeaf/Html/Component.py

@@ -0,0 +1,219 @@
+import hashlib
+import json
+from typing import Any, List, Union
+
+from ..Magic.jslib.JSCode import JSCode
+
+
+class Component:
+    """
+    Represents an HTML component with attributes, children, and optional inline styles.
+    This class allows constructing HTML elements programmatically and managing CSS styles.
+    """
+
+    def __init__(self, name, *childs: Union[str, List[Any], "Component", "JSCode"]) -> None:
+        """
+        Initializes a new Component instance.
+
+        :param name: The tag name of the HTML element.
+        :param childs: Optional children elements, which can be strings, lists, or other Component instances.
+        """
+
+        self.styles: str | None = None
+        self.name = name
+        self.children: list[Component | str | list | JSCode] = list(childs)
+        self.attributes: dict[str, str | None] = dict()
+        self._id: str = self._generate_id()
+
+    def _generate_id(self) -> str:
+        """Genera un ID determinista basado en el contenido del componente."""
+        content = {
+            "name": self.name,
+            "children": [
+                child._id if isinstance(child, Component) else str(child)
+                for child in self.children
+            ]
+        }
+        raw = json.dumps(content, sort_keys=True)
+        hash_str = hashlib.md5(raw.encode()).hexdigest()[:12]
+        return f"tl-{hash_str}"
+
+    def id(self, id: str):
+        """
+        Sets the ID of the component and adds it as an attribute.
+
+        :param id: The ID to assign.
+        :return: The component instance (for method chaining).
+        """
+
+        self._id = id
+        return self.attr(id=id)
+
+    def classes(self, classes):
+        """
+        Adds a CSS class attribute to the component.
+
+        :param classes: CSS class names (space-separated).
+        :return: The component instance (for method chaining).
+        """
+
+        self.attributes["class"] = classes
+        return self
+
+    def style(self, path: str | None = None, **attr):
+        """
+        Adds inline styles to the component.
+
+        :param path: Optional path to an external CSS file.
+        :param attr: CSS properties to apply (e.g., color="red", margin="10px").
+        :return: The component instance (for method chaining).
+        """
+
+
+        self.styles = (self.styles or "") + f"#{self._id} {{\n"
+        self.styles += "\n".join(
+            f"  {k.replace('_', '-')}: {v};" for k, v in attr.items()
+        )
+        self.styles += "\n}\n"
+
+        if path:
+            with open(path, "r") as f:
+                self.styles += f.read()
+        return self
+
+    def attr(self,*args, **attr):
+        """
+        Adds custom attributes to the component.
+
+        :param attr: Dictionary of attribute names and values.
+        :return: The component instance (for method chaining).
+        """
+
+        for arg in args:
+            self.attributes[arg] = None
+
+        for k in attr:
+            # if type(attr[k]) is str:
+            value = attr[k]
+            # if isinstance(value, JSCode):
+            #     value = f"{{{{{str(value)}}}}}"
+            self.attributes[k] = value
+            # elif type(attr[k]) is FunctionType:
+            #     py_f = inspect.getsource(attr[k])
+            #     self.attributes[k] = f"""() => pyodide.runPython(`{py_f}`)"""
+
+        return self
+
+    def append(self, child: Union[str, "Component", list]):
+        """
+        Appends a child element to the component.
+
+        :param child: A Component, string, or list of elements.
+        :return: The component instance (for method chaining).
+        """
+
+        self.children.append(child)
+        return self
+
+    def prepend(self, child: Union[str, "Component", list]):
+        """
+        Prepends a child element to the component.
+
+        :param child: A Component, string, or list of elements.
+        :return: The component instance (for method chaining).
+        """
+
+        self.children.insert(0, child)
+        return self
+
+    def __build_attr__(self) -> str:
+        return " " + " ".join(
+            f"{k}='{v}'" if v is not None else f"{k}" for k, v in self.attributes.items()
+        )
+
+    def __build_child__(self, children: list):
+        html_parts = []
+        css_parts = []
+        for child in children:
+            if isinstance(child, str):
+                html_parts.append(f"{child}")
+            elif isinstance(child, list):
+                html, css = self.__build_child__(child)
+                html_parts.append(html)
+                css_parts.append(css)
+            elif isinstance(child, Component):
+                html, css = child.build()
+                html_parts.append(html)
+                css_parts.append(css)
+            # elif isinstance(child, JSDO):
+            #     print(f"JSCode: {child().raw}")
+            #     html_parts.append(f"{{{{{child().raw}}}}}")
+            elif isinstance(child, JSCode):
+                # JSCode outside of an attribute should be a special tag {{jscode_name}}
+                print(f"JSCode: {child.raw}")
+                html_parts.append(f"{{{{{child.raw}}}}}")
+            else:
+                try:
+                    html_parts.append(str(child))
+                except Exception:
+                    continue
+        return "".join(html_parts), "".join(filter(None, css_parts))
+
+    def build(self) -> tuple[str, str]:
+        """
+        Builds the component's HTML and CSS separately.
+
+        :return: A tuple (HTML string, CSS string)
+        """
+
+        if self.styles is not None and "id" not in self.attributes:
+            self.attr(id=self._id)
+        if len(self.children) == 0:
+            result = f"<{self.name}{self.__build_attr__()}/>\n"
+        else:
+            endln = "\n" if len(self.children) > 1 else ""
+            result = f"<{self.name}{self.__build_attr__()}>{endln}"
+            html, styles = self.__build_child__(self.children)
+            result += html
+            if self.styles is None:
+                self.styles = styles
+            else:
+                self.styles += styles
+            result += f"\t</{self.name}>\n"
+        css: str = "" if self.styles is None else self.styles
+        return result, css
+
+    def render(self) -> str:
+        """
+        Builds and returns the full HTML including inline CSS inside a <style> tag.
+
+        :return: A complete HTML string with embedded CSS.
+        """
+
+        if len(self.children) == 0:
+            result = f"<{self.name}{self.__build_attr__()}/>\n"
+        else:
+            inner_result, css = self.__build_child__(self.children)
+            if self.styles is None:
+                self.styles = css
+            else:
+                self.styles += css
+                self.styles += "\n"
+            result = f"<{self.name}{self.__build_attr__()}>\n"
+            if self.styles is not None:
+                result += f"<style>{self.styles}</style>\n"
+            result += inner_result
+            result += f"</{self.name}>\n"
+
+        return result
+
+
+class ComponentMeta(type):
+    def __new__(cls, name, bases, dct):
+        if name not in ("Component", "ComponentMeta"):
+
+            def init(self, *childs):
+                super(self.__class__, self).__init__(name, *childs)
+
+            dct["__init__"] = init
+        return super().__new__(cls, name, bases, dct)

HTeaLeaf/Html/Elements.py

@@ -0,0 +1,137 @@
+from types import FunctionType
+from typing import Any, List, Union
+
+from HTeaLeaf.Magic.jslib import JSCode, JSFunction, js
+
+from .Component import Component, ComponentMeta
+
+
+class html(Component, metaclass=ComponentMeta):
+    pass
+
+class head(Component, metaclass=ComponentMeta):
+    pass
+
+class header(Component, metaclass=ComponentMeta):
+    pass
+
+class link(Component, metaclass=ComponentMeta):
+    def __init__(self, *childs):
+        super().__init__("link", *childs)
+
+
+class script(Component):
+    def __init__(self, *childs: Union[str, List[Any], "Component", JSFunction] ,src=None):
+        parsed_childs: Union[str, List[Any], "Component"] = []
+        for child in childs:
+            if type(child) is FunctionType:
+                parsed_childs.append(js(child))
+            elif type(child) is JSFunction:
+                parsed_childs.append(child)
+            else:
+                parsed_childs.append(child)
+        super().__init__("script", *parsed_childs)
+        self.unsafe = True
+        if src is not None:
+            self.attr(src=src)
+            self.children = [""]
+        # else:
+
+
+
+class style(Component, metaclass=ComponentMeta):
+    pass
+
+
+class body(Component, metaclass=ComponentMeta):
+    pass
+
+
+class h1(Component, metaclass=ComponentMeta):
+    pass
+
+
+class h2(Component, metaclass=ComponentMeta):
+    pass
+
+
+class h3(Component, metaclass=ComponentMeta):
+    pass
+
+
+class div(Component, metaclass=ComponentMeta):
+    pass
+
+    def row(self):
+        self.attr(style="display: flex; flex-direction: row")
+        return self
+
+    def column(self):
+        self.attr(style="display: flex; flex-direction: column")
+        return self
+
+
+class button(Component, metaclass=ComponentMeta):
+
+    def reactive(self,path,component_id):
+        """
+        Makes the button reactive by linking it to a FetchComponent.
+
+        :param path: The URL to fetch new data from when clicked.
+        :param component: The FetchComponent to be updated.
+        """
+
+        js = f"""fetchAndUpdate('{path}','{{}}','{component_id}')"""
+        self.attr(onclick=js)
+        return self
+
+
+
+class label(Component, metaclass=ComponentMeta):
+    pass
+
+class checkbox(Component):
+    def __init__(self,checked = False, *childs):
+        super().__init__("input", *childs)
+        self.attr(type="checkbox")
+        if checked:
+            self.attr(checked="True")
+
+class textInput(Component):
+    def __init__(self, *childs):
+        super().__init__("input", *childs)
+
+class select(Component):
+    def __init__(self, items: List[str]):
+        super().__init__("select")
+        for item in items:
+            self.append(option(item))
+
+class option(Component):
+    def __init__(self, value):
+        super().__init__("option", value)
+        self.attr(value=value)
+
+
+class submit(Component):
+    def __init__(self, *childs):
+        super().__init__("input", *childs)
+        self.attr(type="submit")
+
+class form(Component):
+    def __init__(self, *childs):
+        super().__init__("form", *childs)
+
+    def action(self, action):
+        self.attr(action=action)
+        return self
+
+    def method(self, method):
+        self.attr(method=method)
+        return self
+
+def tl_if(condition: JSCode | str | bool, *childs):
+    if isinstance(condition, str):
+        condition = JSCode(condition)
+
+    return div(*childs).attr(style=f"display: {condition};")

HTeaLeaf/Html/__init__.py

@@ -0,0 +1,2 @@
+# from .Elements import *
+# from .Component import Component

HTeaLeaf/Magic/HelperMidleware.py

@@ -0,0 +1,13 @@
+from ..Html.Component import Component
+from ..Html.Elements import script
+from ..Server.Server import Server, ServerEvent
+
+
+def enable_reactivity(server: Server):
+    helper_script = script(src="_engine/helper.js")
+
+    def event_handler(res_code, res_body, res_headers):
+        if isinstance(res_body, Component):
+            res_body.prepend(helper_script)
+
+    server.registry_hook(ServerEvent.on_response, event_handler)

HTeaLeaf/Magic/LocalState.py

@@ -0,0 +1,38 @@
+import hashlib
+import inspect
+import json
+
+from HTeaLeaf.Html.Elements import script
+
+from ..Magic.jslib.JSCode import JSCode
+from ..Magic.jslib.JSDO import JSDO
+
+# class localState():
+#     def __init__(self, init_state):
+#         self.do = JSDO("LocalState",init_state)
+
+#     def
+
+#     def js(self):
+#         return self.do.js()
+
+#     def get(self):
+#         return self.do.get()
+
+#     def set(self, data):
+#         return self.do.set(data)
+
+
+
+def use_state(init_state):
+    frame = inspect.stack()[1]
+    site = f"{frame.filename}:{frame.lineno}"
+    raw = f"{site}:{json.dumps(init_state, sort_keys=True)}"
+    id = hashlib.md5(raw.encode()).hexdigest()[:12]
+    name = f"localstate_{id}"
+
+    def new():
+        return script(f"const {name} = new LocalState({json.dumps(init_state, sort_keys=True)},\"{name}\");")
+
+
+    return new, JSCode(name)

HTeaLeaf/Magic/MagicComponent.py

@@ -0,0 +1,122 @@
+import json
+import os
+import uuid
+from typing import Any
+
+from ..Html.Component import Component
+from ..Html.Elements import div, script
+
+
+class FetchComponent(Component):
+    """
+    A component that fetches data from a given URL and updates its content dynamically.
+    """
+
+    def __init__(self, url, body: str | dict | None = None) -> None:
+        """
+        Initializes a FetchComponent that loads content asynchronously.
+
+        :param url: The URL to fetch data from.
+        :param body: Optional request body for POST requests.
+        """
+
+        self._reid = new_id()
+        placeholder = div("Loading...").id(self._reid)
+        super().__init__("div", placeholder)
+        # Configuración de la petición
+        config = {"method": "POST" if body is not None else "GET", "body": body }
+        # Serializar la configuración en JSON para JS
+        _js_file = os.path.dirname(__file__) + "/MagicComponent.js"
+        url = json.dumps(url)
+        config_js = json.dumps(config)
+        _id = json.dumps(placeholder._id)
+        js: str = f"fetchAndUpdate({url},{config_js},{placeholder._id})"
+
+        self.append(script(js))
+
+    def reid(self):
+        """
+        Returns the reactive ID of the component.
+        """
+
+        return self._reid
+
+class rButton(Component):
+    """
+    A reactive button that triggers updates on FetchComponents.
+    """
+
+    def __init__(self, *childs):
+        """
+        Initializes an rButton.
+
+        :param childs: The child elements (text or components) inside the button.
+        """
+        super().__init__("button", *childs)
+
+    def reactive(self,path,component: FetchComponent):
+        """
+        Makes the button reactive by linking it to a FetchComponent.
+
+        :param path: The URL to fetch new data from when clicked.
+        :param component: The FetchComponent to be updated.
+        """
+
+        #config = {"method": "GET"}
+        if not hasattr(component, "reid"):
+            raise Exception("component is not reactive")
+        id = component.reid()
+        # Serializar la configuración en JSON para JS
+        #config_js = json.dumps(config)
+        js = f"""fetchAndUpdate('{path}','{{}}','{id}')"""
+        self.attr(onclick=js)
+        return self
+
+    #def refresh(self, path)
+
+class HydratedComponent(Component):
+    """
+    WIP🚧
+    A component that supports server-side hydration for dynamic updates.
+    """
+
+    def __init__(self, *childs):
+        """
+        Initializes a HydratedComponent.
+
+        :param childs: The child elements inside the component.
+        """
+
+        pass
+
+
+class PoolComponent(Component):
+    """
+    WIP🚧
+    A component that periodically fetches data from a URL and updates itself.
+    """
+
+    def __init__(self, child: Component, url: str, interval: int = 5000):
+        """
+        Initializes a PoolComponent.
+
+        :param child: The component to be updated.
+        :param url: The URL from which new data will be fetched.
+        :param interval: The time interval (in milliseconds) for polling updates. Default is 5000ms.
+        """
+        super().__init__("div", child)
+        js = f"""
+        setInterval(() => fetchAndUpdate('{url}', '{{}}', '{child._id}'), {interval});
+        """
+        self.append(script(js))
+
+
+def new_id():
+    """
+    Generates a new unique identifier for reactive components.
+    """
+    return "tlmg" + str(uuid.uuid4()).split("-")[0]
+
+
+def to_js_type(data: Any) -> str:
+    return json.dumps(data)