Anonymous view components

[brendt]

View components will replace include and replace functionality. We need a way to access view components without them having a dedicated class file though, since oftentimes people will simply want to reference a view file. Let's brainstorm syntax options.

[brendt]

Option 1:

<?php

use Tempest\View\ViewComponent;

return new class implements ViewComponent
{
    public static function getName(): string
    {
        return 'x-my';
    }

    public function render(string $slot): string
    {
?>

        <div class=""><?= $slot ?></div>

<?php
    }
};

I dislike it, but figured I'd mention it anyway

[brendt]

Option 2:

<?php
/** @var \Tempest\View\GenericView $this */
$this->component('x-my');
?>

<div class=""><?= $this->slot() ?></div>

[brendt]

Option 3:

<?php
component('x-my');
?>

<div class=""><?= $this->slot() ?></div>

[brendt]

The tricky part is registering and discovering components. Simultaneously, it's the easy part since we have discovery and it can be cached.

[brendt]

Option 4, and this is the winner:

<x-component name="x-my">
    <?= $this->slot() ?>
</x-component>

[brendt]

Allowing anonymous view components will open up a world of possibilities. I need to write down some thoughts about them so that I know which direction to take. The most important thing is that there's no more need for $this->extends and $this->include, since everything can be modeled with view components.

Here's an example of how extension works:

<x-component name="base-layout">
    <h1><?= $this->title ?? 'Hello' ?></h1>

    <x-slot />
</x-component>

<x-base-layout :title="$this->title">
    <p>Hello world</p>
</x-base-layout>

And here's an example of how inclusion works:

<x-component name="field">
    <label for="<?= $this->name ?>"><?= $this->label ?></label>
    <input type="button" name="<?= $this->name ?>">
</x-component>

<p>
    <x-field name="first_name" label="First Name" />
</p>

I suggest we totally remove extends, include and slot functionality from the view, and only rely on component-based syntax.