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

examples/runtime/index.html

@@ -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>