Fix tabs onclick handlers by inlining components

**Problem:**
- HTab/VTab components received onclick as a parameter
- When binding events, codegen used parameter name "onclick" instead of actual function
- Runtime couldn't find handler function in WASM exports

**Root Cause:**
We don't support passing functions as component parameters yet. When a child
component uses onclick=onclick where onclick is a parameter, we bind the
string "onclick" instead of tracking which function was actually passed.

**Fix:**
Inlined HTab and VTab components back into parent components. Now lambdas
are directly on Button elements, so they generate proper synthetic handlers
(_lambda_0_Tabs, _lambda_1_Tabs, etc.) that get exported.

**Result:**
✅ All tab click handlers now work
✅ Handlers exported: _lambda_0_Tabs, _lambda_1_Tabs, _lambda_2_Tabs,
   _lambda_0_VerticalTabs, _lambda_1_VerticalTabs, _lambda_2_VerticalTabs

**TODO:**
Implement function pointers/delegates as component parameters to restore
component reusability (tracked in TYPE_SYSTEM_ROADMAP.md)

🤖 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 14:41:53 -08:00
1 parent e1219ea0c1
commit d8a2e28fd5
3 files changed
+537 -350

No files matched your search

+513 -342
View File
File diff suppressed because it is too large. Load diff
+24 -8
View File
@@ -49,11 +49,19 @@ def VerticalTabs():
setting_tab = value
with Div(class_="vertical-tabs"):
# Vertical tab menu - using reusable VTab component!
# Vertical tab menu - inlined until we support function params
with Div(class_="vertical-tab-menu"):
yield VTab(label="⚙️ General", active=setting_tab == 0, onclick=lambda: set_setting(0))
yield VTab(label="🔒 Privacy", active=setting_tab == 1, onclick=lambda: set_setting(1))
yield VTab(label="🚀 Advanced", active=setting_tab == 2, onclick=lambda: set_setting(2))
with Button(class_='vertical-tab active' if setting_tab == 0 else 'vertical-tab',
onclick=lambda: set_setting(0)):
yield "⚙️ General"
with Button(class_='vertical-tab active' if setting_tab == 1 else 'vertical-tab',
onclick=lambda: set_setting(1)):
yield "🔒 Privacy"
with Button(class_='vertical-tab active' if setting_tab == 2 else 'vertical-tab',
onclick=lambda: set_setting(2)):
yield "🚀 Advanced"
# Vertical tab content
with Div(class_="vertical-tab-content"):
@@ -106,11 +114,19 @@ def Tabs(orientation=0): # 0 = horizontal, 1 = vertical
with P(class_="subtitle"):
yield "Beautiful composition with TabMenu and TabPane components"
# Tab menu - using reusable HTab component!
# Tab menu - inlined until we support function params
with Ul(class_="tab-menu"):
yield HTab(label="🏠 Home", active=tab_index == 0, onclick=lambda: set_tab(0))
yield HTab(label="👤 Profile", active=tab_index == 1, onclick=lambda: set_tab(1))
yield HTab(label="⚙️ Settings", active=tab_index == 2, onclick=lambda: set_tab(2))
with Li(class_='tab active' if tab_index == 0 else 'tab'):
with Button(onclick=lambda: set_tab(0)):
yield "🏠 Home"
with Li(class_='tab active' if tab_index == 1 else 'tab'):
with Button(onclick=lambda: set_tab(1)):
yield "👤 Profile"
with Li(class_='tab active' if tab_index == 2 else 'tab'):
with Button(onclick=lambda: set_tab(2)):
yield "⚙️ Settings"
# Tab panes - match/case for clean switching
with Div(class_="tab-content"):
Binary file not shown.