ritz/archive/example.py

#!/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()