htmx icon indicating copy to clipboard operation
htmx copied to clipboard

[Website] mention we can use hx-swap in SSE extension docs

Open flaviocopes opened this issue 2 years ago • 2 comments

Using the SSE extension I was a bit confused about how to append new messages at the end of a list, as by default the latest message is swapped with a newer one, searched on Discord before occurring to me I could use hx-swap.

https://discord.com/channels/725789699527933952/1171616558330679306

Maybe worth mentioning in the docs?

Got this docs update proposal if I can do a PR (saw it must be pre-approved via issues) https://github.com/flaviocopes/htmx/commit/3480c1c2bea0383cebad141b40b63b7ca2cf1d7d


Swap Strategy

You can use any hx-swap strategy for the incoming messages, for example to append a message at the end of a list, add hx-swap='beforeend':

  <div
    hx-ext='sse'
    sse-connect='/event-source'
    sse-swap='message'
    hx-swap='beforeend'>
  </div>

flaviocopes avatar Jan 16 '24 09:01 flaviocopes

Totally agree, it wasn't immediately obvious to me that you can combine with other things like hx-swap until I searched github issues and found this (thanks @flaviocopes!)

danawoodman avatar Jan 25 '24 05:01 danawoodman

xref #844

itamarhaber avatar Feb 09 '24 00:02 itamarhaber