Implement Python → LLVM IR → WASM reactive framework

MAJOR ACHIEVEMENT: Full working reactive framework!

## What's Working

✅ Python → AST → Ritz IR → LLVM IR → WASM pipeline
✅ Reactive signals stored in WASM memory (@signal_name = global i32)
✅ Event handlers exported from WASM and callable from JS
✅ Clean runtime with RitzLoader and debug tools
✅ Two working examples: HelloWorld and HighFive counter

## Core Components

### Parser (ritz/parser.py)
- Uses Python's ast module to parse components
- Handles @component decorator, signals, event handlers
- Supports yield, with statements, f-strings, augmented assignment (+=)
- Clean syntax: from ritz.syntax import *

### LLVM IR Code Generator (ritz/llvm_codegen_signals.py)
- Generates LLVM IR directly (not C!)
- Signals as global variables in WASM memory
- Exports getter/setter functions for each signal
- Exports event handler functions for JS to call
- UTF-8 string handling

### Build System (ritz/build.py)
- Python → AST → IR → LLVM IR → clang --target=wasm32 → WASM
- Saves intermediate .ll files for inspection
- Debug symbols support (-g flag)

### Runtime (runtime/ritz-runtime.js)
- RitzRuntime class: DOM bridge for WASM
- RitzLoader class: Simplified component loading
- Debug bar with Ctrl+` toggle
- Signal updates trigger DOM updates

## Examples

### HelloWorld.py
Simple static content - renders <p>Hello World</p>

### HighFive.py
Reactive counter with:
- Signal in WASM memory (high_fives = signal(0))
- Event handler (increment function)
- DOM updates on signal change

## Test Coverage

- 4 parser tests (all passing)
- 4 LLVM codegen tests (all passing)
- 4 signal parsing tests (all passing)
- Code formatted with black and ruff

## Next Steps

- <script type="text/ritz"> in-browser compilation
- Better signal-to-DOM binding tracking
- More complex examples (TodoMVC, forms, lists)
- Playwright browser tests

---

This is a genuinely innovative framework: write Python, compile to WASM,
run with reactive signals in WASM memory. No virtual DOM, no transpilation,
just compiled Python with fine-grained reactivity.

🎉 Python → WASM → Reactive UI is REAL!
This commit is contained in:
Aaron Sinclair committed 2025-11-15 01:50:40 -08:00
1 parent 316c090778
commit 635d466874
54 files changed
+4393

No files matched your search

+67
View File
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HelloWorld - Ritz Framework</title>
<link rel="stylesheet" href="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);
}
#app p {
font-size: 24px;
color: #333;
text-align: center;
}
</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>HelloWorld.py</pre>
</div>
<div class="debug-section">
<h4>Pipeline</h4>
<pre>Python → AST → IR → LLVM → WASM</pre>
</div>
<div class="debug-section">
<h4>Console Commands</h4>
<pre>ritzRuntime.getLog()
ritzInstance.exports</pre>
</div>
</div>
</div>
<script src="ritz-runtime.js"></script>
<script src="ritz-debug.js"></script>
<script>
// Wait for DOM to be ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new RitzLoader().load('HelloWorld.wasm', 'HelloWorld');
});
} else {
new RitzLoader().load('HelloWorld.wasm', 'HelloWorld');
}
</script>
</body>
</html>