Reorganize HighFive example into highfive/ subdirectory
**Structure Before:** examples/ ├── HighFive.py, HighFive.html, HighFive.wasm, HighFive.ll (loose files) ├── highfive.html (old duplicate) ├── tabs/Tabs.* └── textinput/TextInput.* **Structure After:** examples/ ├── highfive/HighFive.* ├── tabs/Tabs.* └── textinput/TextInput.* **Changes:** - Moved all HighFive.* files to examples/highfive/ subdirectory - Updated paths in HighFive.html: runtime/ → ../runtime/ - Removed old duplicate highfive.html file - Now consistent with tabs/ and textinput/ structure **Testing:** Access via: http://localhost:8111/highfive/HighFive.html 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Aaron SinclairandClaude committed
1 parent
a43b325755
commit
999327172e
5 files changed
+3
-317
No files matched your search
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HighFive Counter - Ritz Framework</title>
|
||||
<link rel="stylesheet" href="../runtime/ritz-debug.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
#app {
|
||||
max-width: 800px;
|
||||
margin: 50px auto;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.high-five-app {
|
||||
text-align: center;
|
||||
}
|
||||
.high-five-app p {
|
||||
font-size: 18px;
|
||||
margin: 15px 0;
|
||||
color: #333;
|
||||
}
|
||||
.high-five-app .count {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #0066cc;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.high-five-app button {
|
||||
font-size: 18px;
|
||||
padding: 15px 40px;
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.high-five-app button:hover {
|
||||
background: #0052a3;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.high-five-app button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
</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>HighFive.py (Reactive Signals)</pre>
|
||||
</div>
|
||||
<div class="debug-section">
|
||||
<h4>Features</h4>
|
||||
<pre>✓ Signal in WASM memory
|
||||
✓ Event handlers
|
||||
✓ Reactive updates</pre>
|
||||
</div>
|
||||
<div class="debug-section">
|
||||
<h4>Console Commands</h4>
|
||||
<pre>ritzRuntime.getLog()
|
||||
ritzInstance.exports.get_high_fives()
|
||||
ritzInstance.exports.increment()</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('HighFive.wasm', 'HighFive');
|
||||
});
|
||||
} else {
|
||||
new RitzLoader().load('HighFive.wasm', 'HighFive');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,104 @@
|
||||
; Generated by Ritz Framework with Signals
|
||||
; Components: HighFive
|
||||
|
||||
; String constants
|
||||
@.str.0 = private unnamed_addr constant [13 x i8] c"High fives: \00"
|
||||
@.str.1 = private unnamed_addr constant [4 x i8] c"div\00"
|
||||
@.str.2 = private unnamed_addr constant [6 x i8] c"class\00"
|
||||
@.str.3 = private unnamed_addr constant [14 x i8] c"high-five-app\00"
|
||||
@.str.4 = private unnamed_addr constant [2 x i8] c"p\00"
|
||||
@.str.5 = private unnamed_addr constant [25 x i8] c"Give me a high five! ✋\00"
|
||||
@.str.6 = private unnamed_addr constant [6 x i8] c"count\00"
|
||||
@.str.7 = private unnamed_addr constant [7 x i8] c"button\00"
|
||||
@.str.8 = private unnamed_addr constant [6 x i8] c"click\00"
|
||||
@.str.9 = private unnamed_addr constant [10 x i8] c"increment\00"
|
||||
@.str.10 = private unnamed_addr constant [11 x i8] c"High Five!\00"
|
||||
|
||||
; JavaScript bridge function declarations
|
||||
declare i32 @js_create_element(i8*)
|
||||
declare i32 @js_create_text(i8*)
|
||||
declare i32 @js_create_text_with_int(i8*, i32)
|
||||
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 void @js_update_text_with_int(i32, i8*, i32)
|
||||
declare i32 @js_create_marker()
|
||||
declare void @js_replace_at_marker(i32, i32, i32)
|
||||
|
||||
; Signal storage for HighFive (reactive state in WASM memory)
|
||||
@signal_HighFive_high_fives = global i32 0
|
||||
|
||||
; Reactive text node storage
|
||||
@reactive_text_0_node = global i32 0
|
||||
|
||||
; Signal helper functions
|
||||
define i32 @get_high_fives() {
|
||||
entry:
|
||||
%val = load i32, i32* @signal_HighFive_high_fives
|
||||
ret i32 %val
|
||||
}
|
||||
|
||||
define void @set_high_fives(i32 %newval) {
|
||||
entry:
|
||||
store i32 %newval, i32* @signal_HighFive_high_fives
|
||||
; TODO: Trigger DOM update callback
|
||||
ret void
|
||||
}
|
||||
|
||||
; Event handler: increment
|
||||
define void @increment() {
|
||||
entry:
|
||||
%var0 = load i32, i32* @signal_HighFive_high_fives
|
||||
%var1 = add i32 %var0, 1
|
||||
store i32 %var1, i32* @signal_HighFive_high_fives
|
||||
%var2 = load i32, i32* @reactive_text_0_node
|
||||
%var3 = getelementptr inbounds [13 x i8], [13 x i8]* @.str.0, i32 0, i32 0
|
||||
%var4 = load i32, i32* @signal_HighFive_high_fives
|
||||
call void @js_update_text_with_int(i32 %var2, i8* %var3, i32 %var4)
|
||||
ret void
|
||||
}
|
||||
|
||||
; Component render function
|
||||
define i32 @render_HighFive() {
|
||||
entry:
|
||||
%var6 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.1, i32 0, i32 0
|
||||
%var5 = call i32 @js_create_element(i8* %var6)
|
||||
%var7 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.2, i32 0, i32 0
|
||||
%var8 = getelementptr inbounds [14 x i8], [14 x i8]* @.str.3, i32 0, i32 0
|
||||
call void @js_set_attribute(i32 %var5, i8* %var7, i8* %var8)
|
||||
%var10 = getelementptr inbounds [2 x i8], [2 x i8]* @.str.4, i32 0, i32 0
|
||||
%var9 = call i32 @js_create_element(i8* %var10)
|
||||
%var11 = call i32 @js_create_text(i8* getelementptr inbounds ([25 x i8], [25 x i8]* @.str.5, i32 0, i32 0))
|
||||
call void @js_append_child(i32 %var9, i32 %var11)
|
||||
call void @js_append_child(i32 %var5, i32 %var9)
|
||||
%var13 = getelementptr inbounds [2 x i8], [2 x i8]* @.str.4, i32 0, i32 0
|
||||
%var12 = call i32 @js_create_element(i8* %var13)
|
||||
%var14 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.2, i32 0, i32 0
|
||||
%var15 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.6, i32 0, i32 0
|
||||
call void @js_set_attribute(i32 %var12, i8* %var14, i8* %var15)
|
||||
%var16 = getelementptr inbounds [13 x i8], [13 x i8]* @.str.0, i32 0, i32 0
|
||||
%var17 = load i32, i32* @signal_HighFive_high_fives
|
||||
%var18 = call i32 @js_create_text_with_int(i8* %var16, i32 %var17)
|
||||
store i32 %var18, i32* @reactive_text_0_node
|
||||
call void @js_append_child(i32 %var12, i32 %var18)
|
||||
call void @js_append_child(i32 %var5, i32 %var12)
|
||||
%var20 = getelementptr inbounds [7 x i8], [7 x i8]* @.str.7, i32 0, i32 0
|
||||
%var19 = call i32 @js_create_element(i8* %var20)
|
||||
%var21 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.8, i32 0, i32 0
|
||||
%var22 = getelementptr inbounds [10 x i8], [10 x i8]* @.str.9, i32 0, i32 0
|
||||
call void @js_bind_event(i32 %var19, i8* %var21, i8* %var22)
|
||||
%var23 = call i32 @js_create_text(i8* getelementptr inbounds ([11 x i8], [11 x i8]* @.str.10, i32 0, i32 0))
|
||||
call void @js_append_child(i32 %var19, i32 %var23)
|
||||
call void @js_append_child(i32 %var5, i32 %var19)
|
||||
ret i32 %var5
|
||||
}
|
||||
|
||||
; Main entry point
|
||||
define void @main() {
|
||||
entry:
|
||||
%root = call i32 @render_HighFive()
|
||||
call void @js_set_root(i32 %root)
|
||||
ret void
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
"""
|
||||
HighFive counter component - Demonstrates reactive signals and event handlers.
|
||||
|
||||
This component uses a signal to track state and an onclick handler to update it.
|
||||
"""
|
||||
|
||||
from ritz.syntax import *
|
||||
|
||||
|
||||
@component
|
||||
def HighFive():
|
||||
"""A counter that tracks high fives."""
|
||||
high_fives = signal(0)
|
||||
|
||||
def increment():
|
||||
high_fives += 1
|
||||
|
||||
with Div(class_="high-five-app"):
|
||||
with P():
|
||||
yield "Give me a high five! ✋"
|
||||
|
||||
with P(class_="count"):
|
||||
yield f"High fives: {high_fives}"
|
||||
|
||||
with Button(onclick=increment):
|
||||
yield "High Five!"
|
||||
Executable
BIN
Binary file not shown.
Reference in new issue
Block a user