Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support hx-swap modifiers in a type-safe way #1

Closed
angelofallars opened this issue Nov 24, 2023 · 5 comments · Fixed by #4
Closed

Support hx-swap modifiers in a type-safe way #1

angelofallars opened this issue Nov 24, 2023 · 5 comments · Fixed by #4
Assignees
Labels
enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed

Comments

@angelofallars
Copy link
Owner

angelofallars commented Nov 24, 2023

After some research, it turns out that HTMX supports modifier attributes in hx-swap. E.g. swap:1s, settle:1s and scroll:bottom. https://htmx.org/attributes/hx-swap/

There's a lot of possible modifier attributes, but most of them can be represented by a finite amount of values. I'd like to see an implementation that is type-safe as much as possible.

Example possible implementations:

htmx.NewResponse().
  Reswap(htmx.SwapWithAttr(htmx.SwapOuterHTML, htmx.ModFocusScroll(true))
// [Output header]
// HX-Reswap: outerHTML focus-scroll:true

htmx.NewResponse().
  Reswap(htmx.SwapWithAttr(htmx.SwapBeforeEnd, htmx.ModScrollBottom())
// [Output header]
// HX-Reswap: beforeEnd scroll:bottom

htmx.NewResponse().
  Reswap(htmx.SwapWithAttr(htmx.SwapInnerHTML, htmx.ModShowTop("#another-div"))
// [Output header]
// HX-Reswap: innerHTML show:#another-div:top

Edit: This possible implementation looks good too, implementing methods on the htmx.swapStrategy type (which is just derived from string) that return a new swapStrategy value:

htmx.NewResponse().
  Reswap(htmx.SwapOuterHTML.FocusScroll(true))
// [Output header]
// HX-Reswap: outerHTML focus-scroll:true

htmx.NewResponse().
  Reswap(htmx.SwapBeforeEnd.ScrollBottom())
// [Output header]
// HX-Reswap: beforeEnd scroll:bottom

htmx.NewResponse().
  Reswap(htmx.SwapInnerHTML.ShowTop("#another-div"))
// [Output header]
// HX-Reswap: innerHTML show:#another-div:top
@angelofallars angelofallars added enhancement New feature or request help wanted Extra attention is needed good first issue Good for newcomers labels Nov 24, 2023
@rafiramadhana
Copy link
Contributor

rafiramadhana commented Nov 24, 2023

@angelofallars is there anything that is expected to change beside the headers? (htmx.Response.Headers())

@rafiramadhana
Copy link
Contributor

rafiramadhana commented Nov 24, 2023

btw is it possible for the hx-swap to have more than one modifiers?

something like

// HX-Reswap: outerHTML focus-scroll:true scroll:bottom

@angelofallars
Copy link
Owner Author

btw is it possible for the hx-swap to have more than one modifiers?

something like

// HX-Reswap: outerHTML focus-scroll:true scroll:bottom

Yes, with method chaining:

htmx.SwapOuterHTML.FocusScroll(true).ScrollBottom()

@rafiramadhana
Copy link
Contributor

Yes, with method chaining:

i see, i think the requirement is clear enough now

i will create a draft PR for #1

@rafiramadhana
Copy link
Contributor

@angelofallars would you mind to check the draft PR? #3

it covers the proposal on how to set modifiers

but it has not covered all of the mentioned modifiers in https://htmx.org/attributes/hx-swap

the remaining modifiers will be covered once we agreed with the proposal

thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed
Projects
None yet
2 participants