Client side works!

Author: apiad

examples/hello_world.py

@@ -38,4 +38,4 @@ def index():
 
 # 4. Run the Server
 # Ensure you have installed server deps: uv add --extra server "fastapi[standard]"
-app.run(port=8000)
+app.run()

examples/simple_client.py

@@ -0,0 +1,41 @@
+from violetear import App
+from violetear.markup import Document, Element
+
+# 1. Initialize the App
+app = App(title="Interactive Python Demo")
+
+
+# 2. Define Client-Side Code
+# This function is compiled into the bundle and sent to the browser.
+@app.client
+def on_button_click(event):
+    # This print shows up in the Browser DevTools Console!
+    print("Hello from Client-Side Python!")
+
+    # You can even use the Pyodide/JS bridge
+    from js import alert
+    alert("It works! Python is running in your browser.")
+
+
+# 3. Define Server-Side Route
+@app.route("/")
+def home():
+    doc = Document(title="Client-Side Demo")
+
+    # 4. Build the UI
+    # We create a button and attach the Python function directly.
+    btn = (
+        Element("button", text="Click Me!")
+        .on("click", on_button_click)  # <--- The Magic Link
+    )
+
+    doc.body.extend(
+        Element("h1", text="Violetear Full-Stack Demo"),
+        Element("p", text="Open your browser console (F12) and click the button."),
+        btn
+    )
+
+    return doc
+
+
+app.run()

violetear/app.py

@@ -1,5 +1,7 @@
 import os
 import inspect
+from pathlib import Path
+from textwrap import dedent
 from typing import Any, Callable, Dict, List, Union
 
 
@@ -43,7 +45,20 @@ def __init__(self, title: str = "Violetear App"):
         # Registry of served styles to prevent duplicate route registration
         self.served_styles: Dict[str, StyleSheet] = {}
 
-    def add_style(self, path: str, sheet: StyleSheet):
+        # Registry for client-side functions
+        self.client_functions: Dict[str, Callable] = {}
+
+        # Register the Bundle Route (Dynamic Python file)
+        @self.api.get("/_violetear/bundle.py")
+        def get_bundle():
+            return Response(content=self._generate_bundle(), media_type="text/x-python")
+
+    def client(self, func: Callable):
+        """Decorator to mark a function to be compiled to the client."""
+        self.client_functions[func.__name__] = func
+        return func
+
+    def style(self, path: str, sheet: StyleSheet):
         """
         Registers a stylesheet to be served by the app at a specific path.
 
@@ -70,7 +85,50 @@ def _register_document_styles(self, doc: Document):
             if isinstance(resource, StyleResource):
                 # If it has a sheet object AND a URL, it needs to be served
                 if resource.sheet and resource.href and not resource.inline:
-                    self.add_style(resource.href, resource.sheet)
+                    self.style(resource.href, resource.sheet)
+
+    def _generate_bundle(self) -> str:
+        """
+        Generates the Python bundle to run in the browser.
+        It combines the runtime logic + user functions.
+        """
+        # 1. Mock the 'app' object so decorators don't fail in the browser
+        header = "class MockApp:\n    def client(self, f): return f\n\napp = MockApp()\n\n"
+
+        # 2. Read the Client Runtime (Hydration logic)
+        runtime_path = Path(__file__).parent / "client.py"
+
+        with open(runtime_path, "r") as f:
+            runtime_code = f.read()
+
+        # 3. Extract User Functions
+        user_code = []
+
+        for name, func in self.client_functions.items():
+            user_code.append(inspect.getsource(func))
+
+        # 4. Initialization
+        init_code = "\n\n# --- Init ---\n\nhydrate(globals())\n"
+
+        return header + runtime_code + "\n\n" + "\n".join(user_code) + init_code
+
+    def _inject_client_side(self, doc: Document):
+        """Injects Pyodide and the Bundle bootstrapper."""
+        # 1. Load Pyodide
+        doc.script(src="https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js")
+
+        # 2. Bootstrap Script
+        bootstrap = dedent("""
+        async function main() {
+            let pyodide = await loadPyodide();
+            let response = await fetch("/_violetear/bundle.py");
+            let code = await response.text();
+            await pyodide.runPythonAsync(code);
+        }
+        main();
+        """)
+
+        doc.script(content=bootstrap)
 
     def route(self, path: str, methods: List[str] = ["GET"]):
         """
@@ -97,9 +155,13 @@ async def wrapper(request: Request):
 
                 # 2. Handle Document Rendering
                 if isinstance(response, Document):
-                    # JIT: Check if this doc uses any new stylesheets we need to serve
+                    # Check if this doc uses any new stylesheets we need to serve
                     self._register_document_styles(response)
 
+                    # Check if this document contains Python bindings
+                    if response.body.has_bindings():
+                        self._inject_client_side(response)
+
                     # Render the HTML (which will contain <link href="..."> tags)
                     return HTMLResponse(response.render())
 

violetear/client.py

@@ -1,27 +1,66 @@
 """
 Violetear Client Runtime.
-This code is intended to run inside the browser via Pyodide.
+This code runs inside the browser (Pyodide) to bring the static HTML to life.
 """
 
 import sys
 
-# Simple check to ensure we don't accidentally run this on the server
+# We define IS_BROWSER to avoid import errors if this is imported on the server
 IS_BROWSER = "pyodide" in sys.modules or "emscripten" in sys.platform
 
 
 def hydrate(namespace: dict):
     """
-    Scans the DOM for data-py-on-* attributes and binds the
-    corresponding functions from the provided namespace.
+    Scans the DOM for Violetear interactive elements and binds them to
+    Python functions found in the provided namespace.
+
+    Args:
+        namespace: A dictionary mapping function names to callables.
+                   Typically, you pass `globals()` here from your client script.
     """
     if not IS_BROWSER:
