release prep

CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 
 ## [2.0.3] - 2024-10-03
+* Added support for the experimental `moveBefore()` functionality in [Chrome Canary](https://www.google.com/chrome/canary/), 
+  see the [demo page](/examples/move-before) for more information.
+* Fixed `revealed` event when a resize reveals an element
+* Enabled `hx-preserve` in oob-swaps
+* Better degredation of `hx-boost` on forms with query parameters in their `action`
+* Improved shadowRoot support
+* Many smaller bug fixes
 
 ## [2.0.2] - 2024-08-12
 * no longer boost forms of type `dialog`

dist/htmx.amd.js

@@ -1465,7 +1465,7 @@ var htmx = (function() {
   function restorePreservedElements() {
     const pantry = find('#--htmx-preserve-pantry--')
     if (pantry) {
-      for (const preservedElt of pantry.children) {
+      for (const preservedElt of [...pantry.children]) {
         const existingElement = find('#' + preservedElt.id)
         // @ts-ignore - use proposed moveBefore feature
         existingElement.parentNode.moveBefore(preservedElt, existingElement)

dist/htmx.cjs.js

@@ -1464,7 +1464,7 @@ var htmx = (function() {
   function restorePreservedElements() {
     const pantry = find('#--htmx-preserve-pantry--')
     if (pantry) {
-      for (const preservedElt of pantry.children) {
+      for (const preservedElt of [...pantry.children]) {
         const existingElement = find('#' + preservedElt.id)
         // @ts-ignore - use proposed moveBefore feature
         existingElement.parentNode.moveBefore(preservedElt, existingElement)

dist/htmx.esm.js

@@ -1464,7 +1464,7 @@ var htmx = (function() {
   function restorePreservedElements() {
     const pantry = find('#--htmx-preserve-pantry--')
     if (pantry) {
-      for (const preservedElt of pantry.children) {
+      for (const preservedElt of [...pantry.children]) {
         const existingElement = find('#' + preservedElt.id)
         // @ts-ignore - use proposed moveBefore feature
         existingElement.parentNode.moveBefore(preservedElt, existingElement)

dist/htmx.js

@@ -1464,7 +1464,7 @@ var htmx = (function() {
   function restorePreservedElements() {
     const pantry = find('#--htmx-preserve-pantry--')
     if (pantry) {
-      for (const preservedElt of pantry.children) {
+      for (const preservedElt of [...pantry.children]) {
         const existingElement = find('#' + preservedElt.id)
         // @ts-ignore - use proposed moveBefore feature
         existingElement.parentNode.moveBefore(preservedElt, existingElement)

src/htmx.js

@@ -1464,7 +1464,7 @@ var htmx = (function() {
   function restorePreservedElements() {
     const pantry = find('#--htmx-preserve-pantry--')
     if (pantry) {
-      for (const preservedElt of pantry.children) {
+      for (const preservedElt of [...pantry.children]) {
         const existingElement = find('#' + preservedElt.id)
         // @ts-ignore - use proposed moveBefore feature
         existingElement.parentNode.moveBefore(preservedElt, existingElement)

www/content/examples/move-before/_index.md

@@ -0,0 +1,42 @@
++++
+title = "Experimental moveBefore() Support"
+insert_anchor_links = "left"
++++
+
+This page demonstrates the use of the experimental [`moveBefore()`](https://github.com/whatwg/dom/issues/1255) DOM
+API available in [Chrome Canary](https://www.google.com/chrome/canary/), which has been integrated into the `hx-preserve`
+attribute of htmx, if it is available.
+
+### Getting Chrome Canary & Enabling `moveBefore()`
+
+For the demo to work properly you will need to install Chrome Canary and enable the API:
+
+* Navigate to <chrome://flags/#atomic-move>
+* Enable "Atomic DOM move"
+
+htmx takes advantage of this API in the `hx-preserve` functionality if it is available, allowing you to mark an element
+as "preserved" and having all its state preserved as it moves between areas on the screen when new content is merged in.
+This is significantly better developer experience than current alternatives, such as morphing, which rely on the 
+structure of the new page being "close enough" to not have to move things like video elements.
+
+### Demo
+
+If you inspect the video below you will see that it is embedded in a `div` element.  If you click the "View Details" 
+link, which is boosted, you will transition to another page with a video element with the same id, but embedded in
+a `figure` element instead.  Without the `moveBefore()` functionality it is impossible to keep the video playing in
+this situation because "reparenting" (i.e. changing the parent of an element) causes it to reset.
+
+`moveBefore()` opens up a huge number of possibilities in web development by allowing developers to completely change
+the layout of a page while still preserving elements play state, focus, etc.  
+
+<div class="center">
+  <iframe hx-preserve="true" id="rick-roll" width="617" height="351" src="https://www.youtube.com/embed/GFq6wH5JR2A" 
+          title="Rick Astley - Never Gonna Give You Up (Official Music Video)" frameborder="0" 
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+          referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+   <div>
+   <a hx-boost="true" href="/examples/move-before/details">View Details &rarr;</a>
+   </div>
+</div>
+
+

www/content/examples/move-before/details.md

@@ -0,0 +1,39 @@
++++
+title = "Experimental moveBefore() Support"
+insert_anchor_links = "left"
++++
+
+### Demo
+
+Note that the video kept playing, despite the fact it is now a child of a `figure` element.  And you can click back
+and the video should continue to work as well.  I enjoy flipping back and forth.
+
+### Rick-Rolling
+
+<figure>
+  <iframe hx-preserve="true" id="rick-roll" width="617" height="351" src="https://www.youtube.com/embed/GFq6wH5JR2A" 
+          title="Rick Astley - Never Gonna Give You Up (Official Music Video)" frameborder="0" 
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+          referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<figcaption>A Classic Rick Roll</figcaption>
+</figure>
+
+#### Background
+
+Rickrolling or a Rickroll is an Internet meme involving the unexpected appearance of the music video to the 1987 hit
+song "Never Gonna Give You Up", performed by English singer Rick Astley. The aforementioned video has over 1.5 billion
+views on YouTube. The meme is a type of bait and switch, usually using a disguised hyperlink that leads to the music
+video. When one clicks on a seemingly unrelated link, the site with the music video loads instead of what was expected,
+and they have been "Rickrolled". The meme has also extended to using the song's lyrics, or singing it, in unexpected
+contexts. Astley himself has also been Rickrolled on several occasions.
+
+The meme grew out of a similar bait-and-switch trick called "duck rolling" that was popular on the 4chan website in
+2006. The video bait-and-switch trick grew popular on 4chan by 2007 during April Fools' Day and spread to other Internet
+sites later that year. The meme gained mainstream attention in 2008 through several publicised events, particularly when
+YouTube used it on its 2008 April Fools' Day event.
+
+Astley, who had only returned to performing after a 10-year hiatus, was initially hesitant about using his newfound
+popularity from the meme to further his career but accepted the fame by Rickrolling the 2008 Macy's Thanksgiving Day
+Parade with a surprise performance of the song. Since then, Astley has seen his performance career revitalized by the
+meme's popularity, and Rickrolling saw a massive resurgence online in the early 2020s.
+

www/static/src/htmx.js

@@ -1464,7 +1464,7 @@ var htmx = (function() {
   function restorePreservedElements() {
     const pantry = find('#--htmx-preserve-pantry--')
     if (pantry) {
-      for (const preservedElt of pantry.children) {
+      for (const preservedElt of [...pantry.children]) {
         const existingElement = find('#' + preservedElt.id)
         // @ts-ignore - use proposed moveBefore feature
         existingElement.parentNode.moveBefore(preservedElt, existingElement)

www/themes/htmx-theme/static/js/htmx.js

@@ -1464,7 +1464,7 @@ var htmx = (function() {
   function restorePreservedElements() {
     const pantry = find('#--htmx-preserve-pantry--')
     if (pantry) {
-      for (const preservedElt of pantry.children) {
+      for (const preservedElt of [...pantry.children]) {
         const existingElement = find('#' + preservedElt.id)
         // @ts-ignore - use proposed moveBefore feature
         existingElement.parentNode.moveBefore(preservedElt, existingElement)