diff options
| author | Nathaniel Sabanski <sabanski.n@gmail.com> | 2024-02-15 09:42:21 -0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-02-15 12:42:21 -0500 |
| commit | 63712ad5c2b26bd16af3b287e864313c3fbae199 (patch) | |
| tree | ef04a57860d53c93ea6381233d2058c9ad892cf4 | |
| parent | f8982c9384ae63e934fd5718633b275a4ba3fdcc (diff) | |
| download | htmx-63712ad5c2b26bd16af3b287e864313c3fbae199.tar.gz htmx-63712ad5c2b26bd16af3b287e864313c3fbae199.zip | |
Docs: Hotwire migration guide: Examples for hx-on! Turbo Streams commentary. (#2306)
* Docs: Hotwire migration guide: Examples for hx-on. Turbo Streams commentary.
* Docs: Hotwire migration guide: Examples for hx-on. Turbo Streams commentary
* Docs: Hotwire migration guide: Examples for hx-on. Turbo Streams commentary
* Docs: Hotwire migration guide: Examples for hx-on. Turbo Streams commentary
| -rw-r--r-- | www/content/migration-guide-hotwire-turbo.md | 18 |
1 files changed, 15 insertions, 3 deletions
diff --git a/www/content/migration-guide-hotwire-turbo.md b/www/content/migration-guide-hotwire-turbo.md index 8956223a..6d16e80d 100644 --- a/www/content/migration-guide-hotwire-turbo.md +++ b/www/content/migration-guide-hotwire-turbo.md @@ -10,7 +10,7 @@ The purpose of this guide is to provide common practices for "Hotwire Equivalent ## Turbo Drive * `<body hx-boost="true">` to enable a Turbo Drive-like experience. See: [hx-boost](@/attributes/hx-boost.md) -* 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) +* As with Turbo Drive, if the user has javascript disabled, `hx-boost` 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) @@ -23,12 +23,21 @@ addEventListener("htmx:afterOnLoad", (event) => { event.target.querySelectorAll("button").forEach(node => { node.disabled = false }) }) ``` +* Or, [hx-on](@/attributes/hx-on.md) may be used: + * `hx-on:submit='event.target.querySelectorAll("button").forEach(node => { node.disabled = true })'` + * `hx-on:htmx:afterOnLoad='event.target.querySelectorAll("button").forEach(node => { node.disabled = false })'` * Or, [hyperscript](https://hyperscript.org) may be used: `_="on submit toggle @disabled <button/> in me until htmx:afterOnLoad"` See: [Cookbook](https://hyperscript.org/cookbook/) ## Turbo Frames +* htmx combines all ideas of "Turbo Frames" into the base attributes. No `<turbo-frame>` required. * Lazy loading: `hx-trigger="load, submit"` See: [Handbook](https://turbo.hotwired.dev/reference/frames#lazy-loaded-frame) +## Turbo Streams + +* htmx combines all ideas of "Turbo Streams" into the base attributes. No `<turbo-stream>`, no `<template>` required. +* Note: Turbo Streams can perform many actions anywhere on a page (similar to [hx-select-oob](@/attributes/hx-select-oob.md) and [hx-swap-oob](@/attributes/hx-swap-oob.md)) while Turbo Frames only update what is wrapped within `<turbo-frame> .. </turbo-frame>` + ## Events * Intercepting or Pausing Events. `htmx:config-request` is equivalent to `turbo:before-fetch-request` See: [Handbook](https://turbo.hotwired.dev/handbook/drive#pausing-requests) @@ -40,11 +49,14 @@ document.body.addEventListener('htmx:configRequest', (event) => { }) ``` -* Or, a condition call may be used: `hx-trigger="submit[action(target)]"` See: [hx-trigger](@/attributes/hx-trigger.md) +* Or, use an [hx-trigger](@/attributes/hx-trigger.md) condition: `hx-trigger="submit[action(target)]"` * Does not currently resolve async calls such as `fetch`. See: https://github.com/bigskysoftware/htmx/issues/912 -* Or, [hyperscript](https://hyperscript.org) may be used: `_="on submit halt the event action(target) trigger ready"` `hx-trigger="ready"` +* Or, use [hx-on](@/attributes/hx-on.md): `hx-on:click="event.preventDefault(); action(this); htmx.trigger(this, 'ready')"` `hx-trigger="ready"` +* Or, use [hyperscript](https://hyperscript.org): `_="on submit halt the event action(target) trigger ready"` `hx-trigger="ready"` * Will resolve async calls such as `fetch`. See: [async transparency](https://hyperscript.org/docs/#async) ## Stimulus +* [hx-on](@/attributes/hx-on.md) provides a simple, inline, vanilla substitute for a wide variety of front end use cases. * [hyperscript](https://hyperscript.org) is a close analogue and an official companion project to htmx, but the two projects are entirely separated and can be used exclusively from each other or any other library. +* For other options, see: [htmx: Scripting](/docs/#scripting) |