Michael Schiemer
fc3d7e6357
- Add comprehensive health check system with multiple endpoints - Add Prometheus metrics endpoint - Add production logging configurations (5 strategies) - Add complete deployment documentation suite: * QUICKSTART.md - 30-minute deployment guide * DEPLOYMENT_CHECKLIST.md - Printable verification checklist * DEPLOYMENT_WORKFLOW.md - Complete deployment lifecycle * PRODUCTION_DEPLOYMENT.md - Comprehensive technical reference * production-logging.md - Logging configuration guide * ANSIBLE_DEPLOYMENT.md - Infrastructure as Code automation * README.md - Navigation hub * DEPLOYMENT_SUMMARY.md - Executive summary - Add deployment scripts and automation - Add DEPLOYMENT_PLAN.md - Concrete plan for immediate deployment - Update README with production-ready features All production infrastructure is now complete and ready for deployment.
277 lines
8.5 KiB
PHP
277 lines
8.5 KiB
PHP
<?php
|
|
|
|
declare(strict_types=1);
|
|
|
|
/**
|
|
* Test Lazy Loading Integration
|
|
*
|
|
* Demonstrates and tests the Lazy Component Loading system:
|
|
* - Intersection Observer API integration
|
|
* - On-demand component loading
|
|
* - Priority-based loading queue
|
|
* - Placeholder and loading states
|
|
*
|
|
* Usage: Visit this page in browser and scroll down to see components load.
|
|
*/
|
|
|
|
require_once __DIR__ . '/../../vendor/autoload.php';
|
|
|
|
use App\Framework\Core\Application;
|
|
use App\Framework\DI\DefaultContainer;
|
|
|
|
$container = new DefaultContainer();
|
|
$app = Application::create($container);
|
|
|
|
// This would be served as a view in the real application
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lazy Loading Test - LiveComponents</title>
|
|
<style>
|
|
body {
|
|
font-family: system-ui, sans-serif;
|
|
margin: 0;
|
|
padding: 2rem;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 2rem;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 1rem 0;
|
|
color: #2196F3;
|
|
}
|
|
|
|
.info {
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.component-row {
|
|
margin: 2rem 0;
|
|
padding: 1rem;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 2px solid #e0e0e0;
|
|
}
|
|
|
|
.component-info {
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
margin-bottom: 1rem;
|
|
padding: 0.5rem;
|
|
background: #f5f5f5;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.spacer {
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.stats {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: white;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
z-index: 1000;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.stats h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 1rem;
|
|
color: #2196F3;
|
|
}
|
|
|
|
.stats-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0.25rem 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.stats-label {
|
|
color: #666;
|
|
}
|
|
|
|
.stats-value {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stats" id="lazy-stats">
|
|
<h3>📊 Lazy Loading Stats</h3>
|
|
<div class="stats-row">
|
|
<span class="stats-label">Total:</span>
|
|
<span class="stats-value" id="stats-total">0</span>
|
|
</div>
|
|
<div class="stats-row">
|
|
<span class="stats-label">Loaded:</span>
|
|
<span class="stats-value" id="stats-loaded">0</span>
|
|
</div>
|
|
<div class="stats-row">
|
|
<span class="stats-label">Loading:</span>
|
|
<span class="stats-value" id="stats-loading">0</span>
|
|
</div>
|
|
<div class="stats-row">
|
|
<span class="stats-label">Pending:</span>
|
|
<span class="stats-value" id="stats-pending">0</span>
|
|
</div>
|
|
<div class="stats-row">
|
|
<span class="stats-label">Queued:</span>
|
|
<span class="stats-value" id="stats-queued">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header">
|
|
<h1>🚀 Lazy Loading Test</h1>
|
|
<div class="info">
|
|
<p><strong>Scroll down</strong> to see components load on-demand when they enter the viewport.</p>
|
|
<p>Each component has a different priority (high, normal, low) affecting load order.</p>
|
|
<p>Watch the stats panel (top-right) to track loading progress.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Immediate Component (No Lazy Loading) -->
|
|
<div class="component-row">
|
|
<div class="component-info">
|
|
✅ <strong>Immediate Component</strong> - Loads immediately (no lazy loading)
|
|
</div>
|
|
<div data-live-component="counter:immediate-demo"
|
|
data-state='{"count": 0}'
|
|
data-csrf-token="test-token">
|
|
<div style="padding: 2rem; text-align: center; background: #e3f2fd; border-radius: 8px;">
|
|
<h3>Counter Component (Immediate)</h3>
|
|
<div style="font-size: 2rem; margin: 1rem 0;">Count: 0</div>
|
|
<button data-live-action="increment">Increment</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Spacer -->
|
|
<div class="spacer">
|
|
👇 Scroll down to trigger lazy loading 👇
|
|
</div>
|
|
|
|
<!-- Lazy Component 1 (High Priority) -->
|
|
<div class="component-row">
|
|
<div class="component-info">
|
|
🔴 <strong>High Priority</strong> - Will load first when visible
|
|
</div>
|
|
<div data-live-component-lazy="notification-center:lazy-test-1"
|
|
data-lazy-threshold="0.1"
|
|
data-lazy-priority="high"
|
|
data-lazy-placeholder="Loading high-priority notifications...">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spacer">Keep scrolling...</div>
|
|
|
|
<!-- Lazy Component 2 (Normal Priority) -->
|
|
<div class="component-row">
|
|
<div class="component-info">
|
|
🟡 <strong>Normal Priority</strong> - Standard loading
|
|
</div>
|
|
<div data-live-component-lazy="activity-feed:lazy-test-2"
|
|
data-lazy-threshold="0.1"
|
|
data-lazy-priority="normal"
|
|
data-lazy-placeholder="Loading activity feed...">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spacer">Almost there...</div>
|
|
|
|
<!-- Lazy Component 3 (Low Priority) -->
|
|
<div class="component-row">
|
|
<div class="component-info">
|
|
🟢 <strong>Low Priority</strong> - Will load last
|
|
</div>
|
|
<div data-live-component-lazy="comment-thread:lazy-test-3"
|
|
data-lazy-threshold="0.1"
|
|
data-lazy-priority="low"
|
|
data-lazy-placeholder="Loading comments...">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spacer">You made it! 🎉</div>
|
|
|
|
<!-- Lazy Component 4 (Normal Priority) -->
|
|
<div class="component-row">
|
|
<div class="component-info">
|
|
🟡 <strong>Normal Priority</strong> - Another standard component
|
|
</div>
|
|
<div data-live-component-lazy="live-presence:lazy-test-4"
|
|
data-lazy-threshold="0.1"
|
|
data-lazy-priority="normal"
|
|
data-lazy-placeholder="Loading live presence...">
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
// Import LiveComponent module (this would be in your build)
|
|
// For testing, we need to ensure the module is loaded
|
|
|
|
// Stats updater
|
|
function updateStats() {
|
|
if (window.LiveComponent && window.LiveComponent.lazyLoader) {
|
|
const stats = window.LiveComponent.lazyLoader.getStats();
|
|
|
|
document.getElementById('stats-total').textContent = stats.total;
|
|
document.getElementById('stats-loaded').textContent = stats.loaded;
|
|
document.getElementById('stats-loading').textContent = stats.loading;
|
|
document.getElementById('stats-pending').textContent = stats.pending;
|
|
document.getElementById('stats-queued').textContent = stats.queued;
|
|
}
|
|
|
|
requestAnimationFrame(updateStats);
|
|
}
|
|
|
|
// Wait for DOM ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('✅ DOM Ready');
|
|
updateStats();
|
|
});
|
|
} else {
|
|
console.log('✅ DOM Already Ready');
|
|
updateStats();
|
|
}
|
|
|
|
// Listen for lazy loading events
|
|
document.addEventListener('livecomponent:lazy:loaded', (e) => {
|
|
console.log('🚀 Lazy component loaded:', e.detail);
|
|
});
|
|
|
|
document.addEventListener('livecomponent:lazy:error', (e) => {
|
|
console.error('❌ Lazy component error:', e.detail);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
<?php
|
|
|
|
echo "\n\n=== Lazy Loading Test Page Generated ===\n";
|
|
echo "✅ Open this file in browser to test lazy loading\n";
|
|
echo "✅ Components will load as you scroll down\n";
|
|
echo "✅ Check console for detailed loading logs\n";
|
|
echo "✅ Watch stats panel for real-time progress\n";
|