Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import express from 'express'; import { fileURLToPath } from 'url'; import { dirname, join } from 'path'; import { readFileSync } from 'fs'; import { renderToString } from './packages/core/src/rendering/html-renderer.js'; import { Performance } from './website/src/pages/Performance.js'; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const app = express(); const port = 3000; // Serve static files app.use('/src', express.static(join(__dirname, 'src'))); app.use('/examples', express.static(join(__dirname, 'examples'))); app.use(express.static(join(__dirname, 'website/public'))); // Render the Performance page app.get('/', async (req, res) => { try { const performanceComponent = Performance(); const html = renderToString(performanceComponent); // Using performance.js from public directory instead const fullPage = ` <!DOCTYPE html> <html> <head> <title>Performance Testing</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .performance-page { max-width: 1200px; margin: 0 auto; padding: 20px; } .performance-header { text-align: center; margin-bottom: 30px; } .test-controls { background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0; } .button-group { display: flex; gap: 10px; flex-wrap: wrap; } .button { padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; } .button.primary { background: #007bff; color: white; } .button.secondary { background: #6c757d; color: white; } .button:hover { opacity: 0.8; } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0; } .metric-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 20px; backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); color: #e6edf3; } .demo-section { margin: 30px 0; } .demo-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 20px; backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); color: #e6edf3; } .demo-controls { display: flex; gap: 10px; align-items: center; margin: 15px 0; } .demo-result { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; margin-top: 15px; backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); color: #e6edf3; min-height: 60px; } .tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 20px 0; } .tip-card { border-radius: 8px; padding: 15px; } input[type="range"] { width: 100px; margin: 0 10px; } </style> </head> <body> ${html} <script src="/performance.js"></script> </body> </html> `; res.send(fullPage); } catch (error) { console.error('Error rendering page:', error); res.status(500).send(`Error: ${error.message}`); } }); app.listen(port, () => { console.log(`🚀 Test server running at http://localhost:${port}`); console.log('Click "Run All Performance Tests" to see the results!'); }); |