Base Component

Core component class for building reusable UI elements

Overview

The base Component class in Lyger\Components provides a foundation for building reusable, view-based components with lifecycle hooks and property management.

Class: Lyger\Components\Component

Abstract base class for creating components with automatic view rendering and property binding.

Basic Component

use Lyger\Components\Component;

class Alert extends Component
{
    protected string $view = 'components.alert';

    protected function mount(): void
    {
        $this->setProperty('type', 'info');
        $this->setProperty('message', '');
    }

    public function render(): string
    {
        return $this->renderView();
    }
}

Lifecycle Methods

mount()

Called when the component is instantiated. Override to initialize component state.

protected function mount(): void

Example:

protected function mount(): void
{
    $this->setProperty('isOpen', false);
    $this->setProperty('items', []);
}

beforeRender()

Called before each render. Use for pre-render logic or data preparation.

protected function beforeRender(): void

Example:

protected function beforeRender(): void
{
    // Refresh data before rendering
    $this->setProperty('timestamp', time());
}

render()

Renders the component and returns HTML string. Automatically calls beforeRender().

return · string

The rendered HTML output

public function render(): string

View Management

view()

Sets the view template for the component.

view · string · required

View name (e.g., ‘components.button’)

return · Component

Returns self for method chaining

public function view(string $view): self

Example:

class Button extends Component
{
    public function __construct()
    {
        parent::__construct();
        $this->view('components.button');
    }
}

getView()

Gets the current view name.

return · string

The view name

public function getView(): string

renderView()

Renders the view with component properties as variables.

return · string

Rendered HTML

protected function renderView(): string

Views are loaded from resources/views/. If the view file doesn’t exist, renderInline() is called as fallback.

renderInline()

Override this to provide inline HTML when no view file exists.

protected function renderInline(): string
{
    return '<div class="alert">' . $this->properties['message'] . '</div>';
}

getDefaultViewName()

Automatically generates a view name from the class name.

protected function getDefaultViewName(): string

Example:

// Class: UserCard
// Returns: 'user-card'

// Class: AlertMessage  
// Returns: 'alert-message'

Property Management

setProperty()

Sets a component property.

key · string · required

Property name

value · mixed · required

Property value

protected function setProperty(string $key, mixed $value): void

getProperty()

Gets a component property value.

key · string · required

Property name

return · mixed

Property value or null if not set

protected function getProperty(string $key): mixed

Magic Methods

The component supports magic property access:

// Set property
$component->title = 'Hello';  // Same as setProperty('title', 'Hello')

// Get property
echo $component->title;  // Same as getProperty('title')

// Check if property exists
if (isset($component->title)) {
    // Property is set
}

Example:

class Card extends Component
{
    protected function mount(): void
    {
        $this->title = 'Default Title';
        $this->content = '';
    }

    public function updateTitle(string $newTitle): void
    {
        $this->title = $newTitle;  // Tracked in updates
    }
}

Method Invocation

call()

Invokes a method on the component with parameters.

method · string · required

Method name to call

params · array

Method parameters

return · array

Result containing ‘success’, ‘data’, ‘updates’, or ‘error’

public function call(string $method, array $params = []): array

Example:

$result = $component->call('updateTitle', ['New Title']);
// Returns:
// [
//     'success' => true,
//     'data' => null,
//     'updates' => ['title' => 'New Title']
// ]

Data Export

toArray()

Exports component data as an array.

return · array

Array with ‘properties’ and ‘view’ keys

public function toArray(): array

Example:

$data = $component->toArray();
// Returns:
// [
//     'properties' => ['title' => 'Hello', 'content' => '...'],
//     'view' => '<div>...</div>'
// ]

refresh()

Refreshes and returns component data.

return · array

Fresh component data

public function refresh(): array

Events

emit()

Emits an event with optional data payload.

event · string · required

Event name

data · mixed

Event data

return · array

Event descriptor array

protected function emit(string $event, mixed $data = null): array

Example:

public function deleteItem(int $id)
{
    // Delete logic...
    return $this->emit('item-deleted', ['id' => $id]);
}

Validation

validate()

Validates component properties against rules.

rules · array · required

Validation rules

messages · array

Custom validation messages

return · array

Validated data

throws · ValidationException

Thrown when validation fails

protected function validate(array $rules, array $messages = []): array

Example:

