itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 07:21:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
Carson Gross 2024-04-29 11:24:36 -06:00
commit 57595bc039
11 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CONTRIBUTING.md
View File

@ -16,7 +16,7 @@ Thank you for your interest in contributing! Because we're a small team, we have
1. All PRs must be made against the `dev` branch, except documentation PRs (that only modify the `www/` directory) which can be made against `master`. 1. All PRs must be made against the `dev` branch, except documentation PRs (that only modify the `www/` directory) which can be made against `master`.
1. Please avoid sending the `dist` files along your PR, only include the `src` ones. 1. Please avoid sending the `dist` files along your PR, only include the `src` ones.
1. Please include test cases in [`/test`](https://github.com/bigskysoftware/htmx/tree/dev/test) and docs in [`/www`](https://github.com/bigskysoftware/htmx/tree/dev/www). 1. Please include test cases in [`/test`](https://github.com/bigskysoftware/htmx/tree/dev/test) and docs in [`/www`](https://github.com/bigskysoftware/htmx/tree/dev/www).
1. We squash all PRs, so you're welcome to submit with as many commits are you like; they will be evaluated as a single, standalone change. 1. We squash all PRs, so you're welcome to submit with as many commits as you like; they will be evaluated as a single, standalone change.
### Review Guidelines ### Review Guidelines
1. Open PRs represent issues that we're actively thinking working on merging (at a pace we can manage). If we think a proposal needs more discussion, or that the existing code would require a lot of back-and-forth to merge, we might close it and suggest you make an issue. 1. Open PRs represent issues that we're actively thinking working on merging (at a pace we can manage). If we think a proposal needs more discussion, or that the existing code would require a lot of back-and-forth to merge, we might close it and suggest you make an issue.

2
src/htmx.d.ts vendored
View File

@ -411,7 +411,7 @@ export interface HtmxConfig {
*/ */
wsBinaryType?: 'blob' | 'arraybuffer'; wsBinaryType?: 'blob' | 'arraybuffer';
/** /**
* If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser * If set to true htmx will append the target element to the GET request in the format org.htmx.cache-buster=targetElementId
* @default false * @default false
*/ */
getCacheBusterParam?: boolean; getCacheBusterParam?: boolean;

2
www/content/api.md
View File

@ -128,7 +128,7 @@ Note that using a [meta tag](@/docs.md#config) is the preferred mechanism for se
* `disableSelector:"[hx-disable], [data-hx-disable]"` - array of strings: htmx will not process elements with this attribute on it or a parent * `disableSelector:"[hx-disable], [data-hx-disable]"` - array of strings: htmx will not process elements with this attribute on it or a parent
* `scrollBehavior:'smooth'` - string: the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link. * `scrollBehavior:'smooth'` - string: the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link.
* `defaultFocusScroll:false` - boolean: if the focused element should be scrolled into view, can be overridden using the [focus-scroll](@/attributes/hx-swap.md#focus-scroll) swap modifier * `defaultFocusScroll:false` - boolean: if the focused element should be scrolled into view, can be overridden using the [focus-scroll](@/attributes/hx-swap.md#focus-scroll) swap modifier
* `getCacheBusterParam:false` - boolean: if set to true htmx will include a cache-busting parameter in `GET` requests to avoid caching partial responses by the browser * `getCacheBusterParam:false` - boolean: if set to true htmx will append the target element to the `GET` request in the format `org.htmx.cache-buster=targetElementId`
* `globalViewTransitions:false` - boolean: if set to `true`, htmx will use the [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API when swapping in new content. * `globalViewTransitions:false` - boolean: if set to `true`, htmx will use the [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API when swapping in new content.
* `methodsThatUseUrlParams:["get"]` - array of strings: htmx will format requests with these methods by encoding their parameters in the URL, not the request body * `methodsThatUseUrlParams:["get"]` - array of strings: htmx will format requests with these methods by encoding their parameters in the URL, not the request body
* `selfRequestsOnly:false` - boolean: if set to `true` will only allow AJAX requests to the same domain as the current document * `selfRequestsOnly:false` - boolean: if set to `true` will only allow AJAX requests to the same domain as the current document

2
www/content/attributes/hx-indicator.md
View File

@ -81,7 +81,7 @@ This simulates what a spinner might look like in that situation:
* `hx-indicator` is inherited and can be placed on a parent element * `hx-indicator` is inherited and can be placed on a parent element
* In the absence of an explicit indicator, the `htmx-request` class will be added to the element triggering the * In the absence of an explicit indicator, the `htmx-request` class will be added to the element triggering the
request request
* If you want to use your own CSS but still use `htmx-indicator` as class name, then you need to disable `includeIndicatorStyles`. See [Configuring htmx](@/docs.md#config). The easiest way is to add this the `<head>` of your HTML: * If you want to use your own CSS but still use `htmx-indicator` as class name, then you need to disable `includeIndicatorStyles`. See [Configuring htmx](@/docs.md#config). The easiest way is to add this to the `<head>` of your HTML:
```html ```html
<meta name="htmx-config" content='{"includeIndicatorStyles": false}'> <meta name="htmx-config" content='{"includeIndicatorStyles": false}'>
``` ```

14
www/content/docs.md
View File

@ -427,9 +427,9 @@ with any of the following values:
| `innerHTML` | the default, puts the content inside the target element | `innerHTML` | the default, puts the content inside the target element
| `outerHTML` | replaces the entire target element with the returned content | `outerHTML` | replaces the entire target element with the returned content
| `afterbegin` | prepends the content before the first child inside the target | `afterbegin` | prepends the content before the first child inside the target
| `beforebegin` | prepends the content before the target in the targets parent element | `beforebegin` | prepends the content before the target in the target's parent element
| `beforeend` | appends the content after the last child inside the target | `beforeend` | appends the content after the last child inside the target
| `afterend` | appends the content after the target in the targets parent element | `afterend` | appends the content after the target in the target's parent element
| `delete` | deletes the target element regardless of the response | `delete` | deletes the target element regardless of the response
| `none` | does not append content from response ([Out of Band Swaps](#oob_swaps) and [Response Headers](#response-headers) will still be processed) | `none` | does not append content from response ([Out of Band Swaps](#oob_swaps) and [Response Headers](#response-headers) will still be processed)
@ -485,7 +485,7 @@ The modifiers available on `hx-swap` are:
| `settle` | The settle delay to use (e.g. `100ms`) between when new content is inserted and when it is settled | | `settle` | The settle delay to use (e.g. `100ms`) between when new content is inserted and when it is settled |
| `ignoreTitle` | If set to `true`, any title found in the new content will be ignored and not update the document title | | `ignoreTitle` | If set to `true`, any title found in the new content will be ignored and not update the document title |
| `scroll` | `top` or `bottom`, will scroll the target element to its top or bottom | | `scroll` | `top` or `bottom`, will scroll the target element to its top or bottom |
| `show` | `top` or `bottom`, will scroll the target elements top or bottom into view | | `show` | `top` or `bottom`, will scroll the target element's top or bottom into view |
All swap modifiers appear after the swap style is specified, and are colon-separated. All swap modifiers appear after the swap style is specified, and are colon-separated.
@ -494,7 +494,7 @@ See the [hx-swap](@/attributes/hx-swap.md) documentation for more details on the
### Synchronization {#synchronization} ### Synchronization {#synchronization}
Often you want to coordinate the requests between two elements. For example, you may want a request from one element Often you want to coordinate the requests between two elements. For example, you may want a request from one element
to supersede the request of another element, or to wait until the other elements request has finished. to supersede the request of another element, or to wait until the other element's request has finished.
htmx offers a [`hx-sync`](@/attributes/hx-sync.md) attribute to help you accomplish this. htmx offers a [`hx-sync`](@/attributes/hx-sync.md) attribute to help you accomplish this.
@ -741,7 +741,7 @@ The anchor tag in this div will issue an AJAX `GET` request to `/blog` and swap
A feature of `hx-boost` is that it degrades gracefully if javascript is not enabled: the links and forms continue A feature of `hx-boost` is that it degrades gracefully if javascript is not enabled: the links and forms continue
to work, they simply don't use ajax requests. This is known as to work, they simply don't use ajax requests. This is known as
[Progressive Enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement), and it allows [Progressive Enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement), and it allows
a wider audience to use your sites functionality. a wider audience to use your site's functionality.
Other htmx patterns can be adapted to achieve progressive enhancement as well, but they will require more thought. Other htmx patterns can be adapted to achieve progressive enhancement as well, but they will require more thought.
@ -1014,7 +1014,7 @@ WebSocket sends.
Htmx fires events around validation that can be used to hook in custom validation and error handling: Htmx fires events around validation that can be used to hook in custom validation and error handling:
* `htmx:validation:validate` - called before an elements `checkValidity()` method is called. May be used to add in * `htmx:validation:validate` - called before an element's `checkValidity()` method is called. May be used to add in
custom validation logic custom validation logic
* `htmx:validation:failed` - called when `checkValidity()` returns false, indicating an invalid input * `htmx:validation:failed` - called when `checkValidity()` returns false, indicating an invalid input
* `htmx:validation:halted` - called when a request is not issued due to validation errors. Specific errors may be found * `htmx:validation:halted` - called when a request is not issued due to validation errors. Specific errors may be found
@ -1608,7 +1608,7 @@ listed below:
| `htmx.config.timeout` | defaults to 0, the number of milliseconds a request can take before automatically being terminated | | `htmx.config.timeout` | defaults to 0, the number of milliseconds a request can take before automatically being terminated |
| `htmx.config.scrollBehavior` | defaults to 'smooth', the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link. | | `htmx.config.scrollBehavior` | defaults to 'smooth', the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link. |
| `htmx.config.defaultFocusScroll` | if the focused element should be scrolled into view, defaults to false and can be overridden using the [focus-scroll](@/attributes/hx-swap.md#focus-scroll) swap modifier. | | `htmx.config.defaultFocusScroll` | if the focused element should be scrolled into view, defaults to false and can be overridden using the [focus-scroll](@/attributes/hx-swap.md#focus-scroll) swap modifier. |
| `htmx.config.getCacheBusterParam` | defaults to false, if set to true htmx will include a cache-busting parameter in `GET` requests to avoid caching partial responses by the browser | | `htmx.config.getCacheBusterParam` | defaults to false, if set to true htmx will append the target element to the `GET` request in the format `org.htmx.cache-buster=targetElementId` |
| `htmx.config.globalViewTransitions` | if set to `true`, htmx will use the [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API when swapping in new content. | | `htmx.config.globalViewTransitions` | if set to `true`, htmx will use the [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API when swapping in new content. |
| `htmx.config.methodsThatUseUrlParams` | defaults to `["get"]`, htmx will format requests with these methods by encoding their parameters in the URL, not the request body | | `htmx.config.methodsThatUseUrlParams` | defaults to `["get"]`, htmx will format requests with these methods by encoding their parameters in the URL, not the request body |
| `htmx.config.selfRequestsOnly` | defaults to `false`, if set to `true` will only allow AJAX requests to the same domain as the current document | | `htmx.config.selfRequestsOnly` | defaults to `false`, if set to `true` will only allow AJAX requests to the same domain as the current document |

2
www/content/essays/rest-explained.md
View File

@ -91,7 +91,7 @@ Let's go through each of these in turn.
#### Identification of Resources #### Identification of Resources
The first aspect of Rest is the idea of *resources* that are found somewhere via... well, [Universal Resource Locators](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL), or URLs. Note that the HTML contains additional URLs for the actions that you can perform on this The first aspect of Rest is the idea of *resources* that are found somewhere via... well, [Universal Resource Locators](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL), or URLs. Note that the HTML contains additional URLs for the actions that you can perform on this
resource (`contacts/1`), following the conventional hierarchical arrangement of URL paths. resource (`contacts/42`), following the conventional hierarchical arrangement of URL paths.
#### Manipulation of Resources Through Representations #### Manipulation of Resources Through Representations

4
www/content/examples/confirm.md
View File

@ -9,7 +9,7 @@ applications UX.
In this example we will see how to use [sweetalert2](https://sweetalert2.github.io) to implement a custom confirmation dialog. Below are two In this example we will see how to use [sweetalert2](https://sweetalert2.github.io) to implement a custom confirmation dialog. Below are two
examples, one using a click+custom event method, and one using the built-in `hx-confirm` attribute and examples, one using a click+custom event method, and one using the built-in `hx-confirm` attribute and
the and the [`htmx:confirm`](@/events.md#htmx:confirm) event. the [`htmx:confirm`](@/events.md#htmx:confirm) event.
## Using on click+custom event ## Using on click+custom event
@ -17,7 +17,7 @@ the and the [`htmx:confirm`](@/events.md#htmx:confirm) event.
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<button hx-get="/confirmed" <button hx-get="/confirmed"
hx-trigger='confirmed' hx-trigger='confirmed'
onClick="Swal.fire({title: 'Confirm', text:'Do you want to continue?'}).then(function(result){ onClick="Swal.fire({title: 'Confirm', text:'Do you want to continue?'}).then((result)=>{
if(result.isConfirmed){ if(result.isConfirmed){
htmx.trigger(this, 'confirmed'); htmx.trigger(this, 'confirmed');
} }

2
www/content/examples/tabs-hateoas.md
View File

@ -16,7 +16,7 @@ Subsequent tab pages display all tabs and highlight the selected one accordingly
```html ```html
<div class="tab-list" role="tablist"> <div class="tab-list" role="tablist">
<button hx-get="/tab1" class="selected" role="tab" aria-selected="false" aria-controls="tab-content">Tab 1</button> <button hx-get="/tab1" class="selected" role="tab" aria-selected="true" aria-controls="tab-content">Tab 1</button>
<button hx-get="/tab2" role="tab" aria-selected="false" aria-controls="tab-content">Tab 2</button> <button hx-get="/tab2" role="tab" aria-selected="false" aria-controls="tab-content">Tab 2</button>
<button hx-get="/tab3" role="tab" aria-selected="false" aria-controls="tab-content">Tab 3</button> <button hx-get="/tab3" role="tab" aria-selected="false" aria-controls="tab-content">Tab 3</button>
</div> </div>

2
www/content/reference.md
View File

@ -242,7 +242,7 @@ listed below:
| `htmx.config.timeout` | defaults to 0, the number of milliseconds a request can take before automatically being terminated | | `htmx.config.timeout` | defaults to 0, the number of milliseconds a request can take before automatically being terminated |
| `htmx.config.scrollBehavior` | defaults to 'smooth', the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link. | | `htmx.config.scrollBehavior` | defaults to 'smooth', the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link. |
| `htmx.config.defaultFocusScroll` | if the focused element should be scrolled into view, defaults to false and can be overridden using the [focus-scroll](@/attributes/hx-swap.md#focus-scroll) swap modifier. | | `htmx.config.defaultFocusScroll` | if the focused element should be scrolled into view, defaults to false and can be overridden using the [focus-scroll](@/attributes/hx-swap.md#focus-scroll) swap modifier. |
| `htmx.config.getCacheBusterParam` | defaults to false, if set to true htmx will include a cache-busting parameter in `GET` requests to avoid caching partial responses by the browser | | `htmx.config.getCacheBusterParam` | defaults to false, if set to true htmx will append the target element to the `GET` request in the format `org.htmx.cache-buster=targetElementId` |
| `htmx.config.globalViewTransitions` | if set to `true`, htmx will use the [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API when swapping in new content. | | `htmx.config.globalViewTransitions` | if set to `true`, htmx will use the [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API when swapping in new content. |
| `htmx.config.methodsThatUseUrlParams` | defaults to `["get"]`, htmx will format requests with these methods by encoding their parameters in the URL, not the request body | | `htmx.config.methodsThatUseUrlParams` | defaults to `["get"]`, htmx will format requests with these methods by encoding their parameters in the URL, not the request body |
| `htmx.config.selfRequestsOnly` | defaults to `false`, if set to `true` will only allow AJAX requests to the same domain as the current document | | `htmx.config.selfRequestsOnly` | defaults to `false`, if set to `true` will only allow AJAX requests to the same domain as the current document |

1
www/content/talk/podcasts.csv
View File

@ -23,3 +23,4 @@ PodRocket by LogRocket,https://podrocket.logrocket.com/htmx-carson-gross
Backend Banter - Behind htmx: the re-Rise of Hypermedia,https://www.backendbanter.fm/episodes/024-behind-htmx-carson-gross-on-the-re-rise-of-hypermedia Backend Banter - Behind htmx: the re-Rise of Hypermedia,https://www.backendbanter.fm/episodes/024-behind-htmx-carson-gross-on-the-re-rise-of-hypermedia
Syntax - htmx Web Apps,https://syntax.fm/show/734/htmx-web-apps-with-carson-gross Syntax - htmx Web Apps,https://syntax.fm/show/734/htmx-web-apps-with-carson-gross
PodRocket - htmx v2,https://podrocket.logrocket.com/htmx-v2-carson-gross PodRocket - htmx v2,https://podrocket.logrocket.com/htmx-v2-carson-gross
The Collab Lab - Hypermedia - Network Architecture Decoupling,https://www.youtube.com/watch?v=j1XXoeer320

1 Name URL
23 Backend Banter - Behind htmx: the re-Rise of Hypermedia https://www.backendbanter.fm/episodes/024-behind-htmx-carson-gross-on-the-re-rise-of-hypermedia
24 Syntax - htmx Web Apps https://syntax.fm/show/734/htmx-web-apps-with-carson-gross
25 PodRocket - htmx v2 https://podrocket.logrocket.com/htmx-v2-carson-gross
26 The Collab Lab - Hypermedia - Network Architecture Decoupling https://www.youtube.com/watch?v=j1XXoeer320

1
www/content/webring.md
View File

@ -109,6 +109,7 @@ title = "htmx webring"
<tr><td><a rel="nofollow" target="_blank" href="https://gophemeral.com">Gophemeral</a></td><td>Share secrets securely!</td></tr> <tr><td><a rel="nofollow" target="_blank" href="https://gophemeral.com">Gophemeral</a></td><td>Share secrets securely!</td></tr>
<tr><td><a rel="nofollow" target="_blank" href="https://signup.casa">Signup Casa</a></td><td>Simple, convenient sign-up forms.</td></tr> <tr><td><a rel="nofollow" target="_blank" href="https://signup.casa">Signup Casa</a></td><td>Simple, convenient sign-up forms.</td></tr>
<tr><td><a rel="nofollow" target="_blank" href="https://recipes.musicavis.ca">Recipya</a></td><td>A clean, simple and powerful recipe manager your whole family can enjoy.</td></tr> <tr><td><a rel="nofollow" target="_blank" href="https://recipes.musicavis.ca">Recipya</a></td><td>A clean, simple and powerful recipe manager your whole family can enjoy.</td></tr>
<tr><td><a rel="noopener" target="_blank" href="https://statusnook.com">Statusnook</a></td><td>Effortlessly deploy a status page and start monitoring endpoints in minutes.</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>