-        return
+        raise TypeError("Hydration called outside of browser environment. Skipping.")
+
+    from js import document
+    from pyodide.ffi import create_proxy
+
+    # We explicitly scan for common events.
+    # In the future, we could inspect the DOM more aggressively or use a MutationObserver.
+    supported_events = [
+        "click", "change", "input", "submit",
+        "keydown", "keyup", "mouseenter", "mouseleave"
+    ]
+
+    bound_count = 0
+
+    for event_name in supported_events:
+        # The markup generates attributes like: data-py-on-click="my_func"
+        attr = f"data-on-{event_name}"
+        selector = f"[{attr}]"
+
+        elements = document.querySelectorAll(selector)
+
+        for element in elements:
+            handler_name = element.getAttribute(attr)
+
+            if handler_name in namespace:
+                handler_func = namespace[handler_name]
+
+                # 1. Create a Pyodide Proxy
+                # We wrap the python function so JS can call it safely.
+                # 'create_proxy' ensures the function isn't garbage collected immediately.
+                proxy = create_proxy(handler_func)
+
+                # 2. Bind the Listener
+                # We attach the Python proxy directly to the JS event listener
+                element.addEventListener(event_name, proxy)
+
+                # 3. Cleanup (Optional)
+                # We remove the data attribute so we don't double-bind if hydrate is called again
+                element.removeAttribute(attr)
 
-    from js import document  # type: ignore
+                bound_count += 1
+            else:
+                print(f"[Violetear] Warning: Function '{handler_name}' not found for event '{event_name}'")
 
-    # Phase 3 Implementation placeholder:
-    # 1. Query Selector for [data-py-on-*]
-    # 2. Extract event name and function name
-    # 3. Look up function in `namespace`
-    # 4. element.addEventListener(...)
-    pass
+    print(f"[Violetear] Hydrated {bound_count} interactive elements.")

violetear/markup.py

@@ -111,6 +111,32 @@ def attrs(self, **attrs) -> Element:
         self._attrs.update(attrs)
         return self
 
+    def on(self, event: str, handler: Callable) -> Self:
+        """
+        Binds a python function to a DOM event.
+        Serializes the function name to a data attribute.
+        """
+        if not hasattr(handler, "__name__"):
+            raise ValueError("Event handler must be a named function")
+
+        # We store it as a special attribute for the client runtime to find
+        self._attrs[f"data-on-{event}"] = handler.__name__
+        return self
+
+    def has_bindings(self) -> bool:
+        """Checks if this element or any child has a Python event binding."""
+        # Check self
+        for key in self._attrs:
+            if key.startswith("data-on-"):
+                return True
+
+        # Check children
+        for child in self._content:
+            if isinstance(child, Element) and child.has_bindings():
+                return True
+
+        return False
+
     def _render(self, fp, indent: int):
         parts = [self._tag]
 
@@ -243,6 +269,18 @@ class StyleResource:
     inline: bool = False
 
 
+@dataclass
+class ScriptResource:
+    """
+    Represents a JS script resource.
+    """
+
+    src: str | None = None
+    content: str | None = None
+    defer: bool = False
+    module: bool = False
+
+
 class Document(Markup):
     def __init__(self, lang: str = "en", **head_kwargs) -> None:
         self.lang = lang
@@ -274,6 +312,20 @@ def style(
 
         return self
 
+    def script(
+        self,
+        src: str | None = None,
+        content: str | None = None,
+        defer: bool = False,
+        module: bool = False,
+    ) -> Document:
+        self.head.scripts.append(
+            ScriptResource(
+                src, textwrap.dedent(content) if content else None, defer, module
+            )
+        )
+        return self
+
     def _render(self, fp, indent: int):
         self._write_line(fp, "<!DOCTYPE html>")
         self._write_line(fp, f'<html lang="{self.lang}">')
@@ -287,6 +339,7 @@ def __init__(self, charset: str = "UTF-8", title: str = "") -> None:
         self.charset = charset
         self.title = title
         self.styles: list[StyleResource] = []
+        self.scripts: list[ScriptResource] = []
 
     def _render(self, fp, indent: int):
         self._write_line(fp, "<head>", indent)
@@ -301,19 +354,36 @@ def _render(self, fp, indent: int):
         )
         self._write_line(fp, f"<title>{self.title}</title>", indent + 1)
 
-        for resource in self.styles:
-            if resource.inline and resource.sheet:
+        for style in self.styles:
+            if style.inline and style.sheet:
                 # Render Inline
                 self._write_line(fp, "<style>", indent + 1)
-                resource.sheet.render(fp)
+                self._write_line(fp, style.sheet.render(), indent + 1)
                 self._write_line(fp, "</style>", indent + 1)
 
-            elif resource.href:
+            elif style.href:
                 # Render Link
                 self._write_line(
-                    fp, f'<link rel="stylesheet" href="{resource.href}">', indent + 1
+                    fp, f'<link rel="stylesheet" href="{style.href}">', indent + 1
                 )
 
+        for script in self.scripts:
+            if script.src:
+                # External script
+                attrs = f'src="{script.src}"'
+                if script.defer:
+                    attrs += " defer"
+                if script.module:
+                    attrs += ' type="module"'
+                self._write_line(fp, f"<script {attrs}></script>", indent + 1)
+
+            elif script.content:
+                # Inline script
+                attrs = ' type="module"' if script.module else ""
+                self._write_line(fp, f"<script{attrs}>", indent + 1)
+                self._write_line(fp, script.content, indent + 1)
+                self._write_line(fp, "</script>", indent + 1)
+
         self._write_line(fp, "</head>", indent)