Laravel Htmx – Actualités Laravel

Laravel htmx est un emballer par Maurizio Bonani cela vous donne une bonne façon de travailler avec htmxune bibliothèque qui vous permet d’accéder aux fonctionnalités des navigateurs modernes directement à partir du HTML, plutôt que d’utiliser JavaScript :

htmx vous donne accès à AJAX, aux transitions CSS, aux WebSockets et aux événements envoyés par le serveur directement en HTML, à l’aide d’attributs, afin que vous puissiez créer des interfaces utilisateur modernes avec la simplicité et la puissance de l’hypertexte.

htmx est petit (~ 14 000 min.gz’d), sans dépendance, extensible, compatible IE11 et a réduit la taille de la base de code de 67 % par rapport à React.

Regardons les fonctionnalités de Laravel htmx emballer décrit dans leur readme :

Demande Htmx

Vous pouvez résoudre une instance du HtmxRequest à partir du conteneur qui fournit des raccourcis pour lire les fichiers spécifiques à HTML en-têtes de requête.

useMauricius\LaravelHtmx\Http\HtmxRequest;
Route::get('/', function (HtmxRequest $request)
{
// always true if the request is performed by Htmx
    $request->isHtmxRequest();
// indicates that the request is via an element using hx-boost
    $request->isBoosted();
// the current URL of the browser
    $request->getCurrentUrl();
// true if the request is for history restoration after a miss in the local history cache
    $request->isHistoryRestoreRequest()
// the user response to an hx-prompt
    $request->getPromptResponse();
//     the id of the target element if it exists
    $request->getTarget();
// the name of the triggered element if it exists
    $request->getTriggerName();
// the id of the triggered element if it exists
    $request->getTriggerId();
});

Réponse HTML

• HtmxResponseClientRedirect

htmx peut déclencher une redirection côté client lorsqu’il reçoit une réponse avec le HX-Redirect entête. Le HtmxResponseClientRedirect facilite le déclenchement de telles redirections.

useMauricius\LaravelHtmx\Http\HtmxResponseClientRedirect;
Route::get('/', function (HtmxRequest $request)
{
returnnewHtmxResponseClientRedirect('/somewhere-else');
});

• HtmxResponseClientRefresh

htmx déclenchera un rechargement de page lorsqu’il recevra une réponse avec le HX-Refresh entête. HtmxResponseClientRefresh est une classe de réponse personnalisée qui vous permet d’envoyer une telle réponse. Cela ne prend aucun argument, puisque htmx ignore tout contenu.

useMauricius\LaravelHtmx\Http\HtmxResponseClientRefresh;
Route::get('/', function (HtmxRequest $request)
{
returnnewHtmxResponseClientRefresh();
});

Lorsque vous utilisez un déclencheur d’interrogationhtmx arrêtera l’interrogation lorsqu’il rencontrera une réponse avec le code d’état HTTP spécial 286. HtmxResponseStopPolling est une classe de réponse personnalisée avec ce code d’état.

useMauricius\LaravelHtmx\Http\HtmxResponseStopPolling;
Route::get('/', function (HtmxRequest $request)
{
returnnewHtmxResponseStopPolling();
});

Pour tout le reste en-têtes disponibles vous pouvez utiliser le HtmxResponse classe.

useMauricius\LaravelHtmx\Http\HtmxResponse;
Route::get('/', function (HtmxRequest $request)
{
returnwith(newHtmxResponse())
->location($location) // Allows you to do a client-side redirect that does not do a full page reload
->pushUrl($url) // pushes a new url into the history stack
->replaceUrl($url) // replaces the current URL in the location bar
->reswap($option) // Allows you to specify how the response will be swapped
->retarget($selector); // A CSS selector that updates the target of the content update to a different element on the page
});

De plus, vous pouvez déclencher événements côté client en utilisant le addTrigger méthode.

useMauricius\LaravelHtmx\Http\HtmxResponse;
Route::get('/', function (HtmxRequest $request)
{
returnwith(newHtmxResponse())
->addTrigger($event)
->addTriggerAfterSettle($event)
->addTriggerAfterSwap($event);
});

