Base Component - Lyger PHP Framework

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
Card 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;
    }
}

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;
    }
}

Core

Database

Components

​Overview

​Class: Lyger\Components\Component

​Basic Component

​Lifecycle Methods

​mount()

​beforeRender()

​render()

​View Management

​view()

​getView()

​renderView()

​renderInline()

​getDefaultViewName()

​Property Management

​setProperty()

​getProperty()

​Magic Methods

​Method Invocation

​call()

​Data Export

​toArray()

​refresh()

​Events

​emit()

​Validation

​validate()

​Component Manager

​Lyger\Components\ComponentManager

​register()

​make()

​getRegistered()

​Slot Class

​Lyger\Components\Slot

​LiveHandler

​Lyger\Components\LiveHandler

​handle()

​Complete Example

​View Template Example

​Tabs Example

Overview

Class: `Lyger\Components\Component`

Basic Component

Lifecycle Methods

mount()

beforeRender()

render()

View Management

view()

getView()

renderView()

renderInline()

getDefaultViewName()

Property Management

setProperty()

getProperty()

Magic Methods

Method Invocation

call()

Data Export

toArray()

refresh()

Events

emit()

Validation

validate()

Component Manager

Lyger\Components\ComponentManager

register()

make()

getRegistered()

Slot Class

Lyger\Components\Slot

LiveHandler

Lyger\Components\LiveHandler

handle()

Complete Example

View Template Example

Tabs Example