feat: implement framework and refactor everything

2025-08-26 20:35:15 +02:00
parent e23b40e0cb
commit 918c019dd5
23 changed files with 6291 additions and 1279 deletions
--- a/public/test-framework.html
+++ b/public/test-framework.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Framework Test</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
+        .success { color: green; }
+        .error { color: red; }
+        button { margin: 5px; padding: 10px; }
+        input { margin: 5px; padding: 5px; }
+    </style>
+</head>
+<body>
+    <h1>SPORE UI Framework Test</h1>
+    
+    <div class="test-section">
+        <h2>Framework Initialization Test</h2>
+        <div id="framework-status">Checking...</div>
+    </div>
+    
+    <div class="test-section">
+        <h2>Event Bus Test</h2>
+        <button id="publish-btn">Publish Test Event</button>
+        <div id="event-log"></div>
+    </div>
+    
+    <div class="test-section">
+        <h2>View Model Test</h2>
+        <input type="text" id="name-input" placeholder="Enter name">
+        <button id="update-btn">Update Name</button>
+        <div id="name-display">Name: (not set)</div>
+    </div>
+    
+    <div class="test-section">
+        <h2>Component Test</h2>
+        <div id="test-component">
+            <div class="loading">Loading...</div>
+        </div>
+        <button id="refresh-btn">Refresh Component</button>
+    </div>
+
+    <script src="framework.js"></script>
+    <script>
+        // Test framework initialization
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('Testing framework...');
+            
+            // Test 1: Framework initialization
+            if (window.app && window.app.eventBus) {
+                document.getElementById('framework-status').innerHTML = 
+                    '<span class="success">✅ Framework initialized successfully</span>';
+            } else {
+                document.getElementById('framework-status').innerHTML = 
+                    '<span class="error">❌ Framework failed to initialize</span>';
+            }
+            
+            // Test 2: Event Bus
+            const eventLog = document.getElementById('event-log');
+            const unsubscribe = window.app.eventBus.subscribe('test-event', (data) => {
+                eventLog.innerHTML += `<div>📡 Event received: ${JSON.stringify(data)}</div>`;
+            });
+            
+            document.getElementById('publish-btn').addEventListener('click', () => {
+                window.app.eventBus.publish('test-event', { 
+                    message: 'Hello from test!', 
+                    timestamp: new Date().toISOString() 
+                });
+            });
+            
+            // Test 3: View Model
+            const testVM = new ViewModel();
+            testVM.setEventBus(window.app.eventBus);
+            
+            testVM.subscribe('name', (value) => {
+                document.getElementById('name-display').textContent = `Name: ${value || '(not set)'}`;
+            });
+            
+            document.getElementById('update-btn').addEventListener('click', () => {
+                const name = document.getElementById('name-input').value;
+                testVM.set('name', name);
+            });
+            
+            // Test 4: Component
+            class TestComponent extends Component {
+                constructor(container, viewModel, eventBus) {
+                    super(container, viewModel, eventBus);
+                }
+                
+                setupEventListeners() {
+                    const refreshBtn = document.getElementById('refresh-btn');
+                    if (refreshBtn) {
+                        this.addEventListener(refreshBtn, 'click', this.handleRefresh.bind(this));
+                    }
+                }
+                
+                render() {
+                    const data = this.viewModel ? this.viewModel.get('data') : null;
+                    if (data) {
+                        this.setHTML('', `<div class="success">✅ Component data: ${data}</div>`);
+                    } else {
+                        this.setHTML('', `<div class="loading">Loading component data...</div>`);
+                    }
+                }
+                
+                handleRefresh() {
+                    if (this.viewModel) {
+                        this.viewModel.set('data', `Refreshed at ${new Date().toLocaleTimeString()}`);
+                    }
+                }
+            }
+            
+            const testComponentVM = new ViewModel();
+            testComponentVM.setEventBus(window.app.eventBus);
+            testComponentVM.set('data', 'Initial component data');
+            
+            const testComponent = new TestComponent(
+                document.getElementById('test-component'),
+                testComponentVM,
+                window.app.eventBus
+            );
+            
+            testComponent.mount();
+            
+            console.log('Framework test completed');
+        });
+    </script>
+</body>
+</html>