Vous pouvez appeler ces méthodes plusieurs fois pour déclencher plusieurs événements.

Rendre des fragments de lame avec Htmx

Cette bibliothèque fournit également une extension Blade de base pour le rendu fragments de modèle.

La bibliothèque fournit deux nouvelles directives Blade : @fragment et @endfragment. Vous pouvez utiliser ces directives pour spécifier un bloc de contenu dans un modèle et restituer uniquement ce morceau de contenu. Par exemple:

{{-- /contacts/detail.blade.php  --}}
<html>
    <body>
        <divhx-target="this">
@fragment("archive-ui")
@if($contact->archived)
                    <buttonhx-patch="/contacts/{{ $contact->id }}/unarchive">Unarchive</button>
@else
                    <buttonhx-delete="/contacts/{{ $contact->id }}">Archive</button>
@endif
@endfragment
        </div>
        <h3>Contact</h3>
        <p>{{ $contact->email }}</p>
    </body>
</html>

Avec ce fragment défini dans notre modèle, nous pouvons maintenant restituer soit le modèle entier :

Route::get('/', function ($id) {
    $contact =Contact::find($id);
returnView::make('contacts.detail', compact('contact'));
});

Ou nous pouvons restituer uniquement le archive-ui fragment du modèle en utilisant le renderFragment macro définie dans le \Illuminate\View\View classe:

Route::patch('/contacts/{id}/unarchive', function ($id) {
    $contact =Contact::find($id);
// The following approaches are equivalent
// Using the View Facade
return\Illuminate\Support\Facades\View::renderFragment('contacts.detail', 'archive-ui', compact('contact'));
// Using the view() helper
returnview()->renderFragment('contacts.detail', 'archive-ui', compact('contact'));
// Using the HtmxResponse Facade
return\Mauricius\LaravelHtmx\Facades\HtmxResponse::renderFragment('contacts.detail', 'archive-ui', compact('contact'));
// Using the HtmxResponse class
returnwith(new\Mauricius\LaravelHtmx\Http\HtmxResponse())
->renderFragment('contacts.detail', 'archive-ui', compact('contact'));
});

Prise en charge des échanges OOB

htmx prend en charge la mise à jour de plusieurs cibles en renvoyant plusieurs réponses partielles avec hx-swap-oop. Avec cette bibliothèque, vous pouvez renvoyer plusieurs fragments en utilisant le HtmxResponse comme type de retour.

Par exemple, disons que nous souhaitons marquer une tâche comme terminée à l’aide d’une requête PATCH pour /todos/{id}. Avec la même demande, nous souhaitons également mettre à jour dans le pied de page le nombre de tâches restantes :

{{-- /todos.blade.php  --}}
<html>
    <body>
        <mainhx-target="this">
            <section>
                <ulclass="todo-list">
@fragment("todo")
                        <liid="todo-{{ $todo->id }}"@class(['completed'=> $todo->done])>
                            <input
type="checkbox"
class="toggle"
hx-patch="/todos/{{ $todo->id }}"
@checked($todo->done)
hx-target="#todo-{{ $todo->id }}"
hx-swap="outerHTML"
                            />
{{ $todo->name }}
                        </li>
@endfragment
                </ul>
            </section>
            <footer>
@fragment("todo-count")
                    <spanid="todo-count"hx-swap-oob="true">
                        <strong>{{ $left }} items left</strong>
                    </span>
@endfragment
            </footer>
        </main>
    </body>
</html>

Nous pouvons utiliser le HtmxResponse pour renvoyer plusieurs fragments :

Route::patch('/todos/{id}', function ($id) {
    $todo =Todo::find($id);
    $todo->done =!$todo->done;
    $todo->save();
    $left =Todo::where('done', 0)->count();
returnHtmxResponse::addFragment('todomvc', 'todo', compact('todo'))
->addFragment('todomvc', 'todo-count', compact('left'));
});

En savoir plus sur Laravel htmx paquet sur GitHub.

to laravel-news.com

---

Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931

---