Mojolicious::Plugin::HTMX - Mojolicious Plugin for htmx
# Mojolicious $self->plugin('Mojolicious::Plugin::HTMX'); # Mojolicious::Lite plugin 'Mojolicious::Plugin::HTMX'; get '/trigger' => 'trigger'; post '/trigger' => sub ($c) { state $count = 0; $count++; $c->htmx->res->trigger(showMessage => 'Here Is A Message'); $c->render(text => "Triggered $count times"); }; @@ template.html.ep <html> <head> %= app->htmx->asset </head> <body> %= content </body> </html> @@ trigger.html.ep % layout 'default'; <h1>Trigger</h1> <button hx-post="/trigger">Click Me</button> <script> document.body.addEventListener("showMessage", function(e){ alert(e.detail.value); }); </script>
Mojolicious::Plugin::HTMX is a Mojolicious plugin to add htmx in your Mojolicious application.
Mojolicious::Plugin::HTMX implements the following helpers.
%= htmx->asset %= htmx->asset(src => '/assets/js/htmx.min.js') %= htmx->asset(ext => debug)
Generate script tag for include htmx script file in your template.
script
if ($c->is_htmx_request) { # ... }
Based on HX-Request header.
HX-Request
Indicates that the request is via an element using hx-boost.
hx-boost
Based on HX-Boosted header.
HX-Boosted
The current URL of the browser.
Based on HX-Current-URL header.
HX-Current-URL
true if the request is for history restoration after a miss in the local history cache.
true
Based on HX-History-Restore-Request header.
HX-History-Restore-Request
The user response to an hx-prompt.
hx-prompt
Based on HX-Prompt header.
HX-Prompt
Always true.
The id of the target element if it exists.
id
Based on HX-Target header.
HX-Target
The name of the triggered element if it exists.
name
Based on HX-Trigger-Name header.
HX-Trigger-Name
The id of the triggered element if it exists.
Based on HX-Trigger header.
HX-Trigger
Allows you to do a client-side redirect that does not do a full page reload.
Based on HX-Location header.
HX-Location
Pushes a new url into the history stack.
Based on HX-Push-Url header.
HX-Push-Url
Can be used to do a client-side redirect to a new location.
Based on HX-Redirect header.
HX-Redirect
Full refresh of the page.
Based on HX-Refresh header.
HX-Refresh
Replaces the current URL in the location bar.
Based on HX-Replace-Url header.
HX-Replace-Url
Allows you to specify how the response will be swapped.
The possible values of this attribute are:
innerHTML
outerHTML
beforebegin
afterbegin
beforeend
afterend
delete
none
Based on HX-Reswap header.
HX-Reswap
A CSS selector that allows you to choose which part of the response is used to be swapped in. Overrides an existing hx-select on the triggering element
hx-select
Based on HX-Reselect header.
HX-Reselect
A CSS selector that updates the target of the content update to a different element on the page.
Based on HX-Retarget header.
HX-Retarget
Allows you to trigger client side events, see https://htmx.org/headers/hx-trigger for more info.
To trigger a single event with no additional details you can simply send the event name like so:
if ($c->is_htmx_request) { $c->htmx->res->trigger('myEvent'); }
If you want to pass details along with the event, you can use HASH for the value of the trigger:
if ($c->is_htmx_request) { $c->htmx->res->trigger( showMessage => 'Here Is A Message' ); } if ($c->is_htmx_request) { $c->htmx->res->trigger( showMessage => { level => 'info', message => 'Here Is A Message' } ); }
If you wish to invoke multiple events, you can simply add additional keys to the HASH:
if ($c->is_htmx_request) { $c->htmx->res->trigger( event1 => 'A message', event2 => 'Another message' ); }
You may also trigger multiple events with no additional details by sending event names in ARRAY:
if ($c->is_htmx_request) { $c->htmx->res->trigger(['event1', 'event2']); }
Based on HX-Trigger-After-Settle header.
HX-Trigger-After-Settle
Based on HX-Trigger-After-Swap header.
HX-Trigger-After-Swap
Mojolicious::Plugin::HTMX inherits all methods from Mojolicious::Plugin and implements the following new ones.
$plugin->register(Mojolicious->new);
Register plugin in Mojolicious application.
Mojolicious, Mojolicious::Guides, https://mojolicious.org.
Please report any bugs or feature requests through the issue tracker at https://github.com/giterlizzi/perl-Mojolicious-Plugin-HTMX/issues. You will be notified automatically of any progress on your issue.
This is open source software. The code repository is available for public review and contribution under the terms of the license.
https://github.com/giterlizzi/perl-Mojolicious-Plugin-HTMX
git clone https://github.com/giterlizzi/perl-Mojolicious-Plugin-HTMX.git
Giuseppe Di Terlizzi <gdt@cpan.org>
Copyright (c) 2022-2023, Giuseppe Di Terlizzi
This program is free software, you can redistribute it and/or modify it under the terms of the Artistic License version 2.0.
To install Mojolicious::Plugin::HTMX, copy and paste the appropriate command in to your terminal.
cpanm
cpanm Mojolicious::Plugin::HTMX
CPAN shell
perl -MCPAN -e shell install Mojolicious::Plugin::HTMX
For more information on module installation, please visit the detailed CPAN module installation guide.