139 lines
4.1 KiB
Python
139 lines
4.1 KiB
Python
#!/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() |