[rorylaitila]

I didn't see if you were doing this, but there is an additional use case that I had when using hot swapping like HTMX: updating other links on the page to reflect the URL state, when those links are outside of the swapped content.

While the server can use the URLs to update the links in the new HTML, if other links outside that content should also reflect the changes params, you need to manually update them.

In my progressive enhancement library I call this 'sync-params' https://github.com/roryl/zsx?tab=readme-ov-file#synchronize-...

[ashwinsundar]

You don't need to do anything different to the other URLs on the page, by default all parameters are passed along in every request, so you just need to retrieve any expected url parameters in the server code

https://htmx.org/attributes/hx-params/

[trentnix]

Isn’t that what hx-swap-oob is for?

[rorylaitila]

Maybe, I'm not an HTMX user, but looking at hx-swap-oob I think that solves another issue. My need was when other links can exist in any place, and they need to match the URL after its clicked. I didn't want to have the performance hit or remember to add extra swaps just to get links up to date. The feature basically is "when a param is marked to be synced, ensure all links on the page are updated to match the changed param"

[trentnix]

I’ve been building a Golang web platform for my own web apps and I wired up toaster notifications using hx-swap-oob. I just populate a ‘notifications’ slice in my view model and hx-swap-oob makes sure my toaster messages get loaded irrespective of what content is actually being swapped.

It sounds like a similar use case to yours.

[ashwinsundar]

I have something similar setup for toast notifications in Django (Python). I have a notifications "partial" defined, which gets returned as part of an out-of-band swap by any view function that desires to use it. This includes other partials as well. It's how I chain fragment replacements together.

As an aside, I love that we can have this conversation - people in entirely different stacks can talk a similar language, through the glue of HTMX. This is why htmx is good for web development

[rorylaitila]

Gotcha, I think I looked at hx-swap-oob before for inspiration, but didn't see it working for this case, I'll look again.

[PenguinCoder]

Are you able to share the code you have for this? I have a similar need use case and using golang and Htmx for my app.

[trentnix]

I'll eventually make my repo public on Github, but I'm hesitant because it's still pretty half-baked. In the meantime, I'll do my best to capture the essentials. It's been a minute since I implemented it, so I apologize if I miss some details.

I use the same ViewModel structure for all renders, a struct called Content. It has a members to help with rendering and whatnot, and the data being rendered in my HTML template is stored in a Data type for the content that will be displayed:

  Data any

So whether I'm rendering complex data, a form, or just a snippet of text, that's where it lives. That allows for all sorts of patterns for rendering data and re-using templates if that's what you want to do. Or you can just keep things simple.

Hat-tip to the Pagoda framework, which was used sometimes as an inspiration and other times as a guideline for this (and other) patterns that I used. You can find it here: https://github.com/mikestefanello/pagoda

I also have, as part of my ViewModel, a `Notifications` slice that specifies messages to send to the user and their type:

  Notifications []messages.Notification

I have a HTML layout for my full page that includes a section that CSS uses to pick up notifications and display them via a toaster message:

  <div id="user-notifications" class="toaster-container">
    {{ range .Notifications }}
      <div class="toaster{{ if .IsSuccess }} success{{ else if .IsError }} error{{ end }}">
        {{ .Message }}
      </div>
    {{ end }}
  </div>

I managed to get it working without any need for JavaScript (other than what HTMX needs to work).

My partial renders use a layout that includes a section for the partially rendered code and my oob Notifications:

  {{ block "Content" . }}
      Loading content.
  {{ end }}

  <div id="user-notifications" class="toaster-container" hx-swap-oob="true">
      {{ range .Notifications }}
      <div class="toaster{{ if .IsSuccess }} success{{ else if .IsError }} error{{ end }}">
        {{ .Message }}
      </div>
    {{ end }}
  </div>

So the hx-swap-oob results in my user-notifications <div> being replaced with new notifications content, if there is any. I have a base renderer that handles injecting the layouts and injecting data into `Notifications`. As a result, my handlers can be generally oblivious that this is all happening underneath.

This model can work for updating links, updating breadcrumbs, writing messages to the console, or whatever.

I'm still scratching the surface with HTMX, but I'm convinced HTMX is perfectly appropriate and a much simpler alternative for 95% of the web dev being done today.