htmx_multi_swap_extension_quickstart_multiple_element_update.ts

1import htmx from 'htmx.org';
2
3/**
4 * The multi-swap extension allows you to swap multiple elements 
5 * identified by their IDs from the HTML response.
6 * 
7 * To use in TypeScript/ES modules, ensure htmx is imported first.
8 * The extension is usually included via a side-effect import 
9 * if installed via npm (e.g., 'htmx-ext-multi-swap').
10 */
11import 'htmx-ext-multi-swap';
12
13// Example of how the HTML structure would look for this extension:
14const appHtml = `
15<div hx-ext="multi-swap">
16    <!-- 
17      The 'multi-swap' strategy uses the format: 
18      hx-swap="multi:#id1:swap-method,#id2:swap-method" 
19    -->
20    <button hx-get="/example" 
21            hx-swap="multi:#id1:innerHTML,#id2:outerHTML">
22        Click to multi-swap
23    </button>
24
25    <div id="id1">Old Content 1</div>
26    <div id="id2">Old Content 2</div>
27</div>
28`;
29
30// Initialize htmx manually if necessary in your framework
31// htmx.process(document.body);