README

Yii3 Framework htmx simple extension

This Yii Framework extension encapsulates basic functions [htmx] and makes using in Yii applications extremely easy.

You can see examples in yii3-demo-htmx application.

Installation

The preferred way to install this extension is through composer.

php composer.phar require nkondrashov/yii3-htmx "^0.2"

Add HTMXMiddleware.php to router.

->middleware(HTMXMiddleware::class)

$assetManager->register(HTMXAsset::class);

Warning!

Add to <body> tag attribute hx-headers='{"X-CSRF-Token":"<?=$csrf; ?>"}' for success post requests. Like this:

<body hx-headers='{"X-CSRF-Token":"<?=$csrf; ?>"}'>

Install assets

Using the npm-asset package manager.

Run the following command at the root directory of your application.

npm i htmx.org@1.9.10

General usage

Examples

Simple:

<?php
$tag = Yiisoft\Html\Html::button('[ X ]']);

$htmx = HTMX::make($tag)
            ->request(Yiisoft\Http\Method::DELETE, '/item/delete/' . $todo->id)
            ->setSwap('none')
            ->runOnClick();

if (!$todo->is_complete) {
    $htmx->addConfirm('Are you sure?');
}

echo $htmx;
 ?>

<?= HTMX::make(Yiisoft\Html\Html::tag('div'))
        ->request(Yiisoft\Http\Method::GET, '/item/index')
        ->runOnCustomEvent('someCustomEvent', 'someCustomEvent2')
        ->runOnLoad();?>

More native:

<?php
$tag = Yiisoft\Html\Html::button('[ X ]']);

$htmx = HTMX::make($tag)
            ->request(Yiisoft\Http\Method::DELETE, '/item/delete/' . $todo->id)
            ->addTriggers('click')
            ->setSwap('none');

if (!$todo->is_complete) {
    $htmx->addConfirm('Are you sure?');
}

echo $htmx;
 ?>

<?= HTMX::make(Yiisoft\Html\Html::tag('div'))
        ->request(Yiisoft\Http\Method::GET, '/item/index')
        ->addTriggers('load','someCustomEvent from:body', 'someCustomEvent2 from:body');
?>

Max native:

<?php
$tag = Yiisoft\Html\Html::button('[ X ]']);

$htmx = HTMX::make($tag)
            ->setHx('delete', '/item/delete/' . $todo->id)
            ->setHx('trigger', 'click')
            ->setHx('swap', 'none');

if (!$todo->is_complete) {
    $htmx->setHx('conf', 'Are you sure?');
}

echo $htmx;
 ?>

<?= HTMX::make(Yiisoft\Html\Html::tag('div'))
        ->setHx('get', '/item/index')
        ->setHx('trigger', 'load, someCustomEvent from:body, someCustomEvent2 from:body');
?>

Send htmx headers in response:

//Definition:
...
    public function __construct(private HTMXHeaderManager $headerManager)
    {}
...

//In code:
$this->headerManager->triggerCustomEventAfterSwap('updateList');
//or native:
$this->headerManager->sendHXHeader('Trigger', 'updateList');

//Detect htmx request:
if ($this->headerManager->isHtmxRequest()) {
    //Example: This request without htmx header
}

//Get data from header:
$value = $this->headerManager->getRequestHeader('Hx-Trigger-Name');