nevelis/ritz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ea7dadc5ae0912e8292effbf05f4ed3217444d4d
ritz/examples/runtime/Main.ll
T
Aaron SinclairandClaude ea7dadc5ae Implement self-hosted debug console and @external decorator 
This commit completes the self-hosting of Ritz's debug console and
introduces the @external decorator for elegant JavaScript bridge functions.

## Major Features

### 1. Self-Hosted Debug Console (DebugConsole.py)
- Entire debug console UI written in Ritz itself
- Signal-based state management for toggle functionality
- Displays runtime stats (memory, signals, DOM nodes, logs)
- Live reactive updates when signals change in main app
- Keyboard shortcut support (Ctrl+`)

### 2. @external Decorator for JavaScript Bridges
- Pythonic decorator syntax: @external or @bridge
- Parser automatically recognizes and tracks external functions
- Codegen emits proper LLVM declarations
- No more hacky string checks (startswith("js_"))
- Clean, declarative bridge function definitions

Example:
```python
@external
def js_toggle_debug_console():
    pass

def toggle():
    js_toggle_debug_console()  # Clean call to JS bridge
```

### 3. Enhanced RitzLoader Debug Mode
- `new RitzLoader({ debug: true })` auto-loads DebugConsole.wasm
- Keyboard shortcut registration (Ctrl+` toggle)
- Runtime stats injection (memory, signals, DOM nodes)
- Automatic status element hiding when debug enabled
- Debug console isolated in separate WASM runtime

## Bug Fixes

