itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-28 21:41:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into dev

Browse Source
This commit is contained in:
Carson Gross 2022-10-18 13:16:27 -06:00
commit a87af0cb0d
10 changed files with 42 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
CHANGELOG.md
View File

@ -13,7 +13,7 @@
* [Idiomorph](https://github.com/bigskysoftware/idiomorph) is now available for all your morph-swapping needs
* The `unset` directive now works properly for `hx-vals` and `hx-vars`
* The title of the page is now properly set on a history cache miss
* The new [`hx-validate`](/attributes/hx-validate) attribute will force elements to validate before a request, even if
* The new [`hx-validate`](https://htmx.org/attributes/hx-validate) attribute will force elements to validate before a request, even if
they are not within a form being submitted
* Many smaller bug and docs fixes
@ -42,14 +42,14 @@
* Fix OOB swapping of multiple elements in response
* The `HX-Location` response header now implements client-side redirects entirely within htmx
* The `HX-Reswap` response header allows you to change the swap behavior of htmx
* The new [`hx-select-oob`](/attributes/hx-select-oob) attribute selects one or more elements from a server response to swap in via an out of band swap
* The new [`hx-replace-url`](/attributes/hx-replace-url) attribute can be used to replace the current URL in the location
* The new [`hx-select-oob`](https://htmx.org/attributes/hx-select-oob) attribute selects one or more elements from a server response to swap in via an out of band swap
* The new [`hx-replace-url`](https://htmx.org/attributes/hx-replace-url) attribute can be used to replace the current URL in the location
bar (very similar to `hx-push-url` but no new history entry is created). The corresponding `HX-Replace-Url` response header can be used as well.
* htmx now properly handles anchors in both boosted links, as well as in `hx-get`, etc. attributes
## [1.7.0] - 2022-02-22
* The new [`hx-sync`](/attributes/hx-sync) attribute allows you to synchronize multiple element requests on a single
* The new [`hx-sync`](https://htmx.org/attributes/hx-sync) attribute allows you to synchronize multiple element requests on a single
element using various strategies (e.g. replace)
* You can also now abort an element making a request by sending it the `htmx:abort` event
* [Server Sent Events](/extensions/server-sent-events) and [Web Sockets](/extensions/web-sockets) are now available as
@ -57,7 +57,7 @@
moved entirely out to these new extensions. By moving these features to extensions we will be able to add functionality
to both of them without compromising the core file size of htmx. You are encouraged to move over to the new
extensions, but `hx-sse` and `hx-ws` will continue to work indefinitely in htmx 1.x.
* You can now mask out [attribute inheritance](/docs#inheritance) via the [`hx-disinherit`](/attributes/hx-disinherit) attribute.
* You can now mask out [attribute inheritance](/docs#inheritance) via the [`hx-disinherit`](https://htmx.org/attributes/hx-disinherit) attribute.
* The `HX-Push` header can now have the `false` value, which will prevent a history snapshot from occuring.
* Many new extensions, with a big thanks to all the contributors!
* A new [`alpine-morph`](/extensions/alpine-morph) allows you to use Alpine's swapping engine, which preserves Alpine
@ -65,9 +65,9 @@
on history restoration.
* A [loading-states](/extensions/loading-states) extension was added that allows you to easily manage loading states
while a request is in flight, including disabling elements, and adding and removing CSS classes.
* The `this` symbol now resolves properly for the [`hx-include`](/attributes/hx-include) and [`hx-indicator`](/attributes/hx-indicator)
* The `this` symbol now resolves properly for the [`hx-include`](https://htmx.org/attributes/hx-include) and [`hx-indicator`](https://htmx.org/attributes/hx-indicator)
attributes
* When an object is included via the [`hx-vals`](/attributes/hx-vals) attribute, it will be converted to JSON (rather
* When an object is included via the [`hx-vals`](https://htmx.org/attributes/hx-vals) attribute, it will be converted to JSON (rather
than rendering as the string `[Object object]"`)
* You can now pass a swap style in to the `htmx.ajax()` function call.
* Poll events now contain a `target` attribute, allowing you to filter a poll on the element that is polling.
@ -84,13 +84,13 @@
on htmx:afterRequest[failed]
set #myCheckbox's checked to true
```
* Fixed the `from:` option in [`hx-trigger`](/attributes/hx-trigger) to support `closest <CSS selector>`
* Fixed the `from:` option in [`hx-trigger`](https://htmx.org/attributes/hx-trigger) to support `closest <CSS selector>`
and `find <CSS selector>` forms
* Don't boost anchor tags with an explicit `target` set
* Don't cancel all events on boosted elements, only the events that naturally trigger them (click for anchors, submit
for forms)
* Persist revealed state in the DOM so that on history navigation, revealed elements are not re-requested
* Process all [`hx-ext`](/attributes/hx-ext) attributes, even if no other htmx attribute is on the element
* Process all [`hx-ext`](https://htmx.org/attributes/hx-ext) attributes, even if no other htmx attribute is on the element
* Snapshot the current URL on load so that history support works properly after a page refresh occurs
* Many, many documentation updates (thank you to all the contributors!)

2
src/htmx.js
View File

@ -3182,7 +3182,7 @@ return (function () {
}
}
if (isError) {
triggerErrorEvent(elt, 'htmx:responseError', mergeObjects({error: "Response Status Error Code " + xhr.status + " from " + responseInfo.pathInfo.path}, responseInfo));
triggerErrorEvent(elt, 'htmx:responseError', mergeObjects({error: "Response Status Error Code " + xhr.status + " from " + responseInfo.pathInfo.requestPath}, responseInfo));
}
}

2
www/essays.md
View File

@ -5,6 +5,7 @@ title: </> htmx - Essays
## Essays
* [A Real World React to htmx Port](/essays/a-real-world-react-to-htmx-port/)
* [How Did REST Come To Mean The Opposite of REST?](/essays/how-did-rest-come-to-mean-the-opposite-of-rest/)
* [Hypermedia-Driven Applications (HDAs)](/essays/hypermedia-driven-applications)
* [HATEOAS](/essays/hateoas)
@ -64,4 +65,5 @@ title: </> htmx - Essays
<img src="/img/memes/uarealldoingitwrong.png">
<img src="/img/memes/feelbad.png">
<img src="/img/memes/drakememes.png">
<img src="/img/memes/fullstack.jpg">
</div>

44
www/essays/a-real-world-react-to-htmx-port.md
View File

@ -1,12 +1,13 @@
---
layout: layout.njk
tags: posts
title: A Real World React -> htmx Port
---
## Moving From React to htmx
It is all well and good talking about [REST & HATEOAS](/essays/hateoas) in theory or describing the
[Hypermedia-Driven Application](/essays/hypermedia-driven-applications) architecture, but at the end of the day, what
[Hypermedia-Driven Application](/essays/hypermedia-driven-applications) architecture, but, at the end of the day, what
matters in software is practical: Does it work? Does it improve things?
We can say for sure that htmx _works_, since we use it in our own software. But it is hard to say that it would be
@ -27,16 +28,9 @@ Until now.
## Video
[//]: # (You can &#40;should!&#41; watch the entire presentation here:)
You can (should!) watch the entire presentation here:
[//]: # ()
[//]: # (<iframe width="615" height="350" src="https://www.youtube.com/embed/dQw4w9WgXcQ" )
[//]: # (title="Rick Astley - Never Gonna Give You Up &#40;Official Music Video&#41;" frameborder="0" )
[//]: # (allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>)
The video of this talk is not publically available yet, but if you just want the executive summary:
<iframe style="max-width: 100%" width="618" height="352" src="https://www.youtube.com/embed/3GObi93tjZI" title="DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it's awesome!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
## Executive Summary
@ -54,37 +48,25 @@ The video of this talk is not publically available yet, but if you just want the
These are eye-popping numbers, and they reflect the fact that the Contexte application is extremely amenable to
hypermedia: it is a content-focused application that shows lots of text and images. We would not expect every
web application to see these sorts of numbers. However, we _would_ expect many applications to see dramatic improvements
by adopting the hypermedia/htmx approach, at least for part of their system.
web application to see these sorts of numbers.
However, we _would_ expect _many_ applications to see dramatic improvements by adopting the hypermedia/htmx approach, at
least for part of their system.
### Dev Team Makeup
One easy-to-overlook aspect of the port is the effect it had on the team's structure. When Contexte was using react,
there was a hard split between back end and front end, with two developers being entirely back end, one developer being
entirely front end, and one developer being "full stack". "Full stack" here means they are comfortable with doing work
on both the front end and back end, and, thus are able to develop features entirely independently across the whole "web stack".
there was a hard split between back-end and front-end, with two developers being entirely back-end, one developer being
entirely front-end, and one developer being "full stack".
("Full stack" here means they are comfortable doing work on both the front-end and back-end, and, thus are able to
develop features entirely independently across the whole "stack".)
After the port to htmx, *the entire team* became "full stack" developers. This means that each team member is more
effective and able to contribute more value. It also makes development more fun, since developers can own an entire
feature. Finally, it can lead to better optimized software, since the developer can make optimizations anywhere in
the stack without needing to coordinate with other developers.
## Q&A
Here are some questions we asked David:
Q: How did you hear about htmx? What made you consider using it for Contexte?
Q: These are eye-popping numbers. Did you expect htmx to perform this well for you?
Q: Your team went from having a strong back-end/front-end split to a team of full-stack developers. How did that change
affect development?
Q: Surely there were areas where htmx wasn't as nice as react. Can you give some?
Q: Do you have any insights for other people considering htmx?
## Slides
The slides for the presentation can be found here (be sure to check the excellent speakers notes!)

4
www/essays/hypermedia-driven-applications.md
View File

@ -122,7 +122,7 @@ In an HDA, hypermedia (HTML) is the primary medium for building the application,
* All communication with the server is still managed via HTTP requests with hypermedia (HTML) responses
* Scripting is used mainly to enhance the *front-end experience* of the application
Scripting augments the existing hypermedia (HTML) but do not *supersede* it or subvert the fundamental REST-ful
Scripting augments the existing hypermedia (HTML) but does not *supersede* it or subvert the fundamental REST-ful
architecture of the HDA.
## HDA-style libraries
@ -153,4 +153,4 @@ with SPAs in many cases.
<div style="padding-top: 120px;padding-bottom:40px;text-align: center">
&lt;/&gt;
</div>
</div>

2
www/examples/infinite-scroll.md
View File

@ -21,6 +21,8 @@ Let's focus on the final row (or the last element of your content):
This last element contains a listener which, when scrolled into view, will trigger a request. The result is then appended after it.
The last element of the results will itself contain the listener to load the *next* page of results, and so on.
> `revealed` - triggered when an element is scrolled into the viewport (also useful for lazy-loading). If you are using `overflow` in css like `overflow-y: scroll` you should use `intersect once` instead of `revealed`.
{% include demo_ui.html.liquid %}
<script>

BIN
www/img/memes/fullstack.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

4
www/index.md
View File

@ -18,8 +18,8 @@ directly in HTML, using [attributes](https://htmx.org/reference#attributes), so
htmx is small ([~12k min.gz'd](https://unpkg.com/htmx.org/dist/)),
[dependency-free](https://github.com/bigskysoftware/htmx/blob/master/package.json),
[extendable](https://htmx.org/extensions) &
IE11 compatible
[extendable](https://htmx.org/extensions),
IE11 compatible & has **reduced** code base sizes by [67% when compared with react](/essays/a-real-world-react-to-htmx-port/)
## motivation

20
www/reference.md
View File

@ -6,18 +6,18 @@ title: </> htmx - Attributes
## Contents
* [Htmx Attributes](#attributes)
* [Htmx Additional Attributes](#attributes-additional)
* [Htmx CSS Classes](#classes)
* [Htmx Request Headers](#request_headers)
* [Htmx Response Headers](#response_headers)
* [Htmx Events](#events)
* [Htmx Extensions](/extensions#reference)
* [htmx Core Attributes](#attributes)
* [htmx Additional Attributes](#attributes-additional)
* [htmx CSS Classes](#classes)
* [htmx Request Headers](#request_headers)
* [htmx Response Headers](#response_headers)
* [htmx Events](#events)
* [htmx Extensions](/extensions#reference)
* [Javascript API](#api)
## <a name="attributes"></a> [Attribute Reference](#attributes)
## <a name="attributes"></a> [Core Attribute Reference](#attributes)
The most significant attributes to use htmx.
The following are the most common attributes when using htmx.
<div class="info-table">
@ -39,7 +39,7 @@ The most significant attributes to use htmx.
## <a name="attributes-additional"></a> [Additional Attribute Reference](#attributes-additional)
All other attributes available.
The table below lists all other attributes available in htmx.
<div class="info-table">

1
www/server-examples.md
View File

@ -56,6 +56,7 @@ These examples may make it a bit easier to get started using htmx with your plat
### Spring Boot
- <https://github.com/wiverson/htmx-demo>
- <https://github.com/wimdeblauwe/blog-example-code/tree/master/todomvc-htmx>
### Quarkus