An HTML over-the-wire plugin / Magic function

[james0r]

I've tried Htmx and as cool as it is I find I don't need most of it. I have a simple helper function that I use to fetch some html and swap things out but I think it would be super cool if there was A) either a core helper for this or b) a solid plugin handles swapping and possibly more.

I just made a little proof of concept that is super minimal and probably unsafe but hopefully shows what i'm looking to do:

export default function (Alpine) {

  const get = async (endpoint) => {
    return await fetch(endpoint)
      .then((response) => response.text())
      .then((responseText) => {
        return new DOMParser().parseFromString(responseText, 'text/html')
      })
  }

  Alpine.magic('wire', (el, { Alpine }) => (endpoint, select, target) => {
    endpoint ? endpoint : window.location.href

    console.log(endpoint)

    get(endpoint).then((response) => {
      const selected = response.querySelector(select)
      const targeted = document.querySelector(target)

      if (targeted) {
        targeted.innerHTML = selected.innerHTML
      } else {
        el.innerHTML = selected.innerHTML
      }
    })
  })
}

Usage:

<div id="source-container">
  I'm some source content
</div>
<button @click="$wire('/pages/example-page', '#source-container', '#target-container', 'innerHTML')">
  Click me
</button>
<div id="target-container">
  I'm some target content
</div>

The last argument would be the swap method that I've yet to implement.

Be curious to hear some thoughts on this. Thanks!

[ekwoka]

I do have a plugin that offers a bit of this functionality

https://www.npmjs.com/package/@ekwoka/x-ajax

That being said, in projects I've needed to do this I've used some different code, but that was broadly for larger "replace whole main section to be a different page" contexts, usually relying on Alpine morph most of the time except for components that didn't play nicely with being morphed.

This kind of functionality will almost definitely not be added to Alpine core, as Alpine is primarily made to work with Livewire so the core wouldn't include things not relevant to that case.

[james0r]

Just checked out the plugin. Looks cool. I like the idea of it implementing as a magic function so that I can trigger things easily using @ and x-on. I'll just keep plugging on this and definitely already using your plugin as a reference. Appreciate it!

[james0r]

Added some more swap styles and outerHTML uses Alpine.morph if it's available.

https://github.com/james0r/slayed/tree/main/src/alpine/plugins/wire

[ekwoka]

Good effort. There are a lot of modern methods you can use to simplify it.

Like parent.insertBefore(target, newChild) you can just do target.before(newChild)

similarly, for the SwapInnerHTML you can just do parent.replaceChildren(...newChildren)

[james0r]

Thanks. All that insertNodeBefore stuff was just pulled right out of HTMX which I believe is there so that can granularly call life cycle methods on each individual swap out.

But I'm not doing that so you're absolutely right I can really simplify it a bit.

[ekwoka]

I think it's just there because they have some idea that they should support 8 year old browsers...

But in this case, I think literally every browser Alpine can run one supports those methods.

[james0r]

Kinda reigned in my ambitions with this thing and renamed it $swap.

Figured out they were using insertBefore maybe because they can pass null as a second param to basically append instead of prepending.

Got most swap styles working and a demo up. Repo here.