- Fixed reactive text node scoping (prevent global name collisions)
- Fixed CSS specificity for debug console status (use #ritz-debug)
- Fixed signal cross-contamination between runtimes (scope to rootElement)
- Fixed parser to handle expression statements in function bodies
- Fixed conditional branch rendering (append children to wrapper divs)

## Infrastructure Improvements

- Added H4 and Pre elements to syntax.py
- Parser handles @external decorator on top-level functions
- Codegen pre-collects external functions before emitting declarations
- Runtime scopes querySelector to prevent cross-runtime interference
- Debug stats update reactively on every signal change

## Files Added/Modified

New files:
- examples/runtime/DebugConsole.py - Self-hosted debug UI
- examples/runtime/DebugConsole.wasm - Compiled debug console (1.8KB)
- PHASE4_CLEANUP.md - Next phase planning document

Modified:
- ritz/parser.py - @external decorator support
- ritz/llvm_codegen_signals.py - External function handling
- ritz/syntax.py - Added external/bridge decorators, H4, Pre
- examples/runtime/ritz-runtime.js - Debug mode, stats updates
- examples/runtime/styles.css - Merged debug styles
- examples/template.html - Debug mode enabled by default
- examples/highfive/HighFive.html - Simplified using template

## Known Issues (Addressed in PHASE4_CLEANUP.md)

1. Debug console shifts page RIGHT (should shift LEFT)
2. Toggle implementation un-Ritzy (calls JS to manipulate DOM)
   - Should use reactive class binding + @event decorator
   - Needs event object bridge for keyboard events
3. Missing test infrastructure

## Next Steps (Phase 4)

See PHASE4_CLEANUP.md for detailed plan:
- Implement reactive class binding (signal-driven classes)
- Add @event decorator for declarative event registration
- Build event object bridge (access event.key, event.ctrlKey)
- Create Python test mode (execute without browser)
- Add comprehensive test suite
- Update all examples to use new patterns

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-15 18:28:24 -08:00

303 lines
12 KiB
LLVM
Raw Blame History

; Generated by Ritz Framework with Signals
; Components: DebugConsole, RitzMain
; String constants
@.str.0 = private unnamed_addr constant [4 x i8] c"div\00"
@.str.1 = private unnamed_addr constant [6 x i8] c"class\00"
@.str.2 = private unnamed_addr constant [14 x i8] c"debug-section\00"
@.str.3 = private unnamed_addr constant [3 x i8] c"h4\00"
@.str.4 = private unnamed_addr constant [9 x i8] c"FEATURES\00"
@.str.5 = private unnamed_addr constant [4 x i8] c"pre\00"
@.str.6 = private unnamed_addr constant [17 x i8] c"CONSOLE COMMANDS\00"
@.str.7 = private unnamed_addr constant [3 x i8] c"id\00"
@.str.8 = private unnamed_addr constant [11 x i8] c"ritz-debug\00"
@.str.9 = private unnamed_addr constant [13 x i8] c"debug-header\00"
@.str.10 = private unnamed_addr constant [7 x i8] c"status\00"
@.str.11 = private unnamed_addr constant [6 x i8] c"Ready\00"
@.str.12 = private unnamed_addr constant [14 x i8] c"debug-content\00"
@.str.13 = private unnamed_addr constant [10 x i8] c"COMPONENT\00"
@.str.14 = private unnamed_addr constant [1 x i8] c"\00"
@.str.15 = private unnamed_addr constant [18 x i8] c"debug-toggle-hint\00"
@.str.16 = private unnamed_addr constant [29 x i8] c"Press Ctrl+` to toggle debug\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 DebugConsole (reactive state in WASM memory)
@signal_DebugConsole_is_open = global i32 0
; Conditional rendering state
@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_marker = global i32 0
@cond_1_current = global i32 0
@cond_1_then_root = global i32 0
@cond_1_else_root = global i32 0
; Signal helper functions
define i32 @get_is_open() {
entry:
%val = load i32, i32* @signal_DebugConsole_is_open
ret i32 %val
}
define void @set_is_open(i32 %newval) {
entry:
store i32 %newval, i32* @signal_DebugConsole_is_open
; TODO: Trigger DOM update callback
ret void
}
; Event handler: toggle
define void @toggle() {
entry:
ret void
}
; Initialize conditional 0
define void @_init_conditional_0() {
entry:
; Render both branches upfront
%var0 = call i32 @_render_cond_0_then()
%var1 = call i32 @_render_cond_0_else()
store i32 %var0, i32* @cond_0_then_root
store i32 %var1, i32* @cond_0_else_root
%var2 = icmp ne i32 0, 0
%var3 = load i32, i32* @cond_0_marker
br i1 %var2, label %insert_then, label %insert_else
insert_then:
call void @js_replace_at_marker(i32 %var3, i32 0, i32 %var0)
store i32 1, i32* @cond_0_current
ret void
insert_else:
call void @js_replace_at_marker(i32 %var3, i32 0, i32 %var1)
store i32 0, i32* @cond_0_current
ret void
}
; Re-evaluate conditional 0
define void @reevaluate_conditional_0() {
entry:
%var4 = icmp ne i32 0, 0
%var5 = zext i1 %var4 to i32
%var6 = load i32, i32* @cond_0_current
%var7 = icmp ne i32 %var6, %var5
br i1 %var7, label %swap, label %done
swap:
br i1 %var4, label %swap_to_then, label %swap_to_else
swap_to_then:
%var8 = load i32, i32* @cond_0_else_root
%var9 = load i32, i32* @cond_0_then_root
%var10 = load i32, i32* @cond_0_marker
call void @js_replace_at_marker(i32 %var10, i32 %var8, i32 %var9)
store i32 1, i32* @cond_0_current
br label %done
swap_to_else:
%var11 = load i32, i32* @cond_0_then_root
%var12 = load i32, i32* @cond_0_else_root
%var13 = load i32, i32* @cond_0_marker
call void @js_replace_at_marker(i32 %var13, i32 %var11, i32 %var12)
store i32 0, i32* @cond_0_current
br label %done
done:
ret void
}
define i32 @_render_cond_0_then() {
entry:
%var15 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var14 = call i32 @js_create_element(i8* %var15)
%var17 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var16 = call i32 @js_create_element(i8* %var17)
%var18 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.1, i32 0, i32 0
%var19 = getelementptr inbounds [14 x i8], [14 x i8]* @.str.2, i32 0, i32 0
call void @js_set_attribute(i32 %var16, i8* %var18, i8* %var19)
%var21 = getelementptr inbounds [3 x i8], [3 x i8]* @.str.3, i32 0, i32 0
%var20 = call i32 @js_create_element(i8* %var21)
%var22 = call i32 @js_create_text(i8* getelementptr inbounds ([9 x i8], [9 x i8]* @.str.4, i32 0, i32 0))
call void @js_append_child(i32 %var20, i32 %var22)
call void @js_append_child(i32 %var16, i32 %var20)
%var24 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.5, i32 0, i32 0
%var23 = call i32 @js_create_element(i8* %var24)
call void @js_append_child(i32 %var16, i32 %var23)
call void @js_append_child(i32 %var14, i32 %var16)
ret i32 %var14
}
define i32 @_render_cond_0_else() {
entry:
%var26 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var25 = call i32 @js_create_element(i8* %var26)
ret i32 %var25
}
; Initialize conditional 1
define void @_init_conditional_1() {
entry:
; Render both branches upfront
%var27 = call i32 @_render_cond_1_then()
%var28 = call i32 @_render_cond_1_else()
store i32 %var27, i32* @cond_1_then_root
store i32 %var28, i32* @cond_1_else_root
%var29 = icmp ne i32 0, 0
%var30 = load i32, i32* @cond_1_marker
br i1 %var29, label %insert_then, label %insert_else
insert_then:
call void @js_replace_at_marker(i32 %var30, i32 0, i32 %var27)
store i32 1, i32* @cond_1_current
ret void
insert_else:
call void @js_replace_at_marker(i32 %var30, i32 0, i32 %var28)
store i32 0, i32* @cond_1_current
ret void
}
; Re-evaluate conditional 1
define void @reevaluate_conditional_1() {
entry:
%var31 = icmp ne i32 0, 0
%var32 = zext i1 %var31 to i32
%var33 = load i32, i32* @cond_1_current
%var34 = icmp ne i32 %var33, %var32
br i1 %var34, label %swap, label %done
swap:
br i1 %var31, label %swap_to_then, label %swap_to_else
swap_to_then:
%var35 = load i32, i32* @cond_1_else_root
%var36 = load i32, i32* @cond_1_then_root
%var37 = load i32, i32* @cond_1_marker
call void @js_replace_at_marker(i32 %var37, i32 %var35, i32 %var36)
store i32 1, i32* @cond_1_current
br label %done
swap_to_else:
%var38 = load i32, i32* @cond_1_then_root
%var39 = load i32, i32* @cond_1_else_root
%var40 = load i32, i32* @cond_1_marker
call void @js_replace_at_marker(i32 %var40, i32 %var38, i32 %var39)
store i32 0, i32* @cond_1_current
br label %done
done:
ret void
}
define i32 @_render_cond_1_then() {
entry:
%var42 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var41 = call i32 @js_create_element(i8* %var42)
%var44 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var43 = call i32 @js_create_element(i8* %var44)
%var45 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.1, i32 0, i32 0
%var46 = getelementptr inbounds [14 x i8], [14 x i8]* @.str.2, i32 0, i32 0
call void @js_set_attribute(i32 %var43, i8* %var45, i8* %var46)
%var48 = getelementptr inbounds [3 x i8], [3 x i8]* @.str.3, i32 0, i32 0
%var47 = call i32 @js_create_element(i8* %var48)
%var49 = call i32 @js_create_text(i8* getelementptr inbounds ([17 x i8], [17 x i8]* @.str.6, i32 0, i32 0))
call void @js_append_child(i32 %var47, i32 %var49)
call void @js_append_child(i32 %var43, i32 %var47)
%var51 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.5, i32 0, i32 0
%var50 = call i32 @js_create_element(i8* %var51)
call void @js_append_child(i32 %var43, i32 %var50)
call void @js_append_child(i32 %var41, i32 %var43)
ret i32 %var41
}
define i32 @_render_cond_1_else() {
entry:
%var53 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var52 = call i32 @js_create_element(i8* %var53)
ret i32 %var52
}
; Component render function
define i32 @render_DebugConsole(i32 %component_name, i32 %features, i32 %console_commands) {
entry:
%var55 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var54 = call i32 @js_create_element(i8* %var55)
%var56 = getelementptr inbounds [3 x i8], [3 x i8]* @.str.7, i32 0, i32 0
%var57 = getelementptr inbounds [11 x i8], [11 x i8]* @.str.8, i32 0, i32 0
call void @js_set_attribute(i32 %var54, i8* %var56, i8* %var57)
%var59 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var58 = call i32 @js_create_element(i8* %var59)
%var60 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.1, i32 0, i32 0
%var61 = getelementptr inbounds [13 x i8], [13 x i8]* @.str.9, i32 0, i32 0
call void @js_set_attribute(i32 %var58, i8* %var60, i8* %var61)
call void @js_append_child(i32 %var54, i32 %var58)
%var63 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var62 = call i32 @js_create_element(i8* %var63)
%var64 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.1, i32 0, i32 0
%var65 = getelementptr inbounds [7 x i8], [7 x i8]* @.str.10, i32 0, i32 0
call void @js_set_attribute(i32 %var62, i8* %var64, i8* %var65)
%var66 = getelementptr inbounds [3 x i8], [3 x i8]* @.str.7, i32 0, i32 0
%var67 = getelementptr inbounds [7 x i8], [7 x i8]* @.str.10, i32 0, i32 0
call void @js_set_attribute(i32 %var62, i8* %var66, i8* %var67)
%var68 = call i32 @js_create_text(i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.11, i32 0, i32 0))
call void @js_append_child(i32 %var62, i32 %var68)
call void @js_append_child(i32 %var54, i32 %var62)
%var70 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var69 = call i32 @js_create_element(i8* %var70)
%var71 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.1, i32 0, i32 0
%var72 = getelementptr inbounds [14 x i8], [14 x i8]* @.str.12, i32 0, i32 0
call void @js_set_attribute(i32 %var69, i8* %var71, i8* %var72)
%var74 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var73 = call i32 @js_create_element(i8* %var74)
%var75 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.1, i32 0, i32 0
%var76 = getelementptr inbounds [14 x i8], [14 x i8]* @.str.2, i32 0, i32 0
call void @js_set_attribute(i32 %var73, i8* %var75, i8* %var76)
%var78 = getelementptr inbounds [3 x i8], [3 x i8]* @.str.3, i32 0, i32 0
%var77 = call i32 @js_create_element(i8* %var78)
%var79 = call i32 @js_create_text(i8* getelementptr inbounds ([10 x i8], [10 x i8]* @.str.13, i32 0, i32 0))
call void @js_append_child(i32 %var77, i32 %var79)
call void @js_append_child(i32 %var73, i32 %var77)
%var81 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.5, i32 0, i32 0
%var80 = call i32 @js_create_element(i8* %var81)
%var83 = getelementptr inbounds [1 x i8], [1 x i8]* @.str.14, i32 0, i32 0
%var82 = call i32 @js_create_text(i8* %var83)
call void @js_append_child(i32 %var80, i32 %var82)
call void @js_append_child(i32 %var73, i32 %var80)
call void @js_append_child(i32 %var69, i32 %var73)
%var84 = call i32 @js_create_marker()
call void @js_append_child(i32 %var69, i32 %var84)
store i32 %var84, i32* @cond_0_marker
call void @_init_conditional_0()
%var85 = call i32 @js_create_marker()
call void @js_append_child(i32 %var69, i32 %var85)
store i32 %var85, i32* @cond_1_marker
call void @_init_conditional_1()
call void @js_append_child(i32 %var54, i32 %var69)
%var87 = getelementptr inbounds [4 x i8], [4 x i8]* @.str.0, i32 0, i32 0
%var86 = call i32 @js_create_element(i8* %var87)
%var88 = getelementptr inbounds [6 x i8], [6 x i8]* @.str.1, i32 0, i32 0
%var89 = getelementptr inbounds [18 x i8], [18 x i8]* @.str.15, i32 0, i32 0
call void @js_set_attribute(i32 %var86, i8* %var88, i8* %var89)
%var90 = call i32 @js_create_text(i8* getelementptr inbounds ([29 x i8], [29 x i8]* @.str.16, i32 0, i32 0))
call void @js_append_child(i32 %var86, i32 %var90)
ret i32 %var54
}
; Component render function
define i32 @render_RitzMain() {
entry:
%var91 = call i32 @render_DebugConsole()
ret i32 %var91
}
; Main entry point
define void @main() {
entry:
%root = call i32 @render_RitzMain()
call void @js_set_root(i32 %root)
ret void
}
Reference in new issue View Git Blame Copy Permalink