Alpine.js Integration

berry/alpinejs adds Alpine.js methods to Berry HTML elements.

Without it, you can already write Alpine attributes with attr().

div()
    ->attr('x-data', '{ count: 0 }')
    ->children(
        button()->attr('x-on:click', 'count++')->text('Increment'),
        span()->attr('x-text', 'count'),
    );

With the integration, this becomes nicer.

use function Berry\Html\button;
use function Berry\Html\div;
use function Berry\Html\span;

echo div()
    ->xData(['count' => 0])
    ->children(
        button()->xOnClick('count++')->text('Increment'),
        span()->xText('count'),
    );

Install

composer require berry/alpinejs

The package registers its methods automatically through Composer autoloading.

Component state

Use xData() to declare Alpine component state.

div()->xData(['open' => false]);

You can pass a PHP array or a JavaScript expression as a string. Arrays are encoded as JSON.

div()->xData(['open' => false, 'count' => 0]);
div()->xData('{ open: false, toggle() { this.open = ! this.open } }');

Bindings

Use xBind() for generic x-bind:* attributes.

button()
    ->xBind('disabled', 'loading')
    ->text('Save');

Common binding shortcuts are available too.

div()
    ->xBindStyle(['display' => 'none'])
    ->xBindKey('item.id');

Arrays are encoded as JSON, so they are useful for values that can be represented as data. Use strings when the value needs to refer to Alpine state or call JavaScript.

div()->xBindClass('{ hidden: ! open }');

For example, ['hidden' => '! open'] would become {"hidden":"! open"}. Alpine would see the string ! open, not evaluate ! open as JavaScript.

Events

Use xOn() for generic x-on:* attributes.

button()
    ->xOn('mouseenter', 'hovering = true')
    ->text('Hover me');

The package includes shortcuts for common events and modifiers.

button()->xOnClick('count++')->text('Increment');
div()->xOnClickOutside('open = false');
input()->xOnKeydownEscape('open = false');

Text, HTML and models

Use xText() and xHtml() for dynamic content.

span()->xText('count');
div()->xHtml('content');

Use xModel() for form state.

input()->xModel('search');

Display and control flow

Use the Alpine display and control-flow directives as methods.

div()->xShow('open')->text('Contents...');
div()->xFor('item in items');
div()->xIf('items.length > 0');

Transitions

Use xTransition() without arguments for the plain x-transition flag.

div()->xTransition()->xShow('open');

Pass a suffix for transition modifiers, or a suffix and expression for transition stages.

div()->xTransition('opacity.duration.200ms');
div()->xTransition(':enter', 'transition ease-out');

A small dropdown

Here is a typical Alpine style component.

use Berry\Html\Element;
use function Berry\Html\button;
use function Berry\Html\div;

function dropdown(): Element
{
    return div()
        ->xData(['open' => false])
        ->children(
            button()
                ->xOnClick('open = ! open')
                ->text('Toggle'),
            div()
                ->xShow('open')
                ->xOnClickOutside('open = false')
                ->xTransition()
                ->text('Contents...'),
        );
}

Other methods

The package includes helpers for most Alpine directives, including:

• xInit()
• xShow()
• xBind()
• xBindClass()
• xBindStyle()
• xBindKey()
• xOn()
• xOnClick()
• xOnClickOutside()
• xOnSubmit()
• xOnInput()
• xOnChange()
• xOnKeydown()
• xOnKeydownEnter()
• xOnKeydownEscape()
• xOnKeyup()
• xOnKeyupEnter()
• xOnKeyupEscape()
• xText()
• xHtml()
• xModel()
• xModelable()
• xFor()
• xTransition()
• xEffect()
• xIgnore()
• xRef()
• xCloak()
• xTeleport()
• xIf()
• xId()

These methods are thin wrappers around Alpine attributes. If you know Alpine, there is not much new to learn here.