Berry Symfony Bundle

Symfony bundle for the berry/html eDSL

Usage

Install via composer

$ composer req berry/symfony

Next we'll create two views one for the layout and one for the index page:

src/View/AppLayout.php

<?php declare(strict_types=1);

namespace App\View;

use Berry\Html\Enums\Rel;
use Berry\Element;

use function Berry\Html\body;
use function Berry\Html\div;
use function Berry\Html\head;
use function Berry\Html\html;
use function Berry\Html\link;
use function Berry\Html\script;
use function Berry\Html\title;

class AppLayout
{
    public function render(string $title, Element $content): Element
    {
        return html()
            ->child(head()
                ->child(title()->text($title))
                // lets use pico.css for styling https://picocss.com
                ->child(link()
                    ->rel(Rel::Stylesheet)
                    ->href('https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css')))
            ->child(body()
                ->child(div()
                    ->class('container')
                    ->child($content))
                // also we add HTMX
                ->child(script()->src('https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js')));
    }
}

src/View/IndexPage.php

<?php declare(strict_types=1);

namespace App\View;

use Berry\Element;
use Berry\Symfony\View\AbstractComponent;

use function Berry\Html\button;
use function Berry\Html\div;
use function Berry\Html\h1;
use function Berry\Html\p;

class IndexPage extends AbstractComponent
{
    public function renderComponent(): Element
    {
        return div()
            ->child(h1()->text('Counter Page'))
            ->child(p()->text('Click the button to increase the counter'))
            // we add the counter button with a start value of 1
            ->child($this->counterButton(1));
    }

    // we make the button public so we can later access it from the controller
    public function counterButton(int $value): Element
    {
        return button()
            ->id('counter-button')
            // when clicked on the button increase the value by 1
            ->attr('hx-post', $this->generateUrl('app_counter', ['value' => $value + 1]))
            ->attr('hx-swap', 'outerHTML')
            ->text("+ $value");
    }
}

and lastly we also need to add this to a controller:

src/Controller/IndexController.php

<?php declare(strict_types=1);

namespace App\Controller;

use App\View\AppLayout;
use App\View\IndexPage;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

class IndexController
{
    public function __construct(
        private AppLayout $layout,
    ) {}

    #[Route('/', name: 'app_index', methods: ['GET'])]
    public function index(IndexPage $page): Response
    {
        // we create a page object wrapped inside our layout
        $content = $this->layout->render('Index Page', $page->renderComponent());

        // and last we turn the Berry element into a Symfony response
        return $content->toResponse();
    }

    #[Route('/counter/{value}', name: 'app_counter', methods: ['POST'])]
    public function counter(int $value, IndexPage $page): Response
    {
        // on a POST to "/counter/{value}" we want to only render the button again
        // with an increased value so lets create the index page without layout
        $content = $page->counterButton($value);

        // and only call the counterButton
        return $content->toResponse();
    }
}

Twig views

You can also expose Berry components as Twig functions with the AsTwigView attribute:

src/View/HelloView.php

<?php declare(strict_types=1);

namespace App\View;

use Berry\Element;
use Berry\Symfony\View\AbstractComponent;
use Berry\Symfony\View\Attribute\AsTwigView;

use function Berry\Html\h1;

#[AsTwigView(name: "hello")]
final class HelloView extends AbstractComponent
{
    public function __construct(
        private readonly ?string $name = null,
    ) {}

    public function renderComponent(): Element
    {
        $name = $this->name ?? 'world';

        return h1()->text("Hello, {$name}");
    }
}

You can then render it from Twig:

{{ hello() }}
{{ hello('Christopher') }}

License

MIT