#!/usr/bin/env python3 """ Example Ritz Application This actually runs in Python! """ from framework import ( component, signal, render, Main, Div, P, Button, Label, H1, H2, Article, Header, Section, Footer, Span, Strong, Em, Time ) @component def HighFiveApp(): """Simple counter example""" high_fives = signal(0) def increment(): high_fives += 1 print(f"High fives incremented to: {high_fives.value}") with Main(): yield H1('High Five Counter') yield P('Give me a high 5 bro!') yield Label(f'High fives: {high_fives}') yield Button('Click me', onclick=increment) @component def Comment(author: str, text: str, replies=None): """Nested comment component""" with Div(class_='comment'): with Div(class_='comment-header'): yield Strong(author) yield ' says:' with Div(class_='comment-body'): yield text if replies: with Div(class_='replies'): for reply in replies: yield reply @component def BlogPost(title: str, author: str, content: str): """Complex component with mixed content""" with Article(class_='blog-post'): with Header(): yield H1(title) yield 'By ' # Raw string! yield Span(author, class_='author') yield ' on ' yield Time('2024-01-15') with Section(class_='content'): yield P(content) yield H2('Comments') # Nested components with yield yield Comment( 'Alice', 'Great post! This yield syntax is brilliant.', replies=[ Comment('Bob', 'I agree! So Pythonic.'), Comment('Charlie', 'Can\'t wait to see the WASM output.') ] ) yield Comment( 'Dave', 'How does this compare to React performance-wise?' ) @component def TodoItem(text: str, completed: signal): """Todo item with reactive state""" def toggle(): completed.value = not completed.value print(f"Todo '{text}' toggled to: {completed.value}") with Div(class_='todo-item'): checkbox_props = {'type': 'checkbox', 'onclick': toggle} if completed.value: checkbox_props['checked'] = 'checked' # Note: In real implementation, Input would be a special element # For now we just demonstrate the pattern yield Div(f'[{"✓" if completed.value else " "}] {text}', class_='todo-checkbox', onclick=toggle) @component def TodoApp(): """Todo list with multiple signals""" todos = [ ('Build parser', signal(False)), ('Implement WASM compiler', signal(False)), ('Create reactive runtime', signal(False)), ('Optimize DOM bridge', signal(False)) ] with Div(class_='todo-app'): yield H1('Ritz Framework TODO') for text, completed in todos: yield TodoItem(text, completed) with Footer(): completed_count = sum(1 for _, c in todos if c.value) yield P(f'Completed: {completed_count}/{len(todos)}') def main(): """Run examples and show output""" print("=" * 60) print("RITZ FRAMEWORK - Python Prototype") print("=" * 60) print("\n### Example 1: High Five Counter ###") render(HighFiveApp) print("\n" + "=" * 60) print("\n### Example 2: Blog Post with Comments ###") render(BlogPost, title="Introducing Ritz Framework", author="Aaron", content="A new approach to web frameworks: Python syntax that compiles to WASM!") print("\n" + "=" * 60) print("\n### Example 3: Todo App ###") render(TodoApp) print("\n" + "=" * 60) print("\nThis is actual Python running in CPython!") print("In production, this would compile to WebAssembly.") print("The same code runs in both environments!") if __name__ == '__main__': main()