ritz/runtime/index.html

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