public function submitForm()
{
    try {
        $validated = $this->validate([
            'email' => 'required|email',
            'name' => 'required|min:3',
        ]);

        // Process validated data...
        return $this->emit('form-submitted', $validated);
    } catch (ValidationException $e) {
        return ['errors' => $e->getErrors()];
    }
}

Component Manager

Lyger\Components\ComponentManager

Manages component registration and instantiation.

register()

Registers a component class with a name.

name · string · required

Component name

class · string · required

Fully qualified class name

ComponentManager::register('alert', Alert::class);
ComponentManager::register('button', Button::class);

make()

Creates a component instance by name.

name · string · required

Registered component name

return · Component

Component instance

throws · RuntimeException

If component is not registered

$alert = ComponentManager::make('alert');

getRegistered()

Gets all registered components.

return · array

Array of registered component names and classes

$components = ComponentManager::getRegistered();
// Returns: ['alert' => Alert::class, 'button' => Button::class]

Slot Class

Lyger\Components\Slot

Represents a content slot within a component.

$slot = new Slot('<p>Default content</p>');
$content = $slot->getContent();

LiveHandler

Lyger\Components\LiveHandler

Handles AJAX requests for live component updates.

handle()

Processes incoming AJAX requests and returns component response.

request · array · required

Request data containing ‘component’, ‘method’, ‘params’, ‘properties’

return · array

Component response with method result

$response = LiveHandler::handle([
    'component' => 'alert',
    'method' => 'close',
    'params' => [],
    'properties' => ['message' => 'Test'],
]);

Request Structure:

[
    'component' => 'component-name',
    'method' => 'methodName',
    'params' => ['param1', 'param2'],
    'properties' => ['prop1' => 'value1'],
]

Complete Example

use Lyger\Components\Component;
use Lyger\Components\ComponentManager;

class Dropdown extends Component
{
    protected string $view = 'components.dropdown';

    protected function mount(): void
    {
        $this->setProperty('isOpen', false);
        $this->setProperty('items', []);
        $this->setProperty('selected', null);
    }

    protected function beforeRender(): void
    {
        // Ensure items is always an array
        if (!is_array($this->getProperty('items'))) {
            $this->setProperty('items', []);
        }
    }

    public function toggle(): array
    {
        $this->isOpen = !$this->isOpen;
        return $this->emit('dropdown-toggled', ['isOpen' => $this->isOpen]);
    }

    public function select(string $value): array
    {
        $this->selected = $value;
        $this->isOpen = false;

        return $this->emit('item-selected', ['value' => $value]);
    }

    public function setItems(array $items): void
    {
        $validated = $this->validate([
            'items' => 'required|array',
            'items.*.label' => 'required|string',
            'items.*.value' => 'required',
        ]);

        $this->items = $validated['items'];
    }

    public function render(): string
    {
        return $this->renderView();
    }
}

// Register the component
ComponentManager::register('dropdown', Dropdown::class);

// Create and use the component
$dropdown = ComponentManager::make('dropdown');
$dropdown->setItems([
    ['label' => 'Option 1', 'value' => '1'],
    ['label' => 'Option 2', 'value' => '2'],
]);

echo $dropdown->render();

View Template Example

<!-- resources/views/components/dropdown.php -->
<div class="dropdown <?= $isOpen ? 'open' : '' ?>">
    <button onclick="component.call('toggle')">
        <?= $selected ? $selected : 'Select...' ?>
    </button>

    <?php if ($isOpen): ?>
        <ul class="dropdown-menu">
            <?php foreach ($items as $item): ?>
                <li onclick="component.call('select', ['<?= $item['value'] ?>'])">
                    <?= $item['label'] ?>
                </li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>
</div>

Tabs Example

Modal Component

class Modal extends Component
{
    protected string $view = 'components.modal';

    protected function mount(): void
    {
        $this->isOpen = false;
        $this->title = '';
        $this->content = '';
    }

    public function open(): void
    {
        $this->isOpen = true;
    }

    public function close(): void
    {
        $this->isOpen = false;
    }
}

Card Component

class Card extends Component
{
    protected string $view = 'components.card';

    protected function mount(): void
    {
        $this->title = 'Card Title';
        $this->body = '';
        $this->footer = null;
    }

    protected function renderInline(): string
    {
        return <<<HTML
        <div class="card">
            <h3>{$this->title}</h3>
            <div>{$this->body}</div>
            {$this->footer ? "<footer>{$this->footer}</footer>" : ''}
        </div>
        HTML;
    }
}