=Ê Test Component: Counter
Test Instructions:
- Click + Increment to increase counter
- Click - Decrement to decrease counter
- Click Reset to set counter to 0
- Enter a number and click Add Amount to add custom value
- Watch for auto-polling updates every 10 seconds
{!! counter.toHtml() !!}
Features Demonstrated:
- Action Handling (increment, decrement, reset)
- Form Submission (addAmount with parameter)
- State Management (count, last_update)
- Polling (auto-updates every 10 seconds)
- DOM Updates (live HTML replacement)
Component ID: {!! counter.getId() !!}
Template: Framework/LiveComponents/Templates/counter.view.php
Class: App\Application\Components\CounterComponent
=à Technical Details
Architecture:
final readonly class CounterComponent implements LiveComponentContract, Pollable
{
use LiveComponentTrait;
public function render(): string { /* ... */ }
public function increment(): array { /* ... */ }
public function poll(): array { /* ... */ }
}
Routes:
- POST /live-component/{id} - Action Handler
- POST /live-component/{id}/upload - Upload Handler
- GET /test/livecomponents - This page
JavaScript:
- /public/js/live-components.js (~3KB)
- /public/js/sse-client.js (~2KB)
- Zero external dependencies
=Ý Browser Console
Open your browser's Developer Console (F12) to see:
- Component initialization logs
- Action execution traces
- Polling activity
- State updates