diff --git a/www/examples.md b/www/examples.md index 596baae4..6380a41c 100644 --- a/www/examples.md +++ b/www/examples.md @@ -39,3 +39,7 @@ You can copy and paste them and then adjust them for your needs. | [Sortable](/examples/sortable) | Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering | [Updating Other Content](/examples/update-other-content) | Demonstrates how to update content beyond just the target elements | [Confirm](/examples/confirm) | Demonstrates how to implement a custom confirmation dialog with htmx + +## Migrating from Hotwire / Turbo ? + +For common practices see the [Hotwire / Turbo to htmx Migration Guide](/migration-guide-hotwire-turbo). diff --git a/www/migration-guide-hotwire-turbo.md b/www/migration-guide-hotwire-turbo.md new file mode 100644 index 00000000..abe5f1a7 --- /dev/null +++ b/www/migration-guide-hotwire-turbo.md @@ -0,0 +1,56 @@ +--- +layout: layout.njk +title: Hotwire / Turbo ➡️ htmx Migration Guide +--- + +# Hotwire / Turbo ➡️ htmx Migration Guide + +The purpose of this guide is to provide common practices for "Hotwire Equivalent" features in htmx. + +* htmx is focused on a set of transparent, highly flexible extensions of html to its logical conclusion as a hypertext. +* Hotwire / Turbo is focused on a smooth out of the box experience, but is more opinionated and less flexible. + +## Turbo Drive + +* `` to enable a Turbo Drive-like experience. See: [hx-boost](/attributes/hx-boost) +* As with Turbo Drive, if the user does not have javascript enabled, the site will continue to work. See: [Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement) +* `hx-boost="false"` is equivalent to `data-turbo="false"` and used to disable boost on specific links or forms. See: [Handbook](https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms) +* Redirect after form submission (302, 303, 307, 3xx) `hx-target="body" hx-swap="outerHTML" hx-push-url="true"` See: [Handbook](https://turbo.hotwired.dev/handbook/drive#redirecting-after-a-form-submission) +* Disable buttons on form submission See: [Handbook](https://turbo.hotwired.dev/handbook/drive#form-submissions) + * Only disable buttons because `
` does not submit disabled fields. See: [MDN: disabled](https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled) +```javascript +addEventListener("submit", (event) => { + event.target.querySelectorAll("button").forEach(node => { node.disabled = true }) +}) +addEventListener("htmx:afterOnLoad", (event) => { + event.target.querySelectorAll("button").forEach(node => { node.disabled = false }) +}) +``` +* Or, [hyperscript](https://hyperscript.org) may be used: `_="on submit toggle @disabled