Parser: Support multiple components in one file, change args to params with defaults

This commit is contained in:
Aaron Sinclair committed 2025-11-15 03:25:13 -08:00
1 parent 635d466874
commit 81d51d5617
38 files changed
+2151 -455

No files matched your search

+249
View File
@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabs - Multi-Panel Switcher - Ritz Framework</title>
<link rel="stylesheet" href="../runtime/ritz-debug.css">
<style>
body {
font-family: system-ui, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
margin: 0;
}
#app {
max-width: 900px;
margin: 50px auto;
padding: 0;
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
overflow: hidden;
}
.tabs-container {
padding: 40px;
}
.tabs-container h1 {
color: #667eea;
margin: 0 0 10px 0;
text-align: center;
}
.subtitle {
color: #666;
font-size: 14px;
margin: 0 0 30px 0;
text-align: center;
}
/* Tab Menu - ul/li structure */
.tab-menu {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
display: flex;
gap: 0;
border-bottom: 2px solid #e0e0e0;
}
.tab-menu .tab {
flex: 1;
}
.tab-menu .tab button {
width: 100%;
padding: 15px 20px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: #666;
transition: all 0.2s;
}
.tab-menu .tab button:hover {
background: #f5f5f5;
color: #667eea;
}
.tab-menu .tab.active button {
color: #667eea;
border-bottom-color: #667eea;
background: #f8f9ff;
}
/* Tab Content */
.tab-content {
min-height: 300px;
padding: 30px;
background: #f8f9ff;
border-radius: 8px;
}
.tab-pane h2 {
margin: 0 0 20px 0;
color: #667eea;
font-size: 28px;
}
.tab-pane p {
margin: 10px 0;
color: #444;
line-height: 1.6;
}
.tab-pane ul {
margin: 20px 0;
padding-left: 20px;
}
.tab-pane li {
margin: 8px 0;
color: #555;
}
/* Specific pane styles */
.tab-pane.home {
border-left: 4px solid #667eea;
}
.tab-pane.profile {
border-left: 4px solid #764ba2;
}
.tab-pane.settings {
border-left: 4px solid #f093fb;
}
.tab-pane.error {
border-left: 4px solid #f5576c;
background: #fff5f5;
}
.profile-info {
background: white;
padding: 20px;
border-radius: 8px;
margin-top: 15px;
}
.profile-info p {
margin: 10px 0;
padding: 8px 0;
border-bottom: 1px solid #e0e0e0;
}
.profile-info p:last-child {
border-bottom: none;
}
/* Debug footer */
.debug-footer {
margin-top: 30px;
padding: 15px;
background: #e8ebff;
border-radius: 8px;
text-align: center;
}
.debug-footer p {
margin: 0;
font-family: monospace;
color: #667eea;
font-size: 14px;
}
/* Vertical Tabs (nested inside Settings) */
.vertical-tabs {
display: flex;
gap: 20px;
margin-top: 20px;
background: white;
padding: 20px;
border-radius: 8px;
}
.vertical-tab-menu {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 150px;
}
.vertical-tab {
padding: 12px 20px;
background: #f0f0f0;
border: none;
border-left: 3px solid transparent;
cursor: pointer;
text-align: left;
font-size: 14px;
font-weight: 500;
color: #666;
transition: all 0.2s;
}
.vertical-tab:hover {
background: #e8ebff;
color: #667eea;
}
.vertical-tab.active {
background: #f8f9ff;
border-left-color: #667eea;
color: #667eea;
font-weight: 600;
}
.vertical-tab-content {
flex: 1;
padding: 10px;
}
.setting-pane h3 {
margin: 0 0 15px 0;
color: #667eea;
}
.setting-pane p {
margin: 8px 0;
padding: 8px;
background: #f8f9ff;
border-radius: 4px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.tab-pane {
animation: fadeIn 0.3s ease-out;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="ritz-debug" class="ritz-debug hidden">
<div class="debug-header">
<h3>🎭 Ritz Debug</h3>
<button onclick="ritzDebug.toggle()">×</button>
</div>
<div id="status" class="status">Loading...</div>
<div class="debug-content">
<div class="debug-section">
<h4>Component</h4>
<pre>Tabs.py (Multi-Panel Switcher)</pre>
</div>
<div class="debug-section">
<h4>Features</h4>
<pre>✓ Python match/case in WASM
✓ Beautiful ul/li tab structure
✓ Conditional CSS classes (active state)
✓ Component composition
✓ All logic in WASM</pre>
</div>
<div class="debug-section">
<h4>Console Commands</h4>
<pre>ritzRuntime.getLog()
ritzInstance.exports.get_active_tab()
ritzInstance.exports.go_home()</pre>
</div>
</div>
</div>
<script src="../runtime/ritz-runtime.js"></script>
<script src="../runtime/ritz-debug.js"></script>
<script>
// Wait for DOM to be ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new RitzLoader().load('Tabs.wasm', 'Tabs', { orientation: 0 });
});
} else {
new RitzLoader().load('Tabs.wasm', 'Tabs', { orientation: 0 });
}
</script>
</body>
</html>
+656
View File
@@ -0,0 +1,656 @@
; Generated by Ritz Framework with Signals
; Component: VerticalTabs
; String constants
@.str.0 = private unnamed_addr constant [7 x i8] c"button\00"
@.str.1 = private unnamed_addr constant [6 x i8] c"class\00"
@.str.2 = private unnamed_addr constant [20 x i8] c"vertical-tab active\00"
@.str.3 = private unnamed_addr constant [6 x i8] c"click\00"
@.str.4 = private unnamed_addr constant [14 x i8] c"set_setting_0\00"
@.str.5 = private unnamed_addr constant [15 x i8] c"⚙️ General\00"
@.str.6 = private unnamed_addr constant [13 x i8] c"vertical-tab\00"
@.str.7 = private unnamed_addr constant [14 x i8] c"set_setting_1\00"
@.str.8 = private unnamed_addr constant [13 x i8] c"🔒 Privacy\00"
@.str.9 = private unnamed_addr constant [14 x i8] c"set_setting_2\00"
@.str.10 = private unnamed_addr constant [14 x i8] c"🚀 Advanced\00"
@.str.11 = private unnamed_addr constant [4 x i8] c"div\00"
@.str.12 = private unnamed_addr constant [13 x i8] c"setting-pane\00"
@.str.13 = private unnamed_addr constant [3 x i8] c"h3\00"
@.str.14 = private unnamed_addr constant [24 x i8] c"⚙️ General Settings\00"
@.str.15 = private unnamed_addr constant [2 x i8] c"p\00"
@.str.16 = private unnamed_addr constant [18 x i8] c"Language: English\00"
@.str.17 = private unnamed_addr constant [15 x i8] c"Time Zone: UTC\00"
@.str.18 = private unnamed_addr constant [22 x i8] c"🔒 Privacy Settings\00"
@.str.19 = private unnamed_addr constant [26 x i8] c"Data Collection: Disabled\00"
@.str.20 = private unnamed_addr constant [19 x i8] c"Analytics: Opt-out\00"
@.str.21 = private unnamed_addr constant [23 x i8] c"🚀 Advanced Settings\00"
@.str.22 = private unnamed_addr constant [16 x i8] c"Debug Mode: Off\00"
@.str.23 = private unnamed_addr constant [32 x i8] c"Experimental Features: Disabled\00"
@.str.24 = private unnamed_addr constant [16 x i8] c"Invalid setting\00"
@.str.25 = private unnamed_addr constant [14 x i8] c"vertical-tabs\00"
@.str.26 = private unnamed_addr constant [18 x i8] c"vertical-tab-menu\00"
@.str.27 = private unnamed_addr constant [21 x i8] c"vertical-tab-content\00"
; Signal storage (reactive state in WASM memory)
@signal_setting_tab = global i32 0
; Conditional rendering state
@cond_0_parent = global i32 0
@cond_0_marker = global i32 0
@cond_0_current = global i32 0
@cond_0_then_root = global i32 0
@cond_0_else_root = global i32 0
@cond_1_parent = global i32 0
@cond_1_marker = global i32 0
@cond_1_current = global i32 0
@cond_1_then_root = global i32 0
@cond_1_else_root = global i32 0
@cond_2_parent = global i32 0
@cond_2_marker = global i32 0
@cond_2_current = global i32 0
@cond_2_then_root = global i32 0
@cond_2_else_root = global i32 0
@cond_3_parent = global i32 0
@cond_3_marker = global i32 0
@cond_3_current = global i32 0
@cond_3_case_0_root = global i32 0
@cond_3_case_1_root = global i32 0
@cond_3_case_2_root = global i32 0
@cond_3_case_3_root = global i32 0
; JavaScript bridge function declarations
declare i32 @js_create_element(i8*)
declare i32 @js_create_text(i8*)
declare void @js_append_child(i32, i32)
declare void @js_set_attribute(i32, i8*, i8*)
declare void @js_set_root(i32)
declare void @js_bind_event(i32, i8*, i8*)
declare void @js_update_text_content(i32, i8*)
declare i32 @js_create_marker()
declare void @js_replace_at_marker(i32, i32, i32)
; Signal helper functions
define i32 @get_setting_tab() {
entry:
%val = load i32, i32* @signal_setting_tab
ret i32 %val
}
define void @set_setting_tab(i32 %newval) {
entry:
store i32 %newval, i32* @signal_setting_tab
; TODO: Trigger DOM update callback
ret void
}
; Event handler: set_setting_0
define void @set_setting_0() {
entry:
store i32 0, i32* @signal_setting_tab
call void @reevaluate_conditional_0()
call void @reevaluate_conditional_1()
call void @reevaluate_conditional_2()
call void @reevaluate_conditional_3()
ret void
}
; Event handler: set_setting_1
define void @set_setting_1() {
entry:
store i32 1, i32* @signal_setting_tab
call void @reevaluate_conditional_0()
call void @reevaluate_conditional_1()
call void @reevaluate_conditional_2()
call void @reevaluate_conditional_3()
ret void
}
; Event handler: set_setting_2
define void @set_setting_2() {
entry:
store i32 2, i32* @signal_setting_tab
call void @reevaluate_conditional_0()
call void @reevaluate_conditional_1()
call void @reevaluate_conditional_2()
call void @reevaluate_conditional_3()
ret void
}
; Conditional 0 - then branch
define i32 @_render_cond_0_then() {
entry:
%var0 = call i32 @js_create_element(i8* getelementptr inbounds ([7 x i8], [7 x i8]* @.str.0, i32 0, i32 0))
call void @js_set_attribute(i32 %var0, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([20 x i8], [20 x i8]* @.str.2, i32 0, i32 0))
call void @js_bind_event(i32 %var0, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.3, i32 0, i32 0), i8* getelementptr inbounds ([14 x i8], [14 x i8]* @.str.4, i32 0, i32 0))
%var1 = call i32 @js_create_text(i8* getelementptr inbounds ([15 x i8], [15 x i8]* @.str.5, i32 0, i32 0))
call void @js_append_child(i32 %var0, i32 %var1)
ret i32 %var0
}
; Conditional 0 - else branch
define i32 @_render_cond_0_else() {
entry:
%var2 = call i32 @js_create_element(i8* getelementptr inbounds ([7 x i8], [7 x i8]* @.str.0, i32 0, i32 0))
call void @js_set_attribute(i32 %var2, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([13 x i8], [13 x i8]* @.str.6, i32 0, i32 0))
call void @js_bind_event(i32 %var2, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.3, i32 0, i32 0), i8* getelementptr inbounds ([14 x i8], [14 x i8]* @.str.4, i32 0, i32 0))
%var3 = call i32 @js_create_text(i8* getelementptr inbounds ([15 x i8], [15 x i8]* @.str.5, i32 0, i32 0))
call void @js_append_child(i32 %var2, i32 %var3)
ret i32 %var2
}
; Conditional 1 - then branch
define i32 @_render_cond_1_then() {
entry:
%var4 = call i32 @js_create_element(i8* getelementptr inbounds ([7 x i8], [7 x i8]* @.str.0, i32 0, i32 0))
call void @js_set_attribute(i32 %var4, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([20 x i8], [20 x i8]* @.str.2, i32 0, i32 0))
call void @js_bind_event(i32 %var4, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.3, i32 0, i32 0), i8* getelementptr inbounds ([14 x i8], [14 x i8]* @.str.7, i32 0, i32 0))
%var5 = call i32 @js_create_text(i8* getelementptr inbounds ([13 x i8], [13 x i8]* @.str.8, i32 0, i32 0))
call void @js_append_child(i32 %var4, i32 %var5)
ret i32 %var4
}
; Conditional 1 - else branch
define i32 @_render_cond_1_else() {
entry:
%var6 = call i32 @js_create_element(i8* getelementptr inbounds ([7 x i8], [7 x i8]* @.str.0, i32 0, i32 0))
call void @js_set_attribute(i32 %var6, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([13 x i8], [13 x i8]* @.str.6, i32 0, i32 0))
call void @js_bind_event(i32 %var6, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.3, i32 0, i32 0), i8* getelementptr inbounds ([14 x i8], [14 x i8]* @.str.7, i32 0, i32 0))
%var7 = call i32 @js_create_text(i8* getelementptr inbounds ([13 x i8], [13 x i8]* @.str.8, i32 0, i32 0))
call void @js_append_child(i32 %var6, i32 %var7)
ret i32 %var6
}
; Conditional 2 - then branch
define i32 @_render_cond_2_then() {
entry:
%var8 = call i32 @js_create_element(i8* getelementptr inbounds ([7 x i8], [7 x i8]* @.str.0, i32 0, i32 0))
call void @js_set_attribute(i32 %var8, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([20 x i8], [20 x i8]* @.str.2, i32 0, i32 0))
call void @js_bind_event(i32 %var8, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.3, i32 0, i32 0), i8* getelementptr inbounds ([14 x i8], [14 x i8]* @.str.9, i32 0, i32 0))
%var9 = call i32 @js_create_text(i8* getelementptr inbounds ([14 x i8], [14 x i8]* @.str.10, i32 0, i32 0))
call void @js_append_child(i32 %var8, i32 %var9)
ret i32 %var8
}
; Conditional 2 - else branch
define i32 @_render_cond_2_else() {
entry:
%var10 = call i32 @js_create_element(i8* getelementptr inbounds ([7 x i8], [7 x i8]* @.str.0, i32 0, i32 0))
call void @js_set_attribute(i32 %var10, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([13 x i8], [13 x i8]* @.str.6, i32 0, i32 0))
call void @js_bind_event(i32 %var10, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.3, i32 0, i32 0), i8* getelementptr inbounds ([14 x i8], [14 x i8]* @.str.9, i32 0, i32 0))
%var11 = call i32 @js_create_text(i8* getelementptr inbounds ([14 x i8], [14 x i8]* @.str.10, i32 0, i32 0))
call void @js_append_child(i32 %var10, i32 %var11)
ret i32 %var10
}
; Conditional 3 - case 0
define i32 @_render_cond_3_case_0() {
entry:
%var12 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
call void @js_set_attribute(i32 %var12, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([13 x i8], [13 x i8]* @.str.12, i32 0, i32 0))
%var13 = call i32 @js_create_element(i8* getelementptr inbounds ([3 x i8], [3 x i8]* @.str.13, i32 0, i32 0))
%var14 = call i32 @js_create_text(i8* getelementptr inbounds ([24 x i8], [24 x i8]* @.str.14, i32 0, i32 0))
call void @js_append_child(i32 %var13, i32 %var14)
call void @js_append_child(i32 %var12, i32 %var13)
%var15 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.15, i32 0, i32 0))
%var16 = call i32 @js_create_text(i8* getelementptr inbounds ([18 x i8], [18 x i8]* @.str.16, i32 0, i32 0))
call void @js_append_child(i32 %var15, i32 %var16)
call void @js_append_child(i32 %var12, i32 %var15)
%var17 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.15, i32 0, i32 0))
%var18 = call i32 @js_create_text(i8* getelementptr inbounds ([15 x i8], [15 x i8]* @.str.17, i32 0, i32 0))
call void @js_append_child(i32 %var17, i32 %var18)
call void @js_append_child(i32 %var12, i32 %var17)
ret i32 %var12
}
; Conditional 3 - case 1
define i32 @_render_cond_3_case_1() {
entry:
%var19 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
call void @js_set_attribute(i32 %var19, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([13 x i8], [13 x i8]* @.str.12, i32 0, i32 0))
%var20 = call i32 @js_create_element(i8* getelementptr inbounds ([3 x i8], [3 x i8]* @.str.13, i32 0, i32 0))
%var21 = call i32 @js_create_text(i8* getelementptr inbounds ([22 x i8], [22 x i8]* @.str.18, i32 0, i32 0))
call void @js_append_child(i32 %var20, i32 %var21)
call void @js_append_child(i32 %var19, i32 %var20)
%var22 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.15, i32 0, i32 0))
%var23 = call i32 @js_create_text(i8* getelementptr inbounds ([26 x i8], [26 x i8]* @.str.19, i32 0, i32 0))
call void @js_append_child(i32 %var22, i32 %var23)
call void @js_append_child(i32 %var19, i32 %var22)
%var24 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.15, i32 0, i32 0))
%var25 = call i32 @js_create_text(i8* getelementptr inbounds ([19 x i8], [19 x i8]* @.str.20, i32 0, i32 0))
call void @js_append_child(i32 %var24, i32 %var25)
call void @js_append_child(i32 %var19, i32 %var24)
ret i32 %var19
}
; Conditional 3 - case 2
define i32 @_render_cond_3_case_2() {
entry:
%var26 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
call void @js_set_attribute(i32 %var26, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([13 x i8], [13 x i8]* @.str.12, i32 0, i32 0))
%var27 = call i32 @js_create_element(i8* getelementptr inbounds ([3 x i8], [3 x i8]* @.str.13, i32 0, i32 0))
%var28 = call i32 @js_create_text(i8* getelementptr inbounds ([23 x i8], [23 x i8]* @.str.21, i32 0, i32 0))
call void @js_append_child(i32 %var27, i32 %var28)
call void @js_append_child(i32 %var26, i32 %var27)
%var29 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.15, i32 0, i32 0))
%var30 = call i32 @js_create_text(i8* getelementptr inbounds ([16 x i8], [16 x i8]* @.str.22, i32 0, i32 0))
call void @js_append_child(i32 %var29, i32 %var30)
call void @js_append_child(i32 %var26, i32 %var29)
%var31 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.15, i32 0, i32 0))
%var32 = call i32 @js_create_text(i8* getelementptr inbounds ([32 x i8], [32 x i8]* @.str.23, i32 0, i32 0))
call void @js_append_child(i32 %var31, i32 %var32)
call void @js_append_child(i32 %var26, i32 %var31)
ret i32 %var26
}
; Conditional 3 - case 3
define i32 @_render_cond_3_case_3() {
entry:
%var33 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
call void @js_set_attribute(i32 %var33, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([13 x i8], [13 x i8]* @.str.12, i32 0, i32 0))
%var34 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.15, i32 0, i32 0))
%var35 = call i32 @js_create_text(i8* getelementptr inbounds ([16 x i8], [16 x i8]* @.str.24, i32 0, i32 0))
call void @js_append_child(i32 %var34, i32 %var35)
call void @js_append_child(i32 %var33, i32 %var34)
ret i32 %var33
}
; Initialize conditional 0 - render both branches
define void @_init_conditional_0(i1 %cond) {
entry:
; Render both branches upfront
%then_root = call i32 @_render_cond_0_then()
%else_root = call i32 @_render_cond_0_else()
store i32 %then_root, i32* @cond_0_then_root
store i32 %else_root, i32* @cond_0_else_root
%marker = load i32, i32* @cond_0_marker
br i1 %cond, label %insert_then, label %insert_else
insert_then:
call void @js_replace_at_marker(i32 %marker, i32 0, i32 %then_root)
store i32 1, i32* @cond_0_current
ret void
insert_else:
call void @js_replace_at_marker(i32 %marker, i32 0, i32 %else_root)
store i32 0, i32* @cond_0_current
ret void
}
; Re-evaluate conditional 0
define void @reevaluate_conditional_0() {
entry:
%var36 = load i32, i32* @signal_setting_tab
%var37 = icmp eq i32 %var36, 0
%var39 = load i32, i32* @cond_0_current
%var40 = zext i1 %var37 to i32
%var41 = icmp ne i32 %var39, %var40
br i1 %var41, label %swap, label %done
swap:
br i1 %var37, label %swap_to_then, label %swap_to_else
swap_to_then:
%var42 = load i32, i32* @cond_0_else_root
%var43 = load i32, i32* @cond_0_then_root
%var44 = load i32, i32* @cond_0_marker
call void @js_replace_at_marker(i32 %var44, i32 %var42, i32 %var43)
store i32 1, i32* @cond_0_current
br label %done
swap_to_else:
%var45 = load i32, i32* @cond_0_then_root
%var46 = load i32, i32* @cond_0_else_root
%var47 = load i32, i32* @cond_0_marker
call void @js_replace_at_marker(i32 %var47, i32 %var45, i32 %var46)
store i32 0, i32* @cond_0_current
br label %done
done:
ret void
}
; Initialize conditional 1 - render both branches
define void @_init_conditional_1(i1 %cond) {
entry:
; Render both branches upfront
%then_root = call i32 @_render_cond_1_then()
%else_root = call i32 @_render_cond_1_else()
store i32 %then_root, i32* @cond_1_then_root
store i32 %else_root, i32* @cond_1_else_root
%marker = load i32, i32* @cond_1_marker
br i1 %cond, label %insert_then, label %insert_else
insert_then:
call void @js_replace_at_marker(i32 %marker, i32 0, i32 %then_root)
store i32 1, i32* @cond_1_current
ret void
insert_else:
call void @js_replace_at_marker(i32 %marker, i32 0, i32 %else_root)
store i32 0, i32* @cond_1_current
ret void
}
; Re-evaluate conditional 1
define void @reevaluate_conditional_1() {
entry:
%var48 = load i32, i32* @signal_setting_tab
%var49 = icmp eq i32 %var48, 1
%var51 = load i32, i32* @cond_1_current
%var52 = zext i1 %var49 to i32
%var53 = icmp ne i32 %var51, %var52
br i1 %var53, label %swap, label %done
swap:
br i1 %var49, label %swap_to_then, label %swap_to_else
swap_to_then:
%var54 = load i32, i32* @cond_1_else_root
%var55 = load i32, i32* @cond_1_then_root
%var56 = load i32, i32* @cond_1_marker
call void @js_replace_at_marker(i32 %var56, i32 %var54, i32 %var55)
store i32 1, i32* @cond_1_current
br label %done
swap_to_else:
%var57 = load i32, i32* @cond_1_then_root
%var58 = load i32, i32* @cond_1_else_root
%var59 = load i32, i32* @cond_1_marker
call void @js_replace_at_marker(i32 %var59, i32 %var57, i32 %var58)
store i32 0, i32* @cond_1_current
br label %done
done:
ret void
}
; Initialize conditional 2 - render both branches
define void @_init_conditional_2(i1 %cond) {
entry:
; Render both branches upfront
%then_root = call i32 @_render_cond_2_then()
%else_root = call i32 @_render_cond_2_else()
store i32 %then_root, i32* @cond_2_then_root
store i32 %else_root, i32* @cond_2_else_root
%marker = load i32, i32* @cond_2_marker
br i1 %cond, label %insert_then, label %insert_else
insert_then:
call void @js_replace_at_marker(i32 %marker, i32 0, i32 %then_root)
store i32 1, i32* @cond_2_current
ret void
insert_else:
call void @js_replace_at_marker(i32 %marker, i32 0, i32 %else_root)
store i32 0, i32* @cond_2_current
ret void
}
; Re-evaluate conditional 2
define void @reevaluate_conditional_2() {
entry:
%var60 = load i32, i32* @signal_setting_tab
%var61 = icmp eq i32 %var60, 2
%var63 = load i32, i32* @cond_2_current
%var64 = zext i1 %var61 to i32
%var65 = icmp ne i32 %var63, %var64
br i1 %var65, label %swap, label %done
swap:
br i1 %var61, label %swap_to_then, label %swap_to_else
swap_to_then:
%var66 = load i32, i32* @cond_2_else_root
%var67 = load i32, i32* @cond_2_then_root
%var68 = load i32, i32* @cond_2_marker
call void @js_replace_at_marker(i32 %var68, i32 %var66, i32 %var67)
store i32 1, i32* @cond_2_current
br label %done
swap_to_else:
%var69 = load i32, i32* @cond_2_then_root
%var70 = load i32, i32* @cond_2_else_root
%var71 = load i32, i32* @cond_2_marker
call void @js_replace_at_marker(i32 %var71, i32 %var69, i32 %var70)
store i32 0, i32* @cond_2_current
br label %done
done:
ret void
}
; Initialize conditional 3 - render all 4 cases
define void @_init_conditional_3(i32 %subject) {
entry:
; Render all cases upfront
%case_0_root = call i32 @_render_cond_3_case_0()
store i32 %case_0_root, i32* @cond_3_case_0_root
%case_1_root = call i32 @_render_cond_3_case_1()
store i32 %case_1_root, i32* @cond_3_case_1_root
%case_2_root = call i32 @_render_cond_3_case_2()
store i32 %case_2_root, i32* @cond_3_case_2_root
%case_3_root = call i32 @_render_cond_3_case_3()
store i32 %case_3_root, i32* @cond_3_case_3_root
%marker = load i32, i32* @cond_3_marker
%var72 = icmp eq i32 %subject, 0
br i1 %var72, label %insert_case_0, label %check_case_1
insert_case_0:
call void @js_replace_at_marker(i32 %marker, i32 0, i32 %case_0_root)
store i32 0, i32* @cond_3_current
ret void
check_case_1:
%var73 = icmp eq i32 %subject, 1
br i1 %var73, label %insert_case_1, label %check_case_2
insert_case_1:
call void @js_replace_at_marker(i32 %marker, i32 0, i32 %case_1_root)
store i32 1, i32* @cond_3_current
ret void
check_case_2:
%var74 = icmp eq i32 %subject, 2
br i1 %var74, label %insert_case_2, label %check_case_3
insert_case_2:
call void @js_replace_at_marker(i32 %marker, i32 0, i32 %case_2_root)
store i32 2, i32* @cond_3_current
ret void
check_case_3:
; Wildcard case 3
call void @js_replace_at_marker(i32 %marker, i32 0, i32 %case_3_root)
store i32 3, i32* @cond_3_current
ret void
fallback:
ret void
}
; Re-evaluate match conditional 3
define void @reevaluate_conditional_3() {
entry:
%var75 = load i32, i32* @signal_setting_tab
%var76 = icmp eq i32 %var75, 0
br i1 %var76, label %swap_to_case_0, label %check_case_1
check_case_1:
%var77 = icmp eq i32 %var75, 1
br i1 %var77, label %swap_to_case_1, label %check_case_2
check_case_2:
%var78 = icmp eq i32 %var75, 2
br i1 %var78, label %swap_to_case_2, label %check_case_3
check_case_3:
; Wildcard matches - case 3
br label %swap_to_case_3
swap_to_case_0:
%var79 = load i32, i32* @cond_3_current
%var80 = icmp eq i32 %var79, 0
br i1 %var80, label %done, label %do_swap_0
do_swap_0:
%var81 = load i32, i32* @cond_3_current
%var82 = icmp eq i32 %var81, 0
%var83 = icmp eq i32 %var81, 1
%var84 = icmp eq i32 %var81, 2
%var85 = icmp eq i32 %var81, 3
br i1 %var82, label %load_old_0_0, label %check_old_0_1
load_old_0_0:
%var86 = load i32, i32* @cond_3_case_0_root
br label %do_replace_0
check_old_0_1:
br i1 %var83, label %load_old_0_1, label %check_old_0_2
load_old_0_1:
%var87 = load i32, i32* @cond_3_case_1_root
br label %do_replace_0
check_old_0_2:
br i1 %var84, label %load_old_0_2, label %check_old_0_3
load_old_0_2:
%var88 = load i32, i32* @cond_3_case_2_root
br label %do_replace_0
check_old_0_3:
br label %load_old_0_3
load_old_0_3:
%var89 = load i32, i32* @cond_3_case_3_root
br label %do_replace_0
do_replace_0:
%var90 = phi i32 [ %var86, %load_old_0_0 ], [ %var87, %load_old_0_1 ], [ %var88, %load_old_0_2 ], [ %var89, %load_old_0_3 ]
%var91 = load i32, i32* @cond_3_case_0_root
%var92 = load i32, i32* @cond_3_marker
call void @js_replace_at_marker(i32 %var92, i32 %var90, i32 %var91)
store i32 0, i32* @cond_3_current
br label %done
swap_to_case_1:
%var93 = load i32, i32* @cond_3_current
%var94 = icmp eq i32 %var93, 1
br i1 %var94, label %done, label %do_swap_1
do_swap_1:
%var95 = load i32, i32* @cond_3_current
%var96 = icmp eq i32 %var95, 0
%var97 = icmp eq i32 %var95, 1
%var98 = icmp eq i32 %var95, 2
%var99 = icmp eq i32 %var95, 3
br i1 %var96, label %load_old_1_0, label %check_old_1_1
load_old_1_0:
%var100 = load i32, i32* @cond_3_case_0_root
br label %do_replace_1
check_old_1_1:
br i1 %var97, label %load_old_1_1, label %check_old_1_2
load_old_1_1:
%var101 = load i32, i32* @cond_3_case_1_root
br label %do_replace_1
check_old_1_2:
br i1 %var98, label %load_old_1_2, label %check_old_1_3
load_old_1_2:
%var102 = load i32, i32* @cond_3_case_2_root
br label %do_replace_1
check_old_1_3:
br label %load_old_1_3
load_old_1_3:
%var103 = load i32, i32* @cond_3_case_3_root
br label %do_replace_1
do_replace_1:
%var104 = phi i32 [ %var100, %load_old_1_0 ], [ %var101, %load_old_1_1 ], [ %var102, %load_old_1_2 ], [ %var103, %load_old_1_3 ]
%var105 = load i32, i32* @cond_3_case_1_root
%var106 = load i32, i32* @cond_3_marker
call void @js_replace_at_marker(i32 %var106, i32 %var104, i32 %var105)
store i32 1, i32* @cond_3_current
br label %done
swap_to_case_2:
%var107 = load i32, i32* @cond_3_current
%var108 = icmp eq i32 %var107, 2
br i1 %var108, label %done, label %do_swap_2
do_swap_2:
%var109 = load i32, i32* @cond_3_current
%var110 = icmp eq i32 %var109, 0
%var111 = icmp eq i32 %var109, 1
%var112 = icmp eq i32 %var109, 2
%var113 = icmp eq i32 %var109, 3
br i1 %var110, label %load_old_2_0, label %check_old_2_1
load_old_2_0:
%var114 = load i32, i32* @cond_3_case_0_root
br label %do_replace_2
check_old_2_1:
br i1 %var111, label %load_old_2_1, label %check_old_2_2
load_old_2_1:
%var115 = load i32, i32* @cond_3_case_1_root
br label %do_replace_2
check_old_2_2:
br i1 %var112, label %load_old_2_2, label %check_old_2_3
load_old_2_2:
%var116 = load i32, i32* @cond_3_case_2_root
br label %do_replace_2
check_old_2_3:
br label %load_old_2_3
load_old_2_3:
%var117 = load i32, i32* @cond_3_case_3_root
br label %do_replace_2
do_replace_2:
%var118 = phi i32 [ %var114, %load_old_2_0 ], [ %var115, %load_old_2_1 ], [ %var116, %load_old_2_2 ], [ %var117, %load_old_2_3 ]
%var119 = load i32, i32* @cond_3_case_2_root
%var120 = load i32, i32* @cond_3_marker
call void @js_replace_at_marker(i32 %var120, i32 %var118, i32 %var119)
store i32 2, i32* @cond_3_current
br label %done
swap_to_case_3:
%var121 = load i32, i32* @cond_3_current
%var122 = icmp eq i32 %var121, 3
br i1 %var122, label %done, label %do_swap_3
do_swap_3:
%var123 = load i32, i32* @cond_3_current
%var124 = icmp eq i32 %var123, 0
%var125 = icmp eq i32 %var123, 1
%var126 = icmp eq i32 %var123, 2
%var127 = icmp eq i32 %var123, 3
br i1 %var124, label %load_old_3_0, label %check_old_3_1
load_old_3_0:
%var128 = load i32, i32* @cond_3_case_0_root
br label %do_replace_3
check_old_3_1:
br i1 %var125, label %load_old_3_1, label %check_old_3_2
load_old_3_1:
%var129 = load i32, i32* @cond_3_case_1_root
br label %do_replace_3
check_old_3_2:
br i1 %var126, label %load_old_3_2, label %check_old_3_3
load_old_3_2:
%var130 = load i32, i32* @cond_3_case_2_root
br label %do_replace_3
check_old_3_3:
br label %load_old_3_3
load_old_3_3:
%var131 = load i32, i32* @cond_3_case_3_root
br label %do_replace_3
do_replace_3:
%var132 = phi i32 [ %var128, %load_old_3_0 ], [ %var129, %load_old_3_1 ], [ %var130, %load_old_3_2 ], [ %var131, %load_old_3_3 ]
%var133 = load i32, i32* @cond_3_case_3_root
%var134 = load i32, i32* @cond_3_marker
call void @js_replace_at_marker(i32 %var134, i32 %var132, i32 %var133)
store i32 3, i32* @cond_3_current
br label %done
done:
ret void
}
; Component render function (returns root element ID)
define i32 @render_VerticalTabs() {
entry:
%var135 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
call void @js_set_attribute(i32 %var135, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([14 x i8], [14 x i8]* @.str.25, i32 0, i32 0))
%var136 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
call void @js_set_attribute(i32 %var136, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([18 x i8], [18 x i8]* @.str.26, i32 0, i32 0))
%var137 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
%var138 = call i32 @js_create_marker()
call void @js_append_child(i32 %var137, i32 %var138)
store i32 %var138, i32* @cond_0_marker
store i32 %var137, i32* @cond_0_parent
%var139 = load i32, i32* @signal_setting_tab
%var140 = icmp eq i32 %var139, 0
call void @_init_conditional_0(i1 %var140)
call void @js_append_child(i32 %var136, i32 %var137)
%var141 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
%var142 = call i32 @js_create_marker()
call void @js_append_child(i32 %var141, i32 %var142)
store i32 %var142, i32* @cond_1_marker
store i32 %var141, i32* @cond_1_parent
%var143 = load i32, i32* @signal_setting_tab
%var144 = icmp eq i32 %var143, 1
call void @_init_conditional_1(i1 %var144)
call void @js_append_child(i32 %var136, i32 %var141)
%var145 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
%var146 = call i32 @js_create_marker()
call void @js_append_child(i32 %var145, i32 %var146)
store i32 %var146, i32* @cond_2_marker
store i32 %var145, i32* @cond_2_parent
%var147 = load i32, i32* @signal_setting_tab
%var148 = icmp eq i32 %var147, 2
call void @_init_conditional_2(i1 %var148)
call void @js_append_child(i32 %var136, i32 %var145)
call void @js_append_child(i32 %var135, i32 %var136)
%var149 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
call void @js_set_attribute(i32 %var149, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([21 x i8], [21 x i8]* @.str.27, i32 0, i32 0))
%var150 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.11, i32 0, i32 0))
%var151 = call i32 @js_create_marker()
call void @js_append_child(i32 %var150, i32 %var151)
store i32 %var151, i32* @cond_3_marker
store i32 %var150, i32* @cond_3_parent
%var152 = load i32, i32* @signal_setting_tab
call void @_init_conditional_3(i32 %var152)
call void @js_append_child(i32 %var149, i32 %var150)
call void @js_append_child(i32 %var135, i32 %var149)
ret i32 %var135
}
+193
View File
@@ -0,0 +1,193 @@
"""
Tabs component - Beautiful multi-panel tab switching with proper composition.
Demonstrates:
- Component composition (TabMenu, TabPane)
- Match/case for clean panel switching
- Conditional CSS classes for active state
- All logic in WASM, minimal syntax
"""
from ritz.syntax import *
@component
def VerticalTabs():
"""Vertical tabs for settings categories."""
setting_tab = signal(0) # 0 = General, 1 = Privacy, 2 = Advanced
def set_setting_0():
setting_tab = 0
def set_setting_1():
setting_tab = 1
def set_setting_2():
setting_tab = 2
with Div(class_="vertical-tabs"):
# Vertical tab menu
with Div(class_="vertical-tab-menu"):
if setting_tab == 0:
with Button(class_="vertical-tab active", onclick=set_setting_0):
yield "⚙️ General"
else:
with Button(class_="vertical-tab", onclick=set_setting_0):
yield "⚙️ General"
if setting_tab == 1:
with Button(class_="vertical-tab active", onclick=set_setting_1):
yield "🔒 Privacy"
else:
with Button(class_="vertical-tab", onclick=set_setting_1):
yield "🔒 Privacy"
if setting_tab == 2:
with Button(class_="vertical-tab active", onclick=set_setting_2):
yield "🚀 Advanced"
else:
with Button(class_="vertical-tab", onclick=set_setting_2):
yield "🚀 Advanced"
# Vertical tab content
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"
@component
def Tabs(orientation=0): # 0 = horizontal, 1 = vertical
"""Main tabs container - orchestrates menu and panes."""
tab_index = signal(0) # Track which tab is active: 0 = Home, 1 = Profile, 2 = Settings
def set_tab_0():
tab_index = 0
def set_tab_1():
tab_index = 1
def set_tab_2():
tab_index = 2
with Div(class_="tabs-container"):
with H1():
yield "Tab Component Demo"
with P(class_="subtitle"):
yield "Beautiful composition with TabMenu and TabPane components"
# Tab menu - ul/li structure with active states
with Ul(class_="tab-menu"):
if tab_index == 0:
with Li(class_="tab active"):
with Button(onclick=set_tab_0):
yield "🏠 Home"
else:
with Li(class_="tab"):
with Button(onclick=set_tab_0):
yield "🏠 Home"
if tab_index == 1:
with Li(class_="tab active"):
with Button(onclick=set_tab_1):
yield "👤 Profile"
else:
with Li(class_="tab"):
with Button(onclick=set_tab_1):
yield "👤 Profile"
if tab_index == 2:
with Li(class_="tab active"):
with Button(onclick=set_tab_2):
yield "⚙️ Settings"
else:
with Li(class_="tab"):
with Button(onclick=set_tab_2):
yield "⚙️ Settings"
# Tab panes - match/case for clean switching
with Div(class_="tab-content"):
match tab_index:
case 0:
# Home pane
with Div(class_="tab-pane home"):
with H2():
yield "🏠 Welcome Home"
with P():
yield "This is your home dashboard."
with P():
yield "All your important info at a glance."
with Ul():
with Li():
yield "✓ Recent activity"
with Li():
yield "✓ Quick actions"
with Li():
yield "✓ Summary stats"
case 1:
# Profile pane
with Div(class_="tab-pane profile"):
with H2():
yield "👤 Your Profile"
with P():
yield "Manage your account settings."
with Div(class_="profile-info"):
with P():
yield "Name: Ritz User"
with P():
yield "Email: user@ritz.dev"
with P():
yield "Member since: 2025"
case 2:
# Settings pane with NESTED vertical tabs!
with Div(class_="tab-pane settings"):
with H2():
yield "⚙️ Settings"
with P():
yield "Configure your preferences using the categories below:"
# ← NESTED COMPONENT HERE!
yield VerticalTabs()
case _:
# Error fallback
with Div(class_="tab-pane error"):
with P():
yield "⚠️ Invalid tab selected"
# Debug footer
with Div(class_="debug-footer"):
with P():
yield f"Active: {tab_index}"
BIN
View File
Binary file not shown.