Parser: Support multiple components in one file, change args to params with defaults
This commit is contained in:
1 parent
635d466874
commit
81d51d5617
38 files changed
+2151
-455
No files matched your search
@@ -4,7 +4,7 @@
|
||||
<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">
|
||||
<link rel="stylesheet" href="../runtime/ritz-debug.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
@@ -51,8 +51,8 @@ ritzInstance.exports</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="ritz-runtime.js"></script>
|
||||
<script src="ritz-debug.js"></script>
|
||||
<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') {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<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="ritz-debug.css">
|
||||
<link rel="stylesheet" href="../runtime/ritz-debug.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
@@ -80,8 +80,8 @@ ritzInstance.exports.increment()</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="ritz-runtime.js"></script>
|
||||
<script src="ritz-debug.js"></script>
|
||||
<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') {
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ritz Framework Demo</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
#app {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.header {
|
||||
border-bottom: 2px solid #333;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.status {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
.error {
|
||||
background: #fee;
|
||||
color: #c00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>🎭 Ritz Framework</h1>
|
||||
<p>Python components running in WebAssembly</p>
|
||||
</div>
|
||||
|
||||
<div class="status" id="status">Loading...</div>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
<script src="ritz.js"></script>
|
||||
<script>
|
||||
// Configuration
|
||||
const COMPONENT_NAME = 'HelloWorld'; // Change this to your component name
|
||||
const WASM_FILE = '../examples/HelloWorld.wasm';
|
||||
|
||||
async function loadComponent() {
|
||||
const status = document.getElementById('status');
|
||||
const appRoot = document.getElementById('app');
|
||||
|
||||
try {
|
||||
// Initialize Ritz runtime
|
||||
status.textContent = '⏳ Initializing Ritz runtime...';
|
||||
const runtime = new RitzRuntime(appRoot);
|
||||
|
||||
// Load WASM module
|
||||
status.textContent = `⏳ Loading ${WASM_FILE}...`;
|
||||
|
||||
const response = await fetch(WASM_FILE);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch ${WASM_FILE}: ${response.status}`);
|
||||
}
|
||||
|
||||
const wasmBytes = await response.arrayBuffer();
|
||||
|
||||
// Set up Module for Emscripten
|
||||
window.Module = {
|
||||
wasmBinary: wasmBytes,
|
||||
ritz: runtime, // Provide runtime to WASM
|
||||
onRuntimeInitialized: function() {
|
||||
status.textContent = '⏳ Rendering component...';
|
||||
|
||||
try {
|
||||
// Call the render function
|
||||
const renderFn = Module[`_render_${COMPONENT_NAME}`];
|
||||
if (!renderFn) {
|
||||
throw new Error(`Component render_${COMPONENT_NAME} not found in WASM exports`);
|
||||
}
|
||||
|
||||
// Render the component
|
||||
Module.ccall(`render_${COMPONENT_NAME}`, null, [], []);
|
||||
|
||||
status.textContent = `✅ ${COMPONENT_NAME} rendered successfully!`;
|
||||
status.className = 'status';
|
||||
} catch (error) {
|
||||
status.textContent = `❌ Render error: ${error.message}`;
|
||||
status.className = 'status error';
|
||||
console.error('Render error:', error);
|
||||
}
|
||||
},
|
||||
print: function(text) {
|
||||
console.log('[WASM]', text);
|
||||
},
|
||||
printErr: function(text) {
|
||||
console.error('[WASM]', text);
|
||||
}
|
||||
};
|
||||
|
||||
// Load the Emscripten JS glue code
|
||||
status.textContent = '⏳ Loading WASM runtime...';
|
||||
const script = document.createElement('script');
|
||||
script.src = WASM_FILE.replace('.wasm', '.js');
|
||||
script.onerror = () => {
|
||||
throw new Error('Failed to load WASM JS glue code');
|
||||
};
|
||||
document.body.appendChild(script);
|
||||
|
||||
} catch (error) {
|
||||
status.textContent = `❌ Error: ${error.message}`;
|
||||
status.className = 'status error';
|
||||
console.error('Load error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Start loading when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', loadComponent);
|
||||
} else {
|
||||
loadComponent();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
/* Ritz Debug Bar Styles */
|
||||
|
||||
.ritz-debug {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
height: 100vh;
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 13px;
|
||||
box-shadow: -2px 0 10px rgba(0,0,0,0.3);
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 9999;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ritz-debug.hidden {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.debug-header {
|
||||
background: #252525;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #3e3e3e;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.debug-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.debug-header button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #d4d4d4;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.debug-header button:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: 15px;
|
||||
padding: 10px;
|
||||
background: #2d2d30;
|
||||
border-left: 3px solid #007acc;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
border-left-color: #4ec9b0;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
border-left-color: #f48771;
|
||||
color: #f48771;
|
||||
}
|
||||
|
||||
.debug-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.debug-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.debug-section h4 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #858585;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.debug-section pre {
|
||||
background: #252525;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
overflow-x: auto;
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Toggle hint */
|
||||
.debug-toggle-hint {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #252525;
|
||||
color: #d4d4d4;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 11px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
opacity: 0;
|
||||
animation: fadeInOut 3s ease-in-out;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0%, 100% { opacity: 0; }
|
||||
10%, 90% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* App container default styles */
|
||||
#app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
transition: margin-right 0.3s ease;
|
||||
}
|
||||
|
||||
body.debug-open #app {
|
||||
margin-right: 400px;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Ritz Debug Bar Controller
|
||||
*/
|
||||
|
||||
class RitzDebug {
|
||||
constructor() {
|
||||
this.debugBar = document.getElementById('ritz-debug');
|
||||
this.isOpen = false;
|
||||
|
||||
// Setup keyboard shortcut (Ctrl+`)
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey && e.key === '`') {
|
||||
e.preventDefault();
|
||||
this.toggle();
|
||||
}
|
||||
});
|
||||
|
||||
// Show hint on first load
|
||||
this.showHint();
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.isOpen = !this.isOpen;
|
||||
|
||||
if (this.debugBar) {
|
||||
if (this.isOpen) {
|
||||
this.debugBar.classList.remove('hidden');
|
||||
document.body.classList.add('debug-open');
|
||||
} else {
|
||||
this.debugBar.classList.add('hidden');
|
||||
document.body.classList.remove('debug-open');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
open() {
|
||||
this.isOpen = true;
|
||||
if (this.debugBar) {
|
||||
this.debugBar.classList.remove('hidden');
|
||||
document.body.classList.add('debug-open');
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.isOpen = false;
|
||||
if (this.debugBar) {
|
||||
this.debugBar.classList.add('hidden');
|
||||
document.body.classList.remove('debug-open');
|
||||
}
|
||||
}
|
||||
|
||||
showHint() {
|
||||
// Show toggle hint for 3 seconds
|
||||
const hint = document.createElement('div');
|
||||
hint.className = 'debug-toggle-hint';
|
||||
hint.textContent = 'Press Ctrl+` to toggle debug';
|
||||
document.body.appendChild(hint);
|
||||
|
||||
setTimeout(() => {
|
||||
hint.remove();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
log(message, type = 'info') {
|
||||
const status = document.getElementById('status');
|
||||
if (status) {
|
||||
status.textContent = message;
|
||||
status.className = 'status ' + type;
|
||||
}
|
||||
console.log(`[Ritz] ${message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize debug controller
|
||||
const ritzDebug = new RitzDebug();
|
||||
|
||||
// Export
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = RitzDebug;
|
||||
} else {
|
||||
window.RitzDebug = RitzDebug;
|
||||
window.ritzDebug = ritzDebug;
|
||||
}
|
||||
@@ -139,6 +139,52 @@ class RitzRuntime {
|
||||
});
|
||||
}
|
||||
|
||||
// ===== Reactive Conditional Rendering =====
|
||||
|
||||
js_create_marker() {
|
||||
// Create a comment node as a marker for conditional insertion
|
||||
const marker = document.createComment('conditional-marker');
|
||||
const id = this.nextNodeId++;
|
||||
this.nodes.set(id, marker);
|
||||
this._log(`Created marker node ${id}`);
|
||||
return id;
|
||||
}
|
||||
|
||||
js_replace_at_marker(markerId, oldNodeId, newNodeId) {
|
||||
// Replace DOM node at marker position
|
||||
const marker = this.nodes.get(markerId);
|
||||
if (!marker) {
|
||||
console.error(`Marker ${markerId} not found`);
|
||||
return;
|
||||
}
|
||||
|
||||
const parent = marker.parentNode;
|
||||
if (!parent) {
|
||||
console.error(`Marker has no parent`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove old node if it exists (0 means no old node)
|
||||
if (oldNodeId !== 0) {
|
||||
const oldNode = this.nodes.get(oldNodeId);
|
||||
if (oldNode && oldNode.parentNode) {
|
||||
oldNode.parentNode.removeChild(oldNode);
|
||||
this._log(`Removed old node ${oldNodeId}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Insert new node after marker (only if newNodeId is not 0)
|
||||
if (newNodeId !== 0) {
|
||||
const newNode = this.nodes.get(newNodeId);
|
||||
if (!newNode) {
|
||||
console.error(`New node ${newNodeId} not found`);
|
||||
return;
|
||||
}
|
||||
parent.insertBefore(newNode, marker.nextSibling);
|
||||
this._log(`Inserted node ${newNodeId} at marker ${markerId}`);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Memory & String Utilities =====
|
||||
|
||||
readString(ptr) {
|
||||
@@ -186,7 +232,7 @@ class RitzLoader {
|
||||
this.onError = options.onError || ((err) => console.error(err));
|
||||
}
|
||||
|
||||
async load(wasmPath, componentName) {
|
||||
async load(wasmPath, componentName, props = {}) {
|
||||
try {
|
||||
this.setStatus('⏳ Creating runtime...');
|
||||
const runtime = new RitzRuntime(this.rootElement);
|
||||
@@ -211,6 +257,8 @@ class RitzLoader {
|
||||
js_set_root: (e) => runtime.js_set_root(e),
|
||||
js_bind_event: (e, n, h) => runtime.js_bind_event(e, n, h),
|
||||
js_update_text_content: (n, t) => runtime.js_update_text_content(n, t),
|
||||
js_create_marker: () => runtime.js_create_marker(),
|
||||
js_replace_at_marker: (m, o, n) => runtime.js_replace_at_marker(m, o, n),
|
||||
}
|
||||
};
|
||||
|
||||
@@ -222,12 +270,19 @@ class RitzLoader {
|
||||
|
||||
this.setStatus(`⏳ Rendering ${componentName}...`);
|
||||
|
||||
// Call the render function
|
||||
// Call the render function with props
|
||||
const renderFn = instance.exports[`render_${componentName}`];
|
||||
if (!renderFn) {
|
||||
throw new Error(`render_${componentName} not found in WASM exports`);
|
||||
}
|
||||
renderFn();
|
||||
|
||||
// Pass props as positional arguments
|
||||
// Components now RETURN the root element ID instead of calling js_set_root
|
||||
const propValues = Object.values(props);
|
||||
const rootElementId = renderFn(...propValues);
|
||||
|
||||
// Mount the returned element to the DOM
|
||||
runtime.js_set_root(rootElementId);
|
||||
|
||||
// Update signals
|
||||
runtime.updateSignals();
|
||||
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* Ritz Runtime - DOM Bridge for WASM
|
||||
*
|
||||
* Provides DOM manipulation functions called by WASM code.
|
||||
*/
|
||||
|
||||
class RitzRuntime {
|
||||
constructor(rootElement) {
|
||||
this.rootElement = rootElement || document.body;
|
||||
this.nodes = new Map(); // Map of node IDs to DOM nodes
|
||||
this.nextNodeId = 1;
|
||||
this.rootNodeId = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a DOM element and return its ID
|
||||
*/
|
||||
createElement(tag) {
|
||||
const element = document.createElement(tag);
|
||||
const id = this.nextNodeId++;
|
||||
this.nodes.set(id, element);
|
||||
console.log(`[Ritz] Created element <${tag}> with ID ${id}`);
|
||||
return id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a text node and return its ID
|
||||
*/
|
||||
createTextNode(text) {
|
||||
const textNode = document.createTextNode(text);
|
||||
const id = this.nextNodeId++;
|
||||
this.nodes.set(id, textNode);
|
||||
console.log(`[Ritz] Created text node "${text}" with ID ${id}`);
|
||||
return id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Append child to parent
|
||||
*/
|
||||
appendChild(parentId, childId) {
|
||||
const parent = this.nodes.get(parentId);
|
||||
const child = this.nodes.get(childId);
|
||||
|
||||
if (!parent || !child) {
|
||||
console.error(`[Ritz] appendChild failed: parent=${parentId}, child=${childId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
parent.appendChild(child);
|
||||
console.log(`[Ritz] Appended node ${childId} to node ${parentId}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set an attribute on an element
|
||||
*/
|
||||
setAttribute(elemId, name, value) {
|
||||
const element = this.nodes.get(elemId);
|
||||
|
||||
if (!element) {
|
||||
console.error(`[Ritz] setAttribute failed: element=${elemId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle special cases
|
||||
if (name === 'class') {
|
||||
element.className = value;
|
||||
} else {
|
||||
element.setAttribute(name, value);
|
||||
}
|
||||
|
||||
console.log(`[Ritz] Set attribute ${name}="${value}" on node ${elemId}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the root element and mount it to DOM
|
||||
*/
|
||||
setRoot(elemId) {
|
||||
const element = this.nodes.get(elemId);
|
||||
|
||||
if (!element) {
|
||||
console.error(`[Ritz] setRoot failed: element=${elemId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.rootNodeId = elemId;
|
||||
|
||||
// Clear the root element
|
||||
this.rootElement.innerHTML = '';
|
||||
|
||||
// Mount the component
|
||||
this.rootElement.appendChild(element);
|
||||
|
||||
console.log(`[Ritz] Mounted component (node ${elemId}) to DOM`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all nodes (for hot reload)
|
||||
*/
|
||||
clear() {
|
||||
this.nodes.clear();
|
||||
this.nextNodeId = 1;
|
||||
this.rootNodeId = null;
|
||||
this.rootElement.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Export for use in module or global scope
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = RitzRuntime;
|
||||
} else {
|
||||
window.RitzRuntime = RitzRuntime;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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
|
||||
}
|
||||
@@ -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}"
|
||||
Executable
BIN
Binary file not shown.
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Toggle - Conditional Rendering - 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;
|
||||
}
|
||||
#app {
|
||||
max-width: 800px;
|
||||
margin: 50px auto;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
}
|
||||
.toggle-app {
|
||||
text-align: center;
|
||||
}
|
||||
.toggle-app h1 {
|
||||
color: #667eea;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.toggle-app .info {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.toggle-app .controls {
|
||||
margin: 30px 0;
|
||||
}
|
||||
.toggle-app button {
|
||||
font-size: 18px;
|
||||
padding: 15px 40px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-weight: 600;
|
||||
}
|
||||
.toggle-app button:hover {
|
||||
background: #5568d3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.toggle-app button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.toggle-app .display {
|
||||
margin-top: 40px;
|
||||
min-height: 150px;
|
||||
}
|
||||
.toggle-app .high,
|
||||
.toggle-app .low {
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
animation: fadeIn 0.3s;
|
||||
}
|
||||
.toggle-app .high {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
}
|
||||
.toggle-app .low {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
color: white;
|
||||
}
|
||||
.toggle-app .high p,
|
||||
.toggle-app .low p {
|
||||
margin: 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
.toggle-app .count {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
</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>Toggle.py (Conditional Rendering)</pre>
|
||||
</div>
|
||||
<div class="debug-section">
|
||||
<h4>Features</h4>
|
||||
<pre>✓ if/else statements in WASM
|
||||
✓ Comparison operators (>)
|
||||
✓ Conditional DOM rendering
|
||||
✓ Signal-based conditions</pre>
|
||||
</div>
|
||||
<div class="debug-section">
|
||||
<h4>Console Commands</h4>
|
||||
<pre>ritzRuntime.getLog()
|
||||
ritzInstance.exports.get_count()
|
||||
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('Toggle.wasm', 'Toggle');
|
||||
});
|
||||
} else {
|
||||
new RitzLoader().load('Toggle.wasm', 'Toggle');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,192 @@
|
||||
; Generated by Ritz Framework with Signals
|
||||
; Component: Toggle
|
||||
|
||||
; 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 [5 x i8] c"high\00"
|
||||
@.str.3 = private unnamed_addr constant [2 x i8] c"p\00"
|
||||
@.str.4 = private unnamed_addr constant [24 x i8] c"✨ Count is HIGH (> 5)\00"
|
||||
@.str.5 = private unnamed_addr constant [6 x i8] c"count\00"
|
||||
@.str.6 = private unnamed_addr constant [2 x i8] c"0\00"
|
||||
@.str.7 = private unnamed_addr constant [4 x i8] c"low\00"
|
||||
@.str.8 = private unnamed_addr constant [25 x i8] c"📉 Count is low (<= 5)\00"
|
||||
@.str.9 = private unnamed_addr constant [11 x i8] c"toggle-app\00"
|
||||
@.str.10 = private unnamed_addr constant [3 x i8] c"h1\00"
|
||||
@.str.11 = private unnamed_addr constant [27 x i8] c"Conditional Rendering Demo\00"
|
||||
@.str.12 = private unnamed_addr constant [5 x i8] c"info\00"
|
||||
@.str.13 = private unnamed_addr constant [44 x i8] c"This demonstrates if/else rendering in WASM\00"
|
||||
@.str.14 = private unnamed_addr constant [9 x i8] c"controls\00"
|
||||
@.str.15 = private unnamed_addr constant [7 x i8] c"button\00"
|
||||
@.str.16 = private unnamed_addr constant [6 x i8] c"click\00"
|
||||
@.str.17 = private unnamed_addr constant [10 x i8] c"increment\00"
|
||||
@.str.18 = private unnamed_addr constant [18 x i8] c"Increment Counter\00"
|
||||
@.str.19 = private unnamed_addr constant [8 x i8] c"display\00"
|
||||
|
||||
; Signal storage (reactive state in WASM memory)
|
||||
@signal_count = 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
|
||||
|
||||
; 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_count() {
|
||||
entry:
|
||||
%val = load i32, i32* @signal_count
|
||||
ret i32 %val
|
||||
}
|
||||
|
||||
define void @set_count(i32 %newval) {
|
||||
entry:
|
||||
store i32 %newval, i32* @signal_count
|
||||
; TODO: Trigger DOM update callback
|
||||
ret void
|
||||
}
|
||||
|
||||
; Event handler: increment
|
||||
define void @increment() {
|
||||
entry:
|
||||
%var0 = load i32, i32* @signal_count
|
||||
%var1 = add i32 %var0, 1
|
||||
store i32 %var1, i32* @signal_count
|
||||
call void @reevaluate_conditional_0()
|
||||
ret void
|
||||
}
|
||||
|
||||
; Conditional 0 - then branch
|
||||
define i32 @_render_cond_0_then() {
|
||||
entry:
|
||||
%var2 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 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 ([5 x i8], [5 x i8]* @.str.2, i32 0, i32 0))
|
||||
%var3 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.3, i32 0, i32 0))
|
||||
%var4 = call i32 @js_create_text(i8* getelementptr inbounds ([24 x i8], [24 x i8]* @.str.4, i32 0, i32 0))
|
||||
call void @js_append_child(i32 %var3, i32 %var4)
|
||||
call void @js_append_child(i32 %var2, i32 %var3)
|
||||
%var5 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.3, i32 0, i32 0))
|
||||
call void @js_set_attribute(i32 %var5, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.5, i32 0, i32 0))
|
||||
; TODO: Format f-string with signal count
|
||||
%var6 = call i32 @js_create_text(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.6, i32 0, i32 0))
|
||||
call void @js_append_child(i32 %var5, i32 %var6)
|
||||
call void @js_append_child(i32 %var2, i32 %var5)
|
||||
ret i32 %var2
|
||||
}
|
||||
|
||||
; Conditional 0 - else branch
|
||||
define i32 @_render_cond_0_else() {
|
||||
entry:
|
||||
%var7 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.0, i32 0, i32 0))
|
||||
call void @js_set_attribute(i32 %var7, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.7, i32 0, i32 0))
|
||||
%var8 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.3, i32 0, i32 0))
|
||||
%var9 = call i32 @js_create_text(i8* getelementptr inbounds ([25 x i8], [25 x i8]* @.str.8, i32 0, i32 0))
|
||||
call void @js_append_child(i32 %var8, i32 %var9)
|
||||
call void @js_append_child(i32 %var7, i32 %var8)
|
||||
%var10 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.3, 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 ([6 x i8], [6 x i8]* @.str.5, i32 0, i32 0))
|
||||
; TODO: Format f-string with signal count
|
||||
%var11 = call i32 @js_create_text(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.6, i32 0, i32 0))
|
||||
call void @js_append_child(i32 %var10, i32 %var11)
|
||||
call void @js_append_child(i32 %var7, i32 %var10)
|
||||
ret i32 %var7
|
||||
}
|
||||
|
||||
; 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:
|
||||
%var12 = load i32, i32* @signal_count
|
||||
%var13 = icmp sgt i32 %var12, 5
|
||||
%var15 = load i32, i32* @cond_0_current
|
||||
%var16 = zext i1 %var13 to i32
|
||||
%var17 = icmp ne i32 %var15, %var16
|
||||
br i1 %var17, label %swap, label %done
|
||||
swap:
|
||||
br i1 %var13, label %swap_to_then, label %swap_to_else
|
||||
swap_to_then:
|
||||
%var18 = load i32, i32* @cond_0_else_root
|
||||
%var19 = load i32, i32* @cond_0_then_root
|
||||
%var20 = load i32, i32* @cond_0_marker
|
||||
call void @js_replace_at_marker(i32 %var20, i32 %var18, i32 %var19)
|
||||
store i32 1, i32* @cond_0_current
|
||||
br label %done
|
||||
swap_to_else:
|
||||
%var21 = load i32, i32* @cond_0_then_root
|
||||
%var22 = load i32, i32* @cond_0_else_root
|
||||
%var23 = load i32, i32* @cond_0_marker
|
||||
call void @js_replace_at_marker(i32 %var23, i32 %var21, i32 %var22)
|
||||
store i32 0, i32* @cond_0_current
|
||||
br label %done
|
||||
done:
|
||||
ret void
|
||||
}
|
||||
|
||||
; Component render function
|
||||
define void @render_Toggle() {
|
||||
entry:
|
||||
%var24 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.0, i32 0, i32 0))
|
||||
call void @js_set_attribute(i32 %var24, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([11 x i8], [11 x i8]* @.str.9, i32 0, i32 0))
|
||||
%var25 = call i32 @js_create_element(i8* getelementptr inbounds ([3 x i8], [3 x i8]* @.str.10, i32 0, i32 0))
|
||||
%var26 = call i32 @js_create_text(i8* getelementptr inbounds ([27 x i8], [27 x i8]* @.str.11, i32 0, i32 0))
|
||||
call void @js_append_child(i32 %var25, i32 %var26)
|
||||
call void @js_append_child(i32 %var24, i32 %var25)
|
||||
%var27 = call i32 @js_create_element(i8* getelementptr inbounds ([2 x i8], [2 x i8]* @.str.3, i32 0, i32 0))
|
||||
call void @js_set_attribute(i32 %var27, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([5 x i8], [5 x i8]* @.str.12, i32 0, i32 0))
|
||||
%var28 = call i32 @js_create_text(i8* getelementptr inbounds ([44 x i8], [44 x i8]* @.str.13, i32 0, i32 0))
|
||||
call void @js_append_child(i32 %var27, i32 %var28)
|
||||
call void @js_append_child(i32 %var24, i32 %var27)
|
||||
%var29 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.0, i32 0, i32 0))
|
||||
call void @js_set_attribute(i32 %var29, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([9 x i8], [9 x i8]* @.str.14, i32 0, i32 0))
|
||||
%var30 = call i32 @js_create_element(i8* getelementptr inbounds ([7 x i8], [7 x i8]* @.str.15, i32 0, i32 0))
|
||||
call void @js_bind_event(i32 %var30, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.16, i32 0, i32 0), i8* getelementptr inbounds ([10 x i8], [10 x i8]* @.str.17, i32 0, i32 0))
|
||||
%var31 = call i32 @js_create_text(i8* getelementptr inbounds ([18 x i8], [18 x i8]* @.str.18, i32 0, i32 0))
|
||||
call void @js_append_child(i32 %var30, i32 %var31)
|
||||
call void @js_append_child(i32 %var29, i32 %var30)
|
||||
call void @js_append_child(i32 %var24, i32 %var29)
|
||||
%var32 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.0, i32 0, i32 0))
|
||||
call void @js_set_attribute(i32 %var32, i8* getelementptr inbounds ([6 x i8], [6 x i8]* @.str.1, i32 0, i32 0), i8* getelementptr inbounds ([8 x i8], [8 x i8]* @.str.19, i32 0, i32 0))
|
||||
%var33 = call i32 @js_create_element(i8* getelementptr inbounds ([4 x i8], [4 x i8]* @.str.0, i32 0, i32 0))
|
||||
%var34 = call i32 @js_create_marker()
|
||||
call void @js_append_child(i32 %var33, i32 %var34)
|
||||
store i32 %var34, i32* @cond_0_marker
|
||||
store i32 %var33, i32* @cond_0_parent
|
||||
%var35 = load i32, i32* @signal_count
|
||||
%var36 = icmp sgt i32 %var35, 5
|
||||
call void @_init_conditional_0(i1 %var36)
|
||||
call void @js_append_child(i32 %var32, i32 %var33)
|
||||
call void @js_append_child(i32 %var24, i32 %var32)
|
||||
call void @js_set_root(i32 %var24)
|
||||
ret void
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
"""
|
||||
Toggle component - Demonstrates conditional rendering with if statements.
|
||||
|
||||
This component uses a signal with comparison to conditionally render content.
|
||||
"""
|
||||
|
||||
from ritz.syntax import *
|
||||
|
||||
|
||||
@component
|
||||
def Toggle():
|
||||
"""Counter that shows different content based on threshold."""
|
||||
count = signal(0)
|
||||
|
||||
def increment():
|
||||
count += 1
|
||||
|
||||
with Div(class_="toggle-app"):
|
||||
with H1():
|
||||
yield "Conditional Rendering Demo"
|
||||
|
||||
with P(class_="info"):
|
||||
yield "This demonstrates if/else rendering in WASM"
|
||||
|
||||
with Div(class_="controls"):
|
||||
with Button(onclick=increment):
|
||||
yield "Increment Counter"
|
||||
|
||||
with Div(class_="display"):
|
||||
if count > 5:
|
||||
with Div(class_="high"):
|
||||
with P():
|
||||
yield "✨ Count is HIGH (> 5)"
|
||||
with P(class_="count"):
|
||||
yield f"Current count: {count}"
|
||||
else:
|
||||
with Div(class_="low"):
|
||||
with P():
|
||||
yield "📉 Count is low (<= 5)"
|
||||
with P(class_="count"):
|
||||
yield f"Current count: {count}"
|
||||
Executable
BIN
Binary file not shown.
@@ -0,0 +1,131 @@
|
||||
/* Ritz Debug Bar Styles */
|
||||
|
||||
.ritz-debug {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
height: 100vh;
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 13px;
|
||||
box-shadow: -2px 0 10px rgba(0,0,0,0.3);
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 9999;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ritz-debug.hidden {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.debug-header {
|
||||
background: #252525;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #3e3e3e;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.debug-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.debug-header button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #d4d4d4;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.debug-header button:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: 15px;
|
||||
padding: 10px;
|
||||
background: #2d2d30;
|
||||
border-left: 3px solid #007acc;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
border-left-color: #4ec9b0;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
border-left-color: #f48771;
|
||||
color: #f48771;
|
||||
}
|
||||
|
||||
.debug-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.debug-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.debug-section h4 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #858585;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.debug-section pre {
|
||||
background: #252525;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
overflow-x: auto;
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Toggle hint */
|
||||
.debug-toggle-hint {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #252525;
|
||||
color: #d4d4d4;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 11px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
opacity: 0;
|
||||
animation: fadeInOut 3s ease-in-out;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0%, 100% { opacity: 0; }
|
||||
10%, 90% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* App container default styles */
|
||||
#app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
transition: margin-right 0.3s ease;
|
||||
}
|
||||
|
||||
body.debug-open #app {
|
||||
margin-right: 400px;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Ritz Debug Bar Controller
|
||||
*/
|
||||
|
||||
class RitzDebug {
|
||||
constructor() {
|
||||
this.debugBar = document.getElementById('ritz-debug');
|
||||
this.isOpen = false;
|
||||
|
||||
// Setup keyboard shortcut (Ctrl+`)
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey && e.key === '`') {
|
||||
e.preventDefault();
|
||||
this.toggle();
|
||||
}
|
||||
});
|
||||
|
||||
// Show hint on first load
|
||||
this.showHint();
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.isOpen = !this.isOpen;
|
||||
|
||||
if (this.debugBar) {
|
||||
if (this.isOpen) {
|
||||
this.debugBar.classList.remove('hidden');
|
||||
document.body.classList.add('debug-open');
|
||||
} else {
|
||||
this.debugBar.classList.add('hidden');
|
||||
document.body.classList.remove('debug-open');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
open() {
|
||||
this.isOpen = true;
|
||||
if (this.debugBar) {
|
||||
this.debugBar.classList.remove('hidden');
|
||||
document.body.classList.add('debug-open');
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.isOpen = false;
|
||||
if (this.debugBar) {
|
||||
this.debugBar.classList.add('hidden');
|
||||
document.body.classList.remove('debug-open');
|
||||
}
|
||||
}
|
||||
|
||||
showHint() {
|
||||
// Show toggle hint for 3 seconds
|
||||
const hint = document.createElement('div');
|
||||
hint.className = 'debug-toggle-hint';
|
||||
hint.textContent = 'Press Ctrl+` to toggle debug';
|
||||
document.body.appendChild(hint);
|
||||
|
||||
setTimeout(() => {
|
||||
hint.remove();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
log(message, type = 'info') {
|
||||
const status = document.getElementById('status');
|
||||
if (status) {
|
||||
status.textContent = message;
|
||||
status.className = 'status ' + type;
|
||||
}
|
||||
console.log(`[Ritz] ${message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize debug controller
|
||||
const ritzDebug = new RitzDebug();
|
||||
|
||||
// Export
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = RitzDebug;
|
||||
} else {
|
||||
window.RitzDebug = RitzDebug;
|
||||
window.ritzDebug = ritzDebug;
|
||||
}
|
||||
Reference in new issue
Block a user