Dashboard
Welcome to your dashboard!
# LiveComponents Slot System Umfassende Dokumentation des Slot Systems für flexible Component-Komposition im Custom PHP Framework. ## Übersicht Das Slot System ermöglicht es Components, flexible Bereiche zu definieren, in die Parent Components ihren eigenen Content einfügen können - ähnlich wie **Vue's Slots** oder **React's children/render props** Pattern. **Key Features:** - ✅ **Named Slots** - Spezifische Placement Points (header, footer, sidebar) - ✅ **Default Slots** - Unnamed slot für allgemeinen Content - ✅ **Scoped Slots** - Slots mit Zugriff auf Component-Daten via Context - ✅ **Required Slots** - Validation dass notwendige Slots gefüllt sind - ✅ **Default Content** - Fallback-Content wenn Slot nicht gefüllt wird - ✅ **Content Processing** - Automatische Wrapper und Transformationen - ✅ **Custom Validation** - Component-spezifische Slot-Validierung - ✅ **XSS Protection** - Automatisches HTML-Escaping in Context-Values ## Architektur ``` ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ SlotDefinition │───▶│ SlotManager │───▶│ SlotProcessor │ │ (What exists) │ │ (Resolution) │ │ (Rendering) │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │ │ SlotContent SupportsSlots DomProcessor (Provided) (Component) (Template) │ │ │ SlotContext ──────────────────────────────────────────┘ (Scoped Data) ``` ## Kern-Komponenten ### 1. SlotDefinition - Slot-Definition Value Object Definiert welche Slots in einer Component verfügbar sind. ```php final readonly class SlotDefinition { public function __construct( public string $name, // Slot name (z.B. 'header', 'footer') public string $defaultContent = '', // Fallback content public array $props = [], // Props für scoped slots public bool $required = false // Pflicht-Slot? ) {} } ``` **Factory Methods:** ```php // Default (unnamed) Slot SlotDefinition::default('
Default content
'); // Named Slot SlotDefinition::named('header', 'Default
'); // Required Slot SlotDefinition::named('body')->withRequired(true); ``` **Beispiel:** ```php public function getSlotDefinitions(): array { return [ SlotDefinition::named('header', 'Main content
'); // Named slot content SlotContent::named('header', '{userName}
', ['userName' => 'John']); // Content from component SlotContent::fromComponent('header', $componentId, 'User: {context.userName} (ID: {context.userId})
'; // Context data $context = SlotContext::create([ 'userId' => 123, 'userName' => 'John Doe', ]); // After injection // Result: 'User: John Doe (ID: 123)
' ``` --- ### 6. SlotProcessor - Template Integration DomProcessor für Template-Rendering mit Slot-Unterstützung. ```php final readonly class SlotProcessor implements DomProcessor { public function __construct( private SlotManager $slotManager ) {} public function process(DomWrapper $dom, RenderContext $context): DomWrapper { // Check if component supports slots if ($component instanceof SupportsSlots) { return $this->processWithSlotSystem($dom, $context, $component); } // Fallback to legacy slot processing return $this->processLegacySlots($dom, $context); } } ``` **Features:** - ✅ Integration mit SlotManager - ✅ Backward compatibility (legacy slots) - ✅ Automatic slot validation - ✅ Error handling (development vs production) - ✅ Context injection für scoped slots --- ## Slot-Patterns ### Pattern 1: Named Slots - Basic Layout Composition **Use Case:** Component mit mehreren spezifischen Bereichen (Header, Body, Footer). **Component Definition:** ```php final readonly class CardComponent implements SupportsSlots { public function getSlotDefinitions(): array { return [ SlotDefinition::named('header', 'John Doe
Email: john@example.com
Role: Administrator
This is the main content.
All unnamed content appears in the default slot.
Are you sure you want to delete this item?
This action cannot be undone.
Modal ID: {context.modalId}
Welcome to your dashboard!
{context.userInput}
' // After injection (safe!) '<script>alert("XSS")</script>
' ``` --- ## Best Practices ### 1. Slot Design **✅ DO:** - Klare Slot-Namen verwenden (`header`, `body`, `footer` statt `slot1`, `slot2`) - Default Content für alle Optional Slots definieren - Required Slots nur für essentiellen Content - Scoped Slots für Component-Daten die Parent braucht **❌ DON'T:** - Zu viele Slots definieren (max. 5-6 für Übersichtlichkeit) - Alle Slots als Required markieren - Sensitive Daten in Scoped Context legen - Komplexe Logik in `processSlotContent()` ### 2. Content Processing **✅ DO:** - Automatische Wrapper für konsistentes Styling - State-basierte Transformationen (padding, themes) - Slot-spezifische CSS-Klassen - Immutable Content-Transformationen (`withContent()`) **❌ DON'T:** - Content manipulieren ohne `withContent()` - Seiteneffekte in `processSlotContent()` - Zu aggressive Transformationen - Parent-Content überschreiben ### 3. Validation **✅ DO:** - Required Slots für kritischen Content - Custom Validation für logische Konsistenz - Hilfreiche Error-Messages - Validation in Development zeigen, in Production loggen **❌ DON'T:** - Validation-Errors swallowing - Generische Error-Messages - Validation-Logic in Templates - Performance-intensive Validation ### 4. Scoped Slots **✅ DO:** - Nur notwendige Daten in Context legen - HTML-Escaping ist automatisch (vertrauen) - Dokumentierte Context-Props in SlotDefinition - Klare Naming Convention (`{context.key}`) **❌ DON'T:** - Sensitive Daten in Context (Passwords, Tokens) - Zu viele Context-Props (max. 5-6) - Komplexe Objekte in Context - Manual HTML-Escaping (ist redundant) --- ## Testing ### Unit Tests - SlotManager ```php it('resolves provided content over default content', function () { $component = new TestComponent(); $definition = SlotDefinition::named('header', 'User details...
'), ]; $errors = $this->slotManager->validateSlots($component, $providedSlots); expect($errors)->toBeEmpty(); }); ``` ### Template Tests ```php it('processes slots in template', function () { $html = 'Body
Content
'); ``` --- ## Performance ### Slot Resolution Performance **Typical Performance:** - Slot Resolution: < 1ms per slot - Context Injection: < 0.5ms per placeholder - Validation: < 2ms für 5-6 slots - Total Overhead: < 5ms per component **Optimizations:** - ✅ Slot definitions gecached in Component - ✅ Keine Reflection für Slot-Discovery - ✅ Simple string replacement für Context - ✅ Minimal regex usage ### Best Practices für Performance **✅ DO:** - Slot definitions im Constructor definieren - Simple Context-Values (strings, ints) - Cached Component-Instances - Minimal Validation-Logic **❌ DON'T:** - Dynamic Slot-Definitions - Complex Objects in Context - Database-Queries in `getSlotContext()` - Expensive Transformations in `processSlotContent()` --- ## Migration Guide ### Von Legacy Slots zu Slot System **Before (Legacy):** ```php final class OldCard { public function render(array $slots): string { $header = $slots['header'] ?? '