htmx_restored_extension_trigger_on_history_navigation.ts

1import * as htmx from 'htmx.org';
2
3/**
4 * htmx-ext-restored
5 * This extension allows you to trigger htmx requests when a page is 
6 * restored from the browser history (back/forward).
7 */
8htmx.defineExtension('restored', {
9    onEvent: function (name: string, evt: any) {
10        if (name === "htmx:historyRestore") {
11            const restoredElements = document.querySelectorAll('[hx-trigger*="restored"]');
12            restoredElements.forEach((elt) => {
13                htmx.trigger(elt, "restored", {});
14            });
15        }
16        return true;
17    }
18});
19
20// Example Usage in HTML (for context):
21// <div hx-ext="restored">
22//    <div hx-get="/updates" hx-trigger="restored">
23//        This content refreshes when you navigate back to this page.
24//    </div>
25// </div>