Fix nested components - render functions now return i32

Changes:
- Component render functions return i32 (root element) instead of void
- Nested components (yield SomeComponent()) now work correctly
- Added main() entry point that calls top-level component and sets root
- Updated runtime to call main() instead of render_ComponentName()

Note: Active state in ternary expressions still needs reactive updates
This commit fixes the nested component rendering issue

All tests passing (51 passed, 2 skipped)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Aaron SinclairandClaude committed 2025-11-15 11:16:23 -08:00
1 parent adf95f424d
commit b0e38db22c
26 files changed
+2310 -1222

No files matched your search

+70
View File
@@ -0,0 +1,70 @@
"""
Cleaner Tabs implementation using wrapper components to reduce repetition.
"""
from ritz.syntax import *
@component
def VerticalTab(label, is_active, tab_value):
"""Reusable vertical tab button with active state handling."""
# Note: In current implementation, we still need the if/else for class
# But it's encapsulated in one place instead of repeated everywhere
if is_active:
with Button(class_="vertical-tab active"):
yield label
else:
with Button(class_="vertical-tab"):
yield label
@component
def VerticalTabs():
"""Vertical tabs for settings categories."""
setting_tab = signal(0)
def set_setting(value):
setting_tab = value
with Div(class_="vertical-tabs"):
# Vertical tab menu
with Div(class_="vertical-tab-menu"):
# Now each tab is just one line instead of 6!
yield VerticalTab("⚙️ General", setting_tab == 0, 0)
yield VerticalTab("🔒 Privacy", setting_tab == 1, 1)
yield VerticalTab("🚀 Advanced", setting_tab == 2, 2)
# Tab content (same as before)
with Div(class_="vertical-tab-content"):
match setting_tab:
case 0:
with Div(class_="setting-pane"):
with H3():
yield "⚙️ General Settings"
with P():
yield "Language: English"
with P():
yield "Time Zone: UTC"
case 1:
with Div(class_="setting-pane"):
with H3():
yield "🔒 Privacy Settings"
with P():
yield "Data Collection: Disabled"
with P():
yield "Analytics: Opt-out"
case 2:
with Div(class_="setting-pane"):
with H3():
yield "🚀 Advanced Settings"
with P():
yield "Debug Mode: Off"
with P():
yield "Experimental Features: Disabled"
case _:
with Div(class_="setting-pane"):
with P():
yield "Invalid setting"